added sidebar component, added individual workspace page

src/routes/workspaces/+page.svelte

@@ -12,6 +12,7 @@
   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";
+  import { goto } from "$app/navigation";
 
   $effect(() => {
     get_workspaces().then((ws) => {
@@ -48,6 +49,10 @@
     dialogOpen = true;
   }
 
+  function handleWorkspaceClick(id: string) {
+    goto(`/workspaces/${id}`)
+  }
+
   async function handleDialogSubmit() {
     let success = false;
     if (dialogMode === "create") {
@@ -123,7 +128,7 @@
               </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={() => handleWorkspaceClick(workspace.Id)}>Open</Button>
               <Button
                 size="sm"
                 class="justify-center"

src/routes/workspaces/[id]/+page.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { goto } from "$app/navigation";
+
+  const { params } = $props<{ params: { id: string } }>();
+
+  function goBack() {
+    goto("/workspaces");
+  }
+</script>
+
+<div class="min-h-[calc(100vh-4rem)] p-6 space-y-4">
+  <h1 class="text-2xl font-semibold">Workspace ID</h1>
+  <p class="text-muted-foreground">
+    Current workspace id: <strong>{params.id}</strong>
+  </p>
+
+  <button
+    class="mt-4 inline-flex items-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90"
+    onclick={goBack}
+  >
+    Back to workspaces
+  </button>
+</div>