🎨 format

app/src/routes/peripherals/camera/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import Camera from './Camera.svelte';
+    import Camera from './Camera.svelte'
 </script>
 
 <div class="mx-0 my-1 flex flex-col space-y-4 sm:mx-8 sm:my-8">
-	<Camera />
+    <Camera />
 </div>

app/src/routes/peripherals/camera/+page.ts

@@ -1,7 +1,7 @@
-import type { PageLoad } from './$types';
+import type { PageLoad } from './$types'
 
 export const load = (async () => {
-	return {
-		title: 'Camera'
-	};
-}) satisfies PageLoad;
+    return {
+        title: 'Camera'
+    }
+}) satisfies PageLoad

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

@@ -1,17 +1,17 @@
 <script lang="ts">
-	import SettingsCard from "$lib/components/SettingsCard.svelte";
-	import CameraSetting from './CameraSetting.svelte';
-	import Stream from '$lib/components/Stream.svelte';
-	import { Camera } from "$lib/components/icons";
+    import SettingsCard from '$lib/components/SettingsCard.svelte'
+    import CameraSetting from './CameraSetting.svelte'
+    import Stream from '$lib/components/Stream.svelte'
+    import { Camera } from '$lib/components/icons'
 </script>
 
 <SettingsCard collapsible={false}>
     {#snippet icon()}
-		<Camera  class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
-	{/snippet}
+        <Camera class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
+    {/snippet}
     {#snippet title()}
-		<span >Camera</span>
-	{/snippet}
+        <span>Camera</span>
+    {/snippet}
     <Stream />
     <CameraSetting />
-</SettingsCard>
+</SettingsCard>

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

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { api } from '$lib/api';
-	import Spinner from '$lib/components/Spinner.svelte';
-    import type { CameraSettings } from '$lib/types/models';
-    let settings:CameraSettings = $state()
+    import { api } from '$lib/api'
+    import Spinner from '$lib/components/Spinner.svelte'
+    import type { CameraSettings } from '$lib/types/models'
+    let settings: CameraSettings = $state()
 
     const getCameraSettings = async () => {
         const result = await api.get<CameraSettings>('/api/camera/settings')
-        if (result.isErr()){
-            console.error("An error occurred", result.inner);
+        if (result.isErr()) {
+            console.error('An error occurred', result.inner)
             return
         }
         settings = result.inner
@@ -15,8 +15,8 @@
 
     const updateCameraSettings = async () => {
         const result = await api.post<CameraSettings>('/api/camera/settings', settings)
-        if (result.isErr()){
-            console.error("An error occurred", result.inner);
+        if (result.isErr()) {
+            console.error('An error occurred', result.inner)
             return
         }
         settings = result.inner
@@ -25,27 +25,47 @@
 
 {#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>
+        <button class="btn btn-primary" type="button" onclick={updateCameraSettings}
+            >Update camera settings</button
+        >
 
         <label for="brightness">
             Brightness {settings.brightness}
-            <input type="range" min="-2" max="2" class="range range-xs" bind:value={settings.brightness}/> 
+            <input
+                type="range"
+                min="-2"
+                max="2"
+                class="range range-xs"
+                bind:value={settings.brightness}
+            />
         </label>
 
         <label for="contrast">
             Contrast {settings.contrast}
-            <input type="range" min="-2" max="2" class="range range-xs" bind:value={settings.contrast}/> 
+            <input
+                type="range"
+                min="-2"
+                max="2"
+                class="range range-xs"
+                bind:value={settings.contrast}
+            />
         </label>
 
         <label for="framesize">
             FrameSize {settings.framesize}
-            <input type="range" min="0" max="10" class="range range-xs" bind:value={settings.framesize}/> 
+            <input
+                type="range"
+                min="0"
+                max="10"
+                class="range range-xs"
+                bind:value={settings.framesize}
+            />
         </label>
 
         <label class="cursor-pointer flex items-center justify-between">
-            Vertical flip 
+            Vertical flip
             <input type="checkbox" class="toggle" bind:checked={settings.vflip} />
         </label>
 
@@ -56,7 +76,10 @@
 
         <label for="special_effect" class="flex items-center">
             <span class="basis-1/2">Special Effect</span>
-            <select class="select select-bordered select-sm w-full max-w-xs" bind:value={settings.special_effect}>
+            <select
+                class="select select-bordered select-sm w-full max-w-xs"
+                bind:value={settings.special_effect}
+            >
                 <option value={0}>No effect</option>
                 <option value={1}>Negative</option>
                 <option value={2}>Grayscale</option>
@@ -67,4 +90,4 @@
             </select>
         </label>
     </div>
-{/await}
+{/await}