refactor: clean-up unused imports & fix types errors (#100)

* refactor: remove debug log from useAppConfig hook

- Removed the console log statement for 'data' in the useAppConfig hook to clean up the code and improve performance.

* refactor: clean up index.tsx by removing commented-out code

- Removed commented-out PostHogProvider and related code to streamline the index.tsx file.
- Ensured the StrictMode wrapper is correctly applied around the QueryClientProvider and application components for better performance and debugging.

* refactor: clean up import statement in AuthGate.tsx

- Removed unnecessary comment from the import statement for useAppConfig to improve code clarity.

* refactor: simplify handleOnScrollChange function in App component

- Updated the handleOnScrollChange function to remove unnecessary parameters, enhancing code clarity and maintainability.

* chore: add TypeScript types for React and ReactDOM

- Added `@types/react` and `@types/react-dom` as devDependencies in package.json for improved TypeScript support.
- Updated yarn.lock to include the new type definitions and their dependencies.

* refactor: remove hover styles from dropdown menu button in Excalidraw overrides

- Eliminated hover background color styles for the dropdown menu button in the _excalidraw-overrides.scss file to streamline the CSS and improve maintainability.

* refactor: update AuthDialog component and styles

- Removed unnecessary comment from AuthDialog.scss to streamline the styles.
- Changed the type of `warningText` prop in AuthDialog from string to React.ReactNode for better flexibility in rendering content.

* refactor: reorganize imports and enhance MainMenu component

- Moved the import statements for AccountDialog and MainMenu.scss to improve code organization.
- Added spacing for better readability in the MainMenu.tsx file.

* feat: add default CSS variables for consistent styling

- Introduced a new _defaults.scss file to define CSS variables for slider and range track styles.
- Updated index.scss to include the new defaults for improved styling consistency across components.

* refactor: remove CSS variables from Range.scss for cleaner styling

- Eliminated default CSS variables for slider and range track styles from Range.scss to streamline the styling process.
- Added appearance property to the range input for improved cross-browser compatibility.

* refactor: clean up imports in TabContextMenu component

- Removed unused useState import from TabContextMenu.tsx to enhance code clarity and reduce unnecessary dependencies.

* refactor: improve tab title reference assignment in Tabs component

- Updated the ref assignment for tab titles to use a block statement for better readability and consistency in the Tabs.tsx file.

* refactor: enhance type safety in Collab component

- Updated the type casting for user_id in the Collab component to ensure proper type handling of SocketId, improving code reliability and clarity.

* refactor: update App and MainMenu components for settings management

- Removed unused state and handlers related to the SettingsDialog in App.tsx to streamline the component.
- Added state management and conditional rendering for SettingsDialog in MainMenu.tsx, enhancing user experience and functionality.

* refactor: introduce UserSettings type and update constants

- Added UserSettings interface in a new types.ts file to define user settings structure.
- Introduced DEFAULT_SETTINGS constant in constants.ts for default user settings.
- Updated imports in SettingsDialog and canvas files to reference the new constants and types, enhancing code organization and type safety.

* refactor: clean up App component by removing unused settings-related code

- Removed commented-out imports, state, and handlers related to SettingsDialog in App.tsx to streamline the component and improve code clarity.

Author: atyrode

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';
 
 /**
  *