@hutusi/amytis 1.6.0 → 1.7.0

package/src/components/SubscribePage.tsx

@@ -0,0 +1,298 @@
+'use client';
+
+import { useState } from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useLanguage } from './LanguageProvider';
+import { siteConfig } from '../../site.config';
+import { LuCheck, LuCopy, LuExternalLink, LuGithub, LuMail } from 'react-icons/lu';
+
+// ─── Platform SVG icons ────────────────────────────────────────────────────────
+
+function RssIcon() {
+  return (
+    <svg viewBox="0 0 24 24" className="w-5 h-5" fill="currentColor" aria-hidden="true">
+      <path d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19.01 7.38 20 6.18 20 4.98 20 4 19.01 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1z" />
+    </svg>
+  );
+}
+
+function TelegramIcon() {
+  return (
+    <svg viewBox="0 0 24 24" className="w-5 h-5" fill="currentColor" aria-hidden="true">
+      <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
+    </svg>
+  );
+}
+
+function WechatIcon() {
+  return (
+    <svg viewBox="0 0 24 24" className="w-5 h-5" fill="currentColor" aria-hidden="true">
+      <path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178A1.17 1.17 0 0 1 4.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178 1.17 1.17 0 0 1-1.162-1.178c0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 4.229 6.884 4.229.826 0 1.622-.12 2.361-.336a.722.722 0 0 1 .598.082l1.584.926a.272.272 0 0 0 .14.047c.134 0 .24-.111.24-.247 0-.06-.023-.12-.038-.177l-.327-1.233a.582.582 0 0 1-.023-.156.49.49 0 0 1 .201-.398C23.024 18.48 24 16.82 24 14.98c0-3.21-2.931-5.837-7.062-6.122zm-3.518 3.507c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.969-.982zm4.844 0c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.969-.982z" />
+    </svg>
+  );
+}
+
+function SubstackIcon() {
+  return (
+    <svg viewBox="0 0 24 24" className="w-5 h-5" fill="currentColor" aria-hidden="true">
+      <path d="M22.539 8.242H1.46V5.406h21.08v2.836zM1.46 10.812V24L12 18.11 22.54 24V10.812H1.46zM22.54 0H1.46v2.836h21.08V0z" />
+    </svg>
+  );
+}
+
+function XIcon() {
+  return (
+    <svg viewBox="0 0 24 24" className="w-5 h-5" fill="currentColor" aria-hidden="true">
+      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.742l7.775-8.906L2.003 2.25H8.08l4.261 5.628 5.903-5.628zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+    </svg>
+  );
+}
+
+// ─── Shared card wrapper ───────────────────────────────────────────────────────
+
+interface CardProps {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  children: React.ReactNode;
+  wide?: boolean;
+}
+
+function SubscribeCard({ icon, title, description, children, wide }: CardProps) {
+  return (
+    <div className={`rounded-2xl border border-muted/20 bg-muted/5 p-6 space-y-4${wide ? ' md:col-span-2' : ''}`}>
+      <div className="flex items-center gap-3">
+        <div className="w-9 h-9 rounded-lg bg-accent/10 flex items-center justify-center text-accent flex-shrink-0">
+          {icon}
+        </div>
+        <h2 className="font-serif font-bold text-xl text-heading">{title}</h2>
+      </div>
+      <p className="text-sm text-muted/70 leading-relaxed">{description}</p>
+      {children}
+    </div>
+  );
+}
+
+// ─── Main component ────────────────────────────────────────────────────────────
+
+export default function SubscribePage() {
+  const { t } = useLanguage();
+  const [copied, setCopied] = useState(false);
+
+  const { baseUrl, social, subscribe } = siteConfig;
+  const feedUrl = `${baseUrl}/feed.xml`;
+  const enc = encodeURIComponent(feedUrl);
+
+  const rssReaders = [
+    { name: 'Follow',     url: `https://app.follow.is/add?url=${enc}` },
+    { name: 'Feedly',     url: `https://feedly.com/i/subscription/feed/${enc}` },
+    { name: 'Inoreader',  url: `https://www.inoreader.com/?add_feed=${enc}` },
+    { name: 'NewsBlur',   url: `https://newsblur.com/?url=${enc}` },
+    { name: 'The Old Reader', url: `https://theoldreader.com/feeds/subscribe?url=${enc}` },
+  ];
+
+  const hasSubstack = !!subscribe?.substack;
+  const hasEmail    = !!subscribe?.email;
+  const hasTelegram = !!subscribe?.telegram;
+  const hasWechat   = !!subscribe?.wechat?.qrCode;
+  const hasNewsletter = hasSubstack || hasEmail;
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(feedUrl);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // fallback: select text — clipboard API may not be available in all contexts
+    }
+  };
+
+  return (
+    <div className="max-w-3xl">
+      {/* Page header */}
+      <header className="page-header">
+        <h1 className="page-title">{t('subscribe')}</h1>
+        <p className="page-subtitle">{t('subscribe_subtitle')}</p>
+      </header>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+
+        {/* ── RSS Feed ── always visible */}
+        <SubscribeCard
+          wide
+          icon={<RssIcon />}
+          title={t('rss_readers')}
+          description={t('rss_description')}
+        >
+          {/* Reader quick-subscribe links */}
+          <div className="flex flex-wrap gap-2">
+            {rssReaders.map(({ name, url }) => (
+              <a
+                key={name}
+                href={url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-lg border border-muted/20 bg-background hover:border-accent hover:text-accent transition-colors no-underline"
+              >
+                {name}
+                <LuExternalLink className="w-3 h-3 opacity-50" />
+              </a>
+            ))}
+          </div>
+
+          {/* Feed URL with copy button */}
+          <div className="flex items-center gap-2 mt-1 px-3 py-2.5 rounded-lg bg-muted/5 border border-muted/15">
+            <code className="text-xs font-mono text-muted/60 flex-1 truncate">{feedUrl}</code>
+            <button
+              onClick={handleCopy}
+              className="flex-shrink-0 flex items-center gap-1.5 text-xs text-muted/60 hover:text-accent transition-colors"
+              aria-label={t('copy_feed_url')}
+            >
+              {copied
+                ? <><LuCheck className="w-3.5 h-3.5 text-accent" /><span className="text-accent">{t('feed_url_copied')}</span></>
+                : <><LuCopy className="w-3.5 h-3.5" /><span>{t('copy_feed_url')}</span></>
+              }
+            </button>
+          </div>
+        </SubscribeCard>
+
+        {/* ── Email / Substack ── conditional */}
+        {hasNewsletter && (
+          <SubscribeCard
+            icon={hasSubstack ? <SubstackIcon /> : <LuMail className="w-5 h-5" />}
+            title={t('email_newsletter')}
+            description={t('email_newsletter_description')}
+          >
+            {hasSubstack && (
+              <a
+                href={subscribe!.substack}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg bg-accent/10 text-accent hover:bg-accent/20 transition-colors no-underline"
+              >
+                <SubstackIcon />
+                {t('subscribe_on_substack')}
+                <LuExternalLink className="w-3.5 h-3.5 opacity-60" />
+              </a>
+            )}
+            {!hasSubstack && hasEmail && (
+              <a
+                href={subscribe!.email}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg bg-accent/10 text-accent hover:bg-accent/20 transition-colors no-underline"
+              >
+                <LuMail className="w-4 h-4" />
+                {t('subscribe_via_email')}
+                <LuExternalLink className="w-3.5 h-3.5 opacity-60" />
+              </a>
+            )}
+          </SubscribeCard>
+        )}
+
+        {/* ── Telegram ── conditional */}
+        {hasTelegram && (
+          <SubscribeCard
+            icon={<TelegramIcon />}
+            title={t('telegram_channel')}
+            description={t('telegram_channel_description')}
+          >
+            <a
+              href={subscribe!.telegram}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg bg-accent/10 text-accent hover:bg-accent/20 transition-colors no-underline"
+            >
+              <TelegramIcon />
+              {t('join_channel')}
+              <LuExternalLink className="w-3.5 h-3.5 opacity-60" />
+            </a>
+          </SubscribeCard>
+        )}
+
+        {/* ── WeChat Official Account ── conditional */}
+        {hasWechat && (
+          <SubscribeCard
+            icon={<WechatIcon />}
+            title={t('wechat_official')}
+            description={t('wechat_description')}
+          >
+            <div className="flex flex-col items-start gap-3">
+              <div className="w-36 h-36 rounded-xl border border-muted/20 overflow-hidden bg-white flex items-center justify-center">
+                <Image
+                  src={subscribe!.wechat!.qrCode}
+                  alt={subscribe?.wechat?.account || 'WeChat QR Code'}
+                  width={144}
+                  height={144}
+                  className="object-contain"
+                />
+              </div>
+              {subscribe?.wechat?.account && (
+                <p className="text-sm font-mono text-muted/60">{subscribe.wechat.account}</p>
+              )}
+              <p className="text-xs text-muted/50 italic">{t('scan_qr_code')}</p>
+            </div>
+          </SubscribeCard>
+        )}
+
+        {/* ── Social connections ── always visible if social links exist */}
+        {(social?.twitter || social?.github || social?.email) && (
+          <SubscribeCard
+            wide={!hasNewsletter && !hasTelegram && !hasWechat}
+            icon={
+              <svg viewBox="0 0 24 24" className="w-5 h-5" fill="currentColor" aria-hidden="true">
+                <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z" />
+              </svg>
+            }
+            title={t('social_connections')}
+            description="Follow along on social platforms for updates, discussions, and more."
+          >
+            <div className="flex flex-wrap gap-2">
+              {social?.twitter && (
+                <a
+                  href={social.twitter}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center gap-2 px-3 py-1.5 text-sm rounded-lg border border-muted/20 bg-background hover:border-accent hover:text-accent transition-colors no-underline"
+                >
+                  <XIcon />
+                  Twitter / X
+                </a>
+              )}
+              {social?.github && (
+                <a
+                  href={social.github}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center gap-2 px-3 py-1.5 text-sm rounded-lg border border-muted/20 bg-background hover:border-accent hover:text-accent transition-colors no-underline"
+                >
+                  <LuGithub className="w-4 h-4" />
+                  GitHub
+                </a>
+              )}
+              {social?.email && (
+                <a
+                  href={social.email}
+                  className="inline-flex items-center gap-2 px-3 py-1.5 text-sm rounded-lg border border-muted/20 bg-background hover:border-accent hover:text-accent transition-colors no-underline"
+                >
+                  <LuMail className="w-4 h-4" />
+                  Email
+                </a>
+              )}
+            </div>
+          </SubscribeCard>
+        )}
+
+      </div>
+
+      {/* Tip note about RSS */}
+      <p className="mt-10 text-xs text-muted/50 text-center">
+        RSS is an open standard — no account required. Copy the feed URL into any reader app.{' '}
+        <Link href="/feed.xml" className="hover:text-accent transition-colors" target="_blank">
+          View raw feed →
+        </Link>
+      </p>
+    </div>
+  );
+}

package/src/components/TagContentTabs.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import { useState } from 'react';
+import { useLanguage } from './LanguageProvider';
+import PostList from './PostList';
+import FlowTimelineEntry from './FlowTimelineEntry';
+import type { PostData } from '@/lib/markdown';
+
+type Tab = 'all' | 'posts' | 'flows';
+
+interface FlowEntry {
+  slug: string;
+  date: string;
+  title: string;
+  excerpt: string;
+  tags: string[];
+}
+
+interface TagContentTabsProps {
+  posts: PostData[];
+  flows: FlowEntry[];
+}
+
+export default function TagContentTabs({ posts, flows }: TagContentTabsProps) {
+  const { t } = useLanguage();
+  const hasBoth = posts.length > 0 && flows.length > 0;
+  const [activeTab, setActiveTab] = useState<Tab>('all');
+
+  const showPosts = activeTab === 'all' || activeTab === 'posts';
+  const showFlows = activeTab === 'all' || activeTab === 'flows';
+
+  const tabs: { key: Tab; label: string; count: number }[] = [
+    { key: 'all', label: t('tab_all'), count: posts.length + flows.length },
+    { key: 'posts', label: t('posts'), count: posts.length },
+    { key: 'flows', label: t('flow_notes'), count: flows.length },
+  ];
+
+  return (
+    <div>
+      {/* Type tabs — only shown when both content types exist */}
+      {hasBoth && (
+        <div role="tablist" className="flex mb-8 border-b border-muted/20">
+          {tabs.map(({ key, label, count }) => (
+            <button
+              key={key}
+              type="button"
+              role="tab"
+              aria-selected={activeTab === key}
+              onClick={() => setActiveTab(key)}
+              className={`px-4 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px ${
+                activeTab === key
+                  ? 'text-accent border-accent'
+                  : 'text-muted border-transparent hover:text-foreground'
+              }`}
+            >
+              {label}
+              <span className={`ml-1.5 text-xs font-mono ${activeTab === key ? 'text-accent/60' : 'text-muted/50'}`}>
+                {count}
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Posts section */}
+      {showPosts && posts.length > 0 && (
+        <div>
+          <h2 className="text-[10px] font-sans font-bold uppercase tracking-widest text-muted mb-6">
+            {t('posts')}
+            <span className="ml-1.5 font-mono font-normal normal-case tracking-normal text-muted/50">
+              {posts.length}
+            </span>
+          </h2>
+          <PostList posts={posts} />
+        </div>
+      )}
+
+      {/* Flows section */}
+      {showFlows && flows.length > 0 && (
+        <div className={showPosts && posts.length > 0 ? 'mt-12' : ''}>
+          <h2 className="text-[10px] font-sans font-bold uppercase tracking-widest text-muted mb-4">
+            {t('flow_notes')}
+            <span className="ml-1.5 font-mono font-normal normal-case tracking-normal text-muted/50">
+              {flows.length}
+            </span>
+          </h2>
+          <div>
+            {flows.map(flow => (
+              <FlowTimelineEntry
+                key={flow.slug}
+                date={flow.date}
+                title={flow.title}
+                excerpt={flow.excerpt}
+                tags={flow.tags}
+                slug={flow.slug}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/TagPageHeader.tsx

@@ -5,18 +5,15 @@ import { useLanguage } from './LanguageProvider';
 
 interface TagPageHeaderProps {
   tag: string;
-  postCount: number;
 }
 
-export default function TagPageHeader({ tag, postCount }: TagPageHeaderProps) {
-  const { t, tWith } = useLanguage();
-
-  const subtitleKey = postCount === 1 ? 'tag_posts_found_one' : 'tag_posts_found';
-  const subtitle = tWith(subtitleKey, { count: postCount });
+export default function TagPageHeader({ tag }: TagPageHeaderProps) {
+  const { t } = useLanguage();
 
   return (
     <>
-      <nav className="mb-12 flex justify-center">
+      {/* Back link: visible only on mobile (desktop has sidebar) */}
+      <nav className="mb-8 flex lg:hidden">
         <Link
           href="/tags"
           className="text-xs font-bold uppercase tracking-widest text-muted hover:text-accent transition-colors no-underline"
@@ -25,13 +22,10 @@ export default function TagPageHeader({ tag, postCount }: TagPageHeaderProps) {
         </Link>
       </nav>
 
-      <header className="mb-20 text-center">
-        <h1 className="text-4xl md:text-6xl font-serif font-bold text-heading mb-6 capitalize">
-          <span className="text-accent/50 mr-2">#</span>{tag}
+      <header className="mb-10">
+        <h1 className="text-3xl md:text-4xl font-serif font-bold text-heading">
+          <span className="text-accent/50 mr-1">#</span>{tag}
         </h1>
-        <p className="text-lg text-muted font-serif italic">
-          {subtitle}
-        </p>
       </header>
     </>
   );

package/src/components/TagSidebar.tsx

@@ -0,0 +1,142 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+import { t, tWith } from '@/lib/i18n';
+import { LuTag, LuX, LuSearch } from 'react-icons/lu';
+
+const INITIAL_SHOW = 12;
+
+interface TagSidebarProps {
+  tags: Record<string, number>;
+  activeTag: string;
+}
+
+export default function TagSidebar({ tags, activeTag }: TagSidebarProps) {
+  const [filter, setFilter] = useState('');
+  const [expanded, setExpanded] = useState(false);
+
+  const totalCount = Object.keys(tags).length;
+
+  const sortedTags = Object.entries(tags)
+    .sort((a, b) => b[1] - a[1])
+    .filter(([tag]) => !filter || tag.toLowerCase().includes(filter.toLowerCase()));
+
+  const activeIndex = sortedTags.findIndex(([tag]) => tag === activeTag);
+
+  // Compute visible tags:
+  // - Filtering or expanded: show all
+  // - Default: show first INITIAL_SHOW, then append active tag (with a separator)
+  //   if it falls beyond the initial slice — keeps sidebar compact while
+  //   always making the selected tag visible
+  const getVisibleTags = (): { entries: [string, number][]; appendedAt: number | null } => {
+    if (filter || expanded) return { entries: sortedTags, appendedAt: null };
+    const initial = sortedTags.slice(0, INITIAL_SHOW);
+    if (activeIndex >= INITIAL_SHOW) {
+      return { entries: [...initial, sortedTags[activeIndex]], appendedAt: INITIAL_SHOW };
+    }
+    return { entries: initial, appendedAt: null };
+  };
+
+  const { entries: visibleTags, appendedAt } = getVisibleTags();
+  const remainingCount = sortedTags.length - visibleTags.length;
+  const showExpandButton = !filter && !expanded && remainingCount > 0;
+  // Only allow collapsing if it won't hide the active tag
+  const showCollapseButton = expanded && !filter && (activeIndex === -1 || activeIndex < INITIAL_SHOW);
+
+  return (
+    <aside className="hidden lg:block flex-shrink-0">
+      <div className="sticky top-24">
+
+        {/* Section heading → links to all tags, shows total count */}
+        <Link
+          href="/tags"
+          className="flex items-center gap-1.5 text-[10px] font-sans font-bold uppercase tracking-widest text-muted hover:text-accent transition-colors no-underline mb-3"
+        >
+          <LuTag className="w-3 h-3" />
+          <span>{t('tags')}</span>
+          <span className="ml-auto font-mono font-normal normal-case tracking-normal text-muted/50">
+            {totalCount}
+          </span>
+        </Link>
+
+        {/* Filter input with clear button */}
+        <div className="relative mb-3">
+          <LuSearch className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3 h-3 text-muted/40 pointer-events-none" />
+          <input
+            type="text"
+            value={filter}
+            onChange={(e) => setFilter(e.target.value)}
+            placeholder="Filter…"
+            aria-label={t('filter_tags')}
+            className="w-full pl-8 pr-7 py-1.5 text-xs bg-muted/5 border border-muted/15 rounded-lg outline-none focus:border-accent/40 text-foreground placeholder:text-muted/40 transition-colors"
+          />
+          {filter && (
+            <button
+              onClick={() => setFilter('')}
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-muted/40 hover:text-muted transition-colors p-0.5 rounded"
+              aria-label="Clear filter"
+            >
+              <LuX className="w-3 h-3" />
+            </button>
+          )}
+        </div>
+
+        {/* Tag list — no overflow, no scrollbar */}
+        <nav className="space-y-0.5">
+          {visibleTags.map(([tag, count], index) => {
+            const isActive = tag === activeTag;
+            // Thin separator before the appended active tag
+            const showSeparator = appendedAt !== null && index === appendedAt;
+            return (
+              <div key={tag}>
+                {showSeparator && <div className="my-1.5 h-px bg-muted/10" />}
+                <Link
+                  href={`/tags/${encodeURIComponent(tag)}`}
+                  className={`flex items-center justify-between px-2.5 py-1.5 rounded-lg text-sm no-underline transition-colors ${
+                    isActive
+                      ? 'bg-accent/10 text-accent font-medium'
+                      : 'text-foreground/70 hover:text-foreground hover:bg-muted/10'
+                  }`}
+                >
+                  <span className="truncate">{tag}</span>
+                  <span className={`ml-2 text-xs font-mono flex-shrink-0 ${isActive ? 'text-accent/70' : 'text-muted/50'}`}>
+                    {count}
+                  </span>
+                </Link>
+              </div>
+            );
+          })}
+
+          {/* Expand button */}
+          {showExpandButton && (
+            <button
+              onClick={() => setExpanded(true)}
+              aria-expanded={false}
+              className="w-full text-left px-2.5 py-1.5 text-xs text-muted/50 hover:text-accent transition-colors"
+            >
+              {tWith('more_tags', { count: remainingCount })}
+            </button>
+          )}
+
+          {/* Collapse button */}
+          {showCollapseButton && (
+            <button
+              onClick={() => setExpanded(false)}
+              aria-expanded={true}
+              className="w-full text-left px-2.5 py-1.5 text-xs text-muted/50 hover:text-accent transition-colors"
+            >
+              {t('collapse_tags')}
+            </button>
+          )}
+
+          {/* Empty state */}
+          {visibleTags.length === 0 && (
+            <p className="text-xs text-muted/60 italic px-2.5 py-2">{t('no_tags_found')}</p>
+          )}
+        </nav>
+
+      </div>
+    </aside>
+  );
+}