Refactor environment variable declarations, update client entry points, and optimize asset handling in SvelteKit project for improved performance and maintainability.

src/routes/+page.server.ts

@@ -0,0 +1,14 @@
+import type { PageServerLoad } from "./$types";
+import type { StackqItem } from "$lib/types/items";
+
+const COLLECTION = "Stackq_Items";
+
+export const load: PageServerLoad = async ({ locals }) => {
+  const list = await locals.pb
+    .collection(COLLECTION)
+    .getFullList<StackqItem>({ sort: "-created", expand: "Parent" })
+    .catch(() => [] as StackqItem[]);
+
+  const itemsForParent = list.map((i) => ({ id: i.id, Item: i.Item, SKU: i.SKU }));
+  return { itemsForParent };
+};

src/routes/+page.svelte

@@ -1,16 +1,30 @@
 <script lang="ts">
+  import { browser } from "$app/environment";
   import { Button } from "$lib/components/ui/button";
 </script>
 
-<main class="flex min-h-screen flex-col items-center justify-center gap-4 p-8">
-  <h1 class="text-2xl font-semibold">Stackq</h1>
-  <p class="text-muted-foreground">Svelte 5 + shadcn-svelte + PocketBase</p>
-  <div class="flex gap-2">
-    <a href="/items">
-      <Button>Items table</Button>
-    </a>
-    <a href="/logout">
-      <Button variant="outline">Log out</Button>
-    </a>
-  </div>
-</main>
+{#if browser}
+  {#await import("./HomeWithDialog.svelte")}
+    <main class="flex min-h-screen flex-col items-center justify-center gap-6 p-8">
+      <p class="text-muted-foreground">Loading…</p>
+    </main>
+  {:then { default: HomeWithDialog }}
+    <HomeWithDialog data={data} />
+  {/await}
+{:else}
+  <main class="flex min-h-screen flex-col items-center justify-center gap-6 p-8">
+    <h1 class="text-2xl font-semibold">Stackq</h1>
+    <p class="text-muted-foreground">Svelte 5 + shadcn-svelte + PocketBase</p>
+    <div class="flex w-full max-w-xs flex-col gap-2">
+      <a href="/items" class="block">
+        <Button class="w-full">Items table</Button>
+      </a>
+      <a href="/items" class="block">
+        <Button class="w-full" variant="outline">New item</Button>
+      </a>
+      <a href="/logout" class="block">
+        <Button class="w-full" variant="outline">Log out</Button>
+      </a>
+    </div>
+  </main>
+{/if}

src/routes/HomeWithDialog.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { Button } from "$lib/components/ui/button";
+  import * as Dialog from "$lib/components/ui/dialog";
+  import ItemForm from "./items/ItemForm.svelte";
+  import { goto } from "$app/navigation";
+
+  let {
+    data,
+  }: {
+    data: { itemsForParent: { id: string; Item: string; SKU: string }[] };
+  } = $props();
+
+  let dialogOpen = $state(false);
+  const itemsForParent = $derived(data?.itemsForParent ?? []);
+
+  function onSuccess() {
+    dialogOpen = false;
+    goto("/items");
+  }
+</script>
+
+<main class="flex min-h-screen flex-col items-center justify-center gap-6 p-8">
+  <h1 class="text-2xl font-semibold">Stackq</h1>
+  <p class="text-muted-foreground">Svelte 5 + shadcn-svelte + PocketBase</p>
+  <div class="flex w-full max-w-xs flex-col gap-2">
+    <a href="/items" class="block">
+      <Button class="w-full">Items table</Button>
+    </a>
+    <Button class="w-full" variant="outline" onclick={() => (dialogOpen = true)}>
+      New item
+    </Button>
+    <a href="/logout" class="block">
+      <Button class="w-full" variant="outline">Log out</Button>
+    </a>
+  </div>
+</main>
+
+<Dialog.Root bind:open={dialogOpen}>
+  <Dialog.Content class="max-h-[90vh] overflow-y-auto sm:max-w-[500px]">
+    <Dialog.Header>
+      <Dialog.Title>New item</Dialog.Title>
+      <Dialog.Description>Add a new Stackq item.</Dialog.Description>
+    </Dialog.Header>
+    <ItemForm
+      itemsForParent={itemsForParent}
+      action="/items?/create"
+      submitLabel="Create"
+      onSuccess={onSuccess}
+    />
+  </Dialog.Content>
+</Dialog.Root>