cosmetic improvements for shuffle UI

pukmajster · Nov 3, 2024 · 4525a55 · 4525a55
1 parent 604ed62
commit 4525a55
Showing 1 changed file with 81 additions and 74 deletions.
diff --git a/src/renderer/src/components/library/LibraryShuffles.svelte b/src/renderer/src/components/library/LibraryShuffles.svelte
@@ -81,91 +81,98 @@
   const shuffles = liveQuery(() => db.shuffles.toArray())
 </script>
 
-<div class="w-[30vw] max-w-[400px] h-full p-4 bg-surface-800">
-  <div class="flex justify-between mb-4">
-    <h1 class="text-2xl">Shuffles</h1>
+<div class="w-[30vw] max-w-[600px] min-h-[100%] flex flex-col bg-surface-800">
+  <div
+    class="flex sticky top-0 justify-between items-center px-4 py-3 bg-surface-800/80 backdrop-blur-lg z-10"
+  >
+    <h1 class="text-xl">Shuffles</h1>
     <button on:click={promptCreateShuffle} class="btn btn-sm variant-filled-surface"
       >Create shuffle</button
     >
   </div>
 
-  <Accordion>
-    {#each $shuffles?.filter((sh) => !sh.autoGeneratedForProfileId) ?? [] as shuffle}
-      {@const enabled = $activeProfileStore.enabledShuffleIds.includes(shuffle.id)}
-      <AccordionItem>
-        <svelte:fragment slot="lead">
-          <Dices
-            size={16}
-            class={classNames({
-              'text-emerald-600': enabled,
-              'text-red-600': !enabled
-            })}
-          />
-        </svelte:fragment>
-        <svelte:fragment slot="summary">{shuffle?.label ?? shuffle?.id}</svelte:fragment>
-        <svelte:fragment slot="content">
-          <div class="flex justify-between items-center gap-2">
-            <SlideToggle
-              size="sm"
-              active="bg-emerald-500"
-              name=""
-              checked={enabled}
-              on:change={() => toggleShuffleEnabled(shuffle.id)}
-            >
-              <!-- <span class="text-sm"> {shuffle.enabled ? 'Enabled' : 'Disabled'}</span> -->
-            </SlideToggle>
-
-            <div class="flex items-center gap-2">
-              <button
-                on:click={() => promptShuffleRename(shuffle.id, shuffle.label)}
-                class="btn btn-sm variant-filled-surface"
-              >
-                Rename
-              </button>
+  <div class="flex-1 px-3 pb-3">
+    <Accordion>
+      {#each $shuffles?.filter((sh) => !sh.autoGeneratedForProfileId) ?? [] as shuffle}
+        {@const enabled = $activeProfileStore.enabledShuffleIds.includes(shuffle.id)}
+        <AccordionItem regionPanel="bg-surface-600/60 !rounded-2xl">
+          <svelte:fragment slot="lead">
+            <Dices
+              size={16}
+              class={classNames({
+                'text-emerald-600': enabled,
+                'text-red-600': !enabled
+              })}
+            />
+          </svelte:fragment>
+          <svelte:fragment slot="summary">{shuffle?.label ?? shuffle?.id}</svelte:fragment>
+          <svelte:fragment slot="content">
+            <div class="py-1">
+              <div class="mb-2 flex justify-between items-center gap-2">
+                <SlideToggle
+                  size="sm"
+                  active="bg-emerald-500"
+                  name=""
+                  background="bg-surface-400/40"
+                  checked={enabled}
+                  on:change={() => toggleShuffleEnabled(shuffle.id)}
+                >
+                  <!-- <span class="text-sm"> {shuffle.enabled ? 'Enabled' : 'Disabled'}</span> -->
+                </SlideToggle>
 
-              <button
-                on:click={() => promptShuffleDelete(shuffle.id, shuffle.label)}
-                class="btn btn-sm variant-filled-surface"
-              >
-                Delete
-              </button>
-            </div>
-          </div>
+                <div class="flex items-center gap-2">
+                  <button
+                    on:click={() => promptShuffleRename(shuffle.id, shuffle.label)}
+                    class="btn btn-sm variant-filled-surface"
+                  >
+                    Rename
+                  </button>
 
-          <div
-            class="flex flex-col rounded-md gap-2"
-            on:dragover={(ev) => {
-              ev.preventDefault()
-            }}
-            on:drop={(e) => drop(e, shuffle.id)}
-            class:dropActive={$isDraggingAddon}
-          >
-            {#if shuffle.shuffledAddonIds.length == 0}
-              <div class="text-left text-sm text-gray-400 p-2">
-                Drag and drop addons here to shuffle them
+                  <button
+                    on:click={() => promptShuffleDelete(shuffle.id, shuffle.label)}
+                    class="btn btn-sm variant-filled-surface"
+                  >
+                    Delete
+                  </button>
+                </div>
               </div>
-            {/if}
 
-            {#each shuffle.shuffledAddonIds as addonId}
-              <div class="flex items-center justify-between">
-                <AddonCard
-                  mode="in-shuffle-list"
-                  addon={$currentGameManifest.addons.find((addon) => addon.id == addonId)}
-                />
+              <div
+                class="flex flex-col rounded-md gap-2"
+                on:dragover={(ev) => {
+                  ev.preventDefault()
+                }}
+                on:drop={(e) => drop(e, shuffle.id)}
+                class:dropActive={$isDraggingAddon}
+              >
+                {#if shuffle.shuffledAddonIds.length == 0}
+                  <div class="text-left text-sm text-gray-400 p-2">
+                    Drag and drop addons here to shuffle them
+                  </div>
+                {/if}
 
-                <button
-                  class="btn w-full max-w-[32px] btn-icon btn-sm variant-filled-surface"
-                  on:click={() => toggleAddonIdInShuffle(shuffle.id, addonId)}
-                >
-                  <TrashIcon size={16} />
-                </button>
+                {#each shuffle.shuffledAddonIds as addonId}
+                  <div class="flex items-center justify-between">
+                    <AddonCard
+                      mode="in-shuffle-list"
+                      addon={$currentGameManifest.addons.find((addon) => addon.id == addonId)}
+                    />
+
+                    <button
+                      class="btn w-full max-w-[32px] btn-icon btn-sm variant-filled-surface"
+                      on:click={() => toggleAddonIdInShuffle(shuffle.id, addonId)}
+                    >
+                      <TrashIcon size={16} />
+                    </button>
+                  </div>
+                {/each}
               </div>
-            {/each}
-          </div>
-        </svelte:fragment>
-      </AccordionItem>
-    {/each}
-  </Accordion>
+            </div>
+          </svelte:fragment>
+        </AccordionItem>
+      {/each}
+    </Accordion>
+  </div>
 </div>
 
 <style lang="postcss">