@notis_ai/cli 0.2.2 → 0.2.3

package/dist/scaffolds/{notes → notis-notes}/app/page.tsx

@@ -1,45 +1,20 @@
 'use client';
 
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   MultiSelectActionBar,
   MultiSelectCheckbox,
   MultiSelectDragOverlay,
-  useDatabase,
   useMultiSelect,
+  useBackend,
   useNotis,
-  useNotisRuntime,
+  useNotisNavigation,
   useTopBarSearch,
-  useUpsertDocument,
-  type DatabaseProperty,
-  type DocumentRecord,
+  useTool,
   type MultiSelectController,
 } from '@notis/sdk';
-import {
-  ArrowUpDown,
-  ArrowUpRight,
-  Boxes,
-  CalendarDays,
-  ChevronDown,
-  ChevronLeft,
-  ChevronRight,
-  Eye,
-  FileText,
-  FolderMinus,
-  LayoutGrid,
-  Link2,
-  Loader2,
-  Maximize2,
-  Plus,
-  Rows3,
-  Search,
-  Settings2,
-  SlidersHorizontal,
-  Sparkles,
-  Table2,
-  type LucideIcon,
-} from 'lucide-react';
-import { DynamicIcon, type IconName } from 'lucide-react/dynamic';
+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';
@@ -49,7 +24,7 @@ type TabKey = 'gallery' | 'table' | 'calendar';
 type TabConfig = {
   key: TabKey;
   label: string;
-  icon: LucideIcon;
+  icon: Icon;
 };
 
 type FolderOption = {
@@ -59,6 +34,118 @@ 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;
+  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';
@@ -70,10 +157,304 @@ const TABS: TabConfig[] = [
   { 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}`;
 }
@@ -184,17 +565,9 @@ function NoteIcon({
   className?: string;
   fallbackClassName?: string;
 }) {
-  if (typeof icon === 'string' && icon.startsWith('lucide:')) {
-    const name = icon.slice('lucide:'.length).trim().replace(/_/g, '-');
-    if (name) {
-      return (
-        <DynamicIcon
-          name={name as IconName}
-          className={cn('h-3.5 w-3.5', className)}
-          fallback={() => <FileText className={cn('h-3.5 w-3.5', className, fallbackClassName)} />}
-        />
-      );
-    }
+  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 (
@@ -342,7 +715,7 @@ function EmptyState({
   description,
   action,
 }: {
-  icon: LucideIcon;
+  icon: Icon;
   title: string;
   description: string;
   action?: React.ReactNode;
@@ -367,17 +740,9 @@ function LoadingState() {
 }
 
 function PageIcon({ icon }: { icon: string | null | undefined }) {
-  if (typeof icon === 'string' && icon.startsWith('lucide:')) {
-    const name = icon.slice('lucide:'.length).trim().replace(/_/g, '-');
-    if (name) {
-      return (
-        <DynamicIcon
-          name={name as IconName}
-          className="h-7 w-7 stroke-[1.5] text-foreground"
-          fallback={() => <Boxes className="h-7 w-7 stroke-[1.5] text-foreground" />}
-        />
-      );
-    }
+  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 (
@@ -391,11 +756,138 @@ function PageIcon({ icon }: { icon: string | null | undefined }) {
   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: LucideIcon;
+  icon: Icon;
   label: string;
 }) {
   return (
@@ -441,18 +933,97 @@ function ViewPill({
 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">
-      <PageIcon icon={icon} />
-      <h1 className="text-3xl font-bold tracking-tight text-foreground">{title}</h1>
+      {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) => (
@@ -487,20 +1058,29 @@ function PageHeader({
 }
 
 export default function NotesPage() {
-  const { app, route, databases, collectionItem } = useNotis();
-  const runtime = useNotisRuntime();
-  const { upsert } = useUpsertDocument();
+  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 noteDatabase = databases.find((d) => d.slug === NOTE_DATABASE_SLUG) ?? null;
-  const noteProperties = noteDatabase?.properties ?? [];
+  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';
@@ -510,6 +1090,14 @@ export default function NotesPage() {
   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
     ? {
@@ -524,8 +1112,8 @@ export default function NotesPage() {
       }
     : undefined;
 
-  const notesQuery = useDatabase(NOTE_DATABASE_SLUG, { filter: notesFilter, pageSize: 250 });
-  const foldersQuery = useDatabase(FOLDER_DATABASE_SLUG, { pageSize: 500 });
+  const notesQuery = useQueryDocuments(NOTE_DATABASE_SLUG, { filter: notesFilter, pageSize: 250 });
+  const foldersQuery = useQueryDocuments(FOLDER_DATABASE_SLUG, { pageSize: 500 });
 
   const { setLoading: setSearchLoading } = useTopBarSearch({
     value: searchQuery,
@@ -568,11 +1156,18 @@ export default function NotesPage() {
   ).length;
 
   const monthDays = buildCalendarDays(visibleMonth);
-  const isLoading = notesQuery.loading || foldersQuery.loading;
-  const currentFolderLabel = collectionItem?.title ?? 'All notes';
-  const topLevelError = errorMessage || notesQuery.error?.message || foldersQuery.error?.message;
-  const pageTitle = collectionItem?.title || route?.name || app?.name || 'Notes';
-  const pageIcon = collectionItem?.icon || route?.icon || null;
+  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) {
@@ -585,19 +1180,30 @@ export default function NotesPage() {
   }, [activeDateProperty, dateProperties]);
 
   async function openNote(document: DocumentRecord) {
-    runtime?.navigate?.({ kind: 'document', documentId: document.id, title: document.title });
+    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 upsert({
-        databaseSlug: NOTE_DATABASE_SLUG,
+      const document = await upsertNoteDocument({
         title: DEFAULT_NOTE_TITLE,
         properties: activeFolderId ? { [folderPropertyName]: [activeFolderId] } : undefined,
       });
-      runtime?.navigate?.({ kind: 'document', documentId: document.id, title: document.title });
+      navigation.toDocument(document.id, document.title);
     } catch (error) {
       setErrorMessage(error instanceof Error ? error.message : 'Failed to create note');
     } finally {
@@ -609,7 +1215,7 @@ export default function NotesPage() {
     setSavingNoteId(documentId);
     setErrorMessage(null);
     try {
-      await upsert({ databaseSlug: NOTE_DATABASE_SLUG, documentId, properties });
+      await upsertNoteDocument({ documentId, properties });
       notesQuery.refetch();
     } catch (error) {
       setErrorMessage(error instanceof Error ? error.message : 'Failed to save note');
@@ -623,7 +1229,7 @@ export default function NotesPage() {
     setSavingNoteId(documentId);
     setErrorMessage(null);
     try {
-      await upsert({ databaseSlug: NOTE_DATABASE_SLUG, documentId, title: normalized });
+      await upsertNoteDocument({ documentId, title: normalized });
       notesQuery.refetch();
     } catch (error) {
       setErrorMessage(error instanceof Error ? error.message : 'Failed to rename note');
@@ -632,6 +1238,91 @@ export default function NotesPage() {
     }
   }
 
+  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,
@@ -651,8 +1342,7 @@ export default function NotesPage() {
     try {
       await Promise.all(
         ids.map((documentId) =>
-          upsert({
-            databaseSlug: NOTE_DATABASE_SLUG,
+          upsertNoteDocument({
             documentId,
             properties: { [folderPropertyName]: [] },
           }),
@@ -670,6 +1360,19 @@ export default function NotesPage() {
       <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}
       />
@@ -1015,7 +1718,7 @@ function TableBody({
   );
 }
 
-function FilterChip({ icon: Icon, label, value }: { icon: LucideIcon; label: string; value: string }) {
+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" />