feat: add pad backups retrieval functionality

- Implemented a new API endpoint to retrieve backups for a specific pad, including ownership verification and backup data formatting.
- Updated frontend API hooks to support fetching pad backups and integrated this functionality into the BackupsDialog component.
- Enhanced the context menu and tab components to improve user interaction with pad actions and backup management.
- Refactored styles for the tab context menu to improve UI consistency and responsiveness.

Author: atyrode

src/backend/routers/pad_router.py

@@ -237,6 +237,52 @@ async def create_pad_from_template(
         raise HTTPException(status_code=500, detail=f"Failed to create pad from template: {str(e)}")
 
 
+@pad_router.get("/{pad_id}/backups")
+async def get_pad_backups(
+    pad_id: UUID,
+    limit: int = MAX_BACKUPS_PER_USER, 
+    user: UserSession = Depends(require_auth),
+    pad_service: PadService = Depends(get_pad_service),
+    backup_service: BackupService = Depends(get_backup_service)
+):
+    """Get backups for a specific pad"""
+    # Limit the number of backups to the maximum configured value
+    if limit > MAX_BACKUPS_PER_USER:
+        limit = MAX_BACKUPS_PER_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 access this pad's backups")
+        
+        # Get backups for this specific pad
+        backups_data = await backup_service.get_backups_by_source(pad_id)
+        
+        # Limit the number of backups if needed
+        if len(backups_data) > limit:
+            backups_data = backups_data[:limit]
+        
+        # Format backups to match the expected response format
+        backups = []
+        for backup in backups_data:
+            backups.append({
+                "id": backup["id"],
+                "timestamp": backup["created_at"],
+                "data": backup["data"]
+            })
+        
+        return {"backups": backups, "pad_name": pad["display_name"]}
+    except Exception as e:
+        print(f"Error getting pad backups: {str(e)}")
+        raise HTTPException(status_code=500, detail=f"Failed to get pad backups: {str(e)}")
+
+
 @pad_router.get("/recent")
 async def get_recent_canvas_backups(
     limit: int = MAX_BACKUPS_PER_USER, 

src/frontend/src/api/hooks.ts

@@ -46,6 +46,7 @@ export interface CanvasBackup {
 
 export interface CanvasBackupsResponse {
   backups: CanvasBackup[];
+  pad_name?: string;
 }
 
 export interface BuildInfo {
@@ -186,6 +187,15 @@ export const api = {
     }
   },
 
+  getPadBackups: async (padId: string, limit: number = 10): Promise<CanvasBackupsResponse> => {
+    try {
+      const result = await fetchApi(`/api/pad/${padId}/backups?limit=${limit}`);
+      return result;
+    } catch (error) {
+      throw error;
+    }
+  },
+  
   // Build Info
   getBuildInfo: async (): Promise<BuildInfo> => {
     try {
@@ -245,6 +255,15 @@ export function useCanvasBackups(limit: number = 10, options?: UseQueryOptions<C
   });
 }
 
+export function usePadBackups(padId: string | null, limit: number = 10, options?: UseQueryOptions<CanvasBackupsResponse>) {
+  return useQuery({
+    queryKey: ['padBackups', padId, limit],
+    queryFn: () => padId ? api.getPadBackups(padId, limit) : Promise.reject('No pad ID provided'),
+    enabled: !!padId, // Only run the query if padId is provided
+    ...options,
+  });
+}
+
 export function useBuildInfo(options?: UseQueryOptions<BuildInfo>) {
   return useQuery({
     queryKey: ['buildInfo'],
@@ -281,8 +300,14 @@ export function useSaveCanvas(options?: UseMutationOptions<any, Error, CanvasDat
   return useMutation({
     mutationFn: api.saveCanvas,
     onSuccess: () => {
-      // Invalidate canvas backups query to trigger refetch
+      // Get the active pad ID from the global variable
+      const activePadId = (window as any).activePadId;
+      
+      // Invalidate canvas backups queries to trigger refetch
       queryClient.invalidateQueries({ queryKey: ['canvasBackups'] });
+      if (activePadId) {
+        queryClient.invalidateQueries({ queryKey: ['padBackups', activePadId] });
+      }
     },
     ...options,
   });

src/frontend/src/ui/BackupsDialog.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useCallback } from "react";
 import { Dialog } from "@atyrode/excalidraw";
-import { useCanvasBackups, CanvasBackup } from "../api/hooks";
-import { normalizeCanvasData } from "../utils/canvasUtils";
+import { usePadBackups, CanvasBackup } from "../api/hooks";
+import { normalizeCanvasData, getActivePad } from "../utils/canvasUtils";
 import "./BackupsDialog.scss";
 
 interface BackupsModalProps {
@@ -14,7 +14,8 @@ const BackupsModal: React.FC<BackupsModalProps> = ({
   onClose,
 }) => {
   const [modalIsShown, setModalIsShown] = useState(true);
-  const { data, isLoading, error } = useCanvasBackups();
+  const activePadId = getActivePad();
+  const { data, isLoading, error } = usePadBackups(activePadId);
   const [selectedBackup, setSelectedBackup] = useState<CanvasBackup | null>(null);
 
   // Functions from CanvasBackups.tsx
@@ -113,7 +114,9 @@ const BackupsModal: React.FC<BackupsModalProps> = ({
             onCloseRequest={handleClose}
             title={
               <div className="backups-modal__title-container">
-                <h2 className="backups-modal__title">Canvas Backups</h2>
+                <h2 className="backups-modal__title">
+                  {data?.pad_name ? `${data.pad_name} (this pad) - Backups` : 'Canvas Backups'}
+                </h2>
               </div>
             }
             closeOnClickOutside={true}

src/frontend/src/ui/TabContextMenu.scss

@@ -1,52 +1,102 @@
 .tab-context-menu {
   position: fixed;
-  background-color: #fff;
-  border: 1px solid #ccc;
   border-radius: 4px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  min-width: 120px;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
+  padding: 0.5rem 0;
+  list-style: none;
+  user-select: none;
+  margin: -0.25rem 0 0 0.125rem;
+  min-width: 9.5rem;
   z-index: 1000;
+  background-color: var(--popup-secondary-bg-color, #fff);
+  border: 1px solid var(--button-gray-3, #ccc);
+  cursor: default;
+}
+
+.tab-context-menu button {
+  color: var(--popup-text-color, #333);
+}
+
+.tab-context-menu .menu-item {
+  position: relative;
+  width: 100%;
+  min-width: 9.5rem;
+  margin: 0;
+  padding: 0.25rem 1rem 0.25rem 1.25rem;
+  text-align: start;
+  border-radius: 0;
+  background-color: transparent;
+  border: none;
+  white-space: nowrap;
+  font-family: inherit;
+  cursor: pointer;
+
+  display: grid;
+  grid-template-columns: 1fr 0.2fr;
+  align-items: center;
+
+  .menu-item__label {
+    justify-self: start;
+    margin-inline-end: 20px;
+  }
 
-  .menu-item {
-    padding: 8px 12px;
-    cursor: pointer;
-    
-    &:hover {
-      background-color: #f5f5f5;
-    }
-    
-    &.delete {
+  &.delete {
+    .menu-item__label {
       color: #e53935;
-      
-      &:hover {
-        background-color: #ffebee;
-      }
     }
   }
-  
-  form {
-    padding: 8px;
-    display: flex;
-    
-    input {
-      flex: 1;
-      padding: 4px 8px;
-      border: 1px solid #ccc;
-      border-radius: 4px;
-      margin-right: 4px;
+}
+
+.tab-context-menu .menu-item:hover {
+  color: var(--popup-bg-color, #fff);
+  background-color: var(--select-highlight-color, #f5f5f5);
+
+  &.delete {
+    .menu-item__label {
+      color: var(--popup-bg-color, #fff);
     }
+    background-color: #e53935;
+  }
+}
+
+.tab-context-menu .menu-item:focus {
+  z-index: 1;
+}
+
+@media (max-width: 640px) {
+  .tab-context-menu .menu-item {
+    display: block;
+
+    .menu-item__label {
+      margin-inline-end: 0;
+    }
+  }
+}
+
+.tab-context-menu form {
+  padding: 0.5rem 1rem;
+  display: flex;
+  
+  input {
+    flex: 1;
+    padding: 0.25rem 0.5rem;
+    border: 1px solid var(--button-gray-3, #ccc);
+    border-radius: 4px;
+    margin-right: 0.25rem;
+    background-color: var(--input-bg-color, #fff);
+    color: var(--text-color-primary, #333);
+  }
+  
+  button {
+    background-color: var(--color-surface-primary-container, #4285f4);
+    color: var(--color-on-primary-container, white);
+    border: none;
+    border-radius: 4px;
+    padding: 0.25rem 0.5rem;
+    cursor: pointer;
 
-    button {
-      background-color: #4285f4;
-      color: white;
-      border: none;
-      border-radius: 4px;
-      padding: 4px 8px;
-      cursor: pointer;
-      
-      &:hover {
-        background-color: #3367d6;
-      }
+    &:hover {
+      background-color: var(--color-primary-light, #3367d6);
     }
   }
 }

src/frontend/src/ui/TabContextMenu.tsx

@@ -95,10 +95,10 @@ const TabContextMenu: React.FC<TabContextMenuProps> = ({
       ) : (
         <>
           <div className="menu-item" onClick={handleRenameClick}>
-            Rename
+            <span className="menu-item__label">Rename</span>
           </div>
           <div className="menu-item delete" onClick={handleDeleteClick}>
-            Delete
+            <span className="menu-item__label">Delete</span>
           </div>
         </>
       )}

src/frontend/src/ui/Tabs.tsx

@@ -5,13 +5,10 @@ import { Stack, Button, Section, Tooltip } from "@atyrode/excalidraw";
 import { FilePlus2 } from "lucide-react";
 import { useAllPads, useSaveCanvas, useRenamePad, useDeletePad, PadData } from "../api/hooks";
 import { queryClient } from "../api/queryClient";
-import { fetchApi } from "../api/apiUtils";
 import { 
-  normalizeCanvasData, 
   getPadData, 
   storePadData, 
   setActivePad, 
-  getActivePad,
   getStoredActivePad,
   loadPadData,
   saveCurrentPadBeforeSwitching,
@@ -29,7 +26,7 @@ const Tabs: React.FC<TabsProps> = ({
 }: {
   excalidrawAPI: ExcalidrawImperativeAPI;
 }) => {
-    const { data: pads, isLoading, refetch: refetchPads } = useAllPads();
+    const { data: pads, isLoading } = useAllPads();
     const appState = excalidrawAPI.getAppState();
     const [isCreatingPad, setIsCreatingPad] = useState(false);
     const [activePadId, setActivePadId] = useState<string | null>(null);