mirror of
https://github.com/tiddly-gittly/TidGi-Desktop.git
synced 2026-01-22 20:41:39 -08:00
3718d0bd39
* refactor: simplify tool writing * feat: load prompt from plugin in a wiki, let agent know what to do based on https://github.com/TiddlyWiki/TiddlyWiki5/issues/9378 * fix: i18n fix: i18n fix: wrong i18n structure fix: empty i18n * Add ContentLoading component and suspense fallback * fix: monaco loading * docs: usage of chrome mcp to contron during dev * fix: provider config truncate user input when typing * fix: legacy usage * Update package.json * fix: not loadin initial data * feat: better prompt sort * fix: sorting of array * fix: drag * Create DragAndDrop.md * feat: directly enter edit mode * fix: workspace config change cause immediate main wiki restart * Add 'Press Enter to confirm' to tag help texts * fix: dont show system tag when adding sub wiki * feat: inform user to press enter on tag auto complete * refactor: let sub wiki auto complete tag * Revert Add 'Press Enter to confirm' to tag help texts * fix: not able to open prompt editor by click prompt tree * fix: click to open plugin config * chore: remove log * feat: Auto-select the first file if none is selected * fix: don't preview not enabled prompt parts * fix: Keep i18n ally think these keys exist, otherwise it will delete them during "check usage" * lint: fix * Update externalAPI.logging.test.ts
28 lines
1.6 KiB
Markdown
28 lines
1.6 KiB
Markdown
# Drag-and-Drop Optimistic Update (TidGi)
|
|
|
|
## Implementation Summary
|
|
|
|
TidGi uses **optimistic UI updates** for drag-and-drop reordering in both form arrays and sidebar workspace lists. This ensures a smooth user experience without flicker or delay, even when backend or form updates are slow.
|
|
|
|
### Key Points
|
|
|
|
- When a drag ends, the UI immediately updates the order using local state (store or useState), before waiting for backend or form data to update.
|
|
- The backend update (or form update) is triggered asynchronously. When the new data arrives, the local optimistic state is cleared.
|
|
- This prevents the UI from briefly reverting to the old order before the update is confirmed.
|
|
|
|
### Implementation Details
|
|
|
|
- **Form Arrays**: Uses zustand store (`itemsOrder`) for optimistic rendering. See `ArrayFieldTemplate.tsx` and `arrayFieldStore.ts`.
|
|
- **Sidebar Workspaces**: Uses local React state (`optimisticOrder`) for workspace ID order. See `SortableWorkspaceSelectorList.tsx`.
|
|
|
|
### Cautions
|
|
|
|
- Always clear the optimistic state when the real data arrives, to avoid stale UI.
|
|
- Do not mutate the original data objects; always clone or use new arrays/objects.
|
|
- If backend update fails, consider showing an error or reverting the optimistic state.
|
|
|
|
### References
|
|
|
|
- [ArrayFieldTemplate.tsx](../../src/pages/ChatTabContent/components/PromptPreviewDialog/PromptConfigForm/templates/ArrayFieldTemplate.tsx)
|
|
- [arrayFieldStore.ts](../../src/pages/ChatTabContent/components/PromptPreviewDialog/PromptConfigForm/store/arrayFieldStore.ts)
|
|
- [SortableWorkspaceSelectorList.tsx](../../src/pages/Main/WorkspaceIconAndSelector/SortableWorkspaceSelectorList.tsx)
|