refactor: remove unused devtools component (#101)

* refactor: clean up useless comments

* refactor: remove DevTools component and related styles

- Deleted the DevTools component and its associated SCSS file to streamline the codebase.
- Updated the CustomEmbeddableRenderer to remove references to DevTools, enhancing clarity and maintainability.
- Removed DevTools entry from the pad index file and MainMenu, simplifying the user interface.

Author: atyrode

src/frontend/src/CustomEmbeddableRenderer.tsx

@@ -9,7 +9,6 @@ import {
   ControlButton,
   Editor,
   Terminal,
-  DevTools,
 } from './pad';
 import { ActionButton } from './pad/buttons';
 import "./CustomEmbeddableRenderer.scss";
@@ -36,7 +35,7 @@ export const renderCustomEmbeddable = (
         title = "HTML Editor";
         break;
       case 'editor':
-        content = <Editor element={element} appState={appState} excalidrawAPI={excalidrawAPI} />;
+        content = <Editor element={element} excalidrawAPI={excalidrawAPI} />;
         title = "Code Editor";
         break;
       case 'terminal':
@@ -64,10 +63,6 @@ export const renderCustomEmbeddable = (
         content = <Dashboard element={element} appState={appState} excalidrawAPI={excalidrawAPI} />;
         title = "Dashboard";
         break;
-      case 'dev':
-        content = <DevTools element={element} appState={appState} excalidrawAPI={excalidrawAPI} />;
-        title = "Dev Tools";
-        break;
       default:
         title = "Untitled";
         return null;

src/frontend/src/pad/DevTools.scss

@@ -33,7 +33,7 @@ export const useHtmlEditor = (
   element: NonDeleted<ExcalidrawEmbeddableElement> | undefined,
   editorRef: React.RefObject<any>,
   excalidrawAPI?: any,
-  isActive: boolean = true // New parameter to control if the hook is active
+  isActive: boolean = true
 ) => {
   // Always initialize these hooks regardless of isActive
   const [createNew, setCreateNew] = useState(false);

src/frontend/src/pad/DevTools.tsx

@@ -5,11 +5,9 @@ export * from './Dashboard';
 export * from './Terminal';
 export * from './buttons';
 export * from './editors';
-export * from './DevTools';
 
 // Default exports
 export { default as ControlButton } from './buttons/ControlButton';
 export { default as StateIndicator } from './StateIndicator';
 export { default as Dashboard } from './Dashboard';
 export { default as Terminal } from './Terminal';
-export { default as DevTools } from './DevTools';

src/frontend/src/pad/editors/HtmlEditor.tsx

@@ -7,7 +7,7 @@ import { LogOut, SquarePlus, LayoutDashboard, User, Text, Settings, Terminal, Fi
 import md5 from 'crypto-js/md5';
 
 // Components
-import SettingsDialog from './SettingsDialog'; // Added import
+import SettingsDialog from './SettingsDialog';
 
 import { useLogout } from '../hooks/useLogout';
 import { useAuthStatus } from '../hooks/useAuthStatus';
@@ -67,22 +67,6 @@ export const MainMenuConfig: React.FC<MainMenuConfigProps> = ({
     });
   };
 
-  const handleDevToolsClick = () => {
-    if (!excalidrawAPI) return;
-    
-    const devToolsElement = ExcalidrawElementFactory.createEmbeddableElement({
-      link: "!dev",
-      width: 800,
-      height: 500
-    });
-    
-    ExcalidrawElementFactory.placeInScene(devToolsElement, excalidrawAPI, {
-      mode: PlacementMode.NEAR_VIEWPORT_CENTER,
-      bufferPercentage: 10,
-      scrollToView: true
-    });
-  };
-
   const handleInsertButtonClick = () => {
     if (!excalidrawAPI) return;
 
@@ -135,7 +119,7 @@ export const MainMenuConfig: React.FC<MainMenuConfigProps> = ({
     setShowSettingsModal(true);
   };
 
-  const handleCloseSettingsModal = () => { // Added handler to close settings modal
+  const handleCloseSettingsModal = () => {
     setShowSettingsModal(false);
   };
 
@@ -151,7 +135,7 @@ export const MainMenuConfig: React.FC<MainMenuConfigProps> = ({
         const keycloakLogoutUrl = data.logout_url;
 
         const createIframeLoader = (url: string, debugName: string): Promise<void> => {
-          return new Promise<void>((resolve, reject) => { // Added reject for error handling
+          return new Promise<void>((resolve, reject) => {
             const iframe = document.createElement("iframe");
             iframe.style.display = "none";
             iframe.src = url;
@@ -204,7 +188,7 @@ export const MainMenuConfig: React.FC<MainMenuConfigProps> = ({
           onClose={() => setShowAccountModal(false)} 
         />
       )}
-      {showSettingsModal && ( // Added conditional rendering for SettingsDialog
+      {showSettingsModal && (
         <SettingsDialog
           excalidrawAPI={excalidrawAPI}
           onClose={handleCloseSettingsModal}
@@ -262,12 +246,6 @@ export const MainMenuConfig: React.FC<MainMenuConfigProps> = ({
         >
           Action Button
         </MainMenu.Item>
-        <MainMenu.Item
-          icon={<FlaskConical />}
-          onClick={handleDevToolsClick}
-        >
-          Dev. Tools
-        </MainMenu.Item>
       </MainMenu.Group>
 
       <MainMenu.Separator />

src/frontend/src/pad/index.ts

@@ -219,7 +219,7 @@ class TabActionManager implements ActionManager {
     onRename: (padId: string, newName: string) => void,
     onDelete: (padId: string) => void, // This is for deleteOwnedPad
     onUpdateSharingPolicy: (padId: string, policy: string) => void,
-    onLeaveSharedPad: (padId: string) => void, // Moved before optional param
+    onLeaveSharedPad: (padId: string) => void,
     sharingPolicy?: string
   ) {
     this.padId = padId;
@@ -244,7 +244,7 @@ class TabActionManager implements ActionManager {
         console.debug('[pad.ws] User confirmed delete, calling onDelete');
         this.onDelete(this.padId); // Calls original onDelete for owned pads
       }
-    } else if (action.name === 'leaveSharedPad') { // New action for leaving
+    } else if (action.name === 'leaveSharedPad') {
       console.debug('[pad.ws] Attempting to leave shared pad:', this.padId, this.padName);
       if (window.confirm(`Are you sure you want to leave "${this.padName}"? This will remove it from your list of open pads.`)) {
         this.onLeaveSharedPad(this.padId); // Calls the new handler

src/frontend/src/ui/MainMenu.tsx

@@ -20,7 +20,7 @@ interface TabsProps {
     createNewPadAsync: () => Promise<Tab | null | undefined>;
     renamePad: (args: { padId: string; newName: string }) => void;
     deletePad: (padId: string) => void;
-    leaveSharedPad: (padId: string) => void; // Added prop
+    leaveSharedPad: (padId: string) => void;
     updateSharingPolicy: (args: { padId: string; policy: string }) => void;
     selectTab: (tabId: string) => void;
 }
@@ -470,7 +470,7 @@ const Tabs: React.FC<TabsProps> = ({
                         }
                         deletePad(padId); // Calls the prop for deleting owned pad
                     }}
-                    onLeaveSharedPad={(padId: string) => { // New prop for 'leaveSharedPad'
+                    onLeaveSharedPad={(padId: string) => {
                         leaveSharedPad(padId); // Calls the prop for leaving shared pad
                     }}
                     onUpdateSharingPolicy={(padId: string, policy: string) => {