feat: enhance canvas components with improved sidebar and toolbar functionality

- Updated CanvasSidebar to accept canvasId as a prop, enabling dynamic content based on the current canvas.
- Refactored CanvasToolbar to implement a dropdown menu for adding nodes, improving usability and organization.
- Introduced new node types and updated existing ones in the node template picker for better categorization and searchability.
- Enhanced AssetNode to utilize context for asset browser interactions, streamlining asset management on the canvas.
- Improved overall layout and styling for better user experience across canvas components.

components/canvas/canvas-node-template-picker.tsx

@@ -1,12 +1,15 @@
 "use client";
 
 import {
+  FolderOpen,
   Frame,
   GitCompare,
   Image,
+  Package,
   Sparkles,
   StickyNote,
   Type,
+  Video,
   type LucideIcon,
 } from "lucide-react";
 
@@ -23,6 +26,9 @@ const NODE_ICONS: Record<CanvasNodeTemplate["type"], LucideIcon> = {
   note: StickyNote,
   frame: Frame,
   compare: GitCompare,
+  group: FolderOpen,
+  asset: Package,
+  video: Video,
 };
 
 const NODE_SEARCH_KEYWORDS: Partial<
@@ -33,7 +39,10 @@ const NODE_SEARCH_KEYWORDS: Partial<
   prompt: ["prompt", "ai", "generate", "ki-bild", "ki", "bild"],
   note: ["note", "sticky", "notiz"],
   frame: ["frame", "artboard"],
-  compare: ["compare", "before", "after"],
+  compare: ["compare", "before", "after", "vergleich"],
+  group: ["group", "gruppe", "folder"],
+  asset: ["asset", "freepik", "stock"],
+  video: ["video", "pexels", "clip"],
 };
 
 export type CanvasNodeTemplatePickerProps = {