adds settings page (#10)

Author: tariknz

README.md

@@ -152,7 +152,7 @@ Displays a track map with the current position of the cars on track and the trac
 
 We welcome contributions to the IRDashies project! If you have any ideas, suggestions, or bug reports, please open an issue or submit a pull request.
 
-Join our discord here: https://discord.gg/E3KKB6W4
+Join our discord here: https://discord.gg/YMAqduF2Ft
 
 ## License
 

package.json

@@ -3,6 +3,10 @@
   "productName": "irdashies",
   "version": "0.0.7",
   "description": "iRacing Dashboards & Overlays",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tariknz/irdashies"
+  },
   "main": ".vite/build/main.js",
   "scripts": {
     "start": "electron-forge start --enable-logging",

src/app/bridge/dashboard/dashboardBridge.ts

@@ -17,4 +17,8 @@ export async function publishDashboardUpdates(overlayManager: OverlayManager) {
     overlayManager.closeOrCreateWindows(dashboard);
     overlayManager.publishMessage('dashboardUpdated', dashboard);
   });
+
+  ipcMain.handle('toggleLockOverlays', () => {
+    return overlayManager.toggleLockOverlays();
+  });
 }

src/app/bridge/rendererExposeBridge.ts

@@ -45,5 +45,8 @@ export function exposeBridge() {
     saveDashboard: (value: DashboardLayout) => {
       ipcRenderer.send('saveDashboard', value);
     },
+    toggleLockOverlays: () => {
+      return ipcRenderer.invoke('toggleLockOverlays');
+    },
   } as DashboardBridge);
 }

src/frontend/App.tsx

@@ -46,7 +46,7 @@ const AppRoutes = () => {
           />
         );
       })}
-      <Route path="/settings" element={<Settings />} />
+      <Route path="/settings/*" element={<Settings />} />
     </Routes>
   );
 };

src/frontend/components/EditMode/EditMode.stories.tsx

@@ -25,6 +25,7 @@ const mockBridge: (editMode: boolean) => DashboardBridge = (editMode) => ({
   onEditModeToggled: (callback) => {
     callback(editMode);
   },
+  toggleLockOverlays: () => Promise.resolve(true),
 });
 
 export const Primary = {

src/frontend/components/Settings/Settings.tsx

@@ -1,5 +1,5 @@
 import { useDashboard } from '@irdashies/context';
-import { SettingsForm } from './SettingsForm';
+import { SettingsLayout } from './SettingsLayout';
 
 export const Settings = () => {
   const { currentDashboard, onDashboardUpdated } = useDashboard();
@@ -8,9 +8,6 @@ export const Settings = () => {
   }
 
   return (
-    <SettingsForm
-      currentDashboard={currentDashboard}
-      onDashboardUpdated={onDashboardUpdated}
-    />
+    <SettingsLayout />
   );
 };

src/frontend/components/Settings/SettingsForm.stories.tsx

@@ -0,0 +1,58 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { DashboardProvider } from '@irdashies/context';
+import { SettingsLayout } from './SettingsLayout';
+import { mockDashboardBridge } from './__mocks__/mockBridge';
+
+interface StoryProps {
+  initialPath: string;
+}
+
+const meta: Meta<typeof SettingsLayout> = {
+  component: SettingsLayout,
+  decorators: [
+    (Story, context) => {
+      const { initialPath = 'standings' } =
+        context.args as StoryProps;
+      return (
+        <DashboardProvider bridge={mockDashboardBridge}>
+          <MemoryRouter initialEntries={[initialPath]}>
+            <Routes>
+              <Route
+                path="/settings/*"
+                element={
+                  <div style={{ height: '100vh' }}>
+                    <Story />
+                  </div>
+                }
+              />
+            </Routes>
+          </MemoryRouter>
+        </DashboardProvider>
+      );
+    },
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SettingsLayout>;
+
+export const Default: Story = {
+  args: {
+    initialPath: '/settings/standings',
+  },
+};
+
+// Add more stories for different routes
+export const RelativeRoute: Story = {
+  args: {
+    initialPath: '/settings/relative',
+  },
+};
+
+export const WeatherRoute: Story = {
+  args: {
+    initialPath: '/settings/weather',
+  },
+};