stan/personal-website
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

show topics list

Browse Source
This commit is contained in:
Stan Runge
2025-08-25 20:40:10 +02:00
parent c55c266f44
commit f28c0f56ad
16 changed files with 240 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
packages/web/bun.lockb
View File

Binary file not shown.

10
packages/web/components.json
View File

@@ -1,14 +1,16 @@
{
"$schema": "https://shadcn-svelte.com/schema.json",
"style": "default",
"tailwind": {
"config": "tailwind.config.js",
"css": "src/app.css",
"baseColor": "slate"
},
"aliases": {
"components": "$lib/components",
"utils": "$lib/utils"
"utils": "$lib/utils",
"ui": "$lib/components/ui",
"hooks": "$lib/hooks",
"lib": "$lib"
},
"typescript": true
"typescript": true,
"registry": "https://tw3.shadcn-svelte.com/registry/default"
}

2
packages/web/package.json
View File

@@ -25,7 +25,7 @@
"@types/eslint": "9.6.1",
"@types/pg": "^8.11.10",
"autoprefixer": "^10.4.20",
"bits-ui": "^0.22.0",
"bits-ui": "^1.4.7",
"clsx": "^2.1.1",
"cmdk-sv": "^0.0.18",
"drizzle-kit": "^0.30.1",

28
packages/web/src/lib/components/ui/table/index.ts Normal file
View File

@@ -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,
};

16
packages/web/src/lib/components/ui/table/table-body.svelte Normal file
View File

@@ -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>

16
packages/web/src/lib/components/ui/table/table-caption.svelte Normal file
View File

@@ -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("text-muted-foreground mt-4 text-sm", className)} {...restProps}>
{@render children?.()}
</caption>

20
packages/web/src/lib/components/ui/table/table-cell.svelte Normal file
View File

@@ -0,0 +1,20 @@
<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-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
{...restProps}
>
{@render children?.()}
</td>

16
packages/web/src/lib/components/ui/table/table-footer.svelte Normal file
View File

@@ -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>

23
packages/web/src/lib/components/ui/table/table-head.svelte Normal file
View File

@@ -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(
"text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0",
className
)}
{...restProps}
>
{@render children?.()}
</th>

16
packages/web/src/lib/components/ui/table/table-header.svelte Normal file
View File

@@ -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>

23
packages/web/src/lib/components/ui/table/table-row.svelte Normal file
View File

@@ -0,0 +1,23 @@
<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<HTMLTableRowElement>> = $props();
</script>
<tr
bind:this={ref}
class={cn(
"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
className
)}
{...restProps}
>
{@render children?.()}
</tr>

18
packages/web/src/lib/components/ui/table/table.svelte Normal file
View File

@@ -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>

2
packages/web/src/routes/progress/+page.server.ts
View File

@@ -2,7 +2,7 @@ import { db } from '$lib/db';
import { tasks } from '$lib/db/schema.js';
import { desc } from 'drizzle-orm';
export const load = async ({ cookies }) => {
export const load = async () => {
return {
tasks: await db.query.tasks.findMany({
with: {

19
packages/web/src/routes/progress/+page.svelte
View File

@@ -19,6 +19,13 @@
<h1 class="font-bold text-2xl">
Tasks ({data.tasks.length})
</h1>
<a href="/progress/topics">
<button class="px-4 py-2 bg-gray-800 text-white rounded hover:bg-gray-600 transition">
Topics
</button>
</a>
{#if data.editable}
<a href="/progress/create">
<button class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition">
@@ -59,12 +66,12 @@
</tr>
</thead>
<tbody>
{#each filteredTasks as task, index}
<tr class="{index % 2 === 0 ? 'bg-black' : 'bg-gray-950'} hover:bg-gray-800">
<td class="px-6 py-2 border-b">
<a href={`/progress/${task.id}`} class="text-blue-500 hover:underline">
{data.tasks.indexOf(task) + 1}. {task.name}
</a>
{#each filteredTasks as task, index}
<tr class="{index % 2 === 0 ? 'bg-black' : 'bg-gray-950'} hover:bg-gray-800">
<td class="px-6 py-2 border-b">
<a href={`/progress/${task.id}`} class="text-blue-500 hover:underline">
{data.tasks.indexOf(task) + 1}. {task.name}
</a>
</td>
<td class="px-6 py-2 border-b">
<a href={`/progress/${task.id}`} class="flex gap-2 flex-wrap">

17
packages/web/src/routes/progress/topics/+page.server.ts Normal file
View File

@@ -0,0 +1,17 @@
import { db } from '$lib/db';
import { topics } from '$lib/db/schema';
import { eq } from 'drizzle-orm';
export const load = async ({ params }) => {
return {
topics: await db.query.topics.findMany({
with: {
topicsToTasks: {
with: {
task: true
}
}
}
})
};
};

25
packages/web/src/routes/progress/topics/+page.svelte Normal file
View File

@@ -0,0 +1,25 @@
<script lang="ts">
import * as Table from '$lib/components/ui/table/index.js';
let { data } = $props();
</script>
<Table.Root>
<Table.Header>
<Table.Row>
<Table.Head class="w-[100px]">Name</Table.Head>
<Table.Head>Amount of Tasks</Table.Head>
<Table.Head class="text-right">Actions</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
{#each data.topics as topic}
<Table.Row>
<Table.Cell class="font-medium">{topic.name}</Table.Cell>
<Table.Cell>{topic.topicsToTasks.length}</Table.Cell>
<Table.Cell class="text-right"></Table.Cell>
</Table.Row>
{/each}
</Table.Body>
</Table.Root>