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.

lib/canvas-node-templates.ts

@@ -15,7 +15,7 @@ export const CANVAS_NODE_TEMPLATES = [
   },
   {
     type: "prompt",
-    label: "KI-Bild",
+    label: "Prompt",
     width: 320,
     height: 220,
     defaultData: { prompt: "", model: "", aspectRatio: "1:1" },
@@ -36,11 +36,32 @@ export const CANVAS_NODE_TEMPLATES = [
   },
   {
     type: "compare",
-    label: "Compare",
+    label: "Vergleich",
     width: 500,
     height: 380,
     defaultData: {},
   },
+  {
+    type: "group",
+    label: "Gruppe",
+    width: 400,
+    height: 300,
+    defaultData: { label: "Gruppe" },
+  },
+  {
+    type: "asset",
+    label: "Asset (Stock)",
+    width: 260,
+    height: 240,
+    defaultData: {},
+  },
+  {
+    type: "video",
+    label: "Video",
+    width: 320,
+    height: 180,
+    defaultData: {},
+  },
 ] as const;
 
 export type CanvasNodeTemplate = (typeof CANVAS_NODE_TEMPLATES)[number];