From 2afa3c6e9b42655ef06335a7d73f60fb5187e6c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sun, 8 Mar 2026 17:11:24 +0100
Subject: [PATCH] fix: replace raw HTML buttons with Button component in admin,
 remove vite-plugin-wasm

- Use Button component for photo remove, editor tab toggle, and model
  pill buttons across admin/users, admin/articles, admin/videos
- Remove vite-plugin-wasm from frontend devDependencies (no longer
  needed since WASM is served by the buttplug nginx container)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 packages/frontend/package.json                 |  3 +--
 .../routes/admin/articles/[id]/+page.svelte    | 18 ++++++++++--------
 .../src/routes/admin/articles/new/+page.svelte | 18 ++++++++++--------
 .../src/routes/admin/users/[id]/+page.svelte   |  9 +++++----
 .../src/routes/admin/videos/new/+page.svelte   |  9 +++++----
 pnpm-lock.yaml                                 |  3 ---
 6 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index ce98662..b4e8002 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -39,8 +39,7 @@
     "tailwindcss": "^4.2.1",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.3",
-    "vite": "^7.3.1",
-    "vite-plugin-wasm": "3.5.0"
+    "vite": "^7.3.1"
   },
   "dependencies": {
     "@sexy.pivoine.art/types": "workspace:*",
diff --git a/packages/frontend/src/routes/admin/articles/[id]/+page.svelte b/packages/frontend/src/routes/admin/articles/[id]/+page.svelte
index 56c6ac5..eeecd59 100644
--- a/packages/frontend/src/routes/admin/articles/[id]/+page.svelte
+++ b/packages/frontend/src/routes/admin/articles/[id]/+page.svelte
@@ -123,15 +123,17 @@
       <div class="flex items-center justify-between">
         <Label>{$_("admin.article_form.content")}</Label>
         <div class="flex rounded-lg border border-border/40 overflow-hidden text-xs sm:hidden">
-          <button
-            type="button"
-            class={`px-3 py-1 transition-colors ${editorTab === "write" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
-            onclick={() => (editorTab = "write")}>{$_("admin.common.write")}</button
+          <Button
+            variant="ghost"
+            size="sm"
+            class={`px-3 py-1 h-auto rounded-none transition-colors ${editorTab === "write" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
+            onclick={() => (editorTab = "write")}>{$_("admin.common.write")}</Button
           >
-          <button
-            type="button"
-            class={`px-3 py-1 transition-colors ${editorTab === "preview" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
-            onclick={() => (editorTab = "preview")}>{$_("admin.common.preview")}</button
+          <Button
+            variant="ghost"
+            size="sm"
+            class={`px-3 py-1 h-auto rounded-none transition-colors ${editorTab === "preview" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
+            onclick={() => (editorTab = "preview")}>{$_("admin.common.preview")}</Button
           >
         </div>
       </div>
diff --git a/packages/frontend/src/routes/admin/articles/new/+page.svelte b/packages/frontend/src/routes/admin/articles/new/+page.svelte
index 3097075..0478cb4 100644
--- a/packages/frontend/src/routes/admin/articles/new/+page.svelte
+++ b/packages/frontend/src/routes/admin/articles/new/+page.svelte
@@ -121,15 +121,17 @@
       <div class="flex items-center justify-between">
         <Label>{$_("admin.article_form.content")}</Label>
         <div class="flex rounded-lg border border-border/40 overflow-hidden text-xs sm:hidden">
-          <button
-            type="button"
-            class={`px-3 py-1 transition-colors ${editorTab === "write" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
-            onclick={() => (editorTab = "write")}>{$_("admin.common.write")}</button
+          <Button
+            variant="ghost"
+            size="sm"
+            class={`px-3 py-1 h-auto rounded-none transition-colors ${editorTab === "write" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
+            onclick={() => (editorTab = "write")}>{$_("admin.common.write")}</Button
           >
-          <button
-            type="button"
-            class={`px-3 py-1 transition-colors ${editorTab === "preview" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
-            onclick={() => (editorTab = "preview")}>{$_("admin.common.preview")}</button
+          <Button
+            variant="ghost"
+            size="sm"
+            class={`px-3 py-1 h-auto rounded-none transition-colors ${editorTab === "preview" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
+            onclick={() => (editorTab = "preview")}>{$_("admin.common.preview")}</Button
           >
         </div>
       </div>
diff --git a/packages/frontend/src/routes/admin/users/[id]/+page.svelte b/packages/frontend/src/routes/admin/users/[id]/+page.svelte
index ec6a329..ff85ac7 100644
--- a/packages/frontend/src/routes/admin/users/[id]/+page.svelte
+++ b/packages/frontend/src/routes/admin/users/[id]/+page.svelte
@@ -236,13 +236,14 @@
                 alt=""
                 class="w-full aspect-square object-cover rounded"
               />
-              <button
-                class="absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity rounded"
+              <Button
+                variant="ghost"
+                class="absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity rounded h-auto p-0"
                 onclick={() => removePhoto(photo.id)}
-                type="button"
+                aria-label="Remove photo"
               >
                 <span class="icon-[ri--delete-bin-line] h-5 w-5 text-white"></span>
-              </button>
+              </Button>
             </div>
           {/each}
         </div>
diff --git a/packages/frontend/src/routes/admin/videos/new/+page.svelte b/packages/frontend/src/routes/admin/videos/new/+page.svelte
index 652ebd3..3d20bf0 100644
--- a/packages/frontend/src/routes/admin/videos/new/+page.svelte
+++ b/packages/frontend/src/routes/admin/videos/new/+page.svelte
@@ -180,9 +180,10 @@
         <Label>Models</Label>
         <div class="flex flex-wrap gap-2">
           {#each data.models as model (model.id)}
-            <button
-              type="button"
-              class={`px-3 py-1.5 rounded-full text-sm border transition-colors ${
+            <Button
+              variant="ghost"
+              size="sm"
+              class={`px-3 py-1.5 h-auto rounded-full text-sm border transition-colors ${
                 selectedModelIds.includes(model.id)
                   ? "border-primary bg-primary/10 text-primary"
                   : "border-border/40 text-muted-foreground hover:border-primary/40"
@@ -190,7 +191,7 @@
               onclick={() => toggleModel(model.id)}
             >
               {model.artist_name || model.id}
-            </button>
+            </Button>
           {/each}
         </div>
       </div>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1c53906..6807236 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -257,9 +257,6 @@ importers:
       vite:
         specifier: ^7.3.1
         version: 7.3.1(@types/node@25.3.3)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)
-      vite-plugin-wasm:
-        specifier: 3.5.0
-        version: 3.5.0(vite@7.3.1(@types/node@25.3.3)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0))
 
   packages/types:
     devDependencies: