@hutusi/amytis 1.7.0 → 1.8.0

package/src/components/Navbar.tsx

@@ -1,8 +1,10 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { Fragment, useState, useEffect } from 'react';
 import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 import { siteConfig } from '../../site.config';
+import type { NavChildItem } from '../../site.config';
 import ThemeToggle from './ThemeToggle';
 import LanguageSwitch from './LanguageSwitch';
 import Search from '@/components/Search';
@@ -26,11 +28,16 @@ const FEATURE_URLS: Partial<Record<string, keyof typeof siteConfig.features>> =
   '/flows': 'flows',
   '/series': 'series',
   '/books': 'books',
+  '/notes': 'notes',
 };
 
 export default function Navbar({ seriesList = [], booksList = [] }: NavbarProps) {
   const { t, language } = useLanguage();
+  const pathname = usePathname();
   const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
+  const [openDropdown, setOpenDropdown] = useState<string | null>(null);
+
   const navItems = [...siteConfig.nav]
     .filter(item => {
       const featureKey = FEATURE_URLS[item.url];
@@ -49,6 +56,27 @@ export default function Navbar({ seriesList = [], booksList = [] }: NavbarProps)
     return translated !== key ? translated : name;
   };
 
+  function isActive(url: string): boolean {
+    if (url === '/flows') {
+      return pathname.startsWith('/flows') || pathname.startsWith('/notes') || pathname.startsWith('/graph');
+    }
+    if (url === '/') return pathname === '/';
+    return pathname.startsWith(url);
+  }
+
+  // Scroll-aware transparency
+  useEffect(() => {
+    const handleScroll = () => setIsScrolled(window.scrollY > 8);
+    handleScroll(); // sync with scroll position at mount (e.g. after refresh while scrolled)
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  function closeMenu() {
+    setIsMenuOpen(false);
+    setOpenDropdown(null);
+  }
+
   // Prevent body scroll when menu is open
   useEffect(() => {
     if (isMenuOpen) {
@@ -62,7 +90,11 @@ export default function Navbar({ seriesList = [], booksList = [] }: NavbarProps)
   }, [isMenuOpen]);
 
   return (
-    <nav className="fixed top-0 left-0 w-full z-50 border-b border-muted/10 bg-background/80 backdrop-blur-md transition-all duration-300">
+    <nav className={`fixed top-0 left-0 w-full z-50 border-b transition-all duration-300 ${
+      isScrolled
+        ? 'border-muted/10 bg-background/90 backdrop-blur-md shadow-sm'
+        : 'border-transparent bg-transparent'
+    }`}>
       <div className="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
         <Link
           href="/"
@@ -92,13 +124,16 @@ export default function Navbar({ seriesList = [], booksList = [] }: NavbarProps)
               const isExternal = !!('external' in item && item.external);
               const Component = isExternal ? 'a' : Link;
               const props = isExternal ? { target: "_blank", rel: "noopener noreferrer" } : {};
+              const active = isActive(item.url);
 
               if (item.url === '/books' && booksList.length > 0) {
                 return (
                   <div key={item.url} className="relative group">
                     <Link
                       href={item.url}
-                      className="text-sm font-sans font-medium text-foreground/80 hover:text-heading no-underline transition-colors duration-200 flex items-center gap-1 py-4"
+                      className={`text-sm font-sans font-medium no-underline transition-colors duration-200 flex items-center gap-1 py-4 ${
+                        active ? 'text-accent' : 'text-foreground/80 hover:text-heading'
+                      }`}
                     >
                       {getLabel(item.name, item.url)}
                       <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="opacity-50 group-hover:rotate-180 transition-transform">
@@ -134,7 +169,9 @@ export default function Navbar({ seriesList = [], booksList = [] }: NavbarProps)
                   <div key={item.url} className="relative group">
                     <Link
                       href={item.url}
-                      className="text-sm font-sans font-medium text-foreground/80 hover:text-heading no-underline transition-colors duration-200 flex items-center gap-1 py-4"
+                      className={`text-sm font-sans font-medium no-underline transition-colors duration-200 flex items-center gap-1 py-4 ${
+                        active ? 'text-accent' : 'text-foreground/80 hover:text-heading'
+                      }`}
                     >
                       {getLabel(item.name, item.url)}
                       <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="opacity-50 group-hover:rotate-180 transition-transform">
@@ -165,12 +202,54 @@ export default function Navbar({ seriesList = [], booksList = [] }: NavbarProps)
                 );
               }
 
+              // Static children dropdown (e.g., "More")
+              if (item.children && item.children.length > 0) {
+                const childActive = item.children.some(c => c.url && pathname.startsWith(c.url));
+                return (
+                  <div key={item.url || item.name} className="relative group">
+                    <button
+                      type="button"
+                      className={`text-sm font-sans font-medium transition-colors duration-200 flex items-center gap-1 py-4 bg-transparent border-0 cursor-pointer ${
+                        childActive ? 'text-accent' : 'text-foreground/80 hover:text-heading'
+                      }`}
+                    >
+                      {getLabel(item.name, item.url)}
+                      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="opacity-50 group-hover:rotate-180 transition-transform">
+                        <path d="M6 9l6 6 6-6"/>
+                      </svg>
+                    </button>
+                    <div className="absolute top-full right-0 pt-2 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 min-w-[160px]">
+                      <div className="bg-background/95 backdrop-blur-md border border-muted/10 rounded-xl shadow-xl p-2 flex flex-col gap-1 animate-slide-down">
+                        {item.children.map((child: NavChildItem) => {
+                          const ChildComp = child.external ? 'a' : Link;
+                          const childProps = child.external ? { target: '_blank', rel: 'noopener noreferrer' } : {};
+                          return (
+                            <Fragment key={child.url}>
+                              {child.dividerBefore && <div className="h-px bg-muted/10 my-1" />}
+                              <ChildComp
+                                href={child.url}
+                                {...childProps}
+                                className="block px-4 py-2.5 text-sm text-foreground/80 hover:text-accent hover:bg-muted/5 rounded-lg transition-colors no-underline whitespace-nowrap"
+                              >
+                                {getLabel(child.name, child.url)}
+                              </ChildComp>
+                            </Fragment>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  </div>
+                );
+              }
+
               return (
                 <Component
                   key={item.url}
                   href={item.url}
                   {...props}
-                  className="text-sm font-sans font-medium text-foreground/80 hover:text-heading no-underline transition-colors duration-200 flex items-center gap-1"
+                  className={`text-sm font-sans font-medium no-underline transition-colors duration-200 flex items-center gap-1 ${
+                    active ? 'text-accent' : 'text-foreground/80 hover:text-heading'
+                  }`}
                 >
                   {getLabel(item.name, item.url)}
                   {isExternal && (
@@ -227,23 +306,170 @@ export default function Navbar({ seriesList = [], booksList = [] }: NavbarProps)
           {/* Backdrop */}
           <div
             className="fixed inset-0 top-16 bg-background/60 backdrop-blur-sm md:hidden"
-            onClick={() => setIsMenuOpen(false)}
+            onClick={() => closeMenu()}
           />
           {/* Menu */}
           <div className="md:hidden absolute top-16 left-0 w-full bg-background/95 backdrop-blur-md border-b border-muted/10 shadow-lg animate-slide-down">
             <div className="max-w-6xl mx-auto px-6 py-4 flex flex-col gap-1">
               {navItems.map((item) => {
                 const isExternal = !!('external' in item && item.external);
+                const active = isActive(item.url);
+
+                // Series accordion for mobile
+                if (item.url === '/series' && seriesList.length > 0) {
+                  const isOpen = openDropdown === '/series';
+                  return (
+                    <div key={item.url}>
+                      <div className={`flex items-center rounded-lg transition-colors ${active ? 'text-accent' : 'text-foreground/80'}`}>
+                        <Link
+                          href={item.url}
+                          className="flex-1 px-3 py-3 text-base font-sans font-medium no-underline hover:text-accent transition-colors"
+                          onClick={() => closeMenu()}
+                        >
+                          {getLabel(item.name, item.url)}
+                        </Link>
+                        <button
+                          className="px-3 py-3 text-foreground/60 hover:text-accent transition-colors"
+                          onClick={() => setOpenDropdown(isOpen ? null : '/series')}
+                          aria-label={isOpen ? 'Collapse series list' : 'Expand series list'}
+                          aria-expanded={isOpen}
+                        >
+                          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={`transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}>
+                            <path d="M6 9l6 6 6-6"/>
+                          </svg>
+                        </button>
+                      </div>
+                      {isOpen && (
+                        <div className="ml-4 pl-3 border-l-2 border-muted/10 flex flex-col gap-1 mb-1">
+                          {seriesList.map(s => (
+                            <Link
+                              key={s.slug}
+                              href={`/series/${s.slug}`}
+                              className="block px-3 py-2 text-sm text-foreground/80 hover:text-accent hover:bg-muted/5 rounded-lg no-underline transition-colors"
+                              onClick={() => closeMenu()}
+                            >
+                              {s.name}
+                            </Link>
+                          ))}
+                          <Link
+                            href="/series"
+                            className="block px-3 py-2 text-xs font-bold uppercase tracking-widest text-muted hover:text-accent hover:bg-muted/5 rounded-lg no-underline transition-colors"
+                            onClick={() => closeMenu()}
+                          >
+                            {t('all_series')} →
+                          </Link>
+                        </div>
+                      )}
+                    </div>
+                  );
+                }
+
+                // Books accordion for mobile
+                if (item.url === '/books' && booksList.length > 0) {
+                  const isOpen = openDropdown === '/books';
+                  return (
+                    <div key={item.url}>
+                      <div className={`flex items-center rounded-lg transition-colors ${active ? 'text-accent' : 'text-foreground/80'}`}>
+                        <Link
+                          href={item.url}
+                          className="flex-1 px-3 py-3 text-base font-sans font-medium no-underline hover:text-accent transition-colors"
+                          onClick={() => closeMenu()}
+                        >
+                          {getLabel(item.name, item.url)}
+                        </Link>
+                        <button
+                          className="px-3 py-3 text-foreground/60 hover:text-accent transition-colors"
+                          onClick={() => setOpenDropdown(isOpen ? null : '/books')}
+                          aria-label={isOpen ? 'Collapse books list' : 'Expand books list'}
+                          aria-expanded={isOpen}
+                        >
+                          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={`transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}>
+                            <path d="M6 9l6 6 6-6"/>
+                          </svg>
+                        </button>
+                      </div>
+                      {isOpen && (
+                        <div className="ml-4 pl-3 border-l-2 border-muted/10 flex flex-col gap-1 mb-1">
+                          {booksList.map(b => (
+                            <Link
+                              key={b.slug}
+                              href={`/books/${b.slug}`}
+                              className="block px-3 py-2 text-sm text-foreground/80 hover:text-accent hover:bg-muted/5 rounded-lg no-underline transition-colors"
+                              onClick={() => closeMenu()}
+                            >
+                              {b.name}
+                            </Link>
+                          ))}
+                          <Link
+                            href="/books"
+                            className="block px-3 py-2 text-xs font-bold uppercase tracking-widest text-muted hover:text-accent hover:bg-muted/5 rounded-lg no-underline transition-colors"
+                            onClick={() => closeMenu()}
+                          >
+                            {t('all_books')} →
+                          </Link>
+                        </div>
+                      )}
+                    </div>
+                  );
+                }
+
+                // Static children accordion for mobile (e.g., "More")
+                if (item.children && item.children.length > 0) {
+                  const dropdownKey = item.url || item.name;
+                  const isOpen = openDropdown === dropdownKey;
+                  const childActive = item.children.some(c => c.url && pathname.startsWith(c.url));
+                  return (
+                    <div key={dropdownKey}>
+                      <button
+                        type="button"
+                        className={`w-full flex items-center justify-between px-3 py-3 text-base font-sans font-medium rounded-lg transition-colors ${
+                          childActive ? 'text-accent' : 'text-foreground/80 hover:text-accent hover:bg-muted/5'
+                        }`}
+                        onClick={() => setOpenDropdown(isOpen ? null : dropdownKey)}
+                        aria-expanded={isOpen}
+                      >
+                        {getLabel(item.name, item.url)}
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={`transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}>
+                          <path d="M6 9l6 6 6-6"/>
+                        </svg>
+                      </button>
+                      {isOpen && (
+                        <div className="ml-4 pl-3 border-l-2 border-muted/10 flex flex-col gap-1 mb-1">
+                          {item.children.map((child: NavChildItem) => {
+                            const ChildComp = child.external ? 'a' : Link;
+                            const childProps = child.external ? { target: '_blank', rel: 'noopener noreferrer' } : {};
+                            return (
+                              <Fragment key={child.url}>
+                                {child.dividerBefore && <div className="h-px bg-muted/10 my-1" />}
+                                <ChildComp
+                                  href={child.url}
+                                  {...childProps}
+                                  className="block px-3 py-2 text-sm text-foreground/80 hover:text-accent hover:bg-muted/5 rounded-lg no-underline transition-colors"
+                                  onClick={() => closeMenu()}
+                                >
+                                  {getLabel(child.name, child.url)}
+                                </ChildComp>
+                              </Fragment>
+                            );
+                          })}
+                        </div>
+                      )}
+                    </div>
+                  );
+                }
+
+                // Regular mobile nav item
                 const Component = isExternal ? 'a' : Link;
                 const props = isExternal ? { target: "_blank", rel: "noopener noreferrer" } : {};
-
                 return (
                   <Component
                     key={item.url}
                     href={item.url}
                     {...props}
-                    className="flex items-center gap-2 px-3 py-3 text-base font-sans font-medium text-foreground/80 hover:text-accent hover:bg-muted/5 rounded-lg no-underline transition-colors"
-                    onClick={() => setIsMenuOpen(false)}
+                    className={`flex items-center gap-2 px-3 py-3 text-base font-sans font-medium rounded-lg no-underline transition-colors ${
+                      active ? 'text-accent' : 'text-foreground/80 hover:text-accent hover:bg-muted/5'
+                    }`}
+                    onClick={() => closeMenu()}
                   >
                     {getLabel(item.name, item.url)}
                     {isExternal && (

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/RecentNotesSection.tsx

@@ -6,7 +6,6 @@ import { useLanguage } from './LanguageProvider';
 export interface RecentNoteItem {
   slug: string;
   date: string;
-  title: string;
   excerpt: string;
 }
 
@@ -38,16 +37,12 @@ export default function RecentNotesSection({ notes }: RecentNotesSectionProps) {
         {notes.map(note => (
           <div key={note.slug} className="relative pl-6 pb-6 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" />
-            <div className="flex items-baseline gap-3 mb-1">
-              <time className="text-xs font-mono text-accent shrink-0">{note.date}</time>
-              <Link
-                href={`/flows/${note.slug}`}
-                className="text-base font-serif font-bold text-heading hover:text-accent transition-colors no-underline truncate"
-              >
-                {note.title}
-              </Link>
-            </div>
-            <p className="text-sm text-muted line-clamp-2 pl-0">{note.excerpt}</p>
+            <Link href={`/flows/${note.slug}`} className="no-underline group">
+              <time className="text-sm font-mono text-accent group-hover:text-accent/70 transition-colors">{note.date}</time>
+            </Link>
+            {note.excerpt && (
+              <p className="mt-1.5 text-sm text-muted line-clamp-2">{note.excerpt}</p>
+            )}
           </div>
         ))}
       </div>

package/src/components/Search.tsx

@@ -25,12 +25,14 @@ const CONTENT_TYPES: ContentType[] = [
   ...(siteConfig.features?.posts?.enabled !== false ? ['Post' as ContentType] : []),
   ...(siteConfig.features?.flows?.enabled !== false ? ['Flow' as ContentType] : []),
   ...(siteConfig.features?.books?.enabled !== false ? ['Book' as ContentType] : []),
+  ...(siteConfig.features?.notes?.enabled !== false ? ['Note' as ContentType] : []),
 ];
 
 const CONTENT_TYPE_FEATURE: Record<Exclude<ContentType, 'All'>, keyof typeof siteConfig.features> = {
   Post: 'posts',
   Flow: 'flows',
   Book: 'books',
+  Note: 'notes',
 };
 const RECENT_KEY = 'amytis-recent-searches';
 const MAX_RECENT = 5;
@@ -42,12 +44,14 @@ const TYPE_LABEL_KEYS: Record<Exclude<ContentType, 'All'>, TranslationKey> = {
   Post: 'search_type_post',
   Flow: 'search_type_flow',
   Book: 'search_type_book',
+  Note: 'search_type_note',
 };
 
 const TYPE_STYLES: Record<string, string> = {
   Flow: 'border-accent/30 text-accent',
   Book: 'border-foreground/30 text-foreground/60',
   Post: 'border-muted/30 text-muted',
+  Note: 'border-emerald-400/30 text-emerald-600 dark:text-emerald-400',
 };
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
@@ -192,7 +196,7 @@ export default function Search() {
 
   // Count per type for tab badges
   const typeCounts = useMemo(() => {
-    const counts: Record<ContentType, number> = { All: allResults.length, Post: 0, Flow: 0, Book: 0 };
+    const counts: Record<ContentType, number> = { All: allResults.length, Post: 0, Flow: 0, Book: 0, Note: 0 };
     for (const r of allResults) counts[r.type]++;
     return counts;
   }, [allResults]);

package/src/components/TagContentTabs.tsx

@@ -89,7 +89,6 @@ export default function TagContentTabs({ posts, flows }: TagContentTabsProps) {
               <FlowTimelineEntry
                 key={flow.slug}
                 date={flow.date}
-                title={flow.title}
                 excerpt={flow.excerpt}
                 tags={flow.tags}
                 slug={flow.slug}