From 70e44f705de103a2b22cc820f147854b326b8227 Mon Sep 17 00:00:00 2001
From: Anas Rashid <anasrasheed22@gmail.com>
Date: Fri, 9 Oct 2026 15:27:30 +0200
Subject: [PATCH] =?UTF-8?q?Header:=20the=20font=20is=20a=20list=20(=D9=86?=
 =?UTF-8?q?=D8=B3=D8=AE=20/=20=D9=86=D8=B3=D8=AA=D8=B9=D9=84=DB=8C=D9=82,?=
 =?UTF-8?q?=20each=20in=20its=20own=20font);=20the=20word=20book=20icon=20?=
 =?UTF-8?q?has=20=D8=B9,=20not=20a=20Latin=20A;=20log=20out=20lines=20up?=
 =?UTF-8?q?=20with=20the=20other=20icons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 web/src/components/Icon.astro |  3 ++-
 web/src/layouts/Base.astro    | 17 +++++++++--------
 web/src/styles/global.css     |  9 +++++++++
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/web/src/components/Icon.astro b/web/src/components/Icon.astro
index 005afb5c..0e6ace67 100644
--- a/web/src/components/Icon.astro
+++ b/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"/>',
diff --git a/web/src/layouts/Base.astro b/web/src/layouts/Base.astro
index 3aafe70d..5d6abd4e 100644
--- a/web/src/layouts/Base.astro
+++ b/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');
-      const label = () => (fontBtn.title = `خط: ${root.classList.contains('nastaliq') ? 'نستعلیق' : 'نسخ'}`); // an icon; the name is in the tooltip
-      label();
-      fontBtn.onclick = () => {
-        root.classList.toggle('nastaliq');
-        try { localStorage.setItem('divan-font', root.classList.contains('nastaliq') ? 'nastaliq' : 'naskh'); } catch (e) {}
-        label();
+      // the reading font, picked from a list (each name shown in its own font)
+      const fontPick = document.getElementById('font-select');
+      fontPick.value = root.classList.contains('nastaliq') ? 'nastaliq' : 'naskh';
+      fontPick.onchange = () => {
+        root.classList.toggle('nastaliq', fontPick.value === 'nastaliq');
+        try { localStorage.setItem('divan-font', fontPick.value); } catch (e) {}
       };
       // Urdu on-screen keyboard, Gboard/Windows Urdu layout
       const BASE = [[...'طصھدٹپتبجح'], [...'مورنلہاکی'], [...'قفےسشغع']];
diff --git a/web/src/styles/global.css b/web/src/styles/global.css
index a3126081..8d7b7d2c 100644
--- a/web/src/styles/global.css
+++ b/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; }