web/src/components/TagsBox.astro

@@ -1,14 +1,12 @@
 ---
-// 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)
+// 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';
 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 && (
-  <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>
+  <details class="tags-box">
+    <summary>ٹیگ <small class="muted">{ud(tags.length)}</small></summary>
+    <Tags tags={tags} />
+  </details>
 )}

web/src/pages/design.astro

@@ -3,7 +3,6 @@
 // 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']],
@@ -73,9 +72,6 @@ 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>

web/src/styles/global.css

@@ -912,17 +912,15 @@ 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 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; }
+/* 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; }
 /* 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); }