@gmickel/gno 0.26.0 → 0.27.0

package/src/serve/public/components/ui/command.tsx

@@ -65,13 +65,13 @@ function CommandInput({
 }: React.ComponentProps<typeof CommandPrimitive.Input>) {
   return (
     <div
-      className="flex h-9 items-center gap-2 border-b px-3"
+      className="flex h-11 items-center gap-2 rounded-t-md border-border/60 border-b bg-muted/10 px-3 focus-within:bg-background/80"
       data-slot="command-input-wrapper"
     >
       <SearchIcon className="size-4 shrink-0 opacity-50" />
       <CommandPrimitive.Input
         className={cn(
-          "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md border-none bg-transparent py-3 text-sm outline-none ring-0 placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         data-slot="command-input"

package/src/serve/public/hooks/use-doc-events.ts

@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+
+export interface DocumentEvent {
+  type: "document-changed";
+  uri: string;
+  collection: string;
+  relPath: string;
+  origin: "watcher" | "save" | "create";
+  changedAt: string;
+}
+
+export function useDocEvents(): DocumentEvent | null {
+  const [event, setEvent] = useState<DocumentEvent | null>(null);
+
+  useEffect(() => {
+    const source = new EventSource("/api/events");
+    const handleEvent = (incoming: Event) => {
+      const message = incoming as MessageEvent<string>;
+      try {
+        setEvent(JSON.parse(message.data) as DocumentEvent);
+      } catch {
+        // Ignore malformed event payloads.
+      }
+    };
+
+    source.addEventListener("document-changed", handleEvent);
+    return () => {
+      source.removeEventListener("document-changed", handleEvent);
+      source.close();
+    };
+  }, []);
+
+  return event;
+}

package/src/serve/public/hooks/useCaptureModal.tsx

@@ -21,7 +21,7 @@ import { useKeyboardShortcuts } from "./useKeyboardShortcuts";
 
 interface CaptureModalContextValue {
   /** Open the capture modal */
-  openCapture: () => void;
+  openCapture: (draftTitle?: string) => void;
   /** Whether the modal is open */
   isOpen: boolean;
 }
@@ -41,8 +41,12 @@ export function CaptureModalProvider({
   onSuccess,
 }: CaptureModalProviderProps) {
   const [open, setOpen] = useState(false);
+  const [draftTitle, setDraftTitle] = useState("");
 
-  const openCapture = useCallback(() => setOpen(true), []);
+  const openCapture = useCallback((nextDraftTitle?: string) => {
+    setDraftTitle(nextDraftTitle ?? "");
+    setOpen(true);
+  }, []);
 
   // 'n' global shortcut (single-key, skips when in text input)
   const shortcuts = useMemo(
@@ -68,7 +72,12 @@ export function CaptureModalProvider({
   return (
     <CaptureModalContext.Provider value={value}>
       {children}
-      <CaptureModal onOpenChange={setOpen} onSuccess={onSuccess} open={open} />
+      <CaptureModal
+        draftTitle={draftTitle}
+        onOpenChange={setOpen}
+        onSuccess={onSuccess}
+        open={open}
+      />
     </CaptureModalContext.Provider>
   );
 }

package/src/serve/public/hooks/useKeyboardShortcuts.ts

@@ -72,8 +72,8 @@ export function useKeyboardShortcuts(shortcuts: Shortcut[]): void {
 
         // Modifier handling
         if (shortcut.meta) {
-          // Require Ctrl for meta shortcuts
-          if (!e.ctrlKey) continue;
+          // Allow Ctrl or Cmd for cross-platform meta shortcuts
+          if (!e.ctrlKey && !e.metaKey) continue;
         } else {
           // Single-key shortcuts: don't fire when any modifier held
           // Prevents hijacking Cmd+N on macOS, Ctrl+K on Windows, etc.

package/src/serve/public/lib/deep-links.ts

@@ -0,0 +1,68 @@
+export interface DocumentDeepLinkTarget {
+  uri: string;
+  view?: "rendered" | "source";
+  lineStart?: number;
+  lineEnd?: number;
+}
+
+function parsePositiveInteger(value: string | null): number | undefined {
+  if (!value) return;
+  const parsed = Number.parseInt(value, 10);
+  if (!Number.isFinite(parsed) || parsed <= 0) {
+    return;
+  }
+  return parsed;
+}
+
+export function buildDocDeepLink(target: DocumentDeepLinkTarget): string {
+  const params = new URLSearchParams({ uri: target.uri });
+
+  if (target.view) {
+    params.set("view", target.view);
+  }
+  if (target.lineStart) {
+    params.set("lineStart", String(target.lineStart));
+  }
+  if (
+    target.lineStart !== undefined &&
+    target.lineEnd !== undefined &&
+    target.lineEnd >= target.lineStart
+  ) {
+    params.set("lineEnd", String(target.lineEnd));
+  }
+
+  return `/doc?${params.toString()}`;
+}
+
+export function buildEditDeepLink(target: DocumentDeepLinkTarget): string {
+  const params = new URLSearchParams({ uri: target.uri });
+
+  if (target.lineStart) {
+    params.set("lineStart", String(target.lineStart));
+  }
+  if (
+    target.lineStart !== undefined &&
+    target.lineEnd !== undefined &&
+    target.lineEnd >= target.lineStart
+  ) {
+    params.set("lineEnd", String(target.lineEnd));
+  }
+
+  return `/edit?${params.toString()}`;
+}
+
+export function parseDocumentDeepLink(search: string): DocumentDeepLinkTarget {
+  const params = new URLSearchParams(search);
+  const uri = params.get("uri") ?? "";
+  const viewParam = params.get("view");
+  const view = viewParam === "source" ? "source" : "rendered";
+  const lineStart = parsePositiveInteger(params.get("lineStart"));
+  const lineEnd = parsePositiveInteger(params.get("lineEnd"));
+
+  return {
+    uri,
+    view,
+    lineStart,
+    lineEnd,
+  };
+}

package/src/serve/public/lib/document-availability.ts

@@ -0,0 +1,22 @@
+import { apiFetch } from "../hooks/use-api";
+
+interface DocAvailabilityResponse {
+  uri: string;
+}
+
+export async function waitForDocumentAvailability(
+  uri: string,
+  attempts = 20,
+  delayMs = 250
+): Promise<boolean> {
+  for (let i = 0; i < attempts; i += 1) {
+    const { data } = await apiFetch<DocAvailabilityResponse>(
+      `/api/doc?uri=${encodeURIComponent(uri)}`
+    );
+    if (data?.uri === uri) {
+      return true;
+    }
+    await new Promise((resolve) => setTimeout(resolve, delayMs));
+  }
+  return false;
+}

package/src/serve/public/lib/local-history.ts

@@ -0,0 +1,44 @@
+export interface LocalHistoryEntry {
+  savedAt: string;
+  content: string;
+}
+
+const HISTORY_PREFIX = "gno.doc-history.";
+const MAX_ENTRIES = 10;
+
+function getHistoryKey(docId: string): string {
+  return `${HISTORY_PREFIX}${docId}`;
+}
+
+export function loadLocalHistory(docId: string): LocalHistoryEntry[] {
+  try {
+    const raw = localStorage.getItem(getHistoryKey(docId));
+    if (!raw) return [];
+    const parsed = JSON.parse(raw) as unknown;
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter((entry): entry is LocalHistoryEntry => {
+      if (!entry || typeof entry !== "object") return false;
+      const candidate = entry as Record<string, unknown>;
+      return (
+        typeof candidate.savedAt === "string" &&
+        typeof candidate.content === "string"
+      );
+    });
+  } catch {
+    return [];
+  }
+}
+
+export function appendLocalHistory(docId: string, content: string): void {
+  const next = [
+    { savedAt: new Date().toISOString(), content },
+    ...loadLocalHistory(docId).filter((entry) => entry.content !== content),
+  ].slice(0, MAX_ENTRIES);
+  localStorage.setItem(getHistoryKey(docId), JSON.stringify(next));
+}
+
+export function loadLatestLocalHistory(
+  docId: string
+): LocalHistoryEntry | undefined {
+  return loadLocalHistory(docId)[0];
+}

package/src/serve/public/lib/wiki-link.ts

@@ -0,0 +1,36 @@
+export interface WikiLinkQuery {
+  query: string;
+  start: number;
+  end: number;
+}
+
+export function getActiveWikiLinkQuery(
+  content: string,
+  cursorPos: number
+): WikiLinkQuery | null {
+  if (cursorPos < 2) {
+    return null;
+  }
+
+  const prefix = content.slice(0, cursorPos);
+  const start = prefix.lastIndexOf("[[");
+  if (start === -1) {
+    return null;
+  }
+
+  const closing = prefix.indexOf("]]", start);
+  if (closing !== -1) {
+    return null;
+  }
+
+  const query = prefix.slice(start + 2);
+  if (query.includes("\n")) {
+    return null;
+  }
+
+  return {
+    query,
+    start,
+    end: cursorPos,
+  };
+}

package/src/serve/public/pages/Browse.tsx

@@ -27,6 +27,7 @@ import {
   TableRow,
 } from "../components/ui/table";
 import { apiFetch } from "../hooks/use-api";
+import { useDocEvents } from "../hooks/use-doc-events";
 
 interface PageProps {
   navigate: (to: string | number) => void;
@@ -77,6 +78,7 @@ export default function Browse({ navigate }: PageProps) {
   const [syncTarget, setSyncTarget] = useState<SyncTarget>(null);
   const [syncError, setSyncError] = useState<string | null>(null);
   const [refreshToken, setRefreshToken] = useState(0);
+  const latestDocEvent = useDocEvents();
   const limit = 25;
 
   // Parse collection from URL on mount
@@ -134,6 +136,15 @@ export default function Browse({ navigate }: PageProps) {
     setDocs([]);
   }, [availableDateFields, sortField]);
 
+  useEffect(() => {
+    if (!latestDocEvent?.changedAt) {
+      return;
+    }
+    setOffset(0);
+    setDocs([]);
+    setRefreshToken((current) => current + 1);
+  }, [latestDocEvent?.changedAt]);
+
   const handleCollectionChange = (value: string) => {
     const newSelected = value === "all" ? "" : value;
     setSelected(newSelected);

package/src/serve/public/pages/Dashboard.tsx

@@ -271,7 +271,7 @@ export default function Dashboard({ navigate }: PageProps) {
             {/* Quick Capture Card */}
             <Card
               className="group stagger-3 animate-fade-in cursor-pointer opacity-0 transition-all duration-200 hover:-translate-y-0.5 hover:border-secondary/50 hover:bg-secondary/5 hover:shadow-lg"
-              onClick={openCapture}
+              onClick={() => openCapture()}
             >
               <CardHeader className="pb-2">
                 <CardDescription className="flex items-center gap-2">
@@ -350,7 +350,7 @@ export default function Dashboard({ navigate }: PageProps) {
       </main>
 
       {/* Floating Action Button */}
-      <CaptureButton onClick={openCapture} />
+      <CaptureButton onClick={() => openCapture()} />
     </div>
   );
 }