cloudflare / cloudflare/cloudflare-os
Allow reordering gadget tabs within a workspace
- Dominant language
- TypeScript
- Stars
- 9.9k
- Forks
- 1.2k
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 107
Description
## Problem
In a workspace with several gadgets, the gadget tabs in the top bar always appear in **creation order**, and there is no way to rearrange them. For workspaces used as day-to-day dashboards by "use"-role collaborators, the tab order matters (e.g. putting the most-used gadget first, grouping related ones), and today the only way to change it is to delete and recreate gadgets in the desired order — which destroys their Durable Object state.
## Where the order comes from today
- The "use" view's picker (`packages/workshop-frontend/src/GadgetUseView.tsx`) renders `gadgets` in the order received; the editor view behaves the same.
- That list is fed by `subscribeToWorkpieces()` in `packages/workshop-backend/src/overseer.ts`, which iterates `this.storage.gadgets.list()`.
- `typed-storage`'s `list()` iterates keys in ascending order, so the tab order is effectively gadget-id (creation) order.
- `GadgetRecord` / `WorkpieceSummary` carry no ordering field, and there is no API to move a workpiece.
## Proposal
Let workspace owners/editors reorder gadgets, and persist that order:
1. Add an optional `order` (sort key) field to `GadgetRecord`, defaulting to creation order for existing records.
2. Expose a small overseer API to move a gadget (e.g. `setWorkpieceOrder(id, beforeId | afterId)` or a fractional-index sort key), owner/edit roles only.
3. Sort by `(order, id)` in `subscribeToWorkpieces()` so all subscribers (editor and "use" views) see the same order.
4. Frontend: drag-and-drop on the tab strip, or simple move-left/move-right controls in the tab context menu as a first step.
A fractional/lexicographic sort key would avoid rewriting sibling records on every move; happy to discuss alternatives.
## Notes
- No migration should be needed: records without `order` can sort by id, preserving today's behavior.
- We operate deployed instances of Cloudflare OS for clients and this comes directly from end-user feedback on multi-gadget dashboard workspaces.
Contributor guide
Research direction
Start with packages/workshop-frontend/src/GadgetUseView.tsx and packages/workshop-backend/src/overseer.ts, then trace GadgetRecord and WorkpieceSummary. Decide how persisted ordering and the owner/editor move API should work, including the existing-record fallback. Done means both editor and use views receive the same reordered gadget tabs without destroying Durable Object state.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- full-stack
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100