Refactor environment variable declarations, enhance image handling in item forms, and update asset references in SvelteKit project for improved functionality and performance.

src/routes/items/ItemForm.svelte

@@ -4,9 +4,15 @@
   import { Label } from "$lib/components/ui/label";
   import { enhance } from "$app/forms";
   import { Camera, X } from "@lucide/svelte";
+  import { pb } from "$lib/pocketbase";
   import { UOM_OPTIONS, CATAGORY_OPTIONS, SUB_CATAGORY_OPTIONS } from "$lib/constants/items";
   import type { StackqItem } from "$lib/types/items";
 
+  const COLLECTION = "Stackq_Items";
+  function itemImageUrl(recordId: string, filename: string): string {
+    return `${pb.baseUrl}/api/files/${COLLECTION}/${recordId}/${filename}`;
+  }
+
   let {
     item = null,
     itemsForParent = [],
@@ -141,6 +147,7 @@
 <form
   method="POST"
   action={action}
+  enctype="multipart/form-data"
   use:enhance={() => async ({ update, result }) => {
     await update();
     if (result.type === "success" && result.data?.success) {
@@ -201,6 +208,21 @@
     <Input id="Description" name="Description" value={defaultDesc} />
   </div>
 
+  <div class="space-y-2">
+    <Label for="Image">Image</Label>
+    {#if isEdit && item?.Image}
+      <div class="flex flex-wrap items-center gap-3">
+        <img
+          src={itemImageUrl(item!.id, item!.Image)}
+          alt=""
+          class="size-20 rounded border object-cover"
+        />
+        <span class="text-muted-foreground text-sm">Replace:</span>
+      </div>
+    {/if}
+    <Input id="Image" name="Image" type="file" accept="image/*" />
+  </div>
+
   <div class="grid grid-cols-2 gap-4">
     <div class="space-y-2">
       <Label for="UOM">UOM</Label>