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

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

@@ -0,0 +1,28 @@
+import Root from './table.svelte';
+import Body from './table-body.svelte';
+import Caption from './table-caption.svelte';
+import Cell from './table-cell.svelte';
+import Footer from './table-footer.svelte';
+import Head from './table-head.svelte';
+import Header from './table-header.svelte';
+import Row from './table-row.svelte';
+
+export {
+    Root,
+    Body,
+    Caption,
+    Cell,
+    Footer,
+    Head,
+    Header,
+    Row,
+    //
+    Root as Table,
+    Body as TableBody,
+    Caption as TableCaption,
+    Cell as TableCell,
+    Footer as TableFooter,
+    Head as TableHead,
+    Header as TableHeader,
+    Row as TableRow
+};

web/src/lib/components/ui/table/table-body.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    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<HTMLTableSectionElement>> = $props();
+</script>
+
+<tbody bind:this={ref} class={cn('[&_tr:last-child]:border-0', className)} {...restProps}>
+{@render children?.()}
+</tbody>

web/src/lib/components/ui/table/table-caption.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    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<HTMLElement>> = $props();
+</script>
+
+<caption bind:this={ref} class={cn('mt-4 text-sm text-muted-foreground', className)} {...restProps}>
+    {@render children?.()}
+</caption>

web/src/lib/components/ui/table/table-cell.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import type {HTMLTdAttributes} from 'svelte/elements';
+    import type {WithElementRef} from 'bits-ui';
+    import {cn} from '$lib/utils.js';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLTdAttributes> = $props();
+</script>
+
+<td
+        bind:this={ref}
+        class={cn(
+		'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+		className
+	)}
+        {...restProps}
+>
+    {@render children?.()}
+</td>

web/src/lib/components/ui/table/table-footer.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    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<HTMLTableSectionElement>> = $props();
+</script>
+
+<tfoot bind:this={ref} class={cn('bg-muted/50 font-medium', className)} {...restProps}>
+{@render children?.()}
+</tfoot>

web/src/lib/components/ui/table/table-head.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import type {HTMLThAttributes} from 'svelte/elements';
+    import type {WithElementRef} from 'bits-ui';
+    import {cn} from '$lib/utils.js';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLThAttributes> = $props();
+</script>
+
+<th
+        bind:this={ref}
+        class={cn(
+		'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+		className
+	)}
+        {...restProps}
+>
+    {@render children?.()}
+</th>

web/src/lib/components/ui/table/table-header.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    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<HTMLTableSectionElement>> = $props();
+</script>
+
+<thead bind:this={ref} class={cn('[&_tr]:border-b', className)} {...restProps}>
+{@render children?.()}
+</thead>

web/src/lib/components/ui/table/table-row.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    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,
+        link = false,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLTableRowElement> & { link?: boolean }> = $props();
+</script>
+
+<tr
+        bind:this={ref}
+        class={cn(
+		'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+		link && 'cursor-pointer',
+		className
+	)}
+        {...restProps}
+>
+    {@render children?.()}
+</tr>

web/src/lib/components/ui/table/table.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+    import type {HTMLTableAttributes} from 'svelte/elements';
+    import type {WithElementRef} from 'bits-ui';
+    import {cn} from '$lib/utils.js';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLTableAttributes> = $props();
+</script>
+
+<div class="relative w-full overflow-auto">
+    <table bind:this={ref} class={cn('w-full caption-bottom text-sm', className)} {...restProps}>
+        {@render children?.()}
+    </table>
+</div>