style: Prettier format

src/lib/components/channelDialog.svelte

@@ -33,7 +33,7 @@
         bind:value={$form.channelName}
         aria-invalid={$errors.channelName ? 'true' : undefined}
         {...$constraints.channelName} />
-      {#if $errors.channelName}<Label for="channelName" class="text-red-500 m-0 p-0">{$errors.channelName}</Label>{/if}
+      {#if $errors.channelName}<Label for="channelName" class="m-0 p-0 text-red-500">{$errors.channelName}</Label>{/if}
       <Dialog.Footer>
         <Button type="submit">Create</Button>
       </Dialog.Footer>

src/lib/components/mainLayout.svelte

@@ -24,7 +24,7 @@
 </script>
 
 <div class="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
-  <div class="bg-muted/40 hidden border-r md:block">
+  <div class="hidden border-r bg-muted/40 md:block">
     <div class="flex h-full max-h-screen flex-col gap-2">
       <div class="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
         <a href="/" class="flex items-center gap-2 font-semibold">
@@ -45,7 +45,7 @@
       </div>
     </div>
   </div>
-  <div class="p-2 max-h-screen">
+  <div class="max-h-screen p-2">
     {@render children()}
   </div>
 </div>

src/lib/components/message.svelte

@@ -3,9 +3,9 @@
   const { message, imageSrc, user }: TypeMessage = $props();
 </script>
 
-<div class="w-full hover:bg-zinc-200 flex py-2 dark:hover:bg-stone-900">
+<div class="flex w-full py-2 hover:bg-zinc-200 dark:hover:bg-stone-900">
   <div class="avatar mx-2 rounded-sm">
-    <div class="w-12 h-12 overflow-hidden rounded-lg border bg-white">
+    <div class="h-12 w-12 overflow-hidden rounded-lg border bg-white">
       <img src={imageSrc} alt="Profile image for {user}" />
     </div>
   </div>

src/lib/components/ui/card/card-description.svelte

@@ -8,6 +8,6 @@
   export { className as class };
 </script>
 
-<p class={cn('text-muted-foreground text-sm', className)} {...$$restProps}>
+<p class={cn('text-sm text-muted-foreground', className)} {...$$restProps}>
   <slot />
 </p>

src/lib/components/ui/card/card.svelte

@@ -10,7 +10,7 @@
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class={cn('bg-card text-card-foreground rounded-xl border shadow', className)}
+  class={cn('rounded-xl border bg-card text-card-foreground shadow', className)}
   {...$$restProps}
   on:click
   on:focusin

src/lib/components/ui/dialog/dialog-content.svelte

@@ -20,13 +20,13 @@
     {transition}
     {transitionConfig}
     class={cn(
-      'bg-background fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg sm:rounded-lg md:w-full',
+      'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full',
       className,
     )}
     {...$$restProps}>
     <slot />
     <DialogPrimitive.Close
-      class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+      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">
       <Cross2 class="h-4 w-4" />
       <span class="sr-only">Close</span>
     </DialogPrimitive.Close>

src/lib/components/ui/dialog/dialog-description.svelte

@@ -8,6 +8,6 @@
   export { className as class };
 </script>
 
-<DialogPrimitive.Description class={cn('text-muted-foreground text-sm', className)} {...$$restProps}>
+<DialogPrimitive.Description class={cn('text-sm text-muted-foreground', className)} {...$$restProps}>
   <slot />
 </DialogPrimitive.Description>

src/lib/components/ui/dialog/dialog-overlay.svelte

@@ -16,5 +16,5 @@
 <DialogPrimitive.Overlay
   {transition}
   {transitionConfig}
-  class={cn('bg-background/80 fixed inset-0 z-50 backdrop-blur-sm ', className)}
+  class={cn('fixed inset-0 z-50 bg-background/80 backdrop-blur-sm ', className)}
   {...$$restProps} />

src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -14,7 +14,7 @@
 <DropdownMenuPrimitive.CheckboxItem
   bind:checked
   class={cn(
-    'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+    'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
     className,
   )}
   {...$$restProps}

src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte

@@ -15,7 +15,7 @@
   {transition}
   {transitionConfig}
   {sideOffset}
-  class={cn('bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-md focus:outline-none', className)}
+  class={cn('z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none', className)}
   {...$$restProps}
   on:keydown>
   <slot />

src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte

@@ -14,7 +14,7 @@
 
 <DropdownMenuPrimitive.Item
   class={cn(
-    'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+    'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
     inset && 'pl-8',
     className,
   )}

src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte

@@ -13,7 +13,7 @@
 
 <DropdownMenuPrimitive.RadioItem
   class={cn(
-    'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+    'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
     className,
   )}
   {value}

src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte

@@ -8,4 +8,4 @@
   export { className as class };
 </script>
 
-<DropdownMenuPrimitive.Separator class={cn('bg-muted -mx-1 my-1 h-px', className)} {...$$restProps} />
+<DropdownMenuPrimitive.Separator class={cn('-mx-1 my-1 h-px bg-muted', className)} {...$$restProps} />

src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte

@@ -16,7 +16,7 @@
 <DropdownMenuPrimitive.SubContent
   {transition}
   {transitionConfig}
-  class={cn('bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-lg focus:outline-none', className)}
+  class={cn('z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-lg focus:outline-none', className)}
   {...$$restProps}
   on:keydown
   on:focusout

src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte

@@ -15,7 +15,7 @@
 
 <DropdownMenuPrimitive.SubTrigger
   class={cn(
-    'data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
+    'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground',
     inset && 'pl-8',
     className,
   )}

src/lib/components/ui/input/input.svelte

@@ -17,7 +17,7 @@
 
 <input
   class={cn(
-    'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+    'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
     className,
   )}
   bind:value

src/lib/components/ui/sheet/sheet-content.svelte

@@ -29,7 +29,7 @@
     {...$$restProps}>
     <slot />
     <SheetPrimitive.Close
-      class="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+      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-secondary">
       <Cross2 class="h-4 w-4" />
       <span class="sr-only">Close</span>
     </SheetPrimitive.Close>

src/lib/components/ui/sheet/sheet-description.svelte

@@ -8,6 +8,6 @@
   export { className as class };
 </script>
 
-<SheetPrimitive.Description class={cn('text-muted-foreground text-sm', className)} {...$$restProps}>
+<SheetPrimitive.Description class={cn('text-sm text-muted-foreground', className)} {...$$restProps}>
   <slot />
 </SheetPrimitive.Description>

src/lib/components/ui/sheet/sheet-overlay.svelte

@@ -16,5 +16,5 @@
 <SheetPrimitive.Overlay
   {transition}
   {transitionConfig}
-  class={cn('bg-background/80 fixed inset-0 z-50 backdrop-blur-sm', className)}
+  class={cn('fixed inset-0 z-50 bg-background/80 backdrop-blur-sm', className)}
   {...$$restProps} />

src/lib/components/ui/sheet/sheet-title.svelte

@@ -8,6 +8,6 @@
   export { className as class };
 </script>
 
-<SheetPrimitive.Title class={cn('text-foreground text-lg font-semibold', className)} {...$$restProps}>
+<SheetPrimitive.Title class={cn('text-lg font-semibold text-foreground', className)} {...$$restProps}>
   <slot />
 </SheetPrimitive.Title>

src/routes/+error.svelte

@@ -6,12 +6,12 @@
 </script>
 
 <main class="relative size-full">
-  <Card.Root class="md:w-1/4 w-1/2 h-1/2 abs-center flex flex-col">
+  <Card.Root class="abs-center flex h-1/2 w-1/2 flex-col md:w-1/4">
     <Card.Header class="h-fit">
       <Card.Title class="text-center">{page.status} - {page.error?.message}</Card.Title>
     </Card.Header>
     <Card.Content class="relative grow">
-      <BrokenHeart class="size-1/2 abs-center" />
+      <BrokenHeart class="abs-center size-1/2" />
     </Card.Content>
     <Card.Footer class="h-fit">
       <Button href="/channel/general" variant="secondary" class="mx-auto">Go Home</Button>

src/routes/channel/[channel]/+page.svelte

@@ -39,13 +39,13 @@
     <Message imageSrc={message.imageSrc} user={message.user} message={message.message} />
   {/each}
 {/snippet}
-<div class="flex flex-1 flex-col items-center justify-center rounded-lg shadow-sm gap-1 h-full">
+<div class="flex h-full flex-1 flex-col items-center justify-center gap-1 rounded-lg shadow-sm">
-  <div class="flex-grow flex-col-reverse flex flex-auto overflow-y-scroll overflow-x-hidden rounded-lg border w-full">
+  <div class="flex w-full flex-auto flex-grow flex-col-reverse overflow-x-hidden overflow-y-scroll rounded-lg border">
     {@render message(socket?.messages!)}
     {@render message(data.messages)}
   </div>
   <form
-    class="flex gap-1 w-full"
+    class="flex w-full gap-1"
     onsubmit={() => {
       socket?.sendMessage(user!, msg);
       msg = '';