added workspace create and update with map

package.json

@@ -17,7 +17,8 @@
     "@tauri-apps/plugin-opener": "^2"
   },
   "devDependencies": {
-    "@lucide/svelte": "^0.554.0",
+    "@internationalized/date": "^3.8.1",
+    "@lucide/svelte": "^0.544.0",
     "@sveltejs/adapter-static": "^3.0.6",
     "@sveltejs/kit": "^2.9.0",
     "@sveltejs/vite-plugin-svelte": "^5.0.0",
@@ -25,6 +26,7 @@
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.1.17",
     "@tauri-apps/cli": "^2",
+    "bits-ui": "^2.11.0",
     "clsx": "^2.1.1",
     "svelte": "^5.0.0",
     "svelte-check": "^4.0.0",

src/lib/components/ui/dialog/dialog-close.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: DialogPrimitive.CloseProps = $props();
+</script>
+
+<DialogPrimitive.Close bind:ref data-slot="dialog-close" {...restProps} />

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

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import XIcon from "@lucide/svelte/icons/x";
+	import type { Snippet } from "svelte";
+	import * as Dialog from "./index.js";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		children,
+		showCloseButton = true,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+		portalProps?: DialogPrimitive.PortalProps;
+		children: Snippet;
+		showCloseButton?: boolean;
+	} = $props();
+</script>
+
+<Dialog.Portal {...portalProps}>
+	<Dialog.Overlay />
+	<DialogPrimitive.Content
+		bind:ref
+		data-slot="dialog-content"
+		class={cn(
+			"bg-background 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 fixed start-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		{#if showCloseButton}
+			<DialogPrimitive.Close
+				class="ring-offset-background focus:ring-ring rounded-xs focus:outline-hidden absolute end-4 top-4 opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+			>
+				<XIcon />
+				<span class="sr-only">Close</span>
+			</DialogPrimitive.Close>
+		{/if}
+	</DialogPrimitive.Content>
+</Dialog.Portal>

src/lib/components/ui/dialog/dialog-description.svelte

@@ -0,0 +1,17 @@
+<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
+	data-slot="dialog-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>

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

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

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dialog-header"
+	class={cn("flex flex-col gap-2 text-center sm:text-start", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,20 @@
+<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
+	data-slot="dialog-overlay"
+	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/50",
+		className
+	)}
+	{...restProps}
+/>

src/lib/components/ui/dialog/dialog-title.svelte

@@ -0,0 +1,17 @@
+<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
+	data-slot="dialog-title"
+	class={cn("text-lg font-semibold leading-none", className)}
+	{...restProps}
+/>

src/lib/components/ui/dialog/dialog-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: DialogPrimitive.TriggerProps = $props();
+</script>
+
+<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {...restProps} />

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";
+import Trigger from "./dialog-trigger.svelte";
+import Close from "./dialog-close.svelte";
+
+const Root = DialogPrimitive.Root;
+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,
+};

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

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

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

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	type InputType = Exclude<HTMLInputTypeAttribute, "file">;
+
+	type Props = WithElementRef<
+		Omit<HTMLInputAttributes, "type"> &
+			({ type: "file"; files?: FileList } | { type?: InputType; files?: undefined })
+	>;
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		type,
+		files = $bindable(),
+		class: className,
+		"data-slot": dataSlot = "input",
+		...restProps
+	}: Props = $props();
+</script>
+
+{#if type === "file"}
+	<input
+		bind:this={ref}
+		data-slot={dataSlot}
+		class={cn(
+			"selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50",
+			"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+			"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+			className
+		)}
+		type="file"
+		bind:files
+		bind:value
+		{...restProps}
+	/>
+{:else}
+	<input
+		bind:this={ref}
+		data-slot={dataSlot}
+		class={cn(
+			"border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+			"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+			className
+		)}
+		{type}
+		bind:value
+		{...restProps}
+	/>
+{/if}

src/lib/components/ui/label/index.ts

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

src/lib/components/ui/label/label.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Label as LabelPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: LabelPrimitive.RootProps = $props();
+</script>
+
+<LabelPrimitive.Root
+	bind:ref
+	data-slot="label"
+	class={cn(
+		"flex select-none items-center gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",
+		className
+	)}
+	{...restProps}
+/>

src/lib/services/workspaces.ts

@@ -1,33 +1,70 @@
 import type { Workspace } from "$lib/types/workspace";
 
-let ws: Workspace[] = [
+const ws: Map<string, Workspace> = new Map<string, Workspace>([
+  [
+    "1",
     {
-        Id: "1",
-        Name: "Test 1",
-        Description: "This is a test description"
+      Id: "1",
+      Name: "Test 1",
+      Description: "This is a test description",
     },
+  ],
+  [
+    "2",
     {
-        Id: "2",
-        Name: "Test 2",
-        Description: "This is a longer test description"
+      Id: "2",
+      Name: "Test 2",
+      Description: "This is a longer test description",
     },
+  ],
+  [
+    "3",
     {
-        Id: "3",
-        Name: "Test 3",
-        Description: "This is a slightly longer test description"
+      Id: "3",
+      Name: "Test 3",
+      Description: "This is a slightly longer test description",
     },
+  ],
+  [
+    "4",
     {
-        Id: "4",
-        Name: "Test 4",
-        Description: "This is an even slightly longer test description"
+      Id: "4",
+      Name: "Test 4",
+      Description: "This is an even slightly longer test description",
     },
+  ],
+  [
+    "5",
     {
-        Id: "5",
-        Name: "Test 5",
-        Description: "This is a veryyyyyyyyyyyyyyyyyyyyyyyyyyy longggggggggggggggggggggggggggg test descriptionnnnnnnnnnnnnnnnnnnnnnnnnnnnnn"
+      Id: "5",
+      Name: "Test 5",
+      Description:
+        "This is a veryyyyyyyyyyyyyyyyyyyyyyyyyyy longggggggggggggggggggggggggggg test descriptionnnnnnnnnnnnnnnnnnnnnnnnnnnnnn",
     },
-]
+  ],
+]);
+
+function convert_to_list(ws: Map<string, Workspace>): Workspace[] {
+  return [...ws.values()];
+}
 
 export async function get_workspaces(): Promise<Workspace[]> {
-    return ws
-}
+  return convert_to_list(ws);
+}
+
+export async function update_workspace(workspace: Workspace): Promise<boolean> {
+  let w = ws.get(workspace.Id);
+  if (w != undefined) {
+    w.Name = workspace.Name;
+    w.Description = workspace.Description;
+  } else {
+    return false;
+  }
+  return true;
+}
+
+export async function create_workspace(workspace: Workspace): Promise<boolean> {
+  workspace.Id = crypto.randomUUID();
+  ws.set(workspace.Id, workspace);
+  return true;
+}

src/routes/workspaces/+page.svelte

@@ -2,66 +2,177 @@
   import * as Empty from "$lib/components/ui/empty/index.js";
   import { Button } from "$lib/components/ui/button/index.js";
   import FolderCodeIcon from "@lucide/svelte/icons/folder-code";
-  import { get_workspaces } from "$lib/services/workspaces";
+  import {
+    create_workspace,
+    get_workspaces,
+    update_workspace,
+  } from "$lib/services/workspaces";
   import type { Workspace } from "$lib/types/workspace";
   import * as Card from "$lib/components/ui/card/index";
+  import * as Dialog from "$lib/components/ui/dialog/index.js";
+  import { Input } from "$lib/components/ui/input/index.js";
+  import { Label } from "$lib/components/ui/label/index.js";
 
-  let showPrompt = false;
-  let workspaces: Workspace[] = [];
-
-  get_workspaces().then((ws) => {
-    if (ws.length == 0) {
-      showPrompt = true;
-    } else {
-      workspaces = ws;
-    }
+  $effect(() => {
+    get_workspaces().then((ws) => {
+      if (ws.length == 0) {
+        showPrompt = true;
+      } else {
+        console.log(ws);
+        workspaces = ws;
+      }
+    });
   });
+
+  let showPrompt = $state(false);
+  let workspaces = $state<Workspace[]>([]);
+  let dialogOpen = $state(false);
+  let dialogMode = $state<"create" | "edit">("create");
+  let selectedWorkspace = $state<Workspace | null>(null);
+  let workspaceName = $state("");
+  let workspaceDescription = $state("");
+
+  function openCreateDialog() {
+    dialogMode = "create";
+    selectedWorkspace = null;
+    workspaceName = "";
+    workspaceDescription = "";
+    dialogOpen = true;
+  }
+
+  function openEditDialog(workspace: Workspace) {
+    dialogMode = "edit";
+    selectedWorkspace = workspace;
+    workspaceName = workspace.Name ?? "";
+    workspaceDescription = workspace.Description ?? "";
+    dialogOpen = true;
+  }
+
+  async function handleDialogSubmit() {
+    let success = false;
+    if (dialogMode === "create") {
+      const w: Workspace = {
+        // Id will be assigned in create_workspace
+        Id: "",
+        Name: workspaceName,
+        Description: workspaceDescription,
+      };
+      success = await create_workspace(w);
+    } else if (selectedWorkspace != null) {
+      const w: Workspace = {
+        Id: selectedWorkspace.Id,
+        Name: workspaceName,
+        Description: workspaceDescription,
+      };
+      success = await update_workspace(w);
+    }
+
+    if (success) {
+      const updated = await get_workspaces();
+      workspaces = updated;
+      showPrompt = updated.length === 0;
+    }
+
+    dialogOpen = false;
+  }
 </script>
 
-{#if showPrompt}
-  <Empty.Root class="flex min-h-[calc(100vh-4rem)] items-center justify-center">
-    <Empty.Header>
-      <Empty.Media variant="icon">
-        <FolderCodeIcon />
-      </Empty.Media>
-      <Empty.Title>No Workspaces Yet</Empty.Title>
-      <Empty.Description>
-        You haven't created any Workspaces yet. Get started by creating your
-        first project.
-      </Empty.Description>
-    </Empty.Header>
-    <Empty.Content>
-      <div class="flex gap-2">
-        <Button>Create Workspace</Button>
-      </div>
-    </Empty.Content>
-  </Empty.Root>
-{:else}
-  <div class="min-h-[calc(100vh-4rem)] p-6">
-    <div
-      class="grid gap-6
-        grid-cols-1
-        sm:grid-cols-2
-        md:grid-cols-3
-        xl:grid-cols-4
-        2xl:grid-cols-5"
+<Dialog.Root bind:open={dialogOpen}>
+  {#if showPrompt}
+    <Empty.Root
+      class="flex min-h-[calc(100vh-4rem)] items-center justify-center"
     >
-      {#each workspaces as workspace (workspace.Id)}
-        <Card.Root
-          class="min-h-40 w-full max-w-xs mx-auto flex flex-col justify-between cursor-pointer hover:shadow-md transition-shadow"
-        >
-          <Card.Header>
-            <Card.Title class="truncate">{workspace.Name}</Card.Title>
-            <Card.Description class="text-xs text-muted-foreground">
-              {workspace.Description}
-            </Card.Description>
-          </Card.Header>
-          <Card.Footer class="flex items-center justify-center gap-2">
-            <Button size="sm" class="justify-center">Open</Button>
-            <Button size="sm" class="justify-center">Edit</Button>
-          </Card.Footer>
-        </Card.Root>
-      {/each}
+      <Empty.Header>
+        <Empty.Media variant="icon">
+          <FolderCodeIcon />
+        </Empty.Media>
+        <Empty.Title>No Workspaces Yet</Empty.Title>
+        <Empty.Description>
+          You haven't created any Workspaces yet. Get started by creating your
+          first project.
+        </Empty.Description>
+      </Empty.Header>
+      <Empty.Content>
+        <div class="flex gap-2">
+          <Button onclick={openCreateDialog}>Create Workspace</Button>
+        </div>
+      </Empty.Content>
+    </Empty.Root>
+  {:else}
+    <div class="min-h-[calc(100vh-4rem)] p-6 space-y-4">
+      <div class="flex items-center justify-between">
+        <h1 class="text-2xl font-semibold">Workspaces</h1>
+        <Button onclick={openCreateDialog}>Create Workspace</Button>
+      </div>
+      <div
+        class="grid gap-6
+          grid-cols-1
+          sm:grid-cols-2
+          md:grid-cols-3
+          xl:grid-cols-4
+          2xl:grid-cols-5"
+      >
+        {#each workspaces as workspace (workspace.Id)}
+          <Card.Root
+            class="min-h-40 w-full max-w-xs mx-auto flex flex-col justify-between cursor-pointer hover:shadow-md transition-shadow"
+          >
+            <Card.Header>
+              <Card.Title class="truncate">{workspace.Name}</Card.Title>
+              <Card.Description class="text-xs text-muted-foreground">
+                {workspace.Description}
+              </Card.Description>
+            </Card.Header>
+            <Card.Footer class="flex items-center justify-center gap-2">
+              <Button size="sm" class="justify-center">Open</Button>
+              <Button
+                size="sm"
+                class="justify-center"
+                onclick={() => openEditDialog(workspace)}
+              >
+                Edit
+              </Button>
+            </Card.Footer>
+          </Card.Root>
+        {/each}
+      </div>
     </div>
-  </div>
-{/if}
+  {/if}
+
+  <Dialog.Content class="sm:max-w-[425px]">
+    <Dialog.Header>
+      <Dialog.Title>
+        {dialogMode === "create" ? "Create workspace" : "Edit workspace"}
+      </Dialog.Title>
+      <Dialog.Description>
+        {#if dialogMode === "create"}
+          Create a new workspace. Fill in the details below and click create.
+        {:else}
+          Update your workspace details and click save.
+        {/if}
+      </Dialog.Description>
+    </Dialog.Header>
+    <form class="grid gap-4 py-4" onsubmit={handleDialogSubmit}>
+      <div class="grid grid-cols-4 items-center gap-4">
+        <Label for="workspace-name" class="text-end">Name</Label>
+        <Input
+          id="workspace-name"
+          class="col-span-3"
+          bind:value={workspaceName}
+        />
+      </div>
+      <div class="grid grid-cols-4 items-center gap-4">
+        <Label for="workspace-description" class="text-end">Description</Label>
+        <Input
+          id="workspace-description"
+          class="col-span-3"
+          bind:value={workspaceDescription}
+        />
+      </div>
+      <Dialog.Footer>
+        <Button type="submit">
+          {dialogMode === "create" ? "Create workspace" : "Save changes"}
+        </Button>
+      </Dialog.Footer>
+    </form>
+  </Dialog.Content>
+</Dialog.Root>