Skip to content

ui: Object stores, a base component library, and dark-mode fixes #79

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nfebe merged 4 commits into from
Jul 9, 2026
Merged

ui: Object stores, a base component library, and dark-mode fixes #79

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b0861dd
feat(settings): Manage S3 backup credentials and destinations
nfebe Jul 7, 2026
2a03a82
ui: Add base components, fix dark mode, and restructure storage nav
nfebe Jul 8, 2026
a254a16
ui: Show object store kind and a deploy-a-local-store path
nfebe Jul 8, 2026
b7b724e
ui: Remove stale coming-soon local-store card
nfebe Jul 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 44 additions & 0 deletions AGENTS.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
# FlatRun UI Agent Guide

Vue 3 (`<script setup>`) + Vite + Pinia. Icons via lucide (through the `Icon` base component). Run `npm run type-check`, `npm run lint`, `npm run format:check`, and `npm run test:run` before proposing changes.

## Component reuse (read before adding UI)

Reuse first. Building a one-off input, select, button, card, or modal is the most common source of visual and dark-mode drift here. Before writing markup:

1. Check `src/components/base/` for a primitive that already does it.
2. If one exists, use it. Do not hand-roll a styled `<input>`, `<select>`, `<button>`, or card surface.
3. If none fits, extend `src/components/base/` with a new primitive (built on the design tokens below) and use that, rather than styling inline in a view.

### Base primitives (`src/components/base/`)

| Component | Use for |
| ---------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
| `BaseButton` | All buttons. Props: `variant` (primary/secondary/danger/ghost), `size`, `icon`, `loading`, `disabled`. |
| `BaseInput` | Text/number/password inputs. `v-model`, `type`, `placeholder`, `disabled`. |
| `BaseSelect` | Dropdowns. `v-model`; `<option>`s go in the default slot. Themed chevron, no native-arrow inconsistency. |
| `BaseTextarea` | Multi-line input. |
| `BaseField` | Label + hint wrapper around a control. |
| `BaseCard` | Titled surface with header/body/footer slots. |
| `Icon` | lucide icon by `name`. |
| `BaseModal`, `SlidePanel`, `SubTabs`, `TimeRangePicker`, `SplitActionButton` | Overlays, tabbed sections, segmented range, split buttons. |

Higher-level reusables outside `base/`: `DataTable`, `ConfirmModal`, `PermissionPicker`.

## Theming: never hardcode colors

The app themes with CSS custom properties. `<html>` carries `data-theme="light|dark"` (see `src/composables/useTheme.ts`); tokens and their dark overrides live in `src/assets/design-system.css`. There is one dark override block, so any hardcoded hex bypasses it and breaks in one theme.

Rules:

- Use semantic tokens, not hex: `var(--surface)` / `var(--surface-raised)` / `var(--surface-sunken)` / `var(--surface-inset)` for backgrounds; `var(--text)` / `var(--text-muted)` / `var(--text-subtle)` for text; `var(--border)` for borders; `var(--accent)` / `var(--accent-hover)` / `var(--accent-contrast)` for the primary accent.
- Status pills and tinted panels: `var(--color-{info,success,warning,danger,primary}-50)` background with the matching `-700` text. These flip per theme; the pale `#eff6ff`/`#fef3c7`/`#fee2e2` hexes do not.
- Solid saturated fills (a colored button background, a status dot, an icon) may stay as a saturated color; those read on both themes. Do not convert those to the `-50` tints.
- Inputs/selects must set both `background` and `color` (a missing `color` shows black text on a dark surface). Prefer `BaseInput`/`BaseSelect`, which handle this.

## Review checklist (UI changes)

- [ ] New inputs/selects/buttons/cards reuse `src/components/base/` rather than bespoke markup. Flag any hand-rolled control that duplicates a primitive.
- [ ] No hardcoded hex/`white`/`black` in `<style>` or inline `style=` for surfaces, text, borders, or status tints. Semantic tokens used instead.
- [ ] Rendered in both light and dark (toggle in the sidebar). Inputs, dropdowns, modals, and tables are readable in both.
- [ ] `type-check`, `lint`, `format:check`, and `test:run` pass.
Loading
Loading