From 433f2259687b6176f1a5b30e2e36bbdfb714e2ee Mon Sep 17 00:00:00 2001
From: Tarik Alani <tarik.alani@dronedeploy.com>
Date: Thu, 24 Apr 2025 11:13:36 +1200
Subject: [PATCH 01/13] add settings ui

---
 src/frontend/components/Settings/Settings.tsx | 10 ++-
 .../Settings/SettingsLayout.stories.tsx       | 24 ++++++
 .../components/Settings/SettingsLayout.tsx    | 86 +++++++++++++++++++
 .../Settings/__mocks__/mockBridge.ts          | 15 ++++
 .../components/BaseSettingsSection.tsx        | 44 ++++++++++
 .../Settings/components/ToggleSwitch.tsx      | 28 ++++++
 .../Settings/sections/AdvancedSettings.tsx    | 59 +++++++++++++
 .../Settings/sections/RelativeSettings.tsx    | 24 ++++++
 .../Settings/sections/StandingsSettings.tsx   | 24 ++++++
 .../Settings/sections/TrackMapSettings.tsx    | 27 ++++++
 .../Settings/sections/WeatherSettings.tsx     | 24 ++++++
 .../components/Settings/sections/index.ts     |  5 ++
 src/frontend/components/Settings/types.ts     | 23 +++++
 .../Standings/DynamicTelemetrySelector.tsx    |  3 +
 .../components/Standings/Relative.stories.tsx |  2 +-
 .../components/Standings/Relative.tsx         |  2 +-
 .../Standings/Standings.stories.tsx           |  2 +-
 17 files changed, 395 insertions(+), 7 deletions(-)
 create mode 100644 src/frontend/components/Settings/SettingsLayout.stories.tsx
 create mode 100644 src/frontend/components/Settings/SettingsLayout.tsx
 create mode 100644 src/frontend/components/Settings/__mocks__/mockBridge.ts
 create mode 100644 src/frontend/components/Settings/components/BaseSettingsSection.tsx
 create mode 100644 src/frontend/components/Settings/components/ToggleSwitch.tsx
 create mode 100644 src/frontend/components/Settings/sections/AdvancedSettings.tsx
 create mode 100644 src/frontend/components/Settings/sections/RelativeSettings.tsx
 create mode 100644 src/frontend/components/Settings/sections/StandingsSettings.tsx
 create mode 100644 src/frontend/components/Settings/sections/TrackMapSettings.tsx
 create mode 100644 src/frontend/components/Settings/sections/WeatherSettings.tsx
 create mode 100644 src/frontend/components/Settings/sections/index.ts
 create mode 100644 src/frontend/components/Settings/types.ts

diff --git a/src/frontend/components/Settings/Settings.tsx b/src/frontend/components/Settings/Settings.tsx
index 9c0723c..188399c 100644
--- a/src/frontend/components/Settings/Settings.tsx
+++ b/src/frontend/components/Settings/Settings.tsx
@@ -1,5 +1,6 @@
 import { useDashboard } from '@irdashies/context';
 import { SettingsForm } from './SettingsForm';
+import { SettingsLayout } from './SettingsLayout';
 
 export const Settings = () => {
   const { currentDashboard, onDashboardUpdated } = useDashboard();
@@ -8,9 +9,10 @@ export const Settings = () => {
   }
 
   return (
-    <SettingsForm
-      currentDashboard={currentDashboard}
-      onDashboardUpdated={onDashboardUpdated}
-    />
+    <SettingsLayout />
+    // <SettingsForm
+    //   currentDashboard={currentDashboard}
+    //   onDashboardUpdated={onDashboardUpdated}
+    // />
   );
 };
diff --git a/src/frontend/components/Settings/SettingsLayout.stories.tsx b/src/frontend/components/Settings/SettingsLayout.stories.tsx
new file mode 100644
index 0000000..5098775
--- /dev/null
+++ b/src/frontend/components/Settings/SettingsLayout.stories.tsx
@@ -0,0 +1,24 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { HashRouter } from 'react-router-dom';
+import { DashboardProvider } from '@irdashies/context';
+import { SettingsLayout } from './SettingsLayout';
+import { mockDashboardBridge } from './__mocks__/mockBridge';
+
+const meta: Meta<typeof SettingsLayout> = {
+  component: SettingsLayout,
+  decorators: [
+    (Story) => (
+      <DashboardProvider bridge={mockDashboardBridge}>
+        <HashRouter>
+          <div style={{ height: '100vh' }}>
+            <Story />
+          </div>
+        </HashRouter>
+      </DashboardProvider>
+    ),
+  ],
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof SettingsLayout> = {};
diff --git a/src/frontend/components/Settings/SettingsLayout.tsx b/src/frontend/components/Settings/SettingsLayout.tsx
new file mode 100644
index 0000000..4c40c9b
--- /dev/null
+++ b/src/frontend/components/Settings/SettingsLayout.tsx
@@ -0,0 +1,86 @@
+import { Gear } from '@phosphor-icons/react';
+import { Link, Route, Routes, useLocation } from 'react-router-dom';
+import { StandingsSettings } from './sections/StandingsSettings';
+import { RelativeSettings } from './sections/RelativeSettings';
+import { WeatherSettings } from './sections/WeatherSettings';
+import { TrackMapSettings } from './sections/TrackMapSettings';
+import { AdvancedSettings } from './sections/AdvancedSettings';
+
+export const SettingsLayout = () => {
+  const location = useLocation();
+
+  const isActive = (path: string) => {
+    return location.pathname === `/settings${path}`;
+  };
+
+  const menuItemClass = (path: string) =>
+    `block w-full p-2 rounded cursor-pointer ${
+      isActive(path) ? 'bg-slate-700' : 'hover:bg-slate-700'
+    }`;
+
+  return (
+    <div className="flex flex-col gap-4 bg-slate-700 p-4 rounded-md w-full h-full">
+      <div className="flex flex-row gap-4 items-center">
+        <Gear size={32} weight="bold" />
+        <h1 className="text-2xl font-bold">Overlay Setup</h1>
+      </div>
+      <div className="flex flex-row gap-4 flex-1">
+        {/* Left Column - Widget Menu */}
+        <div className="w-1/3 bg-slate-800 p-4 rounded-md flex flex-col">
+          <ul className="flex flex-col gap-2 flex-1">
+            <li>
+              <Link to="/settings/standings" className={menuItemClass('/standings')}>
+                Standings
+              </Link>
+            </li>
+            <li>
+              <Link to="/settings/relative" className={menuItemClass('/relative')}>
+                Relative
+              </Link>
+            </li>
+            <li>
+              <Link to="/settings/weather" className={menuItemClass('/weather')}>
+                Weather
+              </Link>
+            </li>
+            <li>
+              <Link to="/settings/track-map" className={menuItemClass('/track-map')}>
+                <div className="flex flex-row gap-2 items-center">
+                  Track Map
+                  <span className="text-xs bg-yellow-600 text-yellow-100 px-2 py-0.5 rounded-full flex flex-row gap-1 items-center">
+                    Experimental
+                  </span>
+                </div>
+              </Link>
+            </li>
+          </ul>
+          {/* Advanced settings pushed to bottom */}
+          <div className="mt-auto pt-4 border-t border-slate-700">
+            <Link to="/settings/advanced" className={menuItemClass('/advanced')}>
+              Advanced
+            </Link>
+          </div>
+        </div>
+
+        {/* Right Column - Widget Settings */}
+        <div className="w-2/3 bg-slate-800 p-4 rounded-md">
+          <Routes>
+            <Route path="/settings/standings" element={<StandingsSettings />} />
+            <Route path="/settings/relative" element={<RelativeSettings />} />
+            <Route path="/settings/weather" element={<WeatherSettings />} />
+            <Route path="/settings/track-map" element={<TrackMapSettings />} />
+            <Route path="/settings/advanced" element={<AdvancedSettings />} />
+            <Route
+              path="*"
+              element={
+                <div className="text-slate-400">
+                  Select a widget from the left to customize its settings
+                </div>
+              }
+            />
+          </Routes>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/frontend/components/Settings/__mocks__/mockBridge.ts b/src/frontend/components/Settings/__mocks__/mockBridge.ts
new file mode 100644
index 0000000..a739c37
--- /dev/null
+++ b/src/frontend/components/Settings/__mocks__/mockBridge.ts
@@ -0,0 +1,15 @@
+import type { DashboardBridge } from '@irdashies/types';
+import { defaultDashboard } from '../../../../app/storage/defaultDashboard';
+
+export const mockDashboardBridge: DashboardBridge = {
+  reloadDashboard: () => {},
+  saveDashboard: () => {},
+  dashboardUpdated: (callback) => {
+    callback(defaultDashboard);
+    return () => {};
+  },
+  onEditModeToggled: (callback) => {
+    callback(false);
+    return () => {};
+  },
+}; 
\ No newline at end of file
diff --git a/src/frontend/components/Settings/components/BaseSettingsSection.tsx b/src/frontend/components/Settings/components/BaseSettingsSection.tsx
new file mode 100644
index 0000000..3056a78
--- /dev/null
+++ b/src/frontend/components/Settings/components/BaseSettingsSection.tsx
@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+import { ToggleSwitch } from './ToggleSwitch';
+import { BaseWidgetSettings } from '../types';
+
+interface BaseSettingsSectionProps {
+  title: string;
+  description: string;
+  settings: BaseWidgetSettings;
+  onSettingsChange: (settings: BaseWidgetSettings) => void;
+  children?: ReactNode;
+}
+
+export const BaseSettingsSection = ({
+  title,
+  description,
+  settings,
+  onSettingsChange,
+  children,
+}: BaseSettingsSectionProps) => {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-xl mb-4">{title}</h2>
+        <p className="text-slate-400">{description}</p>
+      </div>
+
+      <div className="space-y-4">
+        <div className="border-b border-slate-700 pb-4">
+          <ToggleSwitch
+            enabled={settings.enabled}
+            onToggle={(enabled) => onSettingsChange({ ...settings, enabled })}
+            label="Enable Widget"
+          />
+        </div>
+
+        {children && (
+          <div className="pt-4 space-y-4">
+            {children}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}; 
\ No newline at end of file
diff --git a/src/frontend/components/Settings/components/ToggleSwitch.tsx b/src/frontend/components/Settings/components/ToggleSwitch.tsx
new file mode 100644
index 0000000..2325302
--- /dev/null
+++ b/src/frontend/components/Settings/components/ToggleSwitch.tsx
@@ -0,0 +1,28 @@
+interface ToggleSwitchProps {
+  enabled: boolean;
+  onToggle: (enabled: boolean) => void;
+  label?: string;
+}
+
+export const ToggleSwitch = ({ enabled, onToggle, label }: ToggleSwitchProps) => {
+  return (
+    <div className="flex items-center gap-3">
+      <button
+        type="button"
+        role="switch"
+        aria-checked={enabled}
+        onClick={() => onToggle(!enabled)}
+        className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${
+          enabled ? 'bg-blue-600' : 'bg-slate-600'
+        }`}
+      >
+        <span
+          className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+            enabled ? 'translate-x-6' : 'translate-x-1'
+          }`}
+        />
+      </button>
+      {label && <span className="text-sm text-slate-200">{label}</span>}
+    </div>
+  );
+}; 
\ No newline at end of file
diff --git a/src/frontend/components/Settings/sections/AdvancedSettings.tsx b/src/frontend/components/Settings/sections/AdvancedSettings.tsx
new file mode 100644
index 0000000..e4551de
--- /dev/null
+++ b/src/frontend/components/Settings/sections/AdvancedSettings.tsx
@@ -0,0 +1,59 @@
+import { useState } from 'react';
+import { SettingsForm } from '../SettingsForm';
+import { useDashboard } from '@irdashies/context';
+import { DashboardLayout } from '@irdashies/types';
+
+export const AdvancedSettings = () => {
+  const { currentDashboard, onDashboardUpdated } = useDashboard();
+  const [dashboardInput, setDashboardInput] = useState<string | undefined>(
+    JSON.stringify(currentDashboard, undefined, 2)
+  );
+
+  if (!currentDashboard || !onDashboardUpdated) {
+    return <>Loading...</>;
+  }
+
+  const onInputUpdated = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setDashboardInput(e.target.value);
+  };
+
+  const handleSave = () => {
+    if (!dashboardInput) {
+      return;
+    }
+
+    try {
+      const dashboard = JSON.parse(dashboardInput);
+      onDashboardUpdated(dashboard);
+    } catch (e) {
+      console.error(e);
+      alert('Invalid JSON format');
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h2 className="text-xl mb-4">Advanced Settings</h2>
+        <p className="text-slate-400 mb-4">Configure advanced system settings and preferences.</p>
+      </div>
+      
+      <textarea
+        className="w-full bg-slate-800 p-4 font-mono text-sm min-h-60 rounded"
+        value={dashboardInput}
+        onChange={onInputUpdated}
+        placeholder="Dashboard configuration JSON..."
+      />
+      
+      <div>
+        <button
+          type="button"
+          onClick={handleSave}
+          className="bg-blue-700 hover:bg-blue-800 rounded-xs text-sm px-4 py-2 w-20"
+        >
+          Save
+        </button>
+      </div>
+    </div>
+  );
+}; 
\ No newline at end of file
diff --git a/src/frontend/components/Settings/sections/RelativeSettings.tsx b/src/frontend/components/Settings/sections/RelativeSettings.tsx
new file mode 100644
index 0000000..414ad66
--- /dev/null
+++ b/src/frontend/components/Settings/sections/RelativeSettings.tsx
@@ -0,0 +1,24 @@
+import { useState } from 'react';
+import { BaseSettingsSection } from '../components/BaseSettingsSection';
+import { RelativeWidgetSettings } from '../types';
+
+export const RelativeSettings = () => {
+  const [settings, setSettings] = useState<RelativeWidgetSettings>({
+    enabled: false,
+    // Add other settings here as needed
+  });
+
+  return (
+    <BaseSettingsSection
+      title="Relative Settings"
+      description="Configure the relative timing display settings."
+      settings={settings}
+      onSettingsChange={(newSettings) => setSettings(newSettings as RelativeWidgetSettings)}
+    >
+      {/* Add specific settings controls here */}
+      <div className="text-slate-300">
+        Additional settings will appear here when enabled
+      </div>
+    </BaseSettingsSection>
+  );
+}; 
\ No newline at end of file
diff --git a/src/frontend/components/Settings/sections/StandingsSettings.tsx b/src/frontend/components/Settings/sections/StandingsSettings.tsx
new file mode 100644
index 0000000..330dd44
--- /dev/null
+++ b/src/frontend/components/Settings/sections/StandingsSettings.tsx
@@ -0,0 +1,24 @@
+import { useState } from 'react';
+import { BaseSettingsSection } from '../components/BaseSettingsSection';
+import { StandingsWidgetSettings } from '../types';
+
+export const StandingsSettings = () => {
+  const [settings, setSettings] = useState<StandingsWidgetSettings>({
+    enabled: false,
+    // Add other settings here as needed
+  });
+
+  return (
+    <BaseSettingsSection
+      title="Standings Settings"
+      description="Configure how the standings widget appears and behaves."
+      settings={settings}
+      onSettingsChange={(newSettings) => setSettings(newSettings as StandingsWidgetSettings)}
+    >
+      {/* Add specific settings controls here */}
+      <div className="text-slate-300">
+        Additional settings will appear here when enabled
+      </div>
+    </BaseSettingsSection>
+  );
+}; 
\ No newline at end of file
diff --git a/src/frontend/components/Settings/sections/TrackMapSettings.tsx b/src/frontend/components/Settings/sections/TrackMapSettings.tsx
new file mode 100644
index 0000000..8961e29
--- /dev/null
+++ b/src/frontend/components/Settings/sections/TrackMapSettings.tsx
@@ -0,0 +1,27 @@
+import { useState } from 'react';
+import { BaseSettingsSection } from '../components/BaseSettingsSection';
+import { TrackMapWidgetSettings } from '../types';
+
+export const TrackMapSettings = () => {
+  const [settings, setSettings] = useState<TrackMapWidgetSettings>({
+    enabled: false,
+    // Add other settings here as needed
+  });
+
+  return (
+    <BaseSettingsSection
+      title="Track Map Settings"
+      description="Configure track map visualization settings."
+      settings={settings}
+      onSettingsChange={(newSettings) => setSettings(newSettings as TrackMapWidgetSettings)}
+    >
+      <div className="bg-yellow-600/20 text-yellow-100 p-4 rounded-md mb-4">
+        <p>This feature is experimental and may not work as expected.</p>
+      </div>
+      {/* Add specific settings controls here */}
+      <div className="text-slate-300">
+        Additional settings will appear here when enabled
+      </div>
+    </BaseSettingsSection>
+  );
+}; 
\ No newline at end of file
diff --git a/src/frontend/components/Settings/sections/WeatherSettings.tsx b/src/frontend/components/Settings/sections/WeatherSettings.tsx
new file mode 100644
index 0000000..dfbefa2
--- /dev/null
+++ b/src/frontend/components/Settings/sections/WeatherSettings.tsx
@@ -0,0 +1,24 @@
+import { useState } from 'react';
+import { BaseSettingsSection } from '../components/BaseSettingsSection';
+import { WeatherWidgetSettings } from '../types';
+
+export const WeatherSettings = () => {
+  const [settings, setSettings] = useState<WeatherWidgetSettings>({
+    enabled: false,
+    // Add other settings here as needed
+  });
+
+  return (
+    <BaseSettingsSection
+      title="Weather Settings"
+      description="Configure weather widget display options."
+      settings={settings}
+      onSettingsChange={(newSettings) => setSettings(newSettings as WeatherWidgetSettings)}
+    >
+      {/* Add specific settings controls here */}
+      <div className="text-slate-300">
+        Additional settings will appear here when enabled
+      </div>
+    </BaseSettingsSection>
+  );
+}; 
\ No newline at end of file
diff --git a/src/frontend/components/Settings/sections/index.ts b/src/frontend/components/Settings/sections/index.ts
new file mode 100644
index 0000000..6643139
--- /dev/null
+++ b/src/frontend/components/Settings/sections/index.ts
@@ -0,0 +1,5 @@
+export * from './StandingsSettings';
+export * from './RelativeSettings';
+export * from './WeatherSettings';
+export * from './TrackMapSettings';
+export * from './AdvancedSettings'; 
\ No newline at end of file
diff --git a/src/frontend/components/Settings/types.ts b/src/frontend/components/Settings/types.ts
new file mode 100644
index 0000000..6e33bfa
--- /dev/null
+++ b/src/frontend/components/Settings/types.ts
@@ -0,0 +1,23 @@
+export interface BaseWidgetSettings {
+  enabled: boolean;
+}
+
+export interface StandingsWidgetSettings extends BaseWidgetSettings {
+  // Add specific standings settings here
+}
+
+export interface RelativeWidgetSettings extends BaseWidgetSettings {
+  // Add specific relative settings here
+}
+
+export interface WeatherWidgetSettings extends BaseWidgetSettings {
+  // Add specific weather settings here
+}
+
+export interface TrackMapWidgetSettings extends BaseWidgetSettings {
+  // Add specific track map settings here
+}
+
+export interface AdvancedSettings extends BaseWidgetSettings {
+  // Add specific advanced settings here
+} 
\ No newline at end of file
diff --git a/src/frontend/components/Standings/DynamicTelemetrySelector.tsx b/src/frontend/components/Standings/DynamicTelemetrySelector.tsx
index 5c6c830..70903eb 100644
--- a/src/frontend/components/Standings/DynamicTelemetrySelector.tsx
+++ b/src/frontend/components/Standings/DynamicTelemetrySelector.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 // Predefined list of test data directories
 export const TEST_DATA_DIRS = [
+  '1745282969339',
   '1731637331038', // MultiClassPCCWithClio
   '1732274253573', // SupercarsRace
   '1732260478001', // AdvancedMX5
@@ -11,6 +12,8 @@ export const TEST_DATA_DIRS = [
   '1732359661942', // GT3Race
   '1731732047131', // LegendsQualifying
   '1733030013074', // PCCRaceWithMicUse
+  '1745282979879',
+  '1745291694179',
 ];
 
 interface DynamicTelemetrySelectorProps {
diff --git a/src/frontend/components/Standings/Relative.stories.tsx b/src/frontend/components/Standings/Relative.stories.tsx
index dea1215..26d7eb6 100644
--- a/src/frontend/components/Standings/Relative.stories.tsx
+++ b/src/frontend/components/Standings/Relative.stories.tsx
@@ -26,7 +26,7 @@ export const Primary: Story = {
 
 export const DynamicTelemetry: Story = {
   decorators: [(Story, context) => {
-    const [selectedPath, setSelectedPath] = useState('/test-data/1735296198162');
+    const [selectedPath, setSelectedPath] = useState('/test-data/1745291694179');
     
     return (
       <>
diff --git a/src/frontend/components/Standings/Relative.tsx b/src/frontend/components/Standings/Relative.tsx
index 8603a31..2792062 100644
--- a/src/frontend/components/Standings/Relative.tsx
+++ b/src/frontend/components/Standings/Relative.tsx
@@ -6,7 +6,7 @@ import { SessionBar } from './SessionBar/SessionBar';
 import { SessionFooter } from './SessionFooter/SessionFooter';
 
 export const Relative = () => {
-  const standings = useDriverRelatives({ buffer: 3 });
+  const standings = useDriverRelatives({ buffer: 5 });
   const [parent] = useAutoAnimate();
 
   return (
diff --git a/src/frontend/components/Standings/Standings.stories.tsx b/src/frontend/components/Standings/Standings.stories.tsx
index 326b9d2..05c2b59 100644
--- a/src/frontend/components/Standings/Standings.stories.tsx
+++ b/src/frontend/components/Standings/Standings.stories.tsx
@@ -16,7 +16,7 @@ export const Primary: Story = {
 
 export const DynamicTelemetry: Story = {
   decorators: [(Story, context) => {
-    const [selectedPath, setSelectedPath] = useState('/test-data/1735296198162');
+    const [selectedPath, setSelectedPath] = useState('/test-data/1745291694179');
     
     return (
       <>

From 359de4d66a2b3fa57e5be892e3ec12607255fc60 Mon Sep 17 00:00:00 2001
From: Tarik Alani <tarik.alani@dronedeploy.com>
Date: Thu, 24 Apr 2025 11:42:38 +1200
Subject: [PATCH 02/13] fix routing

---
 src/frontend/App.tsx                          |  2 +-
 .../Settings/SettingsLayout.stories.tsx       | 56 +++++++++++++++----
 .../components/Settings/SettingsLayout.tsx    | 10 ++--
 3 files changed, 51 insertions(+), 17 deletions(-)

diff --git a/src/frontend/App.tsx b/src/frontend/App.tsx
index 9571aa5..36e668e 100644
--- a/src/frontend/App.tsx
+++ b/src/frontend/App.tsx
@@ -46,7 +46,7 @@ const AppRoutes = () => {
           />
         );
       })}
-      <Route path="/settings" element={<Settings />} />
+      <Route path="/settings/*" element={<Settings />} />
     </Routes>
   );
 };
diff --git a/src/frontend/components/Settings/SettingsLayout.stories.tsx b/src/frontend/components/Settings/SettingsLayout.stories.tsx
index 5098775..36f2edd 100644
--- a/src/frontend/components/Settings/SettingsLayout.stories.tsx
+++ b/src/frontend/components/Settings/SettingsLayout.stories.tsx
@@ -1,24 +1,58 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { HashRouter } from 'react-router-dom';
+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) => (
-      <DashboardProvider bridge={mockDashboardBridge}>
-        <HashRouter>
-          <div style={{ height: '100vh' }}>
-            <Story />
-          </div>
-        </HashRouter>
-      </DashboardProvider>
-    ),
+    (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;
 
-export const Default: StoryObj<typeof SettingsLayout> = {};
+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',
+  },
+};
diff --git a/src/frontend/components/Settings/SettingsLayout.tsx b/src/frontend/components/Settings/SettingsLayout.tsx
index 4c40c9b..d32c77f 100644
--- a/src/frontend/components/Settings/SettingsLayout.tsx
+++ b/src/frontend/components/Settings/SettingsLayout.tsx
@@ -65,11 +65,11 @@ export const SettingsLayout = () => {
         {/* Right Column - Widget Settings */}
         <div className="w-2/3 bg-slate-800 p-4 rounded-md">
           <Routes>
-            <Route path="/settings/standings" element={<StandingsSettings />} />
-            <Route path="/settings/relative" element={<RelativeSettings />} />
-            <Route path="/settings/weather" element={<WeatherSettings />} />
-            <Route path="/settings/track-map" element={<TrackMapSettings />} />
-            <Route path="/settings/advanced" element={<AdvancedSettings />} />
+            <Route path="standings" element={<StandingsSettings />} />
+            <Route path="relative" element={<RelativeSettings />} />
+            <Route path="weather" element={<WeatherSettings />} />
+            <Route path="track-map" element={<TrackMapSettings />} />
+            <Route path="advanced" element={<AdvancedSettings />} />
             <Route
               path="*"
               element={

From e9e4494c590800b5dc931ab367d19897a09f802e Mon Sep 17 00:00:00 2001
From: Tarik Alani <tarik.alani@dronedeploy.com>
Date: Thu, 24 Apr 2025 11:44:53 +1200
Subject: [PATCH 03/13] full height json editor

---
 .../components/Settings/sections/AdvancedSettings.tsx         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/frontend/components/Settings/sections/AdvancedSettings.tsx b/src/frontend/components/Settings/sections/AdvancedSettings.tsx
index e4551de..4e7b398 100644
--- a/src/frontend/components/Settings/sections/AdvancedSettings.tsx
+++ b/src/frontend/components/Settings/sections/AdvancedSettings.tsx
@@ -32,14 +32,14 @@ export const AdvancedSettings = () => {
   };
 
   return (
-    <div className="space-y-4">
+    <div className="flex flex-col h-full space-y-4">
       <div>
         <h2 className="text-xl mb-4">Advanced Settings</h2>
         <p className="text-slate-400 mb-4">Configure advanced system settings and preferences.</p>
       </div>
       
       <textarea
-        className="w-full bg-slate-800 p-4 font-mono text-sm min-h-60 rounded"
+        className="flex-1 w-full bg-slate-800 p-4 font-mono text-sm rounded border border-slate-600 focus:border-slate-500 focus:outline-none"
         value={dashboardInput}
         onChange={onInputUpdated}
         placeholder="Dashboard configuration JSON..."

From ad10bc640b264436aa879facb0031db50592c82b Mon Sep 17 00:00:00 2001
From: Tarik Alani <tarik.alani@dronedeploy.com>
Date: Thu, 24 Apr 2025 11:48:21 +1200
Subject: [PATCH 04/13] tidy up styling

---
 src/frontend/components/Settings/sections/AdvancedSettings.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/components/Settings/sections/AdvancedSettings.tsx b/src/frontend/components/Settings/sections/AdvancedSettings.tsx
index 4e7b398..69ffb52 100644
--- a/src/frontend/components/Settings/sections/AdvancedSettings.tsx
+++ b/src/frontend/components/Settings/sections/AdvancedSettings.tsx
@@ -49,7 +49,7 @@ export const AdvancedSettings = () => {
         <button
           type="button"
           onClick={handleSave}
-          className="bg-blue-700 hover:bg-blue-800 rounded-xs text-sm px-4 py-2 w-20"
+          className="w-full bg-slate-700 hover:bg-slate-600 rounded px-4 py-2 transition-colors cursor-pointer"
         >
           Save
         </button>

From 6d07aa17a68e7e55e8a5ca6bfffa844c5d338488 Mon Sep 17 00:00:00 2001
From: Tarik Alani <tarik.alani@dronedeploy.com>
Date: Thu, 24 Apr 2025 11:56:49 +1200
Subject: [PATCH 05/13] add input setting

---
 .../components/Settings/SettingsLayout.tsx    | 31 +++++++++++++++----
 .../Settings/sections/InputSettings.tsx       | 28 +++++++++++++++++
 .../Settings/sections/RelativeSettings.tsx    |  2 +-
 .../Settings/sections/StandingsSettings.tsx   |  2 +-
 .../Settings/sections/TrackMapSettings.tsx    |  2 +-
 .../Settings/sections/WeatherSettings.tsx     |  2 +-
 src/frontend/components/Settings/types.ts     |  7 +++++
 7 files changed, 64 insertions(+), 10 deletions(-)
 create mode 100644 src/frontend/components/Settings/sections/InputSettings.tsx

diff --git a/src/frontend/components/Settings/SettingsLayout.tsx b/src/frontend/components/Settings/SettingsLayout.tsx
index d32c77f..f669dc6 100644
--- a/src/frontend/components/Settings/SettingsLayout.tsx
+++ b/src/frontend/components/Settings/SettingsLayout.tsx
@@ -5,6 +5,7 @@ import { RelativeSettings } from './sections/RelativeSettings';
 import { WeatherSettings } from './sections/WeatherSettings';
 import { TrackMapSettings } from './sections/TrackMapSettings';
 import { AdvancedSettings } from './sections/AdvancedSettings';
+import { InputSettings } from './sections/InputSettings';
 
 export const SettingsLayout = () => {
   const location = useLocation();
@@ -29,22 +30,36 @@ export const SettingsLayout = () => {
         <div className="w-1/3 bg-slate-800 p-4 rounded-md flex flex-col">
           <ul className="flex flex-col gap-2 flex-1">
             <li>
-              <Link to="/settings/standings" className={menuItemClass('/standings')}>
+              <Link to="/settings/input" className={menuItemClass('/input')}>
+                Input Traces
+              </Link>
+            </li>
+            <li>
+              <Link
+                to="/settings/standings"
+                className={menuItemClass('/standings')}
+              >
                 Standings
               </Link>
             </li>
             <li>
-              <Link to="/settings/relative" className={menuItemClass('/relative')}>
+              <Link
+                to="/settings/relative"
+                className={menuItemClass('/relative')}
+              >
                 Relative
               </Link>
             </li>
             <li>
-              <Link to="/settings/weather" className={menuItemClass('/weather')}>
+              <Link
+                to="/settings/weather"
+                className={menuItemClass('/weather')}
+              >
                 Weather
               </Link>
             </li>
             <li>
-              <Link to="/settings/track-map" className={menuItemClass('/track-map')}>
+              <Link to="/settings/map" className={menuItemClass('/track-map')}>
                 <div className="flex flex-row gap-2 items-center">
                   Track Map
                   <span className="text-xs bg-yellow-600 text-yellow-100 px-2 py-0.5 rounded-full flex flex-row gap-1 items-center">
@@ -56,7 +71,10 @@ export const SettingsLayout = () => {
           </ul>
           {/* Advanced settings pushed to bottom */}
           <div className="mt-auto pt-4 border-t border-slate-700">
-            <Link to="/settings/advanced" className={menuItemClass('/advanced')}>
+            <Link
+              to="/settings/advanced"
+              className={menuItemClass('/advanced')}
+            >
               Advanced
             </Link>
           </div>
@@ -68,7 +86,8 @@ export const SettingsLayout = () => {
             <Route path="standings" element={<StandingsSettings />} />
             <Route path="relative" element={<RelativeSettings />} />
             <Route path="weather" element={<WeatherSettings />} />
-            <Route path="track-map" element={<TrackMapSettings />} />
+            <Route path="map" element={<TrackMapSettings />} />
+            <Route path="input" element={<InputSettings />} />
             <Route path="advanced" element={<AdvancedSettings />} />
             <Route
               path="*"
diff --git a/src/frontend/components/Settings/sections/InputSettings.tsx b/src/frontend/components/Settings/sections/InputSettings.tsx
new file mode 100644
index 0000000..f125408
--- /dev/null
+++ b/src/frontend/components/Settings/sections/InputSettings.tsx
@@ -0,0 +1,28 @@
+import { useState } from 'react';
+import { BaseSettingsSection } from '../components/BaseSettingsSection';
+import { InputWidgetSettings } from '../types';
+
+export const InputSettings = () => {
+  const [settings, setSettings] = useState<InputWidgetSettings>({
+    enabled: false,
+    showThrottle: true,
+    showBrake: true,
+    showClutch: true,
+    opacity: 0.8,
+  });
+
+  return (
+    <BaseSettingsSection
+      title="Input Traces Settings"
+      description="Configure the input traces display settings for throttle, brake, and clutch."
+      settings={settings}
+      onSettingsChange={(newSettings) =>
+        setSettings(newSettings as InputWidgetSettings)
+      }
+    >
+      <div className="text-slate-300">
+        Additional settings will appear here
+      </div>
+    </BaseSettingsSection>
+  );
+};
diff --git a/src/frontend/components/Settings/sections/RelativeSettings.tsx b/src/frontend/components/Settings/sections/RelativeSettings.tsx
index 414ad66..c938d80 100644
--- a/src/frontend/components/Settings/sections/RelativeSettings.tsx
+++ b/src/frontend/components/Settings/sections/RelativeSettings.tsx
@@ -17,7 +17,7 @@ export const RelativeSettings = () => {
     >
       {/* Add specific settings controls here */}
       <div className="text-slate-300">
-        Additional settings will appear here when enabled
+        Additional settings will appear here
       </div>
     </BaseSettingsSection>
   );
diff --git a/src/frontend/components/Settings/sections/StandingsSettings.tsx b/src/frontend/components/Settings/sections/StandingsSettings.tsx
index 330dd44..2151a95 100644
--- a/src/frontend/components/Settings/sections/StandingsSettings.tsx
+++ b/src/frontend/components/Settings/sections/StandingsSettings.tsx
@@ -17,7 +17,7 @@ export const StandingsSettings = () => {
     >
       {/* Add specific settings controls here */}
       <div className="text-slate-300">
-        Additional settings will appear here when enabled
+        Additional settings will appear here
       </div>
     </BaseSettingsSection>
   );
diff --git a/src/frontend/components/Settings/sections/TrackMapSettings.tsx b/src/frontend/components/Settings/sections/TrackMapSettings.tsx
index 8961e29..3089293 100644
--- a/src/frontend/components/Settings/sections/TrackMapSettings.tsx
+++ b/src/frontend/components/Settings/sections/TrackMapSettings.tsx
@@ -20,7 +20,7 @@ export const TrackMapSettings = () => {
       </div>
       {/* Add specific settings controls here */}
       <div className="text-slate-300">
-        Additional settings will appear here when enabled
+        Additional settings will appear here
       </div>
     </BaseSettingsSection>
   );
diff --git a/src/frontend/components/Settings/sections/WeatherSettings.tsx b/src/frontend/components/Settings/sections/WeatherSettings.tsx
index dfbefa2..8a751f6 100644
--- a/src/frontend/components/Settings/sections/WeatherSettings.tsx
+++ b/src/frontend/components/Settings/sections/WeatherSettings.tsx
@@ -17,7 +17,7 @@ export const WeatherSettings = () => {
     >
       {/* Add specific settings controls here */}
       <div className="text-slate-300">
-        Additional settings will appear here when enabled
+        Additional settings will appear here
       </div>
     </BaseSettingsSection>
   );
diff --git a/src/frontend/components/Settings/types.ts b/src/frontend/components/Settings/types.ts
index 6e33bfa..475c6f8 100644
--- a/src/frontend/components/Settings/types.ts
+++ b/src/frontend/components/Settings/types.ts
@@ -18,6 +18,13 @@ export interface TrackMapWidgetSettings extends BaseWidgetSettings {
   // Add specific track map settings here
 }
 
+export interface InputWidgetSettings extends BaseWidgetSettings {
+  showThrottle: boolean;
+  showBrake: boolean;
+  showClutch: boolean;
+  opacity: number;
+}
+
 export interface AdvancedSettings extends BaseWidgetSettings {
   // Add specific advanced settings here
 } 
\ No newline at end of file

From d7593007ef9731aa42faa598abca8d7f38902eba Mon Sep 17 00:00:00 2001
From: Tarik Alani <tarik.alani@dronedeploy.com>
Date: Thu, 24 Apr 2025 12:07:22 +1200
Subject: [PATCH 06/13] implement enable / disable toggle setting

---
 .../components/BaseSettingsSection.tsx        | 33 +++++++++++++++----
 .../Settings/sections/InputSettings.tsx       | 13 +++++---
 .../Settings/sections/RelativeSettings.tsx    | 11 +++++--
 .../Settings/sections/StandingsSettings.tsx   | 11 +++++--
 .../Settings/sections/TrackMapSettings.tsx    | 11 +++++--
 .../Settings/sections/WeatherSettings.tsx     | 11 +++++--
 6 files changed, 72 insertions(+), 18 deletions(-)

diff --git a/src/frontend/components/Settings/components/BaseSettingsSection.tsx b/src/frontend/components/Settings/components/BaseSettingsSection.tsx
index 3056a78..287c69b 100644
--- a/src/frontend/components/Settings/components/BaseSettingsSection.tsx
+++ b/src/frontend/components/Settings/components/BaseSettingsSection.tsx
@@ -1,22 +1,43 @@
 import { ReactNode } from 'react';
 import { ToggleSwitch } from './ToggleSwitch';
 import { BaseWidgetSettings } from '../types';
+import { useDashboard } from '@irdashies/context';
 
-interface BaseSettingsSectionProps {
+interface BaseSettingsSectionProps<T extends BaseWidgetSettings> {
   title: string;
   description: string;
-  settings: BaseWidgetSettings;
-  onSettingsChange: (settings: BaseWidgetSettings) => void;
+  settings: T;
+  onSettingsChange: (settings: T) => void;
+  widgetId: string;
   children?: ReactNode;
 }
 
-export const BaseSettingsSection = ({
+export const BaseSettingsSection = <T extends BaseWidgetSettings>({
   title,
   description,
   settings,
   onSettingsChange,
+  widgetId,
   children,
-}: BaseSettingsSectionProps) => {
+}: BaseSettingsSectionProps<T>) => {
+  const { currentDashboard, onDashboardUpdated } = useDashboard();
+
+  const handleSettingsChange = (newSettings: T) => {
+    onSettingsChange(newSettings);
+    
+    if (currentDashboard && onDashboardUpdated) {
+      const updatedDashboard = {
+        ...currentDashboard,
+        widgets: currentDashboard.widgets.map(widget => 
+          widget.id === widgetId 
+            ? { ...widget, enabled: newSettings.enabled }
+            : widget
+        )
+      };
+      onDashboardUpdated(updatedDashboard);
+    }
+  };
+
   return (
     <div className="space-y-6">
       <div>
@@ -28,7 +49,7 @@ export const BaseSettingsSection = ({
         <div className="border-b border-slate-700 pb-4">
           <ToggleSwitch
             enabled={settings.enabled}
-            onToggle={(enabled) => onSettingsChange({ ...settings, enabled })}
+            onToggle={(enabled) => handleSettingsChange({ ...settings, enabled })}
             label="Enable Widget"
           />
         </div>
diff --git a/src/frontend/components/Settings/sections/InputSettings.tsx b/src/frontend/components/Settings/sections/InputSettings.tsx
index f125408..f72ce8c 100644
--- a/src/frontend/components/Settings/sections/InputSettings.tsx
+++ b/src/frontend/components/Settings/sections/InputSettings.tsx
@@ -1,24 +1,29 @@
 import { useState } from 'react';
 import { BaseSettingsSection } from '../components/BaseSettingsSection';
 import { InputWidgetSettings } from '../types';
+import { useDashboard } from '@irdashies/context';
 
 export const InputSettings = () => {
+  const { currentDashboard } = useDashboard();
   const [settings, setSettings] = useState<InputWidgetSettings>({
-    enabled: false,
+    enabled: currentDashboard?.widgets.find(w => w.id === 'input')?.enabled ?? false,
     showThrottle: true,
     showBrake: true,
     showClutch: true,
     opacity: 0.8,
   });
 
+  if (!currentDashboard) {
+    return <>Loading...</>;
+  }
+
   return (
     <BaseSettingsSection
       title="Input Traces Settings"
       description="Configure the input traces display settings for throttle, brake, and clutch."
       settings={settings}
-      onSettingsChange={(newSettings) =>
-        setSettings(newSettings as InputWidgetSettings)
-      }
+      onSettingsChange={setSettings}
+      widgetId="input"
     >
       <div className="text-slate-300">
         Additional settings will appear here
diff --git a/src/frontend/components/Settings/sections/RelativeSettings.tsx b/src/frontend/components/Settings/sections/RelativeSettings.tsx
index c938d80..71df43a 100644
--- a/src/frontend/components/Settings/sections/RelativeSettings.tsx
+++ b/src/frontend/components/Settings/sections/RelativeSettings.tsx
@@ -1,19 +1,26 @@
 import { useState } from 'react';
 import { BaseSettingsSection } from '../components/BaseSettingsSection';
 import { RelativeWidgetSettings } from '../types';
+import { useDashboard } from '@irdashies/context';
 
 export const RelativeSettings = () => {
+  const { currentDashboard } = useDashboard();
   const [settings, setSettings] = useState<RelativeWidgetSettings>({
-    enabled: false,
+    enabled: currentDashboard?.widgets.find(w => w.id === 'relative')?.enabled ?? false,
     // Add other settings here as needed
   });
 
+  if (!currentDashboard) {
+    return <>Loading...</>;
+  }
+
   return (
     <BaseSettingsSection
       title="Relative Settings"
       description="Configure the relative timing display settings."
       settings={settings}
-      onSettingsChange={(newSettings) => setSettings(newSettings as RelativeWidgetSettings)}
+      onSettingsChange={setSettings}
+      widgetId="relative"
     >
       {/* Add specific settings controls here */}
       <div className="text-slate-300">
diff --git a/src/frontend/components/Settings/sections/StandingsSettings.tsx b/src/frontend/components/Settings/sections/StandingsSettings.tsx
index 2151a95..0119a22 100644
--- a/src/frontend/components/Settings/sections/StandingsSettings.tsx
+++ b/src/frontend/components/Settings/sections/StandingsSettings.tsx
@@ -1,19 +1,26 @@
 import { useState } from 'react';
 import { BaseSettingsSection } from '../components/BaseSettingsSection';
 import { StandingsWidgetSettings } from '../types';
+import { useDashboard } from '@irdashies/context';
 
 export const StandingsSettings = () => {
+  const { currentDashboard } = useDashboard();
   const [settings, setSettings] = useState<StandingsWidgetSettings>({
-    enabled: false,
+    enabled: currentDashboard?.widgets.find(w => w.id === 'standings')?.enabled ?? false,
     // Add other settings here as needed
   });
 
+  if (!currentDashboard) {
+    return <>Loading...</>;
+  }
+
   return (
     <BaseSettingsSection
       title="Standings Settings"
       description="Configure how the standings widget appears and behaves."
       settings={settings}
-      onSettingsChange={(newSettings) => setSettings(newSettings as StandingsWidgetSettings)}
+      onSettingsChange={setSettings}
+      widgetId="standings"
     >
       {/* Add specific settings controls here */}
       <div className="text-slate-300">
diff --git a/src/frontend/components/Settings/sections/TrackMapSettings.tsx b/src/frontend/components/Settings/sections/TrackMapSettings.tsx
index 3089293..482d1ef 100644
--- a/src/frontend/components/Settings/sections/TrackMapSettings.tsx
+++ b/src/frontend/components/Settings/sections/TrackMapSettings.tsx
@@ -1,19 +1,26 @@
 import { useState } from 'react';
 import { BaseSettingsSection } from '../components/BaseSettingsSection';
 import { TrackMapWidgetSettings } from '../types';
+import { useDashboard } from '@irdashies/context';
 
 export const TrackMapSettings = () => {
+  const { currentDashboard } = useDashboard();
   const [settings, setSettings] = useState<TrackMapWidgetSettings>({
-    enabled: false,
+    enabled: currentDashboard?.widgets.find(w => w.id === 'map')?.enabled ?? false,
     // Add other settings here as needed
   });
 
+  if (!currentDashboard) {
+    return <>Loading...</>;
+  }
+
   return (
     <BaseSettingsSection
       title="Track Map Settings"
       description="Configure track map visualization settings."
       settings={settings}
-      onSettingsChange={(newSettings) => setSettings(newSettings as TrackMapWidgetSettings)}
+      onSettingsChange={setSettings}
+      widgetId="map"
     >
       <div className="bg-yellow-600/20 text-yellow-100 p-4 rounded-md mb-4">
         <p>This feature is experimental and may not work as expected.</p>
diff --git a/src/frontend/components/Settings/sections/WeatherSettings.tsx b/src/frontend/components/Settings/sections/WeatherSettings.tsx
index 8a751f6..601a878 100644
--- a/src/frontend/components/Settings/sections/WeatherSettings.tsx
+++ b/src/frontend/components/Settings/sections/WeatherSettings.tsx
@@ -1,19 +1,26 @@
 import { useState } from 'react';
 import { BaseSettingsSection } from '../components/BaseSettingsSection';
 import { WeatherWidgetSettings } from '../types';
+import { useDashboard } from '@irdashies/context';
 
 export const WeatherSettings = () => {
+  const { currentDashboard } = useDashboard();
   const [settings, setSettings] = useState<WeatherWidgetSettings>({
-    enabled: false,
+    enabled: currentDashboard?.widgets.find(w => w.id === 'weather')?.enabled ?? false,
     // Add other settings here as needed
   });
 
+  if (!currentDashboard) {
+    return <>Loading...</>;
+  }
+
   return (
     <BaseSettingsSection
       title="Weather Settings"
       description="Configure weather widget display options."
       settings={settings}
-      onSettingsChange={(newSettings) => setSettings(newSettings as WeatherWidgetSettings)}
+      onSettingsChange={setSettings}
+      widgetId="weather"
     >
       {/* Add specific settings controls here */}
       <div className="text-slate-300">

From 52e4a57159af8ba034483a3d0895ca2b041eb516 Mon Sep 17 00:00:00 2001
From: Tarik Alani <tarik.alani@dronedeploy.com>
Date: Thu, 24 Apr 2025 12:13:15 +1200
Subject: [PATCH 07/13] expose toggle edit mode via ipc

---
 src/app/bridge/dashboard/dashboardBridge.ts                   | 4 ++++
 src/app/bridge/rendererExposeBridge.ts                        | 3 +++
 src/frontend/components/EditMode/EditMode.stories.tsx         | 1 +
 src/frontend/components/Settings/__mocks__/mockBridge.ts      | 1 +
 .../context/DashboardContext/DashboardContext.spec.tsx        | 1 +
 src/types/dashboardBridge.ts                                  | 1 +
 6 files changed, 11 insertions(+)

diff --git a/src/app/bridge/dashboard/dashboardBridge.ts b/src/app/bridge/dashboard/dashboardBridge.ts
index 2394443..9899ed6 100644
--- a/src/app/bridge/dashboard/dashboardBridge.ts
+++ b/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();
+  });
 }
diff --git a/src/app/bridge/rendererExposeBridge.ts b/src/app/bridge/rendererExposeBridge.ts
index a7a03f7..34e2f8e 100644
--- a/src/app/bridge/rendererExposeBridge.ts
+++ b/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);
 }
diff --git a/src/frontend/components/EditMode/EditMode.stories.tsx b/src/frontend/components/EditMode/EditMode.stories.tsx
index 1652dd1..329664d 100644
--- a/src/frontend/components/EditMode/EditMode.stories.tsx
+++ b/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 = {
diff --git a/src/frontend/components/Settings/__mocks__/mockBridge.ts b/src/frontend/components/Settings/__mocks__/mockBridge.ts
index a739c37..a3b766f 100644
--- a/src/frontend/components/Settings/__mocks__/mockBridge.ts
+++ b/src/frontend/components/Settings/__mocks__/mockBridge.ts
@@ -12,4 +12,5 @@ export const mockDashboardBridge: DashboardBridge = {
     callback(false);
     return () => {};
   },
+  toggleLockOverlays: () => Promise.resolve(true),
 }; 
\ No newline at end of file
diff --git a/src/frontend/context/DashboardContext/DashboardContext.spec.tsx b/src/frontend/context/DashboardContext/DashboardContext.spec.tsx
index 05caf41..8f792cc 100644
--- a/src/frontend/context/DashboardContext/DashboardContext.spec.tsx
+++ b/src/frontend/context/DashboardContext/DashboardContext.spec.tsx
@@ -9,6 +9,7 @@ const mockBridge: DashboardBridge = {
   dashboardUpdated: vi.fn(),
   saveDashboard: vi.fn(),
   onEditModeToggled: vi.fn(),
+  toggleLockOverlays: vi.fn().mockResolvedValue(true),
 };
 
 const TestComponent: React.FC = () => {
diff --git a/src/types/dashboardBridge.ts b/src/types/dashboardBridge.ts
index 8f22f6b..a35e7fd 100644
--- a/src/types/dashboardBridge.ts
+++ b/src/types/dashboardBridge.ts
@@ -5,4 +5,5 @@ export interface DashboardBridge {
   dashboardUpdated: (callback: (value: DashboardLayout) => void) => void;
   reloadDashboard: () => void;
   saveDashboard: (value: DashboardLayout) => void;
+  toggleLockOverlays: () => Promise<boolean>;
 }

From 32a2b5c0c54b3505baa87be952e6ebe2f01d2c56 Mon Sep 17 00:00:00 2001
From: Tarik Alani <tarik.alani@dronedeploy.com>
Date: Thu, 24 Apr 2025 12:17:45 +1200
Subject: [PATCH 08/13] add toggle for edit mode

---
 .../components/Settings/SettingsLayout.tsx    | 35 ++++++++++++++++---
 .../DashboardContext/DashboardContext.tsx     |  2 ++
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/src/frontend/components/Settings/SettingsLayout.tsx b/src/frontend/components/Settings/SettingsLayout.tsx
index f669dc6..1d2cc09 100644
--- a/src/frontend/components/Settings/SettingsLayout.tsx
+++ b/src/frontend/components/Settings/SettingsLayout.tsx
@@ -1,4 +1,4 @@
-import { Gear } from '@phosphor-icons/react';
+import { Gear, Lock, LockOpen } from '@phosphor-icons/react';
 import { Link, Route, Routes, useLocation } from 'react-router-dom';
 import { StandingsSettings } from './sections/StandingsSettings';
 import { RelativeSettings } from './sections/RelativeSettings';
@@ -6,9 +6,13 @@ import { WeatherSettings } from './sections/WeatherSettings';
 import { TrackMapSettings } from './sections/TrackMapSettings';
 import { AdvancedSettings } from './sections/AdvancedSettings';
 import { InputSettings } from './sections/InputSettings';
+import { useDashboard } from '@irdashies/context';
+import { useState } from 'react';
 
 export const SettingsLayout = () => {
   const location = useLocation();
+  const { bridge, editMode } = useDashboard();
+  const [isLocked, setIsLocked] = useState(!editMode);
 
   const isActive = (path: string) => {
     return location.pathname === `/settings${path}`;
@@ -19,11 +23,34 @@ export const SettingsLayout = () => {
       isActive(path) ? 'bg-slate-700' : 'hover:bg-slate-700'
     }`;
 
+  const handleToggleLock = async () => {
+    const locked = await bridge.toggleLockOverlays();
+    setIsLocked(locked);
+  };
+
   return (
     <div className="flex flex-col gap-4 bg-slate-700 p-4 rounded-md w-full h-full">
-      <div className="flex flex-row gap-4 items-center">
-        <Gear size={32} weight="bold" />
-        <h1 className="text-2xl font-bold">Overlay Setup</h1>
+      <div className="flex flex-row gap-4 items-center justify-between">
+        <div className="flex flex-row gap-4 items-center">
+          <Gear size={32} weight="bold" />
+          <h1 className="text-2xl font-bold">Overlay Setup</h1>
+        </div>
+        <button
+          onClick={handleToggleLock}
+          className="flex flex-row gap-2 items-center px-3 py-2 rounded bg-slate-800 hover:bg-slate-600 transition-colors"
+        >
+          {isLocked ? (
+            <>
+              <Lock size={20} weight="bold" />
+              <span>Edit Layout</span>
+            </>
+          ) : (
+            <>
+              <LockOpen size={20} weight="bold" />
+              <span>Editing Layout</span>
+            </>
+          )}
+        </button>
       </div>
       <div className="flex flex-row gap-4 flex-1">
         {/* Left Column - Widget Menu */}
diff --git a/src/frontend/context/DashboardContext/DashboardContext.tsx b/src/frontend/context/DashboardContext/DashboardContext.tsx
index 2279f78..89dd938 100644
--- a/src/frontend/context/DashboardContext/DashboardContext.tsx
+++ b/src/frontend/context/DashboardContext/DashboardContext.tsx
@@ -11,6 +11,7 @@ interface DashboardContextProps {
   editMode: boolean;
   currentDashboard: DashboardLayout | undefined;
   onDashboardUpdated?: (dashboard: DashboardLayout) => void;
+  bridge: DashboardBridge;
 }
 
 const DashboardContext = createContext<DashboardContextProps | undefined>(
@@ -40,6 +41,7 @@ export const DashboardProvider: React.FC<{
         editMode: editMode,
         currentDashboard: dashboard,
         onDashboardUpdated: saveDashboard,
+        bridge,
       }}
     >
       {children}

From 7a55d195b19088c44fc214563ac55fb620cf4124 Mon Sep 17 00:00:00 2001
From: Tarik Alani <tarik.alani@dronedeploy.com>
Date: Thu, 24 Apr 2025 12:19:53 +1200
Subject: [PATCH 09/13] linting fixes

---
 src/frontend/components/Settings/Settings.tsx    |  1 -
 .../components/Settings/__mocks__/mockBridge.ts  | 16 ++++++++++++----
 .../Settings/sections/AdvancedSettings.tsx       |  2 --
 src/frontend/components/Settings/types.ts        |  1 +
 4 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/frontend/components/Settings/Settings.tsx b/src/frontend/components/Settings/Settings.tsx
index 188399c..5cd415d 100644
--- a/src/frontend/components/Settings/Settings.tsx
+++ b/src/frontend/components/Settings/Settings.tsx
@@ -1,5 +1,4 @@
 import { useDashboard } from '@irdashies/context';
-import { SettingsForm } from './SettingsForm';
 import { SettingsLayout } from './SettingsLayout';
 
 export const Settings = () => {
diff --git a/src/frontend/components/Settings/__mocks__/mockBridge.ts b/src/frontend/components/Settings/__mocks__/mockBridge.ts
index a3b766f..d95b89b 100644
--- a/src/frontend/components/Settings/__mocks__/mockBridge.ts
+++ b/src/frontend/components/Settings/__mocks__/mockBridge.ts
@@ -2,15 +2,23 @@ import type { DashboardBridge } from '@irdashies/types';
 import { defaultDashboard } from '../../../../app/storage/defaultDashboard';
 
 export const mockDashboardBridge: DashboardBridge = {
-  reloadDashboard: () => {},
-  saveDashboard: () => {},
+  reloadDashboard: () => {
+    // noop
+  },
+  saveDashboard: () => {
+    // noop
+  },
   dashboardUpdated: (callback) => {
     callback(defaultDashboard);
-    return () => {};
+    return () => {
+      // noop
+    };
   },
   onEditModeToggled: (callback) => {
     callback(false);
-    return () => {};
+    return () => {
+      // noop
+    };
   },
   toggleLockOverlays: () => Promise.resolve(true),
 }; 
\ No newline at end of file
diff --git a/src/frontend/components/Settings/sections/AdvancedSettings.tsx b/src/frontend/components/Settings/sections/AdvancedSettings.tsx
index 69ffb52..7e0dbb1 100644
--- a/src/frontend/components/Settings/sections/AdvancedSettings.tsx
+++ b/src/frontend/components/Settings/sections/AdvancedSettings.tsx
@@ -1,7 +1,5 @@
 import { useState } from 'react';
-import { SettingsForm } from '../SettingsForm';
 import { useDashboard } from '@irdashies/context';
-import { DashboardLayout } from '@irdashies/types';
 
 export const AdvancedSettings = () => {
   const { currentDashboard, onDashboardUpdated } = useDashboard();
diff --git a/src/frontend/components/Settings/types.ts b/src/frontend/components/Settings/types.ts
index 475c6f8..a0f6797 100644
--- a/src/frontend/components/Settings/types.ts
+++ b/src/frontend/components/Settings/types.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-empty-object-type */
 export interface BaseWidgetSettings {
   enabled: boolean;
 }

From 1df9fb90d5c3b98311c7b1aa902330e92afff64d Mon Sep 17 00:00:00 2001
From: Tarik Alani <tarik.alani@dronedeploy.com>
Date: Thu, 24 Apr 2025 12:20:56 +1200
Subject: [PATCH 10/13] remove old settings from

---
 src/frontend/components/Settings/Settings.tsx |  4 --
 .../Settings/SettingsForm.stories.tsx         | 27 ----------
 .../components/Settings/SettingsForm.tsx      | 53 -------------------
 3 files changed, 84 deletions(-)
 delete mode 100644 src/frontend/components/Settings/SettingsForm.stories.tsx
 delete mode 100644 src/frontend/components/Settings/SettingsForm.tsx

diff --git a/src/frontend/components/Settings/Settings.tsx b/src/frontend/components/Settings/Settings.tsx
index 5cd415d..d1bbe1c 100644
--- a/src/frontend/components/Settings/Settings.tsx
+++ b/src/frontend/components/Settings/Settings.tsx
@@ -9,9 +9,5 @@ export const Settings = () => {
 
   return (
     <SettingsLayout />
-    // <SettingsForm
-    //   currentDashboard={currentDashboard}
-    //   onDashboardUpdated={onDashboardUpdated}
-    // />
   );
 };
diff --git a/src/frontend/components/Settings/SettingsForm.stories.tsx b/src/frontend/components/Settings/SettingsForm.stories.tsx
deleted file mode 100644
index 8154463..0000000
--- a/src/frontend/components/Settings/SettingsForm.stories.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { SettingsForm } from './SettingsForm';
-
-export default {
-  component: SettingsForm,
-} as Meta;
-
-type Story = StoryObj<typeof SettingsForm>;
-
-export const Primary: Story = {
-  args: {
-    currentDashboard: {
-      widgets: [
-        {
-          id: 'test',
-          enabled: false,
-          layout: {
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 0,
-          },
-        },
-      ],
-    },
-  },
-};
diff --git a/src/frontend/components/Settings/SettingsForm.tsx b/src/frontend/components/Settings/SettingsForm.tsx
deleted file mode 100644
index 19160dc..0000000
--- a/src/frontend/components/Settings/SettingsForm.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { useState } from 'react';
-import { DashboardLayout } from '@irdashies/types';
-
-export const SettingsForm = ({
-  currentDashboard,
-  onDashboardUpdated,
-}: {
-  currentDashboard: DashboardLayout | undefined;
-  onDashboardUpdated: (dashboard: DashboardLayout) => void;
-}) => {
-  const [dashboardInput, setDashboardInput] = useState<string | undefined>(
-    JSON.stringify(currentDashboard, undefined, 2)
-  );
-
-  const onInputUpdated = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setDashboardInput(e.target.value);
-  };
-
-  const save = () => {
-    if (!dashboardInput) {
-      return;
-    }
-
-    try {
-      const dashboard = JSON.parse(dashboardInput);
-      onDashboardUpdated(dashboard);
-    } catch (e) {
-      console.error(e);
-      // TODO: shitty validation
-      alert('Invalid JSON');
-    }
-  };
-
-  return (
-    <div className="bg-slate-700 w-full h-full p-2 flex flex-col gap-2">
-      <h1 className="py-2">Settings</h1>
-      <textarea
-        className="w-full h-full bg-slate-800 p-2 text-monospace text-sm min-h-60"
-        value={dashboardInput}
-        onChange={(e) => onInputUpdated(e)}
-      />
-      <div className="flex gap-2">
-        <button
-          type="button"
-          onClick={save}
-          className="bg-blue-700 hover:bg-blue-800 rounded-xs text-sm px-2 py-1 w-20"
-        >
-          Save
-        </button>
-      </div>
-    </div>
-  );
-};

From 354211c70404db739026c51113247801da9cd213 Mon Sep 17 00:00:00 2001
From: Tarik Alani <tarik.alani@dronedeploy.com>
Date: Thu, 24 Apr 2025 12:25:51 +1200
Subject: [PATCH 11/13] fix discord invite link

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index b799a66..ca7b269 100644
--- a/README.md
+++ b/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
 

From 394a306f08333b20340b600f9c45c014c8b17244 Mon Sep 17 00:00:00 2001
From: Tarik Alani <tarik.alani@dronedeploy.com>
Date: Thu, 24 Apr 2025 12:28:23 +1200
Subject: [PATCH 12/13] add repo url

---
 package.json | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/package.json b/package.json
index 2029045..f134943 100644
--- a/package.json
+++ b/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",

From 153f8eeae3f4dc83e4c748ea2f0e5a9f52da8d46 Mon Sep 17 00:00:00 2001
From: Tarik Alani <tarik.alani@dronedeploy.com>
Date: Thu, 24 Apr 2025 12:32:03 +1200
Subject: [PATCH 13/13] add about page

---
 .../components/Settings/SettingsLayout.tsx    | 10 ++++-
 .../Settings/sections/AboutSettings.tsx       | 43 +++++++++++++++++++
 2 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 src/frontend/components/Settings/sections/AboutSettings.tsx

diff --git a/src/frontend/components/Settings/SettingsLayout.tsx b/src/frontend/components/Settings/SettingsLayout.tsx
index 1d2cc09..c5535fc 100644
--- a/src/frontend/components/Settings/SettingsLayout.tsx
+++ b/src/frontend/components/Settings/SettingsLayout.tsx
@@ -6,6 +6,7 @@ import { WeatherSettings } from './sections/WeatherSettings';
 import { TrackMapSettings } from './sections/TrackMapSettings';
 import { AdvancedSettings } from './sections/AdvancedSettings';
 import { InputSettings } from './sections/InputSettings';
+import { AboutSettings } from './sections/AboutSettings';
 import { useDashboard } from '@irdashies/context';
 import { useState } from 'react';
 
@@ -97,13 +98,19 @@ export const SettingsLayout = () => {
             </li>
           </ul>
           {/* Advanced settings pushed to bottom */}
-          <div className="mt-auto pt-4 border-t border-slate-700">
+          <div className="mt-auto pt-4 border-t border-slate-700 flex flex-col gap-2">
             <Link
               to="/settings/advanced"
               className={menuItemClass('/advanced')}
             >
               Advanced
             </Link>
+            <Link
+              to="/settings/about"
+              className={menuItemClass('/about')}
+            >
+              About
+            </Link>
           </div>
         </div>
 
@@ -116,6 +123,7 @@ export const SettingsLayout = () => {
             <Route path="map" element={<TrackMapSettings />} />
             <Route path="input" element={<InputSettings />} />
             <Route path="advanced" element={<AdvancedSettings />} />
+            <Route path="about" element={<AboutSettings />} />
             <Route
               path="*"
               element={
diff --git a/src/frontend/components/Settings/sections/AboutSettings.tsx b/src/frontend/components/Settings/sections/AboutSettings.tsx
new file mode 100644
index 0000000..383755b
--- /dev/null
+++ b/src/frontend/components/Settings/sections/AboutSettings.tsx
@@ -0,0 +1,43 @@
+import { GithubLogo, DiscordLogo } from '@phosphor-icons/react';
+
+export const AboutSettings = () => {
+  return (
+    <div className="flex flex-col gap-6">
+      <div>
+        <h2 className="text-xl font-bold mb-4">About</h2>
+        <p className="text-slate-300">
+          iRacing Dashies is an open-source iRacing Dashboards & Overlays application that helps you customize and enhance your racing experience.
+        </p>
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <h3 className="text-lg font-semibold">Version</h3>
+        <p className="text-slate-300">v0.0.7</p>
+      </div>
+
+      <div className="flex flex-col gap-4">
+        <h3 className="text-lg font-semibold">Connect</h3>
+        
+        <a 
+          href="https://github.com/tariknz/irdashies" 
+          target="_blank" 
+          rel="noopener noreferrer"
+          className="flex items-center gap-2 text-slate-300 hover:text-white transition-colors w-fit"
+        >
+          <GithubLogo size={24} weight="bold" />
+          <span>GitHub Repository</span>
+        </a>
+
+        <a 
+          href="https://discord.gg/YMAqduF2Ft" 
+          target="_blank" 
+          rel="noopener noreferrer"
+          className="flex items-center gap-2 text-slate-300 hover:text-white transition-colors w-fit"
+        >
+          <DiscordLogo size={24} weight="bold" />
+          <span>Join our Discord Community</span>
+        </a>
+      </div>
+    </div>
+  );
+}; 
\ No newline at end of file