feat(handoff): WorkflowBanner + table a11y + responsive + toast styling
Closing handoff gaps выявленных при полном audit'е README.md vs current
implementation. См. screen-by-screen mapping ниже.
== Screen 2 — Editor: WorkflowBanner (NEW) ==
Required by handoff (line 238-242) но не существовал. Inline status row выше
tab bar — live/review/info variants. Backend не имеет explicit dict-level
workflow state (draft → review → live transition), используем proxy:
- approvalRequired=false → 'Live' (green-bg + green left edge)
- approvalRequired=true + 0 → 'Approval enabled' (accent-bg + accent edge)
- approvalRequired=true + N → 'На ревью N' (warn-bg + warn edge), link к /reviews
Backend extension future: добавить explicit workflowState к DictionaryDetail
+ buttons для transitions (request-review / approve / publish). Сейчас banner
дает минимум — visual workflow signal без UI mutation buttons.
== Table accessibility per handoff line 476 ==
TableHeaderCell:
- scope='col' (a11y screen reader requirement)
- aria-sort='ascending|descending|none' когда sortable prop true
- New sortable + sortDirection props (API ready, не используется пока)
== 560px responsive per handoff line 466 ==
TableHeaderCell + TableCell получили optional hideBelow='sm|md|lg' prop:
hideBelow='sm' → hidden <640px (table-cell ≥sm)
hideBelow='md' → hidden <768px
hideBelow='lg' → hidden <1024px
Callsites могут пометить secondary columns (created_by, updated_at, etc.)
hideBelow='md' для clean mobile experience. Текущие routes ещё не используют
prop — API ready для incremental adoption.
== Toast styling per handoff line 302-305 ==
Sonner toast — раньше surface bg + ink text. Handoff:
- Navy bg + on-accent text (warm cream-orange feeling)
- 4s auto-dismiss
- Variant accent через left border 4px:
success → green / error → pink / info → accent / warning → warn
- cap-style title (но используем text-body для нативности, не overkill)
- 13px font-sans
richColors disabled — наши tokens вместо sonner defaults.
Files:
- NEW src/components/editor/WorkflowBanner.tsx
- src/routes/dictionaries.$name.tsx (wire banner above tab bar)
- src/ui/components/table.tsx (a11y + hideBelow API)
- src/ui/components/toaster.tsx (navy variant + variant borders)
- src/ui/index.ts (TableCellProps export)
Tests: 116 pass. TS strict clean.
This commit is contained in:
@@ -41,6 +41,7 @@ import { DictionaryHubView } from '@/components/lineage/DictionaryHubView'
|
||||
import { CascadeConfirmDialog } from '@/components/lineage/CascadeConfirmDialog'
|
||||
import { RecordHistoryDrawer } from '@/components/record/RecordHistoryDrawer'
|
||||
import { RecordDrawer } from '@/components/record/RecordDrawer'
|
||||
import { WorkflowBanner } from '@/components/editor/WorkflowBanner'
|
||||
import { AoiPickerDialog, type AoiResult } from '@/components/geo/AoiPickerDialog'
|
||||
import { TimeTravelPicker } from '@/components/timetravel/TimeTravelPicker'
|
||||
import { nowIsoLocal } from '@/lib/dates'
|
||||
@@ -578,6 +579,11 @@ function DictionaryDetail() {
|
||||
}
|
||||
/>
|
||||
|
||||
{/* WorkflowBanner — status (live/review/draft) above tab bar per handoff Screen 2. */}
|
||||
{detailQuery.data && (
|
||||
<WorkflowBanner detail={detailQuery.data} pendingCount={pendingByKey.size} />
|
||||
)}
|
||||
|
||||
{/* Editor tabs per handoff Stage 3.4:
|
||||
Records | Relations | Fields | JSON | Events | History.
|
||||
URL-synced через ?tab=. Default — records (records table + filters). */}
|
||||
|
||||
Reference in New Issue
Block a user