@hutusi/amytis 1.5.6 → 1.7.0

package/src/components/ShareBar.tsx

@@ -0,0 +1,115 @@
+'use client'
+
+import { useState } from 'react';
+import { IconType } from 'react-icons';
+import { FaXTwitter, FaFacebook, FaLinkedin, FaWeibo, FaRedditAlien, FaTelegram, FaMastodon, FaHackerNews } from 'react-icons/fa6';
+import { SiBluesky, SiDouban, SiZhihu } from 'react-icons/si';
+import { LuLink, LuCheck } from 'react-icons/lu';
+import { siteConfig } from '../../site.config';
+import { useLanguage } from './LanguageProvider';
+
+interface ShareBarProps {
+  url: string;
+  title: string;
+  className?: string;
+}
+
+type Platform =
+  | 'twitter' | 'facebook' | 'linkedin' | 'weibo'
+  | 'reddit' | 'hackernews' | 'telegram' | 'bluesky' | 'mastodon'
+  | 'douban' | 'zhihu'
+  | 'copy';
+
+const PLATFORM_META: Record<Platform, { label: string; Icon: IconType }> = {
+  twitter:    { label: 'X / Twitter', Icon: FaXTwitter },
+  facebook:   { label: 'Facebook',    Icon: FaFacebook },
+  linkedin:   { label: 'LinkedIn',    Icon: FaLinkedin },
+  weibo:      { label: '微博',         Icon: FaWeibo },
+  reddit:     { label: 'Reddit',      Icon: FaRedditAlien },
+  hackernews: { label: 'Hacker News', Icon: FaHackerNews },
+  telegram:   { label: 'Telegram',    Icon: FaTelegram },
+  bluesky:    { label: 'Bluesky',     Icon: SiBluesky },
+  mastodon:   { label: 'Mastodon',    Icon: FaMastodon },
+  douban:     { label: '豆瓣',         Icon: SiDouban },
+  zhihu:      { label: '知乎',         Icon: SiZhihu },
+  copy:       { label: 'Copy link',   Icon: LuLink },
+};
+
+function getShareUrl(platform: Platform, url: string, title: string): string {
+  const eu = encodeURIComponent(url);
+  const et = encodeURIComponent(title);
+  const combined = encodeURIComponent(`${title} ${url}`);
+  switch (platform) {
+    case 'twitter':    return `https://twitter.com/intent/tweet?text=${et}&url=${eu}`;
+    case 'facebook':   return `https://www.facebook.com/sharer/sharer.php?u=${eu}`;
+    case 'linkedin':   return `https://www.linkedin.com/sharing/share-offsite/?url=${eu}`;
+    case 'weibo':      return `https://service.weibo.com/share/share.php?url=${eu}&title=${et}`;
+    case 'reddit':     return `https://www.reddit.com/submit?url=${eu}&title=${et}`;
+    case 'hackernews': return `https://news.ycombinator.com/submitlink?u=${eu}&t=${et}`;
+    case 'telegram':   return `https://t.me/share/url?url=${eu}&text=${et}`;
+    case 'bluesky':    return `https://bsky.app/intent/compose?text=${combined}`;
+    case 'mastodon':   return `https://mastodon.social/share?text=${combined}`;
+    case 'douban':     return `https://www.douban.com/share/service?href=${eu}&name=${et}`;
+    case 'zhihu':      return `https://www.zhihu.com/share?href=${eu}&type=text&title=${et}`;
+    case 'copy':       return '';
+  }
+}
+
+export default function ShareBar({ url, title, className = '' }: ShareBarProps) {
+  const { t } = useLanguage();
+  const [copied, setCopied] = useState(false);
+
+  if (!siteConfig.share?.enabled) return null;
+  const configured = siteConfig.share?.platforms ?? [];
+  const platforms = configured.filter((p): p is Platform => p in PLATFORM_META);
+  if (platforms.length === 0) return null;
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(url);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // clipboard not available
+    }
+  };
+
+  const btnClass = 'inline-flex items-center justify-center w-8 h-8 rounded text-muted hover:text-accent hover:bg-muted/10 transition-colors';
+
+  return (
+    <div className={`flex flex-row flex-wrap gap-1 ${className}`}>
+      {platforms.map((platform) => {
+        const { label, Icon } = PLATFORM_META[platform];
+
+        if (platform === 'copy') {
+          const copyLabel = copied ? t('link_copied') : t('copy_link');
+          return (
+            <button
+              key={platform}
+              onClick={handleCopy}
+              title={copyLabel}
+              aria-label={copyLabel}
+              className={`${btnClass} ${copied ? 'text-accent' : ''}`}
+            >
+              {copied ? <LuCheck size={16} /> : <Icon size={16} />}
+            </button>
+          );
+        }
+
+        return (
+          <a
+            key={platform}
+            href={getShareUrl(platform, url, title)}
+            target="_blank"
+            rel="noopener noreferrer"
+            title={label}
+            aria-label={`Share on ${label}`}
+            className={`${btnClass} no-underline`}
+          >
+            <Icon size={16} />
+          </a>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/SimpleLayoutHeader.tsx

@@ -2,30 +2,21 @@
 
 import { useLanguage } from './LanguageProvider';
 import { TranslationKey } from '@/i18n/translations';
-import { resolveLocaleValue } from '@/lib/i18n';
 
 interface SimpleLayoutHeaderProps {
   title: string;
   excerpt?: string;
   titleKey?: TranslationKey;
   subtitleKey?: TranslationKey;
-  titleOverride?: string | Record<string, string>;
-  subtitleOverride?: string | Record<string, string>;
+  contentLocales?: Record<string, { content: string; title?: string; excerpt?: string }>;
 }
 
-export default function SimpleLayoutHeader({ title, excerpt, titleKey, subtitleKey, titleOverride, subtitleOverride }: SimpleLayoutHeaderProps) {
+export default function SimpleLayoutHeader({ title, excerpt, titleKey, subtitleKey, contentLocales }: SimpleLayoutHeaderProps) {
   const { t, language } = useLanguage();
 
-  const displayTitle = titleOverride
-    ? resolveLocaleValue(titleOverride, language)
-    : titleKey
-      ? t(titleKey)
-      : title;
-  const displaySubtitle = subtitleOverride
-    ? resolveLocaleValue(subtitleOverride, language)
-    : subtitleKey
-      ? t(subtitleKey)
-      : excerpt;
+  const localeData = contentLocales?.[language];
+  const displayTitle = localeData?.title ?? (titleKey ? t(titleKey) : title);
+  const displaySubtitle = localeData?.excerpt ?? (subtitleKey ? t(subtitleKey) : excerpt);
 
   return (
     <header className="page-header">

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>
     </>
   );