cloudflare / cloudflare/cloudflare-os

Allow reordering gadget tabs within a workspace

Open
#266 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.