refactor: clean-up unused imports & fix types errors

src/frontend/index.scss

@@ -1,6 +1,7 @@
 @import 'src/css/_colors.scss';
 @import 'src/css/_excalidraw-overrides.scss';
 @import 'src/css/_fonts.scss';
+@import 'src/css/_defaults.scss';
 
 /* Makes excalidraw fill the entire screen */
 #root {

src/frontend/index.tsx

@@ -1,34 +1,28 @@
 import React, { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
-// import posthog from "./src/lib/posthog";
-// import { PostHogProvider } from 'posthog-js/react';
-
 import "@atyrode/excalidraw/index.css";
 import "./index.scss";
 
 import App from "./src/App";
 import AuthGate from "./src/AuthGate";
 
-
-// Create a client
 const queryClient = new QueryClient();
 
 async function initApp() {
   const rootElement = document.getElementById("root")!;
   const root = createRoot(rootElement);
   root.render(
-    // <StrictMode>
+    <StrictMode>
       <QueryClientProvider client={queryClient}>
-        {/* <PostHogProvider client={posthog}> */}
-            <AuthGate />
-            <App />
-        {/* </PostHogProvider> */}
+          <AuthGate />
+          <App />
         <ReactQueryDevtools initialIsOpen={false} />
       </QueryClientProvider>
-    // </StrictMode>,
+    </StrictMode>,
   );
 }
 

src/frontend/package.json

@@ -26,6 +26,8 @@
   },
   "devDependencies": {
     "@types/node": "^22.14.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "typescript": "^5",
     "vite": "5.2.0"
   },

src/frontend/src/App.tsx

@@ -13,7 +13,6 @@ import { useAppConfig } from "./hooks/useAppConfig";
 import DiscordButton from './ui/DiscordButton';
 import { MainMenuConfig } from './ui/MainMenu';
 import AuthDialog from './ui/AuthDialog';
-import SettingsDialog from './ui/SettingsDialog';
 import Collab from './lib/collab/Collab';
 
 // Utils
@@ -39,15 +38,9 @@ export default function App() {
     leaveSharedPad
   } = usePadTabs(isAuthenticated);
 
-  const [showSettingsModal, setShowSettingsModal] = useState(false);
   const [excalidrawAPI, excalidrawRefCallback] = useCallbackRefState<ExcalidrawImperativeAPI>();
 
-
-  const handleCloseSettingsModal = () => {
-    setShowSettingsModal(false);
-  };
-
-  const handleOnScrollChange = (scrollX: number, scrollY: number) => {
+  const handleOnScrollChange = () => {
     lockEmbeddables(excalidrawAPI?.getAppState());
   };
 
@@ -84,19 +77,10 @@ export default function App() {
         <MainMenuConfig
           MainMenu={MainMenu}
           excalidrawAPI={excalidrawAPI}
-          showSettingsModal={showSettingsModal}
-          setShowSettingsModal={setShowSettingsModal}
         />
 
         {!isLoadingAuth && !isAuthenticated && (
-          <AuthDialog onClose={() => { }} />
-        )}
-
-        {showSettingsModal && (
-          <SettingsDialog
-            excalidrawAPI={excalidrawAPI}
-            onClose={handleCloseSettingsModal}
-          />
+          <AuthDialog />
         )}
 
         {excalidrawAPI && (

src/frontend/src/AuthGate.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
-import { useAppConfig } from "./hooks/useAppConfig"; // Import useAppConfig
+import { useAppConfig } from "./hooks/useAppConfig";
 import { useAuthStatus } from "./hooks/useAuthStatus";
 
 /**

src/frontend/src/constants.ts

@@ -1,3 +1,5 @@
+import { UserSettings } from "./ui/types";
+
 // Default app values
 export const INITIAL_APP_DATA = {
     appState: {
@@ -24,3 +26,8 @@ export const HIDDEN_UI_ELEMENTS = {
 export const POINTER_MOVE_THROTTLE_MS = 30; // Throttle pointer move events to reduce the number of updates sent to the server
 export const ENABLE_PERIODIC_FULL_SYNC = false; // Set to false to disable periodic scene_update full sync
 export const PERIODIC_FULL_SYNC_INTERVAL_MS = 60000; // Sync scene_update every 60 seconds if ENABLE_PERIODIC_FULL_SYNC is true
+
+// Pad constants
+export const DEFAULT_SETTINGS: UserSettings = {
+    embedLockDebounceTime: 350,
+  };

src/frontend/src/css/_defaults.scss

@@ -0,0 +1,6 @@
+:root {
+    --slider-thumb-size: 16px;
+    --range-track-filled: #{$accent};
+    --range-track-unfilled: #{$grey-800};
+    --range-thumb-color: #{$accent-dark};
+  }

src/frontend/src/css/_excalidraw-overrides.scss

@@ -48,12 +48,6 @@
     --color-surface-primary-container: #{$accent-light} !important;
     --color-selection: #{$accent-lighter} !important;
 
-    .dropdown-menu-button {
-        &:hover {
-            background-color: $accent-faded-light !important;
-        }
-    }
-
     .dropdown-menu-group-title {
         color: $accent-lighter !important;
     }
@@ -67,11 +61,6 @@
     --color-surface-primary-container: #{$accent} !important;
     --color-selection: #{$accent-darker} !important;
 
-    .dropdown-menu-button {
-        &:hover {
-            background-color: $accent-faded-dark !important;
-        }
-    }
     .dropdown-menu-group-title {
         color: $accent-darker !important;
     }

src/frontend/src/hooks/useAppConfig.ts

@@ -32,7 +32,6 @@ export const useAppConfig = () => {
     gcTime: Infinity, // Renamed from cacheTime in v5
   });
 
-  console.log('data', data);
   return {
     config: data,
     isLoadingConfig: isLoading,

src/frontend/src/lib/canvas.ts

@@ -1,4 +1,4 @@
-import { DEFAULT_SETTINGS } from '../types/settings';
+import { DEFAULT_SETTINGS } from '../constants';
 
 /**
  * 

src/frontend/src/lib/collab/Collab.tsx

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import type { ExcalidrawImperativeAPI, AppState, SocketId, Collaborator as ExcalidrawCollaboratorType } from '@atyrode/excalidraw/types';
 import type { ExcalidrawElement as ExcalidrawElementType } from '@atyrode/excalidraw/element/types';
 import {
@@ -490,13 +490,13 @@ class Collab extends PureComponent<CollabProps, CollabState> {
         if (messageData.button) pointerDataIn.button = messageData.button;
         this.setState(prevState => {
           const newCollaborators = new Map(prevState.collaborators);
-          const existing = newCollaborators.get(user_id);
+          const existing = newCollaborators.get(user_id as SocketId);
           const updatedCollaborator: Collaborator = {
             ...(existing as Collaborator),
             pointer: pointerDataIn,
             button: pointerDataIn.button
           };
-          newCollaborators.set(user_id, updatedCollaborator);
+          newCollaborators.set(user_id as SocketId, updatedCollaborator);
           return { collaborators: newCollaborators };
         });
         break;

src/frontend/src/ui/AuthDialog.scss

@@ -1,5 +1,3 @@
-/* Auth Modal Styles */
-
 .excalidraw .Dialog--fullscreen {
   &.auth-modal {
     .Dialog__close {

src/frontend/src/ui/AuthDialog.tsx

@@ -1,21 +1,21 @@
 import React, { useMemo, useEffect } from "react";
+
+import { Dialog } from "@atyrode/excalidraw";
+
 import { capture } from "../lib/posthog";
 import { GoogleIcon, GithubIcon } from "../icons";
 import "./AuthDialog.scss";
 
-import { Dialog } from "@atyrode/excalidraw";
 
 interface AuthDialogProps {
   description?: React.ReactNode;
-  warningText?: string;
-  onClose?: () => void;
+  warningText?: React.ReactNode;
   children?: React.ReactNode;
 }
 
 export const AuthDialog = ({
   description = <>Welcome to your <strong className="highlight">whiteboard IDE</strong>. <br /><br /> Open <strong className="highlight">terminals</strong>, <strong className="highlight">VSCode</strong>, or <strong className="highlight">Cursor</strong> in your pad, and start coding right away.</>,
   warningText = <>This is an open-source project in beta.<br /> Back up your work!</>,
-  onClose,
   children,
 }: AuthDialogProps) => {
   const logoMessages = [

src/frontend/src/ui/MainMenu.tsx

@@ -4,35 +4,39 @@ import type { ExcalidrawImperativeAPI } from '@atyrode/excalidraw/types';
 import type { MainMenu as MainMenuType } from '@atyrode/excalidraw';
 
 import { LogOut, SquarePlus, LayoutDashboard, User, Text, Settings, Terminal, FileText, FlaskConical } from 'lucide-react';
-import AccountDialog from './AccountDialog';
 import md5 from 'crypto-js/md5';
+
+// Components
+import SettingsDialog from './SettingsDialog'; // Added import
+
 import { useLogout } from '../hooks/useLogout';
 import { useAuthStatus } from '../hooks/useAuthStatus';
+
 import { ExcalidrawElementFactory, PlacementMode } from '../lib/elementFactory';
-import "./MainMenu.scss";
 import { INITIAL_APP_DATA } from '../constants';
 import { capture } from '../lib/posthog';
+import "./MainMenu.scss";
+import AccountDialog from './AccountDialog';
+
+
 // Function to generate gravatar URL
 const getGravatarUrl = (email: string, size = 32) => {
   const hash = md5(email.toLowerCase().trim()).toString();
   return `https://www.gravatar.com/avatar/${hash}?s=${size}&d=identicon`;
 };
+
 interface MainMenuConfigProps {
   MainMenu: typeof MainMenuType;
   excalidrawAPI: ExcalidrawImperativeAPI | null;
-  showPadsModal: boolean;
-  setShowPadsModal: (show: boolean) => void;
-  showSettingsModal?: boolean;
-  setShowSettingsModal?: (show: boolean) => void;
 }
 
 export const MainMenuConfig: React.FC<MainMenuConfigProps> = ({
   MainMenu,
   excalidrawAPI,
-  setShowPadsModal,
-  setShowSettingsModal = (show: boolean) => {},
 }) => {
   const [showAccountModal, setShowAccountModal] = useState(false);
+  const [showSettingsModal, setShowSettingsModal] = useState(false);
+
   const { mutate: logoutMutation, isPending: isLoggingOut } = useLogout();
   const { user, isLoading, isError } = useAuthStatus();
 
@@ -127,13 +131,13 @@ export const MainMenuConfig: React.FC<MainMenuConfigProps> = ({
     });
   };
 
-  const handleManagePadsClick = () => {
-    setShowPadsModal(true);
-  };
-
   const handleSettingsClick = () => {
     setShowSettingsModal(true);
   };
+
+  const handleCloseSettingsModal = () => { // Added handler to close settings modal
+    setShowSettingsModal(false);
+  };
 
   const handleAccountClick = () => {
     setShowAccountModal(true);
@@ -200,6 +204,12 @@ export const MainMenuConfig: React.FC<MainMenuConfigProps> = ({
           onClose={() => setShowAccountModal(false)} 
         />
       )}
+      {showSettingsModal && ( // Added conditional rendering for SettingsDialog
+        <SettingsDialog
+          excalidrawAPI={excalidrawAPI}
+          onClose={handleCloseSettingsModal}
+        />
+      )}
       <MainMenu>
         <div className="main-menu__top-row">
           <span className="main-menu__label" style={{ gap: 0.2 }}>
@@ -222,12 +232,6 @@ 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.DefaultItems.ClearCanvas />
       </MainMenu.Group>
 

src/frontend/src/ui/Range.scss

@@ -1,10 +1,3 @@
-:root {
-  --slider-thumb-size: 16px;
-  --range-track-filled: #cc6d24;
-  --range-track-unfilled: #525252;
-  --range-thumb-color: #a4571b; /* Slightly lighter than track-filled for contrast */
-}
-
 .range {
   &__control-label {
     display: flex;
@@ -25,6 +18,7 @@
     width: 100%;
     height: 4px;
     -webkit-appearance: none;
+    appearance: none;
     background: var(--range-track-filled);
     border-radius: 2px;
     outline: none;

src/frontend/src/ui/SettingsDialog.tsx

@@ -1,8 +1,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 { capture } from "../lib/posthog";
+import { UserSettings } from "./types";
+import { DEFAULT_SETTINGS } from "../constants";
+
 import "./SettingsDialog.scss";
 
 interface SettingsDialogProps {

src/frontend/src/ui/TabContextMenu.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useRef, useEffect } from 'react';
 import clsx from 'clsx';
 
 import './TabContextMenu.scss';

src/frontend/src/ui/Tabs.tsx

@@ -357,7 +357,7 @@ const Tabs: React.FC<TabsProps> = ({
                                                                 children={
                                                                     <div className="tab-content">
                                                                         <span 
-                                                                            ref={el => titleRefs.current[tab.id] = el}
+                                                                            ref={el => { titleRefs.current[tab.id] = el; }}
                                                                             className={`tab-title ${overflowMap[tab.id] ? 'tab-title-overflow' : ''}`}
                                                                         >
                                                                             {selectedTabId === tab.id && displayPadLoadingIndicator ? "..." : tab.title}
@@ -379,7 +379,7 @@ const Tabs: React.FC<TabsProps> = ({
                                                         children={
                                                             <div className="tab-content">
                                                                 <span 
-                                                                    ref={el => titleRefs.current[tab.id] = el}
+                                                                    ref={el => { titleRefs.current[tab.id] = el; }}
                                                                     className={`tab-title ${overflowMap[tab.id] ? 'tab-title-overflow' : ''}`}
                                                                 >
                                                                     {tab.title}

src/frontend/src/types/settings.ts → src/frontend/src/ui/types.ts

@@ -10,7 +10,3 @@ export interface UserSettings {
    */
   embedLockDebounceTime?: number;
 }
-
-export const DEFAULT_SETTINGS: UserSettings = {
-  embedLockDebounceTime: 350, // Default value from CustomEmbeddableRenderer.tsx
-};