Title for docs. Backlinks in docs. cmdk update.

Author: heymynameisrob

src/components/backlinks.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+import { useBacklinkedDocs } from "@/queries/backlinks";
+import { Doc } from "@/lib/types";
+import { useOpenDocsStore } from "@/stores/docs";
+
+export function Backlinks({ id }: { id: string }) {
+  const { docs } = useBacklinkedDocs(id);
+  const { openDoc } = useOpenDocsStore();
+
+  if (!docs || docs.length === 0) return null;
+
+  return (
+    <div className="flex flex-col gap-4 mt-auto">
+      <small className="font-medium text-secondary !text-xs">Backlinks</small>
+      <ul className="flex items-center gap-2">
+        {docs.map((doc: Doc) => (
+          <li key={doc.id}>
+            <button
+              onMouseDown={() => openDoc(doc.id)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  return openDoc(doc.id);
+                }
+              }}
+              className="flex items-center gap-1.5 px-2 py-1 h-7 rounded-lg bg-gray-3 text-xs hover:bg-gray-4 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+            >
+              <span>{doc.emoji}</span>
+              <span className="font-medium">{doc.title}</span>
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

src/components/client-island.tsx

@@ -5,6 +5,7 @@ type IslandProps = {
   fallback?: React.ReactNode;
   lazy?: boolean;
   delay?: number; // Optional delay before showing
+  suspense?: boolean; // use suspense
   onMount?: () => void; // Callback when mounted
 };
 
@@ -26,6 +27,7 @@ export function Island({
   delay = 0,
   onMount,
   fallback,
+  suspense,
 }: IslandProps) {
   const [mounted, setMounted] = useState(false);
   const [shouldRender, setShouldRender] = useState(!delay);
@@ -48,6 +50,10 @@ export function Island({
   // Don't render yet if there's a delay
   if (!shouldRender) return fallback || null;
 
+  if (suspense) {
+    return <Suspense fallback={fallback}>{children}</Suspense>;
+  }
+
   if (lazy) {
     return (
       <Suspense fallback={fallback}>

src/components/command-menu.tsx

@@ -0,0 +1,28 @@
+import { useCommandContext } from "@/components/command-menu";
+import { CommandGroup, CommandItem } from "@/primitives/command";
+import { useDocs } from "@/queries/docs";
+import { useOpenDocsStore } from "@/stores/docs";
+
+export function CommandDocs() {
+  const { setOpen } = useCommandContext();
+  const { docs } = useDocs();
+  const { openDoc } = useOpenDocsStore();
+
+  return (
+    <CommandGroup heading="Documents">
+      {docs?.map((doc) => (
+        <CommandItem
+          key={doc.id}
+          keywords={[doc.id, doc.title!]}
+          onSelect={() => {
+            openDoc(doc.id);
+            setOpen(false);
+          }}
+        >
+          <p>{doc.emoji}</p>
+          <small className="font-medium">{doc.title}</small>
+        </CommandItem>
+      ))}
+    </CommandGroup>
+  );
+}

src/components/command-menu/command-docs.tsx

@@ -0,0 +1,88 @@
+import { useTheme } from "next-themes";
+import {
+  ArchiveBoxXMarkIcon,
+  ArrowRightEndOnRectangleIcon,
+  BookOpenIcon,
+  ComputerDesktopIcon,
+  DocumentPlusIcon,
+  MagnifyingGlassIcon,
+} from "@heroicons/react/16/solid";
+
+import { CommandGroup, CommandItem } from "@/primitives/command";
+import { useDocs } from "@/queries/docs";
+import { useOpenDocsStore, useReadOnlyStore } from "@/stores/docs";
+import { useCommandContext } from "@/components/command-menu";
+
+export function CommandHome() {
+  const { setOpen, setCurrentPage } = useCommandContext();
+  const { newDoc } = useDocs();
+  const { docs: openDocs, closeDoc, closeAllDocs } = useOpenDocsStore();
+  const { setReadOnlyMode, readOnlyMode } = useReadOnlyStore();
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <>
+      <CommandGroup>
+        <CommandItem
+          onSelect={() => {
+            newDoc();
+            setOpen(false);
+          }}
+        >
+          <DocumentPlusIcon className="w-4 h-4 opacity-70" />
+          <small className="font-medium">New document</small>
+        </CommandItem>
+        <CommandItem
+          onSelect={() => {
+            setCurrentPage("docs");
+          }}
+        >
+          <MagnifyingGlassIcon className="w-4 h-4 opacity-70" />
+          <small className="font-medium">Goto document...</small>
+        </CommandItem>
+        {openDocs.length > 0 && (
+          <>
+            <CommandItem
+              onSelect={() => {
+                closeDoc(openDocs.pop() as string);
+                setOpen(false);
+              }}
+            >
+              <ArrowRightEndOnRectangleIcon className="w-4 h-4 opacity-70" />
+              <small className="font-medium">Close last document</small>
+            </CommandItem>
+            <CommandItem
+              onSelect={() => {
+                closeAllDocs();
+                setOpen(false);
+              }}
+            >
+              <ArchiveBoxXMarkIcon className="w-4 h-4 opacity-70" />
+              <small className="font-medium">Close all documents</small>
+            </CommandItem>
+          </>
+        )}
+      </CommandGroup>
+      <CommandGroup heading="Settings">
+        <CommandItem
+          onSelect={() => {
+            setReadOnlyMode(!readOnlyMode);
+            setOpen(false);
+          }}
+        >
+          <BookOpenIcon className="w-4 h-4 opacity-70" />
+          <small className="font-medium">Toggle read-only mode</small>
+        </CommandItem>
+        <CommandItem
+          onSelect={() => {
+            setTheme(theme === "dark" ? "light" : "dark");
+            setOpen(false);
+          }}
+        >
+          <ComputerDesktopIcon className="w-4 h-4 opacity-70" />
+          <small className="font-medium">Toggle theme</small>
+        </CommandItem>
+      </CommandGroup>
+    </>
+  );
+}