@notis_ai/cli 0.2.1 → 0.2.3

package/dist/scaffolds/notis-notes/app/page.tsx

@@ -0,0 +1,2168 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  MultiSelectActionBar,
+  MultiSelectCheckbox,
+  MultiSelectDragOverlay,
+  useMultiSelect,
+  useBackend,
+  useNotis,
+  useNotisNavigation,
+  useTopBarSearch,
+  useTool,
+  type MultiSelectController,
+} from '@notis/sdk';
+import { ArrowsDownUpIcon as ArrowUpDown, ArrowUpRightIcon as ArrowUpRight, CubeIcon as Boxes, BookOpenIcon as BookOpen, BookOpenTextIcon as BookOpenText, CalendarIcon as CalendarDays, CaretDownIcon as ChevronDown, CaretLeftIcon as ChevronLeft, CaretRightIcon as ChevronRight, EyeIcon as Eye, FileTextIcon as FileText, FolderIcon as Folder, FolderMinusIcon as FolderMinus, FolderOpenIcon as FolderOpen, FoldersIcon as Folders, SquaresFourIcon as LayoutGrid, LinkIcon as Link2, CircleNotchIcon as Loader2, ArrowsOutIcon as Maximize2, NotePencilIcon as NotebookPen, PencilIcon as Pencil, PlusIcon as Plus, RowsIcon as Rows3, MagnifyingGlassIcon as Search, SlidersHorizontalIcon as Settings2, SlidersHorizontalIcon as SlidersHorizontal, SparkleIcon as Sparkles, NoteIcon as StickyNote, TableIcon as Table2, XIcon as X, type Icon } from '@phosphor-icons/react';
+import * as PhosphorIcons from '@phosphor-icons/react';
+
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+type TabKey = 'gallery' | 'table' | 'calendar';
+
+type TabConfig = {
+  key: TabKey;
+  label: string;
+  icon: Icon;
+};
+
+type FolderOption = {
+  id: string;
+  title: string;
+  parentId: string | null;
+  pathLabel: string;
+};
+
+type DatabasePropertyType =
+  | 'title'
+  | 'rich_text'
+  | 'text'
+  | 'number'
+  | 'checkbox'
+  | 'date'
+  | 'select'
+  | 'multi_select'
+  | 'status'
+  | 'relation'
+  | 'formula'
+  | 'files';
+
+type DatabasePropertyOption = {
+  id?: string | null;
+  name: string;
+  color?: string | null;
+  order?: number;
+};
+
+type DatabaseProperty = {
+  id?: string | null;
+  name: string;
+  type: DatabasePropertyType;
+  description?: string | null;
+  options?: DatabasePropertyOption[];
+};
+
+type DocumentRecord = {
+  id: string;
+  title: string;
+  properties: Record<string, unknown>;
+  url?: string | null;
+  icon?: string | null;
+  cover?: string | null;
+  databaseSlug?: string;
+  contentBlocknote?: Array<Record<string, unknown>> | null;
+  contentMarkdown?: string | null;
+  plainText?: string | null;
+  createdAt?: string | null;
+  lastEditedTime?: string | null;
+};
+
+type CollectionItemContext = {
+  id: string;
+  title: string;
+  icon?: string | null;
+  properties: Record<string, unknown>;
+};
+
+type QueryFilter = {
+  filters?: Array<{
+    property: string;
+    operator: string;
+    type?: string;
+    value: unknown;
+  }>;
+  sorts?: Array<{
+    property: string;
+    direction: 'asc' | 'desc';
+  }>;
+  page_size?: number;
+};
+
+type QueryDatabaseArgs = {
+  database_slug: string;
+  query?: QueryFilter;
+  offset?: number;
+};
+
+type QueryDatabaseResult = {
+  documents?: unknown[];
+  message?: string;
+  error?: string;
+};
+
+type GetDatabaseArgs = {
+  database_slug: string;
+};
+
+type GetDatabaseResult = {
+  database?: {
+    schema?: {
+      properties?: unknown[];
+    };
+  };
+  message?: string;
+  error?: string;
+};
+
+type UpsertNoteArgs = {
+  document_id?: string;
+  title?: string;
+  content_blocknote?: Array<Record<string, unknown>> | null;
+  [propertyName: string]: unknown;
+};
+
+type UpsertNoteResult = {
+  status?: string;
+  document?: unknown;
+  message?: string;
+  error?: string;
+};
+
+type UpsertDocumentArgs = {
+  documentId?: string;
+  title?: string;
+  properties?: Record<string, unknown>;
+  contentBlocknote?: Array<Record<string, unknown>> | null;
+};
+
+const NOTE_DATABASE_SLUG = 'notes';
+const FOLDER_DATABASE_SLUG = 'note_folders';
+const DEFAULT_NOTE_TITLE = 'Untitled note';
+const WEEKDAY_LABELS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+
+const TABS: TabConfig[] = [
+  { key: 'gallery', label: 'Gallery', icon: LayoutGrid },
+  { key: 'table', label: 'Table', icon: Table2 },
+  { key: 'calendar', label: 'Calendar', icon: CalendarDays },
+];
+
+type IconName = string;
+
+const PHOSPHOR_ICON_PREFIX = 'phosphor:';
+
+const PHOSPHOR_ICON_OVERRIDES: Record<string, string> = {
+  boxes: 'Cube',
+  'calendar-days': 'Calendar',
+  'layout-grid': 'SquaresFour',
+  'layout-dashboard': 'SquaresFour',
+  'link-2': 'Link',
+  'notebook-pen': 'NotePencil',
+  'rows-3': 'Rows',
+  search: 'MagnifyingGlass',
+  'settings-2': 'SlidersHorizontal',
+  sparkles: 'Sparkle',
+  'sticky-note': 'Note',
+  'table-2': 'Table',
+  home: 'House',
+  'folder-kanban': 'Kanban',
+};
+
+const SUGGESTED_FOLDER_ICON_NAMES: IconName[] = [
+  'folder',
+  'folder-open',
+  'folder-kanban',
+  'archive',
+  'bookmark',
+  'book-open',
+  'briefcase',
+  'calendar',
+  'file-text',
+  'flag',
+  'house',
+  'lightbulb',
+  'note-pencil',
+  'palette',
+  'rocket',
+  'magnifying-glass',
+  'sparkle',
+  'tag',
+];
+
+function toPascalCase(value: string): string {
+  return value
+    .split(/[-_\s]+/)
+    .filter(Boolean)
+    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
+    .join('');
+}
+
+function toKebabCase(value: string): string {
+  return value
+    .replace(/Icon$/, '')
+    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+    .toLowerCase();
+}
+
+function parsePhosphorIconName(icon: string | null | undefined): IconName | null {
+  if (typeof icon !== 'string' || !icon.startsWith(PHOSPHOR_ICON_PREFIX)) {
+    return null;
+  }
+  const name = icon.slice(PHOSPHOR_ICON_PREFIX.length).trim().replace(/_/g, '-').toLowerCase();
+  return name && /^[a-z][a-z0-9-]*$/.test(name) ? name : null;
+}
+
+function getPhosphorIconComponent(icon: string | null | undefined): Icon | null {
+  const name = parsePhosphorIconName(icon);
+  if (!name) return null;
+  const exportBaseName = PHOSPHOR_ICON_OVERRIDES[name] ?? toPascalCase(name);
+  const component = (PhosphorIcons as Record<string, unknown>)[`${exportBaseName}Icon`];
+  return typeof component === 'function' ? (component as Icon) : null;
+}
+
+function getPhosphorIconComponentByName(name: string): Icon | null {
+  return getPhosphorIconComponent(`${PHOSPHOR_ICON_PREFIX}${name}`);
+}
+
+const ALL_PHOSPHOR_ICON_NAMES = Object.keys(PhosphorIcons)
+  .filter((key) => key.endsWith('Icon') && key !== 'Icon')
+  .map(toKebabCase)
+  .sort((a, b) => a.localeCompare(b));
+
+function isPresentString(value: unknown): value is string {
+  return typeof value === 'string' && value.trim().length > 0;
+}
+
+function asRecord(value: unknown): Record<string, unknown> | null {
+  return value && typeof value === 'object' && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : null;
+}
+
+function optionalString(value: unknown): string | null {
+  return isPresentString(value) ? value.trim() : null;
+}
+
+function extractRichText(value: unknown): string {
+  if (typeof value === 'string') return value;
+  if (!Array.isArray(value)) return '';
+  return value
+    .map((item) => {
+      const record = asRecord(item);
+      const text = asRecord(record?.text);
+      return optionalString(text?.content) ?? optionalString(record?.plain_text) ?? '';
+    })
+    .join('');
+}
+
+function normalizePropertyValue(value: unknown): unknown {
+  const record = asRecord(value);
+  if (!record) return value;
+
+  const type = optionalString(record.type);
+  if (!type) return value;
+
+  if (type === 'title') return extractRichText(record.title);
+  if (type === 'rich_text') return extractRichText(record.rich_text);
+  if (type === 'select' || type === 'status') return optionalString(asRecord(record[type])?.name) ?? record[type] ?? null;
+  if (type === 'multi_select') {
+    const items = Array.isArray(record.multi_select) ? record.multi_select : [];
+    return items.map((item) => optionalString(asRecord(item)?.name) ?? item).filter(Boolean);
+  }
+  if (type === 'relation') {
+    const items = Array.isArray(record.relation) ? record.relation : [];
+    return items.map((item) => optionalString(asRecord(item)?.id) ?? item).filter(Boolean);
+  }
+  if (type === 'date') return optionalString(asRecord(record.date)?.start) ?? record.date ?? null;
+  if (type in record) return record[type];
+  return value;
+}
+
+function normalizeDocumentRecord(value: unknown): DocumentRecord {
+  const record = asRecord(value) ?? {};
+  const rawProperties = asRecord(record.properties) ?? {};
+  const properties: Record<string, unknown> = {};
+  for (const [key, propertyValue] of Object.entries(rawProperties)) {
+    properties[key] = normalizePropertyValue(propertyValue);
+  }
+
+  return {
+    id: optionalString(record.id) ?? '',
+    title: optionalString(record.title) ?? DEFAULT_NOTE_TITLE,
+    url: optionalString(record.url),
+    properties,
+    icon: optionalString(record.icon),
+    cover: optionalString(record.cover),
+    databaseSlug: optionalString(record.databaseSlug) ?? optionalString(record.database_slug) ?? undefined,
+    contentBlocknote: Array.isArray(record.contentBlocknote)
+      ? record.contentBlocknote as Array<Record<string, unknown>>
+      : Array.isArray(record.content_blocknote)
+        ? record.content_blocknote as Array<Record<string, unknown>>
+        : null,
+    contentMarkdown: optionalString(record.contentMarkdown) ?? optionalString(record.content_markdown),
+    plainText: optionalString(record.plainText) ?? optionalString(record.plain_text),
+    createdAt: optionalString(record.createdAt) ?? optionalString(record.created_at) ?? optionalString(record.created_time),
+    lastEditedTime:
+      optionalString(record.lastEditedTime)
+      ?? optionalString(record.last_edited_time)
+      ?? optionalString(record.updated_at),
+  };
+}
+
+function normalizeDatabaseProperty(value: unknown): DatabaseProperty | null {
+  const record = asRecord(value);
+  const name = optionalString(record?.name);
+  if (!record || !name) return null;
+  const rawOptions = Array.isArray(record.options) ? record.options : [];
+  const options = rawOptions.flatMap((option): DatabasePropertyOption[] => {
+    const optionRecord = asRecord(option);
+    const optionName = optionalString(optionRecord?.name);
+    if (!optionRecord || !optionName) return [];
+    return [{
+      id: optionalString(optionRecord.id),
+      name: optionName,
+      color: optionalString(optionRecord.color),
+      order: typeof optionRecord.order === 'number' ? optionRecord.order : undefined,
+    }];
+  });
+
+  return {
+    id: optionalString(record.id),
+    name,
+    type: (optionalString(record.type) ?? 'rich_text') as DatabasePropertyType,
+    description: optionalString(record.description),
+    options,
+  };
+}
+
+function normalizeCollectionItem(value: unknown): CollectionItemContext | null {
+  const record = asRecord(value);
+  const id = optionalString(record?.id);
+  if (!record || !id) return null;
+  return {
+    id,
+    title: optionalString(record.title) ?? 'Untitled',
+    icon: optionalString(record.icon),
+    properties: asRecord(record.properties) ?? {},
+  };
+}
+
+function useNoteSchema(databaseSlug: string) {
+  const getDatabase = useTool<GetDatabaseArgs, GetDatabaseResult>('LOCAL_NOTIS_DATABASE_GET_DATABASE');
+  const [properties, setProperties] = useState<DatabaseProperty[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+  const [fetchKey, setFetchKey] = useState(0);
+
+  const refetch = useCallback(() => {
+    setFetchKey((key) => key + 1);
+  }, []);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+
+    getDatabase.call({ database_slug: databaseSlug })
+      .then((result) => {
+        if (cancelled) return;
+        const message = result.error ?? result.message;
+        if (!result.database && message) {
+          throw new Error(message);
+        }
+        const rawProperties = result.database?.schema?.properties ?? [];
+        setProperties(rawProperties.map(normalizeDatabaseProperty).filter((p): p is DatabaseProperty => Boolean(p)));
+        setLoading(false);
+      })
+      .catch((err) => {
+        if (cancelled) return;
+        setError(err instanceof Error ? err : new Error(String(err)));
+        setLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [databaseSlug, fetchKey, getDatabase.call]);
+
+  return { properties, loading, error, refetch };
+}
+
+function useQueryDocuments(databaseSlug: string, options: { filter?: QueryFilter; pageSize?: number; offset?: number } = {}) {
+  const queryTool = useTool<QueryDatabaseArgs, QueryDatabaseResult>('LOCAL_NOTIS_DATABASE_QUERY');
+  const [documents, setDocuments] = useState<DocumentRecord[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+  const [fetchKey, setFetchKey] = useState(0);
+  const filterKey = JSON.stringify(options.filter ?? null);
+
+  const refetch = useCallback(() => {
+    setFetchKey((key) => key + 1);
+  }, []);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+
+    queryTool.call({
+      database_slug: databaseSlug,
+      query: {
+        ...(options.filter ?? {}),
+        page_size: options.pageSize,
+      },
+      offset: options.offset,
+    })
+      .then((result) => {
+        if (cancelled) return;
+        const message = result.error ?? result.message;
+        if (message && !result.documents) {
+          throw new Error(message);
+        }
+        setDocuments((result.documents ?? []).map(normalizeDocumentRecord).filter((doc) => doc.id));
+        setLoading(false);
+      })
+      .catch((err) => {
+        if (cancelled) return;
+        setError(err instanceof Error ? err : new Error(String(err)));
+        setLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [databaseSlug, fetchKey, filterKey, options.offset, options.pageSize, queryTool.call]);
+
+  return { documents, loading, error, refetch };
+}
+
+function buildUpsertNoteArgs(args: UpsertDocumentArgs): UpsertNoteArgs {
+  const payload: UpsertNoteArgs = {};
+  if (args.documentId) payload.document_id = args.documentId;
+  if (typeof args.title === 'string') payload.title = args.title;
+  if (args.properties) Object.assign(payload, args.properties);
+  if ('contentBlocknote' in args) payload.content_blocknote = args.contentBlocknote ?? null;
+  return payload;
+}
+
+function pluralize(count: number, singular: string, plural = `${singular}s`): string {
+  return `${count} ${count === 1 ? singular : plural}`;
+}
+
+function getDateKey(value: unknown): string | null {
+  if (!isPresentString(value)) return null;
+  const match = value.match(/^(\d{4}-\d{2}-\d{2})/);
+  return match ? match[1] : null;
+}
+
+function getDateInputValue(value: unknown): string {
+  return getDateKey(value) ?? '';
+}
+
+function getRelationIds(value: unknown): string[] {
+  if (!Array.isArray(value)) return [];
+  return value.filter((item): item is string => isPresentString(item));
+}
+
+function getFolderTitle(document: DocumentRecord): string {
+  const explicit = document.properties.Name;
+  if (isPresentString(explicit)) return explicit;
+  return document.title || 'Untitled folder';
+}
+
+function getNoteTitle(document: DocumentRecord): string {
+  return isPresentString(document.title) ? document.title : DEFAULT_NOTE_TITLE;
+}
+
+function getPlainTextFromBlockNote(value: unknown): string {
+  const segments: string[] = [];
+
+  function visit(node: unknown): void {
+    if (typeof node === 'string') {
+      if (node.trim()) segments.push(node.trim());
+      return;
+    }
+    if (Array.isArray(node)) {
+      node.forEach(visit);
+      return;
+    }
+    if (!node || typeof node !== 'object') return;
+
+    const record = node as Record<string, unknown>;
+    if (typeof record.text === 'string' && record.text.trim()) {
+      segments.push(record.text.trim());
+    }
+    visit(record.content);
+    visit(record.children);
+  }
+
+  visit(value);
+  return segments.join(' ').replace(/\s+/g, ' ').trim();
+}
+
+function getNotePreviewText(document: DocumentRecord): string {
+  if (isPresentString(document.plainText)) {
+    return document.plainText.replace(/\s+/g, ' ').trim();
+  }
+  if (isPresentString(document.contentMarkdown)) {
+    return document.contentMarkdown
+      .replace(/[#*_`>~[\]()]/g, ' ')
+      .replace(/\s+/g, ' ')
+      .trim();
+  }
+  const fromBlocks = getPlainTextFromBlockNote(document.contentBlocknote);
+  if (fromBlocks) return fromBlocks;
+  return getNoteTitle(document);
+}
+
+function buildFolderOptions(documents: DocumentRecord[]): FolderOption[] {
+  const byId = new Map(documents.map((d) => [d.id, d]));
+
+  function buildPath(id: string, seen: Set<string> = new Set()): string {
+    const folder = byId.get(id);
+    if (!folder) return 'Untitled folder';
+    const title = getFolderTitle(folder);
+    if (seen.has(id)) return title;
+    seen.add(id);
+    const parentId = getRelationIds(folder.properties.Parent)[0] ?? null;
+    if (!parentId || !byId.has(parentId)) return title;
+    return `${buildPath(parentId, seen)} / ${title}`;
+  }
+
+  return documents
+    .map((d) => ({
+      id: d.id,
+      title: getFolderTitle(d),
+      parentId: getRelationIds(d.properties.Parent)[0] ?? null,
+      pathLabel: buildPath(d.id),
+    }))
+    .sort((a, b) => a.pathLabel.localeCompare(b.pathLabel));
+}
+
+function getCoverUrl(document: DocumentRecord): string | null {
+  if (isPresentString(document.cover)) {
+    return document.cover.trim();
+  }
+  return null;
+}
+
+function NoteIcon({
+  icon,
+  className,
+  fallbackClassName,
+}: {
+  icon: string | null | undefined;
+  className?: string;
+  fallbackClassName?: string;
+}) {
+  const Icon = getPhosphorIconComponent(icon);
+  if (Icon) {
+    return <Icon className={cn('h-3.5 w-3.5', className)} />;
+  }
+  if (typeof icon === 'string' && /^https?:\/\//i.test(icon.trim())) {
+    return (
+      <img
+        src={icon.trim()}
+        alt=""
+        className={cn('h-3.5 w-3.5 rounded-sm object-cover', className)}
+      />
+    );
+  }
+  return <FileText className={cn('h-3.5 w-3.5', className, fallbackClassName)} />;
+}
+
+function formatDateLabel(value: unknown): string {
+  const key = getDateKey(value);
+  if (!key) return 'No date';
+  const date = new Date(`${key}T12:00:00`);
+  return new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).format(date);
+}
+
+function formatPropertyValue(
+  value: unknown,
+  property: DatabaseProperty | null,
+  folderNameById: Map<string, string>,
+): string {
+  if (property?.type === 'relation') {
+    const ids = getRelationIds(value);
+    if (!ids.length) return 'None';
+    return ids.map((id) => folderNameById.get(id) ?? id).join(', ');
+  }
+  if (property?.type === 'date') return formatDateLabel(value);
+  if (Array.isArray(value)) return value.length ? value.map((v) => String(v)).join(', ') : 'None';
+  if (typeof value === 'boolean') return value ? 'Yes' : 'No';
+  if (typeof value === 'number') return String(value);
+  if (isPresentString(value)) return value;
+  return 'None';
+}
+
+function formatMonthLabel(month: Date): string {
+  return new Intl.DateTimeFormat('en-US', { month: 'long', year: 'numeric' }).format(month);
+}
+
+function startOfCalendarGrid(month: Date): Date {
+  const first = new Date(month.getFullYear(), month.getMonth(), 1, 12);
+  const mondayIndex = (first.getDay() + 6) % 7;
+  const start = new Date(first);
+  start.setDate(first.getDate() - mondayIndex);
+  return start;
+}
+
+function buildCalendarDays(month: Date): Date[] {
+  const start = startOfCalendarGrid(month);
+  return Array.from({ length: 42 }, (_, i) => {
+    const d = new Date(start);
+    d.setDate(start.getDate() + i);
+    return d;
+  });
+}
+
+function isSameMonth(a: Date, b: Date): boolean {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+}
+
+function isToday(day: Date): boolean {
+  const t = new Date();
+  return day.getFullYear() === t.getFullYear() && day.getMonth() === t.getMonth() && day.getDate() === t.getDate();
+}
+
+function getStatusLabel(value: unknown): string | null {
+  return isPresentString(value) ? value : null;
+}
+
+type StatusTone = 'active' | 'review' | 'done' | 'blocked' | 'idea' | 'neutral';
+
+function getStatusTone(status: string | null): StatusTone {
+  if (!status) return 'neutral';
+  const s = status.toLowerCase();
+  if (s.includes('done') || s.includes('complete') || s.includes('ship')) return 'done';
+  if (s.includes('progress') || s.includes('active') || s.includes('draft')) return 'active';
+  if (s.includes('review') || s.includes('wait') || s.includes('hold')) return 'review';
+  if (s.includes('block') || s.includes('stuck')) return 'blocked';
+  if (s.includes('idea') || s.includes('backlog')) return 'idea';
+  return 'neutral';
+}
+
+const statusPillClasses: Record<StatusTone, string> = {
+  active: 'bg-amber-500/10 text-amber-700 dark:text-amber-400',
+  review: 'bg-blue-500/10 text-blue-700 dark:text-blue-400',
+  done: 'bg-emerald-500/10 text-emerald-700 dark:text-emerald-400',
+  blocked: 'bg-red-500/10 text-red-700 dark:text-red-400',
+  idea: 'bg-muted text-muted-foreground',
+  neutral: 'bg-muted text-muted-foreground',
+};
+
+const statusDotClasses: Record<StatusTone, string> = {
+  active: 'bg-amber-500',
+  review: 'bg-blue-500',
+  done: 'bg-emerald-500',
+  blocked: 'bg-red-500',
+  idea: 'bg-stone-400',
+  neutral: 'bg-stone-400',
+};
+
+const statusBarClasses: Record<StatusTone, string> = {
+  active: 'border-l-amber-500',
+  review: 'border-l-blue-500',
+  done: 'border-l-emerald-500',
+  blocked: 'border-l-red-500',
+  idea: 'border-l-stone-400',
+  neutral: 'border-l-stone-400',
+};
+
+function StatusPill({ status }: { status: string | null }) {
+  if (!status) return null;
+  const tone = getStatusTone(status);
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[11px] font-semibold tracking-tight',
+        statusPillClasses[tone],
+      )}
+    >
+      <span className={cn('h-1.5 w-1.5 rounded-full', statusDotClasses[tone])} />
+      {status}
+    </span>
+  );
+}
+
+function Eyebrow({ children, className }: { children: React.ReactNode; className?: string }) {
+  return (
+    <span
+      className={cn(
+        'font-mono text-[10px] font-medium uppercase tracking-[0.14em] text-muted-foreground',
+        className,
+      )}
+    >
+      {children}
+    </span>
+  );
+}
+
+function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  action,
+}: {
+  icon: Icon;
+  title: string;
+  description: string;
+  action?: React.ReactNode;
+}) {
+  return (
+    <div className="flex flex-col items-center justify-center px-6 py-16 text-center">
+      <Icon className="mb-4 h-10 w-10 stroke-[1.5] text-muted-foreground/30" />
+      <p className="text-sm font-semibold text-foreground">{title}</p>
+      <p className="mt-1 max-w-sm text-[13px] text-muted-foreground">{description}</p>
+      {action ? <div className="mt-5">{action}</div> : null}
+    </div>
+  );
+}
+
+function LoadingState() {
+  return (
+    <div className="flex min-h-[360px] items-center justify-center gap-2 text-sm text-muted-foreground">
+      <Loader2 className="h-4 w-4 animate-spin" />
+      Loading notes…
+    </div>
+  );
+}
+
+function PageIcon({ icon }: { icon: string | null | undefined }) {
+  const Icon = getPhosphorIconComponent(icon);
+  if (Icon) {
+    return <Icon className="h-7 w-7 stroke-[1.5] text-foreground" />;
+  }
+  if (typeof icon === 'string' && /^https?:\/\//i.test(icon.trim())) {
+    return (
+      <img
+        src={icon.trim()}
+        alt=""
+        className="h-7 w-7 rounded-md object-cover"
+      />
+    );
+  }
+  return <Boxes className="h-7 w-7 stroke-[1.5] text-foreground" />;
+}
+
+function FolderIconPicker({
+  displayIcon,
+  storedIcon,
+  disabled,
+  onChange,
+  onRemove,
+}: {
+  displayIcon: string | null;
+  storedIcon: string | null;
+  disabled?: boolean;
+  onChange: (icon: string) => void;
+  onRemove: () => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const containerRef = useRef<HTMLDivElement>(null);
+  const selectedName = parsePhosphorIconName(storedIcon);
+  const filteredIcons = useMemo(() => {
+    const normalizedQuery = query.trim().toLowerCase();
+    if (!normalizedQuery) return SUGGESTED_FOLDER_ICON_NAMES;
+    return ALL_PHOSPHOR_ICON_NAMES
+      .filter((name) => name.replace(/-/g, ' ').includes(normalizedQuery))
+      .slice(0, 96);
+  }, [query]);
+
+  useEffect(() => {
+    if (!open) return;
+
+    function handlePointerDown(event: PointerEvent) {
+      const target = event.target;
+      if (target instanceof Node && containerRef.current?.contains(target)) {
+        return;
+      }
+      setOpen(false);
+    }
+
+    const root = containerRef.current?.getRootNode();
+    const eventTarget =
+      root instanceof ShadowRoot || root instanceof Document
+        ? root
+        : document;
+    eventTarget.addEventListener('pointerdown', handlePointerDown);
+    return () => eventTarget.removeEventListener('pointerdown', handlePointerDown);
+  }, [open]);
+
+  return (
+    <div ref={containerRef} className="relative w-fit">
+      <button
+        type="button"
+        aria-label="Edit folder icon"
+        disabled={disabled}
+        onClick={() => setOpen((value) => !value)}
+        className="group/icon inline-flex size-10 items-center justify-center rounded-lg text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-60"
+      >
+        <PageIcon icon={displayIcon} />
+      </button>
+      {open ? (
+        <div className="absolute left-0 top-12 z-20 w-[320px] rounded-lg border border-border bg-popover p-3 text-popover-foreground shadow-xl">
+          <div className="mb-2 flex items-center gap-2">
+            <input
+              autoFocus
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              placeholder="Search icons"
+              className="h-8 min-w-0 flex-1 rounded-md border border-border bg-background px-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            />
+            <button
+              type="button"
+              aria-label="Close icon picker"
+              onClick={() => setOpen(false)}
+              className="inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+            >
+              <X className="h-3.5 w-3.5" />
+            </button>
+          </div>
+          <div className="grid max-h-[220px] grid-cols-8 gap-1 overflow-y-auto pr-1">
+            {filteredIcons.map((name) => {
+              const Icon = getPhosphorIconComponentByName(name);
+              if (!Icon) return null;
+
+              return (
+                <button
+                  key={name}
+                  type="button"
+                  title={name}
+                  aria-label={`Use ${name} icon`}
+                  onPointerDown={(event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    onChange(`${PHOSPHOR_ICON_PREFIX}${name}`);
+                    setOpen(false);
+                  }}
+                  className={cn(
+                    'inline-flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground',
+                    selectedName === name && 'bg-muted text-foreground ring-1 ring-border',
+                  )}
+                >
+                  <Icon className="h-4 w-4" />
+                </button>
+              );
+            })}
+          </div>
+          {filteredIcons.length === 0 ? (
+            <p className="py-6 text-center text-sm text-muted-foreground">No icons found.</p>
+          ) : null}
+          <div className="mt-3 border-t border-border pt-2">
+            <button
+              type="button"
+              disabled={!storedIcon}
+              onPointerDown={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                if (!storedIcon) return;
+                onRemove();
+                setOpen(false);
+              }}
+              className="inline-flex h-8 w-full items-center justify-center rounded-md text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
+            >
+              Remove custom icon
+            </button>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function ToolbarIconButton({
+  icon: Icon,
+  label,
+}: {
+  icon: Icon;
+  label: string;
+}) {
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      aria-disabled="true"
+      tabIndex={-1}
+      className="inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted/40 hover:text-foreground"
+    >
+      <Icon className="h-3.5 w-3.5" />
+    </button>
+  );
+}
+
+function ViewPill({
+  config,
+  active,
+  onSelect,
+}: {
+  config: TabConfig;
+  active: boolean;
+  onSelect: () => void;
+}) {
+  const Icon = config.icon;
+  return (
+    <button
+      type="button"
+      onClick={onSelect}
+      className={cn(
+        'inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-[12.5px] font-medium transition-colors',
+        active
+          ? 'bg-muted text-foreground'
+          : 'text-muted-foreground hover:bg-muted/50 hover:text-foreground',
+      )}
+    >
+      <Icon className="h-3.5 w-3.5" />
+      {config.label}
+    </button>
+  );
+}
+
+function PageHeader({
+  title,
+  icon,
+  storedIcon = null,
+  iconEditable = false,
+  iconSaving = false,
+  titleEditable = false,
+  titleEditing = false,
+  titleDraft = '',
+  titleSaving = false,
+  activeTab,
+  onTabChange,
+  onIconChange,
+  onIconRemove,
+  onStartTitleEdit,
+  onTitleDraftChange,
+  onSubmitTitleEdit,
+  onCancelTitleEdit,
+}: {
+  title: string;
+  icon: string | null;
+  storedIcon?: string | null;
+  iconEditable?: boolean;
+  iconSaving?: boolean;
+  titleEditable?: boolean;
+  titleEditing?: boolean;
+  titleDraft?: string;
+  titleSaving?: boolean;
+  activeTab: TabKey;
+  onTabChange: (tab: TabKey) => void;
+  onIconChange?: (icon: string) => void;
+  onIconRemove?: () => void;
+  onStartTitleEdit?: () => void;
+  onTitleDraftChange?: (title: string) => void;
+  onSubmitTitleEdit?: () => void;
+  onCancelTitleEdit?: () => void;
+}) {
+  return (
+    <div className="flex flex-col gap-3 px-6 pt-6">
+      {iconEditable ? (
+        <FolderIconPicker
+          displayIcon={icon}
+          storedIcon={storedIcon}
+          disabled={iconSaving}
+          onChange={(nextIcon) => onIconChange?.(nextIcon)}
+          onRemove={() => onIconRemove?.()}
+        />
+      ) : (
+        <div className="flex size-10 items-center justify-center">
+          <PageIcon icon={icon} />
+        </div>
+      )}
+      {titleEditing ? (
+        <input
+          autoFocus
+          value={titleDraft}
+          onChange={(event) => onTitleDraftChange?.(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              event.preventDefault();
+              onSubmitTitleEdit?.();
+            }
+            if (event.key === 'Escape') {
+              event.preventDefault();
+              onCancelTitleEdit?.();
+            }
+          }}
+          onBlur={() => onSubmitTitleEdit?.()}
+          className="h-10 w-full max-w-xl rounded-md border border-border bg-background px-2 text-3xl font-bold text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        />
+      ) : (
+        <div className="flex min-w-0 items-center gap-2">
+          <h1
+            className={cn(
+              'min-w-0 truncate text-3xl font-bold tracking-tight text-foreground',
+              titleEditable && 'cursor-text',
+            )}
+            onDoubleClick={titleEditable ? onStartTitleEdit : undefined}
+          >
+            {title}
+          </h1>
+          {titleEditable ? (
+            <button
+              type="button"
+              aria-label="Rename folder"
+              onClick={onStartTitleEdit}
+              disabled={titleSaving}
+              className="inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
+            >
+              {titleSaving ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Pencil className="h-3.5 w-3.5" />}
+            </button>
+          ) : null}
+        </div>
+      )}
+      <div className="flex flex-wrap items-center gap-2 border-b border-border pb-2">
+        <div className="flex items-center gap-1">
+          {TABS.map((tab) => (
+            <ViewPill
+              key={tab.key}
+              config={tab}
+              active={activeTab === tab.key}
+              onSelect={() => onTabChange(tab.key)}
+            />
+          ))}
+        </div>
+        <div className="ml-auto flex items-center gap-0.5">
+          <ToolbarIconButton icon={SlidersHorizontal} label="Filter" />
+          <ToolbarIconButton icon={ArrowUpDown} label="Sort" />
+          <ToolbarIconButton icon={Link2} label="Copy link" />
+          <ToolbarIconButton icon={Search} label="Search" />
+          <ToolbarIconButton icon={Eye} label="Views" />
+          <ToolbarIconButton icon={Maximize2} label="Expand" />
+          <button
+            type="button"
+            aria-label="New"
+            aria-disabled="true"
+            tabIndex={-1}
+            className="ml-1 inline-flex h-7 items-center gap-1 rounded-md bg-primary px-2.5 text-[12.5px] font-semibold text-primary-foreground transition-colors hover:bg-primary/90"
+          >
+            New
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function NotesPage() {
+  const { app, route, context } = useNotis();
+  const navigation = useNotisNavigation();
+  const { request } = useBackend();
+  const upsertNote = useTool<UpsertNoteArgs, UpsertNoteResult>('LOCAL_NOTIS_DATABASE_UPSERT_NOTES');
+
+  const [activeTab, setActiveTab] = useState<TabKey>('gallery');
+  const [activeDateProperty, setActiveDateProperty] = useState('');
+  const [visibleMonth, setVisibleMonth] = useState(() => new Date());
+  const [creatingDocument, setCreatingDocument] = useState(false);
+  const [savingNoteId, setSavingNoteId] = useState<string | null>(null);
+  const [savingFolderTitle, setSavingFolderTitle] = useState(false);
+  const [savingFolderIcon, setSavingFolderIcon] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [folderTitleDraft, setFolderTitleDraft] = useState('');
+  const [editingFolderTitle, setEditingFolderTitle] = useState(false);
+  const [folderTitleOverride, setFolderTitleOverride] = useState<{ id: string; title: string } | null>(null);
+  const [folderIconOverride, setFolderIconOverride] = useState<{ id: string; icon: string | null } | null>(null);
+  const folderRenameSubmittingRef = useRef(false);
+
+  const collectionItem = normalizeCollectionItem(context.collectionItem ?? context.collection_item);
+  const noteSchema = useNoteSchema(NOTE_DATABASE_SLUG);
+  const noteProperties = noteSchema.properties;
+  const titleProperty = noteProperties.find((p) => p.type === 'title');
+  const titlePropertyName = titleProperty?.name ?? 'Title';
+  const folderPropertyName = noteProperties.find((p) => p.type === 'relation')?.name ?? 'Folder';
+  const statusPropertyName =
+    noteProperties.find((p) => p.type === 'status' || p.name === 'Status')?.name ?? null;
+  const dateProperties = noteProperties.filter((p) => p.type === 'date');
+  const metadataProperties = noteProperties.filter((p) => p.name !== titlePropertyName);
+
+  const activeFolderId = collectionItem?.id ?? null;
+  const activeFolderTitle =
+    activeFolderId && folderTitleOverride?.id === activeFolderId
+      ? folderTitleOverride.title
+      : collectionItem?.title ?? null;
+  const activeFolderIcon =
+    activeFolderId && folderIconOverride?.id === activeFolderId
+      ? folderIconOverride.icon
+      : collectionItem?.icon ?? null;
+
+  const notesFilter = activeFolderId
+    ? {
+        filters: [
+          {
+            property: folderPropertyName,
+            operator: 'contains',
+            type: 'relation',
+            value: activeFolderId,
+          },
+        ],
+      }
+    : undefined;
+
+  const notesQuery = useQueryDocuments(NOTE_DATABASE_SLUG, { filter: notesFilter, pageSize: 250 });
+  const foldersQuery = useQueryDocuments(FOLDER_DATABASE_SLUG, { pageSize: 500 });
+
+  const { setLoading: setSearchLoading } = useTopBarSearch({
+    value: searchQuery,
+    onChange: setSearchQuery,
+    placeholder: 'Search notes…',
+    onSubmit: notesQuery.refetch,
+  });
+
+  useEffect(() => {
+    setSearchLoading(notesQuery.loading);
+  }, [notesQuery.loading, setSearchLoading]);
+
+  const trimmedQuery = searchQuery.trim().toLowerCase();
+  const allNotes = notesQuery.documents;
+  const notes = trimmedQuery
+    ? allNotes.filter((note) => {
+        if (getNoteTitle(note).toLowerCase().includes(trimmedQuery)) return true;
+        if (isPresentString(note.plainText) && note.plainText.toLowerCase().includes(trimmedQuery)) return true;
+        if (isPresentString(note.contentMarkdown) && note.contentMarkdown.toLowerCase().includes(trimmedQuery)) return true;
+        return false;
+      })
+    : allNotes;
+  const folders = foldersQuery.documents;
+  const folderOptions = buildFolderOptions(folders);
+  const folderNameById = new Map(folderOptions.map((f) => [f.id, f.title]));
+
+  const calendarPropertyName =
+    dateProperties.find((p) => p.name === activeDateProperty)?.name ?? dateProperties[0]?.name ?? '';
+
+  const notesByDay = new Map<string, DocumentRecord[]>();
+  for (const note of notes) {
+    const key = getDateKey(note.properties[calendarPropertyName]);
+    if (!key) continue;
+    const bucket = notesByDay.get(key) ?? [];
+    bucket.push(note);
+    notesByDay.set(key, bucket);
+  }
+  const scheduledNotesCount = notes.filter((n) =>
+    dateProperties.some((p) => Boolean(getDateKey(n.properties[p.name]))),
+  ).length;
+
+  const monthDays = buildCalendarDays(visibleMonth);
+  const isLoading = notesQuery.loading || foldersQuery.loading || noteSchema.loading;
+  const currentFolderLabel = activeFolderTitle ?? 'All notes';
+  const topLevelError = errorMessage || notesQuery.error?.message || foldersQuery.error?.message || noteSchema.error?.message;
+  const pageTitle = activeFolderTitle || route?.name || app?.name || 'Notes';
+  const pageIcon = activeFolderIcon || route?.icon || null;
+
+  useEffect(() => {
+    setEditingFolderTitle(false);
+    setFolderTitleDraft('');
+    folderRenameSubmittingRef.current = false;
+    setFolderIconOverride(null);
+  }, [activeFolderId]);
+
+  useEffect(() => {
+    if (!dateProperties.length) {
+      if (activeDateProperty) setActiveDateProperty('');
+      return;
+    }
+    if (!dateProperties.some((p) => p.name === activeDateProperty)) {
+      setActiveDateProperty(dateProperties[0].name);
+    }
+  }, [activeDateProperty, dateProperties]);
+
+  async function openNote(document: DocumentRecord) {
+    navigation.toDocument(document.id, document.title);
+  }
+
+  const upsertNoteDocument = useCallback(
+    async (args: UpsertDocumentArgs): Promise<DocumentRecord> => {
+      const result = await upsertNote.call(buildUpsertNoteArgs(args));
+      const message = result.error ?? result.message;
+      if (!result.document) {
+        throw new Error(message ?? 'Failed to save note');
+      }
+      return normalizeDocumentRecord(result.document);
+    },
+    [upsertNote.call],
+  );
+
+  async function createDocument() {
+    setCreatingDocument(true);
+    setErrorMessage(null);
+    try {
+      const document = await upsertNoteDocument({
+        title: DEFAULT_NOTE_TITLE,
+        properties: activeFolderId ? { [folderPropertyName]: [activeFolderId] } : undefined,
+      });
+      navigation.toDocument(document.id, document.title);
+    } catch (error) {
+      setErrorMessage(error instanceof Error ? error.message : 'Failed to create note');
+    } finally {
+      setCreatingDocument(false);
+    }
+  }
+
+  async function saveProperties(documentId: string, properties: Record<string, unknown>) {
+    setSavingNoteId(documentId);
+    setErrorMessage(null);
+    try {
+      await upsertNoteDocument({ documentId, properties });
+      notesQuery.refetch();
+    } catch (error) {
+      setErrorMessage(error instanceof Error ? error.message : 'Failed to save note');
+    } finally {
+      setSavingNoteId(null);
+    }
+  }
+
+  async function saveTitle(documentId: string, nextTitle: string) {
+    const normalized = nextTitle.trim() || DEFAULT_NOTE_TITLE;
+    setSavingNoteId(documentId);
+    setErrorMessage(null);
+    try {
+      await upsertNoteDocument({ documentId, title: normalized });
+      notesQuery.refetch();
+    } catch (error) {
+      setErrorMessage(error instanceof Error ? error.message : 'Failed to rename note');
+    } finally {
+      setSavingNoteId(null);
+    }
+  }
+
+  function startFolderTitleEdit() {
+    if (!activeFolderId) return;
+    setFolderTitleDraft(activeFolderTitle ?? '');
+    setEditingFolderTitle(true);
+  }
+
+  function cancelFolderTitleEdit() {
+    setEditingFolderTitle(false);
+    setFolderTitleDraft('');
+    folderRenameSubmittingRef.current = false;
+  }
+
+  async function submitFolderTitleEdit() {
+    if (folderRenameSubmittingRef.current) return;
+    if (!activeFolderId || !app?.id || !route?.slug) {
+      cancelFolderTitleEdit();
+      return;
+    }
+
+    const previousTitle = activeFolderTitle ?? collectionItem?.title ?? '';
+    const nextTitle = folderTitleDraft.trim();
+    if (!nextTitle || nextTitle === previousTitle) {
+      cancelFolderTitleEdit();
+      return;
+    }
+
+    folderRenameSubmittingRef.current = true;
+    setEditingFolderTitle(false);
+    setFolderTitleOverride({ id: activeFolderId, title: nextTitle });
+    setSavingFolderTitle(true);
+    setErrorMessage(null);
+    try {
+      const response = await request('/portal_views/collection_tree/rename', {
+        method: 'POST',
+        body: {
+          app_id: app.id,
+          route_slug: route.slug,
+          item_id: activeFolderId,
+          title: nextTitle,
+        },
+      }) as { item?: { title?: unknown } };
+      const savedTitle = typeof response.item?.title === 'string' && response.item.title.trim()
+        ? response.item.title
+        : nextTitle;
+      setFolderTitleOverride({ id: activeFolderId, title: savedTitle });
+      foldersQuery.refetch();
+    } catch (error) {
+      setFolderTitleOverride(previousTitle ? { id: activeFolderId, title: previousTitle } : null);
+      setErrorMessage(error instanceof Error ? error.message : 'Failed to rename folder');
+    } finally {
+      setSavingFolderTitle(false);
+      setFolderTitleDraft('');
+      folderRenameSubmittingRef.current = false;
+    }
+  }
+
+  async function saveFolderIcon(nextIcon: string | null) {
+    if (!activeFolderId || !app?.id || !route?.slug) return;
+    if (nextIcon === activeFolderIcon) return;
+
+    const previousIcon = activeFolderIcon;
+    setFolderIconOverride({ id: activeFolderId, icon: nextIcon });
+    setSavingFolderIcon(true);
+    setErrorMessage(null);
+    try {
+      const response = await request('/portal_views/collection_tree/icon', {
+        method: 'POST',
+        body: {
+          app_id: app.id,
+          route_slug: route.slug,
+          item_id: activeFolderId,
+          icon: nextIcon,
+        },
+      }) as { item?: { icon?: unknown } };
+      const savedIcon = typeof response.item?.icon === 'string' ? response.item.icon : null;
+      setFolderIconOverride({ id: activeFolderId, icon: savedIcon });
+      foldersQuery.refetch();
+    } catch (error) {
+      setFolderIconOverride({ id: activeFolderId, icon: previousIcon });
+      setErrorMessage(error instanceof Error ? error.message : 'Failed to update folder icon');
+    } finally {
+      setSavingFolderIcon(false);
+    }
+  }
+
+  const rowRefs = useRef(new Map<string, HTMLTableRowElement>());
+  const multiSelect = useMultiSelect<DocumentRecord>({
+    items: notes,
+    getId: (note) => note.id,
+    bindKeyboardShortcuts: activeTab === 'table',
+    enableDragSelect: activeTab === 'table',
+    onHeadChange: (id) => {
+      if (!id) return;
+      rowRefs.current.get(id)?.scrollIntoView({ block: 'nearest' });
+    },
+  });
+
+  async function bulkClearFolder() {
+    const ids = multiSelect.getSelectedItems().map((n) => n.id);
+    if (ids.length === 0) return;
+    setErrorMessage(null);
+    try {
+      await Promise.all(
+        ids.map((documentId) =>
+          upsertNoteDocument({
+            documentId,
+            properties: { [folderPropertyName]: [] },
+          }),
+        ),
+      );
+      multiSelect.clear();
+      notesQuery.refetch();
+    } catch (error) {
+      setErrorMessage(error instanceof Error ? error.message : 'Failed to update notes');
+    }
+  }
+
+  return (
+    <main className="flex min-h-screen flex-col bg-background">
+      <PageHeader
+        title={pageTitle}
+        icon={pageIcon}
+        storedIcon={activeFolderIcon}
+        iconEditable={Boolean(activeFolderId)}
+        iconSaving={savingFolderIcon}
+        onIconChange={(nextIcon) => void saveFolderIcon(nextIcon)}
+        onIconRemove={() => void saveFolderIcon(null)}
+        titleEditable={Boolean(activeFolderId)}
+        titleEditing={editingFolderTitle}
+        titleDraft={folderTitleDraft}
+        titleSaving={savingFolderTitle}
+        onStartTitleEdit={startFolderTitleEdit}
+        onTitleDraftChange={setFolderTitleDraft}
+        onSubmitTitleEdit={() => void submitFolderTitleEdit()}
+        onCancelTitleEdit={cancelFolderTitleEdit}
+        activeTab={activeTab}
+        onTabChange={setActiveTab}
+      />
+
+      {topLevelError ? (
+        <div className="mx-6 mt-3 rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-[13px] text-destructive">
+          {topLevelError}
+        </div>
+      ) : null}
+
+      {isLoading ? <LoadingState /> : null}
+
+      {!isLoading && activeTab === 'gallery' ? (
+        <GalleryBody
+          notes={notes}
+          statusPropertyName={statusPropertyName}
+          onOpenNote={openNote}
+          onCreateDocument={createDocument}
+          creatingDocument={creatingDocument}
+          currentFolderLabel={currentFolderLabel}
+          hasCollectionItem={Boolean(activeFolderId)}
+        />
+      ) : null}
+
+      {!isLoading && activeTab === 'table' ? (
+        <TableBody
+          notes={notes}
+          metadataProperties={metadataProperties}
+          folderOptions={folderOptions}
+          folderNameById={folderNameById}
+          folderPropertyName={folderPropertyName}
+          savingNoteId={savingNoteId}
+          onOpen={openNote}
+          onSaveTitle={saveTitle}
+          onSaveProperties={saveProperties}
+          currentFolderLabel={currentFolderLabel}
+          hasCollectionItem={Boolean(activeFolderId)}
+          multiSelect={multiSelect}
+          rowRefs={rowRefs.current}
+        />
+      ) : null}
+
+      {!isLoading && activeTab === 'calendar' ? (
+        <CalendarBody
+          notes={notes}
+          monthDays={monthDays}
+          visibleMonth={visibleMonth}
+          setVisibleMonth={setVisibleMonth}
+          notesByDay={notesByDay}
+          statusPropertyName={statusPropertyName}
+          calendarPropertyName={calendarPropertyName}
+          dateProperties={dateProperties}
+          activeDateProperty={activeDateProperty}
+          setActiveDateProperty={setActiveDateProperty}
+          scheduledNotesCount={scheduledNotesCount}
+          onOpen={openNote}
+        />
+      ) : null}
+
+      {activeTab === 'table' ? (
+        <>
+          <MultiSelectDragOverlay rect={multiSelect.dragRect} />
+          <MultiSelectActionBar
+            selectedCount={multiSelect.selectedCount}
+            itemLabel={{ singular: 'note', plural: 'notes' }}
+            actions={[
+              {
+                id: 'clear-folder',
+                label: 'Move out of folder',
+                shortcut: 'M',
+                icon: <FolderMinus className="h-3.5 w-3.5" />,
+                onRun: bulkClearFolder,
+              },
+            ]}
+          />
+        </>
+      ) : null}
+    </main>
+  );
+}
+
+/* -------------------------------------------------------------------------- */
+/* Gallery view                                                                */
+/* -------------------------------------------------------------------------- */
+
+function GalleryBody({
+  notes,
+  statusPropertyName,
+  onOpenNote,
+  onCreateDocument,
+  creatingDocument,
+  currentFolderLabel,
+  hasCollectionItem,
+}: {
+  notes: DocumentRecord[];
+  statusPropertyName: string | null;
+  onOpenNote: (doc: DocumentRecord) => void;
+  onCreateDocument: () => Promise<void>;
+  creatingDocument: boolean;
+  currentFolderLabel: string;
+  hasCollectionItem: boolean;
+}) {
+  if (!notes.length) {
+    return (
+      <EmptyState
+        icon={LayoutGrid}
+        title={hasCollectionItem ? 'No notes in this folder' : 'No notes yet'}
+        description={
+          hasCollectionItem
+            ? `Create the first note in ${currentFolderLabel}.`
+            : 'Folders live in the sidebar. Create a note here to get started.'
+        }
+        action={
+          <Button
+            size="sm"
+            onClick={() => void onCreateDocument()}
+            disabled={creatingDocument}
+            className="gap-1.5"
+          >
+            <Plus className="h-3.5 w-3.5" />
+            {creatingDocument ? 'Creating…' : 'New note'}
+          </Button>
+        }
+      />
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-1 gap-4 px-4 py-4 sm:grid-cols-2 sm:px-6 lg:grid-cols-3 xl:grid-cols-4">
+      {notes.map((note) => (
+        <NoteCard
+          key={note.id}
+          note={note}
+          statusPropertyName={statusPropertyName}
+          onOpen={() => onOpenNote(note)}
+        />
+      ))}
+    </div>
+  );
+}
+
+function NoteCard({
+  note,
+  statusPropertyName,
+  onOpen,
+}: {
+  note: DocumentRecord;
+  statusPropertyName: string | null;
+  onOpen: () => void;
+}) {
+  const status = statusPropertyName ? getStatusLabel(note.properties[statusPropertyName]) : null;
+  const coverUrl = getCoverUrl(note);
+  const title = getNoteTitle(note);
+  const previewText = getNotePreviewText(note);
+
+  return (
+    <button
+      type="button"
+      onClick={onOpen}
+      className={cn(
+        'group flex h-full w-full flex-col overflow-hidden rounded-xl border border-border bg-card text-left',
+        'transition-colors hover:border-foreground/20 hover:shadow-sm',
+      )}
+    >
+      <div className="relative aspect-[16/10] w-full overflow-hidden">
+        {coverUrl ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img src={coverUrl} alt="" className="h-full w-full object-cover" />
+        ) : (
+          <div className="flex h-full w-full bg-card px-5 py-5 text-foreground sm:px-6">
+            <p className="line-clamp-5 text-xl font-semibold leading-snug text-foreground/75 sm:text-2xl">
+              {previewText}
+            </p>
+          </div>
+        )}
+        {status ? (
+          <div className="absolute right-2 top-2">
+            <StatusPill status={status} />
+          </div>
+        ) : null}
+      </div>
+      <div className="flex w-full items-center gap-1.5 border-t border-border px-3 py-2">
+        <NoteIcon icon={note.icon} className="shrink-0 text-muted-foreground" />
+        <span className="line-clamp-1 text-[12.5px] text-foreground">
+          {title}
+        </span>
+      </div>
+    </button>
+  );
+}
+
+/* -------------------------------------------------------------------------- */
+/* Table view                                                                  */
+/* -------------------------------------------------------------------------- */
+
+function TableBody({
+  notes,
+  metadataProperties,
+  folderOptions,
+  folderNameById,
+  folderPropertyName,
+  savingNoteId,
+  onOpen,
+  onSaveTitle,
+  onSaveProperties,
+  currentFolderLabel,
+  hasCollectionItem,
+  multiSelect,
+  rowRefs,
+}: {
+  notes: DocumentRecord[];
+  metadataProperties: DatabaseProperty[];
+  folderOptions: FolderOption[];
+  folderNameById: Map<string, string>;
+  folderPropertyName: string;
+  savingNoteId: string | null;
+  onOpen: (doc: DocumentRecord) => void;
+  onSaveTitle: (id: string, title: string) => void;
+  onSaveProperties: (id: string, props: Record<string, unknown>) => void;
+  currentFolderLabel: string;
+  hasCollectionItem: boolean;
+  multiSelect: MultiSelectController<DocumentRecord>;
+  rowRefs: Map<string, HTMLTableRowElement>;
+}) {
+  const columns = metadataProperties.slice(0, 6);
+  const allSelected =
+    notes.length > 0 && notes.every((note) => multiSelect.isSelected(note.id));
+  const handleSelectAllToggle = () => {
+    if (allSelected) {
+      multiSelect.clear();
+      return;
+    }
+    multiSelect.select(notes.map((note) => note.id));
+  };
+
+  return (
+    <div className="flex flex-1 flex-col gap-4 px-6 py-5">
+      <div className="flex flex-wrap items-center gap-2">
+        <FilterChip icon={Settings2} label="Status is" value="Drafting, Review" />
+        <FilterChip icon={CalendarDays} label="Due" value="this week" />
+        <FilterChip icon={Rows3} label="Sort by" value="Updated ↓" />
+        <button
+          type="button"
+          className="inline-flex items-center gap-1.5 rounded-full border border-dashed border-border px-2.5 py-1 text-[11px] font-medium text-muted-foreground transition-colors hover:border-border hover:text-foreground"
+        >
+          <Plus className="h-3 w-3" />
+          Add filter
+        </button>
+        <div className="flex-1" />
+        <Eyebrow>Hide · Tags, Author</Eyebrow>
+      </div>
+
+      {!notes.length ? (
+        <EmptyState
+          icon={Table2}
+          title={hasCollectionItem ? 'No rows in this folder' : 'No rows yet'}
+          description={
+            hasCollectionItem
+              ? `Create a note in ${currentFolderLabel} to start editing metadata here.`
+              : 'Notes become rows here. Create one to begin editing metadata inline.'
+          }
+        />
+      ) : (
+        <div className="overflow-hidden rounded-lg border border-border bg-card">
+          <div {...multiSelect.getContainerProps()} className="overflow-x-auto">
+            <table className="w-full min-w-[1040px] border-collapse text-[13px]">
+              <thead>
+                <tr className="border-b border-border bg-muted/40">
+                  <th className="w-10 px-3 py-2.5">
+                    <MultiSelectCheckbox
+                      isSelected={allSelected}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleSelectAllToggle();
+                      }}
+                      alwaysVisible
+                      ariaLabel={allSelected ? 'Deselect all notes' : 'Select all notes'}
+                    />
+                  </th>
+                  <th className="px-3 py-2.5 text-left">
+                    <div className="flex items-center gap-1.5">
+                      <FileText className="h-3 w-3 text-muted-foreground" />
+                      <Eyebrow>Note</Eyebrow>
+                    </div>
+                  </th>
+                  {columns.map((p) => (
+                    <th key={p.name} className="border-l border-border px-3 py-2.5 text-left">
+                      <Eyebrow>{p.name}</Eyebrow>
+                    </th>
+                  ))}
+                  <th className="w-10 border-l border-border" />
+                </tr>
+              </thead>
+              <tbody>
+                {notes.map((note) => (
+                  <TableRow
+                    key={note.id}
+                    note={note}
+                    columns={columns}
+                    folderOptions={folderOptions}
+                    folderNameById={folderNameById}
+                    folderPropertyName={folderPropertyName}
+                    saving={savingNoteId === note.id}
+                    onOpen={() => onOpen(note)}
+                    onSaveTitle={(title) => onSaveTitle(note.id, title)}
+                    onSaveProperties={(props) => onSaveProperties(note.id, props)}
+                    isSelected={multiSelect.isSelected(note.id)}
+                    onCheckboxClick={multiSelect.onCheckboxClick(note.id)}
+                    onRowMouseDown={multiSelect.onRowMouseDown(note.id)}
+                    rowProps={multiSelect.getRowProps(note.id)}
+                    rowRef={(node) => {
+                      if (node) {
+                        rowRefs.set(note.id, node);
+                      } else {
+                        rowRefs.delete(note.id);
+                      }
+                    }}
+                  />
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+
+      <div className="flex flex-wrap items-center gap-3 rounded-lg border border-border bg-card px-4 py-3">
+        <div className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md bg-muted">
+          <Sparkles className="h-3.5 w-3.5 text-foreground" />
+        </div>
+        <div className="min-w-0 flex-1">
+          <p className="text-[13px] font-semibold text-foreground">Need a different view?</p>
+          <p className="text-[12px] text-muted-foreground">
+            Ask Notis to add a column, group by folder, hide shipped rows, or sort differently. No settings maze.
+          </p>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          <AgentHintChip>group by Folder</AgentHintChip>
+          <AgentHintChip>hide Updated</AgentHintChip>
+          <AgentHintChip>sort by Words</AgentHintChip>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function FilterChip({ icon: Icon, label, value }: { icon: Icon; label: string; value: string }) {
+  return (
+    <span className="inline-flex items-center gap-1.5 rounded-full border border-border bg-background px-2.5 py-1 text-[11px]">
+      <Icon className="h-3 w-3 text-muted-foreground" />
+      <span className="text-muted-foreground">{label}</span>
+      <span className="font-semibold text-foreground">{value}</span>
+    </span>
+  );
+}
+
+function AgentHintChip({ children }: { children: React.ReactNode }) {
+  return (
+    <span className="rounded-full bg-muted px-2.5 py-1 font-mono text-[10px] text-foreground/80">
+      {children}
+    </span>
+  );
+}
+
+function TableRow({
+  note,
+  columns,
+  folderOptions,
+  folderNameById,
+  folderPropertyName,
+  saving,
+  onOpen,
+  onSaveTitle,
+  onSaveProperties,
+  isSelected,
+  onCheckboxClick,
+  onRowMouseDown,
+  rowProps,
+  rowRef,
+}: {
+  note: DocumentRecord;
+  columns: DatabaseProperty[];
+  folderOptions: FolderOption[];
+  folderNameById: Map<string, string>;
+  folderPropertyName: string;
+  saving: boolean;
+  onOpen: () => void;
+  onSaveTitle: (title: string) => void;
+  onSaveProperties: (props: Record<string, unknown>) => void;
+  isSelected: boolean;
+  onCheckboxClick: (event: React.MouseEvent) => void;
+  onRowMouseDown: (event: React.MouseEvent) => void;
+  rowProps: Record<string, string>;
+  rowRef: (node: HTMLTableRowElement | null) => void;
+}) {
+  return (
+    <tr
+      {...rowProps}
+      ref={rowRef}
+      className={cn(
+        'group border-b border-border last:border-b-0 transition-colors',
+        saving ? 'bg-muted/20' : 'hover:bg-muted/30',
+        isSelected && 'bg-primary/5 hover:bg-primary/10',
+      )}
+      onClick={onOpen}
+      onMouseDown={onRowMouseDown}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          onOpen();
+        }
+      }}
+      tabIndex={0}
+    >
+      <td className="px-3 py-2">
+        <MultiSelectCheckbox
+          isSelected={isSelected}
+          onClick={onCheckboxClick}
+          alwaysVisible={isSelected}
+          className={cn(
+            'transition-opacity',
+            !isSelected && 'opacity-0 group-hover:opacity-100 focus-visible:opacity-100',
+          )}
+        />
+      </td>
+      <td className="px-3 py-2">
+        <div className="flex items-center gap-2">
+          <div className="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-md bg-muted">
+            <FileText className="h-3 w-3 text-muted-foreground" />
+          </div>
+          <input
+            type="text"
+            defaultValue={getNoteTitle(note)}
+            key={`${note.id}:title:${getNoteTitle(note)}`}
+            onClick={(e) => e.stopPropagation()}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') e.currentTarget.blur();
+            }}
+            onBlur={(e) => onSaveTitle(e.target.value)}
+            className="w-full rounded-md border border-transparent bg-transparent px-1.5 py-1 text-[13px] font-medium text-foreground outline-none transition-colors focus:border-border focus:bg-background"
+          />
+          <ArrowUpRight className="h-3.5 w-3.5 flex-shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-60" />
+        </div>
+      </td>
+      {columns.map((prop) => (
+        <td key={prop.name} className="border-l border-border px-3 py-2 align-middle">
+          <TableCell
+            note={note}
+            property={prop}
+            folderOptions={folderOptions}
+            folderNameById={folderNameById}
+            folderPropertyName={folderPropertyName}
+            onSaveProperties={onSaveProperties}
+          />
+        </td>
+      ))}
+      <td className="w-10 border-l border-border" />
+    </tr>
+  );
+}
+
+function TableCell({
+  note,
+  property,
+  folderOptions,
+  folderNameById,
+  folderPropertyName,
+  onSaveProperties,
+}: {
+  note: DocumentRecord;
+  property: DatabaseProperty;
+  folderOptions: FolderOption[];
+  folderNameById: Map<string, string>;
+  folderPropertyName: string;
+  onSaveProperties: (props: Record<string, unknown>) => void;
+}) {
+  const value = note.properties[property.name];
+  const selectClass =
+    'w-full appearance-none rounded-md border border-transparent bg-transparent px-1.5 py-1 text-[12px] text-foreground outline-none transition-colors focus:border-border focus:bg-background';
+
+  if (property.type === 'status' || property.type === 'select') {
+    const label = isPresentString(value) ? value : '';
+    return (
+      <div className="relative inline-flex items-center" onClick={(e) => e.stopPropagation()}>
+        {label ? (
+          <StatusPill status={label} />
+        ) : (
+          <span className="rounded-full bg-muted px-2 py-0.5 text-[11px] text-muted-foreground">None</span>
+        )}
+        <select
+          aria-label={property.name}
+          className="absolute inset-0 cursor-pointer opacity-0"
+          value={label}
+          onChange={(e) => onSaveProperties({ [property.name]: e.target.value || null })}
+        >
+          <option value="">None</option>
+          {(property.options ?? []).map((opt) => (
+            <option key={opt.id ?? opt.name} value={opt.name}>
+              {opt.name}
+            </option>
+          ))}
+        </select>
+      </div>
+    );
+  }
+
+  if (property.type === 'date') {
+    return (
+      <input
+        type="date"
+        value={getDateInputValue(value)}
+        onClick={(e) => e.stopPropagation()}
+        onChange={(e) => onSaveProperties({ [property.name]: e.target.value || null })}
+        className={cn(selectClass, 'text-[12px]')}
+      />
+    );
+  }
+
+  if (property.type === 'checkbox') {
+    return (
+      <label
+        className="inline-flex items-center"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <input
+          type="checkbox"
+          checked={Boolean(value)}
+          onChange={(e) => onSaveProperties({ [property.name]: e.target.checked })}
+          className="h-3.5 w-3.5 rounded border-border"
+        />
+      </label>
+    );
+  }
+
+  if (property.type === 'relation' && property.name === folderPropertyName) {
+    const currentId = getRelationIds(value)[0] ?? '';
+    return (
+      <select
+        className={cn(selectClass, 'text-[12px]')}
+        value={currentId}
+        onClick={(e) => e.stopPropagation()}
+        onChange={(e) => onSaveProperties({ [property.name]: e.target.value ? [e.target.value] : [] })}
+      >
+        <option value="">No folder</option>
+        {folderOptions.map((f) => (
+          <option key={f.id} value={f.id}>
+            {f.pathLabel}
+          </option>
+        ))}
+      </select>
+    );
+  }
+
+  if (property.type === 'number') {
+    return (
+      <input
+        type="number"
+        defaultValue={typeof value === 'number' ? String(value) : ''}
+        inputMode="decimal"
+        key={`${note.id}:${property.name}:${String(value ?? '')}`}
+        onClick={(e) => e.stopPropagation()}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') e.currentTarget.blur();
+        }}
+        onBlur={(e) => {
+          const v = e.target.value.trim();
+          onSaveProperties({ [property.name]: v ? Number(v) : null });
+        }}
+        className={cn(selectClass, 'font-mono text-[12px]')}
+      />
+    );
+  }
+
+  if (property.type === 'rich_text') {
+    return (
+      <input
+        type="text"
+        defaultValue={isPresentString(value) ? value : ''}
+        key={`${note.id}:${property.name}:${String(value ?? '')}`}
+        onClick={(e) => e.stopPropagation()}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') e.currentTarget.blur();
+        }}
+        onBlur={(e) => {
+          const v = e.target.value.trim();
+          onSaveProperties({ [property.name]: v || null });
+        }}
+        className={cn(selectClass, 'text-[12px]')}
+      />
+    );
+  }
+
+  return (
+    <span className="px-1.5 text-[12px] text-muted-foreground">
+      {formatPropertyValue(value, property, folderNameById)}
+    </span>
+  );
+}
+
+/* -------------------------------------------------------------------------- */
+/* Calendar view                                                               */
+/* -------------------------------------------------------------------------- */
+
+function CalendarBody({
+  notes,
+  monthDays,
+  visibleMonth,
+  setVisibleMonth,
+  notesByDay,
+  statusPropertyName,
+  calendarPropertyName,
+  dateProperties,
+  activeDateProperty,
+  setActiveDateProperty,
+  scheduledNotesCount,
+  onOpen,
+}: {
+  notes: DocumentRecord[];
+  monthDays: Date[];
+  visibleMonth: Date;
+  setVisibleMonth: (d: Date) => void;
+  notesByDay: Map<string, DocumentRecord[]>;
+  statusPropertyName: string | null;
+  calendarPropertyName: string;
+  dateProperties: DatabaseProperty[];
+  activeDateProperty: string;
+  setActiveDateProperty: (v: string) => void;
+  scheduledNotesCount: number;
+  onOpen: (doc: DocumentRecord) => void;
+}) {
+  return (
+    <div className="flex flex-1 flex-col gap-4 px-6 py-5">
+      <div className="flex flex-wrap items-center gap-2">
+        <div className="inline-flex items-center gap-0 rounded-lg border border-border bg-background p-0.5">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7"
+            onClick={() => setVisibleMonth(new Date(visibleMonth.getFullYear(), visibleMonth.getMonth() - 1, 1))}
+          >
+            <ChevronLeft className="h-3.5 w-3.5" />
+          </Button>
+          <div className="px-2 text-[13px] font-semibold tracking-tight text-foreground">
+            {formatMonthLabel(visibleMonth)}
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7"
+            onClick={() => setVisibleMonth(new Date(visibleMonth.getFullYear(), visibleMonth.getMonth() + 1, 1))}
+          >
+            <ChevronRight className="h-3.5 w-3.5" />
+          </Button>
+        </div>
+        <Button variant="outline" size="sm" className="h-8 text-[12px]" onClick={() => setVisibleMonth(new Date())}>
+          Today
+        </Button>
+
+        <div className="inline-flex items-center gap-1.5 rounded-full border border-border bg-background px-2.5 py-1 text-[11px]">
+          <CalendarDays className="h-3 w-3 text-muted-foreground" />
+          <span className="text-muted-foreground">Date field</span>
+          <select
+            className="appearance-none bg-transparent pr-3 font-semibold text-foreground outline-none"
+            value={calendarPropertyName}
+            onChange={(e) => setActiveDateProperty(e.target.value)}
+            disabled={!dateProperties.length}
+          >
+            {dateProperties.length ? (
+              dateProperties.map((p) => (
+                <option key={p.name} value={p.name}>
+                  {p.name}
+                </option>
+              ))
+            ) : (
+              <option value="">—</option>
+            )}
+          </select>
+          <ChevronDown className="h-3 w-3 text-muted-foreground" />
+        </div>
+
+        <div className="flex-1" />
+        <Eyebrow>{pluralize(scheduledNotesCount, 'note')} scheduled</Eyebrow>
+      </div>
+
+      {!dateProperties.length ? (
+        <EmptyState
+          icon={CalendarDays}
+          title="No date property yet"
+          description="Add a date field to the notes database and this board will start plotting notes automatically."
+        />
+      ) : (
+        <div className="overflow-hidden rounded-lg border border-border bg-card">
+          <div className="grid grid-cols-7 border-b border-border bg-muted/40">
+            {WEEKDAY_LABELS.map((label, i) => (
+              <div
+                key={label}
+                className={cn(
+                  'px-3 py-2 font-mono text-[10px] font-medium uppercase tracking-[0.14em]',
+                  i >= 5 ? 'text-muted-foreground/60' : 'text-muted-foreground',
+                )}
+              >
+                {label}
+              </div>
+            ))}
+          </div>
+          <div className="grid grid-cols-7">
+            {monthDays.map((day) => {
+              const key = `${day.getFullYear()}-${String(day.getMonth() + 1).padStart(2, '0')}-${String(day.getDate()).padStart(2, '0')}`;
+              const dayNotes = notesByDay.get(key) ?? [];
+              const inMonth = isSameMonth(day, visibleMonth);
+              const today = isToday(day);
+              return (
+                <div
+                  key={key}
+                  className={cn(
+                    'flex min-h-[110px] flex-col gap-1.5 border-b border-r border-border px-2 py-2',
+                    !inMonth && 'bg-muted/30',
+                  )}
+                >
+                  <div className="flex items-center justify-between">
+                    {today ? (
+                      <span className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-foreground text-[11px] font-semibold text-background">
+                        {day.getDate()}
+                      </span>
+                    ) : (
+                      <span
+                        className={cn(
+                          'text-[12px] font-medium',
+                          inMonth ? 'text-foreground/80' : 'text-muted-foreground/50',
+                        )}
+                      >
+                        {day.getDate()}
+                      </span>
+                    )}
+                    {today ? <Eyebrow className="text-foreground">Today</Eyebrow> : null}
+                  </div>
+                  <div className="flex flex-col gap-1">
+                    {dayNotes.slice(0, 3).map((note) => {
+                      const status = statusPropertyName
+                        ? getStatusLabel(note.properties[statusPropertyName])
+                        : null;
+                      const tone = getStatusTone(status);
+                      return (
+                        <button
+                          key={note.id}
+                          type="button"
+                          onClick={() => onOpen(note)}
+                          className={cn(
+                            'line-clamp-1 rounded-md border border-l-2 border-border bg-background px-2 py-1 text-left text-[11px] font-medium text-foreground transition-colors hover:bg-muted/50',
+                            statusBarClasses[tone],
+                          )}
+                        >
+                          {getNoteTitle(note)}
+                        </button>
+                      );
+                    })}
+                    {dayNotes.length > 3 ? (
+                      <span className="px-1 text-[10px] text-muted-foreground">+{dayNotes.length - 3} more</span>
+                    ) : null}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      <div className="flex flex-wrap items-center gap-4 rounded-lg border border-border bg-card px-4 py-3">
+        <Eyebrow>Legend</Eyebrow>
+        <LegendItem color="bg-amber-500" label="Drafting" />
+        <LegendItem color="bg-blue-500" label="Review" />
+        <LegendItem color="bg-emerald-500" label="Shipped" />
+        <LegendItem color="bg-stone-400" label="Idea" />
+        <div className="flex-1" />
+        <div className="flex flex-wrap items-center gap-2">
+          <Sparkles className="h-3.5 w-3.5 text-foreground" />
+          <span className="text-[12px] text-muted-foreground">Ask Notis to</span>
+          <AgentHintChip>use Publish date</AgentHintChip>
+          <AgentHintChip>color by Folder</AgentHintChip>
+          <AgentHintChip>switch to week view</AgentHintChip>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function LegendItem({ color, label }: { color: string; label: string }) {
+  return (
+    <div className="flex items-center gap-1.5">
+      <span className={cn('h-0.5 w-3 rounded', color)} />
+      <span className="text-[11px] font-medium text-foreground/80">{label}</span>
+    </div>
+  );
+}