feat: add react-resizable-panels dependency and update canvas components for improved layout

- Introduced the react-resizable-panels package to enhance panel resizing capabilities.
- Refactored CanvasPage to utilize CanvasShell for a cleaner layout.
- Updated CanvasSidebar to support a compact mode and improved rendering logic for user entries.
- Enhanced CanvasUserMenu with a compact option for better UI adaptability.

app/(app)/canvas/[canvasId]/page.tsx

@@ -1,8 +1,6 @@
 import { notFound, redirect } from "next/navigation";
 
-import Canvas from "@/components/canvas/canvas";
-import ConnectionBanner from "@/components/canvas/connection-banner";
-import CanvasSidebar from "@/components/canvas/canvas-sidebar";
+import { CanvasShell } from "@/components/canvas/canvas-shell";
 import { api } from "@/convex/_generated/api";
 import type { Id } from "@/convex/_generated/dataModel";
 import { fetchAuthQuery, isAuthenticated } from "@/lib/auth-server";
@@ -48,13 +46,5 @@ export default async function CanvasPage({
     notFound();
   }
 
-  return (
-    <div className="flex h-screen w-screen overflow-hidden">
-      <CanvasSidebar canvasId={typedCanvasId} />
-      <div className="relative min-h-0 min-w-0 flex-1">
-        <ConnectionBanner />
-        <Canvas canvasId={typedCanvasId} />
-      </div>
-    </div>
-  );
+  return <CanvasShell canvasId={typedCanvasId} />;
 }