feat: add tabs

- Updated PadRepository to return pads sorted by creation timestamp for better organization.
- Refactored PadService to include type annotations for pads and removed redundant checks for existing pads during creation and updates.
- Implemented new API endpoints in PadRouter for updating, renaming, and deleting pads, enhancing user interaction with pad data.
- Introduced a context menu in the frontend for pad actions (rename, delete) and improved pad selection handling in Tabs component.
- Added utility functions for managing pad data in local storage, ensuring a seamless user experience across sessions.

Author: atyrode

src/backend/database/repository/pad_repository.py

@@ -33,8 +33,8 @@ async def get_by_id(self, pad_id: UUID) -> Optional[PadModel]:
         return result.scalars().first()
 
     async def get_by_owner(self, owner_id: UUID) -> List[PadModel]:
-        """Get all pads for a specific owner"""
-        stmt = select(PadModel).where(PadModel.owner_id == owner_id)
+        """Get all pads for a specific owner, sorted by created_at timestamp"""
+        stmt = select(PadModel).where(PadModel.owner_id == owner_id).order_by(PadModel.created_at)
         result = await self.session.execute(stmt)
         return result.scalars().all()
 

src/backend/database/service/pad_service.py

@@ -9,7 +9,7 @@
 
 from ..repository import PadRepository, UserRepository
 from .user_service import UserService
-
+from ..models import PadModel
 # Use TYPE_CHECKING to avoid circular imports
 if TYPE_CHECKING:
     from dependencies import UserSession
@@ -63,11 +63,6 @@ async def create_pad(self, owner_id: UUID, display_name: str, data: Dict[str, An
                 print(f"Error creating user as failsafe: {str(e)}")
                 raise ValueError(f"Failed to create user with ID '{owner_id}': {str(e)}")
 
-        # Check if pad with same name already exists for this owner
-        existing_pad = await self.repository.get_by_name(owner_id, display_name)
-        if existing_pad:
-            raise ValueError(f"Pad with name '{display_name}' already exists for this user")
-        
         # Create pad
         pad = await self.repository.create(owner_id, display_name, data)
         return pad.to_dict()
@@ -86,7 +81,7 @@ async def get_pads_by_owner(self, owner_id: UUID) -> List[Dict[str, Any]]:
             # This allows the pad_router to handle the case where a user doesn't exist
             return []
 
-        pads = await self.repository.get_by_owner(owner_id)
+        pads: list[PadModel] = await self.repository.get_by_owner(owner_id)
         return [pad.to_dict() for pad in pads]
 
     async def get_pad_by_name(self, owner_id: UUID, display_name: str) -> Optional[Dict[str, Any]]:
@@ -105,12 +100,6 @@ async def update_pad(self, pad_id: UUID, data: Dict[str, Any]) -> Optional[Dict[
         if 'display_name' in data and not data['display_name']:
             raise ValueError("Display name cannot be empty")
 
-        # Check if new display_name already exists for this owner (if being updated)
-        if 'display_name' in data and data['display_name'] != pad.display_name:
-            existing_pad = await self.repository.get_by_name(pad.owner_id, data['display_name'])
-            if existing_pad:
-                raise ValueError(f"Pad with name '{data['display_name']}' already exists for this user")
-        
         # Update pad
         updated_pad = await self.repository.update(pad_id, data)
         return updated_pad.to_dict() if updated_pad else None

src/backend/routers/pad_router.py

@@ -9,71 +9,175 @@
 from config import MAX_BACKUPS_PER_USER, MIN_INTERVAL_MINUTES, DEFAULT_PAD_NAME, DEFAULT_TEMPLATE_NAME
 pad_router = APIRouter()
 
+def ensure_pad_metadata(data: Dict[str, Any], pad_id: str, display_name: str) -> Dict[str, Any]:
+    """
+    Ensure the pad metadata (uniqueId and displayName) is set in the data.
+    
+    Args:
+        data: The pad data to modify
+        pad_id: The pad ID to set as uniqueId
+        display_name: The display name to set
+        
+    Returns:
+        The modified data
+    """
+    # Ensure the appState and pad objects exist
+    if "appState" not in data:
+        data["appState"] = {}
+    if "pad" not in data["appState"]:
+        data["appState"]["pad"] = {}
+        
+    # Set the uniqueId to match the database ID
+    data["appState"]["pad"]["uniqueId"] = str(pad_id)
+    data["appState"]["pad"]["displayName"] = display_name
+    
+    return data
+
 
-@pad_router.post("")
-async def save_pad(
+@pad_router.post("/{pad_id}")
+async def update_specific_pad(
+    pad_id: UUID,
     data: Dict[str, Any], 
     user: UserSession = Depends(require_auth),
     pad_service: PadService = Depends(get_pad_service),
     backup_service: BackupService = Depends(get_backup_service),
 ):
-    """Save pad data for the authenticated user"""
+    """Update a specific pad's data for the authenticated user"""
     try:
-        # Check if user already has a pad
-        user_pads = await pad_service.get_pads_by_owner(user.id)
+        # Get the pad to verify ownership
+        pad = await pad_service.get_pad(pad_id)
 
-        if not user_pads:
-            # Create a new pad if user doesn't have one
-            pad = await pad_service.create_pad(
-                owner_id=user.id,
-                display_name=DEFAULT_PAD_NAME,
-                data=data,
-                user_session=user
-            )
-        else:
-            # Update existing pad
-            pad = user_pads[0]  # Use the first pad (assuming one pad per user for now)
-            await pad_service.update_pad_data(pad["id"], data)
+        if not pad:
+            raise HTTPException(status_code=404, detail="Pad not found")
 
-        # Create a backup only if needed (if none exist or latest is > 5 min old)
+        # Verify the user owns this pad
+        if str(pad["owner_id"]) != str(user.id):
+            raise HTTPException(status_code=403, detail="You don't have permission to update this pad")
+        
+        # Ensure the uniqueId and displayName are set in the data
+        data = ensure_pad_metadata(data, str(pad_id), pad["display_name"])
+        
+        # Update the pad
+        await pad_service.update_pad_data(pad_id, data)
+        
+        # Create a backup if needed
         await backup_service.create_backup_if_needed(
-            source_id=pad["id"], 
+            source_id=pad_id, 
             data=data,
             min_interval_minutes=MIN_INTERVAL_MINUTES,
             max_backups=MAX_BACKUPS_PER_USER
         )
 
         return {"status": "success"}
     except Exception as e:
-        print(f"Error saving pad data: {str(e)}")
-        raise HTTPException(status_code=500, detail=f"Failed to save canvas data: {str(e)}")
+        print(f"Error updating pad: {str(e)}")
+        raise HTTPException(status_code=500, detail=f"Failed to update pad: {str(e)}")
+
+
+@pad_router.patch("/{pad_id}")
+async def rename_pad(
+    pad_id: UUID,
+    data: Dict[str, str],
+    user: UserSession = Depends(require_auth),
+    pad_service: PadService = Depends(get_pad_service),
+):
+    """Rename a pad for the authenticated user"""
+    try:
+        # Get the pad to verify ownership
+        pad = await pad_service.get_pad(pad_id)
+        
+        if not pad:
+            raise HTTPException(status_code=404, detail="Pad not found")
+            
+        # Verify the user owns this pad
+        if str(pad["owner_id"]) != str(user.id):
+            raise HTTPException(status_code=403, detail="You don't have permission to rename this pad")
+        
+        # Check if display_name is provided
+        if "display_name" not in data:
+            raise HTTPException(status_code=400, detail="display_name is required")
+        
+        # Update the pad's display name
+        update_data = {"display_name": data["display_name"]}
+        updated_pad = await pad_service.update_pad(pad_id, update_data)
+        
+        return {"status": "success", "pad": updated_pad}
+    except ValueError as e:
+        print(f"Error renaming pad: {str(e)}")
+        raise HTTPException(status_code=400, detail=str(e))
+    except Exception as e:
+        print(f"Error renaming pad: {str(e)}")
+        raise HTTPException(status_code=500, detail=f"Failed to rename pad: {str(e)}")
+
+
+@pad_router.delete("/{pad_id}")
+async def delete_pad(
+    pad_id: UUID,
+    user: UserSession = Depends(require_auth),
+    pad_service: PadService = Depends(get_pad_service),
+):
+    """Delete a pad for the authenticated user"""
+    try:
+        # Get the pad to verify ownership
+        pad = await pad_service.get_pad(pad_id)
+        
+        if not pad:
+            raise HTTPException(status_code=404, detail="Pad not found")
+            
+        # Verify the user owns this pad
+        if str(pad["owner_id"]) != str(user.id):
+            raise HTTPException(status_code=403, detail="You don't have permission to delete this pad")
+        
+        # Delete the pad
+        success = await pad_service.delete_pad(pad_id)
+        
+        if not success:
+            raise HTTPException(status_code=500, detail="Failed to delete pad")
+        
+        return {"status": "success"}
+    except ValueError as e:
+        print(f"Error deleting pad: {str(e)}")
+        raise HTTPException(status_code=400, detail=str(e))
+    except Exception as e:
+        print(f"Error deleting pad: {str(e)}")
+        raise HTTPException(status_code=500, detail=f"Failed to delete pad: {str(e)}")
 
 
 @pad_router.get("")
-async def get_pad(
+async def get_all_pads(
     user: UserSession = Depends(require_auth),
     pad_service: PadService = Depends(get_pad_service),
     template_pad_service: TemplatePadService = Depends(get_template_pad_service),
     backup_service: BackupService = Depends(get_backup_service)
 ):
-    """Get pad data for the authenticated user"""
+    """Get all pads for the authenticated user"""
     try:
         # Get user's pads
         user_pads = await pad_service.get_pads_by_owner(user.id)
 
         if not user_pads:
-            # Return default canvas if user doesn't have a pad
-            return await create_pad_from_template(
+            # Create a default pad if user doesn't have any
+            new_pad = await create_pad_from_template(
                 name=DEFAULT_TEMPLATE_NAME, 
                 display_name=DEFAULT_PAD_NAME, 
                 user=user, 
                 pad_service=pad_service, 
                 template_pad_service=template_pad_service,
                 backup_service=backup_service
             )
+            
+            # Return the new pad in a list
+            return [new_pad]
 
-        # Return the first pad's data (assuming one pad per user for now)
-        return user_pads[0]["data"]
+        # Ensure each pad's data has the uniqueId and displayName set
+        for pad in user_pads:
+            pad_data = pad["data"]
+            
+            # Ensure the uniqueId and displayName are set in the data
+            pad_data = ensure_pad_metadata(pad_data, str(pad["id"]), pad["display_name"])
+        
+        # Return all pads
+        return user_pads
     except Exception as e:
         print(f"Error getting pad data: {str(e)}")
         raise HTTPException(status_code=500, detail=f"Failed to get pad data: {str(e)}")
@@ -96,18 +200,30 @@ async def create_pad_from_template(
         if not template:
             raise HTTPException(status_code=404, detail="Template not found")
 
+        # Get the template data
+        template_data = template["data"]
+        
+        # Before creating, ensure the pad object exists in the data
+        template_data = ensure_pad_metadata(template_data, "", "")
+        
         # Create a new pad using the template data
         pad = await pad_service.create_pad(
             owner_id=user.id,
             display_name=display_name,
-            data=template["data"],
+            data=template_data,
             user_session=user
         )
 
+        # Set the uniqueId and displayName to match the database ID and display name
+        template_data = ensure_pad_metadata(template_data, str(pad["id"]), display_name)
+        
+        # Update the pad with the modified data
+        await pad_service.update_pad_data(pad["id"], template_data)
+        
         # Create an initial backup for the new pad
         await backup_service.create_backup_if_needed(
             source_id=pad["id"],
-            data=template["data"],
+            data=template_data,
             min_interval_minutes=0,  # Always create initial backup
             max_backups=MAX_BACKUPS_PER_USER
         )

src/frontend/src/App.tsx

@@ -1,9 +1,17 @@
 import React, { useState, useCallback, useEffect, useRef } from "react";
-import { useCanvas, useDefaultCanvas, useUserProfile } from "./api/hooks";
+import { useAllPads, useUserProfile } from "./api/hooks";
 import { ExcalidrawWrapper } from "./ExcalidrawWrapper";
 import { debounce } from "./utils/debounce";
 import posthog from "./utils/posthog";
-import { normalizeCanvasData } from "./utils/canvasUtils";
+import { 
+  normalizeCanvasData, 
+  getPadData, 
+  storePadData, 
+  setActivePad, 
+  getActivePad,
+  getStoredActivePad,
+  loadPadData
+} from "./utils/canvasUtils";
 import { useSaveCanvas } from "./api/hooks";
 import type * as TExcalidraw from "@atyrode/excalidraw";
 import type { NonDeletedExcalidrawElement } from "@atyrode/excalidraw/element/types";
@@ -28,23 +36,49 @@ export default function App({
   const { data: isAuthenticated, isLoading: isAuthLoading } = useAuthCheck();
   const { data: userProfile } = useUserProfile();
 
-  // Only enable canvas queries if authenticated and not loading
-  const { data: canvasData } = useCanvas({
-    queryKey: ['canvas'],
+  // Only enable pad queries if authenticated and not loading
+  const { data: pads } = useAllPads({
+    queryKey: ['allPads'],
     enabled: isAuthenticated === true && !isAuthLoading,
     retry: 1,
   });
+  
+  // Get the first pad's data to use as the canvas data
+  const canvasData = pads && pads.length > 0 ? pads[0].data : null;
 
   // Excalidraw API ref
   const [excalidrawAPI, setExcalidrawAPI] = useState<ExcalidrawImperativeAPI | null>(null);
   useCustom(excalidrawAPI, customArgs);
   useHandleLibrary({ excalidrawAPI });
 
+  // Using imported functions from canvasUtils.ts
+
   useEffect(() => {
-    if (excalidrawAPI && canvasData) {
-      excalidrawAPI.updateScene(normalizeCanvasData(canvasData));
+    if (excalidrawAPI && pads && pads.length > 0) {
+      // Check if there's a stored active pad ID
+      const storedActivePadId = getStoredActivePad();
+      
+      // Find the pad that matches the stored ID, or use the first pad if no match
+      let padToActivate = pads[0];
+      
+      if (storedActivePadId) {
+        // Try to find the pad with the stored ID
+        const matchingPad = pads.find(pad => pad.id === storedActivePadId);
+        if (matchingPad) {
+          console.debug(`[pad.ws] Found stored active pad in App.tsx: ${storedActivePadId}`);
+          padToActivate = matchingPad;
+        } else {
+          console.debug(`[pad.ws] Stored active pad ${storedActivePadId} not found in available pads`);
+        }
+      }
+      
+      // Set the active pad ID globally
+      setActivePad(padToActivate.id);
+      
+      // Load the pad data for the selected pad
+      loadPadData(excalidrawAPI, padToActivate.id, padToActivate.data);
     }
-  }, [excalidrawAPI, canvasData]);
+  }, [excalidrawAPI, pads]);
 
   const { mutate: saveCanvas } = useSaveCanvas({
     onSuccess: () => {
@@ -72,6 +106,10 @@ export default function App({
       (elements: NonDeletedExcalidrawElement[], state: AppState, files: any) => {
         if (!isAuthenticated) return;
 
+        // Get the active pad ID using the imported function
+        const activePadId = getActivePad();
+        if (!activePadId) return;
+
         const canvasData = {
           elements,
           appState: state,
@@ -81,12 +119,17 @@ export default function App({
         const serialized = JSON.stringify(canvasData);
         if (serialized !== lastSentCanvasDataRef.current) {
           lastSentCanvasDataRef.current = serialized;
+          
+          // Store the canvas data in local storage
+          storePadData(activePadId, canvasData);
+          
+          // Save the canvas data to the server
           saveCanvas(canvasData);
         }
       },
       1200
     ),
-    [saveCanvas, isAuthenticated]
+    [saveCanvas, isAuthenticated, storePadData]
   );
 
   useEffect(() => {