@hutusi/amytis 1.7.0 → 1.9.0

package/src/components/BookMobileNav.tsx

@@ -17,7 +17,7 @@ export default function BookMobileNav({ bookSlug, bookTitle, toc, chapters, curr
   const { t } = useLanguage();
   const [isExpanded, setIsExpanded] = useState(false);
 
-  const currentIndex = chapters.findIndex(ch => ch.file === currentChapter);
+  const currentIndex = chapters.findIndex(ch => ch.id === currentChapter);
   const prevChapter = currentIndex > 0 ? chapters[currentIndex - 1] : null;
   const nextChapter = currentIndex < chapters.length - 1 ? chapters[currentIndex + 1] : null;
 
@@ -51,7 +51,7 @@ export default function BookMobileNav({ bookSlug, bookTitle, toc, chapters, curr
       <div className="flex gap-3 mb-3">
         {prevChapter ? (
           <Link
-            href={`/books/${bookSlug}/${prevChapter.file}`}
+            href={`/books/${bookSlug}/${prevChapter.id}`}
             className="flex-1 flex items-center gap-2 py-2.5 px-3 rounded-lg bg-muted/5 hover:bg-muted/10 no-underline transition-colors group"
           >
             <svg className="w-4 h-4 flex-shrink-0 text-muted group-hover:text-accent transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -67,7 +67,7 @@ export default function BookMobileNav({ bookSlug, bookTitle, toc, chapters, curr
         )}
         {nextChapter ? (
           <Link
-            href={`/books/${bookSlug}/${nextChapter.file}`}
+            href={`/books/${bookSlug}/${nextChapter.id}`}
             className="flex-1 flex items-center justify-end gap-2 py-2.5 px-3 rounded-lg bg-muted/5 hover:bg-muted/10 no-underline transition-colors group text-right"
           >
             <div className="min-w-0">
@@ -113,19 +113,19 @@ export default function BookMobileNav({ bookSlug, bookTitle, toc, chapters, curr
                   </div>
                   <ol className="space-y-1">
                     {item.chapters.map(ch => {
-                      const isCurrent = ch.file === currentChapter;
-                      const chIdx = chapters.findIndex(c => c.file === ch.file);
+                      const isCurrent = ch.id === currentChapter;
+                      const chIdx = chapters.findIndex(c => c.id === ch.id);
                       const isPast = chIdx < currentIndex;
 
                       return (
-                        <li key={ch.file}>
+                        <li key={ch.id}>
                           {isCurrent ? (
                             <div className="flex items-center gap-3 py-1.5 px-2 rounded-lg bg-accent/5">
                               <span className="text-sm font-semibold text-accent truncate">{ch.title}</span>
                             </div>
                           ) : (
                             <Link
-                              href={`/books/${bookSlug}/${ch.file}`}
+                              href={`/books/${bookSlug}/${ch.id}`}
                               className={`block py-1.5 px-2 rounded-lg text-sm no-underline hover:bg-muted/5 transition-colors ${
                                 isPast ? 'text-foreground/70 hover:text-foreground' : 'text-muted hover:text-foreground'
                               }`}
@@ -140,19 +140,19 @@ export default function BookMobileNav({ bookSlug, bookTitle, toc, chapters, curr
                 </div>
               );
             } else {
-              const isCurrent = item.file === currentChapter;
-              const chIdx = chapters.findIndex(c => c.file === item.file);
+              const isCurrent = item.id === currentChapter;
+              const chIdx = chapters.findIndex(c => c.id === item.id);
               const isPast = chIdx < currentIndex;
 
               return (
-                <div key={item.file}>
+                <div key={item.id}>
                   {isCurrent ? (
                     <div className="flex items-center gap-3 py-1.5 px-2 rounded-lg bg-accent/5">
                       <span className="text-sm font-semibold text-accent truncate">{item.title}</span>
                     </div>
                   ) : (
                     <Link
-                      href={`/books/${bookSlug}/${item.file}`}
+                      href={`/books/${bookSlug}/${item.id}`}
                       className={`block py-1.5 px-2 rounded-lg text-sm no-underline hover:bg-muted/5 transition-colors ${
                         isPast ? 'text-foreground/70 hover:text-foreground' : 'text-muted hover:text-foreground'
                       }`}

package/src/components/BookSidebar.tsx

@@ -16,7 +16,7 @@ interface BookSidebarProps {
 
 export default function BookSidebar({ bookSlug, bookTitle, toc, chapters, currentChapter, headings = [] }: BookSidebarProps) {
   const { t } = useLanguage();
-  const currentIndex = chapters.findIndex(ch => ch.file === currentChapter);
+  const currentIndex = chapters.findIndex(ch => ch.id === currentChapter);
   const [headingsCollapsed, setHeadingsCollapsed] = useState(false);
   const currentItemRef = useRef<HTMLLIElement>(null);
   const sidebarRef = useRef<HTMLElement>(null);
@@ -27,7 +27,7 @@ export default function BookSidebar({ bookSlug, bookTitle, toc, chapters, curren
     const initial: Record<string, boolean> = {};
     for (const item of toc) {
       if ('part' in item) {
-        const containsCurrent = item.chapters.some(ch => ch.file === currentChapter);
+        const containsCurrent = item.chapters.some(ch => ch.id === currentChapter);
         initial[item.part] = !containsCurrent;
       }
     }
@@ -96,7 +96,7 @@ export default function BookSidebar({ bookSlug, bookTitle, toc, chapters, curren
   // Expand part containing current chapter when it changes
   useEffect(() => {
     for (const item of toc) {
-      if ('part' in item && item.chapters.some(ch => ch.file === currentChapter)) {
+      if ('part' in item && item.chapters.some(ch => ch.id === currentChapter)) {
         setCollapsedParts(prev => ({ ...prev, [item.part]: false }));
       }
     }
@@ -156,23 +156,23 @@ export default function BookSidebar({ bookSlug, bookTitle, toc, chapters, curren
   toc.forEach((item) => {
     if ('part' in item) {
       item.chapters.forEach(ch => {
-        chapterIndices.set(ch.file, currentGlobalIdx++);
+        chapterIndices.set(ch.id, currentGlobalIdx++);
       });
     } else {
-      chapterIndices.set(item.file, currentGlobalIdx++);
+      chapterIndices.set(item.id, currentGlobalIdx++);
     }
   });
 
   // Helper to render a chapter link + inline headings if current
-  const renderChapterItem = (ch: { title: string; file: string }) => {
-    const isCurrent = ch.file === currentChapter;
-    const idx = chapterIndices.get(ch.file) ?? 0;
+  const renderChapterItem = (ch: { title: string; id: string }) => {
+    const isCurrent = ch.id === currentChapter;
+    const idx = chapterIndices.get(ch.id) ?? 0;
     const isPast = idx < currentIndex;
 
     return (
-      <li key={ch.file} ref={isCurrent ? currentItemRef : undefined}>
+      <li key={ch.id} ref={isCurrent ? currentItemRef : undefined}>
         <Link
-          href={`/books/${bookSlug}/${ch.file}`}
+          href={`/books/${bookSlug}/${ch.id}`}
           className={`block py-2 px-3 rounded-lg text-sm no-underline transition-all duration-200 ${
             isCurrent
               ? 'bg-accent/10 text-accent font-semibold border-l-2 border-accent'
@@ -196,27 +196,19 @@ export default function BookSidebar({ bookSlug, bookTitle, toc, chapters, curren
     >
       {/* Book Header */}
       <div className="mb-6 pb-4 border-b border-muted/10">
-        <Link href={`/books/${bookSlug}`} className="group block no-underline">
-          <span className="text-[10px] font-sans font-bold uppercase tracking-widest text-accent mb-2 block">
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-[10px] font-sans font-bold uppercase tracking-widest text-accent">
             {t('book')}
           </span>
-          <h3 className="font-serif font-bold text-heading text-lg leading-snug group-hover:text-accent transition-colors">
-            {bookTitle}
-          </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) / chapters.length) * 100}%` }}
-            />
-          </div>
           <span className="text-xs font-mono text-muted whitespace-nowrap">
             {currentIndex + 1}/{chapters.length}
           </span>
         </div>
+        <Link href={`/books/${bookSlug}`} className="group block no-underline">
+          <h3 className="font-serif font-bold text-heading text-lg leading-snug group-hover:text-accent transition-colors">
+            {bookTitle}
+          </h3>
+        </Link>
       </div>
 
       {/* TOC */}

package/src/components/BrowserDetectionBanner.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import { useState, useSyncExternalStore } from 'react';
+import { useLanguage } from '@/components/LanguageProvider';
+
+const DISMISSED_KEY = 'browser-warning-dismissed';
+
+function isOutdatedBrowser(): boolean {
+  // Detect Internet Explorer
+  if (/MSIE|Trident/.test(navigator.userAgent)) return true;
+
+  // CSS custom properties (Chrome 49+, Firefox 31+, Safari 9.1+)
+  if (!('CSS' in window) || !CSS.supports('color', 'var(--x)')) return true;
+
+  // CSS oklch() — required by Tailwind CSS v4 color system (Chrome 111+, Firefox 113+, Safari 15.4+)
+  // Note: CSS.supports() only handles property-value declarations, not at-rules,
+  // so @layer cannot be tested here. oklch already sets a higher minimum than @layer anyway.
+  if (!CSS.supports('color', 'oklch(0.5 0.1 0)')) return true;
+
+  return false;
+}
+
+function subscribe() {
+  return () => {};
+}
+
+function getSnapshot(): boolean {
+  try {
+    if (localStorage.getItem(DISMISSED_KEY)) return false;
+  } catch {
+    // localStorage unavailable (private browsing, sandboxed iframe, etc.)
+    return false;
+  }
+  return isOutdatedBrowser();
+}
+
+function getServerSnapshot(): boolean {
+  return false;
+}
+
+export default function BrowserDetectionBanner({ updateUrl }: { updateUrl?: string }) {
+  const { t } = useLanguage();
+  const isOutdated = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  const [dismissed, setDismissed] = useState(false);
+
+  if (!isOutdated || dismissed) return null;
+
+  const dismiss = () => {
+    try {
+      localStorage.setItem(DISMISSED_KEY, '1');
+    } catch {
+      // Ignore — dismissal works for current session via state
+    }
+    setDismissed(true);
+  };
+
+  return (
+    <div
+      role="alert"
+      className="bg-amber-100 dark:bg-amber-900/40 border-b border-amber-300 dark:border-amber-700 text-amber-900 dark:text-amber-100 px-4 py-2.5 flex items-center justify-center gap-3 text-sm"
+    >
+      <svg
+        className="w-4 h-4 shrink-0 text-amber-600 dark:text-amber-400"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        aria-hidden="true"
+      >
+        <path
+          fillRule="evenodd"
+          d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
+          clipRule="evenodd"
+        />
+      </svg>
+      <span>{t('browser_outdated')}</span>
+      {updateUrl && (
+        <a
+          href={updateUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="underline underline-offset-2 font-medium hover:opacity-75 transition-opacity shrink-0"
+        >
+          {t('browser_update')}
+        </a>
+      )}
+      <button
+        onClick={dismiss}
+        aria-label={t('browser_dismiss')}
+        className="ml-auto p-1 rounded hover:opacity-70 transition-opacity focus-ring shrink-0"
+      >
+        <svg className="w-4 h-4" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+          <path d="M4.293 4.293a1 1 0 011.414 0L8 6.586l2.293-2.293a1 1 0 111.414 1.414L9.414 8l2.293 2.293a1 1 0 01-1.414 1.414L8 9.414l-2.293 2.293a1 1 0 01-1.414-1.414L6.586 8 4.293 5.707a1 1 0 010-1.414z" />
+        </svg>
+      </button>
+    </div>
+  );
+}

package/src/components/FeaturedStoriesSection.tsx

@@ -40,7 +40,7 @@ export default function FeaturedStoriesSection({ allFeatured, maxItems, scrollTh
   return (
     <section className="mb-24">
       <div className="flex items-center justify-between mb-12">
-        <h2 className="text-3xl font-serif font-bold text-heading">{t('featured_stories')}</h2>
+        <h2 className="text-3xl font-serif font-bold text-heading">{t('featured_articles')}</h2>
         {allFeatured.length > maxItems && (
           <button
             onClick={handleShuffle}

package/src/components/FlowCalendarSidebar.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useMemo } from 'react';
+import { useState, useMemo, type ReactNode } from 'react';
 import Link from 'next/link';
 import { useLanguage } from '@/components/LanguageProvider';
 
@@ -10,11 +10,12 @@ interface FlowCalendarSidebarProps {
   tags?: Record<string, number>;
   selectedTag?: string | null;
   onTagSelect?: (tag: string) => void;
+  breadcrumb?: ReactNode;
 }
 
 const WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
 
-export default function FlowCalendarSidebar({ entryDates, currentDate, tags, selectedTag, onTagSelect }: FlowCalendarSidebarProps) {
+export default function FlowCalendarSidebar({ entryDates, currentDate, tags, selectedTag, onTagSelect, breadcrumb }: FlowCalendarSidebarProps) {
   const { t } = useLanguage();
   const initialDate = currentDate ? new Date(currentDate + 'T00:00:00') : new Date();
   const [viewYear, setViewYear] = useState(initialDate.getFullYear());
@@ -77,6 +78,7 @@ export default function FlowCalendarSidebar({ entryDates, currentDate, tags, sel
 
   return (
     <aside className="hidden lg:block sticky top-20 self-start w-[280px] max-h-[calc(100vh-6rem)]">
+      {breadcrumb && <div className="mb-4">{breadcrumb}</div>}
       <div className="border border-muted/20 rounded-lg p-4">
         {/* Month navigation */}
         <div className="flex items-center justify-between mb-3">

package/src/components/FlowContent.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useMemo } from 'react';
+import { useState, useMemo, type ReactNode } from 'react';
 import { useLanguage } from '@/components/LanguageProvider';
 import FlowCalendarSidebar from '@/components/FlowCalendarSidebar';
 import FlowTimelineEntry from '@/components/FlowTimelineEntry';
@@ -24,9 +24,10 @@ interface FlowContentProps {
     totalPages: number;
     basePath: string;
   };
+  breadcrumb?: ReactNode;
 }
 
-export default function FlowContent({ flows, entryDates, tags, currentDate, pagination }: FlowContentProps) {
+export default function FlowContent({ flows, entryDates, tags, currentDate, pagination, breadcrumb }: FlowContentProps) {
   const { t } = useLanguage();
   const [selectedTag, setSelectedTag] = useState<string | null>(null);
 
@@ -47,6 +48,7 @@ export default function FlowContent({ flows, entryDates, tags, currentDate, pagi
         tags={tags}
         selectedTag={selectedTag}
         onTagSelect={handleTagSelect}
+        breadcrumb={breadcrumb}
       />
 
       <div className="flex-1 min-w-0">
@@ -72,7 +74,6 @@ export default function FlowContent({ flows, entryDates, tags, currentDate, pagi
               <FlowTimelineEntry
                 key={flow.slug}
                 date={flow.date}
-                title={flow.title}
                 excerpt={flow.excerpt}
                 tags={flow.tags}
                 slug={flow.slug}

package/src/components/FlowHubTabs.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import Link from 'next/link';
+import { useLanguage } from './LanguageProvider';
+
+interface FlowHubTabsProps {
+  subtitle?: string;
+}
+
+export default function FlowHubTabs({ subtitle }: FlowHubTabsProps) {
+  const pathname = usePathname();
+  const { t } = useLanguage();
+
+  // Normalize: strip trailing slash added by next.config trailingSlash:true
+  const path = pathname.endsWith('/') ? pathname.slice(0, -1) : pathname;
+
+  const isFlowsActive = path === '/flows' || path.startsWith('/flows/page');
+  const isNotesActive = path === '/notes' || path.startsWith('/notes/page');
+  const isGraphActive = path.startsWith('/graph');
+
+  const tabs = [
+    { href: '/flows', label: t('tab_daily_flow'), active: isFlowsActive },
+    { href: '/notes', label: t('notes'), active: isNotesActive },
+    { href: '/graph', label: t('tab_graph'), active: isGraphActive },
+  ];
+
+  return (
+    <div className="mb-10">
+      <div className="flex items-end gap-8 border-b border-muted/20">
+        {tabs.map(tab => (
+          <Link
+            key={tab.href}
+            href={tab.href}
+            className={`pb-3 text-3xl font-bold no-underline border-b-2 -mb-px transition-colors ${
+              tab.active
+                ? 'border-accent text-heading'
+                : 'border-transparent text-muted/30 hover:text-muted/60'
+            }`}
+          >
+            {tab.label}
+          </Link>
+        ))}
+      </div>
+      {subtitle && (
+        <p className="mt-3 text-sm text-muted">{subtitle}</p>
+      )}
+    </div>
+  );
+}

package/src/components/FlowTimelineEntry.tsx

@@ -3,25 +3,23 @@ import Tag from './Tag';
 
 interface FlowTimelineEntryProps {
   date: string;
-  title: string;
   excerpt: string;
   tags: string[];
   slug: string;
 }
 
-export default function FlowTimelineEntry({ date, title, excerpt, tags, slug }: FlowTimelineEntryProps) {
+export default function FlowTimelineEntry({ date, excerpt, tags, slug }: FlowTimelineEntryProps) {
   return (
     <article className="relative pl-6 pb-8 border-l-2 border-muted/20 last:pb-0">
       {/* Timeline dot */}
       <div className="absolute -left-[5px] top-1.5 w-2 h-2 rounded-full bg-accent" />
 
-      <time className="text-xs font-mono text-accent">{date}</time>
-      <h3 className="mt-1 mb-2 font-serif text-xl font-bold text-heading">
-        <Link href={`/flows/${slug}`} className="no-underline hover:text-accent transition-colors">
-          {title}
-        </Link>
-      </h3>
-      <p className="text-sm text-muted leading-relaxed line-clamp-3">{excerpt}</p>
+      <Link href={`/flows/${slug}`} className="no-underline group">
+        <time className="text-sm font-mono text-accent group-hover:text-accent/70 transition-colors">{date}</time>
+      </Link>
+      {excerpt && (
+        <p className="mt-1.5 text-sm text-muted leading-relaxed line-clamp-3">{excerpt}</p>
+      )}
       {tags.length > 0 && (
         <div className="mt-2 flex flex-wrap gap-2">
           {tags.map(tag => (