Update UI components in +page.svelte and HomeWithDialog.svelte to disable certain buttons with a "Coming soon" label, enhancing user experience by indicating future functionality. Adjust server internal options to reflect a new version hash.

src/routes/+page.svelte

@@ -17,27 +17,39 @@
   <main class="flex min-h-0 flex-1 flex-col items-center justify-center gap-6 p-6">
     <h1 class="text-2xl font-semibold">Stackq</h1>
     <div class="flex w-full max-w-xs flex-col gap-3">
-      <a href="/items" class="block">
-        <Button class="h-12 w-full min-h-12">Scan</Button>
-      </a>
-      <a href="/transactions" class="block">
-        <Button class="h-12 min-h-12 w-full" variant="outline">New Transaction</Button>
-      </a>
-      <a href="/items" class="block">
-        <Button class="h-12 min-h-12 w-full" variant="outline">New Item</Button>
+      <div class="text-muted-foreground flex h-12 min-h-12 w-full cursor-not-allowed items-center justify-between gap-2 rounded-md border border-input bg-muted/40 px-4 text-sm opacity-60">
+        <span>Scan</span>
+        <span class="text-xs font-medium">Coming soon</span>
+      </div>
+      <div class="text-muted-foreground flex h-12 min-h-12 w-full cursor-not-allowed items-center justify-between gap-2 rounded-md border border-input bg-muted/40 px-4 text-sm opacity-60">
+        <span>New Transaction</span>
+        <span class="text-xs font-medium">Coming soon</span>
+      </div>
+      <a href="/receipts" class="block">
+        <Button class="h-12 min-h-12 w-full" variant="outline">New receipt</Button>
       </a>
+      <div class="text-muted-foreground flex h-12 min-h-12 w-full cursor-not-allowed items-center justify-between gap-2 rounded-md border border-input bg-muted/40 px-4 text-sm opacity-60">
+        <span>New Item</span>
+        <span class="text-xs font-medium">Coming soon</span>
+      </div>
     </div>
     <div class="text-muted-foreground w-full max-w-xs border-t pt-4 text-center text-sm">Go to</div>
     <div class="flex w-full max-w-xs flex-col gap-2">
-      <a href="/items" class="block">
-        <Button class="h-12 min-h-12 w-full" variant="outline">Items</Button>
-      </a>
-      <a href="/transactions" class="block">
-        <Button class="h-12 min-h-12 w-full" variant="outline">Transactions</Button>
-      </a>
-      <a href="/accounts" class="block">
-        <Button class="h-12 min-h-12 w-full" variant="outline">Accounts</Button>
+      <div class="text-muted-foreground flex h-12 min-h-12 w-full cursor-not-allowed items-center justify-between gap-2 rounded-md border border-input bg-muted/40 px-4 text-sm opacity-60">
+        <span>Items</span>
+        <span class="text-xs font-medium">Coming soon</span>
+      </div>
+      <div class="text-muted-foreground flex h-12 min-h-12 w-full cursor-not-allowed items-center justify-between gap-2 rounded-md border border-input bg-muted/40 px-4 text-sm opacity-60">
+        <span>Transactions</span>
+        <span class="text-xs font-medium">Coming soon</span>
+      </div>
+      <a href="/receipts" class="block">
+        <Button class="h-12 min-h-12 w-full" variant="outline">Receipts</Button>
       </a>
+      <div class="text-muted-foreground flex h-12 min-h-12 w-full cursor-not-allowed items-center justify-between gap-2 rounded-md border border-input bg-muted/40 px-4 text-sm opacity-60">
+        <span>Accounts</span>
+        <span class="text-xs font-medium">Coming soon</span>
+      </div>
     </div>
   </main>
 {/if}

src/routes/HomeWithDialog.svelte

@@ -42,31 +42,41 @@
   <h1 class="w-full max-w-xs shrink-0 text-center text-2xl font-semibold">Stackq</h1>
 
   <div class="flex w-full max-w-xs shrink-0 flex-col gap-3">
-    <Button class="h-16 min-h-16 w-full" onclick={() => (scanDialogOpen = true)}>Scan</Button>
-    <a href="/transactions/new" class="block">
-      <Button class="h-16 min-h-16 w-full" variant="outline">New transaction</Button>
-    </a>
+    <div class="text-muted-foreground flex h-16 w-full min-h-16 cursor-not-allowed items-center justify-between gap-2 rounded-md border border-input bg-muted/40 px-4 opacity-60">
+      <span>Scan</span>
+      <span class="text-muted-foreground shrink-0 text-xs font-medium">Coming soon</span>
+    </div>
+    <div class="text-muted-foreground flex h-16 w-full min-h-16 cursor-not-allowed items-center justify-between gap-2 rounded-md border border-input bg-muted/40 px-4 opacity-60">
+      <span>New transaction</span>
+      <span class="text-muted-foreground shrink-0 text-xs font-medium">Coming soon</span>
+    </div>
     <Button class="h-16 min-h-16 w-full" variant="outline" onclick={() => (receiptDialogOpen = true)}>
       New receipt
     </Button>
-    <Button class="h-16 min-h-16 w-full" variant="outline" onclick={() => (dialogOpen = true)}>New Item</Button>
+    <div class="text-muted-foreground flex h-16 w-full min-h-16 cursor-not-allowed items-center justify-between gap-2 rounded-md border border-input bg-muted/40 px-4 opacity-60">
+      <span>New Item</span>
+      <span class="text-muted-foreground shrink-0 text-xs font-medium">Coming soon</span>
+    </div>
   </div>
 
   <div class="w-full max-w-xs shrink-0 border-t pt-4"></div>
 
   <div class="flex w-full max-w-xs shrink-0 flex-col gap-2">
-    <a href="/items" class="block">
-      <Button class="h-16 min-h-16 w-full" variant="outline">Items</Button>
-    </a>
-    <a href="/transactions" class="block">
-      <Button class="h-16 min-h-16 w-full" variant="outline">Transactions</Button>
-    </a>
+    <div class="text-muted-foreground flex h-16 w-full min-h-16 cursor-not-allowed items-center justify-between gap-2 rounded-md border border-input bg-muted/40 px-4 opacity-60">
+      <span>Items</span>
+      <span class="text-muted-foreground shrink-0 text-xs font-medium">Coming soon</span>
+    </div>
+    <div class="text-muted-foreground flex h-16 w-full min-h-16 cursor-not-allowed items-center justify-between gap-2 rounded-md border border-input bg-muted/40 px-4 opacity-60">
+      <span>Transactions</span>
+      <span class="text-muted-foreground shrink-0 text-xs font-medium">Coming soon</span>
+    </div>
     <a href="/receipts" class="block">
       <Button class="h-16 min-h-16 w-full" variant="outline">Receipts</Button>
     </a>
-    <a href="/accounts" class="block">
-      <Button class="h-16 min-h-16 w-full" variant="outline">Accounts</Button>
-    </a>
+    <div class="text-muted-foreground flex h-16 w-full min-h-16 cursor-not-allowed items-center justify-between gap-2 rounded-md border border-input bg-muted/40 px-4 opacity-60">
+      <span>Accounts</span>
+      <span class="text-muted-foreground shrink-0 text-xs font-medium">Coming soon</span>
+    </div>
   </div>
 </main>
 

src/routes/receipts/ReceiptForm.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Button } from "$lib/components/ui/button";
   import { Label } from "$lib/components/ui/label";
-  import { convertImageToWebP } from "$lib/convert-image-to-webp";
+  import { convertImageToWebP, isAcceptableImageFile } from "$lib/convert-image-to-webp";
   import { enhance } from "$app/forms";
   import Loader2Icon from "@lucide/svelte/icons/loader-2";
 
@@ -30,7 +30,7 @@
   async function onImageChange(e: Event) {
     const input = e.currentTarget as HTMLInputElement;
     const file = input.files?.[0];
-    if (!file || !file.type.startsWith("image/")) {
+    if (!file || !isAcceptableImageFile(file)) {
       imageFileName = null;
       return;
     }

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

@@ -4,7 +4,7 @@
   import * as Collapsible from "$lib/components/ui/collapsible";
   import { Input } from "$lib/components/ui/input";
   import { Label } from "$lib/components/ui/label";
-  import { convertImageToWebP } from "$lib/convert-image-to-webp";
+  import { convertImageToWebP, isAcceptableImageFile } from "$lib/convert-image-to-webp";
   import { POCKETBASE_BASE_URL } from "$lib/pocketbase";
   import { enhance } from "$app/forms";
   import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
@@ -138,7 +138,7 @@
   async function onImageChange() {
     const input = imageInputEl;
     const file = input?.files?.[0] ?? null;
-    if (!file || !file.type.startsWith("image/")) {
+    if (!file || !isAcceptableImageFile(file)) {
       selectedImageFile = null;
       imageFileName = null;
       return;