Header: the font is a list (نسخ / نستعلیق, each in its own font); the word book icon has ع, not a Latin A; log out lines up with the other icons

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/components/Icon.astro

@@ -6,7 +6,8 @@ const PATHS = {
   admin: '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/>',
   edit: '<path d="M12 20h9"/><path d="M16.376 3.622a1 1 0 0 1 3.002 3.002L7.368 18.635a2 2 0 0 1-.855.506l-2.872.838a.5.5 0 0 1-.62-.62l.838-2.872a2 2 0 0 1 .506-.854z"/>',
   bookmark: '<path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/>',
-  words: '<path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"/><path d="m8 13 4-7 4 7"/><path d="M9.1 11h5.7"/>',
+  // the word book: a book with the letter ع (an Urdu letter, not a Latin A)
+  words: '<path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"/><text x="12.4" y="14.6" text-anchor="middle" font-size="15" font-weight="700" font-family="Noto Naskh Arabic, serif" fill="currentColor" stroke="none">ع</text>',
   user: '<circle cx="12" cy="8" r="5"/><path d="M20 21a8 8 0 0 0-16 0"/>',
   login: '<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><path d="m10 17 5-5-5-5"/><path d="M15 12H3"/>',
   logout: '<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="m16 17 5-5-5-5"/><path d="M21 12H9"/>',

web/src/layouts/Base.astro

@@ -52,7 +52,9 @@ import Icon from '../components/Icon.astro';
           {Astro.locals.user
             ? <a class="icon-btn" href="/account" title={`اکاؤنٹ: ${Astro.locals.user.full_name || Astro.locals.user.email}`} aria-label="اکاؤنٹ"><Icon name="user" /></a>
             : <a class="icon-btn" href={`/signin?next=${encodeURIComponent(Astro.url.pathname)}`} title="لاگ ان" aria-label="لاگ ان"><Icon name="login" /></a>}
-          <button type="button" class="icon-btn" id="font-toggle" aria-label="خط بدلیں" title="خط: نسخ"><Icon name="font" /></button>
+          <label class="font-pick" title="خط"><Icon name="font" size={18} /><select id="font-select" aria-label="خط">
+            <option value="naskh" class="f-naskh">نسخ</option><option value="nastaliq" class="f-nastaliq">نستعلیق</option>
+          </select></label>
           <button type="button" class="icon-btn" id="theme-toggle" aria-label="روشن یا تاریک" title="روشن یا تاریک"><Icon name="theme" /></button>
           {Astro.locals.user && (
             <form method="post" action="/account" class="inline-form">
@@ -94,13 +96,12 @@ import Icon from '../components/Icon.astro';
     </footer>
     <script is:inline>
       const root = document.documentElement;
-      const fontBtn = document.getElementById('font-toggle');
+      // the reading font, picked from a list (each name shown in its own font)
-      const label = () => (fontBtn.title = `خط: ${root.classList.contains('nastaliq') ? 'نستعلیق' : 'نسخ'}`); // an icon; the name is in the tooltip
+      const fontPick = document.getElementById('font-select');
-      label();
+      fontPick.value = root.classList.contains('nastaliq') ? 'nastaliq' : 'naskh';
-      fontBtn.onclick = () => {
+      fontPick.onchange = () => {
-        root.classList.toggle('nastaliq');
+        root.classList.toggle('nastaliq', fontPick.value === 'nastaliq');
-        try { localStorage.setItem('divan-font', root.classList.contains('nastaliq') ? 'nastaliq' : 'naskh'); } catch (e) {}
+        try { localStorage.setItem('divan-font', fontPick.value); } catch (e) {}
-        label();
       };
       // Urdu on-screen keyboard, Gboard/Windows Urdu layout
       const BASE = [[...'طصھدٹپتبجح'], [...'مورنلہاکی'], [...'قفےسشغع']];

web/src/styles/global.css

@@ -42,6 +42,7 @@ a:hover { color: var(--brand); }
 .search-form input { flex: 1; padding: 4px 14px; padding-inline-end: 106px; }
 .search-form input:focus { outline: none; border-color: var(--gold); }
 .toggles { display: flex; gap: 6px; align-items: center; } /* icon buttons with tooltips */
+.toggles form { display: flex; margin: 0; } /* the log-out button sits in a form: no line box of its own */
 /* controls keep Naskh at normal height whatever reading font is chosen */
 .search-form input { font-family: 'Noto Naskh Arabic', serif; line-height: 1.8; }
 
@@ -480,3 +481,11 @@ h1 + .muted { text-align: center; margin-top: 0; }
 .icon { flex: none; }
 .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
 .icon-btn.small { width: 30px; height: 30px; }
+/* the font picker in the header: the icon and a list; each name in its own font */
+.font-pick { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 4px 0 10px; border: 1.5px solid var(--border); border-radius: 999px;
+  background: var(--inner); color: var(--ink); cursor: pointer; }
+.font-pick:hover, .font-pick:focus-within { border-color: var(--brand); color: var(--brand); }
+.font-pick select { font: inherit; font-family: 'Noto Naskh Arabic', serif; font-size: .85rem; border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0 2px; }
+.font-pick select:focus { outline: none; }
+.font-pick .f-naskh { font-family: 'Noto Naskh Arabic', serif; }
+.font-pick .f-nastaliq { font-family: 'Noto Nastaliq Urdu', serif; }