refactor: standardize formatting and improve code consistency across components

web/src/lib/components/app-sidebar.svelte

@@ -4,7 +4,12 @@
 	import TvIcon from '@lucide/svelte/icons/tv';
 	import LayoutPanelLeft from '@lucide/svelte/icons/layout-panel-left';
 	import DownloadIcon from '@lucide/svelte/icons/download';
+	import Sun from "@lucide/svelte/icons/sun";
+	import Moon from "@lucide/svelte/icons/moon";
 
+	import {resetMode, setMode} from "mode-watcher";
+	import {buttonVariants} from "$lib/components/ui/button/index.js";
+	import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
 	const data = {
 		navMain: [
 			{
@@ -18,7 +23,7 @@
 						url: '/dashboard/tv'
 					},
 					{
-						title: 'Add Show',
+						title: 'Add a show',
 						url: '/dashboard/tv/add-show'
 					},
 					{

web/src/lib/components/nav-secondary.svelte

@@ -1,37 +1,54 @@
 <script lang="ts">
-    import * as Sidebar from '$lib/components/ui/sidebar/index.js';
-    import type {ComponentProps} from 'svelte';
+	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+	import type {ComponentProps} from 'svelte';
+	import Sun from "@lucide/svelte/icons/sun";
+	import Moon from "@lucide/svelte/icons/moon";
 
-    let {
-        ref = $bindable(null),
-        items,
-        ...restProps
-    }: {
-        items: {
-            title: string;
-            url: string;
-            // This should be `Component` after @lucide/svelte updates types
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            icon: any;
-        }[];
-    } & ComponentProps<typeof Sidebar.Group> = $props();
+	import {toggleMode} from "mode-watcher";
+	import {Button} from "$lib/components/ui/button/index.js";
+	let {
+		ref = $bindable(null),
+		items,
+		...restProps
+	}: {
+		items: {
+			title: string;
+			url: string;
+			// This should be `Component` after @lucide/svelte updates types
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			icon: any;
+		}[];
+	} & ComponentProps<typeof Sidebar.Group> = $props();
 </script>
 
 <Sidebar.Group bind:ref {...restProps}>
-    <Sidebar.GroupContent>
-        <Sidebar.Menu>
-            {#each items as item (item.title)}
-                <Sidebar.MenuItem>
-                    <Sidebar.MenuButton size="sm">
-                        {#snippet child({props})}
-                            <a href={item.url} {...props}>
-                                <item.icon/>
-                                <span>{item.title}</span>
-                            </a>
-                        {/snippet}
-                    </Sidebar.MenuButton>
-                </Sidebar.MenuItem>
-            {/each}
-        </Sidebar.Menu>
-    </Sidebar.GroupContent>
+	<Sidebar.GroupContent>
+		<Sidebar.Menu>
+			<Sidebar.MenuItem>
+				<Sidebar.MenuButton size="sm">
+					{#snippet child({props})}
+						<div on:click={()=>toggleMode()} {...props}>
+
+							<Sun class="dark:hidden "/>
+							<Moon class="hidden dark:inline"/>
+							<span>Toggle mode</span>
+						</div>
+					{/snippet}
+				</Sidebar.MenuButton>
+			</Sidebar.MenuItem>
+
+			{#each items as item (item.title)}
+				<Sidebar.MenuItem>
+					<Sidebar.MenuButton size="sm">
+						{#snippet child({props})}
+							<a href={item.url} {...props}>
+								<item.icon/>
+								<span>{item.title}</span>
+							</a>
+						{/snippet}
+					</Sidebar.MenuButton>
+				</Sidebar.MenuItem>
+			{/each}
+		</Sidebar.Menu>
+	</Sidebar.GroupContent>
 </Sidebar.Group>

web/src/lib/components/nav-user.svelte

@@ -40,9 +40,9 @@
 				{/snippet}
 			</DropdownMenu.Trigger>
 			<DropdownMenu.Content
+					align="end"
 					class="w-[var(--bits-dropdown-menu-anchor-width)] min-w-56 rounded-lg"
 					side={sidebar.isMobile ? 'bottom' : 'right'}
-					align="end"
 					sideOffset={4}
 			>
 				<DropdownMenu.Label class="p-0 font-normal">

web/src/lib/components/ui/accordion/accordion-content.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import {Accordion as AccordionPrimitive, type WithoutChild} from 'bits-ui';
+    import {cn} from '$lib/utils.js';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithoutChild<AccordionPrimitive.ContentProps> = $props();
+</script>
+
+<AccordionPrimitive.Content
+        bind:ref
+        class={cn(
+		'overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
+		className
+	)}
+        {...restProps}
+>
+    <div class="pb-4 pt-0">
+        {@render children?.()}
+    </div>
+</AccordionPrimitive.Content>

web/src/lib/components/ui/accordion/accordion-item.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+    import {Accordion as AccordionPrimitive} from 'bits-ui';
+    import {cn} from '$lib/utils.js';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        ...restProps
+    }: AccordionPrimitive.ItemProps = $props();
+</script>
+
+<AccordionPrimitive.Item {...restProps} bind:ref class={cn('border-b', className)}/>

web/src/lib/components/ui/accordion/accordion-trigger.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import {Accordion as AccordionPrimitive, type WithoutChild} from 'bits-ui';
+    import ChevronDown from '@lucide/svelte/icons/chevron-down';
+    import {cn} from '$lib/utils.js';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        level = 3,
+        children,
+        ...restProps
+    }: WithoutChild<AccordionPrimitive.TriggerProps> & {
+        level?: AccordionPrimitive.HeaderProps['level'];
+    } = $props();
+</script>
+
+<AccordionPrimitive.Header class="flex" {level}>
+    <AccordionPrimitive.Trigger
+            bind:ref
+            class={cn(
+			'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+			className
+		)}
+            {...restProps}
+    >
+        {@render children?.()}
+        <ChevronDown class="size-4 shrink-0 text-muted-foreground transition-transform duration-200"/>
+    </AccordionPrimitive.Trigger>
+</AccordionPrimitive.Header>

web/src/lib/components/ui/accordion/index.ts

@@ -0,0 +1,17 @@
+import {Accordion as AccordionPrimitive} from 'bits-ui';
+import Content from './accordion-content.svelte';
+import Item from './accordion-item.svelte';
+import Trigger from './accordion-trigger.svelte';
+
+const Root = AccordionPrimitive.Root;
+export {
+    Root,
+    Content,
+    Item,
+    Trigger,
+    //
+    Root as Accordion,
+    Content as AccordionContent,
+    Item as AccordionItem,
+    Trigger as AccordionTrigger
+};

web/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte

@@ -1,22 +1,22 @@
 <script lang="ts">
-    import Ellipsis from '@lucide/svelte/icons/ellipsis';
-    import type {WithElementRef, WithoutChildren} from 'bits-ui';
-    import type {HTMLAttributes} from 'svelte/elements';
-    import {cn} from '$lib/utils.js';
+	import Ellipsis from '@lucide/svelte/icons/ellipsis';
+	import type {WithElementRef, WithoutChildren} from 'bits-ui';
+	import type {HTMLAttributes} from 'svelte/elements';
+	import {cn} from '$lib/utils.js';
 
 	let {
-        ref = $bindable(null),
-        class: className,
-        ...restProps
-    }: WithoutChildren<WithElementRef<HTMLAttributes<HTMLSpanElement>>> = $props();
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLSpanElement>>> = $props();
 </script>
 
 <span
-        bind:this={ref}
-        role="presentation"
-        aria-hidden="true"
-        class={cn('flex size-9 items-center justify-center', className)}
-        {...restProps}
+		{...restProps}
+		aria-hidden="true"
+		bind:this={ref}
+		class={cn('flex size-9 items-center justify-center', className)}
+		role="presentation"
 >
 	<Ellipsis class="size-4"/>
 	<span class="sr-only">More</span>

web/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte

@@ -1,23 +1,23 @@
 <script lang="ts">
-    import type {WithElementRef} from 'bits-ui';
-    import type {HTMLAttributes} from 'svelte/elements';
-    import {cn} from '$lib/utils.js';
+	import type {WithElementRef} from 'bits-ui';
+	import type {HTMLAttributes} from 'svelte/elements';
+	import {cn} from '$lib/utils.js';
 
 	let {
-        ref = $bindable(null),
-        class: className,
-        children,
-        ...restProps
-    }: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
 </script>
 
 <span
-        bind:this={ref}
-        role="link"
-        aria-disabled="true"
-        aria-current="page"
-        class={cn('font-normal text-foreground', className)}
-        {...restProps}
+		{...restProps}
+		aria-current="page"
+		aria-disabled="true"
+		bind:this={ref}
+		class={cn('font-normal text-foreground', className)}
+		role="link"
 >
 	{@render children?.()}
 </span>

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

@@ -1,33 +1,33 @@
 <script lang="ts">
-    import {DropdownMenu as DropdownMenuPrimitive, type WithoutChildrenOrChild} from 'bits-ui';
-    import Check from '@lucide/svelte/icons/check';
-    import Minus from '@lucide/svelte/icons/minus';
-    import {cn} from '$lib/utils.js';
-    import type {Snippet} from 'svelte';
+	import {DropdownMenu as DropdownMenuPrimitive, type WithoutChildrenOrChild} from 'bits-ui';
+	import Check from '@lucide/svelte/icons/check';
+	import Minus from '@lucide/svelte/icons/minus';
+	import {cn} from '$lib/utils.js';
+	import type {Snippet} from 'svelte';
 
 	let {
-        ref = $bindable(null),
-        class: className,
-        children: childrenProp,
-        checked = $bindable(false),
-        indeterminate = $bindable(false),
-        ...restProps
-    }: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
-        children?: Snippet;
-    } = $props();
+		ref = $bindable(null),
+		class: className,
+		children: childrenProp,
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		...restProps
+	}: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
+		children?: Snippet;
+	} = $props();
 </script>
 
 <DropdownMenuPrimitive.CheckboxItem
-        bind:ref
-        bind:checked
-        bind:indeterminate
-        class={cn(
+		{...restProps}
+		bind:checked
+		bind:indeterminate
+		bind:ref
+		class={cn(
 		'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}
 >
-    {#snippet children({checked, indeterminate})}
+	{#snippet children({checked, indeterminate})}
 		<span class="absolute left-2 flex size-3.5 items-center justify-center">
 			{#if indeterminate}
 				<Minus class="size-4"/>
@@ -35,6 +35,6 @@
 				<Check class={cn('size-4', !checked && 'text-transparent')}/>
 			{/if}
 		</span>
-        {@render childrenProp?.()}
-    {/snippet}
+		{@render childrenProp?.()}
+	{/snippet}
 </DropdownMenuPrimitive.CheckboxItem>

web/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">
-    import type {HTMLAttributes} from 'svelte/elements';
-    import {type WithElementRef} from 'bits-ui';
-    import {cn} from '$lib/utils.js';
+	import type {HTMLAttributes} from 'svelte/elements';
+	import {type WithElementRef} from 'bits-ui';
+	import {cn} from '$lib/utils.js';
 
 	let {
-        ref = $bindable(null),
-        class: className,
-        children,
-        ...restProps
-    }: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
 </script>
 
 <span
-        bind:this={ref}
-        class={cn('ml-auto text-xs tracking-widest opacity-60', className)}
-        {...restProps}
+		{...restProps}
+		bind:this={ref}
+		class={cn('ml-auto text-xs tracking-widest opacity-60', className)}
 >
 	{@render children?.()}
 </span>