feat: implement restore tutorial canvas functionality in SettingsDialog

- Added a confirmation dialog for restoring the tutorial canvas, including warning messages about data loss.
- Implemented the restore functionality with a button that triggers the canvas reset process.
- Enhanced styling for the new buttons and confirmation section in SettingsDialog.scss.

Author: atyrode

src/frontend/src/ui/SettingsDialog.scss

@@ -59,4 +59,78 @@
     margin: 1rem 0;
   }
 
+  &__restore-button {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    background-color: var(--button-bg-color, #cc6d24);
+    border: 1px solid var(--button-border-color, #ddd);
+    border-radius: 4px;
+    color: var(--text-primary-color);
+    cursor: pointer;
+    font-size: 0.9rem;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: var(--button-hover-bg-color, #a4571b);
+    }
+  }
+
+  &__confirmation {
+    padding: 1rem;
+    border-radius: 4px;
+    background-color: var(--dialog-bg-color);
+    border: 1px solid var(--warning-color, #f0ad4e);
+  }
+
+  &__warning {
+    color: var(--warning-color, #f0ad4e);
+    font-weight: bold;
+    margin: 1rem 0;
+  }
+
+  &__actions {
+    display: flex;
+    gap: 8px;
+    margin-top: 1rem;
+  }
+
+  &__button {
+    padding: 8px 16px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.9rem;
+    border: none;
+    transition: background-color 0.2s ease;
+
+    &--restore {
+      background-color: var(--danger-color, #d9534f);
+      color: white;
+
+      &:hover {
+        background-color: var(--danger-hover-color, #c9302c);
+      }
+
+      &:disabled {
+        background-color: var(--disabled-color, #cccccc);
+        cursor: not-allowed;
+      }
+    }
+
+    &--cancel {
+      background-color: var(--button-bg-color, #cc6d24);
+      border: 1px solid var(--button-border-color, #ddd);
+      color: var(--text-primary-color);
+
+      &:hover {
+        background-color: var(--button-hover-bg-color, #a4571b);
+      }
+
+      &:disabled {
+        background-color: var(--disabled-color, #cccccc);
+        cursor: not-allowed;
+      }
+    }
+  }
 }

src/frontend/src/ui/SettingsDialog.tsx

@@ -2,6 +2,9 @@ import React, { useState, useCallback, useEffect } from "react";
 import { Dialog } from "@atyrode/excalidraw";
 import { Range } from "./Range";
 import { UserSettings, DEFAULT_SETTINGS } from "../types/settings";
+import { RefreshCw } from "lucide-react";
+import { normalizeCanvasData } from "../utils/canvasUtils";
+import { capture } from "../utils/posthog";
 import "./SettingsDialog.scss";
 
 interface SettingsDialogProps {
@@ -15,6 +18,8 @@ const SettingsDialog: React.FC<SettingsDialogProps> = ({
 }) => {
   const [modalIsShown, setModalIsShown] = useState(true);
   const [settings, setSettings] = useState<UserSettings>(DEFAULT_SETTINGS);
+  const [showRestoreConfirmation, setShowRestoreConfirmation] = useState(false);
+  const [isRestoring, setIsRestoring] = useState(false);
 
   // Get current settings from excalidrawAPI when component mounts
   useEffect(() => {
@@ -35,6 +40,43 @@ const SettingsDialog: React.FC<SettingsDialogProps> = ({
     }
   }, [onClose]);
 
+  const handleRestoreTutorialCanvas = async () => {
+    if (!excalidrawAPI) return;
+    
+    try {
+      setIsRestoring(true);
+      capture('restore_tutorial_canvas_clicked');
+      
+      // Fetch the default canvas data from the backend
+      const response = await fetch('/api/canvas/default', {
+        method: 'GET',
+        credentials: 'include'
+      });
+      
+      if (!response.ok) {
+        throw new Error(`Failed to fetch default canvas: ${response.statusText}`);
+      }
+      
+      const defaultCanvasData = await response.json();
+      
+      // Normalize the canvas data before updating the scene
+      const normalizedData = normalizeCanvasData(defaultCanvasData);
+      
+      // Update the canvas with the normalized default data
+      excalidrawAPI.updateScene(normalizedData);
+      
+      console.log("Canvas reset to default successfully");
+      
+      // Close the dialog after successful restore
+      handleClose();
+    } catch (error) {
+      console.error("Failed to reset canvas:", error);
+    } finally {
+      setIsRestoring(false);
+      setShowRestoreConfirmation(false);
+    }
+  };
+
   /**
    * Updates a specific setting and syncs it with the excalidraw app state
    * @param key The setting key to update
@@ -92,6 +134,42 @@ const SettingsDialog: React.FC<SettingsDialogProps> = ({
           </div>
         </div>
       </div>
+
+      <div className="settings-dialog__section">
+        <h3 className="settings-dialog__section-title">Canvas Management</h3>
+        {showRestoreConfirmation ? (
+          <div className="settings-dialog__confirmation">
+            <p>Are you sure you want to restore the tutorial canvas?</p>
+            <p className="settings-dialog__warning">This will replace your current canvas and cannot be undone!</p>
+            <div className="settings-dialog__actions">
+              <button 
+                className="settings-dialog__button settings-dialog__button--restore" 
+                onClick={handleRestoreTutorialCanvas}
+                disabled={isRestoring}
+              >
+                {isRestoring ? "Restoring..." : "Yes, Restore"}
+              </button>
+              <button 
+                className="settings-dialog__button settings-dialog__button--cancel" 
+                onClick={() => setShowRestoreConfirmation(false)}
+                disabled={isRestoring}
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        ) : (
+          <div className="settings-dialog__setting">
+            <button 
+              className="settings-dialog__restore-button"
+              onClick={() => setShowRestoreConfirmation(true)}
+            >
+              <RefreshCw size={16} />
+              <span>Restore Tutorial Canvas</span>
+            </button>
+          </div>
+        )}
+      </div>
     </div>
   );