refactor: remove CanvasBackups.tsx component and integrate BackupsDialog

- Deleted the CanvasBackups component and its associated files to streamline the codebase.
- Updated the MainMenu to use the new BackupsDialog component for managing canvas backups.
- Introduced new styles for the BackupsDialog to enhance the user interface and experience.

Author: atyrode

src/frontend/src/CustomEmbeddableRenderer.tsx

@@ -7,7 +7,6 @@ import {
   ControlButton,
   HtmlEditor,
   Editor,
-  CanvasBackups
 } from './pad';
 import { ActionButton } from './pad/buttons';
 
@@ -38,8 +37,6 @@ export const renderCustomEmbeddable = (
         />;
       case 'dashboard':
         return <Dashboard element={element} appState={appState} excalidrawAPI={excalidrawAPI} />;
-      case 'backups':
-        return <CanvasBackups element={element} appState={appState} excalidrawAPI={excalidrawAPI} />;
       default:
         return null;
     }

src/frontend/src/pad/backups/CanvasBackups.tsx

@@ -4,10 +4,8 @@ export * from './controls/StateIndicator';
 export * from './containers/Dashboard';
 export * from './buttons';
 export * from './editors';
-export * from './backups';
 
 // Default exports
 export { default as ControlButton } from './controls/ControlButton';
 export { default as StateIndicator } from './controls/StateIndicator';
 export { default as Dashboard } from './containers/Dashboard';
-export { default as CanvasBackups } from './backups/CanvasBackups';

src/frontend/src/pad/backups/index.ts

@@ -1,4 +1,25 @@
 .backups-modal {
+  .Island {
+    padding-top: 15px !important;
+    padding-bottom: 20px !important;
+  }
+
+  &__wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 5;
+    background-color: rgba(0, 0, 0, 0.2);
+    backdrop-filter: blur(1px);
+  }
+
+  &__title-container {
+    display: flex;
+    align-items: center;
+  }
+
   &__content {
     padding: 20px;
     max-height: 80vh;
@@ -33,7 +54,7 @@
   }
 
   &__title {
-    margin: 0 0 1rem;
+    margin: 0;
     font-size: 1.2rem;
     font-weight: 500;
     color: #ffffff;

src/frontend/src/pad/index.ts

@@ -0,0 +1,126 @@
+import React, { useState, useCallback } from "react";
+import { Dialog } from "@atyrode/excalidraw";
+import { useCanvasBackups, CanvasBackup } from "../api/hooks";
+import "../styles/BackupsDialog.scss";
+
+interface BackupsModalProps {
+  excalidrawAPI?: any;
+  onClose?: () => void;
+}
+
+const BackupsModal: React.FC<BackupsModalProps> = ({
+  excalidrawAPI,
+  onClose,
+}) => {
+  const [modalIsShown, setModalIsShown] = useState(true);
+  const { data, isLoading, error } = useCanvasBackups();
+  const [selectedBackup, setSelectedBackup] = useState<CanvasBackup | null>(null);
+
+  // Functions from CanvasBackups.tsx
+  const handleBackupSelect = (backup: CanvasBackup) => {
+    setSelectedBackup(backup);
+  };
+
+  const handleRestoreBackup = () => {
+    if (selectedBackup && excalidrawAPI) {
+      // Load the backup data into the canvas
+      excalidrawAPI.updateScene(selectedBackup.data);
+      setSelectedBackup(null);
+      handleClose();
+    }
+  };
+
+  const handleCancel = () => {
+    setSelectedBackup(null);
+  };
+
+  // Format date function from CanvasBackups.tsx
+  const formatDate = (dateString: string): string => {
+    const date = new Date(dateString);
+    return date.toLocaleString(undefined, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+  };
+
+  const handleClose = useCallback(() => {
+    setModalIsShown(false);
+    if (onClose) {
+      onClose();
+    }
+  }, [onClose]);
+
+  // Dialog content
+  const dialogContent = (
+    <div className="backups-modal__content">
+      {isLoading ? (
+        <div className="backups-modal__loading">Loading backups...</div>
+      ) : error ? (
+        <div className="backups-modal__error">Error loading backups</div>
+      ) : !data || data.backups.length === 0 ? (
+        <div className="backups-modal__empty">No backups available</div>
+      ) : selectedBackup ? (
+        <div className="backups-modal__confirmation">
+          <p>Restore canvas from backup #{data.backups.findIndex(b => b.id === selectedBackup.id) + 1} created on {formatDate(selectedBackup.timestamp)}?</p>
+          <p className="backups-modal__warning">This will replace your current canvas!</p>
+          <div className="backups-modal__actions">
+            <button 
+              className="backups-modal__button backups-modal__button--restore" 
+              onClick={handleRestoreBackup}
+            >
+              Restore
+            </button>
+            <button 
+              className="backups-modal__button backups-modal__button--cancel" 
+              onClick={handleCancel}
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      ) : (
+        <ul className="backups-modal__list">
+          {data.backups.map((backup, index) => (
+            <li 
+              key={backup.id} 
+              className="backups-modal__item"
+              onClick={() => handleBackupSelect(backup)}
+            >
+              <div className="backups-modal__item-content">
+                <span className="backups-modal__number">#{index + 1}</span>
+                <span className="backups-modal__timestamp">{formatDate(backup.timestamp)}</span>
+              </div>
+              <button className="backups-modal__restore-button">Restore</button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+
+  return (
+    <>
+      {modalIsShown && (
+        <div className="backups-modal__wrapper">
+          <Dialog
+            className="backups-modal"
+            size="small"
+            onCloseRequest={handleClose}
+            title={
+              <div className="backups-modal__title-container">
+                <h2 className="backups-modal__title">Canvas Backups</h2>
+              </div>
+            }
+            closeOnClickOutside={false}
+            children={dialogContent}
+          />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default BackupsModal;