From e730751433d37877a47a9b1a942d032752365d6c Mon Sep 17 00:00:00 2001
From: Wind-Explorer <windexplorer@outlook.com>
Date: Sun, 21 Dec 2025 16:00:27 +0800
Subject: [PATCH] dolls list UI

---
 src/assets/icons/backpack.svelte            |  17 +++
 src/assets/icons/paw-print.svelte           |  19 +++
 src/routes/app-menu/+page.svelte            |   2 +-
 src/routes/app-menu/tabs/DollPreview.svelte |   2 +-
 src/routes/app-menu/tabs/your-dolls.svelte  | 135 ++++++++++----------
 5 files changed, 104 insertions(+), 71 deletions(-)
 create mode 100644 src/assets/icons/backpack.svelte
 create mode 100644 src/assets/icons/paw-print.svelte

diff --git a/src/assets/icons/backpack.svelte b/src/assets/icons/backpack.svelte
new file mode 100644
index 0000000..93b5673
--- /dev/null
+++ b/src/assets/icons/backpack.svelte
@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class="lucide lucide-backpack-icon lucide-backpack"
+  ><path
+    d="M4 10a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z"
+  /><path d="M8 10h8" /><path d="M8 18h8" /><path
+    d="M8 22v-6a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v6"
+  /><path d="M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2" /></svg
+>
diff --git a/src/assets/icons/paw-print.svelte b/src/assets/icons/paw-print.svelte
new file mode 100644
index 0000000..fb3836d
--- /dev/null
+++ b/src/assets/icons/paw-print.svelte
@@ -0,0 +1,19 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class="lucide lucide-paw-print-icon lucide-paw-print"
+  ><circle cx="11" cy="4" r="2" /><circle cx="18" cy="8" r="2" /><circle
+    cx="20"
+    cy="16"
+    r="2"
+  /><path
+    d="M9 10a5 5 0 0 1 5 5v3.5a3.5 3.5 0 0 1-6.84 1.045Q6.52 17.48 4.46 16.84A3.5 3.5 0 0 1 5.5 10Z"
+  /></svg
+>
diff --git a/src/routes/app-menu/+page.svelte b/src/routes/app-menu/+page.svelte
index 8c387c8..b8f7c06 100644
--- a/src/routes/app-menu/+page.svelte
+++ b/src/routes/app-menu/+page.svelte
@@ -15,7 +15,7 @@
           type="radio"
           name="app_menu_tabs"
           class="tab"
-          aria-label="Your Dolls"
+          aria-label="Your Nekos"
           checked
         />
         <div class="tab-content bg-base-100 border-base-300 p-4">
diff --git a/src/routes/app-menu/tabs/DollPreview.svelte b/src/routes/app-menu/tabs/DollPreview.svelte
index 2c91d57..71e4e8f 100644
--- a/src/routes/app-menu/tabs/DollPreview.svelte
+++ b/src/routes/app-menu/tabs/DollPreview.svelte
@@ -152,7 +152,7 @@
   });
 </script>
 
-<div class="scale-150 p-2">
+<div class="scale-200 p-4">
   <div class="size-8">
     {#if error}
       <div
diff --git a/src/routes/app-menu/tabs/your-dolls.svelte b/src/routes/app-menu/tabs/your-dolls.svelte
index d033ff1..53fcaf2 100644
--- a/src/routes/app-menu/tabs/your-dolls.svelte
+++ b/src/routes/app-menu/tabs/your-dolls.svelte
@@ -7,6 +7,8 @@
   import type { CreateDollDto } from "../../../types/bindings/CreateDollDto";
   import type { UpdateDollDto } from "../../../types/bindings/UpdateDollDto";
   import DollPreview from "./DollPreview.svelte";
+  import PawPrint from "../../../assets/icons/paw-print.svelte";
+  import Backpack from "../../../assets/icons/backpack.svelte";
 
   let dolls: DollDto[] = [];
   let user: UserProfile | null = null;
@@ -139,11 +141,11 @@
   }
 </script>
 
-<div class="dolls-page flex flex-col gap-4 p-4">
+<div class="dolls-page flex flex-col gap-4">
   <div class="flex justify-between items-center">
-    <h2 class="text-xl font-bold">Your Dolls</h2>
+    <h2 class="text-lg font-bold">Your Nekos</h2>
     <button class="btn btn-primary btn-sm" on:click={openCreateModal}>
-      Create Doll
+      Add a Neko
     </button>
   </div>
 
@@ -156,77 +158,72 @@
     </div>
   {/if}
 
-  {#if loading}
-    <div class="flex justify-center p-4">
-      <span class="loading loading-spinner loading-md"></span>
-    </div>
-  {:else if dolls.length === 0}
-    <div class="text-center text-base-content/70 py-8">
-      <p>No dolls found. Create your first doll!</p>
-    </div>
-  {:else}
-    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
-      {#each dolls as doll (doll.id)}
-        <div class="card border border-base-200 bg-base-100 relative">
-          {#if user?.activeDollId === doll.id}
-            <div
-              class="absolute top-2 right-2 badge badge-success badge-sm gap-1 z-10"
-            >
-              Active
-            </div>
-          {/if}
-          <div class="card-body">
-            <h3 class="card-title text-base">{doll.name}</h3>
-            <div class="flex justify-center mb-2">
-              <DollPreview
-                bodyColor={doll.configuration.colorScheme.body}
-                outlineColor={doll.configuration.colorScheme.outline}
-              />
-            </div>
-            <div class="flex gap-2 text-sm text-base-content/70">
-              <div class="flex items-center gap-1">
-                <div
-                  class="w-4 h-4 rounded border border-base-content/20"
-                  style="background-color: {doll.configuration.colorScheme
-                    .body};"
-                ></div>
-                <span>Body</span>
-              </div>
-              <div class="flex items-center gap-1">
-                <div
-                  class="w-4 h-4 rounded border border-base-content/20"
-                  style="background-color: {doll.configuration.colorScheme
-                    .outline};"
-                ></div>
-                <span>Outline</span>
-              </div>
-            </div>
-            <div class="card-actions justify-end mt-2">
-              {#if user?.activeDollId === doll.id}
-                <button
-                  class="btn btn-xs btn-ghost text-warning"
-                  on:click={handleRemoveActiveDoll}>Deactivate</button
-                >
-              {:else}
-                <button
-                  class="btn btn-xs btn-ghost text-success"
-                  on:click={() => handleSetActiveDoll(doll.id)}>Activate</button
-                >
-              {/if}
+  <div class="flex flex-col relative">
+    {#if loading}
+      <progress class="progress w-full h-px absolute inset-0 z-10"></progress>
+    {/if}
+
+    {#if dolls.length === 0}
+      <div class="text-center text-base-content/70 py-8">
+        <p>No dolls found. Create your first doll!</p>
+      </div>
+    {:else}
+      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
+        {#each dolls as doll (doll.id)}
+          <div
+            class="card border border-base-200 bg-linear-to-b from-base-100 to-base-300 relative"
+          >
+            <div class="flex flex-col w-full">
               <button
-                class="btn btn-xs btn-ghost"
-                on:click={() => openEditModal(doll)}>Edit</button
+                on:click={() => openEditModal(doll)}
+                class="flex flex-col w-full text-center py-6 gap-2 *:mx-auto hover:opacity-70 hover:cursor-pointer"
               >
-              <button
-                class="btn btn-xs btn-ghost text-error"
-                on:click={() => handleDeleteDoll(doll.id)}>Delete</button
+                <div class="flex justify-center">
+                  <DollPreview
+                    bodyColor={doll.configuration.colorScheme.body}
+                    outlineColor={doll.configuration.colorScheme.outline}
+                  />
+                </div>
+                <p
+                  style:background-color={doll.configuration.colorScheme.body}
+                  style:color={doll.configuration.colorScheme.outline}
+                  class="badge border-none text-xs w-max mx-auto"
+                >
+                  {doll.name}
+                </p>
+              </button>
+
+              <div class="*:btn *:btn-block *:rounded-t-none">
+                {#if user?.activeDollId === doll.id}
+                  <button
+                    class="btn-primary text-accent flex-1"
+                    on:click={handleRemoveActiveDoll}
+                  >
+                    <div class="scale-60"><Backpack /></div>
+                    Recall
+                  </button>
+                {:else}
+                  <button
+                    class="flex-1 text-primary"
+                    on:click={() => handleSetActiveDoll(doll.id)}
+                  >
+                    <div class="scale-60"><PawPrint /></div>
+                    Deploy
+                  </button>
+                {/if}
+              </div>
+              <!-- <button
+                class=" text-error"
+                on:click={() => handleDeleteDoll(doll.id)}
               >
+                <div class="scale-60"><Trash /></div>
+              </button> -->
             </div>
           </div>
-        </div>
-      {/each}
-    </div>
-  {/if}
+        {/each}
+      </div>
+    {/if}
+  </div>
 
   <!-- Create Modal -->
   {#if isCreateModalOpen}