From 8488858c4682edbe9adfbab05c47e688fe5fc524 Mon Sep 17 00:00:00 2001
From: Shahrad Elahi <shahradq@gmail.com>
Date: Tue, 19 Dec 2023 13:21:11 +0330
Subject: [PATCH] fix(chore): prettier format

---
 web/.prettierrc                               | 10 ++----
 web/components.json                           |  2 +-
 web/package.json                              |  6 ++--
 web/postcss.config.cjs                        |  6 ++--
 web/src/app.css                               |  4 +--
 web/src/app.html                              | 20 +++++------
 web/src/lib/components/editable-text/index.ts |  4 +--
 .../components/empty/empty-simple-img.svelte  |  2 +-
 web/src/lib/components/page/BasePage.svelte   |  4 +--
 web/src/lib/components/page/PageHeader.svelte | 17 +++++++--
 web/src/lib/components/ui/badge/badge.svelte  |  7 +++-
 web/src/lib/components/ui/badge/index.ts      |  3 +-
 .../lib/components/ui/button/button.svelte    |  4 +--
 web/src/lib/components/ui/button/index.ts     | 12 +++----
 .../lib/components/ui/card/card-title.svelte  |  6 +++-
 web/src/lib/components/ui/card/card.svelte    |  5 ++-
 .../components/ui/checkbox/checkbox.svelte    | 24 ++++++-------
 .../ui/collapsible/collapsible-content.svelte | 16 ++++-----
 .../lib/components/ui/collapsible/index.ts    | 18 +++++-----
 .../ui/dialog/dialog-description.svelte       |  5 ++-
 .../components/ui/dialog/dialog-footer.svelte |  5 ++-
 .../components/ui/dialog/dialog-title.svelte  |  5 ++-
 .../lib/components/ui/form/form-button.svelte |  4 +--
 .../components/ui/form/form-checkbox.svelte   | 10 +++---
 .../ui/form/form-description.svelte           |  9 ++---
 .../lib/components/ui/form/form-input.svelte  |  2 +-
 .../lib/components/ui/form/form-item.svelte   |  6 ++--
 .../lib/components/ui/form/form-label.svelte  | 10 ++----
 .../ui/form/form-native-select.svelte         | 12 +++----
 .../ui/form/form-radio-group.svelte           | 12 +++----
 .../ui/form/form-select-trigger.svelte        |  6 ++--
 .../lib/components/ui/form/form-select.svelte | 12 +++----
 .../lib/components/ui/form/form-switch.svelte | 10 +++---
 .../components/ui/form/form-textarea.svelte   |  7 ++--
 .../components/ui/form/form-validation.svelte |  4 +--
 web/src/lib/components/ui/form/index.ts       |  5 +--
 web/src/lib/components/ui/input/input.svelte  |  8 ++---
 web/src/lib/components/ui/label/label.svelte  | 10 +++---
 .../ui/radio-group/radio-group-item.svelte    | 18 +++++-----
 .../ui/radio-group/radio-group.svelte         | 10 ++----
 .../ui/select/select-content.svelte           | 14 ++++----
 .../components/ui/select/select-item.svelte   | 20 +++++------
 .../components/ui/select/select-label.svelte  |  6 ++--
 .../ui/select/select-separator.svelte         |  7 ++--
 .../ui/select/select-trigger.svelte           | 16 ++++-----
 .../lib/components/ui/select/select.svelte    |  4 +--
 web/src/lib/components/ui/skeleton/index.ts   |  8 ++---
 .../components/ui/skeleton/skeleton.svelte    | 15 ++++----
 .../lib/components/ui/switch/switch.svelte    | 14 ++++----
 .../components/ui/textarea/textarea.svelte    |  8 ++---
 web/src/lib/network.ts                        |  5 ++-
 web/src/lib/shell.ts                          |  6 +++-
 web/src/lib/typings.ts                        |  7 ++--
 web/src/lib/wireguard/index.ts                | 14 ++++++--
 web/src/lib/wireguard/schema.ts               |  4 +--
 web/src/routes/+layout.svelte                 |  2 +-
 web/src/routes/+page.server.ts                |  9 ++++-
 web/src/routes/CreateServerDialog.svelte      | 17 ++++++---
 web/src/routes/Server.svelte                  | 13 +++++--
 .../routes/[serverId]/CreatePeerDialog.svelte | 12 +++++--
 web/src/routes/[serverId]/Peer.svelte         | 10 ++++--
 web/src/routes/api/qrcode/+server.ts          |  5 ++-
 web/src/routes/login/+page.svelte             | 10 +++++-
 web/src/routes/schema.ts                      |  9 ++++-
 web/tailwind.config.js                        | 36 +++++++++----------
 web/vite.config.ts                            |  6 ++--
 66 files changed, 340 insertions(+), 277 deletions(-)

diff --git a/web/.prettierrc b/web/.prettierrc
index f80822f..7d7ebef 100644
--- a/web/.prettierrc
+++ b/web/.prettierrc
@@ -4,20 +4,14 @@
   "singleQuote": true,
   "jsxSingleQuote": true,
   "trailingComma": "all",
-  "printWidth": 120,
-  "jsxBracketSameLine": true,
+  "printWidth": 100,
   "overrides": [
     {
       "files": "*.svelte",
       "options": {
         "parser": "svelte",
-        "plugins": [
-          "prettier-plugin-svelte"
-        ]
+        "plugins": ["prettier-plugin-svelte"]
       }
     }
-  ],
-  "pluginSearchDirs": [
-    "."
   ]
 }
diff --git a/web/components.json b/web/components.json
index 0516b9c..1a1dab0 100644
--- a/web/components.json
+++ b/web/components.json
@@ -10,4 +10,4 @@
     "components": "$lib/components",
     "utils": "$lib/utils"
   }
-}
\ No newline at end of file
+}
diff --git a/web/package.json b/web/package.json
index c99992a..43fe0c6 100644
--- a/web/package.json
+++ b/web/package.json
@@ -9,8 +9,8 @@
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "test": "mocha",
-    "lint": "prettier --plugin-search-dir . --check .",
-    "format": "prettier --plugin-search-dir . --write .",
+    "lint": "prettier --check .",
+    "format": "prettier --write .",
     "start": "node ./build/index.js"
   },
   "devDependencies": {
@@ -55,4 +55,4 @@
     "tailwind-merge": "^2.1.0",
     "tailwind-variants": "^0.1.18"
   }
-}
\ No newline at end of file
+}
diff --git a/web/postcss.config.cjs b/web/postcss.config.cjs
index 42c343c..bc22153 100644
--- a/web/postcss.config.cjs
+++ b/web/postcss.config.cjs
@@ -6,8 +6,8 @@ const config = {
     //Some plugins, like tailwindcss/nesting, need to run before Tailwind,
     tailwindcss(),
     //But others, like autoprefixer, need to run after,
-    autoprefixer
-  ]
+    autoprefixer,
+  ],
 };
 
-module.exports = config;
\ No newline at end of file
+module.exports = config;
diff --git a/web/src/app.css b/web/src/app.css
index e5a4b47..9e78d4d 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -79,7 +79,6 @@
 }
 
 @layer base {
-
   h1 {
     @apply text-4xl font-bold;
   }
@@ -108,5 +107,4 @@
     text-decoration: none;
     transition: color 0.2s ease-in-out;
   }
-
-}
\ No newline at end of file
+}
diff --git a/web/src/app.html b/web/src/app.html
index 6ef75c5..b9491ee 100644
--- a/web/src/app.html
+++ b/web/src/app.html
@@ -1,12 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover" class="min-h-screen">
-		<div style="display: contents" class="min-h-screen">%sveltekit.body%</div>
-	</body>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover" class="min-h-screen">
+    <div style="display: contents" class="min-h-screen">%sveltekit.body%</div>
+  </body>
 </html>
diff --git a/web/src/lib/components/editable-text/index.ts b/web/src/lib/components/editable-text/index.ts
index b3449d8..a9ca1cf 100644
--- a/web/src/lib/components/editable-text/index.ts
+++ b/web/src/lib/components/editable-text/index.ts
@@ -3,5 +3,5 @@ import Root from './EditableText.svelte';
 export {
   Root,
   //
-  Root as EditableText
-}
\ No newline at end of file
+  Root as EditableText,
+};
diff --git a/web/src/lib/components/empty/empty-simple-img.svelte b/web/src/lib/components/empty/empty-simple-img.svelte
index 8911c37..822ed07 100644
--- a/web/src/lib/components/empty/empty-simple-img.svelte
+++ b/web/src/lib/components/empty/empty-simple-img.svelte
@@ -21,7 +21,7 @@
   viewBox="0 0 64 41"
   xmlns="http://www.w3.org/2000/svg"
   {...$$restProps}
-  class={cn('max-w-full h-full m-auto',className)}
+  class={cn('max-w-full h-full m-auto', className)}
 >
   <g transform="translate(0 1)" fill="none" fill-rule="evenodd">
     <ellipse fill={shadowColor} cx="32" cy="33" rx="32" ry="7" />
diff --git a/web/src/lib/components/page/BasePage.svelte b/web/src/lib/components/page/BasePage.svelte
index 075b498..639debc 100644
--- a/web/src/lib/components/page/BasePage.svelte
+++ b/web/src/lib/components/page/BasePage.svelte
@@ -10,9 +10,9 @@
 </script>
 
 <div class="w-full min-h-screen flex justify-center px-2 md:px-6 py-2">
-  <div class={cn("w-full mx-auto max-w-3xl space-y-3.5", rootClass)}>
+  <div class={cn('w-full mx-auto max-w-3xl space-y-3.5', rootClass)}>
     <PageHeader {showLogout} />
-    <main class={cn("py-2", className)}>
+    <main class={cn('py-2', className)}>
       <slot />
     </main>
     <PageFooter />
diff --git a/web/src/lib/components/page/PageHeader.svelte b/web/src/lib/components/page/PageHeader.svelte
index 4954da3..bc0b1e4 100644
--- a/web/src/lib/components/page/PageHeader.svelte
+++ b/web/src/lib/components/page/PageHeader.svelte
@@ -13,7 +13,11 @@
     </div>
 
     <div class={'flex items-center gap-x-8'}>
-      <a href={'https://github.com/shahradelahi/wireadmin'} title={'Giv me a star on Github'} class="hidden md:block">
+      <a
+        href={'https://github.com/shahradelahi/wireadmin'}
+        title={'Giv me a star on Github'}
+        class="hidden md:block"
+      >
         <img
           src={'https://img.shields.io/github/stars/shahradelahi/wireadmin.svg?style=social&label=Star'}
           alt={'Giv me a star on Github'}
@@ -21,8 +25,15 @@
       </a>
 
       {#if showLogout}
-        <a href="/logout" rel="external" title="Logout" class="group text-sm/2 font-medium text-neutral-700 hover:text-neutral-800">
-          <i class="far fa-arrow-right-from-arc text-sm text-neutral-500 group-hover:text-neutral-800 mr-0.5"></i>
+        <a
+          href="/logout"
+          rel="external"
+          title="Logout"
+          class="group text-sm/2 font-medium text-neutral-700 hover:text-neutral-800"
+        >
+          <i
+            class="far fa-arrow-right-from-arc text-sm text-neutral-500 group-hover:text-neutral-800 mr-0.5"
+          ></i>
           Logout
         </a>
       {/if}
diff --git a/web/src/lib/components/ui/badge/badge.svelte b/web/src/lib/components/ui/badge/badge.svelte
index 151a58a..ab01c40 100644
--- a/web/src/lib/components/ui/badge/badge.svelte
+++ b/web/src/lib/components/ui/badge/badge.svelte
@@ -8,6 +8,11 @@
   export { className as class };
 </script>
 
-<svelte:element this={href ? 'a' : 'span'} {href} class={cn(badgeVariants({ variant, className }))} {...$$restProps}>
+<svelte:element
+  this={href ? 'a' : 'span'}
+  {href}
+  class={cn(badgeVariants({ variant, className }))}
+  {...$$restProps}
+>
   <slot />
 </svelte:element>
diff --git a/web/src/lib/components/ui/badge/index.ts b/web/src/lib/components/ui/badge/index.ts
index 9605747..46e3f1f 100644
--- a/web/src/lib/components/ui/badge/index.ts
+++ b/web/src/lib/components/ui/badge/index.ts
@@ -8,7 +8,8 @@ export const badgeVariants = tv({
       default: 'bg-primary hover:bg-primary/80 border-transparent text-primary-foreground',
       secondary: 'bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground',
       success: 'bg-green-500 hover:bg-green-500/80 border-transparent text-white',
-      destructive: 'bg-destructive hover:bg-destructive/80 border-transparent text-destructive-foreground',
+      destructive:
+        'bg-destructive hover:bg-destructive/80 border-transparent text-destructive-foreground',
       outline: 'text-foreground',
     },
   },
diff --git a/web/src/lib/components/ui/button/button.svelte b/web/src/lib/components/ui/button/button.svelte
index f5def68..7080dcd 100644
--- a/web/src/lib/components/ui/button/button.svelte
+++ b/web/src/lib/components/ui/button/button.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Button as ButtonPrimitive } from 'bits-ui';
+  import { Button as ButtonPrimitive } from 'bits-ui';
   import { cn } from '$lib/utils';
   import { buttonVariants, type Props, type Events } from '.';
 
@@ -21,5 +21,5 @@
   on:click
   on:keydown
 >
-	<slot />
+  <slot />
 </ButtonPrimitive.Root>
diff --git a/web/src/lib/components/ui/button/index.ts b/web/src/lib/components/ui/button/index.ts
index ac5e41b..16d3cd5 100644
--- a/web/src/lib/components/ui/button/index.ts
+++ b/web/src/lib/components/ui/button/index.ts
@@ -7,14 +7,10 @@ const buttonVariants = tv({
   variants: {
     variant: {
       default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-      destructive:
-        'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-      success:
-        'bg-green-500 text-white hover:bg-green-500/90 hover:text-gray-50',
-      outline:
-        'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-      secondary:
-        'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+      destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+      success: 'bg-green-500 text-white hover:bg-green-500/90 hover:text-gray-50',
+      outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+      secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
       ghost: 'hover:bg-accent hover:text-accent-foreground',
       link: 'text-primary underline-offset-4 hover:underline',
     },
diff --git a/web/src/lib/components/ui/card/card-title.svelte b/web/src/lib/components/ui/card/card-title.svelte
index 4985ee0..d9ef242 100644
--- a/web/src/lib/components/ui/card/card-title.svelte
+++ b/web/src/lib/components/ui/card/card-title.svelte
@@ -12,6 +12,10 @@
   export { className as class };
 </script>
 
-<svelte:element this={tag} class={cn('text-lg font-semibold leading-none tracking-tight', className)} {...$$restProps}>
+<svelte:element
+  this={tag}
+  class={cn('text-lg font-semibold leading-none tracking-tight', className)}
+  {...$$restProps}
+>
   <slot />
 </svelte:element>
diff --git a/web/src/lib/components/ui/card/card.svelte b/web/src/lib/components/ui/card/card.svelte
index c3330c4..6622fe7 100644
--- a/web/src/lib/components/ui/card/card.svelte
+++ b/web/src/lib/components/ui/card/card.svelte
@@ -8,6 +8,9 @@
   export { className as class };
 </script>
 
-<div class={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)} {...$$restProps}>
+<div
+  class={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
+  {...$$restProps}
+>
   <slot />
 </div>
diff --git a/web/src/lib/components/ui/checkbox/checkbox.svelte b/web/src/lib/components/ui/checkbox/checkbox.svelte
index 9ec0eb1..a343413 100644
--- a/web/src/lib/components/ui/checkbox/checkbox.svelte
+++ b/web/src/lib/components/ui/checkbox/checkbox.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Checkbox as CheckboxPrimitive } from 'bits-ui';
+  import { Checkbox as CheckboxPrimitive } from 'bits-ui';
   import { Check, Minus } from 'lucide-svelte';
   import { cn } from '$lib/utils';
 
@@ -13,22 +13,22 @@
 
 <CheckboxPrimitive.Root
   class={cn(
-		"box-content peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
-		className
-	)}
+    'box-content peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',
+    className,
+  )}
   bind:checked
   {...$$restProps}
   on:click
 >
-	<CheckboxPrimitive.Indicator
-    class={cn("flex items-center justify-center text-current h-4 w-4")}
+  <CheckboxPrimitive.Indicator
+    class={cn('flex items-center justify-center text-current h-4 w-4')}
     let:isChecked
     let:isIndeterminate
   >
-		{#if isChecked}
-			<Check class="h-3.5 w-3.5" />
-		{:else if isIndeterminate}
-			<Minus class="h-3.5 w-3.5" />
-		{/if}
-	</CheckboxPrimitive.Indicator>
+    {#if isChecked}
+      <Check class="h-3.5 w-3.5" />
+    {:else if isIndeterminate}
+      <Minus class="h-3.5 w-3.5" />
+    {/if}
+  </CheckboxPrimitive.Indicator>
 </CheckboxPrimitive.Root>
diff --git a/web/src/lib/components/ui/collapsible/collapsible-content.svelte b/web/src/lib/components/ui/collapsible/collapsible-content.svelte
index 5b6b3e5..b429f3d 100644
--- a/web/src/lib/components/ui/collapsible/collapsible-content.svelte
+++ b/web/src/lib/components/ui/collapsible/collapsible-content.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
-	import { slide } from "svelte/transition";
+  import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+  import { slide } from 'svelte/transition';
 
-	type $$Props = CollapsiblePrimitive.ContentProps;
+  type $$Props = CollapsiblePrimitive.ContentProps;
 
-	export let transition: $$Props["transition"] = slide;
-	export let transitionConfig: $$Props["transitionConfig"] = {
-		duration: 150
-	};
+  export let transition: $$Props['transition'] = slide;
+  export let transitionConfig: $$Props['transitionConfig'] = {
+    duration: 150,
+  };
 </script>
 
 <CollapsiblePrimitive.Content {transition} {transitionConfig} {...$$restProps}>
-	<slot />
+  <slot />
 </CollapsiblePrimitive.Content>
diff --git a/web/src/lib/components/ui/collapsible/index.ts b/web/src/lib/components/ui/collapsible/index.ts
index 04c3c2a..0e20b5d 100644
--- a/web/src/lib/components/ui/collapsible/index.ts
+++ b/web/src/lib/components/ui/collapsible/index.ts
@@ -1,15 +1,15 @@
-import { Collapsible as CollapsiblePrimitive } from "bits-ui";
-import Content from "./collapsible-content.svelte";
+import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+import Content from './collapsible-content.svelte';
 
 const Root = CollapsiblePrimitive.Root;
 const Trigger = CollapsiblePrimitive.Trigger;
 
 export {
-	Root,
-	Content,
-	Trigger,
-	//
-	Root as Collapsible,
-	Content as CollapsibleContent,
-	Trigger as CollapsibleTrigger
+  Root,
+  Content,
+  Trigger,
+  //
+  Root as Collapsible,
+  Content as CollapsibleContent,
+  Trigger as CollapsibleTrigger,
 };
diff --git a/web/src/lib/components/ui/dialog/dialog-description.svelte b/web/src/lib/components/ui/dialog/dialog-description.svelte
index e3f562a..5bc238c 100644
--- a/web/src/lib/components/ui/dialog/dialog-description.svelte
+++ b/web/src/lib/components/ui/dialog/dialog-description.svelte
@@ -8,6 +8,9 @@
   export { className as class };
 </script>
 
-<DialogPrimitive.Description class={cn('text-sm text-muted-foreground', className)} {...$$restProps}>
+<DialogPrimitive.Description
+  class={cn('text-sm text-muted-foreground', className)}
+  {...$$restProps}
+>
   <slot />
 </DialogPrimitive.Description>
diff --git a/web/src/lib/components/ui/dialog/dialog-footer.svelte b/web/src/lib/components/ui/dialog/dialog-footer.svelte
index 1af8d3d..96e4239 100644
--- a/web/src/lib/components/ui/dialog/dialog-footer.svelte
+++ b/web/src/lib/components/ui/dialog/dialog-footer.svelte
@@ -8,6 +8,9 @@
   export { className as class };
 </script>
 
-<div class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...$$restProps}>
+<div
+  class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
+  {...$$restProps}
+>
   <slot />
 </div>
diff --git a/web/src/lib/components/ui/dialog/dialog-title.svelte b/web/src/lib/components/ui/dialog/dialog-title.svelte
index 0f5ce0f..1b80685 100644
--- a/web/src/lib/components/ui/dialog/dialog-title.svelte
+++ b/web/src/lib/components/ui/dialog/dialog-title.svelte
@@ -8,6 +8,9 @@
   export { className as class };
 </script>
 
-<DialogPrimitive.Title class={cn('text-lg font-semibold leading-none tracking-tight', className)} {...$$restProps}>
+<DialogPrimitive.Title
+  class={cn('text-lg font-semibold leading-none tracking-tight', className)}
+  {...$$restProps}
+>
   <slot />
 </DialogPrimitive.Title>
diff --git a/web/src/lib/components/ui/form/form-button.svelte b/web/src/lib/components/ui/form/form-button.svelte
index f72c768..55c2bc9 100644
--- a/web/src/lib/components/ui/form/form-button.svelte
+++ b/web/src/lib/components/ui/form/form-button.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-	import * as Button from '$lib/components/ui/button';
+  import * as Button from '$lib/components/ui/button';
 
   type $$Props = Button.Props;
   type $$Events = Button.Events;
 </script>
 
 <Button.Root type="submit" {...$$restProps} on:click on:keydown>
-	<slot />
+  <slot />
 </Button.Root>
diff --git a/web/src/lib/components/ui/form/form-checkbox.svelte b/web/src/lib/components/ui/form/form-checkbox.svelte
index 9d57bf1..b9b06f3 100644
--- a/web/src/lib/components/ui/form/form-checkbox.svelte
+++ b/web/src/lib/components/ui/form/form-checkbox.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getFormField } from 'formsnap';
+  import { getFormField } from 'formsnap';
   import type { Checkbox as CheckboxPrimitive } from 'bits-ui';
   import { Checkbox } from '$lib/components/ui/checkbox';
 
@@ -15,11 +15,11 @@
 
 <Checkbox
   {...rest}
-  checked={typeof $value === "boolean" ? $value : false}
+  checked={typeof $value === 'boolean' ? $value : false}
   onCheckedChange={(v) => {
-		onCheckedChange?.(v);
-		setValue(v);
-	}}
+    onCheckedChange?.(v);
+    setValue(v);
+  }}
   {...$$restProps}
   on:click
   on:keydown
diff --git a/web/src/lib/components/ui/form/form-description.svelte b/web/src/lib/components/ui/form/form-description.svelte
index 792d80a..081d296 100644
--- a/web/src/lib/components/ui/form/form-description.svelte
+++ b/web/src/lib/components/ui/form/form-description.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Form as FormPrimitive } from 'formsnap';
+  import { Form as FormPrimitive } from 'formsnap';
   import { cn } from '$lib/utils';
   import type { HTMLAttributes } from 'svelte/elements';
 
@@ -8,9 +8,6 @@
   export { className as class };
 </script>
 
-<FormPrimitive.Description
-  class={cn("text-sm text-muted-foreground", className)}
-  {...$$restProps}
->
-	<slot />
+<FormPrimitive.Description class={cn('text-sm text-muted-foreground', className)} {...$$restProps}>
+  <slot />
 </FormPrimitive.Description>
diff --git a/web/src/lib/components/ui/form/form-input.svelte b/web/src/lib/components/ui/form/form-input.svelte
index b7edb33..79b4e81 100644
--- a/web/src/lib/components/ui/form/form-input.svelte
+++ b/web/src/lib/components/ui/form/form-input.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getFormField } from 'formsnap';
+  import { getFormField } from 'formsnap';
   import type { HTMLInputAttributes } from 'svelte/elements';
   import { Input, type InputEvents } from '$lib/components/ui/input';
 
diff --git a/web/src/lib/components/ui/form/form-item.svelte b/web/src/lib/components/ui/form/form-item.svelte
index 9605359..5fa2a7d 100644
--- a/web/src/lib/components/ui/form/form-item.svelte
+++ b/web/src/lib/components/ui/form/form-item.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from '$lib/utils';
+  import { cn } from '$lib/utils';
   import type { HTMLAttributes } from 'svelte/elements';
 
   type $$Props = HTMLAttributes<HTMLDivElement>;
@@ -7,6 +7,6 @@
   export { className as class };
 </script>
 
-<div class={cn("space-y-2", className)} {...$$restProps}>
-	<slot />
+<div class={cn('space-y-2', className)} {...$$restProps}>
+  <slot />
 </div>
diff --git a/web/src/lib/components/ui/form/form-label.svelte b/web/src/lib/components/ui/form/form-label.svelte
index 55b281d..046eb14 100644
--- a/web/src/lib/components/ui/form/form-label.svelte
+++ b/web/src/lib/components/ui/form/form-label.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { Label as LabelPrimitive } from 'bits-ui';
+  import type { Label as LabelPrimitive } from 'bits-ui';
   import { getFormField } from 'formsnap';
   import { cn } from '$lib/utils';
   import { Label } from '$lib/components/ui/label';
@@ -12,10 +12,6 @@
   const { errors, ids } = getFormField();
 </script>
 
-<Label
-  for={$ids.input}
-  class={cn($errors && "text-destructive", className)}
-  {...$$restProps}
->
-	<slot />
+<Label for={$ids.input} class={cn($errors && 'text-destructive', className)} {...$$restProps}>
+  <slot />
 </Label>
diff --git a/web/src/lib/components/ui/form/form-native-select.svelte b/web/src/lib/components/ui/form/form-native-select.svelte
index 4115ebe..1ad382d 100644
--- a/web/src/lib/components/ui/form/form-native-select.svelte
+++ b/web/src/lib/components/ui/form/form-native-select.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Form as FormPrimitive } from 'formsnap';
+  import { Form as FormPrimitive } from 'formsnap';
   import { buttonVariants } from '$lib/components/ui/button';
   import { cn } from '$lib/utils';
   import { ChevronDown } from 'lucide-svelte';
@@ -13,12 +13,12 @@
 
 <FormPrimitive.Select
   class={cn(
-		buttonVariants({ variant: "outline" }),
-		"appearance-none bg-transparent font-normal",
-		className
-	)}
+    buttonVariants({ variant: 'outline' }),
+    'appearance-none bg-transparent font-normal',
+    className,
+  )}
   {...$$restProps}
 >
-	<slot />
+  <slot />
 </FormPrimitive.Select>
 <ChevronDown class="absolute right-3 top-2.5 h-4 w-4 opacity-50" />
diff --git a/web/src/lib/components/ui/form/form-radio-group.svelte b/web/src/lib/components/ui/form/form-radio-group.svelte
index bc69c50..3c7710e 100644
--- a/web/src/lib/components/ui/form/form-radio-group.svelte
+++ b/web/src/lib/components/ui/form/form-radio-group.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getFormField } from 'formsnap';
+  import { getFormField } from 'formsnap';
   import type { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
   import * as RadioGroup from '$lib/components/ui/radio-group';
 
@@ -12,11 +12,11 @@
 <RadioGroup.Root
   {...$attrStore}
   onValueChange={(v) => {
-		onValueChange?.(v);
-		setValue(v);
-	}}
+    onValueChange?.(v);
+    setValue(v);
+  }}
   {...$$restProps}
 >
-	<slot />
-	<input hidden {name} value={$value} />
+  <slot />
+  <input hidden {name} value={$value} />
 </RadioGroup.Root>
diff --git a/web/src/lib/components/ui/form/form-select-trigger.svelte b/web/src/lib/components/ui/form/form-select-trigger.svelte
index b4b1d9d..da23a92 100644
--- a/web/src/lib/components/ui/form/form-select-trigger.svelte
+++ b/web/src/lib/components/ui/form/form-select-trigger.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import * as Select from '$lib/components/ui/select';
+  import * as Select from '$lib/components/ui/select';
   import type { Select as SelectPrimitive } from 'bits-ui';
   import { getFormField } from 'formsnap';
 
@@ -12,6 +12,6 @@
 </script>
 
 <Select.Trigger {...$$restProps} {...$attrStore} on:click on:keydown>
-	<Select.Value {placeholder} />
-	<slot />
+  <Select.Value {placeholder} />
+  <slot />
 </Select.Trigger>
diff --git a/web/src/lib/components/ui/form/form-select.svelte b/web/src/lib/components/ui/form/form-select.svelte
index dc5aef5..ab562e6 100644
--- a/web/src/lib/components/ui/form/form-select.svelte
+++ b/web/src/lib/components/ui/form/form-select.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import * as Select from '$lib/components/ui/select';
+  import * as Select from '$lib/components/ui/select';
   import { getFormField } from 'formsnap';
   import type { Select as SelectPrimitive } from 'bits-ui';
 
@@ -10,11 +10,11 @@
 
 <Select.Root
   onSelectedChange={(v) => {
-		onSelectedChange?.(v);
-		setValue(v ? v.value : undefined);
-	}}
+    onSelectedChange?.(v);
+    setValue(v ? v.value : undefined);
+  }}
   {...$$restProps}
 >
-	<slot />
-	<input hidden {name} value={$value} />
+  <slot />
+  <input hidden {name} value={$value} />
 </Select.Root>
diff --git a/web/src/lib/components/ui/form/form-switch.svelte b/web/src/lib/components/ui/form/form-switch.svelte
index 958ac41..41d98ab 100644
--- a/web/src/lib/components/ui/form/form-switch.svelte
+++ b/web/src/lib/components/ui/form/form-switch.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getFormField } from 'formsnap';
+  import { getFormField } from 'formsnap';
   import type { Switch as SwitchPrimitive } from 'bits-ui';
   import { Switch } from '$lib/components/ui/switch';
 
@@ -13,11 +13,11 @@
 
 <Switch
   {...$attrStore}
-  checked={typeof $value === "boolean" ? $value : false}
+  checked={typeof $value === 'boolean' ? $value : false}
   onCheckedChange={(v) => {
-		onCheckedChange?.(v);
-		setValue(v);
-	}}
+    onCheckedChange?.(v);
+    setValue(v);
+  }}
   {...$$restProps}
   on:click
   on:keydown
diff --git a/web/src/lib/components/ui/form/form-textarea.svelte b/web/src/lib/components/ui/form/form-textarea.svelte
index 4b4a481..01204ab 100644
--- a/web/src/lib/components/ui/form/form-textarea.svelte
+++ b/web/src/lib/components/ui/form/form-textarea.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-	import { getFormField } from 'formsnap';
+  import { getFormField } from 'formsnap';
   import type { HTMLTextareaAttributes } from 'svelte/elements';
   import type { TextareaGetFormField } from '.';
-  import {
-    Textarea,
-    type TextareaEvents,
-  } from '$lib/components/ui/textarea';
+  import { Textarea, type TextareaEvents } from '$lib/components/ui/textarea';
 
   type $$Props = HTMLTextareaAttributes;
   type $$Events = TextareaEvents;
diff --git a/web/src/lib/components/ui/form/form-validation.svelte b/web/src/lib/components/ui/form/form-validation.svelte
index fb741d0..46c67a0 100644
--- a/web/src/lib/components/ui/form/form-validation.svelte
+++ b/web/src/lib/components/ui/form/form-validation.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Form as FormPrimitive } from 'formsnap';
+  import { Form as FormPrimitive } from 'formsnap';
   import { cn } from '$lib/utils';
   import type { HTMLAttributes } from 'svelte/elements';
 
@@ -9,6 +9,6 @@
 </script>
 
 <FormPrimitive.Validation
-  class={cn("text-sm font-medium text-destructive", className)}
+  class={cn('text-sm font-medium text-destructive', className)}
   {...$$restProps}
 />
diff --git a/web/src/lib/components/ui/form/index.ts b/web/src/lib/components/ui/form/index.ts
index 6ff040d..51360b4 100644
--- a/web/src/lib/components/ui/form/index.ts
+++ b/web/src/lib/components/ui/form/index.ts
@@ -27,10 +27,7 @@ const SelectGroup = SelectComp.Group;
 const SelectItem = SelectComp.Item;
 const SelectSeparator = SelectComp.Separator;
 
-export type TextareaGetFormField = Omit<
-  ReturnType<typeof getFormField>,
-  'value'
-> & {
+export type TextareaGetFormField = Omit<ReturnType<typeof getFormField>, 'value'> & {
   value: Writable<string>;
 };
 
diff --git a/web/src/lib/components/ui/input/input.svelte b/web/src/lib/components/ui/input/input.svelte
index b62f390..5cc9b67 100644
--- a/web/src/lib/components/ui/input/input.svelte
+++ b/web/src/lib/components/ui/input/input.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { HTMLInputAttributes } from 'svelte/elements';
+  import type { HTMLInputAttributes } from 'svelte/elements';
   import { cn } from '$lib/utils';
   import type { InputEvents } from '.';
 
@@ -13,9 +13,9 @@
 
 <input
   class={cn(
-		"flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0  file:bg-transparent file:text-foreground file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-		className
-	)}
+    'flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0  file:bg-transparent file:text-foreground file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+    className,
+  )}
   bind:value
   on:blur
   on:change
diff --git a/web/src/lib/components/ui/label/label.svelte b/web/src/lib/components/ui/label/label.svelte
index 3651ae7..e6bfb0c 100644
--- a/web/src/lib/components/ui/label/label.svelte
+++ b/web/src/lib/components/ui/label/label.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Label as LabelPrimitive } from 'bits-ui';
+  import { Label as LabelPrimitive } from 'bits-ui';
   import { cn } from '$lib/utils';
 
   type $$Props = LabelPrimitive.Props;
@@ -11,11 +11,11 @@
 
 <LabelPrimitive.Root
   class={cn(
-		"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-		className
-	)}
+    'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+    className,
+  )}
   {...$$restProps}
   on:mousedown
 >
-	<slot />
+  <slot />
 </LabelPrimitive.Root>
diff --git a/web/src/lib/components/ui/radio-group/radio-group-item.svelte b/web/src/lib/components/ui/radio-group/radio-group-item.svelte
index 7d3221e..37b6fd9 100644
--- a/web/src/lib/components/ui/radio-group/radio-group-item.svelte
+++ b/web/src/lib/components/ui/radio-group/radio-group-item.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
+  import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
   import { Circle } from 'lucide-svelte';
   import { cn } from '$lib/utils';
 
@@ -14,15 +14,15 @@
 <RadioGroupPrimitive.Item
   {value}
   class={cn(
-		"aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-		className
-	)}
+    'aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+    className,
+  )}
   {...$$restProps}
   on:click
 >
-	<div class="flex items-center justify-center">
-		<RadioGroupPrimitive.ItemIndicator>
-			<Circle class="h-2.5 w-2.5 fill-current text-current" />
-		</RadioGroupPrimitive.ItemIndicator>
-	</div>
+  <div class="flex items-center justify-center">
+    <RadioGroupPrimitive.ItemIndicator>
+      <Circle class="h-2.5 w-2.5 fill-current text-current" />
+    </RadioGroupPrimitive.ItemIndicator>
+  </div>
 </RadioGroupPrimitive.Item>
diff --git a/web/src/lib/components/ui/radio-group/radio-group.svelte b/web/src/lib/components/ui/radio-group/radio-group.svelte
index 4f10eb6..f8b5e44 100644
--- a/web/src/lib/components/ui/radio-group/radio-group.svelte
+++ b/web/src/lib/components/ui/radio-group/radio-group.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
+  import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
   import { cn } from '$lib/utils';
 
   type $$Props = RadioGroupPrimitive.Props;
@@ -9,10 +9,6 @@
   export { className as class };
 </script>
 
-<RadioGroupPrimitive.Root
-  bind:value
-  class={cn("grid gap-2", className)}
-  {...$$restProps}
->
-	<slot />
+<RadioGroupPrimitive.Root bind:value class={cn('grid gap-2', className)} {...$$restProps}>
+  <slot />
 </RadioGroupPrimitive.Root>
diff --git a/web/src/lib/components/ui/select/select-content.svelte b/web/src/lib/components/ui/select/select-content.svelte
index 0439efe..f6b6d70 100644
--- a/web/src/lib/components/ui/select/select-content.svelte
+++ b/web/src/lib/components/ui/select/select-content.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from 'bits-ui';
+  import { Select as SelectPrimitive } from 'bits-ui';
   import { cn, flyAndScale } from '$lib/utils';
   import { scale } from 'svelte/transition';
 
@@ -24,13 +24,13 @@
   {outTransition}
   {outTransitionConfig}
   class={cn(
-		"relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md outline-none",
-		className
-	)}
+    'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md outline-none',
+    className,
+  )}
   {...$$restProps}
   on:keydown
 >
-	<div class="w-full p-1">
-		<slot />
-	</div>
+  <div class="w-full p-1">
+    <slot />
+  </div>
 </SelectPrimitive.Content>
diff --git a/web/src/lib/components/ui/select/select-item.svelte b/web/src/lib/components/ui/select/select-item.svelte
index 51ee840..b821691 100644
--- a/web/src/lib/components/ui/select/select-item.svelte
+++ b/web/src/lib/components/ui/select/select-item.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from '$lib/utils';
+  import { cn } from '$lib/utils';
   import { Select as SelectPrimitive } from 'bits-ui';
   import { Check } from 'lucide-svelte';
 
@@ -18,9 +18,9 @@
   {disabled}
   {label}
   class={cn(
-		"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-		className
-	)}
+    'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+    className,
+  )}
   {...$$restProps}
   on:click
   on:keydown
@@ -29,10 +29,10 @@
   on:pointerleave
   on:pointermove
 >
-	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-		<SelectPrimitive.ItemIndicator>
-			<Check class="h-4 w-4" />
-		</SelectPrimitive.ItemIndicator>
-	</span>
-	<slot />
+  <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <SelectPrimitive.ItemIndicator>
+      <Check class="h-4 w-4" />
+    </SelectPrimitive.ItemIndicator>
+  </span>
+  <slot />
 </SelectPrimitive.Item>
diff --git a/web/src/lib/components/ui/select/select-label.svelte b/web/src/lib/components/ui/select/select-label.svelte
index 23defbb..dce6ac3 100644
--- a/web/src/lib/components/ui/select/select-label.svelte
+++ b/web/src/lib/components/ui/select/select-label.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from 'bits-ui';
+  import { Select as SelectPrimitive } from 'bits-ui';
   import { cn } from '$lib/utils';
 
   type $$Props = SelectPrimitive.LabelProps;
@@ -9,8 +9,8 @@
 </script>
 
 <SelectPrimitive.Label
-  class={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+  class={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
   {...$$restProps}
 >
-	<slot />
+  <slot />
 </SelectPrimitive.Label>
diff --git a/web/src/lib/components/ui/select/select-separator.svelte b/web/src/lib/components/ui/select/select-separator.svelte
index d8c7df8..b01589e 100644
--- a/web/src/lib/components/ui/select/select-separator.svelte
+++ b/web/src/lib/components/ui/select/select-separator.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from 'bits-ui';
+  import { Select as SelectPrimitive } from 'bits-ui';
   import { cn } from '$lib/utils';
 
   type $$Props = SelectPrimitive.SeparatorProps;
@@ -8,7 +8,4 @@
   export { className as class };
 </script>
 
-<SelectPrimitive.Separator
-  class={cn("-mx-1 my-1 h-px bg-muted", className)}
-  {...$$restProps}
-/>
+<SelectPrimitive.Separator class={cn('-mx-1 my-1 h-px bg-muted', className)} {...$$restProps} />
diff --git a/web/src/lib/components/ui/select/select-trigger.svelte b/web/src/lib/components/ui/select/select-trigger.svelte
index cc62550..cb76069 100644
--- a/web/src/lib/components/ui/select/select-trigger.svelte
+++ b/web/src/lib/components/ui/select/select-trigger.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from 'bits-ui';
+  import { Select as SelectPrimitive } from 'bits-ui';
   import { ChevronDown } from 'lucide-svelte';
   import { cn } from '$lib/utils';
 
@@ -12,16 +12,16 @@
 
 <SelectPrimitive.Trigger
   class={cn(
-		"flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-		className
-	)}
+    'flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+    className,
+  )}
   {...$$restProps}
   let:builder
   on:click
   on:keydown
 >
-	<slot {builder} />
-	<div>
-		<ChevronDown class="h-4 w-4 opacity-50" />
-	</div>
+  <slot {builder} />
+  <div>
+    <ChevronDown class="h-4 w-4 opacity-50" />
+  </div>
 </SelectPrimitive.Trigger>
diff --git a/web/src/lib/components/ui/select/select.svelte b/web/src/lib/components/ui/select/select.svelte
index 92a5e7c..5e2813a 100644
--- a/web/src/lib/components/ui/select/select.svelte
+++ b/web/src/lib/components/ui/select/select.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from 'bits-ui';
+  import { Select as SelectPrimitive } from 'bits-ui';
 
   type $$Props = SelectPrimitive.Props;
 
@@ -8,5 +8,5 @@
 </script>
 
 <SelectPrimitive.Root bind:selected bind:open {...$$restProps}>
-	<slot />
+  <slot />
 </SelectPrimitive.Root>
diff --git a/web/src/lib/components/ui/skeleton/index.ts b/web/src/lib/components/ui/skeleton/index.ts
index 2be5c50..2d93ff2 100644
--- a/web/src/lib/components/ui/skeleton/index.ts
+++ b/web/src/lib/components/ui/skeleton/index.ts
@@ -1,7 +1,7 @@
-import Root from "./skeleton.svelte";
+import Root from './skeleton.svelte';
 
 export {
-	Root,
-	//
-	Root as Skeleton
+  Root,
+  //
+  Root as Skeleton,
 };
diff --git a/web/src/lib/components/ui/skeleton/skeleton.svelte b/web/src/lib/components/ui/skeleton/skeleton.svelte
index b7afd7a..5539c43 100644
--- a/web/src/lib/components/ui/skeleton/skeleton.svelte
+++ b/web/src/lib/components/ui/skeleton/skeleton.svelte
@@ -1,14 +1,11 @@
 <script lang="ts">
-	import { cn } from "$lib/utils";
-	import type { HTMLAttributes } from "svelte/elements";
+  import { cn } from '$lib/utils';
+  import type { HTMLAttributes } from 'svelte/elements';
 
-	type $$Props = HTMLAttributes<HTMLDivElement>;
+  type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export { className as class };
 </script>
 
-<div
-	class={cn("animate-pulse rounded-md bg-muted", className)}
-	{...$$restProps}
-/>
+<div class={cn('animate-pulse rounded-md bg-muted', className)} {...$$restProps} />
diff --git a/web/src/lib/components/ui/switch/switch.svelte b/web/src/lib/components/ui/switch/switch.svelte
index b633976..f2c27b3 100644
--- a/web/src/lib/components/ui/switch/switch.svelte
+++ b/web/src/lib/components/ui/switch/switch.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Switch as SwitchPrimitive } from 'bits-ui';
+  import { Switch as SwitchPrimitive } from 'bits-ui';
   import { cn } from '$lib/utils';
 
   type $$Props = SwitchPrimitive.Props;
@@ -12,14 +12,14 @@
 <SwitchPrimitive.Root
   bind:checked
   class={cn(
-		"peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-		className
-	)}
+    'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+    className,
+  )}
   {...$$restProps}
 >
-	<SwitchPrimitive.Thumb
+  <SwitchPrimitive.Thumb
     class={cn(
-			"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
-		)}
+      'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
+    )}
   />
 </SwitchPrimitive.Root>
diff --git a/web/src/lib/components/ui/textarea/textarea.svelte b/web/src/lib/components/ui/textarea/textarea.svelte
index 357b394..7cf4928 100644
--- a/web/src/lib/components/ui/textarea/textarea.svelte
+++ b/web/src/lib/components/ui/textarea/textarea.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { HTMLTextareaAttributes } from 'svelte/elements';
+  import type { HTMLTextareaAttributes } from 'svelte/elements';
   import { cn } from '$lib/utils';
 
   type $$Props = HTMLTextareaAttributes;
@@ -11,9 +11,9 @@
 
 <textarea
   class={cn(
-		"flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-		className
-	)}
+    'flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+    className,
+  )}
   bind:value
   on:blur
   on:change
diff --git a/web/src/lib/network.ts b/web/src/lib/network.ts
index 7a2b194..529bf43 100644
--- a/web/src/lib/network.ts
+++ b/web/src/lib/network.ts
@@ -35,7 +35,10 @@ export default class Network {
 
   public static async getInUsePorts(): Promise<number[]> {
     const ports = [];
-    const output = await Shell.exec(`netstat -tulpn | grep LISTEN | awk '{print $4}' | awk -F ':' '{print $NF}'`, true);
+    const output = await Shell.exec(
+      `netstat -tulpn | grep LISTEN | awk '{print $4}' | awk -F ':' '{print $NF}'`,
+      true,
+    );
     for (const line of output.split('\n')) {
       const clean = Number(line.trim());
       if (!isNaN(clean)) ports.push(clean);
diff --git a/web/src/lib/shell.ts b/web/src/lib/shell.ts
index 2f4a4e5..28b53ce 100644
--- a/web/src/lib/shell.ts
+++ b/web/src/lib/shell.ts
@@ -2,7 +2,11 @@ import { exec } from 'child_process';
 import logger from '$lib/logger';
 
 export default class Shell {
-  public static async exec(command: string, safe: boolean = false, ...args: string[]): Promise<string> {
+  public static async exec(
+    command: string,
+    safe: boolean = false,
+    ...args: string[]
+  ): Promise<string> {
     if (process.platform !== 'linux') {
       throw new Error('This program is not meant to run non UNIX systems');
     }
diff --git a/web/src/lib/typings.ts b/web/src/lib/typings.ts
index d8b15bf..9bff844 100644
--- a/web/src/lib/typings.ts
+++ b/web/src/lib/typings.ts
@@ -77,9 +77,8 @@ export type APISuccessResponse<D> = {
 };
 
 export type SafeReturn<T, K = any> = LeastOne<{
-  data: T,
-  error: K
-}>
+  data: T;
+  error: K;
+}>;
 
 export type LeastOne<T, U = { [K in keyof T]: Pick<T, K> }> = Partial<T> & U[keyof U];
-
diff --git a/web/src/lib/wireguard/index.ts b/web/src/lib/wireguard/index.ts
index b3bfbe9..57bc03e 100644
--- a/web/src/lib/wireguard/index.ts
+++ b/web/src/lib/wireguard/index.ts
@@ -531,7 +531,10 @@ export async function isIPReserved(ip: string): Promise<boolean> {
 }
 
 export async function isPortReserved(port: number): Promise<boolean> {
-  const inUsePorts = [await Network.getInUsePorts(), (await getServers()).map((s) => Number(s.listen))].flat();
+  const inUsePorts = [
+    await Network.getInUsePorts(),
+    (await getServers()).map((s) => Number(s.listen)),
+  ].flat();
   return inUsePorts.includes(port);
 }
 
@@ -594,7 +597,10 @@ export async function findServerIndex(id: string): Promise<number | undefined> {
   return undefined;
 }
 
-export async function findServer(id: string | undefined, hash?: string): Promise<WgServer | undefined> {
+export async function findServer(
+  id: string | undefined,
+  hash?: string,
+): Promise<WgServer | undefined> {
   const servers = await getServers();
   return id
     ? servers.find((s) => s.id === id)
@@ -660,7 +666,9 @@ export async function genServerConf(server: WgServer): Promise<string> {
     lines.push(`PublicKey = ${peer.publicKey}`);
     lines.push(`${peer.preSharedKey ? `PresharedKey = ${peer.preSharedKey}` : 'OMIT'}`);
     lines.push(`AllowedIPs = ${peer.allowedIps}/32`);
-    lines.push(`${peer.persistentKeepalive ? `PersistentKeepalive = ${peer.persistentKeepalive}` : 'OMIT'}`);
+    lines.push(
+      `${peer.persistentKeepalive ? `PersistentKeepalive = ${peer.persistentKeepalive}` : 'OMIT'}`,
+    );
   });
 
   return lines.filter((l) => l !== 'OMIT').join('\n');
diff --git a/web/src/lib/wireguard/schema.ts b/web/src/lib/wireguard/schema.ts
index 97004e2..d47c39f 100644
--- a/web/src/lib/wireguard/schema.ts
+++ b/web/src/lib/wireguard/schema.ts
@@ -32,9 +32,7 @@ export const PortSchema = z
     },
   );
 
-export const TorSchema = z
-  .boolean()
-  .default(false);
+export const TorSchema = z.boolean().default(false);
 
 export const DnsSchema = z
   .string()
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 6397c15..cbd3011 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -3,4 +3,4 @@
   import '$lib/assets/fontawesome/index.css';
 </script>
 
-<slot />
\ No newline at end of file
+<slot />
diff --git a/web/src/routes/+page.server.ts b/web/src/routes/+page.server.ts
index 19d984f..7af1dc1 100644
--- a/web/src/routes/+page.server.ts
+++ b/web/src/routes/+page.server.ts
@@ -1,6 +1,13 @@
 import { type Actions, error } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
-import { findServer, generateWgServer, getServers, isIPReserved, isPortReserved, WGServer } from '$lib/wireguard';
+import {
+  findServer,
+  generateWgServer,
+  getServers,
+  isIPReserved,
+  isPortReserved,
+  WGServer,
+} from '$lib/wireguard';
 import { setError, superValidate } from 'sveltekit-superforms/server';
 import { CreateServerSchema } from './schema';
 import { NameSchema } from '$lib/wireguard/schema';
diff --git a/web/src/routes/CreateServerDialog.svelte b/web/src/routes/CreateServerDialog.svelte
index d9a89f3..ffad8d4 100644
--- a/web/src/routes/CreateServerDialog.svelte
+++ b/web/src/routes/CreateServerDialog.svelte
@@ -22,7 +22,11 @@
   import { goto } from '$app/navigation';
   import { FormItem } from '$lib/components/ui/form/index.js';
   import { cn } from '$lib/utils';
-  import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '$lib/components/ui/collapsible';
+  import {
+    Collapsible,
+    CollapsibleContent,
+    CollapsibleTrigger,
+  } from '$lib/components/ui/collapsible';
   import { Button } from '$lib/components/ui/button';
 
   let loading: boolean = false;
@@ -84,7 +88,9 @@
         <FormItem>
           <FormLabel>Port</FormLabel>
           <FormInput placeholder={'e.g. 51820'} type={'text'} />
-          <FormDescription>This is the port that the WireGuard server will listen on.</FormDescription>
+          <FormDescription
+            >This is the port that the WireGuard server will listen on.</FormDescription
+          >
           <FormValidation />
         </FormItem>
       </FormField>
@@ -112,7 +118,9 @@
             <FormItem>
               <FormLabel>DNS</FormLabel>
               <FormInput placeholder={'e.g. 1.1.1.1'} type={'text'} />
-              <FormDescription>Optional. This is the DNS server that will be pushed to clients.</FormDescription>
+              <FormDescription
+                >Optional. This is the DNS server that will be pushed to clients.</FormDescription
+              >
               <FormValidation />
             </FormItem>
           </FormField>
@@ -130,7 +138,8 @@
 
       <DialogFooter>
         <FormButton>
-          <i class={cn(loading ? 'far fa-arrow-rotate-right animate-spin' : 'far fa-plus', 'mr-2')}></i>
+          <i class={cn(loading ? 'far fa-arrow-rotate-right animate-spin' : 'far fa-plus', 'mr-2')}
+          ></i>
           Create
         </FormButton>
       </DialogFooter>
diff --git a/web/src/routes/Server.svelte b/web/src/routes/Server.svelte
index b5ddab2..3e3129f 100644
--- a/web/src/routes/Server.svelte
+++ b/web/src/routes/Server.svelte
@@ -17,9 +17,14 @@
 <div class="flex items-center justify-between p-4 gap-x-4">
   <div class="w-full md:w-2/3 flex items-center gap-x-2">
     <div class="flex grow">
-      <div class={'w-12 aspect-square flex items-center justify-center mr-4 rounded-full bg-gray-200 max-md:hidden'}>
+      <div
+        class={'w-12 aspect-square flex items-center justify-center mr-4 rounded-full bg-gray-200 max-md:hidden'}
+      >
         <i
-          class={cn(server.tor ? 'fa-solid fa-onion text-purple-700' : 'fa-solid fa-server text-gray-400', 'text-xl')}
+          class={cn(
+            server.tor ? 'fa-solid fa-onion text-purple-700' : 'fa-solid fa-server text-gray-400',
+            'text-xl',
+          )}
         />
       </div>
 
@@ -36,7 +41,9 @@
           asChild
         >
           <a href={`/${server.id}`} title="Manage the Server" class={cn({ hidden: editMode })}>
-            <span class="text-lg md:text-base hover:text-primary hover:font-medium"> {server.name} </span>
+            <span class="text-lg md:text-base hover:text-primary hover:font-medium">
+              {server.name}
+            </span>
           </a>
         </EditableText>
         <CopiableText value={addressPort} class="text-sm" showInHover={true}>
diff --git a/web/src/routes/[serverId]/CreatePeerDialog.svelte b/web/src/routes/[serverId]/CreatePeerDialog.svelte
index c0772c3..547e6d4 100644
--- a/web/src/routes/[serverId]/CreatePeerDialog.svelte
+++ b/web/src/routes/[serverId]/CreatePeerDialog.svelte
@@ -9,7 +9,14 @@
     DialogTitle,
     DialogTrigger,
   } from '$lib/components/ui/dialog';
-  import { Form, FormButton, FormField, FormInput, FormLabel, FormValidation } from '$lib/components/ui/form';
+  import {
+    Form,
+    FormButton,
+    FormField,
+    FormInput,
+    FormLabel,
+    FormValidation,
+  } from '$lib/components/ui/form';
   import { FormItem } from '$lib/components/ui/form/index.js';
   import { cn } from '$lib/utils';
   import { invalidateAll } from '$app/navigation';
@@ -70,7 +77,8 @@
 
       <DialogFooter>
         <FormButton>
-          <i class={cn(loading ? 'far fa-arrow-rotate-right animate-spin' : 'far fa-plus', 'mr-2')}></i>
+          <i class={cn(loading ? 'far fa-arrow-rotate-right animate-spin' : 'far fa-plus', 'mr-2')}
+          ></i>
           Create
         </FormButton>
       </DialogFooter>
diff --git a/web/src/routes/[serverId]/Peer.svelte b/web/src/routes/[serverId]/Peer.svelte
index d7a2908..6a5b439 100644
--- a/web/src/routes/[serverId]/Peer.svelte
+++ b/web/src/routes/[serverId]/Peer.svelte
@@ -35,7 +35,7 @@
       return;
     }
     // create a blob
-    const blob = new Blob([ conf ], { type: 'text/plain' });
+    const blob = new Blob([conf], { type: 'text/plain' });
     // create a link
     const link = document.createElement('a');
     link.href = window.URL.createObjectURL(blob);
@@ -55,9 +55,13 @@
   };
 </script>
 
-<div class="flex items-center justify-between p-4 border border-neutral-200/60 rounded-md hover:border-neutral-200">
+<div
+  class="flex items-center justify-between p-4 border border-neutral-200/60 rounded-md hover:border-neutral-200"
+>
   <div class="flex items-center gap-x-2">
-    <div class={'w-12 aspect-square flex items-center justify-center mr-4 rounded-full bg-gray-200 max-md:hidden'}>
+    <div
+      class={'w-12 aspect-square flex items-center justify-center mr-4 rounded-full bg-gray-200 max-md:hidden'}
+    >
       <i class={'fas fa-user text-gray-400 text-lg'} />
     </div>
 
diff --git a/web/src/routes/api/qrcode/+server.ts b/web/src/routes/api/qrcode/+server.ts
index 68ecac8..e7cefae 100644
--- a/web/src/routes/api/qrcode/+server.ts
+++ b/web/src/routes/api/qrcode/+server.ts
@@ -2,7 +2,10 @@ import type { RequestHandler } from '@sveltejs/kit';
 import QRCode from 'qrcode';
 
 export const POST: RequestHandler = async ({ request }) => {
-  if (!request.headers.has('Content-Type') || request.headers.get('Content-Type') !== 'text/plain') {
+  if (
+    !request.headers.has('Content-Type') ||
+    request.headers.get('Content-Type') !== 'text/plain'
+  ) {
     return new Response(null, { status: 400, headers: { 'Content-Type': 'text/plain' } });
   }
 
diff --git a/web/src/routes/login/+page.svelte b/web/src/routes/login/+page.svelte
index 636bcf6..425f107 100644
--- a/web/src/routes/login/+page.svelte
+++ b/web/src/routes/login/+page.svelte
@@ -2,7 +2,15 @@
   import { formSchema, type FormSchema } from './schema';
   import type { SuperValidated } from 'sveltekit-superforms';
   import { Card, CardContent } from '$lib/components/ui/card';
-  import { Form, FormButton, FormField, FormInput, FormItem, FormLabel, FormValidation } from '$lib/components/ui/form';
+  import {
+    Form,
+    FormButton,
+    FormField,
+    FormInput,
+    FormItem,
+    FormLabel,
+    FormValidation,
+  } from '$lib/components/ui/form';
   import { goto } from '$app/navigation';
   import type { FormOptions } from 'formsnap';
 
diff --git a/web/src/routes/schema.ts b/web/src/routes/schema.ts
index b5a7db9..d1f43de 100644
--- a/web/src/routes/schema.ts
+++ b/web/src/routes/schema.ts
@@ -1,5 +1,12 @@
 import { z } from 'zod';
-import { AddressSchema, DnsSchema, MtuSchema, NameSchema, PortSchema, TorSchema } from '$lib/wireguard/schema';
+import {
+  AddressSchema,
+  DnsSchema,
+  MtuSchema,
+  NameSchema,
+  PortSchema,
+  TorSchema,
+} from '$lib/wireguard/schema';
 
 export const CreateServerSchema = z.object({
   name: NameSchema,
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index f15fd8d..3ac1e73 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -2,16 +2,16 @@ import { fontFamily } from 'tailwindcss/defaultTheme';
 
 /** @type {import('tailwindcss').Config} */
 const config = {
-  darkMode: [ 'class' ],
-  content: [ './src/**/*.{html,js,svelte,ts}' ],
-  safelist: [ 'dark' ],
+  darkMode: ['class'],
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+  safelist: ['dark'],
   theme: {
     container: {
       center: true,
       padding: '2rem',
       screens: {
-        '2xl': '1400px'
-      }
+        '2xl': '1400px',
+      },
     },
     extend: {
       colors: {
@@ -22,43 +22,43 @@ const config = {
         foreground: 'hsl(var(--foreground) / <alpha-value>)',
         primary: {
           DEFAULT: 'hsl(var(--primary) / <alpha-value>)',
-          foreground: 'hsl(var(--primary-foreground) / <alpha-value>)'
+          foreground: 'hsl(var(--primary-foreground) / <alpha-value>)',
         },
         secondary: {
           DEFAULT: 'hsl(var(--secondary) / <alpha-value>)',
-          foreground: 'hsl(var(--secondary-foreground) / <alpha-value>)'
+          foreground: 'hsl(var(--secondary-foreground) / <alpha-value>)',
         },
         destructive: {
           DEFAULT: 'hsl(var(--destructive) / <alpha-value>)',
-          foreground: 'hsl(var(--destructive-foreground) / <alpha-value>)'
+          foreground: 'hsl(var(--destructive-foreground) / <alpha-value>)',
         },
         muted: {
           DEFAULT: 'hsl(var(--muted) / <alpha-value>)',
-          foreground: 'hsl(var(--muted-foreground) / <alpha-value>)'
+          foreground: 'hsl(var(--muted-foreground) / <alpha-value>)',
         },
         accent: {
           DEFAULT: 'hsl(var(--accent) / <alpha-value>)',
-          foreground: 'hsl(var(--accent-foreground) / <alpha-value>)'
+          foreground: 'hsl(var(--accent-foreground) / <alpha-value>)',
         },
         popover: {
           DEFAULT: 'hsl(var(--popover) / <alpha-value>)',
-          foreground: 'hsl(var(--popover-foreground) / <alpha-value>)'
+          foreground: 'hsl(var(--popover-foreground) / <alpha-value>)',
         },
         card: {
           DEFAULT: 'hsl(var(--card) / <alpha-value>)',
-          foreground: 'hsl(var(--card-foreground) / <alpha-value>)'
-        }
+          foreground: 'hsl(var(--card-foreground) / <alpha-value>)',
+        },
       },
       borderRadius: {
         lg: 'var(--radius)',
         md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)'
+        sm: 'calc(var(--radius) - 4px)',
       },
       fontFamily: {
-        sans: [ ...fontFamily.sans ]
-      }
-    }
-  }
+        sans: [...fontFamily.sans],
+      },
+    },
+  },
 };
 
 export default config;
diff --git a/web/vite.config.ts b/web/vite.config.ts
index a551f99..0e92568 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -1,8 +1,8 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 
 export default {
-  plugins: [ sveltekit() ],
+  plugins: [sveltekit()],
   test: {
-    include: [ 'src/**/*.{test,spec}.{js,ts}' ]
-  }
+    include: ['src/**/*.{test,spec}.{js,ts}'],
+  },
 };