feat: dashboard UI/UX overhaul from full review

Shared foundation:
- New Modal component on native <dialog>.showModal() (focus trap, inert
  background, Escape, focus restore, scroll lock); all eight dialogs and
  both globalThis.confirm calls migrated to it
- Design tokens for success/warning/danger surfaces; pill danger variant;
  .sr-only utility; toast layering above dialog backdrops; not-allowed
  cursor for validity-disabled buttons

Conversations/attention: auto-scroll with jump-to-latest, per-conversation
draft persistence, suggestion undo, 30s auto-refresh with refresh controls,
unread emphasis and counts, blur-consistent share dialog, empty-accounts
guidance, collapsed user lookup, relative timestamps, danger pills for
critical items

Media/library/outreach: click-blurred-to-reveal, lightbox with arrow
navigation and captions, dirty-form preservation across refetches, upload
validation with thumbnail preview, save feedback, result counts with
load-more and clear-filters, ticking countdowns from a single clock

Overview/performance/operations/settings: mutation errors inside the
confirm dialog, live sending-window countdown, offline-aware loading
states, per-panel loading/error with retry, 7/30/90-day range toggle,
console scroll yielding with shown/retained counts, risky-save matching
by subreddit name instead of index, useBlocker unsaved-changes guard,
single-pass validation with focus-to-first-error, access panel JSON
validation and input reset

Tests: 806 -> 844 passing; both typechecks clean.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Jamie BruntonandClaude Fable 5 committed 2026-08-10 09:07:42 +01:00
1 parent 82be197b79
commit e984bf20ac
46 files changed
+2462 -495

No files matched your search

@@ -8,8 +8,14 @@ export const conversationQueryKeys = {
mediaShareOptions: (id: string) => ['conversations', 'media-share-options', id] as const,
};
export const CONVERSATION_REFRESH_INTERVAL_MS = 30_000;
export function useConversationsQuery() {
return useQuery({ queryKey: conversationQueryKeys.all, queryFn: conversationApi.list });
return useQuery({
queryKey: conversationQueryKeys.all,
queryFn: conversationApi.list,
refetchInterval: CONVERSATION_REFRESH_INTERVAL_MS,
});
}
export function useConversationDetailQuery(id: string | null) {
@@ -17,6 +23,7 @@ export function useConversationDetailQuery(id: string | null) {
queryKey: conversationQueryKeys.detail(id ?? ''),
queryFn: () => conversationApi.detail(id ?? ''),
enabled: id !== null,
refetchInterval: CONVERSATION_REFRESH_INTERVAL_MS,
});
}
@@ -28,10 +35,11 @@ export function useSuggestMediaAskMutation(id: string) {
return useMutation({ mutationFn: () => conversationApi.suggestMediaAsk(id) });
}
export function useConversationMediaShareOptionsQuery(id: string) {
export function useConversationMediaShareOptionsQuery(id: string, enabled: boolean) {
return useQuery({
queryKey: conversationQueryKeys.mediaShareOptions(id),
queryFn: () => conversationApi.mediaShareOptions(id),
enabled,
});
}