wind-explorer/friendolls-desktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dolls list UI

Browse Source
This commit is contained in:
Adam C
2025-12-21 16:00:27 +08:00
parent e1de05de7a
commit e730751433
5 changed files with 104 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/assets/icons/backpack.svelte Normal file
View File

@@ -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
>
Side by Side

After

Width:  |  Height:  |  Size: 502 B

19
src/assets/icons/paw-print.svelte Normal file
View File

@@ -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
>
Side by Side

After

Width:  |  Height:  |  Size: 485 B

2
src/routes/app-menu/+page.svelte
View File

@@ -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">

2
src/routes/app-menu/tabs/DollPreview.svelte
View File

@@ -152,7 +152,7 @@
});
</script>
<div class="scale-150 p-2">
<div class="scale-200 p-4">
<div class="size-8">
{#if error}
<div

135
src/routes/app-menu/tabs/your-dolls.svelte
View File

@@ -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}