gloomberb 0.5.0 → 0.6.0

package/src/plugins/builtin/notes.tsx

@@ -1,36 +1,165 @@
+import { Box, Input, ScrollBox, Text, TextAttributes } from "../../ui";
 import { useRef, useEffect, useState, useCallback } from "react";
-import { useKeyboard } from "@opentui/react";
-import { TextAttributes } from "@opentui/core";
-import type { TextareaRenderable, InputRenderable } from "@opentui/core";
+import { useShortcut } from "../../react/input";
+import { type InputRenderable, type TextareaRenderable } from "../../ui";
 import type { GloomPlugin, DetailTabProps, PaneProps } from "../../types/plugin";
 import { usePaneTicker } from "../../state/app-context";
 import { colors } from "../../theme/colors";
 import { MarkdownEditor } from "../../components/markdown-editor";
+import { MarkdownText } from "../../components/markdown-text";
+import { DialogFrame, Tabs, usePaneFooter } from "../../components";
+import { type PromptContext, useDialog, useDialogKeyboard } from "../../ui/dialog";
 import { NotesFiles, type QuickNoteEntry } from "./notes-files";
 
+function useSyncedText(initialValue = "") {
+  const [text, setTextState] = useState(initialValue);
+  const textRef = useRef(initialValue);
+  const setText = useCallback((nextText: string) => {
+    textRef.current = nextText;
+    setTextState(nextText);
+  }, []);
+  return { text, textRef, setText };
+}
+
+function noteContentWidth(width: number): number {
+  return Math.max(1, Math.floor(width) - 2);
+}
+
+function formatLastEdited(updatedAt: number | undefined): string {
+  if (!updatedAt) return "not edited";
+  const elapsedSeconds = Math.max(0, Math.floor((Date.now() - updatedAt) / 1000));
+  if (!Number.isFinite(elapsedSeconds)) return "not edited";
+  if (elapsedSeconds < 60) return "now";
+
+  const elapsedMinutes = Math.floor(elapsedSeconds / 60);
+  if (elapsedMinutes < 60) return `${elapsedMinutes}m ago`;
+
+  const elapsedHours = Math.floor(elapsedMinutes / 60);
+  if (elapsedHours < 24) return `${elapsedHours}h ago`;
+
+  const elapsedDays = Math.floor(elapsedHours / 24);
+  if (elapsedDays === 1) return "yday";
+  if (elapsedDays < 7) return `${elapsedDays}d ago`;
+
+  const elapsedWeeks = Math.floor(elapsedDays / 7);
+  if (elapsedWeeks < 5) return `${elapsedWeeks}w ago`;
+
+  const elapsedMonths = Math.floor(elapsedDays / 30);
+  if (elapsedMonths < 12) return `${elapsedMonths}mo ago`;
+
+  return `${Math.floor(elapsedDays / 365)}y ago`;
+}
+
+function MarkdownNotePreview({
+  text,
+  width,
+  placeholder,
+  onActivate,
+}: {
+  text: string;
+  width: number;
+  placeholder: string;
+  onActivate: () => void;
+}) {
+  const lineWidth = noteContentWidth(width);
+  const hasText = text.trim().length > 0;
+
+  return (
+    <ScrollBox
+      flexGrow={1}
+      width="100%"
+      height="100%"
+      scrollY
+      focusable={false}
+      onMouseDown={onActivate}
+    >
+      <Box flexDirection="column" flexGrow={1} width={lineWidth}>
+        {hasText
+          ? <MarkdownText text={text} lineWidth={lineWidth} />
+          : <Text fg={colors.textDim}>{placeholder}</Text>}
+      </Box>
+    </ScrollBox>
+  );
+}
+
+function ConfirmDeleteNoteDialog({
+  resolve,
+  title,
+}: PromptContext<boolean> & {
+  title: string;
+}) {
+  const confirm = useCallback(() => resolve(true), [resolve]);
+  const cancel = useCallback(() => resolve(false), [resolve]);
+  const displayTitle = title.length > 28 ? `${title.slice(0, 25)}...` : title;
+
+  useDialogKeyboard((event) => {
+    event.stopPropagation();
+    if (event.name === "enter" || event.name === "return") {
+      confirm();
+      return;
+    }
+    if (event.name === "escape") {
+      cancel();
+    }
+  });
+
+  return (
+    <DialogFrame title="Delete note?" footer="Enter delete · Esc cancel">
+      <Box flexDirection="column" width={44}>
+        <Text fg={colors.text}>{`Delete "${displayTitle}"?`}</Text>
+        <Box height={1} />
+        <Text fg={colors.textDim}>This note has content.</Text>
+        <Text fg={colors.textDim}>Deleting it cannot be undone.</Text>
+        <Box height={1} />
+        <Box flexDirection="row" gap={1}>
+          <Box
+            backgroundColor={colors.negative}
+            onMouseDown={confirm}
+            data-gloom-interactive="true"
+          >
+            <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>{" Delete "}</Text>
+          </Box>
+          <Box
+            backgroundColor={colors.panel}
+            onMouseDown={cancel}
+            data-gloom-interactive="true"
+          >
+            <Text fg={colors.text}>{" Cancel "}</Text>
+          </Box>
+        </Box>
+      </Box>
+    </DialogFrame>
+  );
+}
+
 function createNotesTab(notesFiles: NotesFiles) {
-  return function NotesTab({ focused, onCapture }: DetailTabProps) {
+  return function NotesTab({ focused, width, onCapture }: DetailTabProps) {
     const { ticker } = usePaneTicker();
     const textareaRef = useRef<TextareaRenderable | null>(null);
     const [notesFocused, setNotesFocused] = useState(false);
-    const [loadedNotes, setLoadedNotes] = useState("");
+    const { text: noteText, textRef: noteTextRef, setText: setNoteText } = useSyncedText("");
+    const wasNotesFocusedRef = useRef(false);
 
     const setNotesFocusedAndCapture = useCallback((value: boolean) => {
       setNotesFocused(value);
       onCapture(value);
     }, [onCapture]);
 
+    const getCurrentNoteText = useCallback(() => (
+      textareaRef.current?.editBuffer.getText() ?? noteTextRef.current
+    ), [noteTextRef]);
+
     const saveNotesFor = useCallback((symbol: string | null, text: string) => {
       if (!symbol) return;
       notesFiles.save(symbol, text).catch(() => {});
     }, [notesFiles]);
 
     useEffect(() => {
-      const textarea = textareaRef.current;
-      if (!notesFocused && textarea && ticker?.metadata.ticker) {
-        saveNotesFor(ticker.metadata.ticker, textarea.editBuffer.getText());
+      if (wasNotesFocusedRef.current && !notesFocused && ticker?.metadata.ticker) {
+        saveNotesFor(ticker.metadata.ticker, getCurrentNoteText());
       }
-    }, [notesFocused, ticker, saveNotesFor]);
+      wasNotesFocusedRef.current = notesFocused;
+    }, [getCurrentNoteText, notesFocused, ticker, saveNotesFor]);
 
     const tickerSymbol = ticker?.metadata.ticker ?? null;
     const prevSymbolRef = useRef<string | null>(null);
@@ -42,22 +171,22 @@ function createNotesTab(notesFiles: NotesFiles) {
         prevSymbolRef.current = tickerSymbol;
 
         if (!tickerSymbol) {
-          setLoadedNotes("");
+          setNoteText("");
           textareaRef.current?.setText("");
           return;
         }
 
         notesFiles.load(tickerSymbol).then((nextNotes) => {
-          setLoadedNotes(nextNotes);
+          setNoteText(nextNotes);
           textareaRef.current?.setText(nextNotes);
         }).catch(() => {
-          setLoadedNotes("");
+          setNoteText("");
           textareaRef.current?.setText("");
         });
       }
-    }, [tickerSymbol, saveNotesFor, notesFiles]);
+    }, [tickerSymbol, saveNotesFor, notesFiles, setNoteText]);
 
-    useKeyboard((event) => {
+    useShortcut((event) => {
       if (!focused) return;
       const isEnter = event.name === "enter" || event.name === "return";
       if (isEnter && !notesFocused) {
@@ -70,28 +199,36 @@ function createNotesTab(notesFiles: NotesFiles) {
       }
     });
 
-    if (!ticker) return <text fg={colors.textDim}>Select a ticker to view notes.</text>;
+    usePaneFooter("ticker-notes", () => ({
+      info: [
+        { id: "mode", parts: [{ text: notesFocused ? "editing" : "viewing", tone: "muted" }] },
+      ],
+    }), [notesFocused]);
+
+    if (!ticker) return <Text fg={colors.textDim}>Select a ticker to view notes.</Text>;
 
     return (
-      <box flexDirection="column" padding={1} flexGrow={1}>
-        <box flexDirection="row" height={1}>
-          <text attributes={TextAttributes.BOLD} fg={colors.textBright}>Notes</text>
-          <box flexGrow={1} />
-          <text fg={colors.textMuted}>
-            {notesFocused ? "editing (Esc to stop)" : "Enter to edit"}
-          </text>
-        </box>
-        <box height={1} />
-        <box flexGrow={1} onMouseDown={() => { if (!notesFocused) setNotesFocusedAndCapture(true); }}>
-          <MarkdownEditor
-            textareaKey={tickerSymbol ?? "none"}
-            focused={notesFocused}
-            initialValue={loadedNotes}
-            placeholder="Write notes about this ticker..."
-            onRef={(ref) => { textareaRef.current = ref; }}
-          />
-        </box>
-      </box>
+      <Box flexDirection="column" flexGrow={1}>
+        <Box flexGrow={1} minHeight={0} paddingX={1} onMouseDown={() => { if (!notesFocused) setNotesFocusedAndCapture(true); }}>
+          {notesFocused ? (
+            <MarkdownEditor
+              textareaKey={tickerSymbol ?? "none"}
+              focused={notesFocused}
+              initialValue={noteText}
+              placeholder="Write notes about this ticker..."
+              onRef={(ref) => { textareaRef.current = ref; }}
+              onChange={setNoteText}
+            />
+          ) : (
+            <MarkdownNotePreview
+              text={noteText}
+              width={width}
+              placeholder="Write notes about this ticker..."
+              onActivate={() => setNotesFocusedAndCapture(true)}
+            />
+          )}
+        </Box>
+      </Box>
     );
   };
 }
@@ -102,16 +239,46 @@ function generateNoteId(): string {
 }
 
 function createQuickNotesPane(notesFiles: NotesFiles) {
-  return function QuickNotesPane({ focused }: PaneProps) {
+  return function QuickNotesPane({ focused, width }: PaneProps) {
+    const dialog = useDialog();
     const textareaRef = useRef<TextareaRenderable | null>(null);
     const [editing, setEditing] = useState(false);
     const [tabs, setTabs] = useState<QuickNoteEntry[]>([]);
     const [activeTabId, setActiveTabId] = useState<string | null>(null);
     const [renaming, setRenaming] = useState(false);
     const [renameValue, setRenameValue] = useState("");
+    const { text: noteText, textRef: noteTextRef, setText: setNoteText } = useSyncedText("");
     const renameInputRef = useRef<InputRenderable>(null);
     const prevTabRef = useRef<string | null>(null);
+    const lastSavedTextRef = useRef<Map<string, string>>(new Map());
     const loadedRef = useRef(false);
+    const activeTab = tabs.find((tab) => tab.id === activeTabId);
+
+    const saveQuickNotesIndex = useCallback((entries: QuickNoteEntry[]) => {
+      notesFiles.saveQuickNotesIndex(entries).catch(() => {});
+    }, [notesFiles]);
+
+    const readActiveNoteText = useCallback(() => (
+      textareaRef.current?.editBuffer.getText() ?? noteTextRef.current
+    ), [noteTextRef]);
+
+    const saveTab = useCallback((tabId: string | null) => {
+      if (!tabId) return;
+      if (!lastSavedTextRef.current.has(tabId)) return;
+      const text = tabId === activeTabId ? readActiveNoteText() : noteTextRef.current;
+      if (lastSavedTextRef.current.get(tabId) === text) return;
+
+      lastSavedTextRef.current.set(tabId, text);
+      notesFiles.save(notesFiles.quickNoteKey(tabId), text).catch(() => {});
+
+      const updatedAt = Date.now();
+      setTabs((prev) => {
+        if (!prev.some((tab) => tab.id === tabId)) return prev;
+        const next = prev.map((tab) => (tab.id === tabId ? { ...tab, updatedAt } : tab));
+        saveQuickNotesIndex(next);
+        return next;
+      });
+    }, [activeTabId, noteTextRef, notesFiles, readActiveNoteText, saveQuickNotesIndex]);
 
     // Load index on mount
     useEffect(() => {
@@ -121,88 +288,129 @@ function createQuickNotesPane(notesFiles: NotesFiles) {
         if (entries.length === 0) {
           const id = generateNoteId();
           const initial: QuickNoteEntry[] = [{ id, title: "New" }];
+          lastSavedTextRef.current.set(id, "");
           setTabs(initial);
           setActiveTabId(id);
-          notesFiles.saveQuickNotesIndex(initial).catch(() => {});
+          saveQuickNotesIndex(initial);
         } else {
           setTabs(entries);
           setActiveTabId(entries[0]!.id);
         }
       });
-    }, []);
-
-    // Save current tab content before switching away
-    const saveCurrentTab = useCallback(() => {
-      const tabId = prevTabRef.current;
-      if (tabId && textareaRef.current) {
-        const text = textareaRef.current.editBuffer.getText();
-        notesFiles.save(notesFiles.quickNoteKey(tabId), text).catch(() => {});
-      }
-    }, []);
+    }, [notesFiles, saveQuickNotesIndex]);
 
     // Load content when active tab changes
     useEffect(() => {
-      if (!activeTabId) return;
-      if (prevTabRef.current && prevTabRef.current !== activeTabId) {
-        saveCurrentTab();
+      if (!activeTabId) {
+        setNoteText("");
+        return;
       }
       prevTabRef.current = activeTabId;
+      let cancelled = false;
       notesFiles.load(notesFiles.quickNoteKey(activeTabId)).then((text) => {
+        if (cancelled) return;
+        lastSavedTextRef.current.set(activeTabId, text);
+        setNoteText(text);
         textareaRef.current?.setText(text);
       }).catch(() => {
+        if (cancelled) return;
+        lastSavedTextRef.current.set(activeTabId, "");
+        setNoteText("");
         textareaRef.current?.setText("");
       });
-    }, [activeTabId, saveCurrentTab]);
+      return () => {
+        cancelled = true;
+      };
+    }, [activeTabId, notesFiles, setNoteText]);
 
     // Save on editing stop
     useEffect(() => {
-      if (!editing) saveCurrentTab();
-    }, [editing, saveCurrentTab]);
+      if (!editing) saveTab(activeTabId);
+    }, [activeTabId, editing, saveTab]);
 
     const addTab = useCallback(() => {
-      saveCurrentTab();
+      saveTab(activeTabId);
       const id = generateNoteId();
       const entry: QuickNoteEntry = { id, title: "New" };
+      lastSavedTextRef.current.set(id, "");
       setTabs((prev) => {
         const next = [...prev, entry];
-        notesFiles.saveQuickNotesIndex(next).catch(() => {});
+        saveQuickNotesIndex(next);
         return next;
       });
       setActiveTabId(id);
+      setNoteText("");
       setEditing(false);
-    }, [saveCurrentTab]);
+      setRenaming(false);
+    }, [activeTabId, saveQuickNotesIndex, saveTab, setNoteText]);
 
     const removeTab = useCallback((id: string) => {
+      lastSavedTextRef.current.delete(id);
       setTabs((prev) => {
         const next = prev.filter((t) => t.id !== id);
         if (next.length === 0) {
           const newId = generateNoteId();
           const fresh: QuickNoteEntry[] = [{ id: newId, title: "New" }];
-          notesFiles.saveQuickNotesIndex(fresh).catch(() => {});
+          lastSavedTextRef.current.set(newId, "");
+          saveQuickNotesIndex(fresh);
           setActiveTabId(newId);
+          setNoteText("");
           prevTabRef.current = null;
           return fresh;
         }
-        notesFiles.saveQuickNotesIndex(next).catch(() => {});
+        saveQuickNotesIndex(next);
         if (activeTabId === id) {
           const idx = prev.findIndex((t) => t.id === id);
           const newActive = next[Math.min(idx, next.length - 1)]!;
           setActiveTabId(newActive.id);
+          setNoteText("");
           prevTabRef.current = null;
         }
         return next;
       });
       notesFiles.delete(notesFiles.quickNoteKey(id)).catch(() => {});
       setEditing(false);
-    }, [activeTabId]);
+      setRenaming(false);
+    }, [activeTabId, notesFiles, saveQuickNotesIndex, setNoteText]);
+
+    const requestRemoveTab = useCallback(async (id: string) => {
+      const tab = tabs.find((entry) => entry.id === id);
+      const text = id === activeTabId
+        ? readActiveNoteText()
+        : await notesFiles.load(notesFiles.quickNoteKey(id));
+
+      if (text.trim().length > 0) {
+        const confirmed = await dialog.prompt<boolean>({
+          closeOnClickOutside: true,
+          content: (ctx: PromptContext<boolean>) => (
+            <ConfirmDeleteNoteDialog
+              {...ctx}
+              title={tab?.title ?? "Note"}
+            />
+          ),
+        }).catch(() => false);
+        if (confirmed !== true) return;
+      }
+
+      removeTab(id);
+    }, [activeTabId, dialog, notesFiles, readActiveNoteText, removeTab, tabs]);
 
     const startRename = useCallback(() => {
-      const tab = tabs.find((t) => t.id === activeTabId);
+      if (!activeTab) return;
+      setRenameValue(activeTab.title);
+      setRenaming(true);
+      setEditing(false);
+    }, [activeTab]);
+
+    const startRenameTab = useCallback((id: string) => {
+      const tab = tabs.find((entry) => entry.id === id);
       if (!tab) return;
+      if (id !== activeTabId) saveTab(activeTabId);
+      setActiveTabId(id);
       setRenameValue(tab.title);
       setRenaming(true);
       setEditing(false);
-    }, [tabs, activeTabId]);
+    }, [activeTabId, saveTab, tabs]);
 
     const commitRename = useCallback(() => {
       const value = renameInputRef.current?.editBuffer.getText().trim() || renameValue.trim();
@@ -218,7 +426,7 @@ function createQuickNotesPane(notesFiles: NotesFiles) {
       setRenaming(false);
     }, [activeTabId, renameValue]);
 
-    useKeyboard((event) => {
+    useShortcut((event) => {
       if (!focused) return;
 
       if (renaming) {
@@ -243,12 +451,12 @@ function createQuickNotesPane(notesFiles: NotesFiles) {
         return;
       }
       if (!editing) {
-        if (event.name === "t") {
+        if (event.name === "n" || event.name === "t") {
           addTab();
           return;
         }
         if (event.name === "w" && tabs.length > 0) {
-          if (activeTabId) removeTab(activeTabId);
+          if (activeTabId) void requestRemoveTab(activeTabId);
           return;
         }
         if (event.name === "r") {
@@ -262,70 +470,53 @@ function createQuickNotesPane(notesFiles: NotesFiles) {
           const next = event.name === "]"
             ? (idx + 1) % tabs.length
             : (idx - 1 + tabs.length) % tabs.length;
-          saveCurrentTab();
+          saveTab(activeTabId);
           setActiveTabId(tabs[next]!.id);
           return;
         }
       }
     });
 
+    usePaneFooter("quick-notes", () => ({
+      info: [
+        { id: "edited", parts: [{ text: editing || renaming ? "editing" : formatLastEdited(activeTab?.updatedAt), tone: "muted" }] },
+      ],
+      hints: editing || renaming
+        ? []
+        : [
+            { id: "new", key: "n", label: "ew", onPress: addTab },
+            { id: "rename", key: "r", label: "ename", onPress: startRename, disabled: !activeTabId },
+          ],
+    }), [activeTab, activeTabId, addTab, editing, renaming, startRename]);
+
     return (
-      <box flexDirection="column" flexGrow={1}>
-        {/* Tab bar */}
-        <box flexDirection="row" height={1}>
-          {tabs.map((tab) => {
-            const isActive = tab.id === activeTabId;
-            return (
-              <box key={tab.id} flexDirection="row">
-                <text
-                  fg={isActive ? colors.textBright : colors.textDim}
-                  bg={isActive ? colors.selected : undefined}
-                  attributes={isActive ? TextAttributes.BOLD : 0}
-                  onMouseDown={() => {
-                    if (tab.id !== activeTabId) {
-                      saveCurrentTab();
-                      setActiveTabId(tab.id);
-                      setEditing(false);
-                    }
-                  }}
-                  onDoubleClick={() => {
-                    setActiveTabId(tab.id);
-                    startRename();
-                  }}
-                >
-                  {` ${tab.title} `}
-                </text>
-                {isActive && tabs.length > 1 ? (
-                  <text
-                    fg={colors.textMuted}
-                    onMouseDown={() => removeTab(tab.id)}
-                  >
-                    {`x `}
-                  </text>
-                ) : <text>{` `}</text>}
-              </box>
-            );
-          })}
-          <text
-            fg={colors.textMuted}
-            onMouseDown={addTab}
-          >
-            {` + `}
-          </text>
-          <box flexGrow={1} />
-          <text fg={colors.textMuted}>
-            {renaming
-              ? "type name, Enter to confirm"
-              : editing
-                ? "editing (Esc to stop)"
-                : "Enter edit | t new | w close | r rename"}
-          </text>
-        </box>
+      <Box flexDirection="column" flexGrow={1}>
+        <Box height={1}>
+          <Tabs
+            tabs={tabs.map((tab) => ({
+              label: tab.title,
+              value: tab.id,
+              onClose: tabs.length > 1 ? (id) => { void requestRemoveTab(id); } : undefined,
+              onDoubleClick: startRenameTab,
+            }))}
+            activeValue={activeTabId}
+            onSelect={(id) => {
+              if (id === activeTabId) return;
+              saveTab(activeTabId);
+              setActiveTabId(id);
+              setEditing(false);
+            }}
+            compact
+            variant="pill"
+            closeMode="active"
+            onAdd={addTab}
+          />
+        </Box>
         {/* Rename input */}
         {renaming && (
-          <box height={1} flexDirection="row" paddingLeft={1}>
-            <text fg={colors.textDim}>{"Rename: "}</text>
-            <input
+          <Box height={1} flexDirection="row" paddingLeft={1}>
+            <Text fg={colors.textDim}>{"Rename: "}</Text>
+            <Input
               ref={renameInputRef}
               initialValue={renameValue}
               focused={renaming}
@@ -334,18 +525,28 @@ function createQuickNotesPane(notesFiles: NotesFiles) {
               flexGrow={1}
               onChange={(val: string) => setRenameValue(val)}
             />
-          </box>
+          </Box>
         )}
-        {/* Editor */}
-        <box flexGrow={1} padding={1} onMouseDown={() => { if (!editing && !renaming) setEditing(true); }}>
-          <MarkdownEditor
-            textareaKey={activeTabId ?? "none"}
-            focused={editing && !renaming}
-            placeholder="Write notes..."
-            onRef={(ref) => { textareaRef.current = ref; }}
-          />
-        </box>
-      </box>
+        <Box flexGrow={1} minHeight={0} paddingX={1} onMouseDown={() => { if (!editing && !renaming) setEditing(true); }}>
+          {editing && !renaming ? (
+            <MarkdownEditor
+              textareaKey={activeTabId ?? "none"}
+              focused
+              initialValue={noteText}
+              placeholder="Write notes..."
+              onRef={(ref) => { textareaRef.current = ref; }}
+              onChange={setNoteText}
+            />
+          ) : (
+            <MarkdownNotePreview
+              text={noteText}
+              width={width}
+              placeholder="Write notes..."
+              onActivate={() => { if (!renaming) setEditing(true); }}
+            />
+          )}
+        </Box>
+      </Box>
     );
   };
 }
@@ -375,7 +576,7 @@ export const notesPlugin: GloomPlugin = {
 
     ctx.registerPane({
       id: "quick-notes",
-      name: "Quick Notes",
+      name: "Notes",
       icon: "N",
       component: QuickNotesPane,
       defaultPosition: "right",
@@ -386,7 +587,7 @@ export const notesPlugin: GloomPlugin = {
     ctx.registerPaneTemplate({
       id: "new-quick-notes-pane",
       paneId: "quick-notes",
-      label: "Quick Notes",
+      label: "Notes",
       description: "Open a general-purpose notes scratchpad",
       keywords: ["notes", "quick", "scratchpad", "memo"],
       shortcut: { prefix: "NOTE" },