Phase 2b: file tree, navigation, and CRUD (#5)

Removes the hardcoded scratch.md from Phase 2a. The current note now
lives in the URL hash so reloads and back/forward preserve state, and
a sidebar lets the user browse, create, rename, and delete notes.

Sidebar:
- Tree built from /api/tree, dirs first then files alphabetically.
- Click a file to open it; the row highlights when current.
- Hover reveals rename (✎) and delete (✕) buttons.
- "Today" button opens daily/YYYY-MM-DD.md, seeding "# YYYY-MM-DD"
  if missing.
- "+ New" button prompts for a path and creates an empty .md file.

App:
- useHashRoute hook reads/writes location.hash, decoded so paths with
  slashes round-trip cleanly.
- useTree hook exposes { entries, error, reload }; reloaded after
  every create/rename/delete and after the first save of a new note.
- File load handles 404 by seeding (today heading for the daily
  note, empty otherwise) and queueing a save so the file appears
  in the tree.
- loadedPathRef guards the debounced save against firing for the
  previous file when the user navigates while typing.
- Default landing path is today's daily note.

Co-authored-by: Claude <noreply@anthropic.com>

Author: kelsi-bizer

packages/notes-app/src/App.tsx

@@ -1,34 +1,68 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { Editor } from './components/Editor';
-import { getFile, putFile, FileApiError } from './api/client';
+import { Sidebar } from './components/Sidebar';
+import { useHashRoute } from './hooks/useHashRoute';
+import { useTree } from './hooks/useTree';
 import { useDebouncedEffect } from './hooks/useDebouncedEffect';
+import { buildTree, todayDailyPath, todayHeading } from './utils/tree';
+import {
+  getFile,
+  putFile,
+  deleteFile,
+  moveFile,
+  fileExists,
+  FileApiError
+} from './api/client';
 
-const HARDCODED_PATH = 'scratch.md';
 const SAVE_DEBOUNCE_MS = 500;
+const DEFAULT_NEW_NOTE_PATH = 'pages/untitled.md';
 
 type SaveStatus = 'idle' | 'pending' | 'saving' | 'saved' | 'error';
 
 export function App() {
+  const [path, navigate] = useHashRoute();
+  const { entries, error: treeError, reload: reloadTree } = useTree();
+
   const [content, setContent] = useState<string>('');
   const [loaded, setLoaded] = useState(false);
   const [loadError, setLoadError] = useState<string | null>(null);
   const [saveStatus, setSaveStatus] = useState<SaveStatus>('idle');
   const [saveError, setSaveError] = useState<string | null>(null);
 
+  // Track which path the in-memory `content` belongs to. Without this,
+  // a hash change can fire a stale debounced save against the new path.
+  const loadedPathRef = useRef<string | null>(null);
+
+  // First-load default: navigate to today's daily note.
   useEffect(() => {
+    if (path === '') navigate(todayDailyPath());
+    // Only on mount.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Load the file whenever the path changes.
+  useEffect(() => {
+    if (!path) return;
     let cancelled = false;
+    setLoaded(false);
+    setLoadError(null);
+    setSaveStatus('idle');
     (async () => {
       try {
-        const { content: loadedContent } = await getFile(HARDCODED_PATH);
-        if (!cancelled) {
-          setContent(loadedContent);
-          setLoaded(true);
-        }
+        const { content: c } = await getFile(path);
+        if (cancelled) return;
+        loadedPathRef.current = path;
+        setContent(c);
+        setLoaded(true);
       } catch (err) {
         if (cancelled) return;
         if (err instanceof FileApiError && err.status === 404) {
-          setContent('# Welcome to BizerOS Knowledge\n\nStart typing — your changes auto-save.\n');
+          // Missing file: seed with today's heading for daily notes, otherwise empty.
+          const seed = path === todayDailyPath() ? todayHeading() : '';
+          loadedPathRef.current = path;
+          setContent(seed);
           setLoaded(true);
+          if (seed !== '') setSaveStatus('pending');
         } else {
           setLoadError(err instanceof Error ? err.message : String(err));
         }
@@ -37,7 +71,7 @@ export function App() {
     return () => {
       cancelled = true;
     };
-  }, []);
+  }, [path]);
 
   const handleChange = useCallback((next: string) => {
     setContent(next);
@@ -47,15 +81,18 @@ export function App() {
   useDebouncedEffect(
     () => {
       if (!loaded || saveStatus !== 'pending') return;
+      const targetPath = loadedPathRef.current;
+      if (!targetPath || targetPath !== path) return;
       let cancelled = false;
+      const wasNew = entries?.some((e) => e.path === targetPath) === false;
       (async () => {
         setSaveStatus('saving');
         try {
-          await putFile(HARDCODED_PATH, content);
-          if (!cancelled) {
-            setSaveStatus('saved');
-            setSaveError(null);
-          }
+          await putFile(targetPath, content);
+          if (cancelled) return;
+          setSaveStatus('saved');
+          setSaveError(null);
+          if (wasNew) reloadTree();
         } catch (err) {
           if (cancelled) return;
           setSaveStatus('error');
@@ -66,33 +103,106 @@ export function App() {
         cancelled = true;
       };
     },
-    [content, loaded, saveStatus],
+    [content, loaded, saveStatus, path],
     SAVE_DEBOUNCE_MS
   );
 
-  if (loadError) {
-    return (
-      <div className="app-error">
-        <h2>Failed to load {HARDCODED_PATH}</h2>
-        <pre>{loadError}</pre>
-      </div>
-    );
-  }
+  const handleNewNote = useCallback(async () => {
+    const input = window.prompt('New note path (relative to /brain):', DEFAULT_NEW_NOTE_PATH);
+    if (!input) return;
+    const target = input.trim().replace(/^\/+/, '');
+    if (!target) return;
+    const finalPath = target.endsWith('.md') ? target : `${target}.md`;
+    try {
+      const exists = await fileExists(finalPath);
+      if (!exists) await putFile(finalPath, '');
+      await reloadTree();
+      navigate(finalPath);
+    } catch (err) {
+      window.alert(`Failed to create: ${err instanceof Error ? err.message : String(err)}`);
+    }
+  }, [navigate, reloadTree]);
 
-  if (!loaded) {
-    return <div className="app-loading">Loading…</div>;
-  }
+  const handleTodayNote = useCallback(async () => {
+    const target = todayDailyPath();
+    try {
+      const exists = await fileExists(target);
+      if (!exists) {
+        await putFile(target, todayHeading());
+        await reloadTree();
+      }
+      navigate(target);
+    } catch (err) {
+      window.alert(`Failed to open today's note: ${err instanceof Error ? err.message : String(err)}`);
+    }
+  }, [navigate, reloadTree]);
+
+  const handleRename = useCallback(
+    async (oldPath: string) => {
+      const input = window.prompt(`Rename "${oldPath}" to:`, oldPath);
+      if (!input) return;
+      const target = input.trim().replace(/^\/+/, '');
+      if (!target || target === oldPath) return;
+      try {
+        await moveFile(oldPath, target);
+        await reloadTree();
+        if (path === oldPath) navigate(target);
+      } catch (err) {
+        window.alert(`Rename failed: ${err instanceof Error ? err.message : String(err)}`);
+      }
+    },
+    [navigate, path, reloadTree]
+  );
+
+  const handleDelete = useCallback(
+    async (target: string) => {
+      if (!window.confirm(`Delete "${target}"? This cannot be undone.`)) return;
+      try {
+        await deleteFile(target);
+        await reloadTree();
+        if (path === target) navigate('');
+      } catch (err) {
+        window.alert(`Delete failed: ${err instanceof Error ? err.message : String(err)}`);
+      }
+    },
+    [navigate, path, reloadTree]
+  );
+
+  const tree = entries === null ? null : buildTree(entries);
 
   return (
     <div className="app">
       <header className="app-header">
         <span className="app-title">BizerOS Knowledge</span>
-        <span className="app-path">/brain/{HARDCODED_PATH}</span>
+        <span className="app-path">/brain/{path || '(no file selected)'}</span>
         <SaveIndicator status={saveStatus} error={saveError} />
       </header>
-      <main className="app-main">
-        <Editor value={content} onChange={handleChange} />
-      </main>
+      <div className="app-body">
+        <Sidebar
+          tree={tree}
+          treeError={treeError}
+          currentPath={path}
+          onSelect={(p) => navigate(p)}
+          onNewNote={handleNewNote}
+          onTodayNote={handleTodayNote}
+          onRename={handleRename}
+          onDelete={handleDelete}
+        />
+        <main className="app-main">
+          {loadError ? (
+            <div className="app-error">
+              <h2>Failed to load {path}</h2>
+              <pre>{loadError}</pre>
+            </div>
+          ) : !path ? (
+            <div className="app-empty">Pick a note from the sidebar, or click "Today".</div>
+          ) : !loaded ? (
+            <div className="app-loading">Loading…</div>
+          ) : (
+            <Editor value={content} onChange={handleChange} />
+          )}
+        </main>
+      </div>
     </div>
   );
 }

packages/notes-app/src/components/FileTree.tsx

@@ -0,0 +1,108 @@
+import { useState } from 'react';
+import { TreeNode } from '../utils/tree';
+
+interface FileTreeProps {
+  nodes: TreeNode[];
+  currentPath: string;
+  onSelect: (path: string) => void;
+  onRename: (path: string) => void;
+  onDelete: (path: string) => void;
+}
+
+export function FileTree({ nodes, currentPath, onSelect, onRename, onDelete }: FileTreeProps) {
+  return (
+    <ul className="file-tree">
+      {nodes.map((node) => (
+        <FileTreeNode
+          key={node.path}
+          node={node}
+          depth={0}
+          currentPath={currentPath}
+          onSelect={onSelect}
+          onRename={onRename}
+          onDelete={onDelete}
+        />
+      ))}
+    </ul>
+  );
+}
+
+interface NodeProps {
+  node: TreeNode;
+  depth: number;
+  currentPath: string;
+  onSelect: (path: string) => void;
+  onRename: (path: string) => void;
+  onDelete: (path: string) => void;
+}
+
+function FileTreeNode({ node, depth, currentPath, onSelect, onRename, onDelete }: NodeProps) {
+  const [open, setOpen] = useState(true);
+  const isCurrent = !node.isDir && node.path === currentPath;
+  const indent = { paddingLeft: `${depth * 0.75 + 0.5}rem` };
+
+  if (node.isDir) {
+    return (
+      <li>
+        <button
+          className="file-tree-row file-tree-dir"
+          style={indent}
+          onClick={() => setOpen((o) => !o)}
+        >
+          <span className="file-tree-disclosure">{open ? '▾' : '▸'}</span>
+          <span className="file-tree-name">{node.name}/</span>
+        </button>
+        {open && node.children.length > 0 && (
+          <ul className="file-tree-children">
+            {node.children.map((child) => (
+              <FileTreeNode
+                key={child.path}
+                node={child}
+                depth={depth + 1}
+                currentPath={currentPath}
+                onSelect={onSelect}
+                onRename={onRename}
+                onDelete={onDelete}
+              />
+            ))}
+          </ul>
+        )}
+      </li>
+    );
+  }
+
+  return (
+    <li>
+      <div
+        className={'file-tree-row file-tree-file' + (isCurrent ? ' file-tree-current' : '')}
+        style={indent}
+      >
+        <button
+          className="file-tree-name file-tree-button"
+          onClick={() => onSelect(node.path)}
+          title={node.path}
+        >
+          {node.name}
+        </button>
+        <span className="file-tree-actions">
+          <button
+            className="file-tree-action"
+            onClick={() => onRename(node.path)}
+            title="Rename"
+            aria-label={`Rename ${node.path}`}
+          >
+            ✎
+          </button>
+          <button
+            className="file-tree-action"
+            onClick={() => onDelete(node.path)}
+            title="Delete"
+            aria-label={`Delete ${node.path}`}
+          >
+            ✕
+          </button>
+        </span>
+      </div>
+    </li>
+  );
+}

packages/notes-app/src/components/Sidebar.tsx

@@ -0,0 +1,54 @@
+import { FileTree } from './FileTree';
+import { TreeNode } from '../utils/tree';
+
+interface SidebarProps {
+  tree: TreeNode[] | null;
+  treeError: string | null;
+  currentPath: string;
+  onSelect: (path: string) => void;
+  onNewNote: () => void;
+  onTodayNote: () => void;
+  onRename: (path: string) => void;
+  onDelete: (path: string) => void;
+}
+
+export function Sidebar({
+  tree,
+  treeError,
+  currentPath,
+  onSelect,
+  onNewNote,
+  onTodayNote,
+  onRename,
+  onDelete
+}: SidebarProps) {
+  return (
+    <aside className="sidebar">
+      <div className="sidebar-toolbar">
+        <button onClick={onTodayNote} title="Open today's daily note">
+          Today
+        </button>
+        <button onClick={onNewNote} title="Create a new note">
+          + New
+        </button>
+      </div>
+      <div className="sidebar-tree">
+        {treeError ? (
+          <div className="sidebar-error">{treeError}</div>
+        ) : tree === null ? (
+          <div className="sidebar-empty">Loading…</div>
+        ) : tree.length === 0 ? (
+          <div className="sidebar-empty">Your brain is empty. Create a note to start.</div>
+        ) : (
+          <FileTree
+            nodes={tree}
+            currentPath={currentPath}
+            onSelect={onSelect}
+            onRename={onRename}
+            onDelete={onDelete}
+          />
+        )}
+      </div>
+    </aside>
+  );
+}