cli-jaw 2.0.6 → 2.0.13

package/public/manager/src/notes/NotesBacklinksPanel.tsx

@@ -0,0 +1,91 @@
+import { useCallback, useState, type ReactNode } from 'react';
+import type { NoteLinkRef } from '../types';
+
+type NotesBacklinksPanelProps = {
+    backlinks: NoteLinkRef[];
+    onNavigate: (path: string) => void;
+};
+
+function backlinkTitle(path: string): string {
+    const name = path.split('/').pop() ?? path;
+    return name.endsWith('.md') ? name.slice(0, -3) : name;
+}
+
+function highlightWikilink(context: string): ReactNode[] {
+    const parts: ReactNode[] = [];
+    const regex = /\[\[([^\]]+)\]\]/g;
+    let lastIndex = 0;
+    let match: RegExpExecArray | null;
+    let key = 0;
+    while ((match = regex.exec(context)) !== null) {
+        if (match.index > lastIndex) {
+            parts.push(context.slice(lastIndex, match.index));
+        }
+        parts.push(
+            <mark key={key++} className="backlink-highlight">
+                {'[[' + match[1] + ']]'}
+            </mark>,
+        );
+        lastIndex = regex.lastIndex;
+    }
+    if (lastIndex < context.length) {
+        parts.push(context.slice(lastIndex));
+    }
+    return parts;
+}
+
+export function NotesBacklinksPanel(props: NotesBacklinksPanelProps) {
+    const [collapsed, setCollapsed] = useState(false);
+
+    const handleClick = useCallback((path: string) => {
+        props.onNavigate(path);
+    }, [props.onNavigate]);
+
+    const count = props.backlinks.length;
+
+    return (
+        <div className="notes-backlinks-panel">
+            <button
+                className="notes-backlinks-header"
+                onClick={() => setCollapsed(c => !c)}
+            >
+                <span className="notes-backlinks-chevron">
+                    {collapsed ? '▶' : '▼'}
+                </span>
+                <span>Backlinks</span>
+                <span className="notes-backlinks-count">{count}</span>
+            </button>
+            {!collapsed && (
+                <div className="notes-backlinks-list">
+                    {count === 0 && (
+                        <div className="notes-backlinks-empty">
+                            No backlinks found
+                        </div>
+                    )}
+                    {props.backlinks.map((entry, i) => {
+                        const context = entry.raw.length > 120
+                            ? entry.raw.slice(0, 120) + '...'
+                            : entry.raw;
+                        return (
+                            <button
+                                key={`${entry.sourcePath}:${entry.line}:${i}`}
+                                className="notes-backlink-entry"
+                                onClick={() => handleClick(entry.sourcePath)}
+                            >
+                                <span className="notes-backlink-title">
+                                    {backlinkTitle(entry.sourcePath)}
+                                </span>
+                                <span className="notes-backlink-line">
+                                    L{entry.line}
+                                </span>
+                                <span className="notes-backlink-context">
+                                    {highlightWikilink(context)}
+                                </span>
+                            </button>
+                        );
+                    })}
+                </div>
+            )}
+        </div>
+    );
+}

package/public/manager/src/notes/NotesCommandPalette.tsx

@@ -0,0 +1,212 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useNoteCommands, type NoteCommand } from './notes-command-registry';
+import { isCommandPaletteShortcut } from './notes-shortcuts';
+
+type NotesCommandPaletteProps = {
+    active: boolean;
+};
+
+type NoteCommandResult = {
+    command: NoteCommand;
+    score: number;
+};
+
+function normalize(value: string): string {
+    return value.trim().toLowerCase();
+}
+
+function fuzzyScore(value: string, query: string): number | null {
+    const haystack = normalize(value);
+    const needle = normalize(query);
+    if (!needle) return 1;
+    if (haystack.startsWith(needle)) return 1000 - haystack.length;
+    const contains = haystack.indexOf(needle);
+    if (contains >= 0) return 700 - contains;
+
+    let lastIndex = -1;
+    let consecutive = 0;
+    let score = 0;
+    for (const char of needle) {
+        const index = haystack.indexOf(char, lastIndex + 1);
+        if (index < 0) return null;
+        consecutive = index === lastIndex + 1 ? consecutive + 1 : 0;
+        score += 4 + consecutive * 3 - Math.min(index, 40) * 0.1;
+        lastIndex = index;
+    }
+    return score;
+}
+
+function scoreCommand(command: NoteCommand, query: string): NoteCommandResult | null {
+    const candidates = [
+        { value: command.label, boost: 120 },
+        { value: command.section, boost: 40 },
+        ...(command.keywords || []).map(keyword => ({ value: keyword, boost: 80 })),
+    ];
+
+    let best: NoteCommandResult | null = null;
+    for (const candidate of candidates) {
+        const fieldScore = fuzzyScore(candidate.value, query);
+        if (fieldScore == null) continue;
+        const score = fieldScore + candidate.boost;
+        if (!best || score > best.score) best = { command, score };
+    }
+    return best;
+}
+
+export function filterNoteCommands(commands: NoteCommand[], query: string): NoteCommandResult[] {
+    return commands
+        .map(command => scoreCommand(command, query.trim()))
+        .filter((result): result is NoteCommandResult => Boolean(result))
+        .sort((a, b) => {
+            if (b.score !== a.score) return b.score - a.score;
+            const section = a.command.section.localeCompare(b.command.section);
+            if (section !== 0) return section;
+            return a.command.label.localeCompare(b.command.label);
+        });
+}
+
+function nextIndex(current: number, delta: number, count: number): number {
+    if (count <= 0) return 0;
+    return Math.max(0, Math.min(count - 1, current + delta));
+}
+
+export function NotesCommandPalette(props: NotesCommandPaletteProps) {
+    const commands = useNoteCommands();
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState('');
+    const [activeIndex, setActiveIndex] = useState(0);
+    const inputRef = useRef<HTMLInputElement | null>(null);
+
+    const results = useMemo(() => filterNoteCommands(commands, query), [commands, query]);
+    const activeId = results[activeIndex] ? `notes-command-palette-option-${activeIndex}` : undefined;
+
+    useEffect(() => {
+        if (!props.active) {
+            setOpen(false);
+            return;
+        }
+        function handleShortcut(event: KeyboardEvent): void {
+            if (!isCommandPaletteShortcut(event)) return;
+            event.preventDefault();
+            setOpen(current => !current);
+        }
+        window.addEventListener('keydown', handleShortcut);
+        return () => window.removeEventListener('keydown', handleShortcut);
+    }, [props.active]);
+
+    useEffect(() => {
+        if (!open) return;
+        setQuery('');
+        setActiveIndex(0);
+        requestAnimationFrame(() => inputRef.current?.focus());
+    }, [open]);
+
+    useEffect(() => {
+        if (activeIndex >= results.length) setActiveIndex(Math.max(0, results.length - 1));
+    }, [activeIndex, results.length]);
+
+    useEffect(() => {
+        const active = activeId ? document.getElementById(activeId) : null;
+        active?.scrollIntoView({ block: 'nearest' });
+    }, [activeId]);
+
+    function executeCommand(command: NoteCommand): void {
+        if (command.disabled) return;
+        setOpen(false);
+        try {
+            void Promise.resolve(command.run()).catch(error => {
+                console.warn('[notes-command-palette]', error);
+            });
+        } catch (error) {
+            console.warn('[notes-command-palette]', error);
+        }
+    }
+
+    function runActive(): void {
+        const command = results[activeIndex]?.command;
+        if (command) executeCommand(command);
+    }
+
+    function handleInputKey(event: React.KeyboardEvent<HTMLInputElement>): void {
+        if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'p') {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            setActiveIndex(index => nextIndex(index, 1, results.length));
+        } else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            setActiveIndex(index => nextIndex(index, -1, results.length));
+        } else if (event.key === 'Enter') {
+            event.preventDefault();
+            runActive();
+        } else if (event.key === 'Escape') {
+            event.preventDefault();
+            setOpen(false);
+        }
+    }
+
+    if (!open) return null;
+
+    return (
+        <div className="notes-command-palette-backdrop" role="presentation" onClick={() => setOpen(false)} data-notes-palette>
+            <section
+                className="notes-command-palette"
+                role="dialog"
+                aria-modal="true"
+                aria-label="Notes command palette"
+                onClick={event => event.stopPropagation()}
+                onKeyDown={event => event.stopPropagation()}
+            >
+                <input
+                    ref={inputRef}
+                    className="notes-command-palette-input"
+                    type="search"
+                    placeholder="Run command"
+                    value={query}
+                    onChange={event => { setQuery(event.currentTarget.value); setActiveIndex(0); }}
+                    onKeyDown={handleInputKey}
+                    aria-label="Run Notes command"
+                    aria-controls="notes-command-palette-results"
+                    aria-activedescendant={activeId}
+                />
+                <div
+                    id="notes-command-palette-results"
+                    className="notes-command-palette-list"
+                    role="listbox"
+                    aria-label="Matching commands"
+                >
+                    {results.map((result, index) => {
+                        const command = result.command;
+                        const active = index === activeIndex;
+                        return (
+                            <button
+                                id={`notes-command-palette-option-${index}`}
+                                key={command.id}
+                                type="button"
+                                role="option"
+                                aria-selected={active}
+                                aria-disabled={command.disabled || undefined}
+                                className={`notes-command-palette-item${active ? ' is-active' : ''}${command.disabled ? ' is-disabled' : ''}`}
+                                onMouseEnter={() => setActiveIndex(index)}
+                                onClick={() => executeCommand(command)}
+                            >
+                                <span className="notes-command-palette-title">{command.label}</span>
+                                <span className="notes-command-palette-meta">{command.disabledReason || command.section}</span>
+                                {command.shortcut && <kbd className="notes-command-palette-shortcut">{command.shortcut}</kbd>}
+                            </button>
+                        );
+                    })}
+                    {results.length === 0 && <p className="notes-command-palette-empty">No matching commands.</p>}
+                </div>
+                <footer className="notes-command-palette-footer">
+                    <span><kbd>Up/Down</kbd> move</span>
+                    <span><kbd>Enter</kbd> run</span>
+                    <span><kbd>Esc</kbd> close</span>
+                </footer>
+            </section>
+        </div>
+    );
+}

package/public/manager/src/notes/NotesGraphView.tsx

@@ -0,0 +1,145 @@
+import { useEffect, useRef } from 'react';
+import * as d3 from 'd3';
+import type { NoteGraphNode, NoteGraphEdge } from '../types';
+
+type NotesGraphViewProps = {
+    graph: { nodes: NoteGraphNode[]; edges: NoteGraphEdge[] };
+    selectedPath: string | null;
+    onNavigate: (path: string) => void;
+};
+
+type SimNode = NoteGraphNode & d3.SimulationNodeDatum;
+type SimEdge = { source: SimNode; target: SimNode; raw: string };
+
+function connectionCount(nodeId: string, edges: NoteGraphEdge[]): number {
+    return edges.filter(e => e.source === nodeId || e.target === nodeId).length;
+}
+
+function nodeColor(node: NoteGraphNode, selectedPath: string | null): string {
+    if (node.id === selectedPath) return 'var(--accent-primary, #8ab4ff)';
+    if (node.kind === 'missing') return 'var(--status-error, #f87171)';
+    if (node.kind === 'ambiguous') return 'var(--status-warning, #fbbf24)';
+    return 'var(--text-tertiary, #888)';
+}
+
+export function NotesGraphView(props: NotesGraphViewProps) {
+    const svgRef = useRef<SVGSVGElement | null>(null);
+    const navigateRef = useRef(props.onNavigate);
+    navigateRef.current = props.onNavigate;
+
+    const { graph, selectedPath } = props;
+
+    useEffect(() => {
+        if (!svgRef.current || graph.nodes.length === 0) return;
+        const svg = d3.select(svgRef.current);
+        svg.selectAll('*').remove();
+
+        const width = svgRef.current.clientWidth || 800;
+        const height = svgRef.current.clientHeight || 600;
+
+        const nodes: SimNode[] = graph.nodes.map(n => ({ ...n }));
+        const nodeById = new Map(nodes.map(n => [n.id, n]));
+        const edges: SimEdge[] = graph.edges
+            .filter(e => nodeById.has(e.source) && nodeById.has(e.target))
+            .map(e => ({
+                source: nodeById.get(e.source)!,
+                target: nodeById.get(e.target)!,
+                raw: e.raw,
+            }));
+
+        const maxConn = d3.max(nodes, n => connectionCount(n.id, graph.edges)) ?? 1;
+        const radiusScale = d3.scaleSqrt().domain([0, maxConn]).range([4, 16]);
+
+        const g = svg.append('g');
+
+        const zoom = d3.zoom<SVGSVGElement, unknown>()
+            .scaleExtent([0.2, 5])
+            .on('zoom', (event) => { g.attr('transform', event.transform); });
+        svg.call(zoom);
+
+        const simulation = d3.forceSimulation(nodes)
+            .force('link', d3.forceLink<SimNode, SimEdge>(edges).id((d) => d.id).distance(80))
+            .force('charge', d3.forceManyBody().strength(-120))
+            .force('center', d3.forceCenter(width / 2, height / 2))
+            .force('collision', d3.forceCollide<SimNode>().radius((d) =>
+                radiusScale(connectionCount(d.id, graph.edges)) + 4,
+            ));
+
+        const link = g.append('g')
+            .selectAll('line')
+            .data(edges)
+            .join('line')
+            .attr('stroke', 'var(--border-secondary, #444)')
+            .attr('stroke-width', 1)
+            .attr('stroke-opacity', 0.5);
+
+        const node = g.append('g')
+            .selectAll<SVGGElement, SimNode>('g')
+            .data(nodes)
+            .join('g')
+            .attr('class', 'graph-node')
+            .attr('cursor', 'pointer')
+            .on('click', (_event: MouseEvent, d: SimNode) => {
+                if (d.kind === 'note') navigateRef.current(d.id);
+            });
+
+        node.append('circle')
+            .attr('r', d => radiusScale(connectionCount(d.id, graph.edges)))
+            .attr('fill', d => nodeColor(d, selectedPath))
+            .attr('stroke', d => d.id === selectedPath ? 'var(--accent-hover, #aac8ff)' : 'none')
+            .attr('stroke-width', 2);
+
+        node.append('text')
+            .text(d => d.title)
+            .attr('dx', d => radiusScale(connectionCount(d.id, graph.edges)) + 4)
+            .attr('dy', '0.35em')
+            .attr('fill', 'var(--text-secondary, #aaa)')
+            .attr('font-size', '11px')
+            .attr('pointer-events', 'none');
+
+        const drag = d3.drag<SVGGElement, SimNode>()
+            .on('start', (event, d) => {
+                if (!event.active) simulation.alphaTarget(0.3).restart();
+                d.fx = d.x;
+                d.fy = d.y;
+            })
+            .on('drag', (event, d) => {
+                d.fx = event.x;
+                d.fy = event.y;
+            })
+            .on('end', (event, d) => {
+                if (!event.active) simulation.alphaTarget(0);
+                d.fx = null;
+                d.fy = null;
+            });
+        node.call(drag);
+
+        simulation.on('tick', () => {
+            link
+                .attr('x1', (d) => (d.source as SimNode).x ?? 0)
+                .attr('y1', (d) => (d.source as SimNode).y ?? 0)
+                .attr('x2', (d) => (d.target as SimNode).x ?? 0)
+                .attr('y2', (d) => (d.target as SimNode).y ?? 0);
+            node.attr('transform', (d) => `translate(${d.x ?? 0},${d.y ?? 0})`);
+        });
+
+        return () => { simulation.stop(); };
+    }, [graph, selectedPath]);
+
+    if (graph.nodes.length === 0) {
+        return (
+            <div className="notes-graph-view notes-graph-empty">
+                No notes to display
+            </div>
+        );
+    }
+
+    return (
+        <div className="notes-graph-view">
+            <svg ref={svgRef} className="notes-graph-svg" width="100%" height="100%" />
+            <div className="notes-graph-info">
+                {graph.nodes.filter(n => n.kind === 'note').length} notes · {graph.edges.length} links
+            </div>
+        </div>
+    );
+}

package/public/manager/src/notes/NotesSidebar.tsx

@@ -1,12 +1,13 @@
-import { useEffect, useState, type CSSProperties } from 'react';
-import { createNoteFile, createNoteFolder, renameNotePath, trashNotePath } from './notes-api';
+import { useEffect, useMemo, useState, type CSSProperties } from 'react';
+import { createNoteFile, createNoteFolder, fetchNoteTemplate, fetchNoteTemplates, renameNotePath, trashNotePath } from './notes-api';
+import { applyTemplate } from './template-engine';
 import { NewFolderIcon, NewNoteIcon, NotesFileTree, RefreshIcon } from './NotesFileTree';
 import { NotesSearchSidebar } from './NotesSearchSidebar';
+import { useRegisterNoteCommands, type NoteCommand } from './notes-command-registry';
 import { publishInvalidation } from '../sync/invalidation-bus';
+import { DashboardApiError, type NoteTemplate } from '../api';
 import type { NotesTreeEntry } from './notes-types';
-
 export type NotesSidebarMode = 'files' | 'search';
-
 type NotesSidebarProps = {
     tree: NotesTreeEntry[];
     loading: boolean;
@@ -94,19 +95,108 @@ function SearchIcon() {
     );
 }
 
+function hasFile(entries: NotesTreeEntry[], name: string): boolean {
+    return entries.some(e => e.kind === 'file' && e.name === name);
+}
+
 export function NotesSidebar(props: NotesSidebarProps) {
     const style = { '--notes-tree-width': `${props.treeWidth}px` } as CSSProperties;
     const [error, setError] = useState<string | null>(null);
     const [status, setStatus] = useState<string | null>(null);
     const [selectedFolderPath, setSelectedFolderPath] = useState<string | null>(null);
+    const [templates, setTemplates] = useState<NoteTemplate[]>([]);
+    const [templatesLoaded, setTemplatesLoaded] = useState<'pending' | 'ok' | 'error'>('pending');
+    const [pendingNewNote, setPendingNewNote] = useState<string | null>(null);
+
+    useEffect(() => {
+        void fetchNoteTemplates()
+            .then(t => { setTemplates(t); setTemplatesLoaded('ok'); })
+            .catch(() => { setTemplatesLoaded('error'); });
+    }, []);
+
+    async function openToday(): Promise<void> {
+        const now = new Date();
+        const pad = (n: number) => String(n).padStart(2, '0');
+        const todayName = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}.md`;
+        if (hasFile(props.tree, todayName)) {
+            props.onSelectedPathChange(todayName);
+            setError(null);
+            return;
+        }
+        if (templatesLoaded === 'pending') {
+            setError('Templates are still loading. Please try again.');
+            return;
+        }
+        if (templatesLoaded === 'error') {
+            setError('Template list failed to load. Cannot determine daily template.');
+            return;
+        }
+        try {
+            setStatus(null);
+            setError(null);
+            const dailyTemplate = templates.find(t => t.name === 'daily');
+            let content = '';
+            if (dailyTemplate) {
+                try {
+                    const tmpl = await fetchNoteTemplate(dailyTemplate.name);
+                    content = applyTemplate(tmpl.content, { title: todayName.replace(/\.md$/, '') });
+                } catch {
+                    setError('Daily template failed to load. Note was not created.');
+                    return;
+                }
+            }
+            const created = await createNoteFile(todayName, content);
+            props.onSelectedPathChange(created.path);
+            await props.onRefreshTree(created.path);
+            publishInvalidation({ topics: ['notes'], reason: 'note:created', source: 'ui', sourceId: 'notes-sidebar' });
+        } catch (err) {
+            if (err instanceof DashboardApiError && err.status === 409 && err.code === 'note_path_exists') {
+                setError(null);
+                props.onSelectedPathChange(todayName);
+                await props.onRefreshTree(todayName);
+                return;
+            }
+            setError((err as Error).message);
+        }
+    }
 
     async function createNote(): Promise<void> {
+        if (templatesLoaded === 'pending') {
+            setError('Templates are still loading. Please try again.');
+            return;
+        }
+        if (templatesLoaded === 'error') {
+            setError('Template list failed to load. Cannot offer template picker.');
+            return;
+        }
         const fallback = selectedFolderPath ? `${selectedFolderPath}/untitled.md` : 'untitled.md';
         const name = window.prompt('Note path', fallback);
         if (!name) return;
+        const notePath = name.endsWith('.md') ? name : `${name}.md`;
+        if (templates.length > 0) {
+            setPendingNewNote(notePath);
+            return;
+        }
+        await finishCreateNote(notePath, null);
+    }
+
+    async function finishCreateNote(notePath: string, templateName: string | null): Promise<void> {
+        setPendingNewNote(null);
+        let content = '';
+        if (templateName) {
+            try {
+                const tmpl = await fetchNoteTemplate(templateName);
+                const title = (notePath.endsWith('.md') ? notePath.slice(0, -3) : notePath).split('/').pop() ?? '';
+                content = applyTemplate(tmpl.content, { title });
+            } catch {
+                setError(`Template "${templateName}" failed to load. Note was not created.`);
+                return;
+            }
+        }
         try {
             setStatus(null);
-            const created = await createNoteFile(name.endsWith('.md') ? name : `${name}.md`, '');
+            setError(null);
+            const created = await createNoteFile(notePath, content);
             props.onSelectedPathChange(created.path);
             await props.onRefreshTree(created.path);
             publishInvalidation({ topics: ['notes'], reason: 'note:created', source: 'ui', sourceId: 'notes-sidebar' });
@@ -251,6 +341,77 @@ export function NotesSidebar(props: NotesSidebarProps) {
         }
     }
 
+    const templateDisabledReason = templatesLoaded === 'pending'
+        ? 'Templates are still loading'
+        : templatesLoaded === 'error'
+            ? 'Templates failed to load'
+            : undefined;
+    const sidebarCommands = useMemo<NoteCommand[]>(() => [
+        {
+            id: 'sidebar:new-note',
+            section: 'Create',
+            label: 'New note',
+            shortcut: 'Alt+N',
+            keywords: ['create', 'file'],
+            disabled: templatesLoaded !== 'ok',
+            disabledReason: templateDisabledReason,
+            run: () => void createNote(),
+        },
+        {
+            id: 'sidebar:new-folder',
+            section: 'Create',
+            label: 'New folder',
+            keywords: ['directory'],
+            run: () => void createFolder(),
+        },
+        {
+            id: 'sidebar:today',
+            section: 'Create',
+            label: 'Open today',
+            keywords: ['daily', 'journal'],
+            disabled: templatesLoaded !== 'ok',
+            disabledReason: templateDisabledReason,
+            run: () => void openToday(),
+        },
+        {
+            id: 'sidebar:search',
+            section: 'Navigate',
+            label: 'Search notes',
+            shortcut: 'Cmd+Shift+F',
+            run: props.onOpenSearch,
+        },
+        {
+            id: 'sidebar:refresh',
+            section: 'File',
+            label: 'Refresh notes',
+            disabled: props.loading,
+            disabledReason: 'Refresh already running',
+            run: () => void props.onRefreshTree(),
+        },
+        {
+            id: 'sidebar:clear-tag-filter',
+            section: 'Navigate',
+            label: 'Clear tag filter',
+            disabled: !props.tagFilter,
+            disabledReason: 'No active tag filter',
+            run: props.onClearTagFilter,
+        },
+    ], [
+        props.loading,
+        props.onClearTagFilter,
+        props.onOpenSearch,
+        props.onRefreshTree,
+        props.onSelectedPathChange,
+        props.selectedPath,
+        props.tagFilter,
+        props.tree,
+        selectedFolderPath,
+        templateDisabledReason,
+        templates,
+        templatesLoaded,
+    ]);
+    useRegisterNoteCommands(sidebarCommands);
+
     return (
         <aside className="notes-tree" style={style}>
             {(props.error || error) && <section className="state error-state">{props.error || error}</section>}
@@ -295,6 +456,23 @@ export function NotesSidebar(props: NotesSidebarProps) {
                             </button>
                         </div>
                     )}
+                    {pendingNewNote && (
+                        <div className="notes-template-picker">
+                            <div className="notes-template-picker-label">Template for {pathName(pendingNewNote)}</div>
+                            <div className="notes-template-picker-options">
+                                <button type="button" className="notes-template-picker-option" onClick={() => void finishCreateNote(pendingNewNote, null)}>Blank</button>
+                                {templates.map(t => (
+                                    <button key={t.name} type="button" className="notes-template-picker-option" onClick={() => void finishCreateNote(pendingNewNote, t.name)}>{t.name}</button>
+                                ))}
+                            </div>
+                            <button type="button" className="notes-template-picker-cancel" onClick={() => setPendingNewNote(null)}>Cancel</button>
+                        </div>
+                    )}
+                    <div className="notes-today-bar">
+                        <button type="button" className="notes-today-button" onClick={() => void openToday()}>
+                            Today
+                        </button>
+                    </div>
                     <NotesFileTree
                         entries={props.tree}
                         selectedPath={props.selectedPath}