From d3c1f2a35c8f317d825534bc7534d4990cef4e71 Mon Sep 17 00:00:00 2001
From: Priyanshubhartistm <bhartipriyanshustm@gmail.com>
Date: Wed, 8 Apr 2026 20:52:39 +0530
Subject: [PATCH 1/6] feat(spaces): smooth reorder animation

---
 src/routes/spaces/+page.svelte | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/routes/spaces/+page.svelte b/src/routes/spaces/+page.svelte
index 95ddd8c7..1fcfee3c 100644
--- a/src/routes/spaces/+page.svelte
+++ b/src/routes/spaces/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import {onMount, tick} from "svelte"
+  import {flip} from "svelte/animate"
   import {derived as _derived} from "svelte/store"
   import {dec, insertAt, removeAt, sleep} from "@welshman/lib"
   import type {RelayProfile} from "@welshman/util"
@@ -247,6 +248,7 @@
             <Divider>Your spaces</Divider>
             {#each filteredUserUrls as url (url)}
               <div
+                animate:flip={{duration: 250}}
                 class:opacity-60={draggedUrl === url}
                 draggable="true"
                 role="listitem"
-- 
2.52.0


From c4befaf44e27440b4278eb25de7f6f75180cc4e9 Mon Sep 17 00:00:00 2001
From: Priyanshubhartistm <bhartipriyanshustm@gmail.com>
Date: Wed, 8 Apr 2026 20:53:49 +0530
Subject: [PATCH 2/6] feat(spaces): add drag handle indicator

---
 src/routes/spaces/+page.svelte | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/routes/spaces/+page.svelte b/src/routes/spaces/+page.svelte
index 1fcfee3c..e764c8ce 100644
--- a/src/routes/spaces/+page.svelte
+++ b/src/routes/spaces/+page.svelte
@@ -8,6 +8,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 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"
@@ -256,6 +257,10 @@
                 ondragover={e => onDragOver(e, url)}
                 ondrop={e => onDrop(e, url)}
                 ondragend={onDragEnd}>
+                <div
+                  class="hidden cursor-grab p-1 opacity-0 transition-opacity hover:text-base-content group-hover:opacity-100 sm:flex">
+                  <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"
                   onclick={() => openSpace(url)}>
-- 
2.52.0


From 0aad28d5b0e33b1a63929f91267564116a19fe64 Mon Sep 17 00:00:00 2001
From: Priyanshubhartistm <bhartipriyanshustm@gmail.com>
Date: Wed, 8 Apr 2026 20:54:50 +0530
Subject: [PATCH 3/6] style(spaces): polish handle layout across devices

---
 src/routes/spaces/+page.svelte | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/routes/spaces/+page.svelte b/src/routes/spaces/+page.svelte
index e764c8ce..925b57c4 100644
--- a/src/routes/spaces/+page.svelte
+++ b/src/routes/spaces/+page.svelte
@@ -250,6 +250,7 @@
             {#each filteredUserUrls as url (url)}
               <div
                 animate:flip={{duration: 250}}
+                class="group flex w-full items-center gap-2"
                 class:opacity-60={draggedUrl === url}
                 draggable="true"
                 role="listitem"
@@ -258,11 +259,11 @@
                 ondrop={e => onDrop(e, url)}
                 ondragend={onDragEnd}>
                 <div
-                  class="hidden cursor-grab p-1 opacity-0 transition-opacity hover:text-base-content group-hover:opacity-100 sm:flex">
+                  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"
+                  class="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} />
                   {#if $notifications.has(makeSpacePath(url))}
-- 
2.52.0


From 87f9d2bbaeb89c0a65de91c9bd42f019b90ebb06 Mon Sep 17 00:00:00 2001
From: Priyanshubhartistm <bhartipriyanshustm@gmail.com>
Date: Sun, 12 Apr 2026 19:31:35 +0530
Subject: [PATCH 4/6] 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}
-- 
2.52.0


From 3c916e8d07f024b1c20c7b2f000084fb4afac6c6 Mon Sep 17 00:00:00 2001
From: Priyanshu Bharti <bhartipriyanshustm@gmail.com>
Date: Mon, 13 Apr 2026 22:31:25 +0000
Subject: [PATCH 5/6] Update src/routes/spaces/+page.svelte

---
 src/routes/spaces/+page.svelte | 31 ++++++++++++++++++++++++++-----
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/routes/spaces/+page.svelte b/src/routes/spaces/+page.svelte
index 87dc3a11..2a55ec5b 100644
--- a/src/routes/spaces/+page.svelte
+++ b/src/routes/spaces/+page.svelte
@@ -101,6 +101,8 @@
   const onDragStart = (e: DragEvent, url: string) => {
     draggedUrl = url
     dragStartOrder = [...orderedSpaceUrls]
+    lastDragTarget = undefined
+    didDrop = false
 
     if (e.dataTransfer) {
       e.dataTransfer.effectAllowed = "move"
@@ -108,15 +110,25 @@
     }
   }
 
-  const onDragOver = (e: DragEvent, targetUrl: string) => {
+  const onDragOver = (e: DragEvent) => {
     e.preventDefault()
+  }
+
+  const onDragEnter = (e: DragEvent, targetUrl: string) => {
+    e.preventDefault()
+
+    if (lastDragTarget === targetUrl) return
+
+    lastDragTarget = targetUrl
     reorderSpaceUrls(targetUrl)
   }
 
   const onDrop = (e: DragEvent, targetUrl: string) => {
     e.preventDefault()
     reorderSpaceUrls(targetUrl)
+    didDrop = true
     draggedUrl = undefined
+    lastDragTarget = undefined
 
     if (dragStartOrder && !isSameOrder(dragStartOrder, orderedSpaceUrls)) {
       void setSpaceMembershipOrder(orderedSpaceUrls).catch(console.error)
@@ -126,8 +138,14 @@
   }
 
   const onDragEnd = () => {
+    if (!didDrop && dragStartOrder && !isSameOrder(dragStartOrder, orderedSpaceUrls)) {
+      orderedSpaceUrls = dragStartOrder
+    }
+
     draggedUrl = undefined
     dragStartOrder = undefined
+    lastDragTarget = undefined
+    didDrop = false
   }
 
   $effect(() => {
@@ -146,6 +164,8 @@
   let orderedSpaceUrls = $state<string[]>([])
   let draggedUrl = $state<string | undefined>()
   let dragStartOrder = $state<string[] | undefined>()
+  let lastDragTarget = $state<string | undefined>()
+  let didDrop = $state(false)
 
   const openSearch = () => {
     showSearch = true
@@ -183,8 +203,8 @@
   })
 </script>
 
-<Page>
-  <PageBar>
+<Page class="cw-full">
+  <PageBar class="cw-full">
     {#if showSearch}
       <label class="input input-bordered input-sm flex flex-1 items-center gap-2" in:fly>
         <Icon icon={Magnifier} />
@@ -221,7 +241,7 @@
       </div>
     {/if}
   </PageBar>
-  <PageContent class="flex flex-col gap-2 p-2 pt-4">
+  <PageContent class="cw-full flex flex-col gap-2 p-2 pt-4">
     <div class="flex flex-col gap-2" bind:this={element}>
       {#each PLATFORM_RELAYS as url (url)}
         <Button
@@ -255,7 +275,8 @@
                 draggable="true"
                 role="listitem"
                 ondragstart={e => onDragStart(e, url)}
-                ondragover={e => onDragOver(e, url)}
+                ondragover={onDragOver}
+                ondragenter={e => onDragEnter(e, url)}
                 ondrop={e => onDrop(e, url)}
                 ondragend={onDragEnd}>
                 <Button
-- 
2.52.0


From 5ae7def6fb84501c3bd40783281761297233d5ed Mon Sep 17 00:00:00 2001
From: Priyanshu Bharti <bhartipriyanshustm@gmail.com>
Date: Mon, 13 Apr 2026 22:37:11 +0000
Subject: [PATCH 6/6] Update src/routes/spaces/+page.svelte

---
 src/routes/spaces/+page.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/routes/spaces/+page.svelte b/src/routes/spaces/+page.svelte
index 2a55ec5b..3f91c385 100644
--- a/src/routes/spaces/+page.svelte
+++ b/src/routes/spaces/+page.svelte
@@ -203,8 +203,8 @@
   })
 </script>
 
-<Page class="cw-full">
-  <PageBar class="cw-full">
+<Page>
+  <PageBar>
     {#if showSearch}
       <label class="input input-bordered input-sm flex flex-1 items-center gap-2" in:fly>
         <Icon icon={Magnifier} />
@@ -241,7 +241,7 @@
       </div>
     {/if}
   </PageBar>
-  <PageContent class="cw-full flex flex-col gap-2 p-2 pt-4">
+  <PageContent class="flex flex-col gap-2 p-2 pt-4">
     <div class="flex flex-col gap-2" bind:this={element}>
       {#each PLATFORM_RELAYS as url (url)}
         <Button
-- 
2.52.0