🎨 Lint project

app/.prettierrc

@@ -7,7 +7,6 @@
     "experimentalTernaries": true,
     "printWidth": 100,
     "semi": false,
-    "svelteBracketNewLine": false,
     "plugins": ["prettier-plugin-svelte"],
     "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }

app/src/lib/api.ts

@@ -2,20 +2,20 @@ import { get } from 'svelte/store'
 import { Err, Ok, type Result } from './utilities'
 import { location } from './stores'
 
-export namespace api {
+export const api = {
-    export function get<TResponse>(endpoint: string, params?: RequestInit) {
+    get<TResponse>(endpoint: string, params?: RequestInit) {
         return sendRequest<TResponse>(endpoint, 'GET', null, params)
-    }
+    },
 
-    export function post<TResponse>(endpoint: string, data?: unknown) {
+    post<TResponse>(endpoint: string, data?: unknown) {
         return sendRequest<TResponse>(endpoint, 'POST', data)
-    }
+    },
 
-    export function put<TResponse>(endpoint: string, data?: unknown) {
+    put<TResponse>(endpoint: string, data?: unknown) {
         return sendRequest<TResponse>(endpoint, 'PUT', data)
-    }
+    },
 
-    export function remove<TResponse>(endpoint: string) {
+    remove<TResponse>(endpoint: string) {
         return sendRequest<TResponse>(endpoint, 'DELETE')
     }
 }

app/src/lib/components/StatusItem.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import type { ComponentType } from 'svelte'
+
     type Variant = 'success' | 'error' | 'primary' | 'info' | 'warning'
 
     const {
@@ -9,12 +11,12 @@
         class: klass = '',
         children = null
     } = $props<{
-        icon?: any
+        icon?: ComponentType
         title: string
         description?: string | number
         variant?: Variant
         class?: string
-        children?: () => any
+        children?: () => ComponentType
     }>()
 
     const Icon = $derived(icon)

app/src/lib/components/Visualization.svelte

@@ -24,7 +24,6 @@
         jointNames,
         currentKinematic,
         walkGait,
-        walkGaits,
         walkGaitToMode
     } from '$lib/stores'
     import {

app/src/lib/components/input/InputPassword.svelte

@@ -11,7 +11,7 @@
 
     let type = $derived(show ? 'text' : 'password')
 
-    const handleInput = (e: any) => (value = e.target.value)
+    const handleInput = (e: Event) => (value = (e.target as HTMLInputElement).value)
 
     const togglePassword = () => (show = !show)
 </script>

app/src/lib/components/input/VerticalSlider.svelte

@@ -3,8 +3,8 @@
         min?: number
         max?: number
         step?: number
-        value?: any
+        value?: number
-        oninput?: any
+        oninput?: (value: number) => void
     }
 
     let {

app/src/lib/components/menu/GithubButton.svelte

@@ -2,7 +2,7 @@
     import { Github } from '../icons'
 
     interface Props {
-        github: any
+        github: { url: string; version: string }
     }
 
     let { github }: Props = $props()

app/src/lib/components/menu/Menu.svelte

@@ -33,9 +33,11 @@
 
     const github = { href: 'https://github.com/' + page.data.github, active: true }
 
+    import type { ComponentType } from 'svelte'
+
     type menuItem = {
         title: string
-        icon: ConstructorOfATypedSvelteComponent
+        icon: ComponentType
         href?: string
         feature: boolean
         active?: boolean
@@ -172,7 +174,7 @@
         setActiveMenuItem(page.data.title)
     })
 
-    const updateMenu = (event: any) => {
+    const updateMenu = (event: CustomEvent) => {
         setActiveMenuItem(event.details)
     }
 </script>

app/src/lib/components/menu/MenuList.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
     import MenuList from './MenuList.svelte'
+    import type { ComponentType } from 'svelte'
+
     type MenuItem = {
         title: string
-        icon: ConstructorOfATypedSvelteComponent
+        icon: ComponentType
         href?: string
         feature: boolean
         active?: boolean
@@ -17,7 +19,7 @@
 </script>
 
 <ul class={klass + ' menu w-full'}>
-    {#each menuItems as MenuItem[] as menuItem, i (menuItem.title)}
+    {#each menuItems as MenuItem[] as menuItem (menuItem.title)}
         {#if menuItem.feature}
             <li>
                 {#if menuItem.submenu}

app/src/lib/components/toasts/notifications.ts

@@ -1,4 +1,4 @@
-import { writable, derived, type Writable } from 'svelte/store'
+import { writable } from 'svelte/store'
 
 type StateType = 'info' | 'success' | 'warning' | 'error'
 

app/src/lib/components/widget/ChartWidget.svelte

@@ -6,12 +6,12 @@
     import { slide } from 'svelte/transition'
 
     let chartElement: HTMLCanvasElement
-    let chart: Chart
+    let chart: Chart<'line', number[], string>
 
     interface Props {
-        label: any
+        label: string
         data: number[]
-        title: any
+        title: string
     }
 
     let { label, data, title }: Props = $props()

app/src/lib/components/widget/Selector.svelte

@@ -3,7 +3,7 @@
         options?: string[]
         selectedOption?: string
         change?: () => void
-        [key: string]: any
+        [key: string]: unknown
     }
 
     let { options = [], selectedOption = $bindable(''), ...rest }: Props = $props()

app/src/lib/sceneBuilder.ts

@@ -58,14 +58,14 @@ export default class SceneBuilder {
     public ground!: Mesh
     public renderer!: WebGLRenderer
     public orbit: OrbitControls
-    public callback: Function | undefined
+    public callback: (() => void) | undefined
     public gridHelper!: GridHelper
     public model!: URDFRobot
     public liveStreamTexture!: CanvasTexture
     private fog!: FogExp2
     private isLoaded: boolean = false
     public isDragging: boolean = false
-    highlightMaterial: any
+    highlightMaterial: MeshPhongMaterial
     sky!: Sky
     transformControl: TransformControls
     public modelGroup!: Group
@@ -229,7 +229,7 @@ export default class SceneBuilder {
         return this
     }
 
-    public addRenderCb = (callback: Function) => {
+    public addRenderCb = (callback: () => void) => {
         this.callback = callback
         return this
     }
@@ -275,7 +275,7 @@ export default class SceneBuilder {
     isJoint = (j: URDFJoint) => j.isURDFJoint && j.jointType !== 'fixed'
 
     highlightLinkGeometry = (m: URDFMimicJoint, revert: boolean, material: MeshPhongMaterial) => {
-        const traverse = (c: any) => {
+        const traverse = (c: Object3D) => {
             if (c.type === 'Mesh') {
                 if (revert) {
                     c.material = c.__origMaterial
@@ -298,9 +298,9 @@ export default class SceneBuilder {
         traverse(m)
     }
 
-    public addTransformControls = (model: any) => {
+    public addTransformControls = (model: Object3D) => {
         this.transformControl = new TransformControls(this.camera, this.renderer.domElement)
-        this.transformControl.addEventListener('dragging-changed', (event: any) => {
+        this.transformControl.addEventListener('dragging-changed', (event: { value: boolean }) => {
             this.orbit.enabled = !event.value
             this.isDragging = !event.value
         })
@@ -310,7 +310,7 @@ export default class SceneBuilder {
         return this
     }
 
-    public addModel = (model: any) => {
+    public addModel = (model: URDFRobot) => {
         this.modelGroup = new Group()
         this.modelGroup.add(model)
         this.model = model
@@ -318,7 +318,7 @@ export default class SceneBuilder {
         return this
     }
 
-    public addDragControl = (updateAngle: any) => {
+    public addDragControl = (updateAngle: (angles: Record<string, number>) => void) => {
         const highlightColor = '#FFFFFF'
         const highlightMaterial = new MeshPhongMaterial({
             shininess: 10,

app/src/lib/stores/analytics.ts

@@ -1,7 +1,7 @@
 import { type Analytics } from '$lib/types/models'
 import { writable } from 'svelte/store'
 
-let analytics_data = {
+const analytics_data = {
     uptime: <number[]>[],
     free_heap: <number[]>[],
     total_heap: <number[]>[],

app/src/lib/stores/application.ts

@@ -8,7 +8,7 @@ import ChartWidget from '$lib/components/widget/ChartWidget.svelte'
 export interface WidgetConfig {
     id: string | number
     component: keyof typeof WidgetComponents
-    props?: Record<string, any>
+    props?: Record<string, unknown>
 }
 
 export interface WidgetContainerConfig {

app/src/lib/stores/telemetry.ts

@@ -1,7 +1,7 @@
 import type { DownloadOTA } from '$lib/types/models'
 import { writable } from 'svelte/store'
 
-let telemetry_data = {
+const telemetry_data = {
     rssi: {
         rssi: 0
     },
@@ -13,7 +13,7 @@ let telemetry_data = {
 }
 
 function createTelemetry() {
-    const { subscribe, set, update } = writable(telemetry_data)
+    const { subscribe, update } = writable(telemetry_data)
 
     return {
         subscribe,

app/src/lib/types/uzip.d.ts

@@ -1,12 +1,12 @@
 declare module 'uzip' {
     interface UZIP {
-        parse(data: Uint8Array | ArrayBuffer): any
+        parse(data: Uint8Array | ArrayBuffer): Record<string, Uint8Array>
-        compress(data: any): Uint8Array | ArrayBuffer
+        compress(data: Record<string, Uint8Array>): Uint8Array | ArrayBuffer
         compressRaw(data: Uint8Array | ArrayBuffer): Uint8Array | ArrayBuffer
-        decompress(data: Uint8Array | ArrayBuffer): any
+        decompress(data: Uint8Array | ArrayBuffer): Record<string, Uint8Array>
         decompressRaw(data: Uint8Array | ArrayBuffer): Uint8Array | ArrayBuffer
-        encode(data: any): Uint8Array | ArrayBuffer
+        encode(data: Record<string, Uint8Array>): Uint8Array | ArrayBuffer
-        decode(data: Uint8Array | ArrayBuffer): any
+        decode(data: Uint8Array | ArrayBuffer): Record<string, Uint8Array>
     }
 
     const uzip: UZIP

app/src/lib/utilities/buffer-utilities.ts

@@ -3,7 +3,7 @@ export class throttler {
     constructor() {
         this._throttlePause = false
     }
-    throttle = (callback: Function, time: number) => {
+    throttle = (callback: () => void, time: number) => {
         if (this._throttlePause) return
 
         this._throttlePause = true

app/src/lib/utilities/math-utilities.ts

@@ -1,12 +1,12 @@
 export const toUint8 = (number: number, min: number, max: number) => {
     number = Math.max(min, Math.min(max, number))
-    let scaled = ((number - min) / (max - min)) * 255
+    const scaled = ((number - min) / (max - min)) * 255
     return Math.round(scaled) & 0xff
 }
 
 export const toInt8 = (number: number, min: number, max: number) => {
     number = Math.max(min, Math.min(max, number))
-    let scaled = ((number - min) / (max - min)) * 255 - 128
+    const scaled = ((number - min) / (max - min)) * 255 - 128
     return Math.max(-128, Math.min(127, Math.round(scaled))) | 0
 }
 

app/src/lib/utilities/result/result.ts

@@ -3,18 +3,18 @@ import { Ok } from './ok'
 
 export type Result<T = unknown, E = unknown, F = unknown> = Ok<T> | Err<E, F>
 
-export namespace Result {
+export const Result = {
     /**
      * @returns `Ok<T>`
      */
-    export function ok<T = unknown>(value: T) {
+    ok<T = unknown>(value: T) {
         return Ok.new(value)
-    }
+    },
 
     /**
      * @returns `Err<E, F>`
      */
-    export function err<E = unknown, F = unknown>(error: E, exception?: F) {
+    err<E = unknown, F = unknown>(error: E, exception?: F) {
         return Err.new(error, exception)
     }
 }

app/src/routes/+layout.svelte

@@ -83,7 +83,7 @@
         telemetry.setRSSI(0)
     }
 
-    const handleError = (data: any) => console.error(data)
+    const handleError = (data: unknown) => console.error(data)
 
     const handleAnalytics = (data: Analytics) => analytics.addData(data)
 
@@ -115,13 +115,14 @@
 </div>
 
 <Modals>
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
     {#snippet backdrop()}
         <div
             class="fixed inset-0 z-40 max-h-full max-w-full bg-black/20 backdrop-blur-sm"
             transition:fade
             onclick={modals.closeAll}
+            onkeydown={e => e.key === 'Escape' && modals.closeAll()}
+            role="button"
+            tabindex="0"
         ></div>
     {/snippet}
 </Modals>

app/src/routes/controller/Controls.svelte

@@ -9,7 +9,6 @@
         modes,
         type Modes,
         ModesEnum,
-        walkGaits,
         WalkGaits,
         walkGait,
         walkGaitLabels
@@ -61,9 +60,9 @@
         })
 
         left.on('move', (_, data) => handleJoyMove('left', data.vector))
-        left.on('end', (_, __) => handleJoyMove('left', { x: 0, y: 0 }))
+        left.on('end', () => handleJoyMove('left', { x: 0, y: 0 }))
         right.on('move', (_, data) => handleJoyMove('right', data.vector))
-        right.on('end', (_, __) => handleJoyMove('right', { x: 0, y: 0 }))
+        right.on('end', () => handleJoyMove('right', { x: 0, y: 0 }))
     })
 
     const handleJoyMove = (key: 'left' | 'right', data: vector) => {

app/src/routes/peripherals/camera/CameraSetting.svelte

@@ -25,7 +25,7 @@
 
 {#await getCameraSettings()}
     <Spinner />
-{:then _}
+{:then}
     <div class="flex flex-col gap-1">
         <button class="btn btn-primary" type="button" onclick={updateCameraSettings}
             >Update camera settings</button

app/src/routes/peripherals/i2c/i2c.svelte

@@ -30,7 +30,7 @@
         return () => socket.off(MessageTopic.i2cScan, handleScan)
     })
 
-    const handleScan = (data: any) => {
+    const handleScan = (data: { addresses: number[] }) => {
         active_devices = data.addresses.map(
             (address: number) =>
                 i2cDevices.find(device => device.address === address) || {

app/src/routes/peripherals/i2c/i2cSetting.svelte

@@ -15,7 +15,7 @@
         return () => socket.off(MessageTopic.peripheralSettings, handleSettings)
     })
 
-    const handleSettings = (data: any) => {
+    const handleSettings = (data: Record<string, unknown>) => {
         settings = data
     }
 

app/src/routes/peripherals/imu/imu.svelte

@@ -173,7 +173,7 @@
         })
     }
 
-    const updateChartData = (chart: Chart, data: number[], label: string) => {
+    const updateChartData = (chart: Chart, data: number[]) => {
         chart.data.labels = data
         chart.data.datasets[0].data = data
         chart.options.scales!.y!.min = Math.min(...data) - 1

app/src/routes/peripherals/servo/ServoTable.svelte

@@ -3,7 +3,7 @@
     import { onMount } from 'svelte'
     import { RotateCw, RotateCcw } from '$lib/components/icons'
     interface Props {
-        data?: any
+        data?: Record<string, unknown>
         servoId?: number
         pwm?: number
     }

app/src/routes/system/filesystem/FileSystem.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-    import SettingsCard from '$lib/components/SettingsCard.svelte'
     import Spinner from '$lib/components/Spinner.svelte'
     import Folder from './Folder.svelte'
     import { api } from '$lib/api'
@@ -164,7 +163,7 @@
 
             {#await getContent(filename)}
                 <Spinner />
-            {:then _}
+            {:then}
                 {#if isEditing}
                     <textarea
                         class="w-full h-[300px] sm:h-[500px] font-mono p-2 bg-gray-800 text-white"

app/src/routes/system/filesystem/Folder.svelte

@@ -6,7 +6,7 @@
     interface Props {
         expanded?: boolean
         name: string
-        files: any
+        files: unknown[]
         selected: (name: string) => void
         onDelete: (name: string) => void
     }

app/src/routes/system/metrics/SystemMetrics.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
     import { onMount } from 'svelte'
-    import { page } from '$app/stores'
     import SettingsCard from '$lib/components/SettingsCard.svelte'
     import { slide } from 'svelte/transition'
     import { cubicOut } from 'svelte/easing'

app/src/routes/system/status/SystemStatus.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { onDestroy, onMount } from 'svelte'
+    import type { ComponentType } from 'svelte'
     import { modals } from 'svelte-modals'
     import ConfirmDialog from '$lib/components/ConfirmDialog.svelte'
     import SettingsCard from '$lib/components/SettingsCard.svelte'
@@ -110,7 +111,7 @@
     }
 
     interface ActionButtonDef {
-        icon: any
+        icon: ComponentType
         label: string
         onClick: () => void
         type?: string

app/src/routes/system/update/GithubFirmwareManager.svelte

@@ -28,7 +28,10 @@
             console.error('Error:', result.inner)
             return
         }
-        return result.inner as any
+        return result.inner as {
+            tag_name: string
+            assets: Array<{ name: string; browser_download_url: string }>
+        }
     }
 
     async function postGithubDownload(url: string) {
@@ -39,7 +42,7 @@
         }
     }
 
-    function confirmGithubUpdate(assets: any) {
+    function confirmGithubUpdate(assets: Array<{ name: string; browser_download_url: string }>) {
         let url = ''
         // iterate over assets and find the correct one
         for (let i = 0; i < assets.length; i++) {
@@ -154,7 +157,7 @@
                 </table>
             </div>
         </div>
-    {:catch error}
+    {:catch}
         <div class="alert alert-error shadow-lg">
             <Error class="h-6 w-6 shrink-0" />
             <span

app/src/routes/wifi/ap/Accesspoint.svelte

@@ -16,7 +16,7 @@
     let apSettings: ApSettings | null = $state(null)
     let apStatus: ApStatus | null = $state(null)
 
-    let formField: any = $state()
+    let formField: Record<string, unknown> = $state()
 
     async function getAPStatus() {
         const result = await api.get<ApStatus>('/api/wifi/ap/status')

app/src/routes/wifi/mdns/MDNS.svelte

@@ -3,7 +3,6 @@
     import { api } from '$lib/api'
     import SettingsCard from '$lib/components/SettingsCard.svelte'
     import { AP, Home, MAC, Devices } from '$lib/components/icons'
-    import Spinner from '$lib/components/Spinner.svelte'
     import StatusItem from '$lib/components/StatusItem.svelte'
     import { cubicOut } from 'svelte/easing'
     import { slide } from 'svelte/transition'

app/src/routes/wifi/sta/Scan.svelte

@@ -87,7 +87,7 @@
                     </div>
                 {:else}
                     <ul class="menu">
-                        {#each listOfNetworks as network, i}
+                        {#each listOfNetworks as network}
                             <li>
                                 <!-- svelte-ignore a11y_click_events_have_key_events -->
                                 <div

app/src/routes/wifi/sta/Wifi.svelte

@@ -63,7 +63,7 @@
 
     let showWifiDetails = $state(false)
 
-    let formField: any = $state()
+    let formField: Record<string, unknown> = $state()
 
     let formErrors = $state({
         ssid: false,