coracle/flotilla
1
6
Fork 23
Code Issues 42 Pull Requests 2 Actions Packages Projects 5 Releases Wiki Activity

Make space reordering discoverable with smoother drag animation #171

Merged
hodlbod merged 6 commits from priyanshu_bharti/flotilla:138-space-reorder-discoverable into dev 2026-04-13 22:38:02 +00:00
Conversation 7 Commits 6 Files Changed 2
+44 -5
priyanshu_bharti commented 2026-04-08 15:33:16 +00:00
Contributor
Copy Link
Copy Source

Summary

This PR improves the reordering experience on the Spaces page by making drag behavior more discoverable and reducing choppy movement during reorder.

What changed

Added a drag-handle indicator to space items so users can clearly see that items are draggable.
Added flip animation to smooth out item movement while reordering.
Polished handle visibility behavior across desktop and mobile layouts for a cleaner UX.

Why

Addresses issue #138 (from usability test #133):
Show a drag handle on the spaces page.
Make the reordering animation less choppy.

Validation

Manually tested reorder behavior on desktop and mobile layout.
Verified local checks pass:
pnpm check
pnpm lint

Before/After effect

Before: drag affordance was not obvious and movement felt abrupt.

After: drag affordance is visible and list reordering feels smoother.

## Summary This PR improves the reordering experience on the Spaces page by making drag behavior more discoverable and reducing choppy movement during reorder. ## What changed Added a drag-handle indicator to space items so users can clearly see that items are draggable. Added flip animation to smooth out item movement while reordering. Polished handle visibility behavior across desktop and mobile layouts for a cleaner UX. ## Why Addresses issue #138 (from usability test #133): Show a drag handle on the spaces page. Make the reordering animation less choppy. ## Validation Manually tested reorder behavior on desktop and mobile layout. Verified local checks pass: pnpm check pnpm lint ## Before/After effect Before: drag affordance was not obvious and movement felt abrupt. After: drag affordance is visible and list reordering feels smoother.
hodlbod commented 2026-04-08 16:40:04 +00:00
Owner
Copy Link
Copy Source

This doesn't follow the mockup created in the issue, could you add the handle in the correct location? Also, see the video below — the drag animation can be kind of jittery.

This doesn't follow the mockup created in the issue, could you add the handle in the correct location? Also, see the video below — the drag animation can be kind of jittery.
Screen Recording 2026-04-08 at 9.39.22 AM.mov
8.2 MiB
👍 1
priyanshu_bharti commented 2026-04-10 23:50:10 +00:00
Author
Contributor
Copy Link
Copy Source

hii @hodlbod , could you please review it when you have time.
if its looks good then i'll be updated this
Thanks !

hii @hodlbod , could you please review it when you have time. if its looks good then i'll be updated this Thanks !
flotilla-record.mp4
13 MiB
hodlbod commented 2026-04-11 17:24:57 +00:00
Owner
Copy Link
Copy Source

The demo video looks great, but the PR still has the menu-dots icon instead of the drag handle.

The demo video looks great, but the PR still has the menu-dots icon instead of the drag handle.
👍 1
priyanshu_bharti commented 2026-04-12 14:09:46 +00:00
Author
Contributor
Copy Link
Copy Source

hii @hodlbod ,
I have fixed it now.

hii @hodlbod , I have fixed it now.
hodlbod commented 2026-04-13 20:53:13 +00:00
Owner
Copy Link
Copy Source

The handle looks good now, but the drag behavior is still pretty buggy for me, both in Brave (Chromium) and Zen (Firefox)

The handle looks good now, but the drag behavior is still pretty buggy for me, both in Brave (Chromium) and Zen (Firefox)
Screen Recording 2026-04-13 at 1.52.24 PM.mov
19 MiB
hodlbod reviewed 2026-04-13 22:34:26 +00:00
hodlbod left a comment
Owner
Copy Link
Copy Source

Looks good, just one cleanup

Looks good, just one cleanup
👍 1
src/routes/spaces/+page.svelte Outdated
@@ -183,2 +206,2 @@
<Page>
<PageBar>
<Page class="cw-full">
<PageBar class="cw-full">
hodlbod commented 2026-04-13 22:34:13 +00:00
Owner
Copy Link
Copy Source

This class name no longer exists

This class name no longer exists
priyanshu_bharti marked this conversation as resolved
hodlbod added 6 commits 2026-04-13 22:37:53 +00:00
feat(spaces): smooth reorder animation d3c1f2a35c
feat(spaces): add drag handle indicator c4befaf44e
style(spaces): polish handle layout across devices 0aad28d5b0
feat(spaces): use drag-handle icon with smoother reorder easing 87f9d2bbae
Update src/routes/spaces/+page.svelte 3c916e8d07
Update src/routes/spaces/+page.svelte 5ae7def6fb
hodlbod force-pushed 138-space-reorder-discoverable from 382d3119be to 5ae7def6fb 2026-04-13 22:37:53 +00:00 Compare
hodlbod merged commit 796f37d320 into dev 2026-04-13 22:38:02 +00:00
hodlbod deleted branch 138-space-reorder-discoverable 2026-04-13 22:38:03 +00:00
priyanshu_bharti commented 2026-04-13 22:38:18 +00:00
Author
Contributor
Copy Link
Copy Source

@hodlbod Done ! Please take a look at it now.

@hodlbod Done ! Please take a look at it now.
Sign in to join this conversation.
Reviewers
No Reviewers
hodlbod
Labels
Clear labels
design
For issues related to design work. Development should be done in another issue and refer back to this one.
 dev
Issues related to development work
 easy
Issues that can be executed on by new contributors
 idea
For issues that aren't yet actionable
 priority
For issues related to high priority features and bugs
 usability
Issues that have to be validated with real live human beings.
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
hodlbod (hodlbod) mplorentz (Matt Lorentz) sakshamjain (Saksham Jain) sondreb triesap userAdityaa (Aditya Chaudhary)
No Assignees
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: coracle/flotilla#171
Delete Branch "priyanshu_bharti/flotilla:138-space-reorder-discoverable"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?