@notis_ai/cli 0.2.4 → 0.2.6

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

@@ -1,19 +1,29 @@
 'use client';
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import {
   MultiSelectActionBar,
   MultiSelectCheckbox,
   MultiSelectDragOverlay,
   useMultiSelect,
   useBackend,
+  useDatabaseSchema,
+  useDocuments,
   useNotis,
   useNotisNavigation,
   useTopBarSearch,
-  useTool,
+  useUpsertDocument,
+  asRecord,
+  getDocumentPreview,
+  getRelationIds,
+  isPresentString,
+  optionalString,
+  type DatabaseProperty,
+  type DocumentRecord,
   type MultiSelectController,
+  type UpsertDocumentArgs,
 } 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 { ArrowUpRightIcon as ArrowUpRight, CubeIcon as Boxes, BookOpenIcon as BookOpen, BookOpenTextIcon as BookOpenText, CalendarIcon as CalendarDays, CaretDownIcon as ChevronDown, CaretLeftIcon as ChevronLeft, CaretRightIcon as ChevronRight, FileTextIcon as FileText, FolderIcon as Folder, FolderMinusIcon as FolderMinus, FolderOpenIcon as FolderOpen, FolderPlusIcon as FolderPlus, FoldersIcon as Folders, SquaresFourIcon as LayoutGrid, CircleNotchIcon as Loader2, MagnifyingGlassIcon as Search, NotePencilIcon as NotebookPen, PencilIcon as Pencil, PlusIcon as Plus, NoteIcon as StickyNote, TableIcon as Table2, TrashIcon as Trash, XIcon as X, type Icon } from '@phosphor-icons/react';
 import * as PhosphorIcons from '@phosphor-icons/react';
 
 import { Button } from '@/components/ui/button';
@@ -34,50 +44,6 @@ type FolderOption = {
   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;
@@ -85,72 +51,21 @@ type CollectionItemContext = {
   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'];
 
+// Sentinel for the built-in "Created" date, sourced from each document's
+// created_at timestamp rather than a user-defined date property.
+const CREATED_DATE_FIELD = '__created__';
+const CREATED_DATE_LABEL = 'Created';
+
+type CalendarDateField = {
+  value: string;
+  label: string;
+};
+
 const TABS: TabConfig[] = [
   { key: 'gallery', label: 'Gallery', icon: LayoutGrid },
   { key: 'table', label: 'Table', icon: Table2 },
@@ -239,112 +154,6 @@ const ALL_PHOSPHOR_ICON_NAMES = Object.keys(PhosphorIcons)
   .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);
@@ -357,104 +166,6 @@ function normalizeCollectionItem(value: unknown): CollectionItemContext | null {
   };
 }
 
-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}`;
 }
@@ -469,9 +180,9 @@ 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 getNoteDateValue(note: DocumentRecord, field: string): unknown {
+  if (field === CREATED_DATE_FIELD) return note.createdAt;
+  return note.properties[field];
 }
 
 function getFolderTitle(document: DocumentRecord): string {
@@ -484,45 +195,8 @@ 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);
+  return getDocumentPreview(document);
 }
 
 function buildFolderOptions(documents: DocumentRecord[]): FolderOption[] {
@@ -784,7 +458,7 @@ function FolderIconPicker({
   useEffect(() => {
     if (!open) return;
 
-    function handlePointerDown(event: PointerEvent) {
+    function handlePointerDown(event: Event) {
       const target = event.target;
       if (target instanceof Node && containerRef.current?.contains(target)) {
         return;
@@ -883,26 +557,6 @@ function FolderIconPicker({
   );
 }
 
-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,
@@ -948,6 +602,8 @@ function PageHeader({
   onTitleDraftChange,
   onSubmitTitleEdit,
   onCancelTitleEdit,
+  onCreateNote,
+  creatingNote = false,
 }: {
   title: string;
   icon: string | null;
@@ -966,6 +622,8 @@ function PageHeader({
   onTitleDraftChange?: (title: string) => void;
   onSubmitTitleEdit?: () => void;
   onCancelTitleEdit?: () => void;
+  onCreateNote?: () => void;
+  creatingNote?: boolean;
 }) {
   return (
     <div className="flex flex-col gap-3 px-6 pt-6">
@@ -1036,20 +694,14 @@ function PageHeader({
           ))}
         </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"
+            onClick={onCreateNote}
+            disabled={!onCreateNote || creatingNote}
+            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 disabled:pointer-events-none disabled:opacity-60"
           >
-            New
+            {creatingNote ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Plus className="h-3.5 w-3.5" />}
+            {creatingNote ? 'Creating…' : 'New'}
           </button>
         </div>
       </div>
@@ -1058,13 +710,13 @@ function PageHeader({
 }
 
 export default function NotesPage() {
-  const { app, route, context } = useNotis();
+  const { app, route, collectionItem: rawCollectionItem } = useNotis();
   const navigation = useNotisNavigation();
   const { request } = useBackend();
-  const upsertNote = useTool<UpsertNoteArgs, UpsertNoteResult>('LOCAL_NOTIS_DATABASE_UPSERT_NOTES');
+  const { upsert: upsertNoteDocument } = useUpsertDocument(NOTE_DATABASE_SLUG);
 
   const [activeTab, setActiveTab] = useState<TabKey>('gallery');
-  const [activeDateProperty, setActiveDateProperty] = useState('');
+  const [activeDateProperty, setActiveDateProperty] = useState(CREATED_DATE_FIELD);
   const [visibleMonth, setVisibleMonth] = useState(() => new Date());
   const [creatingDocument, setCreatingDocument] = useState(false);
   const [savingNoteId, setSavingNoteId] = useState<string | null>(null);
@@ -1076,10 +728,13 @@ export default function NotesPage() {
   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);
+  // Which bulk folder action is awaiting a target-folder pick, if any.
+  const [pendingFolderAction, setPendingFolderAction] = useState<'move' | 'add' | null>(null);
+  const [bulkRunning, setBulkRunning] = useState(false);
   const folderRenameSubmittingRef = useRef(false);
 
-  const collectionItem = normalizeCollectionItem(context.collectionItem ?? context.collection_item);
-  const noteSchema = useNoteSchema(NOTE_DATABASE_SLUG);
+  const collectionItem = normalizeCollectionItem(rawCollectionItem);
+  const noteSchema = useDatabaseSchema(NOTE_DATABASE_SLUG);
   const noteProperties = noteSchema.properties;
   const titleProperty = noteProperties.find((p) => p.type === 'title');
   const titlePropertyName = titleProperty?.name ?? 'Title';
@@ -1112,8 +767,8 @@ export default function NotesPage() {
       }
     : undefined;
 
-  const notesQuery = useQueryDocuments(NOTE_DATABASE_SLUG, { filter: notesFilter, pageSize: 250 });
-  const foldersQuery = useQueryDocuments(FOLDER_DATABASE_SLUG, { pageSize: 500 });
+  const notesQuery = useDocuments(NOTE_DATABASE_SLUG, { filter: notesFilter, pageSize: 250 });
+  const foldersQuery = useDocuments(FOLDER_DATABASE_SLUG, { pageSize: 500 });
 
   const { setLoading: setSearchLoading } = useTopBarSearch({
     value: searchQuery,
@@ -1140,19 +795,26 @@ export default function NotesPage() {
   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 ?? '';
+  // The calendar always offers a built-in "Created" field (sourced from each
+  // note's created_at) plus any user-defined date properties on the database.
+  const calendarDateFields: CalendarDateField[] = [
+    { value: CREATED_DATE_FIELD, label: CREATED_DATE_LABEL },
+    ...dateProperties.map((p) => ({ value: p.name, label: p.name })),
+  ];
+  const activeCalendarField = calendarDateFields.some((f) => f.value === activeDateProperty)
+    ? activeDateProperty
+    : CREATED_DATE_FIELD;
 
   const notesByDay = new Map<string, DocumentRecord[]>();
   for (const note of notes) {
-    const key = getDateKey(note.properties[calendarPropertyName]);
+    const key = getDateKey(getNoteDateValue(note, activeCalendarField));
     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]))),
+    Boolean(getDateKey(getNoteDateValue(n, activeCalendarField))),
   ).length;
 
   const monthDays = buildCalendarDays(visibleMonth);
@@ -1170,31 +832,16 @@ export default function NotesPage() {
   }, [activeFolderId]);
 
   useEffect(() => {
-    if (!dateProperties.length) {
-      if (activeDateProperty) setActiveDateProperty('');
-      return;
-    }
-    if (!dateProperties.some((p) => p.name === activeDateProperty)) {
-      setActiveDateProperty(dateProperties[0].name);
-    }
+    const valid =
+      activeDateProperty === CREATED_DATE_FIELD ||
+      dateProperties.some((p) => p.name === activeDateProperty);
+    if (!valid) setActiveDateProperty(CREATED_DATE_FIELD);
   }, [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);
@@ -1323,38 +970,96 @@ export default function NotesPage() {
     }
   }
 
-  const rowRefs = useRef(new Map<string, HTMLTableRowElement>());
+  // Holds both table rows and gallery cards so Shift+Arrow can scroll the head
+  // into view regardless of the active view.
+  const rowRefs = useRef(new Map<string, HTMLElement>());
+  const selectionEnabled = activeTab !== 'calendar';
   const multiSelect = useMultiSelect<DocumentRecord>({
     items: notes,
     getId: (note) => note.id,
-    bindKeyboardShortcuts: activeTab === 'table',
-    enableDragSelect: activeTab === 'table',
+    bindKeyboardShortcuts: selectionEnabled,
+    enableDragSelect: selectionEnabled,
     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;
+  // Clear the selection when the visible set changes out from under it (folder
+  // switch) or when entering a view that can't act on a selection (calendar),
+  // so bulk actions never apply to off-screen notes.
+  const clearSelection = multiSelect.clear;
+  useEffect(() => {
+    clearSelection();
+  }, [activeFolderId, clearSelection]);
+  useEffect(() => {
+    if (!selectionEnabled) clearSelection();
+  }, [selectionEnabled, clearSelection]);
+
+  // Runs `apply` for each selected note in parallel, then clears + refetches.
+  // `apply` receives the full note so handlers can read its current properties.
+  async function runBulk(
+    apply: (note: DocumentRecord) => UpsertDocumentArgs,
+    failureMessage: string,
+  ) {
+    const selected = multiSelect.getSelectedItems();
+    if (selected.length === 0) return;
+    setBulkRunning(true);
     setErrorMessage(null);
     try {
-      await Promise.all(
-        ids.map((documentId) =>
-          upsertNoteDocument({
-            documentId,
-            properties: { [folderPropertyName]: [] },
-          }),
-        ),
-      );
+      await Promise.all(selected.map((note) => upsertNoteDocument(apply(note))));
       multiSelect.clear();
       notesQuery.refetch();
     } catch (error) {
-      setErrorMessage(error instanceof Error ? error.message : 'Failed to update notes');
+      setErrorMessage(error instanceof Error ? error.message : failureMessage);
+    } finally {
+      setBulkRunning(false);
     }
   }
 
+  function bulkClearFolder() {
+    return runBulk(
+      (note) => ({ documentId: note.id, properties: { [folderPropertyName]: [] } }),
+      'Failed to update notes',
+    );
+  }
+
+  function bulkDelete() {
+    return runBulk(
+      (note) => ({ documentId: note.id, operation: 'archive' }),
+      'Failed to delete notes',
+    );
+  }
+
+  function bulkMoveToFolder(folderId: string) {
+    return runBulk(
+      (note) => ({ documentId: note.id, properties: { [folderPropertyName]: [folderId] } }),
+      'Failed to move notes',
+    );
+  }
+
+  function bulkAddToFolder(folderId: string) {
+    return runBulk(
+      (note) => ({
+        documentId: note.id,
+        properties: {
+          [folderPropertyName]: Array.from(
+            new Set([...getRelationIds(note.properties[folderPropertyName]), folderId]),
+          ),
+        },
+      }),
+      'Failed to add notes to folder',
+    );
+  }
+
+  async function handleFolderPick(folderId: string) {
+    const action = pendingFolderAction;
+    setPendingFolderAction(null);
+    if (!action) return;
+    if (action === 'move') await bulkMoveToFolder(folderId);
+    else await bulkAddToFolder(folderId);
+  }
+
   return (
     <main className="flex min-h-screen flex-col bg-background">
       <PageHeader
@@ -1375,6 +1080,8 @@ export default function NotesPage() {
         onCancelTitleEdit={cancelFolderTitleEdit}
         activeTab={activeTab}
         onTabChange={setActiveTab}
+        onCreateNote={() => void createDocument()}
+        creatingNote={creatingDocument}
       />
 
       {topLevelError ? (
@@ -1394,6 +1101,8 @@ export default function NotesPage() {
           creatingDocument={creatingDocument}
           currentFolderLabel={currentFolderLabel}
           hasCollectionItem={Boolean(activeFolderId)}
+          multiSelect={multiSelect}
+          rowRefs={rowRefs.current}
         />
       ) : null}
 
@@ -1417,35 +1126,63 @@ export default function NotesPage() {
 
       {!isLoading && activeTab === 'calendar' ? (
         <CalendarBody
-          notes={notes}
           monthDays={monthDays}
           visibleMonth={visibleMonth}
           setVisibleMonth={setVisibleMonth}
           notesByDay={notesByDay}
           statusPropertyName={statusPropertyName}
-          calendarPropertyName={calendarPropertyName}
-          dateProperties={dateProperties}
-          activeDateProperty={activeDateProperty}
+          calendarDateFields={calendarDateFields}
+          activeDateProperty={activeCalendarField}
           setActiveDateProperty={setActiveDateProperty}
           scheduledNotesCount={scheduledNotesCount}
           onOpen={openNote}
         />
       ) : null}
 
-      {activeTab === 'table' ? (
+      {selectionEnabled ? (
         <>
           <MultiSelectDragOverlay rect={multiSelect.dragRect} />
+          {pendingFolderAction ? (
+            <BulkFolderPicker
+              mode={pendingFolderAction}
+              folderOptions={folderOptions}
+              busy={bulkRunning}
+              onPick={(folderId) => void handleFolderPick(folderId)}
+              onClose={() => setPendingFolderAction(null)}
+            />
+          ) : null}
           <MultiSelectActionBar
             selectedCount={multiSelect.selectedCount}
             itemLabel={{ singular: 'note', plural: 'notes' }}
             actions={[
+              {
+                id: 'move-folder',
+                label: 'Move to folder',
+                shortcut: 'M',
+                icon: <FolderOpen className="h-3.5 w-3.5" />,
+                onRun: () => setPendingFolderAction('move'),
+              },
+              {
+                id: 'add-folder',
+                label: 'Add to folder',
+                shortcut: 'F',
+                icon: <FolderPlus className="h-3.5 w-3.5" />,
+                onRun: () => setPendingFolderAction('add'),
+              },
               {
                 id: 'clear-folder',
                 label: 'Move out of folder',
-                shortcut: 'M',
                 icon: <FolderMinus className="h-3.5 w-3.5" />,
                 onRun: bulkClearFolder,
               },
+              {
+                id: 'delete',
+                label: 'Delete',
+                shortcut: '#',
+                destructive: true,
+                icon: <Trash className="h-3.5 w-3.5" />,
+                onRun: bulkDelete,
+              },
             ]}
           />
         </>
@@ -1466,6 +1203,8 @@ function GalleryBody({
   creatingDocument,
   currentFolderLabel,
   hasCollectionItem,
+  multiSelect,
+  rowRefs,
 }: {
   notes: DocumentRecord[];
   statusPropertyName: string | null;
@@ -1474,6 +1213,8 @@ function GalleryBody({
   creatingDocument: boolean;
   currentFolderLabel: string;
   hasCollectionItem: boolean;
+  multiSelect: MultiSelectController<DocumentRecord>;
+  rowRefs: Map<string, HTMLElement>;
 }) {
   if (!notes.length) {
     return (
@@ -1501,13 +1242,26 @@ function GalleryBody({
   }
 
   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">
+    <div
+      {...multiSelect.getContainerProps()}
+      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)}
+          isSelected={multiSelect.isSelected(note.id)}
+          itemProps={multiSelect.getItemProps(note.id)}
+          checkboxProps={multiSelect.getCheckboxProps(note.id)}
+          cardRef={(node) => {
+            if (node) {
+              rowRefs.set(note.id, node);
+            } else {
+              rowRefs.delete(note.id);
+            }
+          }}
         />
       ))}
     </div>
@@ -1518,25 +1272,56 @@ function NoteCard({
   note,
   statusPropertyName,
   onOpen,
+  isSelected,
+  itemProps,
+  checkboxProps,
+  cardRef,
 }: {
   note: DocumentRecord;
   statusPropertyName: string | null;
   onOpen: () => void;
+  isSelected: boolean;
+  itemProps: { 'data-notis-row-id': string; onMouseDown: (event: React.MouseEvent) => void };
+  checkboxProps: { isSelected: boolean; onClick: (event: React.MouseEvent) => void };
+  cardRef: (node: HTMLDivElement | null) => void;
 }) {
   const status = statusPropertyName ? getStatusLabel(note.properties[statusPropertyName]) : null;
   const coverUrl = getCoverUrl(note);
   const title = getNoteTitle(note);
   const previewText = getNotePreviewText(note);
 
+  // A plain div (no `role="button"`) so the SDK's drag-select can arm from a
+  // card body; keyboard access is preserved via tabIndex + Enter.
   return (
-    <button
-      type="button"
+    <div
+      {...itemProps}
+      ref={cardRef}
+      tabIndex={0}
       onClick={onOpen}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          onOpen();
+        }
+      }}
       className={cn(
-        'group flex h-full w-full flex-col overflow-hidden rounded-xl border border-border bg-card text-left',
+        'group relative flex h-full w-full cursor-pointer flex-col overflow-hidden rounded-xl border bg-card text-left',
         'transition-colors hover:border-foreground/20 hover:shadow-sm',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+        isSelected ? 'border-primary ring-2 ring-primary' : 'border-border',
       )}
     >
+      <div className="absolute left-2 top-2 z-10">
+        <MultiSelectCheckbox
+          {...checkboxProps}
+          alwaysVisible={isSelected}
+          ariaLabel={isSelected ? 'Deselect note' : 'Select note'}
+          className={cn(
+            'transition-opacity',
+            !isSelected && 'opacity-0 group-hover:opacity-100 focus-visible:opacity-100',
+          )}
+        />
+      </div>
       <div className="relative aspect-[16/10] w-full overflow-hidden">
         {coverUrl ? (
           // eslint-disable-next-line @next/next/no-img-element
@@ -1560,7 +1345,96 @@ function NoteCard({
           {title}
         </span>
       </div>
-    </button>
+    </div>
+  );
+}
+
+/* -------------------------------------------------------------------------- */
+/* Bulk folder picker (Move to / Add to folder)                                */
+/* -------------------------------------------------------------------------- */
+
+function BulkFolderPicker({
+  mode,
+  folderOptions,
+  busy,
+  onPick,
+  onClose,
+}: {
+  mode: 'move' | 'add';
+  folderOptions: FolderOption[];
+  busy: boolean;
+  onPick: (folderId: string) => void;
+  onClose: () => void;
+}) {
+  const [query, setQuery] = useState('');
+  const containerRef = useRef<HTMLDivElement>(null);
+  const normalizedQuery = query.trim().toLowerCase();
+  const filtered = normalizedQuery
+    ? folderOptions.filter((f) => f.pathLabel.toLowerCase().includes(normalizedQuery))
+    : folderOptions;
+
+  useEffect(() => {
+    function handlePointerDown(event: Event) {
+      const target = event.target;
+      if (target instanceof Node && containerRef.current?.contains(target)) return;
+      onClose();
+    }
+    const root = containerRef.current?.getRootNode();
+    const eventTarget =
+      root instanceof ShadowRoot || root instanceof Document ? root : document;
+    eventTarget.addEventListener('pointerdown', handlePointerDown);
+    return () => eventTarget.removeEventListener('pointerdown', handlePointerDown);
+  }, [onClose]);
+
+  return (
+    <div
+      ref={containerRef}
+      role="dialog"
+      aria-label={mode === 'move' ? 'Move notes to folder' : 'Add notes to folder'}
+      className="fixed bottom-16 left-1/2 z-[70] w-[320px] -translate-x-1/2 rounded-lg border border-border bg-popover p-3 text-popover-foreground shadow-xl"
+    >
+      <div className="mb-2 flex items-center justify-between">
+        <span className="text-[12px] font-semibold text-foreground">
+          {mode === 'move' ? 'Move to folder' : 'Add to folder'}
+        </span>
+        <button
+          type="button"
+          aria-label="Close"
+          onClick={onClose}
+          className="inline-flex size-7 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="mb-2 flex items-center gap-2 rounded-md border border-border bg-background px-2">
+        <Search className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+        <input
+          autoFocus
+          value={query}
+          onChange={(event) => setQuery(event.target.value)}
+          placeholder="Search folders"
+          className="h-8 min-w-0 flex-1 bg-transparent text-sm outline-none"
+        />
+      </div>
+      <div className="max-h-[220px] overflow-y-auto">
+        {filtered.length ? (
+          filtered.map((folder) => (
+            <button
+              key={folder.id}
+              type="button"
+              disabled={busy}
+              onClick={() => onPick(folder.id)}
+              className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[13px] text-foreground transition-colors hover:bg-muted disabled:pointer-events-none disabled:opacity-50"
+            >
+              <Folder className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+              <span className="truncate">{folder.pathLabel}</span>
+            </button>
+          ))
+        ) : (
+          <p className="py-6 text-center text-sm text-muted-foreground">No folders found.</p>
+        )}
+      </div>
+    </div>
   );
 }
 
@@ -1595,7 +1469,7 @@ function TableBody({
   currentFolderLabel: string;
   hasCollectionItem: boolean;
   multiSelect: MultiSelectController<DocumentRecord>;
-  rowRefs: Map<string, HTMLTableRowElement>;
+  rowRefs: Map<string, HTMLElement>;
 }) {
   const columns = metadataProperties.slice(0, 6);
   const allSelected =
@@ -1610,21 +1484,6 @@ function TableBody({
 
   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}
@@ -1697,45 +1556,10 @@ function TableBody({
           </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,
@@ -1976,27 +1800,23 @@ function TableCell({
 /* -------------------------------------------------------------------------- */
 
 function CalendarBody({
-  notes,
   monthDays,
   visibleMonth,
   setVisibleMonth,
   notesByDay,
   statusPropertyName,
-  calendarPropertyName,
-  dateProperties,
+  calendarDateFields,
   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[];
+  calendarDateFields: CalendarDateField[];
   activeDateProperty: string;
   setActiveDateProperty: (v: string) => void;
   scheduledNotesCount: number;
@@ -2035,19 +1855,14 @@ function CalendarBody({
           <span className="text-muted-foreground">Date field</span>
           <select
             className="appearance-none bg-transparent pr-3 font-semibold text-foreground outline-none"
-            value={calendarPropertyName}
+            value={activeDateProperty}
             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>
-            )}
+            {calendarDateFields.map((field) => (
+              <option key={field.value} value={field.value}>
+                {field.label}
+              </option>
+            ))}
           </select>
           <ChevronDown className="h-3 w-3 text-muted-foreground" />
         </div>
@@ -2056,14 +1871,7 @@ function CalendarBody({
         <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="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
@@ -2136,33 +1944,7 @@ function CalendarBody({
               );
             })}
           </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>
-  );
-}