From 8929b5af6ecb732164a39c48ce18a8a78729f927 Mon Sep 17 00:00:00 2001
From: Corentin Thomasset <corentin.thomasset74@gmail.com>
Date: Sun, 27 Oct 2024 15:02:54 +0100
Subject: [PATCH] feat(ui): sidenav layout

---
 packages/app/src/locales/en.yaml              |   4 +-
 .../src/modules/app/components/app-header.vue |  27 ++--
 .../modules/app/components/locale-picker.vue  |  34 +++++
 .../modules/app/components/sidenav-menu.vue   |   4 +-
 .../app/src/modules/app/layouts/default.vue   |  18 ++-
 .../app/src/modules/app/layouts/sidenav.vue   |  43 +-----
 packages/app/src/modules/app/pages/about.vue  |   3 +
 packages/app/src/modules/app/pages/index.vue  |   4 +-
 .../components/command-palette.vue            |   3 +-
 .../shared/composables/useRefreshableState.ts |   2 +-
 .../token-generator/token-generator.models.ts |   7 +-
 .../token-generator/token-generator.vue       | 133 +++++++++++++-----
 .../modules/tools/modules/tools.modules.ts    |   5 +-
 .../src/modules/ui/components/badge/Badge.vue |  12 +-
 .../src/modules/ui/components/badge/index.ts  |   8 +-
 .../src/modules/ui/components/card/Card.vue   |   8 +-
 .../ui/components/card/CardContent.vue        |   8 +-
 .../ui/components/card/CardDescription.vue    |   8 +-
 .../modules/ui/components/card/CardFooter.vue |   8 +-
 .../modules/ui/components/card/CardHeader.vue |   8 +-
 .../modules/ui/components/card/CardTitle.vue  |   8 +-
 .../src/modules/ui/components/card/index.ts   |  12 +-
 .../modules/ui/components/checkbox/index.ts   |   2 +-
 .../modules/ui/components/command/Command.vue |  20 +--
 .../ui/components/command/CommandDialog.vue   |  14 +-
 .../ui/components/command/CommandEmpty.vue    |  16 +--
 .../ui/components/command/CommandGroup.vue    |  20 +--
 .../ui/components/command/CommandItem.vue     |  20 +--
 .../ui/components/command/CommandList.vue     |  20 +--
 .../components/command/CommandSeparator.vue   |  16 +--
 .../ui/components/command/CommandShortcut.vue |   8 +-
 .../modules/ui/components/command/index.ts    |  18 +--
 .../modules/ui/components/dialog/Dialog.vue   |   8 +-
 .../ui/components/dialog/DialogClose.vue      |   4 +-
 .../components/dialog/DialogDescription.vue   |  16 +--
 .../ui/components/dialog/DialogFooter.vue     |   6 +-
 .../ui/components/dialog/DialogHeader.vue     |   8 +-
 .../ui/components/dialog/DialogTitle.vue      |  16 +--
 .../ui/components/dialog/DialogTrigger.vue    |   4 +-
 .../src/modules/ui/components/dialog/index.ts |  18 +--
 .../components/dropdown-menu/DropdownMenu.vue |   8 +-
 .../DropdownMenuCheckboxItem.vue              |  20 +--
 .../dropdown-menu/DropdownMenuContent.vue     |  18 +--
 .../dropdown-menu/DropdownMenuGroup.vue       |   4 +-
 .../dropdown-menu/DropdownMenuItem.vue        |  16 +--
 .../dropdown-menu/DropdownMenuLabel.vue       |  16 +--
 .../dropdown-menu/DropdownMenuRadioGroup.vue  |   8 +-
 .../dropdown-menu/DropdownMenuSeparator.vue   |  16 +--
 .../dropdown-menu/DropdownMenuShortcut.vue    |   8 +-
 .../dropdown-menu/DropdownMenuSub.vue         |   8 +-
 .../dropdown-menu/DropdownMenuSubContent.vue  |  18 +--
 .../dropdown-menu/DropdownMenuTrigger.vue     |   6 +-
 .../ui/components/dropdown-menu/index.ts      |  30 ++--
 .../components/number-field/NumberField.vue   |  20 +--
 .../number-field/NumberFieldContent.vue       |   8 +-
 .../number-field/NumberFieldDecrement.vue     |  20 +--
 .../number-field/NumberFieldIncrement.vue     |  20 +--
 .../number-field/NumberFieldInput.vue         |  10 +-
 .../ui/components/number-field/index.ts       |  10 +-
 .../modules/ui/components/select/Select.vue   |  10 +-
 .../ui/components/select/SelectContent.vue    |  22 +--
 .../ui/components/select/SelectGroup.vue      |  14 +-
 .../ui/components/select/SelectItem.vue       |  18 +--
 .../ui/components/select/SelectItemText.vue   |   4 +-
 .../ui/components/select/SelectLabel.vue      |   8 +-
 .../select/SelectScrollDownButton.vue         |  18 +--
 .../select/SelectScrollUpButton.vue           |  18 +--
 .../ui/components/select/SelectSeparator.vue  |  14 +-
 .../ui/components/select/SelectValue.vue      |   4 +-
 .../src/modules/ui/components/select/index.ts |  22 +--
 .../src/modules/ui/components/sheet/Sheet.vue |   8 +-
 .../ui/components/sheet/SheetClose.vue        |   4 +-
 .../ui/components/sheet/SheetDescription.vue  |  14 +-
 .../ui/components/sheet/SheetFooter.vue       |   6 +-
 .../ui/components/sheet/SheetHeader.vue       |   6 +-
 .../ui/components/sheet/SheetTitle.vue        |  14 +-
 .../ui/components/sheet/SheetTrigger.vue      |   4 +-
 .../src/modules/ui/components/sheet/index.ts  |  22 +--
 .../modules/ui/components/slider/Slider.vue   |  20 +--
 .../src/modules/ui/components/slider/index.ts |   2 +-
 .../modules/ui/components/textarea/index.ts   |   2 +-
 .../components/toggle-group/ToggleGroup.vue   |  34 ++---
 .../toggle-group/ToggleGroupItem.vue          |  30 ++--
 .../ui/components/toggle-group/index.ts       |   4 +-
 .../modules/ui/components/toggle/Toggle.vue   |  27 ++--
 85 files changed, 648 insertions(+), 566 deletions(-)
 create mode 100644 packages/app/src/modules/app/components/locale-picker.vue
 create mode 100644 packages/app/src/modules/app/pages/about.vue

diff --git a/packages/app/src/locales/en.yaml b/packages/app/src/locales/en.yaml
index 1316d62d..b6d9246a 100644
--- a/packages/app/src/locales/en.yaml
+++ b/packages/app/src/locales/en.yaml
@@ -34,8 +34,8 @@ tools:
     use-lowercase: Include lowercase letters
     use-numbers: Include numbers
     use-symbols: Include symbols
+    exclude-similar: Exclude similar characters
     length: Length
-    refresh: Refresh
+    refresh: Refresh token
     quantity: Quantity
     format: Format
-
diff --git a/packages/app/src/modules/app/components/app-header.vue b/packages/app/src/modules/app/components/app-header.vue
index 557d8182..168b6dfb 100644
--- a/packages/app/src/modules/app/components/app-header.vue
+++ b/packages/app/src/modules/app/components/app-header.vue
@@ -1,23 +1,34 @@
 <script setup>
 import { Button } from '@/src/modules/ui/components/button';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/src/modules/ui/components/dropdown-menu';
+import { useCommandPaletteStore } from '../../command-palette/command-palette.store';
+
+const { openCommandPalette } = useCommandPaletteStore();
 
 const colorMode = useColorMode();
 </script>
 
 <template>
-  <div class="w-full border-b bg-card">
-    <div class="max-w-screen-xl mx-auto flex items-center justify-between py-2 px-6">
-      <NuxtLink variant="link" class="text-xl font-semibold border-b border-transparent hover:no-underline h-auto px-1 rounded-none !transition-border-color-250" :as="Button" :to="localePath('/')" aria-label="Home">
-        <span class="font-bold text-foreground">IT</span>
-        <span class="text-[80%] font-extrabold border-[2px] leading-none border-current rounded-md px-1 py-0.5 ml-1.5 text-primary">TOOLS</span>
-      </NuxtLink>
+  <div class="w-full flex items-center justify-between">
+    <div>
+      <Button variant="outline" class="sm:pr-12 md:pr-24 text-muted-foreground hidden sm:flex" @click="openCommandPalette">
+        <Icon name="i-tabler-search" class="mr-2 size-4" />
+        {{ $t('home.search-tools') }}
+      </Button>
+    </div>
+
+    <div class="flex items-center gap-1">
+      <Button variant="ghost" size="icon" class="sm:hidden" @click="openCommandPalette">
+        <Icon name="i-tabler-search" class="size-5" />
+      </Button>
+
+      <LocalePicker />
 
       <DropdownMenu>
         <DropdownMenuTrigger as-child>
           <Button variant="ghost" size="icon">
-            <Icon name="i-tabler-moon" class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-            <Icon name="i-tabler-sun" class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+            <Icon name="i-tabler-moon" class="size-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+            <Icon name="i-tabler-sun" class="absolute size-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
             <span class="sr-only">Toggle theme</span>
           </Button>
         </DropdownMenuTrigger>
diff --git a/packages/app/src/modules/app/components/locale-picker.vue b/packages/app/src/modules/app/components/locale-picker.vue
new file mode 100644
index 00000000..a80a6060
--- /dev/null
+++ b/packages/app/src/modules/app/components/locale-picker.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { Button } from '../../ui/components/button';
+import { DropdownMenu } from '../../ui/components/dropdown-menu';
+import DropdownMenuContent from '../../ui/components/dropdown-menu/DropdownMenuContent.vue';
+import DropdownMenuItem from '../../ui/components/dropdown-menu/DropdownMenuItem.vue';
+import DropdownMenuTrigger from '../../ui/components/dropdown-menu/DropdownMenuTrigger.vue';
+
+const { locale, locales, setLocale } = useI18n();
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <slot>
+        <Button variant="ghost" aria-label="Change language">
+          <Icon name="i-tabler-language" class="size-5 mr-1" />
+          <Icon name="i-tabler-chevron-down" class="text-muted-foreground" />
+        </Button>
+      </slot>
+    </DropdownMenuTrigger>
+
+    <DropdownMenuContent align="end">
+      <DropdownMenuItem
+        v-for="({ name, code }) in locales"
+        :key="code"
+        class="cursor-pointer"
+        :class="{ 'font-bold': locale === code }"
+        @click="setLocale(code)"
+      >
+        {{ name }}
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>
diff --git a/packages/app/src/modules/app/components/sidenav-menu.vue b/packages/app/src/modules/app/components/sidenav-menu.vue
index d67bbeef..b1335166 100644
--- a/packages/app/src/modules/app/components/sidenav-menu.vue
+++ b/packages/app/src/modules/app/components/sidenav-menu.vue
@@ -2,7 +2,7 @@
 import { Button } from '@/src/modules/ui/components/button';
 import { useToolsStore } from '../../tools/tools.store';
 
-const { tools } = useToolsStore();
+const toolStore = useToolsStore();
 const localePath = useLocalePath();
 </script>
 
@@ -20,7 +20,7 @@ const localePath = useLocalePath();
       Home
     </NuxtLink>
 
-    <NuxtLink v-for="tool in tools" :key="tool.key" class="py-1.5 px-3 flex items-center text-muted-foreground hover:text-foreground transition hover:bg-muted rounded-lg" :to="tool.path" exact-active-class="bg-secondary !text-foreground">
+    <NuxtLink v-for="tool in toolStore.tools" :key="tool.key" class="py-1.5 px-3 flex items-center text-muted-foreground hover:text-foreground transition hover:bg-muted rounded-lg" :to="tool.path" exact-active-class="bg-secondary !text-foreground">
       <Icon :name="tool.icon" class="mr-2 size-4" />
       {{ tool.title }}
     </NuxtLink>
diff --git a/packages/app/src/modules/app/layouts/default.vue b/packages/app/src/modules/app/layouts/default.vue
index 01bf45f3..132b75e5 100644
--- a/packages/app/src/modules/app/layouts/default.vue
+++ b/packages/app/src/modules/app/layouts/default.vue
@@ -1,6 +1,22 @@
+<script setup>
+import { Button } from '@/src/modules/ui/components/button';
+import { useToolsStore } from '../../tools/tools.store';
+
+const localePath = useLocalePath();
+</script>
+
 <template>
   <div class="w-full min-h-screen text-sm relative font-sans flex flex-col">
-    <app-header />
+    <div class="h-[60px] border-b">
+      <div class="max-w-screen-xl mx-auto py-2 px-6 w-full flex items-center gap-4 h-full">
+        <NuxtLink variant="link" class="text-xl font-semibold border-b border-transparent hover:no-underline h-auto px-1 rounded-none !transition-border-color-250" :as="Button" :to="localePath('/')" aria-label="Home">
+          <span class="font-bold text-foreground">IT</span>
+          <span class="text-[80%] font-extrabold border-[2px] leading-none border-current rounded-md px-1 py-0.5 ml-1.5 text-primary">TOOLS</span>
+        </NuxtLink>
+
+        <app-header />
+      </div>
+    </div>
 
     <div class="flex-1 pb-6">
       <slot />
diff --git a/packages/app/src/modules/app/layouts/sidenav.vue b/packages/app/src/modules/app/layouts/sidenav.vue
index ec0f8f39..cfad0291 100644
--- a/packages/app/src/modules/app/layouts/sidenav.vue
+++ b/packages/app/src/modules/app/layouts/sidenav.vue
@@ -1,14 +1,6 @@
 <script setup>
-import { Button } from '@/src/modules/ui/components/button';
-import { useCommandPaletteStore } from '../../command-palette/command-palette.store';
-import { DropdownMenu } from '../../ui/components/dropdown-menu';
-import DropdownMenuContent from '../../ui/components/dropdown-menu/DropdownMenuContent.vue';
-import DropdownMenuItem from '../../ui/components/dropdown-menu/DropdownMenuItem.vue';
-import DropdownMenuTrigger from '../../ui/components/dropdown-menu/DropdownMenuTrigger.vue';
-import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '../../ui/components/sheet';
-
-const { openCommandPalette } = useCommandPaletteStore();
-const colorMode = useColorMode();
+import { Button } from '../../ui/components/button';
+import { Sheet, SheetContent, SheetTrigger } from '../../ui/components/sheet';
 </script>
 
 <template>
@@ -31,38 +23,9 @@ const colorMode = useColorMode();
               </SheetContent>
             </Sheet>
           </div>
-
-          <Button variant="outline" class="sm:pr-12 md:pr-24 text-muted-foreground" @click="openCommandPalette">
-            <Icon name="i-tabler-search" class="mr-2 size-4" />
-            {{ $t('home.search-tools') }}
-          </Button>
         </div>
 
-        <div>
-          <DropdownMenu>
-            <DropdownMenuTrigger as-child>
-              <Button variant="ghost" size="icon">
-                <Icon name="i-tabler-moon" class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-                <Icon name="i-tabler-sun" class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-                <span class="sr-only">Toggle theme</span>
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuItem class="cursor-pointer" :class="{ 'font-bold': colorMode.preference === 'light' }" @click="colorMode.preference = 'light'">
-                <Icon name="i-tabler-sun" class="mr-2 size-4" />
-                Light
-              </DropdownMenuItem>
-              <DropdownMenuItem class="cursor-pointer" :class="{ 'font-bold': colorMode.preference === 'dark' }" @click="colorMode.preference = 'dark'">
-                <Icon name="i-tabler-moon" class="mr-2 size-4" />
-                Dark
-              </DropdownMenuItem>
-              <DropdownMenuItem class="cursor-pointer" :class="{ 'font-bold': colorMode.preference === 'system' }" @click="colorMode.preference = 'system'">
-                <Icon name="i-tabler-device-laptop" class="mr-2 size-4" />
-                System
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
+        <app-header />
       </div>
 
       <div class="flex-1">
diff --git a/packages/app/src/modules/app/pages/about.vue b/packages/app/src/modules/app/pages/about.vue
new file mode 100644
index 00000000..54886de2
--- /dev/null
+++ b/packages/app/src/modules/app/pages/about.vue
@@ -0,0 +1,3 @@
+<template>
+  TODO
+</template>
diff --git a/packages/app/src/modules/app/pages/index.vue b/packages/app/src/modules/app/pages/index.vue
index 1b6f8694..36d89adc 100644
--- a/packages/app/src/modules/app/pages/index.vue
+++ b/packages/app/src/modules/app/pages/index.vue
@@ -1,10 +1,8 @@
 <script setup>
 import { Badge } from '@/src/modules/ui/components/badge';
-import { Button, buttonVariants } from '@/src/modules/ui/components/button';
+import { Button } from '@/src/modules/ui/components/button';
 import { useCommandPaletteStore } from '../../command-palette/command-palette.store';
-import { cn } from '../../shared/style/cn';
 import { useToolsStore } from '../../tools/tools.store';
-import { CardContent } from '../../ui/components/card';
 import Card from '../../ui/components/card/Card.vue';
 
 const { tools } = useToolsStore();
diff --git a/packages/app/src/modules/command-palette/components/command-palette.vue b/packages/app/src/modules/command-palette/components/command-palette.vue
index fe3c4381..a8403e68 100644
--- a/packages/app/src/modules/command-palette/components/command-palette.vue
+++ b/packages/app/src/modules/command-palette/components/command-palette.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { useMagicKeys } from '@vueuse/core';
 import { useToolsStore } from '../../tools/tools.store';
-import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from '../../ui/components/command';
+import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '../../ui/components/command';
 import { useCommandPaletteStore } from '../command-palette.store';
 
 const commandPaletteStore = useCommandPaletteStore();
diff --git a/packages/app/src/modules/shared/composables/useRefreshableState.ts b/packages/app/src/modules/shared/composables/useRefreshableState.ts
index c4d0fee7..5696f918 100644
--- a/packages/app/src/modules/shared/composables/useRefreshableState.ts
+++ b/packages/app/src/modules/shared/composables/useRefreshableState.ts
@@ -9,4 +9,4 @@ export function useRefreshableState<T>(key: string, getState: () => T | Ref<T>)
   };
 
   return [state, refresh] as const;
-}  
\ No newline at end of file
+}
diff --git a/packages/app/src/modules/tools/definitions/token-generator/token-generator.models.ts b/packages/app/src/modules/tools/definitions/token-generator/token-generator.models.ts
index a33e0993..1619a033 100644
--- a/packages/app/src/modules/tools/definitions/token-generator/token-generator.models.ts
+++ b/packages/app/src/modules/tools/definitions/token-generator/token-generator.models.ts
@@ -7,6 +7,7 @@ export function createToken({
   withSymbols = false,
   length = 64,
   alphabet,
+  exclude,
   sample = sampleImpl,
 }: {
   withUppercase?: boolean;
@@ -15,6 +16,7 @@ export function createToken({
   withSymbols?: boolean;
   length?: number;
   alphabet?: string;
+  exclude?: string | string[];
   sample?: (str: string) => string;
 }) {
   const allAlphabet = alphabet ?? [
@@ -24,5 +26,8 @@ export function createToken({
     withSymbols ? '.,;:!?./-"\'#{([-|\\@)]=}*+' : '',
   ].join('');
 
-  return times(length, () => sample(allAlphabet)).join('');
+  const charsToExclude = exclude ? (Array.isArray(exclude) ? exclude.join('') : exclude) : '';
+  const filteredAlphabet = allAlphabet.split('').filter(char => !charsToExclude.includes(char)).join('');
+
+  return times(length, () => sample(filteredAlphabet)).join('');
 }
diff --git a/packages/app/src/modules/tools/definitions/token-generator/token-generator.vue b/packages/app/src/modules/tools/definitions/token-generator/token-generator.vue
index e97eb9fe..d29c0802 100644
--- a/packages/app/src/modules/tools/definitions/token-generator/token-generator.vue
+++ b/packages/app/src/modules/tools/definitions/token-generator/token-generator.vue
@@ -2,7 +2,6 @@
 import { times } from 'lodash-es';
 import { useRefreshableState } from '~/src/modules/shared/composables/useRefreshableState';
 import { Button } from '~/src/modules/ui/components/button';
-import Card from '~/src/modules/ui/components/card/Card.vue';
 import { Checkbox } from '~/src/modules/ui/components/checkbox';
 import NumberField from '~/src/modules/ui/components/number-field/NumberField.vue';
 import NumberFieldContent from '~/src/modules/ui/components/number-field/NumberFieldContent.vue';
@@ -19,12 +18,6 @@ definePageMeta({
   layout: 'sidenav',
 });
 
-const withUppercase = ref(true);
-const withLowercase = ref(true);
-const withNumbers = ref(true);
-const withSymbols = ref(false);
-const length = ref(48);
-
 const formats = {
   raw: {
     label: 'Raw',
@@ -35,10 +28,29 @@ const formats = {
     format: ({ tokens }: { tokens: string[] }) => JSON.stringify(tokens),
   },
 };
+const similarChars = ['I', 'l', '1', 'O', '0'];
+
+const withUppercase = ref(true);
+const withLowercase = ref(true);
+const withNumbers = ref(true);
+const withSymbols = ref(false);
+const excludeSimilar = ref(false);
+const length = ref(64);
 
 const format = ref<keyof typeof formats>('raw');
 const quantity = ref(1);
 
+function reset() {
+  withUppercase.value = true;
+  withLowercase.value = true;
+  withNumbers.value = true;
+  withSymbols.value = false;
+  excludeSimilar.value = false;
+  length.value = 64;
+  format.value = 'raw';
+  quantity.value = 1;
+}
+
 function generateToken() {
   return createToken({
     withUppercase: withUppercase.value,
@@ -46,6 +58,7 @@ function generateToken() {
     withNumbers: withNumbers.value,
     withSymbols: withSymbols.value,
     length: length.value,
+    exclude: excludeSimilar.value ? similarChars : [],
   });
 }
 
@@ -69,6 +82,7 @@ watch([
   length,
   format,
   quantity,
+  excludeSimilar,
 ], refreshToken);
 
 // const { copy: copyToken } = useCopy({ source: token, notificationText: 'Token copied to clipboard' });
@@ -85,10 +99,14 @@ watch([
       </p>
     </div>
 
-    <div class="h-full flex-1 p-6">
-      <Card class="max-w-[550px] mx-auto p-6 bg-white dark:bg-background shadow-none">
-        <div class="grid grid-cols-2 gap-4">
-          <div class="flex gap-2 items-center">
+    <div class="h-full flex-1 flex flex-col md:flex-row">
+      <div class="md:max-w-[360px] bg-white dark:bg-background h-full border-b md:border-b-none md:border-r">
+        <div class="px-6 pt-4 pb-6 ">
+          <div class="text-muted-foreground mb-3">
+            Token configuration
+          </div>
+
+          <div class="flex gap-2 items-center mb-1">
             <Checkbox id="use-uppercase" v-model:checked="withUppercase" />
             <label for="use-uppercase">
               {{ $t('tools.token-generator.use-uppercase') }}
@@ -98,7 +116,7 @@ watch([
             </label>
           </div>
 
-          <div class="flex gap-2 items-center">
+          <div class="flex gap-2 items-center mb-1">
             <Checkbox id="use-lowercase" v-model:checked="withLowercase" />
             <label for="use-lowercase">
               {{ $t('tools.token-generator.use-lowercase') }}
@@ -108,7 +126,7 @@ watch([
             </label>
           </div>
 
-          <div class="flex gap-2 items-center">
+          <div class="flex gap-2 items-center mb-1">
             <Checkbox id="use-numbers" v-model:checked="withNumbers" />
             <label for="use-numbers">
               {{ $t('tools.token-generator.use-numbers') }}
@@ -118,7 +136,7 @@ watch([
             </label>
           </div>
 
-          <div class="flex gap-2 items-center">
+          <div class="flex gap-2 items-center mb-1">
             <Checkbox id="use-symbols" v-model:checked="withSymbols" />
             <label for="use-symbols">
               {{ $t('tools.token-generator.use-symbols') }}
@@ -128,8 +146,18 @@ watch([
             </label>
           </div>
 
-          <div class="flex gap-4 items-center">
-            <label for="length" class="shrink-0">{{ $t('tools.token-generator.length') }}</label>
+          <div class="flex gap-2 items-center mb-1">
+            <Checkbox id="exclude-similar" v-model:checked="excludeSimilar" />
+            <label for="exclude-similar">
+              {{ $t('tools.token-generator.exclude-similar') }}
+              <span class="text-muted-foreground">
+                ({{ similarChars.join('') }})
+              </span>
+            </label>
+          </div>
+
+          <div class="flex gap-4 items-center mb-3 mt-4">
+            <label for="length" class="w-20 shrink-0">{{ $t('tools.token-generator.length') }}</label>
             <NumberField id="length" v-model="length" :min="1" :max="1024">
               <NumberFieldContent class="flex-1">
                 <NumberFieldDecrement />
@@ -148,35 +176,64 @@ watch([
           />
         </div>
 
-        <hr class="my-6">
+        <hr>
 
-        <div class="mb-4 flex items-center gap-4">
-          <div>{{ $t('tools.token-generator.format') }}</div>
-          <ToggleGroup v-model="format" type="single" variant="outline">
-            <ToggleGroupItem v-for="({ label }, key) in formats" :key="key" :value="key">
-              {{ label }}
-            </ToggleGroupItem>
-          </ToggleGroup>
+        <div class="px-6 pt-4 pb-6 border-b">
+          <div class="text-muted-foreground mb-3">
+            Output configuration
+          </div>
+
+          <div class="flex items-center mb-2 gap-4">
+            <div class="w-20 shrink-0">
+              {{ $t('tools.token-generator.format') }}
+            </div>
+            <ToggleGroup v-model="format" type="single" variant="outline">
+              <ToggleGroupItem v-for="({ label }, key) in formats" :key="key" :value="key">
+                {{ label }}
+              </ToggleGroupItem>
+            </ToggleGroup>
+          </div>
+
+          <div class="flex items-center gap-4">
+            <div class="w-20 shrink-0">
+              {{ $t('tools.token-generator.quantity') }}
+            </div>
+
+            <NumberField v-model="quantity" :min="1" :max="100">
+              <NumberFieldContent class="flex-1">
+                <NumberFieldDecrement />
+                <NumberFieldInput />
+                <NumberFieldIncrement />
+              </NumberFieldContent>
+            </NumberField>
+          </div>
         </div>
 
-        <div class="mb-4 flex items-center gap-4">
-          <div>{{ $t('tools.token-generator.quantity') }}</div>
+        <div class="p-6">
+          <Button class="w-full" variant="secondary" @click="reset">
+            Reset configuration
+          </Button>
+        </div>
+      </div>
 
-          <NumberField v-model="quantity" :min="1" :max="100">
-            <NumberFieldContent class="flex-1">
-              <NumberFieldDecrement />
-              <NumberFieldInput />
-              <NumberFieldIncrement />
-            </NumberFieldContent>
-          </NumberField>
+      <div class="flex-1 p-6 pt-4 bg-white dark:bg-background pb-20">
+        <div class="text-muted-foreground mb-3">
+          Generated token
         </div>
 
-        <Textarea v-model="token" rows="5" class="font-mono" readonly :placeholder="$t('tools.token-generator.placeholder')" />
+        <Textarea v-model="token" rows="12" class="font-mono" readonly :placeholder="$t('tools.token-generator.placeholder')" />
+        <div class="flex md:items-center mt-2 gap-2 flex-col md:flex-row">
+          <Button variant="secondary" @click="refreshToken">
+            <Icon name="i-tabler-refresh" class="mr-2" />
+            {{ $t('tools.token-generator.refresh') }}
+          </Button>
 
-        <Button class="mt-4" variant="secondary" @click="refreshToken">
-          {{ $t('tools.token-generator.refresh') }}
-        </Button>
-      </Card>
+          <Button variant="secondary">
+            <Icon name="i-tabler-copy" class="mr-2" />
+            Copy to clipboard
+          </Button>
+        </div>
+      </div>
     </div>
   </div>
 </template>
diff --git a/packages/app/src/modules/tools/modules/tools.modules.ts b/packages/app/src/modules/tools/modules/tools.modules.ts
index 741f1103..e19821e3 100644
--- a/packages/app/src/modules/tools/modules/tools.modules.ts
+++ b/packages/app/src/modules/tools/modules/tools.modules.ts
@@ -5,12 +5,13 @@ export default defineNuxtModule({
   meta: {
     name: 'tools',
   },
-  setup() {
-    extendPages((pages) => {
+  setup(options, nuxt) {
+    nuxt.hook('pages:extend', (pages) => {
       pages.push(...toolDefinitions.map((tool) => {
         return {
           path: `/${tool.slug}`,
           file: tool.entryFile,
+          name: tool.slug,
           meta: {
             toolKey: tool.key,
           },
diff --git a/packages/app/src/modules/ui/components/badge/Badge.vue b/packages/app/src/modules/ui/components/badge/Badge.vue
index 3ce2c73c..2066850e 100644
--- a/packages/app/src/modules/ui/components/badge/Badge.vue
+++ b/packages/app/src/modules/ui/components/badge/Badge.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/src/modules/shared/style/cn'
-import { type BadgeVariants, badgeVariants } from '.'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/src/modules/shared/style/cn';
+import { type BadgeVariants, badgeVariants } from '.';
 
 const props = defineProps<{
-  variant?: BadgeVariants['variant']
-  class?: HTMLAttributes['class']
-}>()
+  variant?: BadgeVariants['variant'];
+  class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/badge/index.ts b/packages/app/src/modules/ui/components/badge/index.ts
index c2ba5fb2..a74b7a9f 100644
--- a/packages/app/src/modules/ui/components/badge/index.ts
+++ b/packages/app/src/modules/ui/components/badge/index.ts
@@ -1,6 +1,6 @@
-import { cva, type VariantProps } from 'class-variance-authority'
+import { cva, type VariantProps } from 'class-variance-authority';
 
-export { default as Badge } from './Badge.vue'
+export { default as Badge } from './Badge.vue';
 
 export const badgeVariants = cva(
   'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
@@ -20,6 +20,6 @@ export const badgeVariants = cva(
       variant: 'default',
     },
   },
-)
+);
 
-export type BadgeVariants = VariantProps<typeof badgeVariants>
+export type BadgeVariants = VariantProps<typeof badgeVariants>;
diff --git a/packages/app/src/modules/ui/components/card/Card.vue b/packages/app/src/modules/ui/components/card/Card.vue
index a591a15f..cb28e04a 100644
--- a/packages/app/src/modules/ui/components/card/Card.vue
+++ b/packages/app/src/modules/ui/components/card/Card.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/src/modules/shared/style/cn'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/src/modules/shared/style/cn';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+  class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/card/CardContent.vue b/packages/app/src/modules/ui/components/card/CardContent.vue
index 1b0de108..6289dc2a 100644
--- a/packages/app/src/modules/ui/components/card/CardContent.vue
+++ b/packages/app/src/modules/ui/components/card/CardContent.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/src/modules/shared/style/cn'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/src/modules/shared/style/cn';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+  class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/card/CardDescription.vue b/packages/app/src/modules/ui/components/card/CardDescription.vue
index 6f3f5cbe..bebd5027 100644
--- a/packages/app/src/modules/ui/components/card/CardDescription.vue
+++ b/packages/app/src/modules/ui/components/card/CardDescription.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/src/modules/shared/style/cn'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/src/modules/shared/style/cn';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+  class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/card/CardFooter.vue b/packages/app/src/modules/ui/components/card/CardFooter.vue
index 68436283..d698bfa4 100644
--- a/packages/app/src/modules/ui/components/card/CardFooter.vue
+++ b/packages/app/src/modules/ui/components/card/CardFooter.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/src/modules/shared/style/cn'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/src/modules/shared/style/cn';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+  class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/card/CardHeader.vue b/packages/app/src/modules/ui/components/card/CardHeader.vue
index 7f4643e3..8fb87762 100644
--- a/packages/app/src/modules/ui/components/card/CardHeader.vue
+++ b/packages/app/src/modules/ui/components/card/CardHeader.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/src/modules/shared/style/cn'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/src/modules/shared/style/cn';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+  class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/card/CardTitle.vue b/packages/app/src/modules/ui/components/card/CardTitle.vue
index 6eee469f..bb98875f 100644
--- a/packages/app/src/modules/ui/components/card/CardTitle.vue
+++ b/packages/app/src/modules/ui/components/card/CardTitle.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/src/modules/shared/style/cn'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/src/modules/shared/style/cn';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+  class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/card/index.ts b/packages/app/src/modules/ui/components/card/index.ts
index 9ff6d5e7..d652969f 100644
--- a/packages/app/src/modules/ui/components/card/index.ts
+++ b/packages/app/src/modules/ui/components/card/index.ts
@@ -1,6 +1,6 @@
-export { default as Card } from './Card.vue'
-export { default as CardContent } from './CardContent.vue'
-export { default as CardDescription } from './CardDescription.vue'
-export { default as CardFooter } from './CardFooter.vue'
-export { default as CardHeader } from './CardHeader.vue'
-export { default as CardTitle } from './CardTitle.vue'
+export { default as Card } from './Card.vue';
+export { default as CardContent } from './CardContent.vue';
+export { default as CardDescription } from './CardDescription.vue';
+export { default as CardFooter } from './CardFooter.vue';
+export { default as CardHeader } from './CardHeader.vue';
+export { default as CardTitle } from './CardTitle.vue';
diff --git a/packages/app/src/modules/ui/components/checkbox/index.ts b/packages/app/src/modules/ui/components/checkbox/index.ts
index 8c28c286..7f906aae 100644
--- a/packages/app/src/modules/ui/components/checkbox/index.ts
+++ b/packages/app/src/modules/ui/components/checkbox/index.ts
@@ -1 +1 @@
-export { default as Checkbox } from './Checkbox.vue'
+export { default as Checkbox } from './Checkbox.vue';
diff --git a/packages/app/src/modules/ui/components/command/Command.vue b/packages/app/src/modules/ui/components/command/Command.vue
index 23dcf196..32b8e54b 100644
--- a/packages/app/src/modules/ui/components/command/Command.vue
+++ b/packages/app/src/modules/ui/components/command/Command.vue
@@ -1,23 +1,23 @@
 <script setup lang="ts">
-import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'
-import { cn } from '@/src/modules/shared/style/cn'
-import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
+import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue';
+import { cn } from '@/src/modules/shared/style/cn';
+import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
 
 const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
   open: true,
   modelValue: '',
-})
+});
 
-const emits = defineEmits<ComboboxRootEmits>()
+const emits = defineEmits<ComboboxRootEmits>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/command/CommandDialog.vue b/packages/app/src/modules/ui/components/command/CommandDialog.vue
index babc140d..d7ea58a0 100644
--- a/packages/app/src/modules/ui/components/command/CommandDialog.vue
+++ b/packages/app/src/modules/ui/components/command/CommandDialog.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { DialogRootEmits, DialogRootProps } from 'radix-vue'
-import { Dialog, DialogContent } from '@/src/modules/ui/components/dialog'
-import { useForwardPropsEmits } from 'radix-vue'
-import Command from './Command.vue'
+import type { DialogRootEmits, DialogRootProps } from 'radix-vue';
+import { Dialog, DialogContent } from '@/src/modules/ui/components/dialog';
+import { useForwardPropsEmits } from 'radix-vue';
+import Command from './Command.vue';
 
-const props = defineProps<DialogRootProps>()
-const emits = defineEmits<DialogRootEmits>()
+const props = defineProps<DialogRootProps>();
+const emits = defineEmits<DialogRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/command/CommandEmpty.vue b/packages/app/src/modules/ui/components/command/CommandEmpty.vue
index 13fd2726..a992d5bf 100644
--- a/packages/app/src/modules/ui/components/command/CommandEmpty.vue
+++ b/packages/app/src/modules/ui/components/command/CommandEmpty.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import type { ComboboxEmptyProps } from 'radix-vue'
-import { cn } from '@/src/modules/shared/style/cn'
-import { ComboboxEmpty } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
+import type { ComboboxEmptyProps } from 'radix-vue';
+import { cn } from '@/src/modules/shared/style/cn';
+import { ComboboxEmpty } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/command/CommandGroup.vue b/packages/app/src/modules/ui/components/command/CommandGroup.vue
index 535c3ee9..6f093265 100644
--- a/packages/app/src/modules/ui/components/command/CommandGroup.vue
+++ b/packages/app/src/modules/ui/components/command/CommandGroup.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import type { ComboboxGroupProps } from 'radix-vue'
-import { cn } from '@/src/modules/shared/style/cn'
-import { ComboboxGroup, ComboboxLabel } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
+import type { ComboboxGroupProps } from 'radix-vue';
+import { cn } from '@/src/modules/shared/style/cn';
+import { ComboboxGroup, ComboboxLabel } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
 
 const props = defineProps<ComboboxGroupProps & {
-  class?: HTMLAttributes['class']
-  heading?: string
-}>()
+  class?: HTMLAttributes['class'];
+  heading?: string;
+}>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/command/CommandItem.vue b/packages/app/src/modules/ui/components/command/CommandItem.vue
index 703e4c94..f4db0eac 100644
--- a/packages/app/src/modules/ui/components/command/CommandItem.vue
+++ b/packages/app/src/modules/ui/components/command/CommandItem.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'
-import { cn } from '@/src/modules/shared/style/cn'
-import { ComboboxItem, useForwardPropsEmits } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
+import type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue';
+import { cn } from '@/src/modules/shared/style/cn';
+import { ComboboxItem, useForwardPropsEmits } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<ComboboxItemEmits>()
+const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<ComboboxItemEmits>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/command/CommandList.vue b/packages/app/src/modules/ui/components/command/CommandList.vue
index c7eabe4d..eb06d5d7 100644
--- a/packages/app/src/modules/ui/components/command/CommandList.vue
+++ b/packages/app/src/modules/ui/components/command/CommandList.vue
@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'
-import { cn } from '@/src/modules/shared/style/cn'
-import { ComboboxContent, useForwardPropsEmits } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
+import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue';
+import { cn } from '@/src/modules/shared/style/cn';
+import { ComboboxContent, useForwardPropsEmits } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
 
 const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {
   dismissable: false,
-})
-const emits = defineEmits<ComboboxContentEmits>()
+});
+const emits = defineEmits<ComboboxContentEmits>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/command/CommandSeparator.vue b/packages/app/src/modules/ui/components/command/CommandSeparator.vue
index 358297fa..3d0fddef 100644
--- a/packages/app/src/modules/ui/components/command/CommandSeparator.vue
+++ b/packages/app/src/modules/ui/components/command/CommandSeparator.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import type { ComboboxSeparatorProps } from 'radix-vue'
-import { cn } from '@/src/modules/shared/style/cn'
-import { ComboboxSeparator } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
+import type { ComboboxSeparatorProps } from 'radix-vue';
+import { cn } from '@/src/modules/shared/style/cn';
+import { ComboboxSeparator } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/command/CommandShortcut.vue b/packages/app/src/modules/ui/components/command/CommandShortcut.vue
index dab23f03..efba9f95 100644
--- a/packages/app/src/modules/ui/components/command/CommandShortcut.vue
+++ b/packages/app/src/modules/ui/components/command/CommandShortcut.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/src/modules/shared/style/cn'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/src/modules/shared/style/cn';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+  class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/command/index.ts b/packages/app/src/modules/ui/components/command/index.ts
index 0e35f4b9..5a4ecf4d 100644
--- a/packages/app/src/modules/ui/components/command/index.ts
+++ b/packages/app/src/modules/ui/components/command/index.ts
@@ -1,9 +1,9 @@
-export { default as Command } from './Command.vue'
-export { default as CommandDialog } from './CommandDialog.vue'
-export { default as CommandEmpty } from './CommandEmpty.vue'
-export { default as CommandGroup } from './CommandGroup.vue'
-export { default as CommandInput } from './CommandInput.vue'
-export { default as CommandItem } from './CommandItem.vue'
-export { default as CommandList } from './CommandList.vue'
-export { default as CommandSeparator } from './CommandSeparator.vue'
-export { default as CommandShortcut } from './CommandShortcut.vue'
+export { default as Command } from './Command.vue';
+export { default as CommandDialog } from './CommandDialog.vue';
+export { default as CommandEmpty } from './CommandEmpty.vue';
+export { default as CommandGroup } from './CommandGroup.vue';
+export { default as CommandInput } from './CommandInput.vue';
+export { default as CommandItem } from './CommandItem.vue';
+export { default as CommandList } from './CommandList.vue';
+export { default as CommandSeparator } from './CommandSeparator.vue';
+export { default as CommandShortcut } from './CommandShortcut.vue';
diff --git a/packages/app/src/modules/ui/components/dialog/Dialog.vue b/packages/app/src/modules/ui/components/dialog/Dialog.vue
index a04c0262..18f6100f 100644
--- a/packages/app/src/modules/ui/components/dialog/Dialog.vue
+++ b/packages/app/src/modules/ui/components/dialog/Dialog.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue'
+import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue';
 
-const props = defineProps<DialogRootProps>()
-const emits = defineEmits<DialogRootEmits>()
+const props = defineProps<DialogRootProps>();
+const emits = defineEmits<DialogRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/dialog/DialogClose.vue b/packages/app/src/modules/ui/components/dialog/DialogClose.vue
index a64703e5..cc1f09f1 100644
--- a/packages/app/src/modules/ui/components/dialog/DialogClose.vue
+++ b/packages/app/src/modules/ui/components/dialog/DialogClose.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { DialogClose, type DialogCloseProps } from 'radix-vue'
+import { DialogClose, type DialogCloseProps } from 'radix-vue';
 
-const props = defineProps<DialogCloseProps>()
+const props = defineProps<DialogCloseProps>();
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/dialog/DialogDescription.vue b/packages/app/src/modules/ui/components/dialog/DialogDescription.vue
index 6d0b1aa7..cab09f0a 100644
--- a/packages/app/src/modules/ui/components/dialog/DialogDescription.vue
+++ b/packages/app/src/modules/ui/components/dialog/DialogDescription.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { cn } from '@/src/modules/shared/style/cn'
-import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '@/src/modules/shared/style/cn';
+import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/dialog/DialogFooter.vue b/packages/app/src/modules/ui/components/dialog/DialogFooter.vue
index 88218a6c..c21a4901 100644
--- a/packages/app/src/modules/ui/components/dialog/DialogFooter.vue
+++ b/packages/app/src/modules/ui/components/dialog/DialogFooter.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/src/modules/shared/style/cn'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/src/modules/shared/style/cn';
 
-const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+const props = defineProps<{ class?: HTMLAttributes['class'] }>();
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/dialog/DialogHeader.vue b/packages/app/src/modules/ui/components/dialog/DialogHeader.vue
index e6e0009f..3051102b 100644
--- a/packages/app/src/modules/ui/components/dialog/DialogHeader.vue
+++ b/packages/app/src/modules/ui/components/dialog/DialogHeader.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/src/modules/shared/style/cn'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/src/modules/shared/style/cn';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+  class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/dialog/DialogTitle.vue b/packages/app/src/modules/ui/components/dialog/DialogTitle.vue
index a3810570..eca973f0 100644
--- a/packages/app/src/modules/ui/components/dialog/DialogTitle.vue
+++ b/packages/app/src/modules/ui/components/dialog/DialogTitle.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { cn } from '@/src/modules/shared/style/cn'
-import { DialogTitle, type DialogTitleProps, useForwardProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '@/src/modules/shared/style/cn';
+import { DialogTitle, type DialogTitleProps, useForwardProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/dialog/DialogTrigger.vue b/packages/app/src/modules/ui/components/dialog/DialogTrigger.vue
index ee0c12ff..f803446a 100644
--- a/packages/app/src/modules/ui/components/dialog/DialogTrigger.vue
+++ b/packages/app/src/modules/ui/components/dialog/DialogTrigger.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { DialogTrigger, type DialogTriggerProps } from 'radix-vue'
+import { DialogTrigger, type DialogTriggerProps } from 'radix-vue';
 
-const props = defineProps<DialogTriggerProps>()
+const props = defineProps<DialogTriggerProps>();
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/dialog/index.ts b/packages/app/src/modules/ui/components/dialog/index.ts
index ca8cfeae..e924dd4b 100644
--- a/packages/app/src/modules/ui/components/dialog/index.ts
+++ b/packages/app/src/modules/ui/components/dialog/index.ts
@@ -1,9 +1,9 @@
-export { default as Dialog } from './Dialog.vue'
-export { default as DialogClose } from './DialogClose.vue'
-export { default as DialogContent } from './DialogContent.vue'
-export { default as DialogDescription } from './DialogDescription.vue'
-export { default as DialogFooter } from './DialogFooter.vue'
-export { default as DialogHeader } from './DialogHeader.vue'
-export { default as DialogScrollContent } from './DialogScrollContent.vue'
-export { default as DialogTitle } from './DialogTitle.vue'
-export { default as DialogTrigger } from './DialogTrigger.vue'
+export { default as Dialog } from './Dialog.vue';
+export { default as DialogClose } from './DialogClose.vue';
+export { default as DialogContent } from './DialogContent.vue';
+export { default as DialogDescription } from './DialogDescription.vue';
+export { default as DialogFooter } from './DialogFooter.vue';
+export { default as DialogHeader } from './DialogHeader.vue';
+export { default as DialogScrollContent } from './DialogScrollContent.vue';
+export { default as DialogTitle } from './DialogTitle.vue';
+export { default as DialogTrigger } from './DialogTrigger.vue';
diff --git a/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenu.vue b/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenu.vue
index b83d90b8..5952c12b 100644
--- a/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenu.vue
+++ b/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenu.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'radix-vue'
+import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'radix-vue';
 
-const props = defineProps<DropdownMenuRootProps>()
-const emits = defineEmits<DropdownMenuRootEmits>()
+const props = defineProps<DropdownMenuRootProps>();
+const emits = defineEmits<DropdownMenuRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuCheckboxItem.vue b/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuCheckboxItem.vue
index 9f95afe5..18c85c9a 100644
--- a/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -1,24 +1,24 @@
 <script setup lang="ts">
-import { cn } from '@/src/modules/shared/style/cn'
+import { cn } from '@/src/modules/shared/style/cn';
 import {
   DropdownMenuCheckboxItem,
   type DropdownMenuCheckboxItemEmits,
   type DropdownMenuCheckboxItemProps,
   DropdownMenuItemIndicator,
   useForwardPropsEmits,
-} from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
+} from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
@@ -31,7 +31,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   >
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuItemIndicator>
-         <Icon name="i-tabler-check" class="w-4 h-4" />
+        <Icon name="i-tabler-check" class="w-4 h-4" />
       </DropdownMenuItemIndicator>
     </span>
     <slot />
diff --git a/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuContent.vue b/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuContent.vue
index 201ad27d..bf4a198a 100644
--- a/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuContent.vue
+++ b/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuContent.vue
@@ -1,29 +1,29 @@
 <script setup lang="ts">
-import { cn } from '@/src/modules/shared/style/cn'
+import { cn } from '@/src/modules/shared/style/cn';
 import {
   DropdownMenuContent,
   type DropdownMenuContentEmits,
   type DropdownMenuContentProps,
   DropdownMenuPortal,
   useForwardPropsEmits,
-} from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
+} from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
 
 const props = withDefaults(
   defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
   {
     sideOffset: 4,
   },
-)
-const emits = defineEmits<DropdownMenuContentEmits>()
+);
+const emits = defineEmits<DropdownMenuContentEmits>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuGroup.vue b/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuGroup.vue
index 3f201352..968d01dd 100644
--- a/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuGroup.vue
+++ b/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuGroup.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { DropdownMenuGroup, type DropdownMenuGroupProps } from 'radix-vue'
+import { DropdownMenuGroup, type DropdownMenuGroupProps } from 'radix-vue';
 
-const props = defineProps<DropdownMenuGroupProps>()
+const props = defineProps<DropdownMenuGroupProps>();
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuItem.vue b/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuItem.vue
index 57bf8f0b..b980d37a 100644
--- a/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuItem.vue
+++ b/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuItem.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { cn } from '@/src/modules/shared/style/cn'
-import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '@/src/modules/shared/style/cn';
+import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuLabel.vue b/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuLabel.vue
index a051ee0f..5e260706 100644
--- a/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuLabel.vue
+++ b/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuLabel.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { cn } from '@/src/modules/shared/style/cn'
-import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '@/src/modules/shared/style/cn';
+import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuRadioGroup.vue b/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuRadioGroup.vue
index 4a727904..7124d331 100644
--- a/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuRadioGroup.vue
+++ b/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuRadioGroup.vue
@@ -4,12 +4,12 @@ import {
   type DropdownMenuRadioGroupEmits,
   type DropdownMenuRadioGroupProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'radix-vue';
 
-const props = defineProps<DropdownMenuRadioGroupProps>()
-const emits = defineEmits<DropdownMenuRadioGroupEmits>()
+const props = defineProps<DropdownMenuRadioGroupProps>();
+const emits = defineEmits<DropdownMenuRadioGroupEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuSeparator.vue b/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuSeparator.vue
index 7eb1e0b8..ce0243a7 100644
--- a/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuSeparator.vue
+++ b/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuSeparator.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
-import { cn } from '@/src/modules/shared/style/cn'
+import { cn } from '@/src/modules/shared/style/cn';
 import {
   DropdownMenuSeparator,
   type DropdownMenuSeparatorProps,
-} from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
+} from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
 
 const props = defineProps<DropdownMenuSeparatorProps & {
-  class?: HTMLAttributes['class']
-}>()
+  class?: HTMLAttributes['class'];
+}>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuShortcut.vue b/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuShortcut.vue
index 20add076..5ad7961c 100644
--- a/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuShortcut.vue
+++ b/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuShortcut.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/src/modules/shared/style/cn'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/src/modules/shared/style/cn';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+  class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuSub.vue b/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuSub.vue
index e0f4bd77..bfda22fc 100644
--- a/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuSub.vue
+++ b/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuSub.vue
@@ -4,12 +4,12 @@ import {
   type DropdownMenuSubEmits,
   type DropdownMenuSubProps,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'radix-vue';
 
-const props = defineProps<DropdownMenuSubProps>()
-const emits = defineEmits<DropdownMenuSubEmits>()
+const props = defineProps<DropdownMenuSubProps>();
+const emits = defineEmits<DropdownMenuSubEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuSubContent.vue b/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuSubContent.vue
index 4a34a7c2..67ca4acc 100644
--- a/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuSubContent.vue
+++ b/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuSubContent.vue
@@ -1,23 +1,23 @@
 <script setup lang="ts">
-import { cn } from '@/src/modules/shared/style/cn'
+import { cn } from '@/src/modules/shared/style/cn';
 import {
   DropdownMenuSubContent,
   type DropdownMenuSubContentEmits,
   type DropdownMenuSubContentProps,
   useForwardPropsEmits,
-} from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
+} from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<DropdownMenuSubContentEmits>()
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<DropdownMenuSubContentEmits>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuTrigger.vue b/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuTrigger.vue
index 8efd5a92..3184f0da 100644
--- a/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuTrigger.vue
+++ b/packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuTrigger.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'radix-vue'
+import { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'radix-vue';
 
-const props = defineProps<DropdownMenuTriggerProps>()
+const props = defineProps<DropdownMenuTriggerProps>();
 
-const forwardedProps = useForwardProps(props)
+const forwardedProps = useForwardProps(props);
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/dropdown-menu/index.ts b/packages/app/src/modules/ui/components/dropdown-menu/index.ts
index 6011f35c..c99f3196 100644
--- a/packages/app/src/modules/ui/components/dropdown-menu/index.ts
+++ b/packages/app/src/modules/ui/components/dropdown-menu/index.ts
@@ -1,16 +1,16 @@
-export { default as DropdownMenu } from './DropdownMenu.vue'
+export { default as DropdownMenu } from './DropdownMenu.vue';
 
-export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'
-export { default as DropdownMenuContent } from './DropdownMenuContent.vue'
-export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'
-export { default as DropdownMenuItem } from './DropdownMenuItem.vue'
-export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'
-export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'
-export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'
-export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'
-export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'
-export { default as DropdownMenuSub } from './DropdownMenuSub.vue'
-export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'
-export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'
-export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
-export { DropdownMenuPortal } from 'radix-vue'
+export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue';
+export { default as DropdownMenuContent } from './DropdownMenuContent.vue';
+export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue';
+export { default as DropdownMenuItem } from './DropdownMenuItem.vue';
+export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue';
+export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue';
+export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue';
+export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue';
+export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue';
+export { default as DropdownMenuSub } from './DropdownMenuSub.vue';
+export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue';
+export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue';
+export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue';
+export { DropdownMenuPortal } from 'radix-vue';
diff --git a/packages/app/src/modules/ui/components/number-field/NumberField.vue b/packages/app/src/modules/ui/components/number-field/NumberField.vue
index 89323138..0cf0b7b3 100644
--- a/packages/app/src/modules/ui/components/number-field/NumberField.vue
+++ b/packages/app/src/modules/ui/components/number-field/NumberField.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import type { NumberFieldRootEmits, NumberFieldRootProps } from 'radix-vue'
-import { cn } from '@/src/modules/shared/style/cn'
-import { NumberFieldRoot, useForwardPropsEmits } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
+import type { NumberFieldRootEmits, NumberFieldRootProps } from 'radix-vue';
+import { cn } from '@/src/modules/shared/style/cn';
+import { NumberFieldRoot, useForwardPropsEmits } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<NumberFieldRootEmits>()
+const props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<NumberFieldRootEmits>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/number-field/NumberFieldContent.vue b/packages/app/src/modules/ui/components/number-field/NumberFieldContent.vue
index 88f754f1..0c80df85 100644
--- a/packages/app/src/modules/ui/components/number-field/NumberFieldContent.vue
+++ b/packages/app/src/modules/ui/components/number-field/NumberFieldContent.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/src/modules/shared/style/cn'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/src/modules/shared/style/cn';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+  class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/number-field/NumberFieldDecrement.vue b/packages/app/src/modules/ui/components/number-field/NumberFieldDecrement.vue
index cfdd1074..945e670b 100644
--- a/packages/app/src/modules/ui/components/number-field/NumberFieldDecrement.vue
+++ b/packages/app/src/modules/ui/components/number-field/NumberFieldDecrement.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import type { NumberFieldDecrementProps } from 'radix-vue'
-import { cn } from '@/src/modules/shared/style/cn'
-import { Minus } from 'lucide-vue-next'
-import { NumberFieldDecrement, useForwardProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
+import type { NumberFieldDecrementProps } from 'radix-vue';
+import { cn } from '@/src/modules/shared/style/cn';
+import { Minus } from 'lucide-vue-next';
+import { NumberFieldDecrement, useForwardProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 
-const forwarded = useForwardProps(delegatedProps)
+const forwarded = useForwardProps(delegatedProps);
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/number-field/NumberFieldIncrement.vue b/packages/app/src/modules/ui/components/number-field/NumberFieldIncrement.vue
index d583a8cf..4b2a3660 100644
--- a/packages/app/src/modules/ui/components/number-field/NumberFieldIncrement.vue
+++ b/packages/app/src/modules/ui/components/number-field/NumberFieldIncrement.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import type { NumberFieldIncrementProps } from 'radix-vue'
-import { cn } from '@/src/modules/shared/style/cn'
-import { Plus } from 'lucide-vue-next'
-import { NumberFieldIncrement, useForwardProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
+import type { NumberFieldIncrementProps } from 'radix-vue';
+import { cn } from '@/src/modules/shared/style/cn';
+import { Plus } from 'lucide-vue-next';
+import { NumberFieldIncrement, useForwardProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 
-const forwarded = useForwardProps(delegatedProps)
+const forwarded = useForwardProps(delegatedProps);
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/number-field/NumberFieldInput.vue b/packages/app/src/modules/ui/components/number-field/NumberFieldInput.vue
index 4c72f209..254cee75 100644
--- a/packages/app/src/modules/ui/components/number-field/NumberFieldInput.vue
+++ b/packages/app/src/modules/ui/components/number-field/NumberFieldInput.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/src/modules/shared/style/cn'
-import { NumberFieldInput } from 'radix-vue'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/src/modules/shared/style/cn';
+import { NumberFieldInput } from 'radix-vue';
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+  class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/number-field/index.ts b/packages/app/src/modules/ui/components/number-field/index.ts
index 5489697d..bcdde78a 100644
--- a/packages/app/src/modules/ui/components/number-field/index.ts
+++ b/packages/app/src/modules/ui/components/number-field/index.ts
@@ -1,5 +1,5 @@
-export { default as NumberField } from './NumberField.vue'
-export { default as NumberFieldContent } from './NumberFieldContent.vue'
-export { default as NumberFieldDecrement } from './NumberFieldDecrement.vue'
-export { default as NumberFieldIncrement } from './NumberFieldIncrement.vue'
-export { default as NumberFieldInput } from './NumberFieldInput.vue'
+export { default as NumberField } from './NumberField.vue';
+export { default as NumberFieldContent } from './NumberFieldContent.vue';
+export { default as NumberFieldDecrement } from './NumberFieldDecrement.vue';
+export { default as NumberFieldIncrement } from './NumberFieldIncrement.vue';
+export { default as NumberFieldInput } from './NumberFieldInput.vue';
diff --git a/packages/app/src/modules/ui/components/select/Select.vue b/packages/app/src/modules/ui/components/select/Select.vue
index adc42fdf..160402f3 100644
--- a/packages/app/src/modules/ui/components/select/Select.vue
+++ b/packages/app/src/modules/ui/components/select/Select.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { SelectRootEmits, SelectRootProps } from 'radix-vue'
-import { SelectRoot, useForwardPropsEmits } from 'radix-vue'
+import type { SelectRootEmits, SelectRootProps } from 'radix-vue';
+import { SelectRoot, useForwardPropsEmits } from 'radix-vue';
 
-const props = defineProps<SelectRootProps>()
-const emits = defineEmits<SelectRootEmits>()
+const props = defineProps<SelectRootProps>();
+const emits = defineEmits<SelectRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/select/SelectContent.vue b/packages/app/src/modules/ui/components/select/SelectContent.vue
index 56cc55d1..0b55cca1 100644
--- a/packages/app/src/modules/ui/components/select/SelectContent.vue
+++ b/packages/app/src/modules/ui/components/select/SelectContent.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cn } from '@/src/modules/shared/style/cn'
+import { cn } from '@/src/modules/shared/style/cn';
 import {
   SelectContent,
   type SelectContentEmits,
@@ -7,29 +7,29 @@ import {
   SelectPortal,
   SelectViewport,
   useForwardPropsEmits,
-} from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-import { SelectScrollDownButton, SelectScrollUpButton } from '.'
+} from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+import { SelectScrollDownButton, SelectScrollUpButton } from '.';
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
 const props = withDefaults(
   defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),
   {
     position: 'popper',
   },
-)
-const emits = defineEmits<SelectContentEmits>()
+);
+const emits = defineEmits<SelectContentEmits>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/select/SelectGroup.vue b/packages/app/src/modules/ui/components/select/SelectGroup.vue
index ef4474a6..8aa3cae1 100644
--- a/packages/app/src/modules/ui/components/select/SelectGroup.vue
+++ b/packages/app/src/modules/ui/components/select/SelectGroup.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { cn } from '@/src/modules/shared/style/cn'
-import { SelectGroup, type SelectGroupProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '@/src/modules/shared/style/cn';
+import { SelectGroup, type SelectGroupProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/select/SelectItem.vue b/packages/app/src/modules/ui/components/select/SelectItem.vue
index 91f1aedd..89eeac4d 100644
--- a/packages/app/src/modules/ui/components/select/SelectItem.vue
+++ b/packages/app/src/modules/ui/components/select/SelectItem.vue
@@ -1,24 +1,24 @@
 <script setup lang="ts">
-import { cn } from '@/src/modules/shared/style/cn'
-import { CheckIcon } from '@radix-icons/vue'
+import { cn } from '@/src/modules/shared/style/cn';
+import { CheckIcon } from '@radix-icons/vue';
 import {
   SelectItem,
   SelectItemIndicator,
   type SelectItemProps,
   SelectItemText,
   useForwardProps,
-} from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
+} from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/select/SelectItemText.vue b/packages/app/src/modules/ui/components/select/SelectItemText.vue
index a0bb5c24..6a1e649e 100644
--- a/packages/app/src/modules/ui/components/select/SelectItemText.vue
+++ b/packages/app/src/modules/ui/components/select/SelectItemText.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { SelectItemText, type SelectItemTextProps } from 'radix-vue'
+import { SelectItemText, type SelectItemTextProps } from 'radix-vue';
 
-const props = defineProps<SelectItemTextProps>()
+const props = defineProps<SelectItemTextProps>();
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/select/SelectLabel.vue b/packages/app/src/modules/ui/components/select/SelectLabel.vue
index 7ca1ca62..04126b56 100644
--- a/packages/app/src/modules/ui/components/select/SelectLabel.vue
+++ b/packages/app/src/modules/ui/components/select/SelectLabel.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/src/modules/shared/style/cn'
-import { SelectLabel, type SelectLabelProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/src/modules/shared/style/cn';
+import { SelectLabel, type SelectLabelProps } from 'radix-vue';
 
-const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>();
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/select/SelectScrollDownButton.vue b/packages/app/src/modules/ui/components/select/SelectScrollDownButton.vue
index 8853a086..4679ee05 100644
--- a/packages/app/src/modules/ui/components/select/SelectScrollDownButton.vue
+++ b/packages/app/src/modules/ui/components/select/SelectScrollDownButton.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import { cn } from '@/src/modules/shared/style/cn'
-import { ChevronDownIcon } from '@radix-icons/vue'
-import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '@/src/modules/shared/style/cn';
+import { ChevronDownIcon } from '@radix-icons/vue';
+import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/select/SelectScrollUpButton.vue b/packages/app/src/modules/ui/components/select/SelectScrollUpButton.vue
index c8179938..7000f92b 100644
--- a/packages/app/src/modules/ui/components/select/SelectScrollUpButton.vue
+++ b/packages/app/src/modules/ui/components/select/SelectScrollUpButton.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import { cn } from '@/src/modules/shared/style/cn'
-import { ChevronUpIcon } from '@radix-icons/vue'
-import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '@/src/modules/shared/style/cn';
+import { ChevronUpIcon } from '@radix-icons/vue';
+import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/select/SelectSeparator.vue b/packages/app/src/modules/ui/components/select/SelectSeparator.vue
index ff2ee6c8..ae9c71f3 100644
--- a/packages/app/src/modules/ui/components/select/SelectSeparator.vue
+++ b/packages/app/src/modules/ui/components/select/SelectSeparator.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { cn } from '@/src/modules/shared/style/cn'
-import { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '@/src/modules/shared/style/cn';
+import { SelectSeparator, type SelectSeparatorProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/select/SelectValue.vue b/packages/app/src/modules/ui/components/select/SelectValue.vue
index 4bc37dd8..47fe9411 100644
--- a/packages/app/src/modules/ui/components/select/SelectValue.vue
+++ b/packages/app/src/modules/ui/components/select/SelectValue.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { SelectValue, type SelectValueProps } from 'radix-vue'
+import { SelectValue, type SelectValueProps } from 'radix-vue';
 
-const props = defineProps<SelectValueProps>()
+const props = defineProps<SelectValueProps>();
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/select/index.ts b/packages/app/src/modules/ui/components/select/index.ts
index 31b92946..d7fdf0df 100644
--- a/packages/app/src/modules/ui/components/select/index.ts
+++ b/packages/app/src/modules/ui/components/select/index.ts
@@ -1,11 +1,11 @@
-export { default as Select } from './Select.vue'
-export { default as SelectContent } from './SelectContent.vue'
-export { default as SelectGroup } from './SelectGroup.vue'
-export { default as SelectItem } from './SelectItem.vue'
-export { default as SelectItemText } from './SelectItemText.vue'
-export { default as SelectLabel } from './SelectLabel.vue'
-export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'
-export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
-export { default as SelectSeparator } from './SelectSeparator.vue'
-export { default as SelectTrigger } from './SelectTrigger.vue'
-export { default as SelectValue } from './SelectValue.vue'
+export { default as Select } from './Select.vue';
+export { default as SelectContent } from './SelectContent.vue';
+export { default as SelectGroup } from './SelectGroup.vue';
+export { default as SelectItem } from './SelectItem.vue';
+export { default as SelectItemText } from './SelectItemText.vue';
+export { default as SelectLabel } from './SelectLabel.vue';
+export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue';
+export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue';
+export { default as SelectSeparator } from './SelectSeparator.vue';
+export { default as SelectTrigger } from './SelectTrigger.vue';
+export { default as SelectValue } from './SelectValue.vue';
diff --git a/packages/app/src/modules/ui/components/sheet/Sheet.vue b/packages/app/src/modules/ui/components/sheet/Sheet.vue
index a04c0262..18f6100f 100644
--- a/packages/app/src/modules/ui/components/sheet/Sheet.vue
+++ b/packages/app/src/modules/ui/components/sheet/Sheet.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue'
+import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue';
 
-const props = defineProps<DialogRootProps>()
-const emits = defineEmits<DialogRootEmits>()
+const props = defineProps<DialogRootProps>();
+const emits = defineEmits<DialogRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/sheet/SheetClose.vue b/packages/app/src/modules/ui/components/sheet/SheetClose.vue
index a64703e5..cc1f09f1 100644
--- a/packages/app/src/modules/ui/components/sheet/SheetClose.vue
+++ b/packages/app/src/modules/ui/components/sheet/SheetClose.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { DialogClose, type DialogCloseProps } from 'radix-vue'
+import { DialogClose, type DialogCloseProps } from 'radix-vue';
 
-const props = defineProps<DialogCloseProps>()
+const props = defineProps<DialogCloseProps>();
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/sheet/SheetDescription.vue b/packages/app/src/modules/ui/components/sheet/SheetDescription.vue
index 8f128ff8..7e98ffe2 100644
--- a/packages/app/src/modules/ui/components/sheet/SheetDescription.vue
+++ b/packages/app/src/modules/ui/components/sheet/SheetDescription.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { cn } from '@/src/modules/shared/style/cn'
-import { DialogDescription, type DialogDescriptionProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '@/src/modules/shared/style/cn';
+import { DialogDescription, type DialogDescriptionProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/sheet/SheetFooter.vue b/packages/app/src/modules/ui/components/sheet/SheetFooter.vue
index 88218a6c..c21a4901 100644
--- a/packages/app/src/modules/ui/components/sheet/SheetFooter.vue
+++ b/packages/app/src/modules/ui/components/sheet/SheetFooter.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/src/modules/shared/style/cn'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/src/modules/shared/style/cn';
 
-const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+const props = defineProps<{ class?: HTMLAttributes['class'] }>();
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/sheet/SheetHeader.vue b/packages/app/src/modules/ui/components/sheet/SheetHeader.vue
index 978f1269..f0ef002b 100644
--- a/packages/app/src/modules/ui/components/sheet/SheetHeader.vue
+++ b/packages/app/src/modules/ui/components/sheet/SheetHeader.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/src/modules/shared/style/cn'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/src/modules/shared/style/cn';
 
-const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+const props = defineProps<{ class?: HTMLAttributes['class'] }>();
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/sheet/SheetTitle.vue b/packages/app/src/modules/ui/components/sheet/SheetTitle.vue
index a48a617c..3429079c 100644
--- a/packages/app/src/modules/ui/components/sheet/SheetTitle.vue
+++ b/packages/app/src/modules/ui/components/sheet/SheetTitle.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { cn } from '@/src/modules/shared/style/cn'
-import { DialogTitle, type DialogTitleProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '@/src/modules/shared/style/cn';
+import { DialogTitle, type DialogTitleProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/sheet/SheetTrigger.vue b/packages/app/src/modules/ui/components/sheet/SheetTrigger.vue
index ee0c12ff..f803446a 100644
--- a/packages/app/src/modules/ui/components/sheet/SheetTrigger.vue
+++ b/packages/app/src/modules/ui/components/sheet/SheetTrigger.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { DialogTrigger, type DialogTriggerProps } from 'radix-vue'
+import { DialogTrigger, type DialogTriggerProps } from 'radix-vue';
 
-const props = defineProps<DialogTriggerProps>()
+const props = defineProps<DialogTriggerProps>();
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/sheet/index.ts b/packages/app/src/modules/ui/components/sheet/index.ts
index 4c4e77af..c6fdd118 100644
--- a/packages/app/src/modules/ui/components/sheet/index.ts
+++ b/packages/app/src/modules/ui/components/sheet/index.ts
@@ -1,13 +1,13 @@
-import { cva, type VariantProps } from 'class-variance-authority'
+import { cva, type VariantProps } from 'class-variance-authority';
 
-export { default as Sheet } from './Sheet.vue'
-export { default as SheetClose } from './SheetClose.vue'
-export { default as SheetContent } from './SheetContent.vue'
-export { default as SheetDescription } from './SheetDescription.vue'
-export { default as SheetFooter } from './SheetFooter.vue'
-export { default as SheetHeader } from './SheetHeader.vue'
-export { default as SheetTitle } from './SheetTitle.vue'
-export { default as SheetTrigger } from './SheetTrigger.vue'
+export { default as Sheet } from './Sheet.vue';
+export { default as SheetClose } from './SheetClose.vue';
+export { default as SheetContent } from './SheetContent.vue';
+export { default as SheetDescription } from './SheetDescription.vue';
+export { default as SheetFooter } from './SheetFooter.vue';
+export { default as SheetHeader } from './SheetHeader.vue';
+export { default as SheetTitle } from './SheetTitle.vue';
+export { default as SheetTrigger } from './SheetTrigger.vue';
 
 export const sheetVariants = cva(
   'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
@@ -26,6 +26,6 @@ export const sheetVariants = cva(
       side: 'right',
     },
   },
-)
+);
 
-export type SheetVariants = VariantProps<typeof sheetVariants>
+export type SheetVariants = VariantProps<typeof sheetVariants>;
diff --git a/packages/app/src/modules/ui/components/slider/Slider.vue b/packages/app/src/modules/ui/components/slider/Slider.vue
index 7b27d67c..0f620e53 100644
--- a/packages/app/src/modules/ui/components/slider/Slider.vue
+++ b/packages/app/src/modules/ui/components/slider/Slider.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import type { SliderRootEmits, SliderRootProps } from 'radix-vue'
-import { cn } from '@/src/modules/shared/style/cn'
-import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
+import type { SliderRootEmits, SliderRootProps } from 'radix-vue';
+import { cn } from '@/src/modules/shared/style/cn';
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
 
-const props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<SliderRootEmits>()
+const props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<SliderRootEmits>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/slider/index.ts b/packages/app/src/modules/ui/components/slider/index.ts
index 1c945deb..23bfdaba 100644
--- a/packages/app/src/modules/ui/components/slider/index.ts
+++ b/packages/app/src/modules/ui/components/slider/index.ts
@@ -1 +1 @@
-export { default as Slider } from './Slider.vue'
+export { default as Slider } from './Slider.vue';
diff --git a/packages/app/src/modules/ui/components/textarea/index.ts b/packages/app/src/modules/ui/components/textarea/index.ts
index 6a7ab2a7..e2d47739 100644
--- a/packages/app/src/modules/ui/components/textarea/index.ts
+++ b/packages/app/src/modules/ui/components/textarea/index.ts
@@ -1 +1 @@
-export { default as Textarea } from './Textarea.vue'
+export { default as Textarea } from './Textarea.vue';
diff --git a/packages/app/src/modules/ui/components/toggle-group/ToggleGroup.vue b/packages/app/src/modules/ui/components/toggle-group/ToggleGroup.vue
index 3f31a5f3..5785406e 100644
--- a/packages/app/src/modules/ui/components/toggle-group/ToggleGroup.vue
+++ b/packages/app/src/modules/ui/components/toggle-group/ToggleGroup.vue
@@ -1,34 +1,34 @@
 <script setup lang="ts">
-import type { toggleVariants } from '@/src/modules/ui/components/toggle'
-import type { VariantProps } from 'class-variance-authority'
-import { cn } from '@/src/modules/shared/style/cn'
-import { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'radix-vue'
-import { computed, type HTMLAttributes, provide } from 'vue'
+import type { toggleVariants } from '@/src/modules/ui/components/toggle';
+import type { VariantProps } from 'class-variance-authority';
+import { cn } from '@/src/modules/shared/style/cn';
+import { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'radix-vue';
+import { computed, type HTMLAttributes, provide } from 'vue';
 
-type ToggleGroupVariants = VariantProps<typeof toggleVariants>
+type ToggleGroupVariants = VariantProps<typeof toggleVariants>;
 
 const props = defineProps<ToggleGroupRootProps & {
-  class?: HTMLAttributes['class']
-  variant?: ToggleGroupVariants['variant']
-  size?: ToggleGroupVariants['size']
-}>()
-const emits = defineEmits<ToggleGroupRootEmits>()
+  class?: HTMLAttributes['class'];
+  variant?: ToggleGroupVariants['variant'];
+  size?: ToggleGroupVariants['size'];
+}>();
+const emits = defineEmits<ToggleGroupRootEmits>();
 
 provide('toggleGroup', {
   variant: props.variant,
   size: props.size,
-})
+});
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-  return delegated
-})
+  const { class: _, ...delegated } = props;
+  return delegated;
+});
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <ToggleGroupRoot v-bind="forwarded" :class="cn('flex items-center justify-center gap-1', props.class)">
+  <ToggleGroupRoot v-bind="forwarded" :class="cn('flex items-center gap-1', props.class)">
     <slot />
   </ToggleGroupRoot>
 </template>
diff --git a/packages/app/src/modules/ui/components/toggle-group/ToggleGroupItem.vue b/packages/app/src/modules/ui/components/toggle-group/ToggleGroupItem.vue
index adcbb217..bddb1f97 100644
--- a/packages/app/src/modules/ui/components/toggle-group/ToggleGroupItem.vue
+++ b/packages/app/src/modules/ui/components/toggle-group/ToggleGroupItem.vue
@@ -1,26 +1,24 @@
 <script setup lang="ts">
-import type { VariantProps } from 'class-variance-authority'
-import { toggleVariants } from '@/src/modules/ui/components/toggle'
-import { cn } from '@/src/modules/shared/style/cn'
-import { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'radix-vue'
-import { computed, type HTMLAttributes, inject } from 'vue'
+import type { VariantProps } from 'class-variance-authority';
+import { cn } from '@/src/modules/shared/style/cn';
+import { toggleVariants } from '@/src/modules/ui/components/toggle';
+import { omit } from 'lodash-es';
+import { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'radix-vue';
+import { computed, type HTMLAttributes, inject } from 'vue';
 
-type ToggleGroupVariants = VariantProps<typeof toggleVariants>
+type ToggleGroupVariants = VariantProps<typeof toggleVariants>;
 
 const props = defineProps<ToggleGroupItemProps & {
-  class?: HTMLAttributes['class']
-  variant?: ToggleGroupVariants['variant']
-  size?: ToggleGroupVariants['size']
-}>()
+  class?: HTMLAttributes['class'];
+  variant?: ToggleGroupVariants['variant'];
+  size?: ToggleGroupVariants['size'];
+}>();
 
-const context = inject<ToggleGroupVariants>('toggleGroup')
+const context = inject<ToggleGroupVariants>('toggleGroup');
 
-const delegatedProps = computed(() => {
-  const { class: _, variant, size, ...delegated } = props
-  return delegated
-})
+const delegatedProps = computed(() => omit(props, ['class', 'variant', 'size']));
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
diff --git a/packages/app/src/modules/ui/components/toggle-group/index.ts b/packages/app/src/modules/ui/components/toggle-group/index.ts
index 9f89ad77..ac3e34bb 100644
--- a/packages/app/src/modules/ui/components/toggle-group/index.ts
+++ b/packages/app/src/modules/ui/components/toggle-group/index.ts
@@ -1,2 +1,2 @@
-export { default as ToggleGroup } from './ToggleGroup.vue'
-export { default as ToggleGroupItem } from './ToggleGroupItem.vue'
+export { default as ToggleGroup } from './ToggleGroup.vue';
+export { default as ToggleGroupItem } from './ToggleGroupItem.vue';
diff --git a/packages/app/src/modules/ui/components/toggle/Toggle.vue b/packages/app/src/modules/ui/components/toggle/Toggle.vue
index e40f326d..1b05b469 100644
--- a/packages/app/src/modules/ui/components/toggle/Toggle.vue
+++ b/packages/app/src/modules/ui/components/toggle/Toggle.vue
@@ -1,28 +1,25 @@
 <script setup lang="ts">
-import { cn } from '@/src/modules/shared/style/cn'
-import { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
-import { type ToggleVariants, toggleVariants } from '.'
+import { cn } from '@/src/modules/shared/style/cn';
+import { omit } from 'lodash-es';
+import { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+import { type ToggleVariants, toggleVariants } from '.';
 
 const props = withDefaults(defineProps<ToggleProps & {
-  class?: HTMLAttributes['class']
-  variant?: ToggleVariants['variant']
-  size?: ToggleVariants['size']
+  class?: HTMLAttributes['class'];
+  variant?: ToggleVariants['variant'];
+  size?: ToggleVariants['size'];
 }>(), {
   variant: 'default',
   size: 'default',
   disabled: false,
-})
+});
 
-const emits = defineEmits<ToggleEmits>()
+const emits = defineEmits<ToggleEmits>();
 
-const delegatedProps = computed(() => {
-  const { class: _, size, variant, ...delegated } = props
+const delegatedProps = computed(() => omit(props, ['class', 'variant', 'size']));
 
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>