Profile settings

src/lib/a/nav/ANavbar.svelte

@@ -11,7 +11,6 @@
   import Profile from "$components/util/Profile.svelte";
 
   import { ChevronDownOutline } from "flowbite-svelte-icons";
-  import { AThemeToggleMini } from "$lib/a";
 
   let menu2 = [
     { name: 'Publications', href: '/', help: 'Browse publications' },
@@ -29,12 +28,12 @@
 
 </script>
 
-<Navbar id="navi" class="fixed start-0 top-0 z-50 flex flex-row bg-primary-50 dark:bg-primary-800"
+<Navbar id="navi" class="fixed start-0 top-0 z-50 flex flex-row bg-primary-50 dark:bg-primary-1000"
         navContainerClass="flex-row items-center !p-0">
     <NavBrand href="/">
       <div class="flex flex-col">
-        <h1 class="text-2xl font-bold mb-0">Alexandria</h1>
-        <p class="text-xs font-semibold tracking-wide max-sm:max-w-[11rem] mb-0">READ THE ORIGINAL. MAKE CONNECTIONS. CULTIVATE KNOWLEDGE.</p>
+        <h1 class="text-2xl font-bold mb-0 dark:text-primary-100 hover:dark:text-highlight">Alexandria</h1>
+        <p class="text-xs font-semibold tracking-wide max-sm:max-w-[11rem] mb-0 dark:text-primary-200 ">READ THE ORIGINAL. MAKE CONNECTIONS. CULTIVATE KNOWLEDGE.</p>
       </div>
     </NavBrand>
     <div class="flex md:order-2">
@@ -53,9 +52,6 @@
           </a>
         {/snippet}
       </MegaMenu>
-      <NavLi>
-        <AThemeToggleMini />
-      </NavLi>
       <DarkMode />
     </NavUl>
 </Navbar>

src/lib/a/primitives/AThemeToggleMini.svelte

@@ -1,19 +1,28 @@
 <script lang="ts">
   import { ChevronDownOutline } from "flowbite-svelte-icons";
-  import { Dropdown, DropdownGroup, NavLi, Radio } from "flowbite-svelte";
+  import { Button, Dropdown, DropdownGroup, Radio } from "flowbite-svelte";
+  import { onMount } from "svelte";
+  import { setTheme, theme as themeStore } from "$lib/stores/themeStore";
 
-  let theme = $state('papyrus'); // e.g. 'ocean' or '' for default
-  const apply = () => document.documentElement.setAttribute('data-theme', theme);
-  $effect(apply);
+  let theme = $state<string>("light");
+
+  onMount(() => {
+    return themeStore.subscribe((v) => (theme = String(v)));
+  });
+
+  // Persist and apply whenever the selection changes
+  $effect(() => {
+    setTheme(theme);
+  });
 </script>
 
-<NavLi>
-  Theme {theme}<ChevronDownOutline class="text-primary-800 ms-2 inline h-6 w-6 dark:text-white" />
-</NavLi>
+<Button>
+  Theme {theme}<ChevronDownOutline class="ms-2 inline h-6 w-6" />
+</Button>
 <Dropdown simple class="w-44">
   <DropdownGroup class="space-y-3 p-3">
     <li>
-      <Radio name="group1" bind:group={theme} value="papyrus">Papyrus</Radio>
+      <Radio name="group1" bind:group={theme} value="light">Light</Radio>
     </li>
     <li>
       <Radio name="group1" bind:group={theme} value="ocean">Ocean</Radio>

src/lib/a/reader/ATechToggle.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
   import { showTech } from '$lib/stores/techStore.ts';
-  import { Toggle } from "flowbite-svelte";
+  import { Toggle, P } from "flowbite-svelte";
   let label = 'Show technical details';
   $: checked = $showTech;
 </script>
 
-<div class="inline-flex items-center gap-2 select-none">
+<div class="inline-flex items-center gap-2 select-none my-3">
   <Toggle {checked} ontoggle={() => $showTech = checked} aria-label={label} />
-  <span class="text-sm">{label}</span>
+  <P class="text-sm">{label}</P>
 </div>

src/lib/components/util/Profile.svelte

@@ -2,7 +2,7 @@
   import CopyToClipboard from "$components/util/CopyToClipboard.svelte";
   import NetworkStatus from "$components/NetworkStatus.svelte";
   import { loginWithAmber, loginWithExtension, loginWithNpub, logoutUser, userStore } from "$lib/stores/userStore";
-  import { Avatar, Dropdown, DropdownGroup, DropdownHeader, DropdownItem } from "flowbite-svelte";
+  import { Avatar, Dropdown, DropdownGroup, DropdownHeader, DropdownItem, P } from "flowbite-svelte";
   import { Book, Globe, Loader, Smartphone } from "@lucide/svelte";
   import { get } from "svelte/store";
   import { goto } from "$app/navigation";
@@ -414,16 +414,14 @@
           </span>
         </DropdownItem>
         {#if result}
-          <DropdownHeader>
-            <div
-            class="absolute right-0 top-10 z-50 bg-gray-100 p-3 rounded text-sm break-words whitespace-pre-line max-w-lg shadow-lg border border-gray-300"
-          >
+          <DropdownHeader class="flex gap-3">
+            <P class="text-xs">
               {result}
+            </P>
             <button
-              class="ml-2 text-gray-500 hover:text-gray-700"
+              class="inline ml-2 text-gray-500 hover:text-gray-700"
               onclick={() => (result = null)}>✖</button
             >
-          </div>
           </DropdownHeader>
         {/if}
       </DropdownGroup>

src/lib/stores/themeStore.ts

@@ -1,6 +1,6 @@
 import { writable } from 'svelte/store';
 
-const KEY = 'theme';
+const KEY = 'alexandria/theme';
 
 const initial =
   (typeof localStorage !== 'undefined' && localStorage.getItem(KEY)) ||

src/routes/profile/+page.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
-  import { AAlert, AProfilePreview } from "$lib/a";
+  import { AAlert, AProfilePreview, AThemeToggleMini } from "$lib/a";
   import CommentBox from "$lib/components/CommentBox.svelte";
   import CommentViewer from "$lib/components/CommentViewer.svelte";
   import { userStore } from "$lib/stores/userStore";
   import { getUserMetadata } from "$lib/utils/nostrUtils";
   import type { NDKEvent } from "$lib/utils/nostrUtils";
   import { getNdkContext } from "$lib/ndk.ts";
+  import { Heading } from "flowbite-svelte";
+  import ATechToggle from "$lib/a/reader/ATechToggle.svelte";
 
   // State
   let user = $state($userStore);
@@ -82,6 +84,21 @@
     <div class="flex flex-col w-full max-w-5xl my-6 px-4 mx-auto gap-6">
       <AProfilePreview user={user} profile={profile} loading={loading} error={error} isOwn={!!user?.signedIn && (!profileEvent?.pubkey || profileEvent.pubkey === user.pubkey)} />
 
+      <div class="mt-6">
+        <Heading tag="h3" class="h-leather mb-4">
+          Settings
+        </Heading>
+        <!-- Theme and tech settings -->
+        <ul>
+          <li>
+            <ATechToggle />
+          </li>
+          <li>
+            <AThemeToggleMini />
+          </li>
+        </ul>
+      </div>
+
       {#if profileEvent}
         <div class="main-leather flex flex-col space-y-6">
           <CommentViewer event={profileEvent} />