Feat/host drag drop reorder#70
Merged
macnev2013 merged 5 commits intoJun 15, 2026
Merged
Conversation
Let users manually reorder host cards on the dashboard via drag and drop; the custom order is persisted in SQLite and survives app restarts. - DB: add saved_hosts.sort_order (migration 13→14) and a reorder_hosts command that bulk-updates sort_order in a transaction; list_hosts now orders by sort_order ASC, label ASC. - Frontend: wrap the host grid in @dnd-kit DndContext/SortableContext. The whole card is the drag surface (MouseSensor 5px / TouchSensor 250ms), so a plain click still connects. - Store: reorderHosts applies the new order optimistically and reverts on persist failure, with a Vitest unit test covering the action. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Let users reorder the group cards via drag and drop, alongside the existing within-grid host reordering. The custom order is persisted in SQLite and survives app restarts. - DB: add a reorder_groups command that bulk-updates host_groups.sort_order in a transaction. The sort_order column and the ordered list_groups query already existed, so no migration is needed. - Frontend: the Groups grid gets its own DndContext/SortableContext, separate from the per-host DnD layer so the two never interfere. The whole group card is the drag surface (shared MouseSensor 5px / TouchSensor 250ms sensors), so a plain click still filters by group. - Store: reorderGroups applies the new order optimistically and reverts on persist failure, with a Vitest unit test covering the action. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Add E2E coverage for drag-and-drop reordering and polish the interaction. - E2E: 63-host-reorder.spec.ts drags a host card and a group card to a new position via a real pointer gesture, confirms the order persisted to the backend, then relaunches the app and verifies the new order reloads from SQLite. New reorder.ts helper drives the gesture (W3C performActions) and reads DOM + persisted order; __e2eHostOrder / __e2eGroupOrder store hooks let the spec await the async DB write before relaunch. - UX: grab/grabbing cursors on host and group cards so the drag affordance is clear; a plain click still selects/connects (drag needs a 5px move first). - Add TODO markers above both DndContext blocks for future keyboard reordering. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Contributor
Author
|
Should cover #41 in general |
Extends the host/group reordering to the Cloud Storage section so every connection type on the hosts page can be manually ordered. Backend: migration 14→15 adds s3_connections.sort_order (idempotent), list_s3_connections orders by sort_order then label, and a transactional reorder_s3_connections DB method + Tauri command (rolls back on unknown id), mirroring reorder_hosts. Adds Rust tests for the persist and rollback paths. Frontend: SortableS3Card wraps S3Card, the Cloud Storage grid gets its own DndContext, and handleS3DragEnd applies an optimistic reorder (with rollback on failure) over the local connection state — reordering the visible subset and splicing it back into the full list so filtered-out connections keep their positions. Adds an __e2eS3Order hook and a 64-s3-reorder e2e spec verifying persistence across restart.
…ableCard, keyboard a11y, reorder tests - Move the S3 connection list into s3-store with a reorderConnections action (optimistic update + rollback), mirroring hosts-store/groups-store; drop the inline invoke/rollback from HostsDashboard - Replace SortableHostCard/GroupCard/S3Card with one generic SortableCard - Add KeyboardSensor + sortableKeyboardCoordinates for accessible reordering - Add reorder_hosts/reorder_groups DB tests and s3-store reorder tests
Owner
|
Pushed 1. S3 reorder now goes through the store (symmetry with hosts/groups)The S3 connection list moved out of 2. Backend test coverage for host/group reorderingAdded DB-layer unit tests mirroring the existing S3 ones:
3. One generic
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request adds support for manual drag-and-drop reordering of hosts and groups on the dashboard. It introduces new backend commands and database schema changes to persist the custom order, and updates the frontend to provide visual feedback for draggable cards. Additionally, it adds the necessary drag-and-drop dependencies to the project.
Manual ordering support:
reorder_hostsandreorder_groupsinsrc-tauri/src/db/commands.rsto persist manual ordering of hosts and groups, respectively. These commands update a newsort_ordercolumn and ensure atomicity and consistency. [1] [2] [3]src-tauri/src/db/mod.rsto add asort_ordercolumn tosaved_hostsand to use this column (falling back to label/name) when listing hosts and groups. Added migration logic to ensure backward compatibility. [1] [2] [3] [4] [5]Frontend drag-and-drop readiness:
HostCardandGroupCardcomponents to usecursor-grabandcursor-grabbingstyles, providing users with visual feedback that cards are draggable. [1] [2]Dependency management:
@dnd-kit/core,@dnd-kit/sortable, and@dnd-kit/utilitiestopackage.jsonandpnpm-lock.yamlto enable frontend drag-and-drop functionality. Also addedtslibas a dependency for these libraries. [1] [2] [3] [4] [5] [6]Other package updates:
pnpm-lock.yamlto specify the correctlibcfor various native dependencies, improving cross-platform compatibility. [1] [2] [3] [4]