working on the frontend, adding torrent page, working on show directory, working on the api

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

@@ -0,0 +1,34 @@
+import {Select as SelectPrimitive} from 'bits-ui';
+
+import GroupHeading from './select-group-heading.svelte';
+import Item from './select-item.svelte';
+import Content from './select-content.svelte';
+import Trigger from './select-trigger.svelte';
+import Separator from './select-separator.svelte';
+import ScrollDownButton from './select-scroll-down-button.svelte';
+import ScrollUpButton from './select-scroll-up-button.svelte';
+
+const Root = SelectPrimitive.Root;
+const Group = SelectPrimitive.Group;
+
+export {
+    Root,
+    Item,
+    Group,
+    GroupHeading,
+    Content,
+    Trigger,
+    Separator,
+    ScrollDownButton,
+    ScrollUpButton,
+    //
+    Root as Select,
+    Item as SelectItem,
+    Group as SelectGroup,
+    GroupHeading as SelectGroupHeading,
+    Content as SelectContent,
+    Trigger as SelectTrigger,
+    Separator as SelectSeparator,
+    ScrollDownButton as SelectScrollDownButton,
+    ScrollUpButton as SelectScrollUpButton
+};

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+    import {Select as SelectPrimitive, type WithoutChild} from 'bits-ui';
+    import * as Select from './index.js';
+    import {cn} from '$lib/utils.js';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        sideOffset = 4,
+        portalProps,
+        children,
+        ...restProps
+    }: WithoutChild<SelectPrimitive.ContentProps> & {
+        portalProps?: SelectPrimitive.PortalProps;
+    } = $props();
+</script>
+
+<SelectPrimitive.Portal {...portalProps}>
+    <SelectPrimitive.Content
+            bind:ref
+            {sideOffset}
+            class={cn(
+			'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1 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',
+			className
+		)}
+            {...restProps}
+    >
+        <Select.ScrollUpButton/>
+        <SelectPrimitive.Viewport
+                class={cn(
+				'h-[var(--bits-select-anchor-height)] w-full min-w-[var(--bits-select-anchor-width)] p-1'
+			)}
+        >
+            {@render children?.()}
+        </SelectPrimitive.Viewport>
+        <Select.ScrollDownButton/>
+    </SelectPrimitive.Content>
+</SelectPrimitive.Portal>

web/src/lib/components/ui/select/select-group-heading.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import {Select as SelectPrimitive} from 'bits-ui';
+    import {cn} from '$lib/utils.js';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        ...restProps
+    }: SelectPrimitive.GroupHeadingProps = $props();
+</script>
+
+<SelectPrimitive.GroupHeading
+        bind:ref
+        class={cn('px-2 py-1.5 text-sm font-semibold', className)}
+        {...restProps}
+/>

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

@@ -0,0 +1,37 @@
+<script lang="ts">
+    import {Select as SelectPrimitive, type WithoutChild} from 'bits-ui';
+    import Check from '@lucide/svelte/icons/check';
+    import {cn} from '$lib/utils.js';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        value,
+        label,
+        children: childrenProp,
+        ...restProps
+    }: WithoutChild<SelectPrimitive.ItemProps> = $props();
+</script>
+
+<SelectPrimitive.Item
+        bind:ref
+        {value}
+        class={cn(
+		'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 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({selected, highlighted})}
+		<span class="absolute right-2 flex size-3.5 items-center justify-center">
+			{#if selected}
+				<Check class="size-4"/>
+			{/if}
+		</span>
+        {#if childrenProp}
+            {@render childrenProp({selected, highlighted})}
+        {:else}
+            {label || value}
+        {/if}
+    {/snippet}
+</SelectPrimitive.Item>

web/src/lib/components/ui/select/select-scroll-down-button.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import ChevronDown from '@lucide/svelte/icons/chevron-down';
+    import {Select as SelectPrimitive, type WithoutChildrenOrChild} from 'bits-ui';
+    import {cn} from '$lib/utils.js';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        ...restProps
+    }: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollDownButton
+        bind:ref
+        class={cn('flex cursor-default items-center justify-center py-1', className)}
+        {...restProps}
+>
+    <ChevronDown class="size-4"/>
+</SelectPrimitive.ScrollDownButton>

web/src/lib/components/ui/select/select-scroll-up-button.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import ChevronUp from '@lucide/svelte/icons/chevron-up';
+    import {Select as SelectPrimitive, type WithoutChildrenOrChild} from 'bits-ui';
+    import {cn} from '$lib/utils.js';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        ...restProps
+    }: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollUpButton
+        bind:ref
+        class={cn('flex cursor-default items-center justify-center py-1', className)}
+        {...restProps}
+>
+    <ChevronUp class="size-4"/>
+</SelectPrimitive.ScrollUpButton>

web/src/lib/components/ui/select/select-separator.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+    import type {Separator as SeparatorPrimitive} from 'bits-ui';
+    import {Separator} from '$lib/components/ui/separator/index.js';
+    import {cn} from '$lib/utils.js';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        ...restProps
+    }: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<Separator bind:ref class={cn('-mx-1 my-1 h-px bg-muted', className)} {...restProps}/>

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

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import {Select as SelectPrimitive, 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,
+        children,
+        ...restProps
+    }: WithoutChild<SelectPrimitive.TriggerProps> = $props();
+</script>
+
+<SelectPrimitive.Trigger
+        bind:ref
+        class={cn(
+		'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1',
+		className
+	)}
+        {...restProps}
+>
+    {@render children?.()}
+    <ChevronDown class="size-4 opacity-50"/>
+</SelectPrimitive.Trigger>