UI Patterns and Design System

UI Patterns and Design System

Obscura Flow uses a compact desktop-first interface tuned for professional photography workflows: repeated work, quick scanning, long-running tasks, and offline/cloud preservation states.

Foundations

• Radius: --radius-sm, --radius-md, --radius-lg, --radius-full.
• Spacing: --space-1 through --space-5.
• Controls: --control-height for header controls, buttons, task pills, and compact fields.
• Surfaces: --content-bg, --toolbar-bg, --card-bg, --panel-bg, --card-border.
• Semantic tones: success, warning, destructive, archive, integrity, sync.

The light theme avoids pure white page surfaces. Cards and inputs sit on slightly warm neutral surfaces with restrained borders and low shadows. Dark mode mirrors the same semantic roles.

Reusable Components

src/renderer/components/DesignSystem.tsx defines the shared UI primitives:

• AppCard: standard contained surface for repeated panels.
• StatusBadge: semantic badge with icon or dot.
• EmptyState: guided empty state with icon, text, and optional CTA.
• InlineInfo: compact information or warning block.
• ProgressCard: progress summary for long-running operations.
• SmartTooltip: tooltip wrapper pattern for compact controls.

These components are intentionally lightweight. They standardize visual language without forcing each feature view into a new framework all at once.

Global Task Status

src/renderer/components/GlobalTaskStatus.tsx adds a global task indicator to the app header.

It aggregates:

• project archive progress;
• EXIF/metadata indexing;
• remote archive upload/restore;
• restore progress;
• integrity scan progress;
• project index rebuild progress.

The header pill shows the highest-priority active or recent task. Clicking opens a queue panel with task detail, project context, percent progress, and cancellation where the underlying operation supports it.

Priority order:

1. error;
2. busy;
3. warning;
4. success.

Interaction Patterns

• Long-running work must surface in the header, not only inside the originating view.
• Destructive actions keep explicit confirmation patterns.
• Empty states should explain the condition and offer the next useful action.
• Forms should keep labels visible and use inline validation for required or invalid fields.
• Compact buttons use icons plus text when the action is not universally recognizable.
• Status badges use semantic tones consistently across archive, sync, integrity, and cloud states.

Future Consolidation

• Move repeated project/archive cards to AppCard.
• Replace legacy ad hoc badges with StatusBadge.
• Add keyboard navigation for task queue rows and table/list actions.
• Add a unified toast stack with retry/copy-details/report actions.
• Add skeleton loaders for workspace, settings, logs, and operations center refresh states.