ui: Object stores, a base component library, and dark-mode fixes#79
Merged
Conversation
Adds a Storage & Backups settings section to register S3-compatible object storage credentials (AWS S3, Cloudflare R2, Backblaze B2, MinIO) and configure remote backup destinations that reference them, with a per-destination reachability test before saving. Secrets are entered once and never returned. Each backup now shows where it lives (local and any remote destinations) so a mirrored or remote-only backup is visible at a glance.
Object storage moves out of Settings into the main sidebar as its own Storage section (Databases and Object Stores). Object Stores opens on an Overview of connected stores, with configuration behind a Settings sub-tab, and credential/destination forms now open in dialogs instead of sitting expanded and eating space. Settings returns to its own tabs. The sidebar groups are reordered so the most-used areas sit on top and DNS drops to just above Administration, and every sub-item now carries an icon. A small set of theme-aware base components (button, input, select, textarea, field, card) now backs these screens, so inputs and dropdowns are correct in dark mode by construction. Alongside that, many screens that hardcoded light colors (form inputs, the deployment-detail dropdowns, the DNS screens, and numerous status panels) now use theme tokens and read correctly in both light and dark. Adds AGENTS.md documenting the reuse-first component rule, the theming tokens, and a review checklist so this drift does not recur.
Object stores now show whether FlatRun runs them (Managed) or only connects to them (External). Adding a store lets you register an external endpoint or tag a managed one linked to the deployment that runs it, and the overview offers deploying a local store from a template.
Code Review SummaryThis PR successfully introduces a standardized component library and moves storage management to a first-class citizen in the UI. It addresses widespread dark-mode inconsistencies by replacing hardcoded colors with a semantic token system. 🚀 Key Improvements
💡 Minor Suggestions
|
![sourceant[bot]](https://avatars.githubusercontent.com/in/1161781?s=60&v=4){kind=small}
| const canSubmitDest = computed(() => destForm.name.trim() && destForm.bucket.trim() && destForm.credential_id); | ||
|
|
||
| function credName(id: string): string { | ||
| return creds.value.find((c) => c.id === id)?.name || "missing credential"; |
There was a problem hiding this comment.
When a credential is not found, returning 'missing credential' is good for the UI, but it might be better to handle this fallback more explicitly to prevent potential layout shifts or confusion if the ID exists but the list hasn't loaded yet.
Suggested change
| return creds.value.find((c) => c.id === id)?.name || "missing credential"; | |
| return creds.value.find((c) => c.id === id)?.name || (loadingCreds.value ? 'Loading...' : 'Unknown credential'); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pairs with flatrun/agent#168, which adds remote S3 backups, and does three related things on the UI side.
Object stores are now a first-class area. Managing S3 credentials and backup destinations outgrew a settings tab, so Storage moved to the main sidebar (Databases and Object Stores), with an Overview of connected stores and configuration behind a Settings sub-tab whose forms open in dialogs rather than sitting expanded. Each backup shows where it lives, local and any remotes.
The dark-mode fixes are the reason for the new base components. Inputs and dropdowns were rendering white in dark mode because several screens hardcoded light colors. A small set of theme-aware components (button, input, select, textarea, field, card) built on the design tokens makes them correct by construction, and the offending screens (the deployment-detail dropdowns, the DNS screens, the settings inputs, and many status panels) now use tokens.
AGENTS.mdrecords the reuse-first rule and a review checklist so this does not recur.The sidebar was also reordered so the most-used areas sit on top and DNS drops to just above Administration, and every sub-item gained an icon.