From 98f3fc674b1d5b8d5e963e5ec53dc949fa29a54e Mon Sep 17 00:00:00 2001
From: Rune Harlyk <rune@harlyk.dk>
Date: Fri, 11 Jul 2025 18:59:07 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Makes=20socket=20messages=20event?=
 =?UTF-8?q?=20typed?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/lib/types/models.ts                   |  17 ++
 app/src/routes/+layout.svelte                 | 108 ++++----
 app/src/routes/controller/+page.svelte        |  46 ++--
 app/src/routes/peripherals/i2c/i2c.svelte     |   8 +-
 .../routes/peripherals/i2c/i2cSetting.svelte  |  10 +-
 app/src/routes/peripherals/imu/imu.svelte     | 176 ++++++------
 .../routes/peripherals/servo/servos.svelte    |   7 +-
 .../routes/system/status/SystemStatus.svelte  | 112 ++++----
 app/src/routes/wifi/sta/Wifi.svelte           | 257 +++++++++---------
 9 files changed, 382 insertions(+), 359 deletions(-)

diff --git a/app/src/lib/types/models.ts b/app/src/lib/types/models.ts
index ac53ff3..e0bdc0c 100644
--- a/app/src/lib/types/models.ts
+++ b/app/src/lib/types/models.ts
@@ -1,3 +1,20 @@
+export enum Topics {
+  imu = 'imu',
+  mode = 'mode',
+  input = 'input',
+  analytics = 'analytics',
+  position = 'position',
+  angles = 'angles',
+  i2cScan = 'i2cScan',
+  peripheralSettings = 'peripheralSettings',
+  otastatus = 'otastatus',
+  servoState = 'servoState',
+  servoPWM = 'servoPWM',
+  WiFiSettings = 'WiFiSettings',
+  sonar = 'sonar',
+  rssi = 'rssi'
+}
+
 export type vector = { x: number; y: number }
 
 export interface ControllerInput {
diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte
index 8640690..7a3c2a5 100644
--- a/app/src/routes/+layout.svelte
+++ b/app/src/routes/+layout.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-  import { onDestroy, onMount } from 'svelte';
-  import { page } from '$app/state';
-  import { Modals, modals } from 'svelte-modals';
-  import Toast from '$lib/components/toasts/Toast.svelte';
-  import { notifications } from '$lib/components/toasts/notifications';
-  import { fade } from 'svelte/transition';
-  import '../app.css';
-  import Menu from '../lib/components/menu/Menu.svelte';
-  import Statusbar from '../lib/components/statusbar/statusbar.svelte';
+  import { onDestroy, onMount } from 'svelte'
+  import { page } from '$app/state'
+  import { Modals, modals } from 'svelte-modals'
+  import Toast from '$lib/components/toasts/Toast.svelte'
+  import { notifications } from '$lib/components/toasts/notifications'
+  import { fade } from 'svelte/transition'
+  import '../app.css'
+  import Menu from '../lib/components/menu/Menu.svelte'
+  import Statusbar from '../lib/components/statusbar/statusbar.svelte'
   import {
     telemetry,
     analytics,
@@ -19,75 +19,75 @@
     servoAnglesOut,
     socket,
     location,
-    useFeatureFlags,
-  } from '$lib/stores';
-  import type { Analytics, DownloadOTA } from '$lib/types/models';
+    useFeatureFlags
+  } from '$lib/stores'
+  import { Topics, type Analytics, type DownloadOTA } from '$lib/types/models'
   interface Props {
-    children?: import('svelte').Snippet;
+    children?: import('svelte').Snippet
   }
 
-  let { children }: Props = $props();
+  let { children }: Props = $props()
 
-  const features = useFeatureFlags();
+  const features = useFeatureFlags()
 
   onMount(async () => {
-    const ws = $location ? $location : window.location.host;
-    socket.init(`ws://${ws}/api/ws/events`);
+    const ws = $location ? $location : window.location.host
+    socket.init(`ws://${ws}/api/ws/events`)
 
-    addEventListeners();
+    addEventListeners()
 
-    outControllerData.subscribe(data => socket.sendEvent('input', data));
-    mode.subscribe(data => socket.sendEvent('mode', data));
-    servoAnglesOut.subscribe(data => socket.sendEvent('angles', data));
-    kinematicData.subscribe(data => socket.sendEvent('position', data));
-  });
+    outControllerData.subscribe(data => socket.sendEvent(Topics.input, data))
+    mode.subscribe(data => socket.sendEvent(Topics.mode, data))
+    servoAnglesOut.subscribe(data => socket.sendEvent(Topics.angles, data))
+    kinematicData.subscribe(data => socket.sendEvent(Topics.position, data))
+  })
 
   onDestroy(() => {
-    removeEventListeners();
-  });
+    removeEventListeners()
+  })
 
   const addEventListeners = () => {
-    socket.on('open', handleOpen);
-    socket.on('close', handleClose);
-    socket.on('error', handleError);
-    socket.on('rssi', handleNetworkStatus);
-    socket.on('mode', (data: ModesEnum) => mode.set(data));
-    socket.on('analytics', handleAnalytics);
-    socket.on('angles', (angles: number[]) => {
-      if (angles.length) servoAngles.set(angles);
-    });
+    socket.on('open', handleOpen)
+    socket.on('close', handleClose)
+    socket.on('error', handleError)
+    socket.on(Topics.rssi, handleNetworkStatus)
+    socket.on(Topics.mode, (data: ModesEnum) => mode.set(data))
+    socket.on(Topics.analytics, handleAnalytics)
+    socket.on(Topics.angles, (angles: number[]) => {
+      if (angles.length) servoAngles.set(angles)
+    })
     features.subscribe(data => {
-      if (data?.download_firmware) socket.on('otastatus', handleOAT);
-      if (data?.sonar) socket.on('sonar', data => console.log(data));
-    });
-  };
+      if (data?.download_firmware) socket.on(Topics.otastatus, handleOAT)
+      if (data?.sonar) socket.on(Topics.sonar, data => console.log(data))
+    })
+  }
 
   const removeEventListeners = () => {
-    socket.off('analytics', handleAnalytics);
-    socket.off('open', handleOpen);
-    socket.off('close', handleClose);
-    socket.off('rssi', handleNetworkStatus);
-    socket.off('otastatus', handleOAT);
-  };
+    socket.off(Topics.analytics, handleAnalytics)
+    socket.off('open', handleOpen)
+    socket.off('close', handleClose)
+    socket.off(Topics.rssi, handleNetworkStatus)
+    socket.off(Topics.otastatus, handleOAT)
+  }
 
   const handleOpen = () => {
-    notifications.success('Connection to device established', 5000);
-  };
+    notifications.success('Connection to device established', 5000)
+  }
 
   const handleClose = () => {
-    notifications.error('Connection to device lost', 5000);
-    telemetry.setRSSI(0);
-  };
+    notifications.error('Connection to device lost', 5000)
+    telemetry.setRSSI(0)
+  }
 
-  const handleError = (data: any) => console.error(data);
+  const handleError = (data: any) => console.error(data)
 
-  const handleAnalytics = (data: Analytics) => analytics.addData(data);
+  const handleAnalytics = (data: Analytics) => analytics.addData(data)
 
-  const handleNetworkStatus = (data: number) => telemetry.setRSSI(data);
+  const handleNetworkStatus = (data: number) => telemetry.setRSSI(data)
 
-  const handleOAT = (data: DownloadOTA) => telemetry.setDownloadOTA(data);
+  const handleOAT = (data: DownloadOTA) => telemetry.setDownloadOTA(data)
 
-  let menuOpen = $state(false);
+  let menuOpen = $state(false)
 </script>
 
 <svelte:head>
diff --git a/app/src/routes/controller/+page.svelte b/app/src/routes/controller/+page.svelte
index bd5c629..c81a23d 100644
--- a/app/src/routes/controller/+page.svelte
+++ b/app/src/routes/controller/+page.svelte
@@ -1,31 +1,31 @@
 <script lang="ts">
-    import Controls from './Controls.svelte';
-    import WidgetContainer from '$lib/components/layout/WidgetContainer.svelte';
-    import { selectedView, views } from '$lib/stores/application';
-    import { onMount } from 'svelte';
-    import { mpu, socket } from '$lib/stores';
-    import { imu } from '$lib/stores/imu';
-    import type { IMU } from '$lib/types/models';
+  import Controls from './Controls.svelte'
+  import WidgetContainer from '$lib/components/layout/WidgetContainer.svelte'
+  import { selectedView, views } from '$lib/stores/application'
+  import { onMount } from 'svelte'
+  import { mpu, socket } from '$lib/stores'
+  import { imu } from '$lib/stores/imu'
+  import { Topics, type IMU } from '$lib/types/models'
 
-    let layout = $derived($views.find(v => v.name === $selectedView)!);
+  let layout = $derived($views.find(v => v.name === $selectedView)!)
 
-    onMount(() => {
-        socket.on('imu', (data: IMU) => {
-            imu.addData(data);
-            if (data.heading)
-                mpu.update(mpuData => {
-                    mpuData.heading = data.heading;
-                    console.log(data.heading);
+  onMount(() => {
+    socket.on(Topics.imu, (data: IMU) => {
+      imu.addData(data)
+      if (data.heading)
+        mpu.update(mpuData => {
+          mpuData.heading = data.heading
+          console.log(data.heading)
 
-                    return mpuData;
-                });
-        });
-    });
+          return mpuData
+        })
+    })
+  })
 </script>
 
 <div class="absolute top-0 select-none w-screen h-screen">
-    <Controls />
-    <div class="absolute w-full h-screen top-0 overflow-hidden lg:pt-16 pt-12">
-        <WidgetContainer container={layout.content} />
-    </div>
+  <Controls />
+  <div class="absolute w-full h-screen top-0 overflow-hidden lg:pt-16 pt-12">
+    <WidgetContainer container={layout.content} />
+  </div>
 </div>
diff --git a/app/src/routes/peripherals/i2c/i2c.svelte b/app/src/routes/peripherals/i2c/i2c.svelte
index ec42e28..0410feb 100644
--- a/app/src/routes/peripherals/i2c/i2c.svelte
+++ b/app/src/routes/peripherals/i2c/i2c.svelte
@@ -2,7 +2,7 @@
   import SettingsCard from '$lib/components/SettingsCard.svelte'
   import { onMount } from 'svelte'
   import { socket } from '$lib/stores'
-  import type { I2CDevice } from '$lib/types/models'
+  import { Topics, type I2CDevice } from '$lib/types/models'
   import { Connection } from '$lib/components/icons'
   import I2CSetting from './i2cSetting.svelte'
 
@@ -24,9 +24,9 @@
   let isLoading = $state(false)
 
   onMount(() => {
-    socket.on('i2cScan', handleScan)
+    socket.on(Topics.i2cScan, handleScan)
     triggerScan()
-    return () => socket.off('i2cScan', handleScan)
+    return () => socket.off(Topics.i2cScan, handleScan)
   })
 
   const handleScan = (data: any) => {
@@ -43,7 +43,7 @@
 
   const triggerScan = () => {
     isLoading = true
-    socket.sendEvent('i2cScan', '')
+    socket.sendEvent(Topics.i2cScan, '')
   }
 </script>
 
diff --git a/app/src/routes/peripherals/i2c/i2cSetting.svelte b/app/src/routes/peripherals/i2c/i2cSetting.svelte
index 059facc..1500117 100644
--- a/app/src/routes/peripherals/i2c/i2cSetting.svelte
+++ b/app/src/routes/peripherals/i2c/i2cSetting.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Cancel, Edit, EditOff, Power } from '$lib/components/icons'
   import { socket } from '$lib/stores'
-  import type { PeripheralsConfiguration } from '$lib/types/models'
+  import { Topics, type PeripheralsConfiguration } from '$lib/types/models'
   import { onMount } from 'svelte'
   import { modals } from 'svelte-modals'
   import ConfirmDialog from '$lib/components/ConfirmDialog.svelte'
@@ -10,9 +10,9 @@
   let isEditing = $state(false)
 
   onMount(() => {
-    socket.on('peripheralSettings', handleSettings)
-    socket.sendEvent('peripheralSettings', '')
-    return () => socket.off('peripheralSettings', handleSettings)
+    socket.on(Topics.peripheralSettings, handleSettings)
+    socket.sendEvent(Topics.peripheralSettings, '')
+    return () => socket.off(Topics.peripheralSettings, handleSettings)
   })
 
   const handleSettings = (data: any) => {
@@ -30,7 +30,7 @@
       },
       onConfirm: () => {
         modals.close()
-        socket.sendEvent('peripheralSettings', settings)
+        socket.sendEvent(Topics.peripheralSettings, settings)
       }
     })
   }
diff --git a/app/src/routes/peripherals/imu/imu.svelte b/app/src/routes/peripherals/imu/imu.svelte
index 6b2f998..01957b4 100644
--- a/app/src/routes/peripherals/imu/imu.svelte
+++ b/app/src/routes/peripherals/imu/imu.svelte
@@ -1,51 +1,51 @@
 <script lang="ts">
-  import SettingsCard from '$lib/components/SettingsCard.svelte';
-  import { imu } from '$lib/stores/imu';
-  import { Chart, registerables } from 'chart.js';
-  import { cubicOut } from 'svelte/easing';
-  import { slide } from 'svelte/transition';
-  import { onDestroy, onMount } from 'svelte';
-  import { socket } from '$lib/stores';
-  import type { IMU } from '$lib/types/models';
-  import { useFeatureFlags } from '$lib/stores/featureFlags';
-  import { Rotate3d } from '$lib/components/icons';
+  import SettingsCard from '$lib/components/SettingsCard.svelte'
+  import { imu } from '$lib/stores/imu'
+  import { Chart, registerables } from 'chart.js'
+  import { cubicOut } from 'svelte/easing'
+  import { slide } from 'svelte/transition'
+  import { onDestroy, onMount } from 'svelte'
+  import { socket } from '$lib/stores'
+  import { Topics, type IMU } from '$lib/types/models'
+  import { useFeatureFlags } from '$lib/stores/featureFlags'
+  import { Rotate3d } from '$lib/components/icons'
 
-  Chart.register(...registerables);
+  Chart.register(...registerables)
 
-  const features = useFeatureFlags();
-  let intervalId: ReturnType<typeof setInterval> | number;
+  const features = useFeatureFlags()
+  let intervalId: ReturnType<typeof setInterval> | number
 
-  let angleChartElement: HTMLCanvasElement;
-  let tempChartElement: HTMLCanvasElement;
-  let altitudeChartElement: HTMLCanvasElement;
+  let angleChartElement: HTMLCanvasElement
+  let tempChartElement: HTMLCanvasElement
+  let altitudeChartElement: HTMLCanvasElement
 
-  let angleChart: Chart;
-  let tempChart: Chart;
-  let altitudeChart: Chart;
+  let angleChart: Chart
+  let tempChart: Chart
+  let altitudeChart: Chart
 
   const getChartColors = () => {
-    const style = getComputedStyle(document.body);
+    const style = getComputedStyle(document.body)
     return {
       primary: style.getPropertyValue('--color-primary'),
       secondary: style.getPropertyValue('--color-secondary'),
       accent: style.getPropertyValue('--color-accent'),
-      background: style.getPropertyValue('--color-background'),
-    };
-  };
+      background: style.getPropertyValue('--color-background')
+    }
+  }
 
   const createBaseChartConfig = (bgColor: string) => ({
     maintainAspectRatio: false,
     responsive: true,
     plugins: {
       legend: { display: true },
-      tooltip: { mode: 'index' as const, intersect: false },
+      tooltip: { mode: 'index' as const, intersect: false }
     },
     elements: { point: { radius: 1 } },
     scales: {
       x: {
         grid: { color: bgColor },
         ticks: { color: bgColor },
-        display: false,
+        display: false
       },
       y: {
         type: 'linear' as const,
@@ -54,14 +54,14 @@
         max: 10,
         grid: { color: bgColor },
         ticks: { color: bgColor },
-        border: { color: bgColor },
-      },
-    },
-  });
+        border: { color: bgColor }
+      }
+    }
+  })
 
   const initializeCharts = () => {
-    const colors = getChartColors();
-    const baseConfig = createBaseChartConfig(colors.background);
+    const colors = getChartColors()
+    const baseConfig = createBaseChartConfig(colors.background)
 
     angleChart = new Chart(angleChartElement, {
       type: 'line',
@@ -73,7 +73,7 @@
             backgroundColor: colors.primary,
             borderWidth: 2,
             data: $imu.x,
-            yAxisID: 'y',
+            yAxisID: 'y'
           },
           {
             label: 'y',
@@ -81,7 +81,7 @@
             backgroundColor: colors.secondary,
             borderWidth: 2,
             data: $imu.y,
-            yAxisID: 'y',
+            yAxisID: 'y'
           },
           {
             label: 'z',
@@ -89,9 +89,9 @@
             backgroundColor: colors.accent,
             borderWidth: 2,
             data: $imu.z,
-            yAxisID: 'y',
-          },
-        ],
+            yAxisID: 'y'
+          }
+        ]
       },
       options: {
         ...baseConfig,
@@ -103,12 +103,12 @@
               display: true,
               text: 'Angle [°]',
               color: colors.background,
-              font: { size: 16, weight: 'bold' },
-            },
-          },
-        },
-      },
-    });
+              font: { size: 16, weight: 'bold' }
+            }
+          }
+        }
+      }
+    })
 
     tempChart = new Chart(tempChartElement, {
       type: 'line',
@@ -120,9 +120,9 @@
             backgroundColor: colors.secondary,
             borderWidth: 2,
             data: $imu.bmp_temp,
-            yAxisID: 'y',
-          },
-        ],
+            yAxisID: 'y'
+          }
+        ]
       },
       options: {
         ...baseConfig,
@@ -134,12 +134,12 @@
               display: true,
               text: 'Temperature [C°]',
               color: colors.background,
-              font: { size: 16, weight: 'bold' },
-            },
-          },
-        },
-      },
-    });
+              font: { size: 16, weight: 'bold' }
+            }
+          }
+        }
+      }
+    })
 
     altitudeChart = new Chart(altitudeChartElement, {
       type: 'line',
@@ -151,9 +151,9 @@
             backgroundColor: colors.primary,
             borderWidth: 2,
             data: $imu.altitude,
-            yAxisID: 'y',
-          },
-        ],
+            yAxisID: 'y'
+          }
+        ]
       },
       options: {
         ...baseConfig,
@@ -165,55 +165,55 @@
               display: true,
               text: 'Altitude [M]',
               color: colors.background,
-              font: { size: 16, weight: 'bold' },
-            },
-          },
-        },
-      },
-    });
-  };
+              font: { size: 16, weight: 'bold' }
+            }
+          }
+        }
+      }
+    })
+  }
 
   const updateChartData = (chart: Chart, data: number[], label: string) => {
-    chart.data.labels = data;
-    chart.data.datasets[0].data = data;
-    chart.options.scales!.y!.min = Math.min(...data) - 1;
-    chart.options.scales!.y!.max = Math.max(...data) + 1;
-    chart.update('none');
-  };
+    chart.data.labels = data
+    chart.data.datasets[0].data = data
+    chart.options.scales!.y!.min = Math.min(...data) - 1
+    chart.options.scales!.y!.max = Math.max(...data) + 1
+    chart.update('none')
+  }
 
   const updateData = () => {
     if ($features.imu) {
-      angleChart.data.labels = $imu.x;
-      angleChart.data.datasets[0].data = $imu.x;
-      angleChart.data.datasets[1].data = $imu.y;
-      angleChart.data.datasets[2].data = $imu.z;
+      angleChart.data.labels = $imu.x
+      angleChart.data.datasets[0].data = $imu.x
+      angleChart.data.datasets[1].data = $imu.y
+      angleChart.data.datasets[2].data = $imu.z
 
-      const allValues = [...$imu.x, ...$imu.y, ...$imu.z];
-      angleChart.options.scales!.y!.min = Math.min(...allValues) - 1;
-      angleChart.options.scales!.y!.max = Math.max(...allValues) + 1;
-      angleChart.update('none');
+      const allValues = [...$imu.x, ...$imu.y, ...$imu.z]
+      angleChart.options.scales!.y!.min = Math.min(...allValues) - 1
+      angleChart.options.scales!.y!.max = Math.max(...allValues) + 1
+      angleChart.update('none')
     }
 
     if ($features.bmp) {
-      updateChartData(tempChart, $imu.bmp_temp, 'Temperature');
-      updateChartData(altitudeChart, $imu.altitude, 'Altitude');
+      updateChartData(tempChart, $imu.bmp_temp, 'Temperature')
+      updateChartData(altitudeChart, $imu.altitude, 'Altitude')
     }
-  };
+  }
 
   onMount(() => {
-    socket.on('imu', (data: IMU) => {
-      console.log(data);
-      imu.addData(data);
-    });
+    socket.on(Topics.imu, (data: IMU) => {
+      console.log(data)
+      imu.addData(data)
+    })
 
-    initializeCharts();
-    intervalId = setInterval(updateData, 200);
-  });
+    initializeCharts()
+    intervalId = setInterval(updateData, 200)
+  })
 
   onDestroy(() => {
-    socket.off('imu');
-    clearInterval(intervalId);
-  });
+    socket.off(Topics.imu)
+    clearInterval(intervalId)
+  })
 </script>
 
 <SettingsCard collapsible={false}>
diff --git a/app/src/routes/peripherals/servo/servos.svelte b/app/src/routes/peripherals/servo/servos.svelte
index 021b736..0afdf98 100644
--- a/app/src/routes/peripherals/servo/servos.svelte
+++ b/app/src/routes/peripherals/servo/servos.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { socket } from '$lib/stores'
+  import { Topics } from '$lib/types/models'
   import { throttler as Throttler } from '$lib/utilities'
 
   let { servoId = $bindable(0), pwm = $bindable(306) } = $props()
@@ -11,16 +12,16 @@
   const throttler = new Throttler()
 
   const activateServo = () => {
-    socket.sendEvent('servoState', { active: 1 })
+    socket.sendEvent(Topics.servoState, { active: 1 })
   }
 
   const deactivateServo = () => {
-    socket.sendEvent('servoState', { active: 0 })
+    socket.sendEvent(Topics.servoState, { active: 0 })
   }
 
   const updatePWM = () => {
     throttler.throttle(() => {
-      socket.sendEvent('servoPWM', { servo_id: servoId, pwm })
+      socket.sendEvent(Topics.servoPWM, { servo_id: servoId, pwm })
     }, 10)
   }
 
diff --git a/app/src/routes/system/status/SystemStatus.svelte b/app/src/routes/system/status/SystemStatus.svelte
index 16f9ab0..e6b66d9 100644
--- a/app/src/routes/system/status/SystemStatus.svelte
+++ b/app/src/routes/system/status/SystemStatus.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-  import { onDestroy, onMount } from 'svelte';
-  import { modals } from 'svelte-modals';
-  import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
-  import SettingsCard from '$lib/components/SettingsCard.svelte';
-  import Spinner from '$lib/components/Spinner.svelte';
-  import { slide } from 'svelte/transition';
-  import { cubicOut } from 'svelte/easing';
-  import type { SystemInformation, Analytics } from '$lib/types/models';
-  import { socket } from '$lib/stores/socket';
-  import { api } from '$lib/api';
-  import { convertSeconds } from '$lib/utilities';
-  import { useFeatureFlags } from '$lib/stores/featureFlags';
+  import { onDestroy, onMount } from 'svelte'
+  import { modals } from 'svelte-modals'
+  import ConfirmDialog from '$lib/components/ConfirmDialog.svelte'
+  import SettingsCard from '$lib/components/SettingsCard.svelte'
+  import Spinner from '$lib/components/Spinner.svelte'
+  import { slide } from 'svelte/transition'
+  import { cubicOut } from 'svelte/easing'
+  import { type SystemInformation, type Analytics, Topics } from '$lib/types/models'
+  import { socket } from '$lib/stores/socket'
+  import { api } from '$lib/api'
+  import { convertSeconds } from '$lib/utilities'
+  import { useFeatureFlags } from '$lib/stores/featureFlags'
   import {
     Cancel,
     Power,
@@ -27,42 +27,42 @@
     Flash,
     Folder,
     Temperature,
-    Stopwatch,
-  } from '$lib/components/icons';
-  import StatusItem from '$lib/components/StatusItem.svelte';
-  import ActionButton from './ActionButton.svelte';
+    Stopwatch
+  } from '$lib/components/icons'
+  import StatusItem from '$lib/components/StatusItem.svelte'
+  import ActionButton from './ActionButton.svelte'
 
-  const features = useFeatureFlags();
+  const features = useFeatureFlags()
 
-  let systemInformation: SystemInformation | null = $state(null);
+  let systemInformation: SystemInformation | null = $state(null)
 
   async function getSystemStatus() {
-    const result = await api.get<SystemInformation>('/api/system/status');
+    const result = await api.get<SystemInformation>('/api/system/status')
     if (result.isErr()) {
-      console.error('Error:', result.inner);
-      return;
+      console.error('Error:', result.inner)
+      return
     }
-    systemInformation = result.inner;
-    return systemInformation;
+    systemInformation = result.inner
+    return systemInformation
   }
 
-  const postFactoryReset = async () => await api.post('/api/system/reset');
+  const postFactoryReset = async () => await api.post('/api/system/reset')
 
-  const postSleep = async () => await api.post('api/sleep');
+  const postSleep = async () => await api.post('api/sleep')
 
-  onMount(() => socket.on('analytics', handleSystemData));
+  onMount(() => socket.on(Topics.analytics, handleSystemData))
 
-  onDestroy(() => socket.off('analytics', handleSystemData));
+  onDestroy(() => socket.off(Topics.analytics, handleSystemData))
   const handleSystemData = (data: Analytics) => {
     if (systemInformation) {
       systemInformation = {
         ...systemInformation,
-        ...(data as unknown as SystemInformation),
-      };
+        ...(data as unknown as SystemInformation)
+      }
     }
-  };
+  }
 
-  const postRestart = async () => await api.post('/api/system/restart');
+  const postRestart = async () => await api.post('/api/system/restart')
 
   function confirmRestart() {
     modals.open(ConfirmDialog, {
@@ -70,13 +70,13 @@
       message: 'Are you sure you want to restart the device?',
       labels: {
         cancel: { label: 'Abort', icon: Cancel },
-        confirm: { label: 'Restart', icon: Power },
+        confirm: { label: 'Restart', icon: Power }
       },
       onConfirm: () => {
-        modals.close();
-        postRestart();
-      },
-    });
+        modals.close()
+        postRestart()
+      }
+    })
   }
 
   function confirmReset() {
@@ -85,13 +85,13 @@
       message: 'Are you sure you want to reset the device to its factory defaults?',
       labels: {
         cancel: { label: 'Abort', icon: Cancel },
-        confirm: { label: 'Factory Reset', icon: FactoryReset },
+        confirm: { label: 'Factory Reset', icon: FactoryReset }
       },
       onConfirm: () => {
-        modals.close();
-        postFactoryReset();
-      },
-    });
+        modals.close()
+        postFactoryReset()
+      }
+    })
   }
 
   function confirmSleep() {
@@ -100,21 +100,21 @@
       message: 'Are you sure you want to put the device into sleep?',
       labels: {
         cancel: { label: 'Abort', icon: Cancel },
-        confirm: { label: 'Sleep', icon: Sleep },
+        confirm: { label: 'Sleep', icon: Sleep }
       },
       onConfirm: () => {
-        modals.close();
-        postSleep();
-      },
-    });
+        modals.close()
+        postSleep()
+      }
+    })
   }
 
   interface ActionButtonDef {
-    icon: any;
-    label: string;
-    onClick: () => void;
-    type?: string;
-    condition?: () => boolean;
+    icon: any
+    label: string
+    onClick: () => void
+    type?: string
+    condition?: () => boolean
   }
 
   const actionButtons: ActionButtonDef[] = [
@@ -122,20 +122,20 @@
       icon: Sleep,
       label: 'Sleep',
       onClick: confirmSleep,
-      condition: () => Boolean($features.sleep),
+      condition: () => Boolean($features.sleep)
     },
     {
       icon: Power,
       label: 'Restart',
-      onClick: confirmRestart,
+      onClick: confirmRestart
     },
     {
       icon: FactoryReset,
       label: 'Factory Reset',
       onClick: confirmReset,
-      type: 'secondary',
-    },
-  ];
+      type: 'secondary'
+    }
+  ]
 </script>
 
 <SettingsCard collapsible={false}>
diff --git a/app/src/routes/wifi/sta/Wifi.svelte b/app/src/routes/wifi/sta/Wifi.svelte
index c25f320..5a35357 100644
--- a/app/src/routes/wifi/sta/Wifi.svelte
+++ b/app/src/routes/wifi/sta/Wifi.svelte
@@ -1,19 +1,24 @@
 <script lang="ts">
-  import { onMount, onDestroy } from 'svelte';
-  import { modals } from 'svelte-modals';
-  import { slide } from 'svelte/transition';
-  import { cubicOut } from 'svelte/easing';
-  import { notifications } from '$lib/components/toasts/notifications';
-  import DragDropList, { VerticalDropZone, reorder, type DropEvent } from 'svelte-dnd-list';
-  import SettingsCard from '$lib/components/SettingsCard.svelte';
-  import { PasswordInput } from '$lib/components/input';
-  import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
-  import ScanNetworks from './Scan.svelte';
-  import Spinner from '$lib/components/Spinner.svelte';
-  import InfoDialog from '$lib/components/InfoDialog.svelte';
-  import type { KnownNetworkItem, WifiSettings, WifiStatus } from '$lib/types/models';
-  import { socket } from '$lib/stores';
-  import { api } from '$lib/api';
+  import { onMount, onDestroy } from 'svelte'
+  import { modals } from 'svelte-modals'
+  import { slide } from 'svelte/transition'
+  import { cubicOut } from 'svelte/easing'
+  import { notifications } from '$lib/components/toasts/notifications'
+  import DragDropList, { VerticalDropZone, reorder, type DropEvent } from 'svelte-dnd-list'
+  import SettingsCard from '$lib/components/SettingsCard.svelte'
+  import { PasswordInput } from '$lib/components/input'
+  import ConfirmDialog from '$lib/components/ConfirmDialog.svelte'
+  import ScanNetworks from './Scan.svelte'
+  import Spinner from '$lib/components/Spinner.svelte'
+  import InfoDialog from '$lib/components/InfoDialog.svelte'
+  import {
+    Topics,
+    type KnownNetworkItem,
+    type WifiSettings,
+    type WifiStatus
+  } from '$lib/types/models'
+  import { socket } from '$lib/stores'
+  import { api } from '$lib/api'
   import {
     Cancel,
     Delete,
@@ -31,9 +36,9 @@
     DNS,
     Add,
     Scan,
-    Edit,
-  } from '$lib/components/icons';
-  import StatusItem from '$lib/components/StatusItem.svelte';
+    Edit
+  } from '$lib/components/icons'
+  import StatusItem from '$lib/components/StatusItem.svelte'
 
   let networkEditable: KnownNetworkItem = $state({
     ssid: '',
@@ -43,22 +48,22 @@
     subnet_mask: undefined,
     gateway_ip: undefined,
     dns_ip_1: undefined,
-    dns_ip_2: undefined,
-  });
+    dns_ip_2: undefined
+  })
 
-  let static_ip_config = $state(false);
+  let static_ip_config = $state(false)
 
-  let newNetwork: boolean = $state(true);
-  let showNetworkEditor: boolean = $state(false);
+  let newNetwork: boolean = $state(true)
+  let showNetworkEditor: boolean = $state(false)
 
-  let wifiStatus: WifiStatus | null = $state(null);
-  let wifiSettings: WifiSettings | null = $state(null);
+  let wifiStatus: WifiStatus | null = $state(null)
+  let wifiSettings: WifiSettings | null = $state(null)
 
-  let dndNetworkList: KnownNetworkItem[] = $state([]);
+  let dndNetworkList: KnownNetworkItem[] = $state([])
 
-  let showWifiDetails = $state(false);
+  let showWifiDetails = $state(false)
 
-  let formField: any = $state();
+  let formField: any = $state()
 
   let formErrors = $state({
     ssid: false,
@@ -66,157 +71,157 @@
     gateway_ip: false,
     subnet_mask: false,
     dns_1: false,
-    dns_2: false,
-  });
+    dns_2: false
+  })
 
-  let formErrorhostname = $state(false);
+  let formErrorhostname = $state(false)
 
   async function getWifiStatus() {
-    const result = await api.get<WifiStatus>('/api/wifi/sta/status');
+    const result = await api.get<WifiStatus>('/api/wifi/sta/status')
     if (result.isErr()) {
-      console.error(`Error occurred while fetching: `, result.inner);
-      return;
+      console.error(`Error occurred while fetching: `, result.inner)
+      return
     }
-    wifiStatus = result.inner;
-    return wifiStatus;
+    wifiStatus = result.inner
+    return wifiStatus
   }
 
   async function getWifiSettings() {
-    const result = await api.get<WifiSettings>('/api/wifi/sta/settings');
+    const result = await api.get<WifiSettings>('/api/wifi/sta/settings')
     if (result.isErr()) {
-      console.error(`Error occurred while fetching: `, result.inner);
-      return;
+      console.error(`Error occurred while fetching: `, result.inner)
+      return
     }
-    wifiSettings = result.inner;
-    dndNetworkList = wifiSettings.wifi_networks;
-    return wifiSettings;
+    wifiSettings = result.inner
+    dndNetworkList = wifiSettings.wifi_networks
+    return wifiSettings
   }
 
-  onDestroy(() => socket.off('WiFiSettings'));
+  onDestroy(() => socket.off(Topics.WiFiSettings))
 
   onMount(() => {
-    socket.on<WifiSettings>('WiFiSettings', data => {
-      wifiSettings = data;
-      dndNetworkList = wifiSettings.wifi_networks;
-    });
-  });
+    socket.on<WifiSettings>(Topics.WiFiSettings, data => {
+      wifiSettings = data
+      dndNetworkList = wifiSettings.wifi_networks
+    })
+  })
 
   async function postWiFiSettings(data: WifiSettings) {
-    const result = await api.post<WifiSettings>('/api/wifi/sta/settings', data);
+    const result = await api.post<WifiSettings>('/api/wifi/sta/settings', data)
     if (result.isErr()) {
-      console.error(`Error occurred while fetching: `, result.inner);
-      notifications.error('User not authorized.', 3000);
-      return;
+      console.error(`Error occurred while fetching: `, result.inner)
+      notifications.error('User not authorized.', 3000)
+      return
     }
-    wifiSettings = result.inner;
-    notifications.success('Wi-Fi settings updated.', 3000);
+    wifiSettings = result.inner
+    notifications.success('Wi-Fi settings updated.', 3000)
   }
 
   function validateHostName() {
-    if (!wifiSettings) return false;
+    if (!wifiSettings) return false
     if (wifiSettings.hostname.length < 3 || wifiSettings.hostname.length > 32) {
-      formErrorhostname = true;
+      formErrorhostname = true
     } else {
-      formErrorhostname = false;
+      formErrorhostname = false
       // Update global wifiSettings object
-      wifiSettings.wifi_networks = dndNetworkList;
+      wifiSettings.wifi_networks = dndNetworkList
       // Post to REST API
-      postWiFiSettings(wifiSettings);
-      console.log(wifiSettings);
+      postWiFiSettings(wifiSettings)
+      console.log(wifiSettings)
     }
   }
 
   function validateWiFiForm(event: SubmitEvent) {
-    event.preventDefault();
-    let valid = true;
+    event.preventDefault()
+    let valid = true
 
     // Validate SSID
     if (networkEditable.ssid.length < 3 || networkEditable.ssid.length > 32) {
-      valid = false;
-      formErrors.ssid = true;
+      valid = false
+      formErrors.ssid = true
     } else {
-      formErrors.ssid = false;
+      formErrors.ssid = false
     }
 
-    networkEditable.static_ip_config = static_ip_config;
+    networkEditable.static_ip_config = static_ip_config
 
     if (networkEditable.static_ip_config) {
       // RegEx for IPv4
       const regexExp =
-        /\b(?:(?:2(?:[0-4][0-9]|5[0-5])|[0-1]?[0-9]?[0-9])\.){3}(?:(?:2([0-4][0-9]|5[0-5])|[0-1]?[0-9]?[0-9]))\b/;
+        /\b(?:(?:2(?:[0-4][0-9]|5[0-5])|[0-1]?[0-9]?[0-9])\.){3}(?:(?:2([0-4][0-9]|5[0-5])|[0-1]?[0-9]?[0-9]))\b/
 
       // Validate gateway IP
       if (!regexExp.test(networkEditable.gateway_ip!)) {
-        valid = false;
-        formErrors.gateway_ip = true;
+        valid = false
+        formErrors.gateway_ip = true
       } else {
-        formErrors.gateway_ip = false;
+        formErrors.gateway_ip = false
       }
 
       // Validate Subnet Mask
       if (!regexExp.test(networkEditable.subnet_mask!)) {
-        valid = false;
-        formErrors.subnet_mask = true;
+        valid = false
+        formErrors.subnet_mask = true
       } else {
-        formErrors.subnet_mask = false;
+        formErrors.subnet_mask = false
       }
 
       // Validate local IP
       if (!regexExp.test(networkEditable.local_ip!)) {
-        valid = false;
-        formErrors.local_ip = true;
+        valid = false
+        formErrors.local_ip = true
       } else {
-        formErrors.local_ip = false;
+        formErrors.local_ip = false
       }
 
       // Validate DNS 1
       if (!regexExp.test(networkEditable.dns_ip_1!)) {
-        valid = false;
-        formErrors.dns_1 = true;
+        valid = false
+        formErrors.dns_1 = true
       } else {
-        formErrors.dns_1 = false;
+        formErrors.dns_1 = false
       }
 
       // Validate DNS 2
       if (!regexExp.test(networkEditable.dns_ip_2!)) {
-        valid = false;
-        formErrors.dns_2 = true;
+        valid = false
+        formErrors.dns_2 = true
       } else {
-        formErrors.dns_2 = false;
+        formErrors.dns_2 = false
       }
     } else {
-      formErrors.local_ip = false;
-      formErrors.subnet_mask = false;
-      formErrors.gateway_ip = false;
-      formErrors.dns_1 = false;
-      formErrors.dns_2 = false;
+      formErrors.local_ip = false
+      formErrors.subnet_mask = false
+      formErrors.gateway_ip = false
+      formErrors.dns_1 = false
+      formErrors.dns_2 = false
     }
     // Submit JSON to REST API
     if (valid) {
       if (newNetwork) {
-        dndNetworkList.push(networkEditable);
+        dndNetworkList.push(networkEditable)
       } else {
-        dndNetworkList.splice(dndNetworkList.indexOf(networkEditable), 1, networkEditable);
+        dndNetworkList.splice(dndNetworkList.indexOf(networkEditable), 1, networkEditable)
       }
-      addNetwork();
-      dndNetworkList = [...dndNetworkList]; //Trigger reactivity
-      showNetworkEditor = false;
+      addNetwork()
+      dndNetworkList = [...dndNetworkList] //Trigger reactivity
+      showNetworkEditor = false
     }
   }
 
   function scanForNetworks() {
     modals.open(ScanNetworks, {
       storeNetwork: (network: string) => {
-        addNetwork();
-        networkEditable.ssid = network;
-        showNetworkEditor = true;
-        modals.close();
-      },
-    });
+        addNetwork()
+        networkEditable.ssid = network
+        showNetworkEditor = true
+        modals.close()
+      }
+    })
   }
 
   function addNetwork() {
-    newNetwork = true;
+    newNetwork = true
     networkEditable = {
       ssid: '',
       password: '',
@@ -225,14 +230,14 @@
       subnet_mask: undefined,
       gateway_ip: undefined,
       dns_ip_1: undefined,
-      dns_ip_2: undefined,
-    };
+      dns_ip_2: undefined
+    }
   }
 
   function handleEdit(index: number) {
-    newNetwork = false;
-    showNetworkEditor = true;
-    networkEditable = dndNetworkList[index];
+    newNetwork = false
+    showNetworkEditor = true
+    networkEditable = dndNetworkList[index]
   }
 
   function confirmDelete(index: number) {
@@ -241,20 +246,20 @@
       message: 'Are you sure you want to delete this network?',
       labels: {
         cancel: { label: 'Cancel', icon: Cancel },
-        confirm: { label: 'Delete', icon: Delete },
+        confirm: { label: 'Delete', icon: Delete }
       },
       onConfirm: () => {
         // Check if network is currently been edited and delete as well
         if (dndNetworkList[index].ssid === networkEditable.ssid) {
-          addNetwork();
+          addNetwork()
         }
         // Remove network from array
-        dndNetworkList.splice(index, 1);
-        dndNetworkList = [...dndNetworkList]; //Trigger reactivity
-        showNetworkEditor = false;
-        modals.close();
-      },
-    });
+        dndNetworkList.splice(index, 1)
+        dndNetworkList = [...dndNetworkList] //Trigger reactivity
+        showNetworkEditor = false
+        modals.close()
+      }
+    })
   }
 
   function checkNetworkList() {
@@ -264,21 +269,21 @@
         message:
           'You have reached the maximum number of networks. Please delete one to add another.',
         dismiss: { label: 'OK', icon: Check },
-        onDismiss: () => modals.close(),
-      });
-      return false;
+        onDismiss: () => modals.close()
+      })
+      return false
     } else {
-      return true;
+      return true
     }
   }
 
   function onDrop({ detail: { from, to } }: CustomEvent<DropEvent>) {
     if (!to || from === to) {
-      return;
+      return
     }
 
-    dndNetworkList = reorder(dndNetworkList, from.index, to.index);
-    console.log(dndNetworkList);
+    dndNetworkList = reorder(dndNetworkList, from.index, to.index)
+    console.log(dndNetworkList)
   }
 </script>
 
@@ -312,7 +317,7 @@
               <button
                 class="btn btn-circle btn-ghost btn-sm modal-button"
                 onclick={() => {
-                  showWifiDetails = !showWifiDetails;
+                  showWifiDetails = !showWifiDetails
                 }}>
                 <Down
                   class="text-base-content h-auto w-6 transition-transform duration-300 ease-in-out {(
@@ -359,8 +364,8 @@
             class="btn btn-primary text-primary-content btn-md absolute -top-14 right-16"
             onclick={() => {
               if (checkNetworkList()) {
-                addNetwork();
-                showNetworkEditor = true;
+                addNetwork()
+                showNetworkEditor = true
               }
             }}>
             <Add class="h-6 w-6" /></button>
@@ -368,8 +373,8 @@
             class="btn btn-primary text-primary-content btn-md absolute -top-14 right-0"
             onclick={() => {
               if (checkNetworkList()) {
-                scanForNetworks();
-                showNetworkEditor = true;
+                scanForNetworks()
+                showNetworkEditor = true
               }
             }}>
             <Scan class="h-6 w-6" /></button>
@@ -389,13 +394,13 @@
                     <button
                       class="btn btn-ghost btn-sm"
                       onclick={() => {
-                        handleEdit(index);
+                        handleEdit(index)
                       }}>
                       <Edit class="h-6 w-6" /></button>
                     <button
                       class="btn btn-ghost btn-sm"
                       onclick={() => {
-                        confirmDelete(index);
+                        confirmDelete(index)
                       }}>
                       <Delete class="text-error h-6 w-6" />
                     </button>