chore: flatten repo

2026-08-26 03:57:15 +00:00
parent b02a07d3bd
commit cb5fc9d095
85 changed files with 22 additions and 23 deletions
--- a/src/app.css
+++ b/src/app.css
@@ -0,0 +1,78 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+ 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+ 
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+ 
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+ 
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+ 
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+ 
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+ 
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+ 
+    --destructive: 0 72.2% 50.6%;
+    --destructive-foreground: 210 40% 98%;
+ 
+    --ring: 222.2 84% 4.9%;
+ 
+    --radius: 0.5rem;
+  }
+ 
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+ 
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+ 
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+ 
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+ 
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+ 
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+ 
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+ 
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+ 
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+ 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -0,0 +1,13 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};
--- a/src/app.html
+++ b/src/app.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+	<!-- Google tag (gtag.js) -->
+	<script async src="https://www.googletagmanager.com/gtag/js?id=G-7K10F5HJMQ"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag() {dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', 'G-7K10F5HJMQ');
+	</script>
+
+	<meta charset="utf-8" />
+	<link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="%sveltekit.assets%/favicon-16x16.png">
+	<link rel="manifest" href="%sveltekit.assets%/site.webmanifest">
+	<title>Stan Runge</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	%sveltekit.head%
+</head>
+
+<body data-sveltekit-preload-data="hover">
+	<div style="display: contents">%sveltekit.body%</div>
+</body>
+
+</html>
--- a/src/index.test.ts
+++ b/src/index.test.ts
@@ -0,0 +1,7 @@
+import { describe, it, expect } from 'vitest';
+
+describe('sum test', () => {
+	it('adds 1 + 2 to equal 3', () => {
+		expect(1 + 2).toBe(3);
+	});
+});
--- a/src/lib/components/ui/button/button.svelte
+++ b/src/lib/components/ui/button/button.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Button as ButtonPrimitive } from "bits-ui";
+	import { type Events, type Props, buttonVariants } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = Props;
+	type $$Events = Events;
+
+	let className: $$Props["class"] = undefined;
+	export let variant: $$Props["variant"] = "default";
+	export let size: $$Props["size"] = "default";
+	export let builders: $$Props["builders"] = [];
+	export { className as class };
+</script>
+
+<ButtonPrimitive.Root
+	{builders}
+	class={cn(buttonVariants({ variant, size, className }))}
+	type="button"
+	{...$$restProps}
+	on:click
+	on:keydown
+>
+	<slot />
+</ButtonPrimitive.Root>
--- a/src/lib/components/ui/button/index.ts
+++ b/src/lib/components/ui/button/index.ts
@@ -0,0 +1,49 @@
+import { type VariantProps, tv } from "tailwind-variants";
+import type { Button as ButtonPrimitive } from "bits-ui";
+import Root from "./button.svelte";
+
+const buttonVariants = tv({
+	base: "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground hover:bg-primary/90",
+			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+			outline:
+				"border-input bg-background hover:bg-accent hover:text-accent-foreground border",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+			ghost: "hover:bg-accent hover:text-accent-foreground",
+			link: "text-primary underline-offset-4 hover:underline",
+		},
+		size: {
+			default: "h-10 px-4 py-2",
+			sm: "h-9 rounded-md px-3",
+			lg: "h-11 rounded-md px-8",
+			icon: "h-10 w-10",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default",
+	},
+});
+
+type Variant = VariantProps<typeof buttonVariants>["variant"];
+type Size = VariantProps<typeof buttonVariants>["size"];
+
+type Props = ButtonPrimitive.Props & {
+	variant?: Variant;
+	size?: Size;
+};
+
+type Events = ButtonPrimitive.Events;
+
+export {
+	Root,
+	type Props,
+	type Events,
+	//
+	Root as Button,
+	type Props as ButtonProps,
+	type Events as ButtonEvents,
+	buttonVariants,
+};
--- a/src/lib/components/ui/command/command-dialog.svelte
+++ b/src/lib/components/ui/command/command-dialog.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Dialog as DialogPrimitive } from "bits-ui";
+	import type { Command as CommandPrimitive } from "cmdk-sv";
+	import Command from "./command.svelte";
+	import * as Dialog from "$lib/components/ui/dialog/index.js";
+
+	type $$Props = DialogPrimitive.Props & CommandPrimitive.CommandProps;
+
+	export let open: $$Props["open"] = false;
+	export let value: $$Props["value"] = undefined;
+</script>
+
+<Dialog.Root bind:open {...$$restProps}>
+	<Dialog.Content class="overflow-hidden p-0 shadow-lg">
+		<Command
+			class="[&_[data-cmdk-group-heading]]:text-muted-foreground [&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:font-medium [&_[data-cmdk-group]:not([hidden])_~[data-cmdk-group]]:pt-0 [&_[data-cmdk-group]]:px-2 [&_[data-cmdk-input-wrapper]_svg]:h-5 [&_[data-cmdk-input-wrapper]_svg]:w-5 [&_[data-cmdk-input]]:h-12 [&_[data-cmdk-item]]:px-2 [&_[data-cmdk-item]]:py-3 [&_[data-cmdk-item]_svg]:h-5 [&_[data-cmdk-item]_svg]:w-5"
+			{...$$restProps}
+			bind:value
+		>
+			<slot />
+		</Command>
+	</Dialog.Content>
+</Dialog.Root>
--- a/src/lib/components/ui/command/command-empty.svelte
+++ b/src/lib/components/ui/command/command-empty.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "cmdk-sv";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CommandPrimitive.EmptyProps;
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<CommandPrimitive.Empty class={cn("py-6 text-center text-sm", className)} {...$$restProps}>
+	<slot />
+</CommandPrimitive.Empty>
--- a/src/lib/components/ui/command/command-group.svelte
+++ b/src/lib/components/ui/command/command-group.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "cmdk-sv";
+	import { cn } from "$lib/utils.js";
+	type $$Props = CommandPrimitive.GroupProps;
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<CommandPrimitive.Group
+	class={cn(
+		"text-foreground [&_[data-cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:py-1.5 [&_[data-cmdk-group-heading]]:text-xs [&_[data-cmdk-group-heading]]:font-medium",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</CommandPrimitive.Group>
--- a/src/lib/components/ui/command/command-input.svelte
+++ b/src/lib/components/ui/command/command-input.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "cmdk-sv";
+	import Search from "lucide-svelte/icons/search";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CommandPrimitive.InputProps;
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+	export let value: string = "";
+</script>
+
+<div class="flex items-center border-b px-2" data-cmdk-input-wrapper="">
+	<Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+	<CommandPrimitive.Input
+		class={cn(
+			"placeholder:text-muted-foreground flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
+			className
+		)}
+		{...$$restProps}
+		bind:value
+	/>
+</div>
--- a/src/lib/components/ui/command/command-item.svelte
+++ b/src/lib/components/ui/command/command-item.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "cmdk-sv";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CommandPrimitive.ItemProps;
+
+	export let asChild = false;
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<CommandPrimitive.Item
+	{asChild}
+	class={cn(
+		"aria-selected:bg-accent aria-selected: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",
+		className
+	)}
+	{...$$restProps}
+	let:action
+	let:attrs
+>
+	<slot {action} {attrs} />
+</CommandPrimitive.Item>
--- a/src/lib/components/ui/command/command-list.svelte
+++ b/src/lib/components/ui/command/command-list.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "cmdk-sv";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CommandPrimitive.ListProps;
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<CommandPrimitive.List
+	class={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+	{...$$restProps}
+>
+	<slot />
+</CommandPrimitive.List>
--- a/src/lib/components/ui/command/command-separator.svelte
+++ b/src/lib/components/ui/command/command-separator.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "cmdk-sv";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CommandPrimitive.SeparatorProps;
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<CommandPrimitive.Separator class={cn("bg-border -mx-1 h-px", className)} {...$$restProps} />
--- a/src/lib/components/ui/command/command-shortcut.svelte
+++ b/src/lib/components/ui/command/command-shortcut.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLSpanElement>;
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<span
+	class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
+	{...$$restProps}
+>
+	<slot />
+</span>
--- a/src/lib/components/ui/command/command.svelte
+++ b/src/lib/components/ui/command/command.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "cmdk-sv";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CommandPrimitive.CommandProps;
+
+	export let value: $$Props["value"] = undefined;
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<CommandPrimitive.Root
+	class={cn(
+		"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+		className
+	)}
+	bind:value
+	{...$$restProps}
+>
+	<slot />
+</CommandPrimitive.Root>
--- a/src/lib/components/ui/command/index.ts
+++ b/src/lib/components/ui/command/index.ts
@@ -0,0 +1,37 @@
+import { Command as CommandPrimitive } from "cmdk-sv";
+
+import Root from "./command.svelte";
+import Dialog from "./command-dialog.svelte";
+import Empty from "./command-empty.svelte";
+import Group from "./command-group.svelte";
+import Item from "./command-item.svelte";
+import Input from "./command-input.svelte";
+import List from "./command-list.svelte";
+import Separator from "./command-separator.svelte";
+import Shortcut from "./command-shortcut.svelte";
+
+const Loading = CommandPrimitive.Loading;
+
+export {
+	Root,
+	Dialog,
+	Empty,
+	Group,
+	Item,
+	Input,
+	List,
+	Separator,
+	Shortcut,
+	Loading,
+	//
+	Root as Command,
+	Dialog as CommandDialog,
+	Empty as CommandEmpty,
+	Group as CommandGroup,
+	Item as CommandItem,
+	Input as CommandInput,
+	List as CommandList,
+	Separator as CommandSeparator,
+	Shortcut as CommandShortcut,
+	Loading as CommandLoading,
+};
--- a/src/lib/components/ui/dialog/dialog-content.svelte
+++ b/src/lib/components/ui/dialog/dialog-content.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import X from "lucide-svelte/icons/x";
+	import * as Dialog from "./index.js";
+	import { cn, flyAndScale } from "$lib/utils.js";
+
+	type $$Props = DialogPrimitive.ContentProps;
+
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		duration: 200,
+	};
+	export { className as class };
+</script>
+
+<Dialog.Portal>
+	<Dialog.Overlay />
+	<DialogPrimitive.Content
+		{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",
+			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"
+		>
+			<X class="h-4 w-4" />
+			<span class="sr-only">Close</span>
+		</DialogPrimitive.Close>
+	</DialogPrimitive.Content>
+</Dialog.Portal>
--- a/src/lib/components/ui/dialog/dialog-description.svelte
+++ b/src/lib/components/ui/dialog/dialog-description.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DialogPrimitive.DescriptionProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<DialogPrimitive.Description
+	class={cn("text-muted-foreground text-sm", className)}
+	{...$$restProps}
+>
+	<slot />
+</DialogPrimitive.Description>
--- a/src/lib/components/ui/dialog/dialog-footer.svelte
+++ b/src/lib/components/ui/dialog/dialog-footer.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+	{...$$restProps}
+>
+	<slot />
+</div>
--- a/src/lib/components/ui/dialog/dialog-header.svelte
+++ b/src/lib/components/ui/dialog/dialog-header.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...$$restProps}>
+	<slot />
+</div>
--- a/src/lib/components/ui/dialog/dialog-overlay.svelte
+++ b/src/lib/components/ui/dialog/dialog-overlay.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { fade } from "svelte/transition";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DialogPrimitive.OverlayProps;
+
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = fade;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		duration: 150,
+	};
+	export { className as class };
+</script>
+
+<DialogPrimitive.Overlay
+	{transition}
+	{transitionConfig}
+	class={cn("bg-background/80 fixed inset-0 z-50 backdrop-blur-sm", className)}
+	{...$$restProps}
+/>
--- a/src/lib/components/ui/dialog/dialog-portal.svelte
+++ b/src/lib/components/ui/dialog/dialog-portal.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	type $$Props = DialogPrimitive.PortalProps;
+</script>
+
+<DialogPrimitive.Portal {...$$restProps}>
+	<slot />
+</DialogPrimitive.Portal>
--- a/src/lib/components/ui/dialog/dialog-title.svelte
+++ b/src/lib/components/ui/dialog/dialog-title.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DialogPrimitive.TitleProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<DialogPrimitive.Title
+	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	{...$$restProps}
+>
+	<slot />
+</DialogPrimitive.Title>
--- a/src/lib/components/ui/dialog/index.ts
+++ b/src/lib/components/ui/dialog/index.ts
@@ -0,0 +1,37 @@
+import { Dialog as DialogPrimitive } from "bits-ui";
+
+import Title from "./dialog-title.svelte";
+import Portal from "./dialog-portal.svelte";
+import Footer from "./dialog-footer.svelte";
+import Header from "./dialog-header.svelte";
+import Overlay from "./dialog-overlay.svelte";
+import Content from "./dialog-content.svelte";
+import Description from "./dialog-description.svelte";
+
+const Root = DialogPrimitive.Root;
+const Trigger = DialogPrimitive.Trigger;
+const Close = DialogPrimitive.Close;
+
+export {
+	Root,
+	Title,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	Close,
+	//
+	Root as Dialog,
+	Title as DialogTitle,
+	Portal as DialogPortal,
+	Footer as DialogFooter,
+	Header as DialogHeader,
+	Trigger as DialogTrigger,
+	Overlay as DialogOverlay,
+	Content as DialogContent,
+	Description as DialogDescription,
+	Close as DialogClose,
+};
--- a/src/lib/components/ui/popover/index.ts
+++ b/src/lib/components/ui/popover/index.ts
@@ -0,0 +1,17 @@
+import { Popover as PopoverPrimitive } from "bits-ui";
+import Content from "./popover-content.svelte";
+const Root = PopoverPrimitive.Root;
+const Trigger = PopoverPrimitive.Trigger;
+const Close = PopoverPrimitive.Close;
+
+export {
+	Root,
+	Content,
+	Trigger,
+	Close,
+	//
+	Root as Popover,
+	Content as PopoverContent,
+	Trigger as PopoverTrigger,
+	Close as PopoverClose,
+};
--- a/src/lib/components/ui/popover/popover-content.svelte
+++ b/src/lib/components/ui/popover/popover-content.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils.js";
+
+	type $$Props = PopoverPrimitive.ContentProps;
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = undefined;
+	export { className as class };
+</script>
+
+<PopoverPrimitive.Content
+	{transition}
+	{transitionConfig}
+	class={cn(
+		"bg-popover text-popover-foreground z-50 w-72 rounded-md border p-4 shadow-md outline-none",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</PopoverPrimitive.Content>
--- a/src/lib/components/ui/table/index.ts
+++ b/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,
+};
--- a/src/lib/components/ui/table/table-body.svelte
+++ b/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>
--- a/src/lib/components/ui/table/table-caption.svelte
+++ b/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("text-muted-foreground mt-4 text-sm", className)} {...restProps}>
+	{@render children?.()}
+</caption>
--- a/src/lib/components/ui/table/table-cell.svelte
+++ b/src/lib/components/ui/table/table-cell.svelte
@@ -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>
--- a/src/lib/components/ui/table/table-footer.svelte
+++ b/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>
--- a/src/lib/components/ui/table/table-head.svelte
+++ b/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(
+		"text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</th>
--- a/src/lib/components/ui/table/table-header.svelte
+++ b/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>
--- a/src/lib/components/ui/table/table-row.svelte
+++ b/src/lib/components/ui/table/table-row.svelte
@@ -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>
--- a/src/lib/components/ui/table/table.svelte
+++ b/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>
--- a/src/lib/db/index.ts
+++ b/src/lib/db/index.ts
@@ -0,0 +1,10 @@
+import { env } from '$env/dynamic/private';
+import * as schema from './schema';
+import { drizzle } from 'drizzle-orm/postgres-js';
+import postgres from 'postgres';
+
+const client = postgres(env.DB_URL, { prepare: false });
+export const db = drizzle({
+	schema,
+	client
+});
--- a/src/lib/db/schema.ts
+++ b/src/lib/db/schema.ts
@@ -0,0 +1,73 @@
+import { relations } from 'drizzle-orm';
+import { integer, pgSchema, serial, timestamp, varchar } from 'drizzle-orm/pg-core';
+
+export const personalWebsiteSchema = pgSchema('personal_website');
+
+export const tasks = personalWebsiteSchema.table('tasks', {
+	id: serial('id').primaryKey(),
+	name: varchar('name', { length: 256 }),
+	currentPoints: integer('current_points').default(0),
+	totalPoints: integer('total_points').default(1),
+	notes: varchar('notes', { length: 8192 }),
+	createdAt: timestamp('created_at').defaultNow(),
+	updatedAt: timestamp('updated_at').defaultNow()
+});
+
+export const tasksRelations = relations(tasks, ({ many }) => ({
+	tasksToTopics: many(tasksToTopics)
+}));
+
+export const topics = personalWebsiteSchema.table('topics', {
+	id: serial('id').primaryKey(),
+	name: varchar('name', { length: 256 }),
+	emoji: varchar('emoji', { length: 256 }),
+	createdAt: timestamp('created_at').defaultNow(),
+	updatedAt: timestamp('updated_at').defaultNow()
+});
+
+export const topicsRelations = relations(topics, ({ many }) => ({
+	topicsToTasks: many(tasksToTopics)
+}));
+
+export const tasksToTopics = personalWebsiteSchema.table('tasks_to_topics', {
+	taskId: integer('task_id')
+		.notNull()
+		.references(() => tasks.id),
+	topicId: integer('topic_id')
+		.notNull()
+		.references(() => topics.id)
+});
+
+export const taskToTopicsRelations = relations(tasksToTopics, ({ one }) => ({
+	task: one(tasks, {
+		fields: [tasksToTopics.taskId],
+		references: [tasks.id]
+	}),
+	topic: one(topics, {
+		fields: [tasksToTopics.topicId],
+		references: [topics.id]
+	})
+}));
+
+export const universities = personalWebsiteSchema.table('universities', {
+	id: serial('id').primaryKey(),
+	name: varchar('name', { length: 256 }),
+	progress: integer('progress').default(0),
+	createdAt: timestamp('created_at').defaultNow(),
+	updatedAt: timestamp('updated_at').defaultNow()
+});
+
+export const certificates = personalWebsiteSchema.table('certificates', {
+	id: serial('id').primaryKey(),
+	name: varchar('name', { length: 256 }),
+	progress: integer('progress').default(0),
+	createdAt: timestamp('created_at').defaultNow(),
+	updatedAt: timestamp('updated_at').defaultNow()
+});
+
+export const publications = personalWebsiteSchema.table('publications', {
+	id: serial('id').primaryKey(),
+	name: varchar('name', { length: 256 }),
+	createdAt: timestamp('created_at').defaultNow(),
+	updatedAt: timestamp('updated_at').defaultNow()
+});
--- a/src/lib/db/seed.ts
+++ b/src/lib/db/seed.ts
@@ -0,0 +1,11 @@
+import { topics } from "./schema"
+import * as schema from './schema'
+import { drizzle } from 'drizzle-orm/postgres-js';
+import postgres from 'postgres';
+
+const client = postgres('postgresql://postgres:postgres@localhost:5432/db');
+const db = drizzle(client, { schema });
+
+await db.insert(topics).values([{ name: 'Math', emoji: '👍' }, { name: 'Programming', emoji: '👍' }])
+
+process.exit(0)
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -0,0 +1,62 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { cubicOut } from "svelte/easing";
+import type { TransitionConfig } from "svelte/transition";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}
+
+type FlyAndScaleParams = {
+	y?: number;
+	x?: number;
+	start?: number;
+	duration?: number;
+};
+
+export const flyAndScale = (
+	node: Element,
+	params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
+): TransitionConfig => {
+	const style = getComputedStyle(node);
+	const transform = style.transform === "none" ? "" : style.transform;
+
+	const scaleConversion = (
+		valueA: number,
+		scaleA: [number, number],
+		scaleB: [number, number]
+	) => {
+		const [minA, maxA] = scaleA;
+		const [minB, maxB] = scaleB;
+
+		const percentage = (valueA - minA) / (maxA - minA);
+		const valueB = percentage * (maxB - minB) + minB;
+
+		return valueB;
+	};
+
+	const styleToString = (
+		style: Record<string, number | string | undefined>
+	): string => {
+		return Object.keys(style).reduce((str, key) => {
+			if (style[key] === undefined) return str;
+			return str + `${key}:${style[key]};`;
+		}, "");
+	};
+
+	return {
+		duration: params.duration ?? 200,
+		delay: 0,
+		css: (t) => {
+			const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
+			const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
+			const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
+
+			return styleToString({
+				transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
+				opacity: t
+			});
+		},
+		easing: cubicOut
+	};
+};
--- a/src/routes/+layout.server.ts
+++ b/src/routes/+layout.server.ts
@@ -0,0 +1,5 @@
+export const load = async ({ cookies }) => {
+	return {
+		editable: cookies.get('token')
+	};
+};
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,108 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import { ModeWatcher } from 'mode-watcher';
+	import '../app.css';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+	}
+	const { children, data }: Props = $props();
+
+	let editModalVisible = $state(false);
+</script>
+
+<div
+	class="min-h-screen bg-black text-white bg-center bg-[url('/moon.jpg')] bg-auto bg-no-repeat flex flex-col"
+>
+	<nav class="flex justify-between bg-gray-800 items-center px-4 py-2">
+		<div class="m-2">
+			<a href="/" class="font-bold text-xl sm:text-2xl">Stan Runge</a>
+		</div>
+		<div class="m-2 flex gap-4 items-center">
+			<a href="/progress" class="hover:underline">Progress</a>
+			<span>|</span>
+			<div class="flex gap-2 items-center">
+				<a href="mailto:stan@stanrunge.dev" class="hover:text-gray-300" aria-label="Mail">
+					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+						<path
+							fill="currentColor"
+							d="M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20zm8-7L4 8v10h16V8zm0-2l8-5H4zM4 8V6v12z"
+						/>
+					</svg>
+				</a>
+				<a href="https://github.com/stanrunge" class="hover:text-gray-300" aria-label="GitHub">
+					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+						<path
+							fill="currentColor"
+							d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34
+                               c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83
+                               c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64
+                               c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02
+                               c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21
+                               c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"
+						/>
+					</svg>
+				</a>
+				<a href="https://x.com/stanrunge" class="hover:text-gray-300" aria-label="X">
+					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+						<path
+							fill="currentColor"
+							d="m17.687 3.063l-4.996 5.711l-4.32-5.711H2.112l7.477 9.776l-7.086 8.099h3.034l5.469-6.25l4.78 6.25h6.102
+                               l-7.794-10.304l6.625-7.571zm-1.064 16.06L5.654 4.782h1.803l10.846 14.34z"
+						/>
+					</svg>
+				</a>
+				<a
+					href="https://linkedin.com/in/stanrunge"
+					class="hover:text-gray-300"
+					aria-label="LinkedIn"
+				>
+					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+						<path
+							fill="currentColor"
+							d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-.5 15.5v-5.3
+                               a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1
+                               1.4 1.4v4.93zM6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69
+                               1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37z"
+						/>
+					</svg>
+				</a>
+			</div>
+		</div>
+	</nav>
+
+	<!-- page content goes here -->
+	<main class="mx-auto py-8 px-4 max-w-5xl flex-grow">
+		<ModeWatcher />
+		{@render children?.()}
+	</main>
+
+	{#if !data.editable}
+		<div class="flex justify-end">
+			<button
+				class="p-3 rounded border border-white m-4"
+				onclick={() => (editModalVisible = !editModalVisible)}>Edit</button
+			>
+		</div>
+	{/if}
+</div>
+
+{#if editModalVisible}
+	<div
+		class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50"
+		onclick={() => (editModalVisible = false)}
+	>
+		<form
+			class="bg-white rounded-lg shadow-lg p-6 max-w-md w-full flex flex-col items-center"
+			onclick={(e) => e.stopPropagation()}
+			action="/?/authenticate"
+			method="post"
+		>
+			<h2 class="text-lg font-semibold m-4 text-black">WHO ARE YOU?!?!?!??!</h2>
+			<input type="text" class="border border-black text-center rounded my-4" name="token" />
+			<button class="px-4 py-2 bg-gray-800 text-white rounded hover:bg-gray-700">
+				Authenticate
+			</button>
+		</form>
+	</div>
+{/if}
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -0,0 +1,31 @@
+import { env } from '$env/dynamic/private';
+
+export const actions = {
+	authenticate: async ({ request, cookies }) => {
+		const data = await request.formData();
+
+		const token = data.get('token');
+		if (!token) {
+			return {
+				status: 400,
+				body: { error: 'Missing token' }
+			};
+		}
+
+		if (token !== env.AUTH_TOKEN) {
+			return {
+				status: 401,
+				body: { error: 'Invalid token' }
+			};
+		}
+
+		cookies.set('token', token, {
+			path: '/',
+			maxAge: 60 * 60 * 24 * 7
+		});
+
+		return {
+			success: true
+		};
+	}
+};
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -0,0 +1,10 @@
+<h1 class="my-8 text-4xl font-bold text-center">Stan Runge</h1>
+<img src="/moon.jpg" alt="Moon" />
+
+<div class="flex flex-col">
+	<div>Vash Software</div>
+
+	<div>Hogeschool Inholland</div>
+
+	<div>Junior</div>
+</div>
--- a/src/routes/progress/+page.server.ts
+++ b/src/routes/progress/+page.server.ts
@@ -0,0 +1,18 @@
+import { db } from '$lib/db';
+import { tasks } from '$lib/db/schema.js';
+import { desc } from 'drizzle-orm';
+
+export const load = async () => {
+	return {
+		tasks: await db.query.tasks.findMany({
+			with: {
+				tasksToTopics: {
+					with: {
+						topic: true
+					}
+				}
+			},
+			orderBy: [desc(tasks.currentPoints)]
+		})
+	};
+};
--- a/src/routes/progress/+page.svelte
+++ b/src/routes/progress/+page.svelte
@@ -0,0 +1,153 @@
+<script lang="ts">
+	let { data } = $props();
+
+	let searchTerm = $state('');
+	let filteredTasks = $derived(
+		data.tasks.filter(
+			(task) =>
+				task.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+				task.tasksToTopics.some((t) =>
+					t.topic.name.toLowerCase().includes(searchTerm.toLowerCase())
+				)
+		)
+	);
+</script>
+
+<div class="flex flex-col items-center p-4">
+	<div class="w-full max-w-4xl flex flex-col gap-4 items-center mt-4 mb-8">
+		<div class="flex justify-center gap-8">
+			<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">
+						Create
+					</button>
+				</a>
+			{/if}
+		</div>
+		<!-- Search Bar -->
+		<div class="w-full max-w-md">
+			<input
+				type="text"
+				bind:value={searchTerm}
+				placeholder="Search tasks or topics..."
+				class="w-full px-4 py-2 rounded bg-gray-800 border border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
+			/>
+		</div>
+		Total progress: {data.tasks.reduce((acc, task) => acc + task.currentPoints, 0)} / {data.tasks.reduce(
+			(acc, task) => acc + task.totalPoints,
+			0
+		)} ({(
+			(data.tasks.reduce((acc, task) => acc + task.currentPoints, 0) /
+				data.tasks.reduce((acc, task) => acc + task.totalPoints, 0)) *
+			100
+		).toFixed(3)}%)
+	</div>
+
+	{#if filteredTasks.length > 0}
+		<div class="overflow-x-auto w-full">
+			<!-- Desktop Table View -->
+			<div class="hidden md:block">
+				<table class="min-w-full">
+					<thead>
+						<tr class="border-b border-white">
+							<th class="px-6 py-3 text-left text-sm font-semibold">Name</th>
+							<th class="px-6 py-3 text-left text-sm font-semibold">Topics</th>
+							<th class="px-6 py-3 text-left text-sm font-semibold min-w-[200px]">Progress</th>
+						</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>
+								</td>
+								<td class="px-6 py-2 border-b">
+									<a href={`/progress/${task.id}`} class="flex gap-2 flex-wrap">
+										{#each task.tasksToTopics as topic}
+											<div
+												class="relative bg-blue-500 text-white rounded-full px-2 py-1 shadow font-medium hover:bg-blue-600 transition cursor-pointer"
+												title="Click for more details about {topic.topic.name}"
+											>
+												{topic.topic.name}
+											</div>
+										{/each}
+									</a>
+								</td>
+								<td class="px-6 py-2 border-b min-w-[200px]">
+									<div class="relative w-full h-6 bg-gray-700 rounded-full overflow-hidden">
+										<div
+											class="absolute h-full bg-green-500"
+											style="width: {(task.currentPoints / task.totalPoints) * 100}%"
+										></div>
+										<span class="absolute inset-0 flex items-center justify-center text-sm">
+											{task.currentPoints} / {task.totalPoints} ({(
+												(task.currentPoints / task.totalPoints) *
+												100
+											).toFixed(1)}%)
+										</span>
+									</div>
+								</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+
+			<!-- Mobile Card View -->
+			<div class="md:hidden space-y-4">
+				{#each filteredTasks as task}
+					<div class="bg-gray-800 rounded-lg p-2 w-full">
+						<a
+							href={`/progress/${task.id}`}
+							class="text-blue-500 hover:underline text-lg font-bold"
+						>
+							{task.name}
+						</a>
+						<div class="mt-1">
+							<div class="mb-1"></div>
+							<span class="font-medium">Topics:</span>
+							<div class="flex flex-wrap gap-1 mt-1">
+								{#each task.tasksToTopics as topic}
+									<div
+										class="bg-blue-500 text-white rounded-full px-2 py-1 shadow font-medium hover:bg-blue-600 transition cursor-pointer"
+										title="Click for more details about {topic.topic.name}"
+									>
+										{topic.topic.name}
+									</div>
+								{/each}
+							</div>
+						</div>
+						<div class="w-full h-4 bg-gray-700 rounded-full relative overflow-hidden">
+							<div
+								class="absolute h-full bg-green-500"
+								style="width: {(task.currentPoints / task.totalPoints) * 100}%"
+							></div>
+							<span class="absolute inset-0 flex items-center justify-center text-xs">
+								{task.currentPoints} / {task.totalPoints} ({(
+									(task.currentPoints / task.totalPoints) *
+									100
+								).toFixed(1)}%)
+							</span>
+						</div>
+					</div>
+				{/each}
+			</div>
+		</div>
+	{:else}
+		<p class="text-gray-500">
+			No tasks found matching your search. Try a different keyword or clear the search.
+		</p>
+	{/if}
+</div>
--- a/src/routes/progress/[id]/+page.server.ts
+++ b/src/routes/progress/[id]/+page.server.ts
@@ -0,0 +1,128 @@
+import { db } from '$lib/db';
+import { tasks, tasksToTopics, topics } from '$lib/db/schema';
+import { eq, and } from 'drizzle-orm';
+
+export const load = async ({ cookies, params }) => {
+	return {
+		task: await db.query.tasks.findFirst({
+			with: {
+				tasksToTopics: {
+					with: {
+						topic: true
+					}
+				}
+			},
+			where: eq(tasks.id, params.id)
+		}),
+		topics: await db.query.topics.findMany(),
+		editable: cookies.get('token')
+	};
+};
+
+export const actions = {
+	createTopic: async ({ cookies, request, params }) => {
+		if (!cookies.get('token')) {
+			return { status: 401 };
+		}
+
+		const data = await request.formData();
+
+		const topic = await db
+			.insert(topics)
+			.values({ name: data.get('name') })
+			.returning();
+
+		const existing = await db.query.tasksToTopics.findFirst({
+			where: and(
+				eq(tasksToTopics.taskId, Number(params.id)),
+				eq(tasksToTopics.topicId, topic[0].id)
+			)
+		});
+
+		if (!existing) {
+			await db
+				.insert(tasksToTopics)
+				.values({ taskId: Number(params.id), topicId: topic[0].id })
+				.returning();
+		}
+	},
+	addTopic: async ({ cookies, request, params }) => {
+		if (!cookies.get('token')) {
+			return { status: 401 };
+		}
+
+		const data = await request.formData();
+
+		const topicId = Number(data.get('topic-id'));
+
+		const existing = await db.query.tasksToTopics.findFirst({
+			where: and(eq(tasksToTopics.taskId, Number(params.id)), eq(tasksToTopics.topicId, topicId))
+		});
+
+		console.log(existing);
+
+		if (!existing) {
+			await db
+				.insert(tasksToTopics)
+				.values({ taskId: Number(params.id), topicId })
+				.returning();
+		}
+	},
+	removeTopic: async ({ cookies, request, params }) => {
+		if (!cookies.get('token')) {
+			return { status: 401 };
+		}
+
+		const data = await request.formData();
+
+		const topicId = Number(data.get('topic-id'));
+
+		const existing = await db.query.tasksToTopics.findFirst({
+			where: and(eq(tasksToTopics.taskId, Number(params.id)), eq(tasksToTopics.topicId, topicId))
+		});
+
+		if (existing) {
+			await db
+				.delete(tasksToTopics)
+				.where(
+					and(eq(tasksToTopics.taskId, Number(params.id)), eq(tasksToTopics.topicId, topicId))
+				);
+		}
+	},
+	updateProgress: async ({ cookies, request, params }) => {
+		if (!cookies.get('token')) {
+			return { status: 401 };
+		}
+
+		const data = await request.formData();
+
+		const currentPoints =
+			Number(data.get('currentPoints')) <= Number(data.get('totalPoints'))
+				? Number(data.get('currentPoints'))
+				: Number(data.get('totalPoints'));
+
+		await db
+			.update(tasks)
+			.set({
+				currentPoints,
+				totalPoints: Number(data.get('totalPoints')),
+				updatedAt: new Date()
+			})
+			.where(eq(tasks.id, Number(params.id)));
+	},
+	updateNotes: async ({ cookies, request, params }) => {
+		if (!cookies.get('token')) {
+			return { status: 401 };
+		}
+
+		const data = await request.formData();
+
+		await db
+			.update(tasks)
+			.set({
+				notes: data.get('notes') as string,
+				updatedAt: new Date()
+			})
+			.where(eq(tasks.id, Number(params.id)));
+	}
+};
--- a/src/routes/progress/[id]/+page.svelte
+++ b/src/routes/progress/[id]/+page.svelte
@@ -0,0 +1,174 @@
+<script lang="ts">
+	import Check from 'lucide-svelte/icons/check';
+	import * as Command from '$lib/components/ui/command';
+	import * as Popover from '$lib/components/ui/popover';
+	import { Button } from '$lib/components/ui/button';
+	import { cn } from '$lib/utils.js';
+	import { tick } from 'svelte';
+
+	let { data } = $props();
+
+	let open = $state(false);
+	let value = $state('');
+	let search = $state('');
+	let triggerRef = $state<any>();
+	let addTopicForms = $state<HTMLFormElement[]>([]);
+
+	// We want to refocus the trigger button when the user selects
+	// an item from the list so users can continue navigating the
+	// rest of the form with the keyboard.
+	function closeAndFocusTrigger() {
+		open = false;
+		tick().then(() => {
+			triggerRef.focus();
+		});
+	}
+
+	function getProgress() {
+		return (data.task?.currentPoints / data.task?.totalPoints) * 100;
+	}
+</script>
+
+<h1 class="my-4 text-2xl font-bold text-center">{data.task?.name}</h1>
+
+<div class="my-4">
+	<div class="flex justify-center gap-4 items-center relative">
+		<h2 class="text-xl font-semibold">Topics ({data.task?.tasksToTopics.length})</h2>
+
+		<Popover.Root bind:open>
+			<Popover.Trigger bind:this={triggerRef}>
+				{#if data.editable}
+					<Button variant="outline" class="justify-between" role="combobox" aria-expanded={open}>
+						+
+					</Button>
+				{/if}
+			</Popover.Trigger>
+			<Popover.Content class="w-[200px] p-0">
+				<Command.Root>
+					<Command.Input bind:value={search} placeholder="Search topic..." />
+					<Command.List>
+						<div class="flex flex-col items-center p-2">
+							<Command.Group>
+								{#each data.topics as topic}
+									<form
+										action="?/addTopic"
+										method="post"
+										bind:this={addTopicForms[topic.id]}
+										onsubmit={() => (value = topic.id.toString())}
+									>
+										<input type="hidden" name="topic-id" value={topic.id} />
+										<Command.Item
+											value={topic.name!}
+											onSelect={() => {
+												addTopicForms[topic.id].submit();
+												closeAndFocusTrigger();
+											}}
+										>
+											<Check
+												class={cn(
+													'mr-2 size-4',
+													value !== topic.id.toString() && 'text-transparent'
+												)}
+											/>
+											{topic.name}
+										</Command.Item>
+									</form>
+								{/each}
+							</Command.Group>
+
+							<form method="post" action="?/createTopic">
+								<input type="hidden" name="name" value={search} />
+								<button class="px-4 py-2 rounded bg-secondary">Add Topic</button>
+							</form>
+						</div>
+					</Command.List>
+				</Command.Root>
+			</Popover.Content>
+		</Popover.Root>
+	</div>
+	<div class="flex justify-center flex-wrap gap-2 my-1 relative">
+		{#if data.task?.tasksToTopics}
+			{#each data.task?.tasksToTopics as topic}
+				<a href="/progress/topics/{topic.topic.id}">
+					<div
+						class="relative bg-blue-500 text-white rounded-full px-2 py-1 shadow font-medium hover:bg-blue-600 transition cursor-pointer group"
+						title="Click for more details about {topic.topic.name}"
+					>
+						{topic.topic.name}
+						<form
+							action="?/removeTopic"
+							method="post"
+							class="absolute -top-1 -right-1 opacity-0 group-hover:opacity-100 transition"
+						>
+							<input type="hidden" name="topic-id" value={topic.topic.id} />
+							<button
+								type="submit"
+								onclick={(e) => {
+									e.preventDefault();
+									e.target.closest('form')?.submit();
+								}}
+								class="bg-white text-red-500 hover:text-red-700 hover:bg-red-50 font-bold rounded-full w-5 h-5 flex items-center justify-center shadow-sm"
+								aria-label="Remove topic"
+							>
+								&times;
+							</button>
+						</form>
+					</div>
+				</a>
+			{/each}
+		{/if}
+	</div>
+</div>
+
+<div class="my-8">
+	<h2 class="text-xl font-semibold text-center mb-4">Progress ({getProgress().toFixed(2)}%)</h2>
+
+	<div class="flex items-center gap-4 max-w-xl mx-auto">
+		<form method="POST" action="?/updateProgress" class="flex items-center gap-4 w-full">
+			<input
+				type="number"
+				name="currentPoints"
+				value={data.task?.currentPoints}
+				class="w-20 p-2 border rounded"
+				min="0"
+				readonly={!data.editable}
+				onchange={(e) => e.target.form?.submit()}
+			/>
+
+			<div class="flex-1">
+				<div class="w-full rounded-full h-4">
+					<progress max="100" value={getProgress()}>{getProgress()}%</progress>
+				</div>
+			</div>
+			<input
+				type="number"
+				name="totalPoints"
+				value={data.task?.totalPoints}
+				class="w-20 p-2 border rounded"
+				readonly={!data.editable}
+				min="1"
+				onchange={(e) => e.target.form?.submit()}
+			/>
+		</form>
+	</div>
+</div>
+
+<div class="my-8">
+	<h2 class="text-xl font-semibold text-center mb-4">Notes</h2>
+
+	<form method="POST" action="?/updateNotes" class="max-w-xl mx-auto">
+		<textarea
+			name="notes"
+			class="w-full p-3 border rounded min-h-[150px] resize-y"
+			placeholder="Add notes about this task..."
+			readonly={!data.editable}
+			onchange={(e) => data.editable && e.target.form?.submit()}>{data.task?.notes || ''}</textarea
+		>
+
+		{#if data.editable}
+			<div class="flex justify-end mt-2">
+				<Button type="submit" size="sm">Save Notes</Button>
+			</div>
+		{/if}
+	</form>
+</div>
--- a/src/routes/progress/create/+page.server.ts
+++ b/src/routes/progress/create/+page.server.ts
@@ -0,0 +1,17 @@
+import { db } from "$lib/db"
+import { tasks } from "$lib/db/schema"
+import { redirect } from "@sveltejs/kit"
+
+export const actions = {
+	default: async ({ cookies, request }) => {
+		if (!cookies.get('token')) {
+			return { status: 401 };
+		}
+
+		const data = await request.formData()
+
+		const task = await db.insert(tasks).values({ name: data.get('name') }).returning()
+
+		redirect(303, '/progress/' + task[0].id)
+	}
+}
--- a/src/routes/progress/create/+page.svelte
+++ b/src/routes/progress/create/+page.svelte
@@ -0,0 +1,10 @@
+<form method="post" class="flex flex-col items-center gap-4">
+	<h1 class="font-bold text-xl mt-8 mb-4">Create Task</h1>
+
+	<div class="flex gap-4">
+		<label for="name">Name: </label>
+		<input type="text" name="name" class="border rounded" />
+	</div>
+
+	<button class="px-4 py-2 rounded bg-green-500 m-4">Submit</button>
+</form>
--- a/src/routes/progress/topics/+page.server.ts
+++ b/src/routes/progress/topics/+page.server.ts
@@ -0,0 +1,20 @@
+import { db } from '$lib/db';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async () => {
+	const topics = await db.query.topics.findMany({
+		with: {
+			topicsToTasks: {
+				with: {
+					task: true
+				}
+			}
+		}
+	});
+
+	topics.sort((a, b) => b.topicsToTasks.length - a.topicsToTasks.length);
+
+	return {
+		topics
+	};
+};
--- a/src/routes/progress/topics/+page.svelte
+++ b/src/routes/progress/topics/+page.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	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
+				onclick={() => goto(`/progress/topics/${topic.id}`)}
+				class="cursor-pointer hover:bg-muted/50"
+			>
+				<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>
--- a/src/routes/progress/topics/[id]/+page.server.ts
+++ b/src/routes/progress/topics/[id]/+page.server.ts
@@ -0,0 +1,18 @@
+import { db } from '$lib/db';
+import { topics } from '$lib/db/schema';
+import { eq } from 'drizzle-orm';
+
+export const load = async ({ params }) => {
+	return {
+		topic: await db.query.topics.findFirst({
+			with: {
+				topicsToTasks: {
+					with: {
+						task: true
+					}
+				}
+			},
+			where: eq(topics.id, params.id)
+		})
+	};
+};
--- a/src/routes/progress/topics/[id]/+page.svelte
+++ b/src/routes/progress/topics/[id]/+page.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	let { data } = $props();
+</script>
+
+<h1 class="my-4 text-2xl font-bold text-center">{data.topic.name}</h1>
+
+<h2 class="text-xl font-bold">Tasks ({data.topic?.topicsToTasks.length})</h2>
+{#each data.topic?.topicsToTasks as task}
+	<div class="flex gap-4 items-center relative">
+		<a href="/progress/{task.task.id}" class="text-lg font-semibold hover:underline"
+			>{task.task.name}</a
+		>
+	</div>
+{/each}