More modern invitation letter builder UI#4674
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
This PR modernises the invitation-letter PDF builder admin UI: sticky save bar with status feedback, a useAdminTheme hook syncing with Django admin localStorage preference, and Radix UI layout token usage replacing a custom Spacer. The uv.lock churn appears unrelated to the feature. Nested Theme wrappers fork the token tree (builder.tsx, root.tsx): root.tsx renders a Theme via Base, then builder.tsx renders a second Theme with accentColor, grayColor, radius, and panelBackground inside it. Every token declared in the inner Theme silently overrides the outer admin-level token. The sticky save bar resolves Radix CSS variables against the inner scope while other admin components use the outer scope, producing inconsistent colours. The tokens should be passed as props into Base/the outer Theme instead. useAdminTheme is only wired in the invitation-letter builder (shared/use-admin-theme.ts, root.tsx:13). The hook is in shared/ but imported by exactly one component tree. All other Base callers stay permanently light. If the intent is to sync the whole admin UI with the OS/Django preference, the hook should be applied at Base level unconditionally. EditableTitle calls onRename on every keystroke (editor-section.tsx:146). This dispatches RenamePage to the reducer for every character typed, marking the document dirty immediately. There is no Cancel button in the rename dialog (only a Save Dialog.Close button), so any partial input becomes committed state with no undo path. The input value should be buffered in local state and onRename called only on confirm. Sticky save bar may silently not stick (builder.tsx). Box with position sticky bottom 0 is inside DjangoAdminLayout. If any ancestor has overflow hidden or overflow auto, position sticky is silently ignored and the bar scrolls away. The layout contract with DjangoAdminLayout should be verified. The spacer Box height var(--space-9) to clear the sticky bar (builder.tsx:60) is fragile. var(--space-9) is 36px in the default Radix scale but the actual bar height depends on font size, padding, and button size. If those change, the spacer clips or leaves a gap. RichEditor hardcoded to light colours (rich-editor/index.tsx:84): the div uses bg-white text-gray-900 which are Tailwind literal colours, not theme-aware tokens. When useAdminTheme resolves to dark, the editor stays white with dark text. Radix tokens or Tailwind dark: variants should be used instead. useAdminTheme misses same-tab localStorage changes (shared/use-admin-theme.ts). The storage event only fires in other browser tabs. If the user toggles the theme in the same-tab Django admin header, the hook does not react and a page reload is required. A MutationObserver on the html theme attribute or intercepting the same-tab write would fix this. saveFailed is not surfaced in the new save bar (builder.tsx). useLocalData exposes saveFailed but the save bar only shows isDirty / All changes saved. A failed mutation leaves the user seeing a success message because isDirty resets after submission regardless of outcome. An error state or retry indicator is missing. uv.lock diff (+1295/-1287 lines): No Python dependency should change for a purely frontend UI refactor - worth confirming this is not an accidental regeneration from an unrelated environment. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #4674 +/- ##
=======================================
Coverage 92.52% 92.52%
=======================================
Files 359 359
Lines 10800 10800
Branches 821 821
=======================================
Hits 9993 9993
Misses 696 696
Partials 111 111 🚀 New features to boost your workflow:
|
What
An initial more modern invitation letter builder ui
ToDo