@hutusi/amytis 1.6.0 → 1.8.0

package/src/components/NoteContent.tsx

@@ -0,0 +1,123 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import { useLanguage } from '@/components/LanguageProvider';
+import Link from 'next/link';
+import Tag from '@/components/Tag';
+import Pagination from '@/components/Pagination';
+
+interface NoteItem {
+  slug: string;
+  date: string;
+  title: string;
+  excerpt: string;
+  tags: string[];
+}
+
+interface NoteContentProps {
+  notes: NoteItem[];
+  tags: Record<string, number>;
+  pagination?: {
+    currentPage: number;
+    totalPages: number;
+    basePath: string;
+  };
+}
+
+export default function NoteContent({ notes, tags, pagination }: NoteContentProps) {
+  const { t } = useLanguage();
+  const [selectedTag, setSelectedTag] = useState<string | null>(null);
+
+  const filteredNotes = useMemo(() => {
+    if (!selectedTag) return notes;
+    return notes.filter(n => n.tags.map(t => t.toLowerCase()).includes(selectedTag));
+  }, [notes, selectedTag]);
+
+  const sortedTags = Object.entries(tags).sort((a, b) => b[1] - a[1]);
+
+  function handleTagSelect(tag: string) {
+    setSelectedTag(prev => (prev === tag ? null : tag));
+  }
+
+  return (
+    <div className="flex gap-10">
+      {/* Tag sidebar */}
+      <aside className="hidden lg:block sticky top-20 self-start w-[280px] shrink-0">
+        <div className="border border-muted/20 rounded-lg p-4 space-y-1">
+          {sortedTags.length > 0 && (
+            <>
+              <p className="text-[10px] font-bold uppercase tracking-widest text-muted mb-3">{t('tags')}</p>
+              <button
+                onClick={() => setSelectedTag(null)}
+                className={`block w-full text-left text-sm px-2 py-1 rounded transition-colors ${!selectedTag ? 'text-accent font-medium' : 'text-muted hover:text-foreground'}`}
+              >
+                {t('all_notes')}
+              </button>
+              {sortedTags.map(([tag, count]) => (
+                <button
+                  key={tag}
+                  onClick={() => handleTagSelect(tag)}
+                  className={`flex w-full items-center justify-between text-left text-sm px-2 py-1 rounded transition-colors ${selectedTag === tag ? 'text-accent font-medium' : 'text-muted hover:text-foreground'}`}
+                >
+                  <span>{tag}</span>
+                  <span className="text-xs opacity-50">{count}</span>
+                </button>
+              ))}
+            </>
+          )}
+        </div>
+      </aside>
+
+      {/* Note timeline */}
+      <div className="flex-1 min-w-0">
+        {selectedTag && (
+          <div className="flex items-center gap-2 mb-4 text-sm text-muted">
+            <span>{filteredNotes.length} / {notes.length}</span>
+            <button
+              onClick={() => setSelectedTag(null)}
+              className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full border border-muted/20 text-xs hover:border-accent hover:text-accent transition-colors"
+            >
+              ✕ {t('clear')}
+            </button>
+          </div>
+        )}
+
+        {filteredNotes.length === 0 ? (
+          <p className="text-muted">{t('no_notes')}</p>
+        ) : (
+          <div className="space-y-0">
+            {filteredNotes.map(note => (
+              <article key={note.slug} className="relative pl-6 pb-8 border-l-2 border-muted/20 last:pb-0">
+                <div className="absolute -left-[5px] top-1.5 w-2 h-2 rounded-full bg-accent" />
+                <time className="text-xs font-mono text-accent">{note.date}</time>
+                <h3 className="mt-1 mb-2 font-serif text-xl font-bold text-heading">
+                  <Link href={`/notes/${note.slug}`} className="no-underline hover:text-accent transition-colors">
+                    {note.title}
+                  </Link>
+                </h3>
+                <p className="text-sm text-muted leading-relaxed line-clamp-3">{note.excerpt}</p>
+                {note.tags.length > 0 && (
+                  <div className="mt-2 flex flex-wrap gap-2">
+                    {note.tags.map(tag => (
+                      <Tag key={tag} tag={tag} variant="compact" />
+                    ))}
+                  </div>
+                )}
+              </article>
+            ))}
+          </div>
+        )}
+
+        {pagination && pagination.totalPages > 1 && (
+          <div className="mt-12">
+            <Pagination
+              currentPage={pagination.currentPage}
+              totalPages={pagination.totalPages}
+              basePath={pagination.basePath}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/NoteSidebar.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+import { useState, useEffect, type ReactNode } from 'react';
+import Link from 'next/link';
+import { useScrollY } from '@/hooks/useScrollY';
+import type { BacklinkSource, Heading } from '@/lib/markdown';
+import { useLanguage } from './LanguageProvider';
+
+interface NoteSidebarProps {
+  headings: Heading[];
+  showToc: boolean;
+  backlinks: BacklinkSource[];
+  breadcrumb?: ReactNode;
+}
+
+export default function NoteSidebar({ headings, showToc, backlinks, breadcrumb }: NoteSidebarProps) {
+  const { t } = useLanguage();
+  const scrollY = useScrollY();
+  const [activeHeadingId, setActiveHeadingId] = useState('');
+  const [tocCollapsed, setTocCollapsed] = useState(false);
+
+  useEffect(() => {
+    if (!showToc || headings.length === 0) return;
+    const elements = headings
+      .map(h => document.getElementById(h.id))
+      .filter(Boolean) as HTMLElement[];
+    if (!elements.length) return;
+    const scrollPosition = scrollY + 100;
+    let current = elements[0];
+    for (const el of elements) {
+      if (el.offsetTop <= scrollPosition) current = el;
+      else break;
+    }
+    const rafId = requestAnimationFrame(() => { if (current) setActiveHeadingId(current.id); });
+    return () => cancelAnimationFrame(rafId);
+  }, [scrollY, headings, showToc]);
+
+  const scrollToHeading = (e: React.MouseEvent<HTMLAnchorElement>, id: string) => {
+    e.preventDefault();
+    const el = document.getElementById(id);
+    if (el) {
+      window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: 'smooth' });
+      history.pushState(null, '', `#${id}`);
+    }
+  };
+
+  return (
+    <aside className="hidden lg:block sticky top-20 self-start w-[280px] max-h-[calc(100vh-6rem)] overflow-y-auto pr-4 scrollbar-hide hover:scrollbar-thin">
+      {breadcrumb && <div className="mb-4">{breadcrumb}</div>}
+      {/* TOC */}
+      {showToc && headings.length > 0 && (
+        <nav
+          aria-label="Table of contents"
+          className={`mb-6 ${backlinks.length > 0 ? 'pb-6 border-b border-muted/10' : ''}`}
+        >
+          <div className="flex items-center justify-between mb-3">
+            <span className="text-[10px] font-sans font-bold uppercase tracking-widest text-muted">
+              {t('on_this_page')}
+            </span>
+            <button
+              onClick={() => setTocCollapsed(p => !p)}
+              className="text-muted hover:text-foreground transition-colors"
+              aria-label={tocCollapsed ? 'Expand' : 'Collapse'}
+            >
+              <svg
+                className={`w-3.5 h-3.5 transition-transform duration-200 ${tocCollapsed ? '' : 'rotate-180'}`}
+                fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+              </svg>
+            </button>
+          </div>
+          {!tocCollapsed && (
+            <ul className="space-y-0.5 border-l border-muted/15 animate-slide-down">
+              {headings.map(h => {
+                const isActive = h.id === activeHeadingId;
+                return (
+                  <li key={h.id}>
+                    <a
+                      href={`#${h.id}`}
+                      onClick={e => scrollToHeading(e, h.id)}
+                      className={`block py-1 text-[13px] leading-snug no-underline transition-colors duration-200 ${
+                        h.level === 3 ? 'pl-6' : 'pl-3'
+                      } ${
+                        isActive
+                          ? 'text-accent font-medium border-l-2 border-accent -ml-px'
+                          : 'text-foreground/70 hover:text-foreground'
+                      }`}
+                    >
+                      {h.text}
+                    </a>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+        </nav>
+      )}
+
+      {/* Backlinks */}
+      {backlinks.length > 0 && (
+        <div>
+          <span className="text-[10px] font-sans font-bold uppercase tracking-widest text-muted block mb-3">
+            {t('backlinks')}
+          </span>
+          <div className="flex flex-col gap-3">
+            {backlinks.map(bl => (
+              <div key={`${bl.type}-${bl.slug}`} className="flex flex-col gap-0.5">
+                <div className="flex items-center gap-1.5 min-w-0">
+                  <span className="text-[10px] font-sans font-bold uppercase tracking-widest text-muted/60 border border-muted/20 rounded px-1.5 py-0.5 shrink-0">
+                    {bl.type}
+                  </span>
+                  <Link
+                    href={bl.url}
+                    className="text-sm text-heading hover:text-accent no-underline transition-colors truncate"
+                  >
+                    {bl.title}
+                  </Link>
+                </div>
+                {bl.context && (
+                  <p className="text-xs text-muted leading-relaxed line-clamp-2 pl-0.5">
+                    &ldquo;{bl.context}&rdquo;
+                  </p>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </aside>
+  );
+}

package/src/components/PostNavigation.tsx

@@ -0,0 +1,55 @@
+import Link from 'next/link';
+import { PostData } from '@/lib/markdown';
+import { t } from '@/lib/i18n';
+
+interface PostNavigationProps {
+  prev: PostData | null;
+  next: PostData | null;
+}
+
+export default function PostNavigation({ prev, next }: PostNavigationProps) {
+  if (!prev && !next) return null;
+
+  return (
+    <nav
+      className="mt-12 pt-12 border-t border-muted/20 grid grid-cols-1 sm:grid-cols-2 gap-3"
+      aria-label={t('post_navigation')}
+    >
+      {prev ? (
+        <Link
+          href={`/posts/${prev.slug}`}
+          className="group flex flex-col gap-1.5 p-4 rounded-xl border border-muted/15 hover:border-accent/30 hover:bg-accent/5 transition-all no-underline"
+        >
+          <span className="text-[10px] font-sans font-bold uppercase tracking-widest text-muted flex items-center gap-1.5">
+            <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+            </svg>
+            {t('prev')}
+          </span>
+          <span className="text-sm font-serif font-semibold text-heading group-hover:text-accent transition-colors line-clamp-2 leading-snug">
+            {prev.title}
+          </span>
+          <span className="text-xs font-mono text-muted/60">{prev.date}</span>
+        </Link>
+      ) : <div />}
+
+      {next ? (
+        <Link
+          href={`/posts/${next.slug}`}
+          className="group flex flex-col gap-1.5 p-4 rounded-xl border border-muted/15 hover:border-accent/30 hover:bg-accent/5 transition-all no-underline sm:items-end sm:text-right"
+        >
+          <span className="text-[10px] font-sans font-bold uppercase tracking-widest text-muted flex items-center gap-1.5">
+            {t('next')}
+            <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+            </svg>
+          </span>
+          <span className="text-sm font-serif font-semibold text-heading group-hover:text-accent transition-colors line-clamp-2 leading-snug">
+            {next.title}
+          </span>
+          <span className="text-xs font-mono text-muted/60">{next.date}</span>
+        </Link>
+      ) : <div />}
+    </nav>
+  );
+}

package/src/components/PostSidebar.tsx

@@ -1,9 +1,12 @@
 'use client';
 
-import { useState, useEffect, useRef, useCallback } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import Link from 'next/link';
 import { PostData, Heading } from '@/lib/markdown';
 import { useLanguage } from './LanguageProvider';
+import { useScrollY } from '@/hooks/useScrollY';
+import ShareBar from './ShareBar';
+import { siteConfig } from '../../site.config';
 
 interface PostSidebarProps {
   seriesSlug?: string;
@@ -11,28 +14,52 @@ interface PostSidebarProps {
   posts?: PostData[];
   currentSlug: string;
   headings: Heading[];
+  localeHeadings?: Record<string, Heading[]>;
+  shareUrl?: string;
+  shareTitle?: string;
 }
 
-export default function PostSidebar({ seriesSlug, seriesTitle, posts, currentSlug, headings }: PostSidebarProps) {
-  const { t } = useLanguage();
+function getVisibleIndices(total: number, current: number): (number | 'ellipsis')[] {
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i);
+  const result: (number | 'ellipsis')[] = [];
+  result.push(0);
+  const windowStart = Math.max(1, current - 2);
+  const windowEnd = Math.min(total - 2, current + 2);
+  if (windowStart > 1) result.push('ellipsis');
+  for (let i = windowStart; i <= windowEnd; i++) result.push(i);
+  if (windowEnd < total - 2) result.push('ellipsis');
+  result.push(total - 1);
+  return result;
+}
+
+export default function PostSidebar({ seriesSlug, seriesTitle, posts, currentSlug, headings, localeHeadings, shareUrl, shareTitle }: PostSidebarProps) {
+  const { t, language } = useLanguage();
+  const activeHeadings = localeHeadings?.[language] ?? headings;
   const hasSeries = !!(seriesSlug && posts && posts.length > 0);
   const currentIndex = hasSeries ? posts!.findIndex(p => p.slug === currentSlug) : -1;
+  // Chronological sort (ascending date) — used for both progress counter and isPast styling
+  const sortedPosts = hasSeries
+    ? [...posts!].sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())
+    : null;
+  const progressIndex = hasSeries ? sortedPosts!.findIndex(p => p.slug === currentSlug) : -1;
   const currentItemRef = useRef<HTMLLIElement>(null);
   const sidebarRef = useRef<HTMLElement>(null);
   const [activeHeadingId, setActiveHeadingId] = useState<string>('');
   const [tocCollapsed, setTocCollapsed] = useState(false);
+  const [seriesCollapsed, setSeriesCollapsed] = useState(false);
+  const scrollY = useScrollY();
 
-  // Scroll tracking for page headings
-  const handleScroll = useCallback(() => {
-    if (headings.length === 0) return;
+  // Derive active heading from shared scroll position
+  useEffect(() => {
+    if (activeHeadings.length === 0) return;
 
-    const headingElements = headings
+    const headingElements = activeHeadings
       .map(h => document.getElementById(h.id))
       .filter(Boolean) as HTMLElement[];
 
     if (headingElements.length === 0) return;
 
-    const scrollPosition = window.scrollY + 100;
+    const scrollPosition = scrollY + 100;
     let current = headingElements[0];
     for (const el of headingElements) {
       if (el.offsetTop <= scrollPosition) {
@@ -42,23 +69,11 @@ export default function PostSidebar({ seriesSlug, seriesTitle, posts, currentSlu
       }
     }
 
-    if (current) {
-      setActiveHeadingId(current.id);
-    }
-  }, [headings]);
-
-  useEffect(() => {
-    if (headings.length === 0) return;
-    
-    // Use requestAnimationFrame to avoid cascading render lint error on mount
-    const rafId = requestAnimationFrame(handleScroll);
-
-    window.addEventListener('scroll', handleScroll, { passive: true });
-    return () => {
-      cancelAnimationFrame(rafId);
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, [handleScroll, headings.length]);
+    const rafId = requestAnimationFrame(() => {
+      if (current) setActiveHeadingId(current.id);
+    });
+    return () => cancelAnimationFrame(rafId);
+  }, [scrollY, activeHeadings]);
 
   const scrollToHeading = (e: React.MouseEvent<HTMLAnchorElement>, id: string) => {
     e.preventDefault();
@@ -88,113 +103,33 @@ export default function PostSidebar({ seriesSlug, seriesTitle, posts, currentSlu
       ref={sidebarRef}
       className="hidden lg:block sticky top-20 self-start w-[280px] max-h-[calc(100vh-6rem)] overflow-y-auto pr-4 scrollbar-hide hover:scrollbar-thin"
     >
-      {/* Series section */}
-      {hasSeries && (
-        <>
-          <div className="mb-6 pb-4 border-b border-muted/10">
-            <Link href={`/series/${seriesSlug}`} className="group block no-underline">
-              <span className="text-[10px] font-sans font-bold uppercase tracking-widest text-accent mb-2 block">
-                {t('series')}
-              </span>
-              <h3 className="font-serif font-bold text-heading text-lg leading-snug group-hover:text-accent transition-colors">
-                {seriesTitle}
-              </h3>
-            </Link>
-
-            {/* Progress */}
-            <div className="mt-3 flex items-center gap-3">
-              <div className="flex-1 h-1 bg-muted/10 rounded-full overflow-hidden">
-                <div
-                  className="h-full bg-accent/60 rounded-full transition-all duration-500"
-                  style={{ width: `${((currentIndex + 1) / posts!.length) * 100}%` }}
-                />
-              </div>
-              <span className="text-xs font-mono text-muted whitespace-nowrap">
-                {currentIndex + 1}/{posts!.length}
-              </span>
-            </div>
-          </div>
-
-          {/* Series posts list */}
-          <nav aria-label="Series navigation" className="mb-6">
-            <ul className="space-y-1 relative">
-              <div className="absolute left-[11px] top-3 bottom-3 w-px bg-muted/15" />
-              {posts!.map((post, index) => {
-                const isCurrent = post.slug === currentSlug;
-                const isPast = index < currentIndex;
-
-                return (
-                  <li key={post.slug} ref={isCurrent ? currentItemRef : undefined} className="relative">
-                    <Link
-                      href={`/posts/${post.slug}`}
-                      className={`group flex items-start gap-3 py-2 px-2 -mx-2 rounded-lg no-underline transition-all duration-200 ${
-                        isCurrent ? 'bg-accent/5' : 'hover:bg-muted/5'
-                      }`}
-                      aria-current={isCurrent ? 'page' : undefined}
-                    >
-                      <div className={`relative z-10 flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-mono font-bold transition-colors ${
-                        isCurrent
-                          ? 'bg-accent text-white shadow-sm shadow-accent/30'
-                          : isPast
-                            ? 'bg-accent/20 text-accent'
-                            : 'bg-muted/10 text-muted group-hover:bg-muted/20 group-hover:text-foreground'
-                      }`}>
-                        {String(index + 1).padStart(2, '0')}
-                      </div>
-                      <div className="flex-1 min-w-0 pt-0.5">
-                        <span className={`block text-sm leading-snug transition-colors ${
-                          isCurrent
-                            ? 'text-accent font-semibold'
-                            : isPast
-                              ? 'text-foreground/70 group-hover:text-foreground'
-                              : 'text-muted group-hover:text-foreground'
-                        }`}>
-                          {post.title}
-                        </span>
-                      </div>
-                    </Link>
-                  </li>
-                );
-              })}
-            </ul>
-          </nav>
-
-          {/* Footer link */}
-          <div className="mb-6 pb-4 border-b border-muted/10">
-            <Link
-              href={`/series/${seriesSlug}`}
-              className="text-xs font-sans text-muted hover:text-accent transition-colors no-underline flex items-center gap-1"
+      {/* TOC — always at top */}
+      {activeHeadings.length > 0 && (
+        <nav
+          aria-label="Table of contents"
+          className={`mb-6 ${hasSeries ? 'pb-4 border-b border-muted/10' : ''}`}
+        >
+          <div className="flex items-center justify-between mb-3">
+            <span className="text-[10px] font-sans font-bold uppercase tracking-widest text-muted">
+              {t('on_this_page')}
+            </span>
+            <button
+              onClick={() => setTocCollapsed(prev => !prev)}
+              className="text-muted hover:text-foreground transition-colors"
+              aria-label={tocCollapsed ? 'Expand table of contents' : 'Collapse table of contents'}
             >
-              {t('view_full_series')}
-              <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+              <svg
+                className={`w-3.5 h-3.5 transition-transform duration-200 ${tocCollapsed ? '' : 'rotate-180'}`}
+                fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
               </svg>
-            </Link>
+            </button>
           </div>
-        </>
-      )}
-
-      {/* Page TOC */}
-      {headings.length > 0 && (
-        <nav aria-label="Table of contents">
-          <button
-            onClick={() => setTocCollapsed(prev => !prev)}
-            className="w-full flex items-center justify-between gap-2 mb-3"
-          >
-            <h2 className="text-[10px] font-sans font-bold uppercase tracking-widest text-muted">
-              {t('on_this_page')}
-            </h2>
-            <svg
-              className={`w-3.5 h-3.5 text-muted flex-shrink-0 transition-transform duration-200 ${tocCollapsed ? '' : 'rotate-180'}`}
-              fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}
-            >
-              <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
-            </svg>
-          </button>
 
           {!tocCollapsed && (
             <ul className="space-y-0.5 border-l border-muted/15 animate-slide-down">
-              {headings.map(heading => {
+              {activeHeadings.map(heading => {
                 const isActive = heading.id === activeHeadingId;
                 const isH3 = heading.level === 3;
 
@@ -220,6 +155,117 @@ export default function PostSidebar({ seriesSlug, seriesTitle, posts, currentSlu
           )}
         </nav>
       )}
+
+      {/* Series section — below TOC */}
+      {hasSeries && (
+        <div>
+          {/* Header — always visible */}
+          <div className="mb-3">
+            <div className="flex items-center justify-between mb-1">
+              <span className="text-[10px] font-sans font-bold uppercase tracking-widest text-accent">
+                {t('series')}
+              </span>
+              <span className="text-[10px] font-mono text-muted/60">
+                {progressIndex >= 0 ? progressIndex + 1 : '?'} / {posts!.length}
+              </span>
+            </div>
+            <div className="flex items-start justify-between gap-2">
+              <Link href={`/series/${seriesSlug}`} className="group block no-underline flex-1 min-w-0">
+                <h3 className="font-serif font-bold text-heading text-base leading-snug group-hover:text-accent transition-colors">
+                  {seriesTitle}
+                </h3>
+              </Link>
+              <button
+                onClick={() => setSeriesCollapsed(prev => !prev)}
+                className="flex-shrink-0 mt-0.5 text-muted hover:text-foreground transition-colors"
+                aria-label={seriesCollapsed ? 'Expand series' : 'Collapse series'}
+              >
+                <svg
+                  className={`w-3.5 h-3.5 transition-transform duration-200 ${seriesCollapsed ? '' : 'rotate-180'}`}
+                  fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+                </svg>
+              </button>
+            </div>
+          </div>
+
+          {/* Collapsible: post list + footer link */}
+          {!seriesCollapsed && (
+            <>
+              <nav aria-label="Series navigation" className="mb-4 animate-slide-down">
+                <ul className="space-y-1 relative before:absolute before:left-[11px] before:top-3 before:bottom-3 before:w-px before:bg-muted/15">
+                  {getVisibleIndices(posts!.length, currentIndex).map((item, i) => {
+                    if (item === 'ellipsis') {
+                      return (
+                        <li key={`ellipsis-${i}`} className="flex items-center py-1 pl-3">
+                          <span className="text-xs font-mono text-muted/40 tracking-widest">···</span>
+                        </li>
+                      );
+                    }
+                    const post = posts![item];
+                    const isCurrent = post.slug === currentSlug;
+                    const chronoIndex = sortedPosts ? sortedPosts.findIndex(p => p.slug === post.slug) : item;
+                    const isPast = chronoIndex < progressIndex;
+
+                    return (
+                      <li key={post.slug} ref={isCurrent ? currentItemRef : undefined} className="relative">
+                        <Link
+                          href={`/posts/${post.slug}`}
+                          className={`group flex items-start gap-3 py-2 px-2 -mx-2 rounded-lg no-underline transition-all duration-200 ${
+                            isCurrent ? 'bg-accent/5' : 'hover:bg-muted/5'
+                          }`}
+                          aria-current={isCurrent ? 'page' : undefined}
+                        >
+                          <div className={`relative z-10 flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-mono font-bold transition-colors ${
+                            isCurrent
+                              ? 'bg-accent text-white shadow-sm shadow-accent/30'
+                              : isPast
+                                ? 'bg-accent/20 text-accent'
+                                : 'bg-muted/10 text-muted group-hover:bg-muted/20 group-hover:text-foreground'
+                          }`}>
+                            {String(item + 1).padStart(2, '0')}
+                          </div>
+                          <div className="flex-1 min-w-0 pt-0.5">
+                            <span className={`block text-sm leading-snug transition-colors ${
+                              isCurrent
+                                ? 'text-accent font-semibold'
+                                : isPast
+                                  ? 'text-foreground/70 group-hover:text-foreground'
+                                  : 'text-muted group-hover:text-foreground'
+                            }`}>
+                              {post.title}
+                            </span>
+                          </div>
+                        </Link>
+                      </li>
+                    );
+                  })}
+                </ul>
+              </nav>
+
+              <Link
+                href={`/series/${seriesSlug}`}
+                className="text-xs font-sans text-muted hover:text-accent transition-colors no-underline flex items-center gap-1"
+              >
+                {t('view_full_series')}
+                <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+                </svg>
+              </Link>
+            </>
+          )}
+        </div>
+      )}
+
+      {shareUrl && siteConfig.share?.enabled && (
+        <div className="mt-6 pt-6 border-t border-muted/10">
+          <p className="text-[10px] font-sans font-bold uppercase tracking-widest text-muted mb-3">
+            {t('share_post')}
+          </p>
+          <ShareBar url={shareUrl} title={shareTitle ?? ''} />
+        </div>
+      )}
     </aside>
   );
 }