chore: preload nested deps

web/app/components/DefaultCatchBoundary.tsx

@@ -14,8 +14,6 @@ export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
     select: (state) => state.id === rootRouteId,
   })
 
-  console.error(error)
-
   return (
     <div className="flex min-w-0 flex-1 flex-col items-center justify-center gap-6 p-4">
       <ErrorComponent error={error} />

web/app/components/GlobalKeyboardHandler.tsx

@@ -45,7 +45,7 @@ export function KeyboardHandlerContent() {
   const { signOut } = useAuth()
   const navigate = useNavigate()
   const { me } = useAccountOrGuest()
-  const { newPage } = usePageActions()
+  const { createNewPage } = usePageActions()
 
   const resetSequence = React.useCallback(() => {
     setSequence([])
@@ -81,9 +81,9 @@ export function KeyboardHandlerContent() {
         return
       }
 
-      newPage()
+      createNewPage()
     },
-    [newPage],
+    [createNewPage],
   )
 
   useKeyDown(

web/app/components/sidebar/partials/link-collection.tsx

@@ -3,7 +3,16 @@ import { useAccount } from "@/lib/providers/jazz-provider"
 import { NavItem } from "~/components/custom/nav-item"
 
 export const LinkCollection: React.FC = () => {
-  const { me } = useAccount()
+  const { me } = useAccount({
+    root: {
+      personalLinks: [{}],
+      personalPages: [{}],
+      tasks: [{}],
+      topicsWantToLearn: [{}],
+      topicsLearning: [{}],
+      topicsLearned: [{}],
+    },
+  })
 
   const linkCount = me?.root?.personalLinks?.length || 0
   const pageCount = me?.root?.personalPages?.length || 0

web/app/components/sidebar/partials/page-section.tsx

@@ -49,11 +49,7 @@ const isExpandedAtom = atomWithStorage("isPageSectionExpanded", true)
 export const PageSection: React.FC = () => {
   const { me } = useAccount({
     root: {
-      personalPages: [
-        {
-          topic: {},
-        },
-      ],
+      personalPages: [{}],
     },
   })
 
@@ -81,9 +77,9 @@ export const PageSection: React.FC = () => {
       />
       {isExpanded && (
         <div className="flex flex-col gap-px">
-          {sortedPages.map((page) => (
+          {sortedPages.map((page, index) => (
             <Link
-              key={page.id}
+              key={index}
               to="/pages/$pageId"
               params={{ pageId: page.id }}
               className={cn(
@@ -168,13 +164,13 @@ const PageSectionHeader: React.FC<PageSectionHeaderProps> = ({
 )
 
 const NewPageButton: React.FC = () => {
-  const { newPage } = usePageActions()
+  const { createNewPage } = usePageActions()
 
   const handleClick = async (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault()
     e.stopPropagation()
 
-    newPage()
+    createNewPage()
   }
 
   return (

web/app/components/sidebar/partials/profile-section.tsx

@@ -19,22 +19,16 @@ import { SignInButton, useAuth, useUser } from "@clerk/tanstack-start"
 import { Link, useLocation } from "@tanstack/react-router"
 import { ShortcutKey } from "@shared/minimal-tiptap/components/shortcut-key"
 import { Feedback } from "./feedback"
+import { useAccount } from "~/lib/providers/jazz-provider"
 
 export const ProfileSection: React.FC = () => {
   const { user, isSignedIn } = useUser()
-  const { signOut } = useAuth()
   const [menuOpen, setMenuOpen] = React.useState(false)
   const { pathname } = useLocation()
   const [, setShowShortcut] = useAtom(showShortcutAtom)
 
   const { disableKeydown } = useKeyboardManager("profileSection")
 
-  const handleSignOut = () => {
-    signOut(() => {
-      window.location.replace("/")
-    })
-  }
-
   React.useEffect(() => {
     disableKeydown(menuOpen)
   }, [menuOpen, disableKeydown])
@@ -59,7 +53,6 @@ export const ProfileSection: React.FC = () => {
           user={user}
           menuOpen={menuOpen}
           setMenuOpen={setMenuOpen}
-          signOut={handleSignOut}
           setShowShortcut={setShowShortcut}
         />
         <span className="flex flex-auto"></span>
@@ -73,7 +66,6 @@ interface ProfileDropdownProps {
   user: any
   menuOpen: boolean
   setMenuOpen: (open: boolean) => void
-  signOut: () => void
   setShowShortcut: (show: boolean) => void
 }
 
@@ -81,7 +73,6 @@ const ProfileDropdown: React.FC<ProfileDropdownProps> = ({
   user,
   menuOpen,
   setMenuOpen,
-  signOut,
   setShowShortcut,
 }) => (
   <div className="flex min-w-0">
@@ -107,60 +98,71 @@ const ProfileDropdown: React.FC<ProfileDropdownProps> = ({
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-56" align="start" side="top">
-        <DropdownMenuItems
-          signOut={signOut}
-          setShowShortcut={setShowShortcut}
-        />
+        <DropdownMenuItems setShowShortcut={setShowShortcut} />
       </DropdownMenuContent>
     </DropdownMenu>
   </div>
 )
 
 interface DropdownMenuItemsProps {
-  signOut: () => void
   setShowShortcut: (show: boolean) => void
 }
 
 const DropdownMenuItems: React.FC<DropdownMenuItemsProps> = ({
-  signOut,
   setShowShortcut,
-}) => (
-  <>
-    <MenuLink href="/profile" icon="CircleUser" text="My profile" />
-    <DropdownMenuItem className="gap-2" onClick={() => setShowShortcut(true)}>
-      <LaIcon name="Keyboard" />
-      <span>Shortcut</span>
-    </DropdownMenuItem>
-    <MenuLink href="/onboarding" icon="LayoutList" text="Onboarding" />
-    <DropdownMenuSeparator />
-    <MenuLink
-      href="https://docs.learn-anything.xyz/"
-      icon="Sticker"
-      text="Docs"
-    />
-    <MenuLink
-      href="https://github.com/learn-anything/learn-anything"
-      icon="Github"
-      text="GitHub"
-    />
-    <MenuLink
-      href="https://discord.com/invite/bxtD8x6aNF"
-      icon={DiscordIcon}
-      text="Discord"
-      iconClass="-ml-1"
-    />
-    <DropdownMenuSeparator />
-    <DropdownMenuItem onClick={signOut}>
-      <div className="relative flex flex-1 cursor-pointer items-center gap-2">
-        <LaIcon name="LogOut" />
-        <span>Log out</span>
-        <div className="absolute right-0">
-          <ShortcutKey keys={["alt", "shift", "q"]} />
+}) => {
+  const { signOut } = useAuth()
+  const { logOut } = useAccount()
+
+  const handleSignOut = React.useCallback(async () => {
+    try {
+      logOut()
+      signOut(() => {
+        window.location.href = "/"
+      })
+    } catch (error) {
+      console.error("Error signing out:", error)
+    }
+  }, [logOut, signOut])
+
+  return (
+    <>
+      <MenuLink href="/profile" icon="CircleUser" text="My profile" />
+      <DropdownMenuItem className="gap-2" onClick={() => setShowShortcut(true)}>
+        <LaIcon name="Keyboard" />
+        <span>Shortcut</span>
+      </DropdownMenuItem>
+      <MenuLink href="/onboarding" icon="LayoutList" text="Onboarding" />
+      <DropdownMenuSeparator />
+      <MenuLink
+        href="https://docs.learn-anything.xyz/"
+        icon="Sticker"
+        text="Docs"
+      />
+      <MenuLink
+        href="https://github.com/learn-anything/learn-anything"
+        icon="Github"
+        text="GitHub"
+      />
+      <MenuLink
+        href="https://discord.com/invite/bxtD8x6aNF"
+        icon={DiscordIcon}
+        text="Discord"
+        iconClass="-ml-1"
+      />
+      <DropdownMenuSeparator />
+      <DropdownMenuItem onClick={handleSignOut}>
+        <div className="relative flex flex-1 cursor-pointer items-center gap-2">
+          <LaIcon name="LogOut" />
+          <span>Log out</span>
+          <div className="absolute right-0">
+            <ShortcutKey keys={["alt", "shift", "q"]} />
+          </div>
         </div>
-      </div>
-    </DropdownMenuItem>
-  </>
-)
+      </DropdownMenuItem>
+    </>
+  )
+}
 
 interface MenuLinkProps {
   href: string