This commit refactors the custom field ordering functionality to support
UI-only reordering with an explicit "Save Order" button. This replaces
the previous approach where each move operation updated the backend.
Changes include:
- **Frontend State Management:**
- `CustomFields.tsx` now manages a local state (`displayedFields`) for the order of custom fields.
- Reordering operations ("Move Up"/"Move Down") update this local state directly without immediate backend calls.
- **"Save Order" Button:**
- A "Save Order" button has been added to the UI.
- This button is enabled only when changes to the order have been made locally.
- Clicking "Save Order" triggers API calls to persist the new order of all changed fields to the backend.
- **API Calls:**
- `editCustomField` is now called in a batch when "Save Order" is pressed, only for fields whose order has effectively changed.
- **Local Order Integrity:**
- The `onMove` handler now ensures that the local `order` properties are dense and sequential (0, 1, 2...) before saving.
- **Testing Plan:** Updated manual testing steps to reflect the new UI flow.
This approach improves UX by making reordering feel instantaneous and reduces the number of API calls compared to updating on every move.
Decouples the IntersectionObserver from the React component tree to
prevent
unnecessary re-renders of the entire Cuesheet table when row visibility
changes. Restores rootMargin for better UX and memoizes EventRow.
- Introduced `rowObserver.ts` to manage a global IntersectionObserver.
- Observer callback directly updates `useVisibleRowsStore`.
- Configured with `rootMargin: '400px 0px'` and `threshold: 0.01`
to pre-load and retain rows near the viewport, improving UX.
- `EventRow` components use `observeRow`/`unobserveRow` from
`rowObserver.ts`.
- `EventRow` is now wrapped in `React.memo` to prevent re-renders if
props
haven't changed when its parent re-renders.
- Removed observer creation and prop-drilling from `CuesheetBody.tsx`.
This ensures only individual rows re-render content based on visibility
and optimizes row component rendering, improving performance and UX.
* adding block now/next data
* add to ui
* add blockNext
* indicate in UI
* fix test
* restore block start at value
* one loop
* stricter null comparison
* test fails
* dev throw if id cant be found
* fix spelling
* revert client stuff
* rename
* add comment
* refactor: WS
* refactor refetch
extract refetch keys to package/types
auto invalidata all keys
use refetch keys for project data
no need for constant update of info, just fetch when looking at it
split refetch and query keys
rename types
* refactor viewSettings
* fixup! refactor: WS
* rearange files and make types for api calls
* cleanup viewsettings
* switch exhaustiveCheck
* combine send socket function
* exhaustive check
* rename type to tag
* fixup! fixup! refactor: WS
* remove custom etag solution
* get errors from socket
* lint
* small change
---------
Co-authored-by: Carlos Valente <carlosvalente@pm.me>
google-labs-jules[bot]
Carlos Valente
Shobhit Nagpal
Alex Christoffer Rasmussen