feat(web): set time dialog

webapp/package.json

@@ -22,20 +22,22 @@
         "@tanstack/table-core": "^8.20.5",
         "@types/eslint": "^9.6.1",
         "autoprefixer": "^10.4.20",
-        "bits-ui": "1.0.0-next.41",
+        "bits-ui": "1.0.0-next.45",
         "clsx": "^2.1.1",
         "eslint": "^9.14.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-svelte": "^2.46.0",
         "globals": "^15.12.0",
         "konva": "^9.3.16",
         "lucide-svelte": "^0.454.0",
+        "mode-watcher": "^0.4.1",
         "peaks.js": "^3.4.2",
         "prettier": "^3.3.3",
         "prettier-plugin-svelte": "^3.2.7",
         "prettier-plugin-tailwindcss": "^0.6.8",
         "svelte": "^5.1.10",
         "svelte-check": "^4.0.5",
+        "svelte-sonner": "^0.3.28",
         "tailwind-merge": "^2.5.4",
         "tailwind-variants": "^0.2.1",
         "tailwindcss": "^3.4.14",

webapp/src/lib/components/time/SetTimeDialog.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+    import { Button, buttonVariants } from '@/ui/button'
+    import * as Dialog from '@/ui/dialog'
+    import { Input } from '@/ui/input'
+    import { toast } from 'svelte-sonner'
+    import type { Timecode } from '$lib/data/types'
+    import { setTime } from '$lib/data/control'
+    import { cn } from '$utils'
+
+    const format = /(?<hour>\d{2}):(?<min>\d{2}):(?<sec>\d{2})\/(?<frame>\d{2})/
+
+    let { disabled, class: classNames }: { disabled: boolean; class: string } = $props()
+
+    let time = $state('')
+    let isOpen = $state(false)
+
+    const onSet = () => {
+        const res = time.match(format)
+        if (res == null) {
+            toast.error('Invalid time format!', {
+                description: 'Valid example: 00:00:00/00'
+            })
+        }
+
+        const timecode: Timecode = {
+            hour: parseInt(res!.groups['hour']),
+            min: parseInt(res!.groups['min']),
+            sec: parseInt(res!.groups['sec']),
+            frame: parseInt(res!.groups['frame']),
+            millisecLength: 0
+        }
+
+        setTime(timecode).then(() => (isOpen = false))
+    }
+</script>
+
+<Dialog.Root bind:open={isOpen}>
+    <Dialog.Trigger class={cn(buttonVariants({ variant: 'outline' }), classNames)}
+        >Set</Dialog.Trigger
+    >
+    <Dialog.Content>
+        <Dialog.Header>
+            <Dialog.Title>Set time</Dialog.Title>
+            <Dialog.Description>Set the time immediately</Dialog.Description>
+        </Dialog.Header>
+        <Input bind:value={time} />
+        <Dialog.Footer>
+            <Button {disabled} onclick={() => onSet()}>Set</Button>
+        </Dialog.Footer>
+    </Dialog.Content>
+</Dialog.Root>

webapp/src/lib/components/time/TimePanel.svelte

@@ -4,6 +4,7 @@
     import Disc3 from 'lucide-svelte/icons/disc-3'
     import { Button } from '@/ui/button'
     import * as Card from '@/ui/card'
+    import SetTimeDialog from './SetTimeDialog.svelte'
 </script>
 
 <Card.Root class="m-2">
@@ -20,6 +21,6 @@
         <Button disabled={$playing} onclick={play}>Play</Button>
         <Button disabled={$paused} onclick={pause}>Pause</Button>
         <Button onclick={stop}>Stop</Button>
-        <Button disabled={$playing} class="ml-4" variant="outline">Set</Button>
+        <SetTimeDialog disabled={$playing} class="ml-4" />
     </Card.Footer>
 </Card.Root>

webapp/src/lib/components/ui/dialog/dialog-content.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+	import X from "lucide-svelte/icons/x";
+	import type { Snippet } from "svelte";
+	import * as Dialog from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+		children: Snippet;
+	} = $props();
+</script>
+
+<Dialog.Portal>
+	<Dialog.Overlay />
+	<DialogPrimitive.Content
+		bind:ref
+		class={cn(
+			"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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] 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 duration-200 sm:rounded-lg",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<DialogPrimitive.Close
+			class="ring-offset-background focus:ring-ring 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="size-4" />
+			<span class="sr-only">Close</span>
+		</DialogPrimitive.Close>
+	</DialogPrimitive.Content>
+</Dialog.Portal>

webapp/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";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.DescriptionProps = $props();
+</script>
+
+<DialogPrimitive.Description
+	bind:ref
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>

webapp/src/lib/components/ui/dialog/dialog-footer.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

webapp/src/lib/components/ui/dialog/dialog-header.svelte

@@ -0,0 +1,20 @@
+<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<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	class={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

webapp/src/lib/components/ui/dialog/dialog-overlay.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.OverlayProps = $props();
+</script>
+
+<DialogPrimitive.Overlay
+	bind:ref
+	class={cn(
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80",
+		className
+	)}
+	{...restProps}
+/>

webapp/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";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.TitleProps = $props();
+</script>
+
+<DialogPrimitive.Title
+	bind:ref
+	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	{...restProps}
+/>

webapp/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 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;
+const Portal = DialogPrimitive.Portal;
+
+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,
+};

webapp/src/lib/components/ui/input/index.ts

@@ -0,0 +1,7 @@
+import Root from "./input.svelte";
+
+export {
+	Root,
+	//
+	Root as Input,
+};

webapp/src/lib/components/ui/input/input.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		...restProps
+	}: WithElementRef<HTMLInputAttributes> = $props();
+</script>
+
+<input
+	bind:this={ref}
+	class={cn(
+		"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	bind:value
+	{...restProps}
+/>

webapp/src/lib/components/ui/sonner/index.ts

@@ -0,0 +1 @@
+export { default as Toaster } from "./sonner.svelte";