app/write/new/page.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useState, Suspense } from "react";
 import { useSearchParams } from "next/navigation";
 import { invoke } from "@tauri-apps/api/core";
 import TextEditor from "@/components/text-editor";
-import { HomelabApp } from "@/types"; // Adjust path if needed
+import { HomelabApp } from "@/types";
 
-export default function WritePage() {
+function WritePageContent() {
   const searchParams = useSearchParams();
   const appQuery = searchParams.get("app");
 
@@ -21,12 +21,13 @@ export default function WritePage() {
       }
 
       try {
-        // Fetch apps to find the one matching the query parameter string
         const apps = (await invoke("get_app")) as HomelabApp[];
+
+        // Match checking both UUID structure and sanitized string names
         const matchedApp = apps.find(
           (app) =>
             app.id === appQuery ||
-            app.name.toLowerCase() === appQuery.toLowerCase(),
+            app.name.toLowerCase().trim() === appQuery.toLowerCase().trim(),
         );
 
         if (matchedApp) {
@@ -56,13 +57,28 @@ export default function WritePage() {
     );
   }
 
+  return (
+    <TextEditor
+      content=""
+      onSave={onSave}
+      initialLinkedAppIds={initialAppIds}
+    />
+  );
+}
+
+// 2. Main Page export wrapped in a Suspense boundary
+export default function WritePage() {
   return (
     <div className="flex flex-col p-2">
-      <TextEditor
-        content=""
-        onSave={onSave}
-        initialLinkedAppIds={initialAppIds}
-      />
+      <Suspense
+        fallback={
+          <div className="p-4 text-sm text-zinc-400">
+            Loading router state...
+          </div>
+        }
+      >
+        <WritePageContent />
+      </Suspense>
     </div>
   );
 }

components/action-menu.tsx

@@ -11,6 +11,7 @@ import {
 } from "@/components/ui/tooltip";
 import DeleteDialog from "./delete-dialog";
 import { useState } from "react";
+import { useRouter } from "next/navigation";
 
 type Props = {
   id: string;
@@ -22,6 +23,8 @@ export default function ActionMenu({ id }: Props) {
 
   const [open, setOpen] = useState(false);
 
+  const router = useRouter();
+
   return (
     <>
       <TooltipProvider delayDuration={150}>
@@ -69,7 +72,9 @@ export default function ActionMenu({ id }: Props) {
                 <button
                   className={buttonClass}
                   onClick={() => {
-                    // Blog
+                    let link = `/write/new?app=${id}`;
+                    console.log(link);
+                    router.push(link);
                   }}
                 >
                   <Pencil className="h-5 w-5" />

components/app-card.tsx

@@ -90,11 +90,7 @@ export default function AppCard({ app }: Props) {
       </div>
 
       <h3 className="text-2xl font-bold">{app.name}</h3>
-      <a
-        className={`${hovered && "text-blue-600"} transition-colors duration-200`}
-        target="_blank"
-        href={`http://${app.address}`}
-      >
+      <a target="_blank" href={`http://${app.address}`}>
         {app.address}
       </a>
 

components/text-editor/index.tsx

@@ -20,10 +20,21 @@ const getApps = async (): Promise<HomelabApp[]> => {
   return (await invoke("get_app")) as HomelabApp[];
 };
 
-export default function TextEditor({ content, onSave }: TextEditorProps) {
+export default function TextEditor({
+  content,
+  onSave,
+  initialLinkedAppIds = [],
+}: TextEditorProps) {
   const [availableApps, setAvailableApps] = useState<HomelabApp[]>([]);
-  // Track document-wide linked apps here
-  const [linkedAppIds, setLinkedAppIds] = useState<string[]>([]);
+  const [linkedAppIds, setLinkedAppIds] =
+    useState<string[]>(initialLinkedAppIds);
+
+  // 🔄 FIX: Watch for updates to initialLinkedAppIds once fetched from the URL
+  useEffect(() => {
+    if (initialLinkedAppIds.length > 0) {
+      setLinkedAppIds(initialLinkedAppIds);
+    }
+  }, [initialLinkedAppIds]);
 
   useEffect(() => {
     const fetchApps = async () => {
@@ -33,6 +44,8 @@ export default function TextEditor({ content, onSave }: TextEditorProps) {
     fetchApps();
   }, []);
 
+  // ... rest of your TextEditor component stays the same
+
   const editor = useEditor({
     extensions: [
       StarterKit.configure({

components/text-editor/menu-bar.tsx

@@ -14,80 +14,84 @@ import {
 } from "lucide-react";
 import { Toggle } from "../ui/toggle";
 
-export default function Menubar({ editor }: { editor: Editor | null }) {
+interface MenubarProps {
+  editor: Editor | null;
+}
+
+// 1. The main exported component remains safe and handles the null state cleanly
+export default function Menubar({ editor }: MenubarProps) {
   if (!editor) {
     return null;
   }
 
+  // Only render the inner menu once the editor is explicitly available
+  return <MenubarInner editor={editor} />;
+}
+
+// 2. The inner component runs safely because 'editor' is guaranteed to be an Editor instance
+function MenubarInner({ editor }: { editor: Editor }) {
   const editorState = useEditorState({
-    editor,
+    editor, // Now safely guaranteed never to be null or undefined
     selector: (ctx) => {
       return {
-        // Text formatting
-        isBold: ctx.editor.isActive("bold") ?? false,
-        isItalic: ctx.editor.isActive("italic") ?? false,
-        isStrike: ctx.editor.isActive("strike") ?? false,
-        isHighlight: ctx.editor.isActive("highlight") ?? false,
+        isBold: ctx.editor.isActive("bold"),
+        isItalic: ctx.editor.isActive("italic"),
+        isStrike: ctx.editor.isActive("strike"),
+        isHighlight: ctx.editor.isActive("highlight"),
 
-        // Text alignment
-        isAlignLeft: ctx.editor.isActive({ textAlign: "left" }) ?? false,
-        isAlignCenter: ctx.editor.isActive({ textAlign: "center" }) ?? false,
-        isAlignRight: ctx.editor.isActive({ textAlign: "right" }) ?? false,
-        isAlignJustify: ctx.editor.isActive({ textAlign: "justify" }) ?? false,
+        isAlignLeft: ctx.editor.isActive({ textAlign: "left" }),
+        isAlignCenter: ctx.editor.isActive({ textAlign: "center" }),
+        isAlignRight: ctx.editor.isActive({ textAlign: "right" }),
+        isAlignJustify: ctx.editor.isActive({ textAlign: "justify" }),
 
-        // Block types
-        isParagraph: ctx.editor.isActive("paragraph") ?? false,
-        isHeading1: ctx.editor.isActive("heading", { level: 1 }) ?? false,
-        isHeading2: ctx.editor.isActive("heading", { level: 2 }) ?? false,
-        isHeading3: ctx.editor.isActive("heading", { level: 3 }) ?? false,
+        isParagraph: ctx.editor.isActive("paragraph"),
+        isHeading1: ctx.editor.isActive("heading", { level: 1 }),
+        isHeading2: ctx.editor.isActive("heading", { level: 2 }),
+        isHeading3: ctx.editor.isActive("heading", { level: 3 }),
       };
     },
   });
 
-  const options: {
-    icon: React.ReactNode;
-    onClick: () => void;
-    pressed: boolean;
-  }[] = [
+  const options = [
     {
       icon: <Heading1 className="size-4" />,
       onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
-      pressed: editor.isActive("heading", { level: 1 }),
+      pressed: editorState.isHeading1,
     },
     {
       icon: <Heading2 className="size-4" />,
       onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
-      pressed: editor.isActive("heading", { level: 2 }),
+      pressed: editorState.isHeading2,
     },
     {
       icon: <Heading3 className="size-4" />,
       onClick: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
-      pressed: editor.isActive("heading", { level: 3 }),
+      pressed: editorState.isHeading3,
     },
     {
       icon: <Bold className="size-4" />,
       onClick: () => editor.chain().focus().toggleBold().run(),
-      pressed: editor.isActive("bold"),
+      pressed: editorState.isBold,
     },
     {
       icon: <Italic className="size-4" />,
       onClick: () => editor.chain().focus().toggleItalic().run(),
-      pressed: editor.isActive("italic"),
+      pressed: editorState.isItalic,
     },
     {
       icon: <AlignLeft className="size-4" />,
       onClick: () => editor.chain().focus().toggleTextAlign("left").run(),
-      pressed: editor.isActive({ textAlign: "left" }),
+      pressed: editorState.isAlignLeft,
     },
     {
       icon: <AlignCenter className="size-4" />,
       onClick: () => editor.chain().focus().toggleTextAlign("center").run(),
-      pressed: editor.isActive({ textAlign: "center" }),
+      pressed: editorState.isAlignCenter,
     },
     {
       icon: <AlignRight className="size-4" />,
       onClick: () => editor.chain().focus().toggleTextAlign("right").run(),
-      pressed: editor.isActive({ textAlign: "right" }),
+      pressed: editorState.isAlignRight,
     },
     {
       icon: <List className="size-4" />,
@@ -97,17 +101,17 @@ export default function Menubar({ editor }: { editor: Editor | null }) {
     {
       icon: <ListOrdered className="size-4" />,
       onClick: () => editor.chain().focus().toggleOrderedList().run(),
-      pressed: editor.isActive("orderList"),
+      pressed: editor.isActive("orderedList"),
     },
     {
       icon: <Highlighter className="size-4" />,
       onClick: () => editor.chain().focus().toggleHighlight().run(),
-      pressed: editor.isActive("highlight"),
+      pressed: editorState.isHighlight,
     },
   ];
 
   return (
-    <div className="border rounded-md p-1 mb-1 bg-slate-50 space-x-2 z-50">
+    <div className="border rounded-md p-1 mb-1 bg-slate-50 space-x-2 z-50 flex items-center">
       {options.map((option, index) => (
         <Toggle key={index} pressed={option.pressed} onClick={option.onClick}>
           {option.icon}