style: convert add topic into shadcn combobox

packages/web/package.json

@@ -25,12 +25,15 @@
     "@types/eslint": "9.6.1",
     "@types/pg": "^8.11.10",
     "autoprefixer": "^10.4.20",
+    "bits-ui": "^0.22.0",
     "clsx": "^2.1.1",
+    "cmdk-sv": "^0.0.18",
     "drizzle-kit": "^0.30.1",
     "eslint": "9.17.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-svelte": "^2.46.1",
     "globals": "15.14.0",
+    "lucide-svelte": "^0.473.0",
     "postcss": "^8.4.49",
     "prettier": "3.4.2",
     "prettier-plugin-svelte": "3.3.2",
@@ -48,6 +51,7 @@
   "dependencies": {
     "@sveltejs/adapter-node": "^5.2.11",
     "drizzle-orm": "^0.38.3",
+    "mode-watcher": "^0.5.0",
     "postgres": "^3.4.5"
   }
 }

packages/web/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>

packages/web/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,
+};

packages/web/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>

packages/web/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>

packages/web/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>

packages/web/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>

packages/web/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>

packages/web/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>

packages/web/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} />

packages/web/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>

packages/web/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>

packages/web/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,
+};

packages/web/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>

packages/web/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>

packages/web/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>

packages/web/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>

packages/web/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}
+/>

packages/web/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>

packages/web/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>

packages/web/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,
+};

packages/web/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,
+};

packages/web/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>

packages/web/src/routes/+layout.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
+	import { ModeWatcher } from 'mode-watcher';
 	import '../app.css';
 
 	interface Props {
@@ -72,6 +73,7 @@
 
 	<!-- page content goes here -->
 	<main class="mx-auto py-8 px-4 max-w-5xl flex-grow">
+		<ModeWatcher />
 		{@render children?.()}
 	</main>
 

packages/web/src/routes/+page.svelte

@@ -1,4 +1,10 @@
 <h1 class="my-8 text-4xl font-bold text-center">Stan Runge</h1>
-<img src="/public/stan.jpg" alt="" />
+<img src="/moon.jpg" alt="Moon" />
 
-<div></div>
+<div class="flex flex-col">
+	<div>Vash Software</div>
+
+	<div>Hogeschool Inholland</div>
+
+	<div>Junior</div>
+</div>

packages/web/src/routes/progress/[id]/+page.svelte

@@ -1,44 +1,65 @@
 <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 addTopicsDropdownShown = $state(false);
+	let open = $state(false);
+	let value = $state('');
+	let triggerRef = $state<HTMLButtonElement>(null!);
+
+	// 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();
+		});
+	}
 </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>
+		<h2 class="text-xl font-semibold">Topics ({data.task?.tasksToTopics.length})</h2>
-		<div class="relative">
+
-			<button
+		<Popover.Root bind:open>
-				class="px-2 py-1 rounded bg-green-500 text-white font-medium shadow"
+			<Popover.Trigger bind:ref={triggerRef}>
-				onclick={() => (addTopicsDropdownShown = !addTopicsDropdownShown)}
+				<Button variant="outline" class="justify-between" role="combobox" aria-expanded={open}>
-			>
+					+
-				+
+				</Button>
-			</button>
+			</Popover.Trigger>
-			{#if addTopicsDropdownShown}
+			<Popover.Content class="w-[200px] p-0">
-				<form
+				<Command.Root>
-					method="post"
+					<Command.Input placeholder="Search topic..." />
-					action="?/addTopic"
+					<Command.List>
-					class="absolute mt-2 rounded-xl bg-gray-100 p-2 shadow-md items-center flex flex-col"
+						<Command.Empty>No topic found.</Command.Empty>
-				>
+						<Command.Group>
-					<select name="topic-id" class="rounded p-2 border border-gray-300 my-2" required>
+							{#each data.topics as topic}
-						<option value="" disabled selected>select a topic</option>
+								<Command.Item
-						{#each data.topics as topic}
+									value={topic.id.toString()}
-							{#if !data.task?.tasksToTopics.some((t) => t.topicId === topic.id)}
+									onSelect={() => {
-								<option value={topic.id}>{topic.name}</option>
+										value = topic.id.toString();
-							{/if}
+										closeAndFocusTrigger();
-						{/each}
+									}}
-					</select>
+								>
-					<button
+									<Check
-						type="submit"
+										class={cn('mr-2 size-4', value !== topic.id.toString() && 'text-transparent')}
-						class="ml-2 px-2 py-1 rounded bg-blue-500 text-white font-medium shadow"
+									/>
-					>
+									{topic.name}
-						Add
+								</Command.Item>
-					</button>
+							{/each}
-				</form>
+						</Command.Group>
-			{/if}
+					</Command.List>
-		</div>
+				</Command.Root>
+			</Popover.Content>
+		</Popover.Root>
 	</div>
 
 	<div class="flex justify-center flex-wrap gap-2 my-1">