Enhance Excalidraw app: add keyboard shortcut for connection dialog and integrate server settings in the main menu. Update app structure to conditionally render connection dialog based on server configuration.

Author: isaaclins

excalidraw-app/src/App.tsx

@@ -9,25 +9,50 @@ function App() {
   const [serverConfig, setServerConfig] = useState<ServerConfig | null>(null);
 
   useEffect(() => {
-    // Check if we have a saved config
-    const config = getServerConfig();
-    if (config.enabled !== undefined) {
+    // Check if we have a saved config in localStorage
+    const saved = localStorage.getItem('excalidraw-server-config');
+    if (saved) {
       // User has made a choice before, skip dialog
+      const config = getServerConfig();
       setServerConfig(config);
       setShowDialog(false);
     }
+
+    // Add keyboard shortcut to open connection dialog (Cmd/Ctrl + K)
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault();
+        setShowDialog(true);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
   }, []);
 
   const handleConnect = (config: ServerConfig) => {
     setServerConfig(config);
     setShowDialog(false);
   };
 
-  if (showDialog || !serverConfig) {
+  if (!serverConfig) {
     return <ConnectionDialog onConnect={handleConnect} onClose={() => setShowDialog(false)} />;
   }
 
-  return <ExcalidrawWrapper serverConfig={serverConfig} />;
+  return (
+    <>
+      <ExcalidrawWrapper 
+        serverConfig={serverConfig} 
+        onOpenSettings={() => setShowDialog(true)}
+      />
+      {showDialog && (
+        <ConnectionDialog 
+          onConnect={handleConnect} 
+          onClose={() => setShowDialog(false)} 
+        />
+      )}
+    </>
+  );
 }
 
 export default App;

excalidraw-app/src/components/ExcalidrawWrapper.tsx

@@ -1,14 +1,16 @@
-import { Excalidraw } from '@excalidraw/excalidraw';
+import { Excalidraw, MainMenu } from '@excalidraw/excalidraw';
 import { ExcalidrawImperativeAPI } from '@excalidraw/excalidraw/types/types';
 import { useEffect, useRef, useState } from 'react';
 import { ExcalidrawAPI, ServerConfig } from '../lib/api';
 import { localStorage as localStorageAPI } from '../lib/storage';
 import '@excalidraw/excalidraw/index.css';
+
 interface ExcalidrawWrapperProps {
   serverConfig: ServerConfig;
+  onOpenSettings: () => void;
 }
 
-export function ExcalidrawWrapper({ serverConfig }: ExcalidrawWrapperProps) {
+export function ExcalidrawWrapper({ serverConfig, onOpenSettings }: ExcalidrawWrapperProps) {
   const excalidrawRef = useRef<ExcalidrawImperativeAPI>(null);
   const [api, setApi] = useState<ExcalidrawAPI | null>(null);
   const [currentDrawingId, setCurrentDrawingId] = useState<string | null>(null);
@@ -103,7 +105,21 @@ export function ExcalidrawWrapper({ serverConfig }: ExcalidrawWrapperProps) {
         ref={excalidrawRef}
         onChange={handleChange}
         theme="light"
-      />
+      >
+        <MainMenu>
+          <MainMenu.DefaultItems.LoadScene />
+          <MainMenu.DefaultItems.SaveToActiveFile />
+          <MainMenu.DefaultItems.Export />
+          <MainMenu.DefaultItems.SaveAsImage />
+          <MainMenu.Separator />
+          <MainMenu.Item onSelect={onOpenSettings}>
+            🔌 Server Settings
+          </MainMenu.Item>
+          <MainMenu.Separator />
+          <MainMenu.DefaultItems.Help />
+          <MainMenu.DefaultItems.ClearCanvas />
+        </MainMenu>
+      </Excalidraw>
     </div>
   );
 }