Trash ID Update Collections

frontend/src/components/Sidebar.tsx

@@ -292,24 +292,14 @@ export const Sidebar: React.FC<SidebarProps> = ({
             onDrop={(e) => {
               e.preventDefault();
               setIsTrashDragOver(false);
-              const trashId = collections.find(c => c.name === 'Trash')?.id;
-              if (trashId) {
-                onDrop?.(e, trashId);
-              } else {
-                onDrop?.(e, 'TRASH');
-              }
+              onDrop?.(e, 'trash');
             }}
             onClick={() => {
-              const trashCollection = collections.find(c => c.name === 'Trash');
-              if (trashCollection) {
-                navigate(`/collections?id=${trashCollection.id}`);
-              } else {
-                onCreateCollection('Trash');
-              }
+              navigate('/collections?id=trash');
             }}
             className={clsx(
               "w-full flex items-center gap-3 px-3 py-2 text-sm font-bold rounded-xl transition-all duration-200 border-2 border-black dark:border-neutral-700 shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] dark:shadow-[2px_2px_0px_0px_rgba(255,255,255,0.2)] mb-4",
-              collections.find(c => c.name === 'Trash')?.id === selectedCollectionId || isTrashDragOver
+              selectedCollectionId === 'trash' || isTrashDragOver
                 ? "bg-rose-50 dark:bg-rose-900/30 text-rose-900 dark:text-rose-300 -translate-y-0.5"
                 : "bg-white dark:bg-neutral-900 text-slate-900 dark:text-neutral-200 hover:bg-rose-50 dark:hover:bg-rose-900/30 hover:text-rose-900 dark:hover:text-rose-300 hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:hover:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.2)] hover:-translate-y-0.5"
             )}

frontend/src/pages/Dashboard.tsx

@@ -267,15 +267,7 @@ export const Dashboard: React.FC = () => {
   };
 
   // Trash Helpers
-  const trashCollection = collections.find(c => c.name === 'Trash');
-  const isTrashView = selectedCollectionId === trashCollection?.id && trashCollection !== undefined;
-
-  const getOrCreateTrashId = async () => {
-    if (trashCollection) return trashCollection.id;
-    const newCol = await api.createCollection('Trash');
-    setCollections(prev => [...prev, newCol]);
-    return newCol.id;
-  };
+  const isTrashView = selectedCollectionId === 'trash';
 
   const handleCreateDrawing = async () => {
     if (isTrashView) return;
@@ -300,7 +292,7 @@ export const Dashboard: React.FC = () => {
       setDrawingToDelete(id);
     } else {
       // Move to Trash -> No Confirm
-      const trashId = await getOrCreateTrashId();
+      const trashId = 'trash';
 
       // Optimistic Remove from current view
       setDrawings(prev => prev.filter(d => d.id !== id));
@@ -373,7 +365,7 @@ export const Dashboard: React.FC = () => {
   };
 
   const executeBulkMoveToTrash = async () => {
-    const trashId = await getOrCreateTrashId();
+    const trashId = 'trash';
     const ids = Array.from(selectedIds);
 
     setDrawings(prev => prev.filter(d => !selectedIds.has(d.id)));
@@ -489,6 +481,7 @@ export const Dashboard: React.FC = () => {
   const viewTitle = React.useMemo(() => {
     if (selectedCollectionId === undefined) return "All Drawings";
     if (selectedCollectionId === null) return "Unorganized";
+    if (selectedCollectionId === 'trash') return "Trash";
     const collection = collections.find(c => c.id === selectedCollectionId);
     return collection ? collection.name : "Collection";
   }, [selectedCollectionId, collections]);
@@ -589,9 +582,12 @@ export const Dashboard: React.FC = () => {
     setDrawings(prev => prev.map(d => d.id === id ? { ...d, preview } : d));
   };
 
+  // Filter out trash from the collections list passed to sidebar
+  const visibleCollections = React.useMemo(() => collections.filter(c => c.id !== 'trash'), [collections]);
+
   return (
     <Layout
-      collections={collections}
+      collections={visibleCollections}
       selectedCollectionId={selectedCollectionId}
       onSelectCollection={setSelectedCollectionId}
       onCreateCollection={handleCreateCollection}

frontend/src/pages/Editor.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState, useRef } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { ArrowLeft } from 'lucide-react';
-import { Excalidraw, convertToExcalidrawElements } from '@excalidraw/excalidraw';
+import { Excalidraw, convertToExcalidrawElements, exportToSvg } from '@excalidraw/excalidraw';
 import '@excalidraw/excalidraw/index.css';
 import debounce from 'lodash/debounce';
 import { Toaster, toast } from 'sonner';
@@ -37,10 +37,24 @@ export const Editor: React.FC = () => {
         viewBackgroundColor: appState.viewBackgroundColor,
         gridSize: appState.gridSize,
       };
+
+      // Generate preview
+      const files = excalidrawAPI.current?.getFiles() || null;
+      const svg = await exportToSvg({
+        elements,
+        appState: {
+          ...appState,
+          exportBackground: true,
+          viewBackgroundColor: appState.viewBackgroundColor || '#ffffff',
+        },
+        files,
+      });
+      const preview = svg.outerHTML;
       
       await api.updateDrawing(id, {
         elements,
         appState: persistableAppState,
+        preview,
       });
     } catch (err) {
       console.error('Failed to save drawing', err);