From aa57dcd78c9277c91f54360c8841809a1a2771e9 Mon Sep 17 00:00:00 2001
From: Anas Rashid <anasrasheed22@gmail.com>
Date: Sat, 10 Oct 2026 00:24:30 +0200
Subject: [PATCH] =?UTF-8?q?Tags=20at=20the=20end=20of=20a=20page:=20=C2=AB?=
 =?UTF-8?q?=D9=B9=DB=8C=DA=AF=C2=BB=20at=20the=20start=20of=20the=20line,?=
 =?UTF-8?q?=20the=20tags=20following=20it=20on=20the=20same=20line=20and?=
 =?UTF-8?q?=20wrapping=20across=20the=20width=20when=20opened=20(a=20sampl?=
 =?UTF-8?q?e=20on=20/design)?=
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/TagsBox.astro | 14 ++++++++------
 web/src/pages/design.astro       |  4 ++++
 web/src/styles/global.css        | 20 +++++++++++---------
 3 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/web/src/components/TagsBox.astro b/web/src/components/TagsBox.astro
index 2e7a81a4..8ff6fcee 100644
--- a/web/src/components/TagsBox.astro
+++ b/web/src/components/TagsBox.astro
@@ -1,12 +1,14 @@
 ---
-// a page's tags, folded away at the end of its content (#52): "ٹیگ" and how many; open to see the chips
-import Tags from './Tags.astro';
+// a page's tags at the end of its content (#52): «ٹیگ» and how many, at the start of the line; opened, the tags follow it
+// on the same line and wrap across the content's width. A visually hidden checkbox holds open/closed (no script needed)
 import { ud } from '../lib/urdu';
 const { tags } = Astro.props as { tags: { type: string; name: string }[] };
+const href = (t: { type: string; name: string }) => `/tag/${encodeURIComponent(t.type)}/${encodeURIComponent(t.name)}`;
 ---
 {tags.length > 0 && (
-  <details class="tags-box">
-    <summary>ٹیگ <small class="muted">{ud(tags.length)}</small></summary>
-    <Tags tags={tags} />
-  </details>
+  <div class="tags-box">
+    <input type="checkbox" id="tags-open" class="sr-only" />
+    <label for="tags-open" class="tags-toggle">ٹیگ <small class="muted">{ud(tags.length)}</small></label>
+    {tags.map((t) => <a class="tag-chip" href={href(t)}><small>{t.type}</small> {t.name}</a>)}
+  </div>
 )}
diff --git a/web/src/pages/design.astro b/web/src/pages/design.astro
index 34c4df1b..c517c6ac 100644
--- a/web/src/pages/design.astro
+++ b/web/src/pages/design.astro
@@ -3,6 +3,7 @@
 // Switch palette, light/dark and font from the header's display settings.
 import Base from '../layouts/Base.astro';
 import Icon from '../components/Icon.astro';
+import TagsBox from '../components/TagsBox.astro';
 if (import.meta.env.PROD) return new Response(null, { status: 404 });
 const colours = [
   ['surfaces', ['surface-page', 'surface-raised', 'surface-poem', 'surface-sunken']],
@@ -72,6 +73,9 @@ const radii = ['sm', 'md', 'lg', 'pill'];
       <span class="status s-published">شائع شدہ</span><span class="status s-returned">واپس</span>
     </p>
 
+    <h2>ٹیگ (صفحے کے آخر میں)</h2>
+    <TagsBox tags={['عشق', 'فراق', 'وصال', 'تصوف', 'شراب', 'بہار', 'خزاں', 'دل', 'حسن', 'وفا', 'جفا', 'تقدیر', 'دنیا', 'موت', 'زندگی', 'یاد'].map((name, i) => ({ type: i % 3 ? 'موضوع' : 'صنف', name }))} />
+
     <h2>خانے</h2>
     <form class="account-form" onsubmit="return false">
       <label>نام <input value="مرزا غالب" /></label>
diff --git a/web/src/styles/global.css b/web/src/styles/global.css
index 3e1edead..dda64e75 100644
--- a/web/src/styles/global.css
+++ b/web/src/styles/global.css
@@ -912,15 +912,17 @@ p, li { text-wrap: pretty; }
 .c-menu i { width: 17px; height: 17px; background-color: var(--text-muted); }
 .c-menu .g-bm { --m: var(--bm-outline); } .c-menu [data-on] .g-bm { --m: var(--bm-filled); background-color: var(--active); }
 .c-menu .g-nt { --m: var(--nt-outline); } .c-menu .g-sh { --m: var(--sh-mask); } .c-menu .g-dl { --m: var(--dl-mask); }
-/* a page's tags, folded at the end of its content */
-.tags-box { max-width: 760px; margin: 16px auto 10px; text-align: center; }
-.tags-box > summary { display: inline-flex; align-items: center; gap: 6px; padding: 1px 14px; border: 1.5px solid var(--border); border-radius: var(--r-pill);
-  background: var(--surface-sunken); font: var(--fs-sm)/1.8 var(--font-ui); cursor: pointer; list-style: none; }
-.tags-box > summary::-webkit-details-marker { display: none; }
-.tags-box > summary::after { content: '⌄'; transition: transform .2s; }
-.tags-box[open] > summary::after { transform: rotate(180deg); }
-.tags-box > summary:hover { border-color: var(--active); color: var(--active); }
-.tags-box .tag-chips { margin-top: 10px; }
+/* a page's tags at the end of its content: «ٹیگ» at the start of the line; opened, the tags follow it and wrap across the width */
+.tags-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 16px 0 10px; }
+.tags-box > .tag-chip { display: none; }
+.tags-box > :checked ~ .tag-chip { display: inline-flex; animation: rise .2s ease-out both; }
+.tags-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 1px 14px; border: 1.5px solid var(--border); border-radius: var(--r-pill);
+  background: var(--surface-sunken); font: var(--fs-sm)/1.8 var(--font-ui); cursor: pointer; user-select: none; }
+.tags-toggle::after { content: '⌄'; transition: transform .2s; }
+.tags-box > :checked + .tags-toggle { border-color: var(--active); color: var(--active); }
+.tags-box > :checked + .tags-toggle::after { transform: rotate(-90deg); } /* points along the line, towards the tags */
+.tags-toggle:hover { border-color: var(--active); color: var(--active); }
+.tags-box > :focus-visible + .tags-toggle { outline: 2px solid var(--focus); outline-offset: 2px; }
 /* how to use the site */
 .help { max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
 .help section { padding: 10px 16px 6px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-raised); }