From eb3006289135722c83daed9c5f37f0c8066d19bb Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Sat, 2 Mar 2024 18:25:31 +0100
Subject: [PATCH] UPD: Linting

---
 postcss.config.js                             |   4 +-
 src/renderer/src/components/ui/.eslintrc      |   5 +
 src/renderer/src/components/ui/badge/index.ts |  13 +--
 .../src/components/ui/button/Button.vue       |   2 +-
 .../src/components/ui/button/index.ts         |  18 ++-
 .../ui/collapsible/CollapsibleContent.vue     |   5 +-
 .../src/components/ui/command/Command.vue     |   9 +-
 .../components/ui/command/CommandDialog.vue   |   4 +-
 .../components/ui/command/CommandGroup.vue    |  17 ++-
 .../components/ui/command/CommandInput.vue    |  19 +++-
 .../src/components/ui/command/CommandItem.vue |   7 +-
 .../src/components/ui/command/CommandList.vue |   5 +-
 .../ui/command/CommandSeparator.vue           |   5 +-
 .../src/components/ui/dialog/Dialog.vue       |   7 +-
 .../components/ui/dialog/DialogContent.vue    |  11 +-
 .../ui/dialog/DialogScrollContent.vue         |  27 +++--
 .../src/components/ui/dialog/DialogTitle.vue  |   7 +-
 .../ui/dropdown-menu/DropdownMenu.vue         |   7 +-
 .../DropdownMenuCheckboxItem.vue              |  16 +--
 .../ui/dropdown-menu/DropdownMenuContent.vue  |  13 ++-
 .../ui/dropdown-menu/DropdownMenuItem.vue     |  16 ++-
 .../dropdown-menu/DropdownMenuRadioGroup.vue  |   2 +-
 .../dropdown-menu/DropdownMenuRadioItem.vue   |   4 +-
 .../dropdown-menu/DropdownMenuSeparator.vue   |  18 +--
 .../ui/dropdown-menu/DropdownMenuSub.vue      |   2 +-
 .../dropdown-menu/DropdownMenuSubTrigger.vue  |  14 ++-
 .../ui/menubar/MenubarCheckboxItem.vue        |   4 +-
 .../ui/menubar/MenubarRadioGroup.vue          |   2 +-
 .../ui/menubar/MenubarRadioItem.vue           |   4 +-
 .../ui/menubar/MenubarSubTrigger.vue          |   2 +-
 .../src/components/ui/slider/Slider.vue       |   6 +-
 src/renderer/src/lib/utils.ts                 |   2 +-
 tailwind.config.js                            | 104 +++++++++---------
 33 files changed, 219 insertions(+), 162 deletions(-)
 create mode 100644 src/renderer/src/components/ui/.eslintrc

diff --git a/postcss.config.js b/postcss.config.js
index 33ad091..85f717c 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
     tailwindcss: {},
-    autoprefixer: {},
-  },
+    autoprefixer: {}
+  }
 }
diff --git a/src/renderer/src/components/ui/.eslintrc b/src/renderer/src/components/ui/.eslintrc
new file mode 100644
index 0000000..2a8e38e
--- /dev/null
+++ b/src/renderer/src/components/ui/.eslintrc
@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "@typescript-eslint/no-unused-vars": "off"
+  }
+}
diff --git a/src/renderer/src/components/ui/badge/index.ts b/src/renderer/src/components/ui/badge/index.ts
index 20eda06..d574891 100644
--- a/src/renderer/src/components/ui/badge/index.ts
+++ b/src/renderer/src/components/ui/badge/index.ts
@@ -7,19 +7,18 @@ export const badgeVariants = cva(
   {
     variants: {
       variant: {
-        default:
-          'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+        default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
         secondary:
           'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
         destructive:
           'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
-        outline: 'text-foreground',
-      },
+        outline: 'text-foreground'
+      }
     },
     defaultVariants: {
-      variant: 'default',
-    },
-  },
+      variant: 'default'
+    }
+  }
 )
 
 export type BadgeVariants = VariantProps<typeof badgeVariants>
diff --git a/src/renderer/src/components/ui/button/Button.vue b/src/renderer/src/components/ui/button/Button.vue
index e7ab516..56cd17d 100644
--- a/src/renderer/src/components/ui/button/Button.vue
+++ b/src/renderer/src/components/ui/button/Button.vue
@@ -12,7 +12,7 @@ interface Props extends PrimitiveProps {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  as: 'button',
+  as: 'button'
 })
 </script>
 
diff --git a/src/renderer/src/components/ui/button/index.ts b/src/renderer/src/components/ui/button/index.ts
index 4bb4bdb..90a7b2d 100644
--- a/src/renderer/src/components/ui/button/index.ts
+++ b/src/renderer/src/components/ui/button/index.ts
@@ -8,27 +8,25 @@ export const buttonVariants = cva(
     variants: {
       variant: {
         default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
-        destructive:
-          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
         outline:
           'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
-        secondary:
-          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
+        link: 'text-primary underline-offset-4 hover:underline'
       },
       size: {
         default: 'h-9 px-4 py-2',
         sm: 'h-8 rounded-md px-3 text-xs',
         lg: 'h-10 rounded-md px-8',
-        icon: 'h-9 w-9',
-      },
+        icon: 'size-9'
+      }
     },
     defaultVariants: {
       variant: 'default',
-      size: 'default',
-    },
-  },
+      size: 'default'
+    }
+  }
 )
 
 export type ButtonVariants = VariantProps<typeof buttonVariants>
diff --git a/src/renderer/src/components/ui/collapsible/CollapsibleContent.vue b/src/renderer/src/components/ui/collapsible/CollapsibleContent.vue
index 9f30898..92acb77 100644
--- a/src/renderer/src/components/ui/collapsible/CollapsibleContent.vue
+++ b/src/renderer/src/components/ui/collapsible/CollapsibleContent.vue
@@ -5,7 +5,10 @@ const props = defineProps<CollapsibleContentProps>()
 </script>
 
 <template>
-  <CollapsibleContent v-bind="props" class="overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
+  <CollapsibleContent
+    v-bind="props"
+    class="overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down"
+  >
     <slot />
   </CollapsibleContent>
 </template>
diff --git a/src/renderer/src/components/ui/command/Command.vue b/src/renderer/src/components/ui/command/Command.vue
index fd07554..7348d6f 100644
--- a/src/renderer/src/components/ui/command/Command.vue
+++ b/src/renderer/src/components/ui/command/Command.vue
@@ -6,7 +6,7 @@ import { cn } from '@renderer/lib/utils'
 
 const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
   open: true,
-  modelValue: '',
+  modelValue: ''
 })
 
 const emits = defineEmits<ComboboxRootEmits>()
@@ -23,7 +23,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <template>
   <ComboboxRoot
     v-bind="forwarded"
-    :class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)"
+    :class="
+      cn(
+        'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
+        props.class
+      )
+    "
   >
     <slot />
   </ComboboxRoot>
diff --git a/src/renderer/src/components/ui/command/CommandDialog.vue b/src/renderer/src/components/ui/command/CommandDialog.vue
index 13a4887..197e9e7 100644
--- a/src/renderer/src/components/ui/command/CommandDialog.vue
+++ b/src/renderer/src/components/ui/command/CommandDialog.vue
@@ -13,7 +13,9 @@ const forwarded = useForwardPropsEmits(props, emits)
 <template>
   <Dialog v-bind="forwarded">
     <DialogContent class="overflow-hidden p-0 shadow-lg">
-      <Command class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+      <Command
+        class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5"
+      >
         <slot />
       </Command>
     </DialogContent>
diff --git a/src/renderer/src/components/ui/command/CommandGroup.vue b/src/renderer/src/components/ui/command/CommandGroup.vue
index 08482c9..d3866e0 100644
--- a/src/renderer/src/components/ui/command/CommandGroup.vue
+++ b/src/renderer/src/components/ui/command/CommandGroup.vue
@@ -4,10 +4,12 @@ import type { ComboboxGroupProps } from 'radix-vue'
 import { ComboboxGroup, ComboboxLabel } from 'radix-vue'
 import { cn } from '@renderer/lib/utils'
 
-const props = defineProps<ComboboxGroupProps & {
-  class?: HTMLAttributes['class']
-  heading?: string
-}>()
+const props = defineProps<
+  ComboboxGroupProps & {
+    class?: HTMLAttributes['class']
+    heading?: string
+  }
+>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -19,7 +21,12 @@ const delegatedProps = computed(() => {
 <template>
   <ComboboxGroup
     v-bind="delegatedProps"
-    :class="cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)"
+    :class="
+      cn(
+        'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
+        props.class
+      )
+    "
   >
     <ComboboxLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
       {{ heading }}
diff --git a/src/renderer/src/components/ui/command/CommandInput.vue b/src/renderer/src/components/ui/command/CommandInput.vue
index c678c38..c368abd 100644
--- a/src/renderer/src/components/ui/command/CommandInput.vue
+++ b/src/renderer/src/components/ui/command/CommandInput.vue
@@ -5,12 +5,14 @@ import { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'radix-v
 import { cn } from '@renderer/lib/utils'
 
 defineOptions({
-  inheritAttrs: false,
+  inheritAttrs: false
 })
 
-const props = defineProps<ComboboxInputProps & {
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps<
+  ComboboxInputProps & {
+    class?: HTMLAttributes['class']
+  }
+>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -23,11 +25,16 @@ const forwardedProps = useForwardProps(delegatedProps)
 
 <template>
   <div class="flex items-center border-b px-3" cmdk-input-wrapper>
-    <MagnifyingGlassIcon class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <MagnifyingGlassIcon class="mr-2 size-4 shrink-0 opacity-50" />
     <ComboboxInput
       v-bind="{ ...forwardedProps, ...$attrs }"
       auto-focus
-      :class="cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+      :class="
+        cn(
+          'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+          props.class
+        )
+      "
     />
   </div>
 </template>
diff --git a/src/renderer/src/components/ui/command/CommandItem.vue b/src/renderer/src/components/ui/command/CommandItem.vue
index 7b57233..9bcc74c 100644
--- a/src/renderer/src/components/ui/command/CommandItem.vue
+++ b/src/renderer/src/components/ui/command/CommandItem.vue
@@ -19,7 +19,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <template>
   <ComboboxItem
     v-bind="forwarded"
-    :class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)"
+    :class="
+      cn(
+        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class
+      )
+    "
   >
     <slot />
   </ComboboxItem>
diff --git a/src/renderer/src/components/ui/command/CommandList.vue b/src/renderer/src/components/ui/command/CommandList.vue
index 325adf9..02475a7 100644
--- a/src/renderer/src/components/ui/command/CommandList.vue
+++ b/src/renderer/src/components/ui/command/CommandList.vue
@@ -17,7 +17,10 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-  <ComboboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)">
+  <ComboboxContent
+    v-bind="forwarded"
+    :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)"
+  >
     <div role="presentation">
       <slot />
     </div>
diff --git a/src/renderer/src/components/ui/command/CommandSeparator.vue b/src/renderer/src/components/ui/command/CommandSeparator.vue
index ebf9e16..0ae552c 100644
--- a/src/renderer/src/components/ui/command/CommandSeparator.vue
+++ b/src/renderer/src/components/ui/command/CommandSeparator.vue
@@ -14,10 +14,7 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <ComboboxSeparator
-    v-bind="delegatedProps"
-    :class="cn('-mx-1 h-px bg-border', props.class)"
-  >
+  <ComboboxSeparator v-bind="delegatedProps" :class="cn('-mx-1 h-px bg-border', props.class)">
     <slot />
   </ComboboxSeparator>
 </template>
diff --git a/src/renderer/src/components/ui/dialog/Dialog.vue b/src/renderer/src/components/ui/dialog/Dialog.vue
index a04c026..7f26e47 100644
--- a/src/renderer/src/components/ui/dialog/Dialog.vue
+++ b/src/renderer/src/components/ui/dialog/Dialog.vue
@@ -1,5 +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>()
diff --git a/src/renderer/src/components/ui/dialog/DialogContent.vue b/src/renderer/src/components/ui/dialog/DialogContent.vue
index b382d1c..80285e4 100644
--- a/src/renderer/src/components/ui/dialog/DialogContent.vue
+++ b/src/renderer/src/components/ui/dialog/DialogContent.vue
@@ -7,7 +7,7 @@ import {
   type DialogContentProps,
   DialogOverlay,
   DialogPortal,
-  useForwardPropsEmits,
+  useForwardPropsEmits
 } from 'radix-vue'
 import { Cross2Icon } from '@radix-icons/vue'
 import { cn } from '@renderer/lib/utils'
@@ -27,22 +27,23 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <template>
   <DialogPortal>
     <DialogOverlay
-      class="fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
     />
     <DialogContent
       v-bind="forwarded"
       :class="
         cn(
           'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
-          props.class,
-        )"
+          props.class
+        )
+      "
     >
       <slot />
 
       <DialogClose
         class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
       >
-        <Cross2Icon class="w-4 h-4" />
+        <Cross2Icon class="size-4" />
         <span class="sr-only">Close</span>
       </DialogClose>
     </DialogContent>
diff --git a/src/renderer/src/components/ui/dialog/DialogScrollContent.vue b/src/renderer/src/components/ui/dialog/DialogScrollContent.vue
index c8c4640..99500fb 100644
--- a/src/renderer/src/components/ui/dialog/DialogScrollContent.vue
+++ b/src/renderer/src/components/ui/dialog/DialogScrollContent.vue
@@ -7,7 +7,7 @@ import {
   type DialogContentProps,
   DialogOverlay,
   DialogPortal,
-  useForwardPropsEmits,
+  useForwardPropsEmits
 } from 'radix-vue'
 import { X } from 'lucide-vue-next'
 import { cn } from '@renderer/lib/utils'
@@ -27,30 +27,35 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <template>
   <DialogPortal>
     <DialogOverlay
-      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
     >
       <DialogContent
         :class="
           cn(
             'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
-            props.class,
+            props.class
           )
         "
         v-bind="forwarded"
-        @pointer-down-outside="(event) => {
-          const originalEvent = event.detail.originalEvent;
-          const target = originalEvent.target as HTMLElement;
-          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
-            event.preventDefault();
+        @pointer-down-outside="
+          (event) => {
+            const originalEvent = event.detail.originalEvent
+            const target = originalEvent.target as HTMLElement
+            if (
+              originalEvent.offsetX > target.clientWidth ||
+              originalEvent.offsetY > target.clientHeight
+            ) {
+              event.preventDefault()
+            }
           }
-        }"
+        "
       >
         <slot />
 
         <DialogClose
-          class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
+          class="absolute right-4 top-4 rounded-md p-0.5 transition-colors hover:bg-secondary"
         >
-          <Cross2Icon class="w-4 h-4" />
+          <Cross2Icon class="size-4" />
           <span class="sr-only">Close</span>
         </DialogClose>
       </DialogContent>
diff --git a/src/renderer/src/components/ui/dialog/DialogTitle.vue b/src/renderer/src/components/ui/dialog/DialogTitle.vue
index 2938b72..e6e0b34 100644
--- a/src/renderer/src/components/ui/dialog/DialogTitle.vue
+++ b/src/renderer/src/components/ui/dialog/DialogTitle.vue
@@ -17,12 +17,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 <template>
   <DialogTitle
     v-bind="forwardedProps"
-    :class="
-      cn(
-        'text-lg font-semibold leading-none tracking-tight',
-        props.class,
-      )
-    "
+    :class="cn('text-lg font-semibold leading-none tracking-tight', props.class)"
   >
     <slot />
   </DialogTitle>
diff --git a/src/renderer/src/components/ui/dropdown-menu/DropdownMenu.vue b/src/renderer/src/components/ui/dropdown-menu/DropdownMenu.vue
index b83d90b..0f9cd7b 100644
--- a/src/renderer/src/components/ui/dropdown-menu/DropdownMenu.vue
+++ b/src/renderer/src/components/ui/dropdown-menu/DropdownMenu.vue
@@ -1,5 +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>()
diff --git a/src/renderer/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/src/renderer/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
index 8780ceb..5c9babb 100644
--- a/src/renderer/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/src/renderer/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -5,7 +5,7 @@ import {
   type DropdownMenuCheckboxItemEmits,
   type DropdownMenuCheckboxItemProps,
   DropdownMenuItemIndicator,
-  useForwardPropsEmits,
+  useForwardPropsEmits
 } from 'radix-vue'
 import { CheckIcon } from '@radix-icons/vue'
 import { cn } from '@renderer/lib/utils'
@@ -25,14 +25,16 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <template>
   <DropdownMenuCheckboxItem
     v-bind="forwarded"
-    :class=" cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      props.class,
-    )"
+    :class="
+      cn(
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class
+      )
+    "
   >
-    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span class="absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenuItemIndicator>
-        <CheckIcon class="w-4 h-4" />
+        <CheckIcon class="size-4" />
       </DropdownMenuItemIndicator>
     </span>
     <slot />
diff --git a/src/renderer/src/components/ui/dropdown-menu/DropdownMenuContent.vue b/src/renderer/src/components/ui/dropdown-menu/DropdownMenuContent.vue
index aa04c86..47fef90 100644
--- a/src/renderer/src/components/ui/dropdown-menu/DropdownMenuContent.vue
+++ b/src/renderer/src/components/ui/dropdown-menu/DropdownMenuContent.vue
@@ -5,15 +5,15 @@ import {
   type DropdownMenuContentEmits,
   type DropdownMenuContentProps,
   DropdownMenuPortal,
-  useForwardPropsEmits,
+  useForwardPropsEmits
 } from 'radix-vue'
 import { cn } from '@renderer/lib/utils'
 
 const props = withDefaults(
   defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
   {
-    sideOffset: 4,
-  },
+    sideOffset: 4
+  }
 )
 const emits = defineEmits<DropdownMenuContentEmits>()
 
@@ -30,7 +30,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <DropdownMenuPortal>
     <DropdownMenuContent
       v-bind="forwarded"
-      :class="cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
+      :class="
+        cn(
+          'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class
+        )
+      "
     >
       <slot />
     </DropdownMenuContent>
diff --git a/src/renderer/src/components/ui/dropdown-menu/DropdownMenuItem.vue b/src/renderer/src/components/ui/dropdown-menu/DropdownMenuItem.vue
index bfb37d9..aca0dfc 100644
--- a/src/renderer/src/components/ui/dropdown-menu/DropdownMenuItem.vue
+++ b/src/renderer/src/components/ui/dropdown-menu/DropdownMenuItem.vue
@@ -3,7 +3,9 @@ import { type HTMLAttributes, computed } from 'vue'
 import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'
 import { cn } from '@renderer/lib/utils'
 
-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
@@ -17,11 +19,13 @@ const forwardedProps = useForwardProps(delegatedProps)
 <template>
   <DropdownMenuItem
     v-bind="forwardedProps"
-    :class="cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      inset && 'pl-8',
-      props.class,
-    )"
+    :class="
+      cn(
+        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        inset && 'pl-8',
+        props.class
+      )
+    "
   >
     <slot />
   </DropdownMenuItem>
diff --git a/src/renderer/src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue b/src/renderer/src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
index 4a72790..b6d1fcc 100644
--- a/src/renderer/src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
+++ b/src/renderer/src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
@@ -3,7 +3,7 @@ import {
   DropdownMenuRadioGroup,
   type DropdownMenuRadioGroupEmits,
   type DropdownMenuRadioGroupProps,
-  useForwardPropsEmits,
+  useForwardPropsEmits
 } from 'radix-vue'
 
 const props = defineProps<DropdownMenuRadioGroupProps>()
diff --git a/src/renderer/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue b/src/renderer/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
index 76e35d3..e19023a 100644
--- a/src/renderer/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/src/renderer/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -33,9 +33,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       )
     "
   >
-    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span class="absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenuItemIndicator>
-        <DotFilledIcon class="h-4 w-4 fill-current" />
+        <DotFilledIcon class="size-4 fill-current" />
       </DropdownMenuItemIndicator>
     </span>
     <slot />
diff --git a/src/renderer/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue b/src/renderer/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue
index dc01d69..f3b26c8 100644
--- a/src/renderer/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue
+++ b/src/renderer/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from 'vue'
-import {
-  DropdownMenuSeparator,
-  type DropdownMenuSeparatorProps,
-} from 'radix-vue'
+import { DropdownMenuSeparator, type DropdownMenuSeparatorProps } from 'radix-vue'
 import { cn } from '@renderer/lib/utils'
 
-const props = defineProps<DropdownMenuSeparatorProps & {
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps<
+  DropdownMenuSeparatorProps & {
+    class?: HTMLAttributes['class']
+  }
+>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -18,5 +17,8 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <DropdownMenuSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
+  <DropdownMenuSeparator
+    v-bind="delegatedProps"
+    :class="cn('-mx-1 my-1 h-px bg-muted', props.class)"
+  />
 </template>
diff --git a/src/renderer/src/components/ui/dropdown-menu/DropdownMenuSub.vue b/src/renderer/src/components/ui/dropdown-menu/DropdownMenuSub.vue
index e0f4bd7..d01e1ae 100644
--- a/src/renderer/src/components/ui/dropdown-menu/DropdownMenuSub.vue
+++ b/src/renderer/src/components/ui/dropdown-menu/DropdownMenuSub.vue
@@ -3,7 +3,7 @@ import {
   DropdownMenuSub,
   type DropdownMenuSubEmits,
   type DropdownMenuSubProps,
-  useForwardPropsEmits,
+  useForwardPropsEmits
 } from 'radix-vue'
 
 const props = defineProps<DropdownMenuSubProps>()
diff --git a/src/renderer/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/src/renderer/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
index 4565330..369076f 100644
--- a/src/renderer/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/src/renderer/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -3,7 +3,7 @@ import { type HTMLAttributes, computed } from 'vue'
 import {
   DropdownMenuSubTrigger,
   type DropdownMenuSubTriggerProps,
-  useForwardProps,
+  useForwardProps
 } from 'radix-vue'
 import { ChevronRightIcon } from '@radix-icons/vue'
 import { cn } from '@renderer/lib/utils'
@@ -22,12 +22,14 @@ const forwardedProps = useForwardProps(delegatedProps)
 <template>
   <DropdownMenuSubTrigger
     v-bind="forwardedProps"
-    :class="cn(
-      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
-      props.class,
-    )"
+    :class="
+      cn(
+        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+        props.class
+      )
+    "
   >
     <slot />
-    <ChevronRightIcon class="ml-auto h-4 w-4" />
+    <ChevronRightIcon class="ml-auto size-4" />
   </DropdownMenuSubTrigger>
 </template>
diff --git a/src/renderer/src/components/ui/menubar/MenubarCheckboxItem.vue b/src/renderer/src/components/ui/menubar/MenubarCheckboxItem.vue
index f5652b5..c8c5127 100644
--- a/src/renderer/src/components/ui/menubar/MenubarCheckboxItem.vue
+++ b/src/renderer/src/components/ui/menubar/MenubarCheckboxItem.vue
@@ -32,9 +32,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       )
     "
   >
-    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span class="absolute left-2 flex size-3.5 items-center justify-center">
       <MenubarItemIndicator>
-        <CheckIcon class="w-4 h-4" />
+        <CheckIcon class="size-4" />
       </MenubarItemIndicator>
     </span>
     <slot />
diff --git a/src/renderer/src/components/ui/menubar/MenubarRadioGroup.vue b/src/renderer/src/components/ui/menubar/MenubarRadioGroup.vue
index 60a8cd1..7f70df3 100644
--- a/src/renderer/src/components/ui/menubar/MenubarRadioGroup.vue
+++ b/src/renderer/src/components/ui/menubar/MenubarRadioGroup.vue
@@ -3,7 +3,7 @@ import {
   MenubarRadioGroup,
   type MenubarRadioGroupEmits,
   type MenubarRadioGroupProps,
-  useForwardPropsEmits,
+  useForwardPropsEmits
 } from 'radix-vue'
 
 const props = defineProps<MenubarRadioGroupProps>()
diff --git a/src/renderer/src/components/ui/menubar/MenubarRadioItem.vue b/src/renderer/src/components/ui/menubar/MenubarRadioItem.vue
index 39e30fa..ab22666 100644
--- a/src/renderer/src/components/ui/menubar/MenubarRadioItem.vue
+++ b/src/renderer/src/components/ui/menubar/MenubarRadioItem.vue
@@ -32,9 +32,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       )
     "
   >
-    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span class="absolute left-2 flex size-3.5 items-center justify-center">
       <MenubarItemIndicator>
-        <DotFilledIcon class="h-4 w-4 fill-current" />
+        <DotFilledIcon class="size-4 fill-current" />
       </MenubarItemIndicator>
     </span>
     <slot />
diff --git a/src/renderer/src/components/ui/menubar/MenubarSubTrigger.vue b/src/renderer/src/components/ui/menubar/MenubarSubTrigger.vue
index 096bc37..da185e1 100644
--- a/src/renderer/src/components/ui/menubar/MenubarSubTrigger.vue
+++ b/src/renderer/src/components/ui/menubar/MenubarSubTrigger.vue
@@ -29,6 +29,6 @@ const forwardedProps = useForwardProps(delegatedProps)
     "
   >
     <slot />
-    <ChevronRightIcon class="ml-auto h-4 w-4" />
+    <ChevronRightIcon class="ml-auto size-4" />
   </MenubarSubTrigger>
 </template>
diff --git a/src/renderer/src/components/ui/slider/Slider.vue b/src/renderer/src/components/ui/slider/Slider.vue
index e7f8969..87d2164 100644
--- a/src/renderer/src/components/ui/slider/Slider.vue
+++ b/src/renderer/src/components/ui/slider/Slider.vue
@@ -22,12 +22,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     v-bind="forwarded"
   >
     <SliderTrack
-      class="flex h-2 w-full grow overflow-hidden rounded-full bg-primary/20 items-center transition-all duration-75"
+      class="flex h-2 w-full grow items-center overflow-hidden rounded-full bg-primary/20 transition-all duration-75"
     >
-      <SliderRange class="absolute h-1.5 bg-primary rounded-full" />
+      <SliderRange class="absolute h-1.5 rounded-full bg-primary" />
     </SliderTrack>
     <SliderThumb
-      class="flex h-6 w-8 rounded-[8px] hover:bg-zinc-200 border border-zinc-100 bg-zinc-300 transition-all duration-75 focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-zinc-600 justify-center items-center"
+      class="flex h-6 w-8 cursor-pointer items-center justify-center rounded-[8px] border border-zinc-100 bg-zinc-300 text-zinc-600 transition-all duration-75 hover:bg-zinc-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
       style="box-shadow: -3px 0 15px 0 rgba(0, 0, 0, 0.6)"
     >
       <MoreHorizontal class="h-full" />
diff --git a/src/renderer/src/lib/utils.ts b/src/renderer/src/lib/utils.ts
index 24470b3..4c577f0 100644
--- a/src/renderer/src/lib/utils.ts
+++ b/src/renderer/src/lib/utils.ts
@@ -1,6 +1,6 @@
 import { type ClassValue, clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
-import { camelize, getCurrentInstance, toHandlerKey } from 'vue'
+// import { camelize, getCurrentInstance, toHandlerKey } from 'vue'
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
diff --git a/tailwind.config.js b/tailwind.config.js
index 25912b2..b2482fb 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,92 +1,92 @@
-const animate = require("tailwindcss-animate")
+const animate = require('tailwindcss-animate')
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  darkMode: ["class"],
-  safelist: ["dark"],
-  
+  darkMode: ['class'],
+  safelist: ['dark'],
+
   content: [
     './pages/**/*.{ts,tsx,vue}',
     './components/**/*.{ts,tsx,vue}',
     './app/**/*.{ts,tsx,vue}',
-    './src/**/*.{ts,tsx,vue}',
-	],
-  
+    './src/**/*.{ts,tsx,vue}'
+  ],
+
   theme: {
     container: {
       center: true,
-      padding: "2rem",
+      padding: '2rem',
       screens: {
-        "2xl": "1400px",
-      },
+        '2xl': '1400px'
+      }
     },
     extend: {
       colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
         primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))'
         },
         secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))'
         },
         destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))'
         },
         muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))'
         },
         accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))'
         },
         popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))'
         },
         card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))'
+        }
       },
       borderRadius: {
-      	xl: "calc(var(--radius) + 4px)",
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
+        xl: 'calc(var(--radius) + 4px)',
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)'
       },
       keyframes: {
-        "accordion-down": {
+        'accordion-down': {
           from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 'var(--radix-accordion-content-height)' }
         },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: 0 },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: 0 }
         },
-        "collapsible-down": {
+        'collapsible-down': {
           from: { height: 0 },
-          to: { height: 'var(--radix-collapsible-content-height)' },
+          to: { height: 'var(--radix-collapsible-content-height)' }
         },
-        "collapsible-up": {
+        'collapsible-up': {
           from: { height: 'var(--radix-collapsible-content-height)' },
-          to: { height: 0 },
-        },
+          to: { height: 0 }
+        }
       },
       animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-        "collapsible-down": "collapsible-down 0.2s ease-in-out",
-        "collapsible-up": "collapsible-up 0.2s ease-in-out",
-      },
-    },
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+        'collapsible-down': 'collapsible-down 0.2s ease-in-out',
+        'collapsible-up': 'collapsible-up 0.2s ease-in-out'
+      }
+    }
   },
-  plugins: [animate],
-}
\ No newline at end of file
+  plugins: [animate]
+}