From cf5503c0a2bc95f124c5ece0f3c39c3c5a20ae7c Mon Sep 17 00:00:00 2001
From: Priyanshubhartistm <bhartipriyanshustm@gmail.com>
Date: Sun, 12 Apr 2026 19:31:35 +0530
Subject: [PATCH] feat(spaces): use drag-handle icon with smoother reorder
 easing

---
 src/assets/icons/drag-handle.svg |  8 ++++++++
 src/routes/spaces/+page.svelte   | 22 ++++++++++++----------
 2 files changed, 20 insertions(+), 10 deletions(-)
 create mode 100644 src/assets/icons/drag-handle.svg

diff --git a/src/assets/icons/drag-handle.svg b/src/assets/icons/drag-handle.svg
new file mode 100644
index 00000000..6e3ab859
--- /dev/null
+++ b/src/assets/icons/drag-handle.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="9" cy="6" r="1.5" fill="#000000"/>
+<circle cx="15" cy="6" r="1.5" fill="#000000"/>
+<circle cx="9" cy="12" r="1.5" fill="#000000"/>
+<circle cx="15" cy="12" r="1.5" fill="#000000"/>
+<circle cx="9" cy="18" r="1.5" fill="#000000"/>
+<circle cx="15" cy="18" r="1.5" fill="#000000"/>
+</svg>
diff --git a/src/routes/spaces/+page.svelte b/src/routes/spaces/+page.svelte
index 925b57c4..87dc3a11 100644
--- a/src/routes/spaces/+page.svelte
+++ b/src/routes/spaces/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import {onMount, tick} from "svelte"
   import {flip} from "svelte/animate"
+  import {cubicOut} from "svelte/easing"
   import {derived as _derived} from "svelte/store"
   import {dec, insertAt, removeAt, sleep} from "@welshman/lib"
   import type {RelayProfile} from "@welshman/util"
@@ -8,7 +9,7 @@
   import {relays, createSearch} from "@welshman/app"
   import {createScroller} from "@lib/html"
   import {fly} from "@lib/transition"
-  import MenuDots from "@assets/icons/menu-dots-2.svg?dataurl"
+  import DragHandle from "@assets/icons/drag-handle.svg?dataurl"
   import Widget from "@assets/icons/widget-4.svg?dataurl"
   import AddCircle from "@assets/icons/add-circle.svg?dataurl"
   import Magnifier from "@assets/icons/magnifier.svg?dataurl"
@@ -249,23 +250,24 @@
             <Divider>Your spaces</Divider>
             {#each filteredUserUrls as url (url)}
               <div
-                animate:flip={{duration: 250}}
-                class="group flex w-full items-center gap-2"
-                class:opacity-60={draggedUrl === url}
+                animate:flip={{duration: 300, easing: cubicOut}}
+                class="transition-opacity duration-200 {draggedUrl === url ? 'opacity-50' : ''}"
                 draggable="true"
                 role="listitem"
                 ondragstart={e => onDragStart(e, url)}
                 ondragover={e => onDragOver(e, url)}
                 ondrop={e => onDrop(e, url)}
                 ondragend={onDragEnd}>
-                <div
-                  class="flex cursor-grab p-1 opacity-100 sm:opacity-0 sm:transition-opacity sm:hover:text-base-content sm:group-hover:opacity-100">
-                  <Icon icon={MenuDots} class="text-base-content/50" />
-                </div>
                 <Button
-                  class="card2 bg-alt shadow-md transition-all hover:shadow-lg hover:dark:brightness-[1.1] w-full relative min-w-0"
+                  class="group card2 bg-alt shadow-md transition-all hover:shadow-lg hover:dark:brightness-[1.1] w-full relative min-w-0"
                   onclick={() => openSpace(url)}>
-                  <RelaySummary hideFavorites {url} />
+                  <div class="flex w-full items-start gap-2">
+                    <div
+                      class="mt-4 flex cursor-grab p-1 text-base-content/30 transition-colors group-hover:text-base-content/60">
+                      <Icon icon={DragHandle} />
+                    </div>
+                    <RelaySummary hideFavorites {url} />
+                  </div>
                   {#if $notifications.has(makeSpacePath(url))}
                     <div class="absolute right-3 top-3 h-2 w-2 rounded-full bg-primary"></div>
                   {/if}