fix: Linking, palette and reloads

apps/docs/src/components/fragments/header.tsx

@@ -1,4 +1,4 @@
-import { SearchPaletteProvider, useSearchPalette } from "./search-palette";
+import { setSearchPaletteOpened } from "./search-palette";
 import { mdiAppleKeyboardCommand, mdiGithub, mdiMagnify } from "@mdi/js";
 import { For, type Component, Show } from "solid-js";
 import clsx from "clsx";
@@ -24,14 +24,13 @@ const externalLinks = [
   }
 ];
 const Header: Component = () => {
-  const { opened, setOpened } = useSearchPalette();
-
   return (
     <div
       class={clsx(
         "top-0 gap-2 h-12 fixed bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700 border-b-2 right-0 z-1 items-center justify-center w-full flex py-2 px-4 md:px-8",
         "!pr-[max(1rem,calc((100%-(1536px))/2))]"
       )}
+      id="header"
     >
       <div class="flex md:hidden items-center justify-start px-1">
         <IconButton
@@ -83,14 +82,9 @@ const Header: Component = () => {
         text="soft"
         class="lg:min-w-48 justify-start m-0 group"
         onClick={() => {
-          // Force mobile keyboard to open (first focus must be in user-triggered event handler)
-          const ghostInput = document.createElement("input");
-
-          ghostInput.classList.add("absolute", "opacity-0", "pointer-events-none");
-          ghostInput.id = "ghost-input";
-          document.body.appendChild(ghostInput);
-          ghostInput.focus();
-          setOpened(!opened());
+          // Force mobile keyboard to open (focus must be in user-triggered event handler)
+          document.getElementById("search-palette-input")?.focus({ preventScroll: true });
+          setSearchPaletteOpened((opened) => !opened);
         }}
       />
       <Button color="primary" class="m-0" link="https://app.vrite.io">
@@ -100,11 +94,7 @@ const Header: Component = () => {
   );
 };
 const HeaderWrapper: Component = () => {
-  return (
-    <SearchPaletteProvider>
-      <Header />
-    </SearchPaletteProvider>
-  );
+  return <Header />;
 };
 
 export { HeaderWrapper as Header };

apps/docs/src/components/fragments/search-palette.tsx

@@ -52,7 +52,8 @@ interface SearchPaletteContextData {
 }
 
 const SearchPaletteContext = createContext<SearchPaletteContextData>();
-const SearchPalette: Component<SearchPaletteProps> = (props) => {
+const [searchPaletteOpened, setSearchPaletteOpened] = createSignal(false);
+const SearchPalette: Component = () => {
   const client = createClient({
     token: import.meta.env.PUBLIC_VRITE_SEARCH_TOKEN
   });
@@ -128,7 +129,7 @@ const SearchPalette: Component<SearchPaletteProps> = (props) => {
   };
   const goToContentPiece = (searchResult: SearchResult): void => {
     // eslint-disable-next-line no-console
-    props.setOpened(false);
+    setSearchPaletteOpened(false);
 
     const { slug } = searchResult.contentPiece;
     const [title, subHeading1, subHeading2] = searchResult.breadcrumb;
@@ -161,26 +162,25 @@ const SearchPalette: Component<SearchPaletteProps> = (props) => {
     })
   );
   createEffect(() => {
-    if (inputRef() && props.opened && mode()) {
+    if (inputRef() && searchPaletteOpened() && mode()) {
       setTimeout(() => {
         inputRef()?.focus();
-        document.getElementById("ghost-input")?.remove();
       }, 300);
     }
   });
   createEffect(() => {
     import("tinykeys").then(({ createKeybindingsHandler }) => {
       const keyShortcutHandler = createKeybindingsHandler({
         "$mod+KeyK": (event) => {
-          props.setOpened(!props.opened);
+          setSearchPaletteOpened(!searchPaletteOpened());
         },
         "escape": (event) => {
-          if (!props.opened) return;
+          if (!searchPaletteOpened()) return;
 
-          props.setOpened(false);
+          setSearchPaletteOpened(false);
         },
         "ArrowUp": (event) => {
-          if (!props.opened) return;
+          if (!searchPaletteOpened()) return;
 
           setMouseHoverEnabled(false);
           event.preventDefault();
@@ -195,7 +195,7 @@ const SearchPalette: Component<SearchPaletteProps> = (props) => {
           }
         },
         "ArrowDown": (event) => {
-          if (!props.opened) return;
+          if (!searchPaletteOpened()) return;
 
           setMouseHoverEnabled(false);
           event.preventDefault();
@@ -210,7 +210,7 @@ const SearchPalette: Component<SearchPaletteProps> = (props) => {
           }
         },
         "Enter": (event) => {
-          if (!props.opened) return;
+          if (!searchPaletteOpened()) return;
 
           if (mode() === "search") {
             goToContentPiece(searchResults()[selectedIndex()]);
@@ -224,6 +224,13 @@ const SearchPalette: Component<SearchPaletteProps> = (props) => {
       });
     });
   });
+  createEffect(() => {
+    if (searchPaletteOpened()) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "auto";
+    }
+  });
 
   const getIcon = (): string => {
     switch (mode()) {
@@ -245,12 +252,13 @@ const SearchPalette: Component<SearchPaletteProps> = (props) => {
 
   return (
     <Overlay
-      opened={props.opened}
+      opened={searchPaletteOpened()}
       class="items-start"
       shadeClass="bg-opacity-50"
       wrapperClass="mt-3 md:mt-32"
+      hiddenClass="opacity-0 pointer-events-none"
       onOverlayClick={() => {
-        props.setOpened(false);
+        setSearchPaletteOpened(false);
       }}
     >
       <Card
@@ -264,6 +272,7 @@ const SearchPalette: Component<SearchPaletteProps> = (props) => {
           <IconButton path={getIcon()} text="soft" variant="text" badge hover={false} class="m-0" />
           <Input
             value={query()}
+            id="search-palette-input"
             setValue={(value) => {
               if (mode() === "search") {
                 setLoading(true);
@@ -272,7 +281,6 @@ const SearchPalette: Component<SearchPaletteProps> = (props) => {
               setQuery(value);
             }}
             ref={setInputRef}
-            tabIndex={0}
             placeholder={getLabel()}
             wrapperClass="flex-1 m-0"
             class="m-0 bg-transparent"
@@ -473,31 +481,5 @@ const SearchPalette: Component<SearchPaletteProps> = (props) => {
     </Overlay>
   );
 };
-const SearchPaletteProvider: ParentComponent = (props) => {
-  const [opened, setOpened] = createSignal(false);
-
-  createEffect(() => {
-    if (opened()) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "auto";
-    }
-  });
-
-  return (
-    <SearchPaletteContext.Provider
-      value={{
-        opened,
-        setOpened
-      }}
-    >
-      {props.children}
-      <SearchPalette opened={opened()} setOpened={setOpened} />
-    </SearchPaletteContext.Provider>
-  );
-};
-const useSearchPalette = (): SearchPaletteContextData => {
-  return useContext(SearchPaletteContext)!;
-};
 
-export { SearchPaletteProvider, useSearchPalette };
+export { SearchPalette, searchPaletteOpened, setSearchPaletteOpened };

apps/docs/src/components/layouts/default.astro

@@ -1,5 +1,13 @@
 ---
-import { Header, BaseHead, SideBar, SVGDefs, OnThisPage, Footer } from "#components/fragments";
+import {
+  Header,
+  BaseHead,
+  SideBar,
+  SVGDefs,
+  OnThisPage,
+  Footer,
+  SearchPalette
+} from "#components/fragments";
 import type { MarkdownHeading } from "astro";
 import menu from "./menu.json";
 import { Button } from "#components/primitives";
@@ -84,6 +92,7 @@ type Props = {
           currentPath={Astro.url.pathname}
           client:load
         />
+        <SearchPalette client:load />
         <div class="flex overflow-hidden w-full relative h-full pt-12">
           <div
             class="flex-1 flex overflow-y-auto overflow-x-hidden justify-center min-h-[calc(100vh-3rem)]"

apps/web/package.json

@@ -29,17 +29,17 @@
     "@solid-primitives/memo": "^1.3.2",
     "@solid-primitives/scheduled": "^1.4.0",
     "@solidjs/router": "^0.8.2",
-    "@tiptap/core": "2.1.11",
-    "@tiptap/extension-character-count": "^2.1.11",
-    "@tiptap/extension-collaboration": "^2.1.11",
-    "@tiptap/extension-collaboration-cursor": "^2.1.11",
-    "@tiptap/extension-dropcursor": "^2.1.11",
-    "@tiptap/extension-gapcursor": "^2.1.11",
-    "@tiptap/extension-history": "^2.1.11",
-    "@tiptap/extension-placeholder": "^2.1.11",
-    "@tiptap/extension-typography": "^2.1.11",
-    "@tiptap/pm": "2.1.11",
-    "@tiptap/suggestion": "2.1.11",
+    "@tiptap/core": "2.1.12",
+    "@tiptap/extension-character-count": "^2.1.12",
+    "@tiptap/extension-collaboration": "^2.1.12",
+    "@tiptap/extension-collaboration-cursor": "^2.1.12",
+    "@tiptap/extension-dropcursor": "^2.1.12",
+    "@tiptap/extension-gapcursor": "^2.1.12",
+    "@tiptap/extension-history": "^2.1.12",
+    "@tiptap/extension-placeholder": "^2.1.12",
+    "@tiptap/extension-typography": "^2.1.12",
+    "@tiptap/pm": "2.1.12",
+    "@tiptap/suggestion": "2.1.12",
     "@trpc/client": "^10.35.0",
     "@trpc/server": "^10.35.0",
     "@types/dompurify": "^3.0.2",

apps/web/src/context/command-palette/index.tsx

@@ -34,18 +34,8 @@ import { debounce } from "@solid-primitives/scheduled";
 import { fetchEventSource } from "@microsoft/fetch-event-source";
 import { marked } from "marked";
 import { useNavigate } from "@solidjs/router";
-import { InputField, ScrollShadow } from "#components/fragments";
-import {
-  Card,
-  Dropdown,
-  Icon,
-  IconButton,
-  Input,
-  Loader,
-  Overlay,
-  Select,
-  Tooltip
-} from "#components/primitives";
+import { ScrollShadow } from "#components/fragments";
+import { Card, Icon, IconButton, Input, Loader, Overlay, Tooltip } from "#components/primitives";
 import { App, useClient } from "#context/client";
 import { useLocalStorage } from "#context/local-storage";
 import { breakpoints } from "#lib/utils";
@@ -292,7 +282,6 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {
     if (inputRef() && props.opened && mode()) {
       setTimeout(() => {
         inputRef()?.focus();
-        document.getElementById("ghost-input")?.remove();
       }, 300);
     }
   });
@@ -328,6 +317,7 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {
       class="items-start"
       shadeClass="bg-opacity-50"
       wrapperClass="mt-3 md:mt-32"
+      hiddenClass="opacity-0 pointer-events-none"
       onOverlayClick={() => {
         props.setOpened(false);
       }}
@@ -353,6 +343,7 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {
             ref={setInputRef}
             placeholder={getLabel()}
             wrapperClass="flex-1 m-0"
+            id="command-palette-input"
             class="m-0 bg-transparent"
             onEnter={() => {
               if (mode() === "ask" && hostConfig.aiSearch) {

apps/web/src/layout/toolbar/index.tsx

@@ -419,13 +419,8 @@ const toolbarViews: Record<string, Component<Record<string, any>>> = {
           text="soft"
           class="@xl:min-w-48 justify-start m-0 bg-gray-200 group"
           onClick={() => {
-            // Force mobile keyboard to open (first focus must be in user-triggered event handler)
-            const ghostInput = document.createElement("input");
-
-            ghostInput.classList.add("absolute", "opacity-0", "pointer-events-none");
-            ghostInput.id = "ghost-input";
-            document.body.appendChild(ghostInput);
-            ghostInput.focus();
+            // Force mobile keyboard to open (focus must be in user-triggered event handler)
+            document.getElementById("command-palette-input")?.focus({ preventScroll: true });
             setOpened(true);
           }}
         />

apps/web/src/views/dashboard/index.tsx

@@ -12,6 +12,7 @@ const DashboardView: Component = () => {
   const cache = useCache();
   const { workspace, profile } = useAuthenticatedUserData();
   const { storage, setStorage } = useLocalStorage();
+  const [provider, setProvider] = createSharedSignal("provider");
   const ancestor = (): App.ContentGroup | null => {
     return storage().dashboardViewAncestor || null;
   };
@@ -21,19 +22,8 @@ const DashboardView: Component = () => {
   const ydoc = new Y.Doc();
   const handleReload = async (): Promise<void> => {
     await fetch("/session/refresh", { method: "POST" });
-    window.location.reload();
+    provider()?.connect();
   };
-  const [provider, setProvider] = createSharedSignal(
-    "provider",
-    new HocuspocusProvider({
-      token: "vrite",
-      url: window.env.PUBLIC_COLLAB_URL.replace("http", "ws"),
-      onDisconnect: handleReload,
-      onAuthenticationFailed: handleReload,
-      name: `workspace:${workspace()?.id || ""}`,
-      document: ydoc
-    })
-  );
   const setAncestor = (ancestor: App.ContentGroup | null): void => {
     setStorage((storage) => ({
       ...storage,
@@ -69,6 +59,17 @@ const DashboardView: Component = () => {
     })
   );
 
+  if (!provider()) {
+    new HocuspocusProvider({
+      token: "vrite",
+      url: window.env.PUBLIC_COLLAB_URL.replace("http", "ws"),
+      onDisconnect: handleReload,
+      onAuthenticationFailed: handleReload,
+      name: `workspace:${workspace()?.id || ""}`,
+      document: ydoc
+    });
+  }
+
   return (
     <div class="relative flex-1 overflow-hidden flex flex-row h-full">
       <Switch>

packages/backend/package.json

@@ -23,7 +23,7 @@
     "@octokit/types": "^11.1.0",
     "@qdrant/qdrant-js": "^1.4.0",
     "@sendgrid/mail": "^7.7.0",
-    "@tiptap/html": "^2.1.11",
+    "@tiptap/html": "^2.1.12",
     "@trpc/client": "^10.35.0",
     "@trpc/server": "^10.35.0",
     "@types/html-to-text": "^9.0.1",

packages/components/src/primitives/overlay.tsx

@@ -10,6 +10,7 @@ interface OverlayProps extends JSX.HTMLAttributes<HTMLDivElement> {
   shadeClass?: string;
   portal?: boolean;
   wrapperClass?: string;
+  hiddenClass?: string;
   onOverlayClick?(): void;
 }
 
@@ -29,7 +30,7 @@ const Overlay: Component<OverlayProps> = (props) => {
       <div
         class={clsx(
           `:base: fixed top-0 left-0 z-50 flex items-center justify-center w-[100dvw] h-[100dvh] transition-all duration-300 transform`,
-          props.opened ? "opacity-100 visible" : "opacity-0 invisible",
+          props.opened ? "opacity-100 visible" : props.hiddenClass || "opacity-0 invisible",
           props.class
         )}
       >