feat: add PadsDialog for managing pads

- Introduced a new PadsDialog component to facilitate pad management, including renaming and deleting pads.
- Updated ExcalidrawWrapper and MainMenuConfig to integrate the new PadsDialog, allowing users to access it from the main menu.
- Enhanced the Tabs component to handle active pad changes via custom events, improving synchronization across components.
- Added styles for the PadsDialog to ensure a consistent and user-friendly interface.
- Implemented analytics tracking for pad creation, renaming, and deletion events to enhance user insights.

Author: atyrode

src/frontend/src/ExcalidrawWrapper.tsx

@@ -8,6 +8,7 @@ import { MainMenuConfig } from './ui/MainMenu';
 import { lockEmbeddables, renderCustomEmbeddable } from './CustomEmbeddableRenderer';
 import AuthDialog from './ui/AuthDialog';
 import BackupsModal from './ui/BackupsDialog';
+import PadsDialog from './ui/PadsDialog';
 import SettingsDialog from './ui/SettingsDialog';
 import { capture } from './utils/posthog';
 import { Footer } from '@atyrode/excalidraw';
@@ -53,6 +54,7 @@ export const ExcalidrawWrapper: React.FC<ExcalidrawWrapperProps> = ({
 
   // State for modals
   const [showBackupsModal, setShowBackupsModal] = useState(false);
+  const [showPadsModal, setShowPadsModal] = useState(false);
   const [showSettingsModal, setShowSettingsModal] = useState(false);
 
   // Handle auth state changes
@@ -69,6 +71,10 @@ export const ExcalidrawWrapper: React.FC<ExcalidrawWrapperProps> = ({
     setShowBackupsModal(false);
   };
 
+  const handleClosePadsModal = () => {
+    setShowPadsModal(false);
+  };
+  
   const handleCloseSettingsModal = () => {
     setShowSettingsModal(false);
   };
@@ -119,6 +125,8 @@ export const ExcalidrawWrapper: React.FC<ExcalidrawWrapperProps> = ({
           excalidrawAPI={excalidrawAPI} 
           showBackupsModal={showBackupsModal}
           setShowBackupsModal={setShowBackupsModal}
+          showPadsModal={showPadsModal}
+          setShowPadsModal={setShowPadsModal}
           showSettingsModal={showSettingsModal}
           setShowSettingsModal={setShowSettingsModal}
         />
@@ -135,6 +143,13 @@ export const ExcalidrawWrapper: React.FC<ExcalidrawWrapperProps> = ({
           />
         )}
 
+        {showPadsModal && (
+          <PadsDialog
+            excalidrawAPI={excalidrawAPI}
+            onClose={handleClosePadsModal}
+          />
+        )}
+        
         {showSettingsModal && (
           <SettingsDialog
             excalidrawAPI={excalidrawAPI}

src/frontend/src/ui/MainMenu.tsx

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import type { ExcalidrawImperativeAPI } from '@atyrode/excalidraw/types';
 import type { MainMenu as MainMenuType } from '@atyrode/excalidraw';
 
-import { LogOut, SquarePlus, LayoutDashboard, SquareCode, Eye, Coffee, Grid2x2, User, Text, ArchiveRestore, Settings, Terminal } from 'lucide-react';
+import { LogOut, SquarePlus, LayoutDashboard, SquareCode, Eye, Coffee, Grid2x2, User, Text, ArchiveRestore, Settings, Terminal, FileText } from 'lucide-react';
 import AccountDialog from './AccountDialog';
 import md5 from 'crypto-js/md5';
 import { capture } from '../utils/posthog';
@@ -22,6 +22,8 @@ interface MainMenuConfigProps {
   excalidrawAPI: ExcalidrawImperativeAPI | null;
   showBackupsModal: boolean;
   setShowBackupsModal: (show: boolean) => void;
+  showPadsModal: boolean;
+  setShowPadsModal: (show: boolean) => void;
   showSettingsModal?: boolean;
   setShowSettingsModal?: (show: boolean) => void;
 }
@@ -30,6 +32,7 @@ export const MainMenuConfig: React.FC<MainMenuConfigProps> = ({
   MainMenu,
   excalidrawAPI,
   setShowBackupsModal,
+  setShowPadsModal,
   setShowSettingsModal = (show: boolean) => {},
 }) => {
   const [showAccountModal, setShowAccountModal] = useState(false);
@@ -128,6 +131,10 @@ export const MainMenuConfig: React.FC<MainMenuConfigProps> = ({
   const handleCanvasBackupsClick = () => {
     setShowBackupsModal(true);
   };
+  
+  const handleManagePadsClick = () => {
+    setShowPadsModal(true);
+  };
 
   const handleSettingsClick = () => {
     setShowSettingsModal(true);
@@ -230,6 +237,12 @@ export const MainMenuConfig: React.FC<MainMenuConfigProps> = ({
         <MainMenu.DefaultItems.LoadScene />
         <MainMenu.DefaultItems.Export />
         <MainMenu.DefaultItems.SaveAsImage />
+        <MainMenu.Item
+          icon={<FileText />}
+          onClick={handleManagePadsClick}
+        >
+          Manage pads...
+        </MainMenu.Item>
         <MainMenu.Item
           icon={<ArchiveRestore />}
           onClick={handleCanvasBackupsClick}

src/frontend/src/ui/PadsDialog.scss

@@ -0,0 +1,185 @@
+.pads-dialog {
+  &__wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1000;
+  }
+
+  &__title-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__title {
+    margin: 0;
+    font-size: 1.2rem;
+    font-weight: 600;
+  }
+
+  &__content {
+    padding: 1rem;
+    max-height: 70vh;
+    overflow-y: auto;
+  }
+
+  &__loading,
+  &__error,
+  &__empty {
+    text-align: center;
+    padding: 2rem 0;
+    color: var(--text-primary-color);
+  }
+
+  &__list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  &__item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem;
+    border-radius: 6px;
+    margin-bottom: 0.5rem;
+    background-color: var(--island-bg-color);
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: var(--button-hover-bg);
+    }
+
+    &--active {
+      border-left: 3px solid #cc6d24;
+    }
+  }
+
+  &__item-content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    padding: 0.25rem;
+    border-radius: 4px;
+    transition: background-color 0.2s ease;
+    
+    &--clickable {
+      cursor: pointer;
+      
+      &:hover {
+        background-color: var(--button-hover-bg);
+      }
+    }
+    
+    &--current {
+      cursor: default;
+    }
+  }
+
+  &__name {
+    font-weight: 500;
+    margin-bottom: 0.25rem;
+  }
+
+  &__current {
+    font-weight: normal;
+    font-style: italic;
+    color: #cc6d24;
+  }
+
+  &__timestamps {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+  }
+
+  &__timestamp {
+    font-size: 0.8rem;
+    color: var(--text-secondary-color);
+  }
+
+  &__actions {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  &__icon-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    border-radius: 4px;
+    padding: 0.4rem;
+    cursor: pointer;
+    color: var(--text-primary-color);
+    transition: background-color 0.2s ease, color 0.2s ease;
+
+    &:hover {
+      background-color: var(--button-hover-bg);
+      color: #cc6d24;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      
+      &:hover {
+        background: none;
+        color: var(--text-primary-color);
+      }
+    }
+  }
+
+  &__edit-form {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 0.5rem;
+
+    input {
+      padding: 0.5rem;
+      border-radius: 4px;
+      border: 1px solid var(--button-gray-2);
+      background-color: var(--input-bg-color);
+      color: var(--text-primary-color);
+      font-size: 1rem;
+    }
+  }
+
+  &__edit-actions {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  &__button {
+    padding: 0.4rem 0.8rem;
+    border-radius: 4px;
+    border: none;
+    cursor: pointer;
+    font-size: 0.9rem;
+    transition: background-color 0.2s ease;
+
+    &--save {
+      background-color: #cc6d24;
+      color: white;
+
+      &:hover {
+        background-color: #b05e1f;
+      }
+    }
+
+    &--cancel {
+      background-color: var(--button-gray-2);
+      color: var(--text-primary-color);
+
+      &:hover {
+        background-color: var(--button-gray-3);
+      }
+    }
+  }
+}