fix(dashboard): Fix sidebar error on hot reload

packages/dashboard/src/app/main.tsx

@@ -38,7 +38,9 @@ const routerOptions: RouterOptions<AnyRoute, any> = {
         auth: undefined!, // This will be set after we wrap the app in an AuthProvider
         queryClient,
     },
-    defaultErrorComponent: ({ error }: { error: Error }) => <div>Uh Oh!!! {error.message}</div>,
+    defaultErrorComponent: ({ error }: { error: Error }) => (
+        <div className="text-destructive p-6">An error occurred: {error.message}</div>
+    ),
 };
 
 // Create a type-only router instance for TypeScript type registration

packages/dashboard/src/lib/components/ui/sidebar-context.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+export type SidebarContext = {
+    state: 'expanded' | 'collapsed';
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: boolean;
+    toggleSidebar: () => void;
+};
+
+// This is split into a separate file from `sidebar.tsx` because having them in the same
+// file causes the app to break on HMR in dev mode. It relates to this issue:
+// https://github.com/vitejs/vite/issues/3301#issuecomment-1080030773
+export const SidebarContext = React.createContext<SidebarContext | null>(null);

packages/dashboard/src/lib/components/ui/sidebar.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Slot } from '@radix-ui/react-slot';
-import { VariantProps, cva } from 'class-variance-authority';
+import { cva, VariantProps } from 'class-variance-authority';
 import { PanelLeftIcon } from 'lucide-react';
 import * as React from 'react';
 import { MouseEvent } from 'react';
@@ -10,6 +10,7 @@ import { Button } from '@/vdb/components/ui/button.js';
 import { Input } from '@/vdb/components/ui/input.js';
 import { Separator } from '@/vdb/components/ui/separator.js';
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/vdb/components/ui/sheet.js';
+import { SidebarContext } from '@/vdb/components/ui/sidebar-context.js';
 import { Skeleton } from '@/vdb/components/ui/skeleton.js';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/vdb/components/ui/tooltip.js';
 import { useIsMobile } from '@/vdb/hooks/use-mobile.js';
@@ -22,18 +23,6 @@ const SIDEBAR_WIDTH_MOBILE = '18rem';
 const SIDEBAR_WIDTH_ICON = '3rem';
 const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
 
-type SidebarContext = {
-    state: 'expanded' | 'collapsed';
-    open: boolean;
-    setOpen: (open: boolean) => void;
-    openMobile: boolean;
-    setOpenMobile: (open: boolean) => void;
-    isMobile: boolean;
-    toggleSidebar: () => void;
-};
-
-const SidebarContext = React.createContext<SidebarContext | null>(null);
-
 function useSidebar() {
     const context = React.useContext(SidebarContext);
     if (!context) {