feat(settings): add Stacks section for stack workflow preferences (#1366)

Move the browser-local Deploy progress, Progress style, and Diff preview
before save controls out of Appearance into a new Stacks section under the
Infrastructure group. These are stack lifecycle and editor workflow
preferences, not visual style, so Settings now groups them where operators
expect to find them.

Add a browser-local masthead scope so these localStorage-backed sections read
SCOPE browser instead of the misleading global, and apply it to both
Appearance and Stacks. Control behavior, storage keys, and backing hooks are
unchanged; this is an information-architecture move only.
This commit is contained in:
Anso
2026-06-12 18:40:53 -04:00
committed by GitHub
parent 6cbab661a0
commit ebf66fd92a
14 changed files with 266 additions and 103 deletions
+1 -1
View File
@@ -117,7 +117,7 @@ Clicking **Deploy** runs the following sequence:
## Watching the deploy
Sencho can stream the live `docker compose` output for every template install. Open **Settings Appearance Display** and enable **Deploy progress**; from then on, every App Store deploy streams its output. In Modal style it opens a structured log modal you can minimise to a pill that follows you across navigation; in Inline style it shows as that pill, which opens the same log on click. See [Deploy Progress](/features/deploy-progress) for the full reference.
Sencho can stream the live `docker compose` output for every template install. Open **Settings Infrastructure Stacks** and enable **Deploy progress**; from then on, every App Store deploy streams its output. In Modal style it opens a structured log modal you can minimise to a pill that follows you across navigation; in Inline style it shows as that pill, which opens the same log on click. See [Deploy Progress](/features/deploy-progress) for the full reference.
<Note>
Deploying a template requires the `stack:create` permission on the target node, which **admin** and **node-admin** roles hold by default. The Deploy button stays disabled when your account does not have it.
+2 -2
View File
@@ -50,5 +50,5 @@ The **Display** group holds the remaining per-browser preferences:
- **Density** switches between **Comfortable** (roomy rows, the default) and **Compact** (tighter rows and tiles that fit more on screen for dense dashboards).
- **Top navigation labels** shows text labels beside the top navigation icons. Turn it off for an icon-only bar; the destinations stay reachable by hover tooltip, accessible name, and the command palette. On the phone layout the navigation always keeps its labels. With labels off, **Top navigation alignment** chooses whether the icon-only bar sits to the left or centered.
- **Deploy progress** toggles live output streaming for deploy, restart, update, install, and Git operations, and **Progress style** chooses Modal or Inline presentation.
- **Diff preview before save** toggles a side-by-side diff of compose and env edits before they are written to disk.
Deploy-progress behavior and the diff-preview-before-save step are stack workflow preferences, so they live in **Settings → Infrastructure → Stacks**, not here.
+2 -2
View File
@@ -7,7 +7,7 @@ When you trigger a stack action that runs through `docker compose` (Deploy, Upda
## Showing, hiding, and styling deploy progress
Deploy progress is **on by default**. To run operations without it, open **Settings > Appearance > Display** and turn off **Deploy progress**. While it is on, **Progress style** chooses how it appears:
Deploy progress is **on by default**. To run operations without it, open **Settings > Infrastructure > Stacks** and turn off **Deploy progress**. While it is on, **Progress style** chooses how it appears:
- **Modal** (the default): a centered overlay that opens automatically and streams the full structured log.
- **Inline**: a quiet status band on the stack detail itself, with the full log a click away under **View output**.
@@ -15,7 +15,7 @@ Deploy progress is **on by default**. To run operations without it, open **Setti
The choices are saved to the current browser only and synced across tabs in the same browser without a reload.
<Frame>
<img src="/images/deploy-progress/setting-toggle.png" alt="Settings Appearance Display panel with the deploy progress toggle." />
<img src="/images/deploy-progress/setting-toggle.png" alt="Settings Stacks panel with the deploy progress toggle." />
</Frame>
## Using the modal
+1 -1
View File
@@ -127,7 +127,7 @@ The same controls apply to the `compose.yaml` and `.env` editors.
## Diff preview before save
When **Diff preview before save** is enabled in **Settings → Appearance**, clicking **Save & Deploy** or **Save Only** opens a side-by-side diff modal before anything is written to disk. The left pane is the on-disk content; the right pane is your unsaved edits with additions highlighted in green. The footer reads `ON DISK → UNSAVED` so the panes are unambiguous.
When **Diff preview before save** is enabled in **Settings → Infrastructure → Stacks**, clicking **Save & Deploy** or **Save Only** opens a side-by-side diff modal before anything is written to disk. The left pane is the on-disk content; the right pane is your unsaved edits with additions highlighted in green. The footer reads `ON DISK → UNSAVED` so the panes are unambiguous.
<Frame>
<img src="/images/compose-diff-preview/diff-modal.png" alt="Diff preview modal showing side-by-side YAML diff with the unsaved version on the right and an ON DISK to UNSAVED legend in the footer" />
+32 -22
View File
@@ -15,7 +15,7 @@ Open the Settings Hub by clicking the **Profile** icon in the top bar and select
|-------|----------------|
| **Personal** | Account, Appearance |
| **Access** | License, Users, SSO, API Tokens |
| **Infrastructure** | Nodes, Fleet Mesh, Registries, Cloud Backup, App Store |
| **Infrastructure** | Nodes, Fleet Mesh, Registries, Cloud Backup, App Store, Stacks |
| **Monitoring** | Host Alerts, Docker & Storage |
| **Notifications** | Channels, Notification Routing |
| **Automation** | Webhooks |
@@ -33,7 +33,7 @@ Every section renders inside the same masthead-and-sidebar layout. The masthead
| Pill | Meaning |
|------|---------|
| **SCOPE** `operator` / `global` | Setting applies to your account or this browser (Personal sections) or to the whole instance (every other non-node group) |
| **SCOPE** `operator` / `browser` / `global` | Setting applies to your account (`operator`), to this browser only (`browser`, for browser-local sections such as Appearance and Stacks), or to the whole instance (`global`, every other non-node group) |
| **NODE** `<node name>` | Setting is per-node and is currently being edited against this node |
| **EDITED** `<count>` pending / `saved` | The current section has unsaved changes |
| Section-specific stats | Each section can publish its own pills: `2FA on`/`off` and `BACKUP <n> left` (Account); `PLAN`, `TRIAL <n>d left`, `RENEWS`, `STATUS` (License); `OPERATORS` (Users); `CHANNELS` (Channels); `ROUTES` (Notification Routing); `WEBHOOKS` and `ENABLED` (Webhooks); `LABELS` (Labels); `PROVIDER`, `USED`, `SNAPSHOTS` (Cloud Backup); `DEV MODE` (Developer Diagnostics) |
@@ -100,7 +100,7 @@ See [Two-Factor Authentication](/features/two-factor-authentication) for the enr
Control how dense and how interactive the workspace feels. Each browser remembers its own choices so a compact laptop setup does not force the same rhythm on a larger desktop.
<Frame>
<img src="/images/settings/appearance-density.png" alt="Appearance settings showing the Density selector, the Deploy progress toggle, and the Diff preview toggle" />
<img src="/images/settings/appearance-density.png" alt="Appearance settings showing the Density selector" />
</Frame>
### Density
@@ -112,25 +112,7 @@ Control how dense and how interactive the workspace feels. Each browser remember
Density affects the dashboard stack table, the resource gauge strip, the Settings Hub sidebar, the Schedules and Audit Log tables, and every other data table in Sencho. Typography, color, and layout structure stay the same; only vertical padding compresses.
### Deploy progress
Sencho streams live output whenever you deploy, restart, update, install, or run a Git operation. It is on by default; turn it off to run operations without it. When it is on, **Progress style** chooses how it appears: **Modal** (a centered overlay that closes automatically on success or stays open on failure) or **Inline** (a quiet status band on the stack detail). See [Deploy Progress](/features/deploy-progress) for the full reference.
| Value | Behavior |
|-------|----------|
| **Enabled** (default) | A progress surface (the Modal overlay or the Inline band, per Progress style) shows for every long-running operation |
| **Disabled** | Operations run without it; results surface via toast notifications, and a failed operation still shows recovery actions on the stack page |
### Diff preview before save
When enabled, clicking **Save & Deploy** or **Save Only** in the compose or env editor opens a side-by-side diff modal before writing anything to disk. The left pane shows the current on-disk content; the right pane shows your unsaved edits, with additions highlighted green and removals highlighted red.
| Value | Behavior |
|-------|----------|
| **Enabled** | Diff modal opens on every save that has unsaved changes |
| **Disabled** (default) | File is saved directly without a review step |
If there are no unsaved changes the modal is skipped and the save proceeds immediately. See [Diff preview before save](/features/editor#diff-preview-before-save) in the Editor guide for the full workflow.
Deploy-progress behavior and the diff-preview-before-save step are stack workflow preferences and live in their own [Stacks](#stacks) section under Infrastructure.
---
@@ -481,6 +463,34 @@ See [App Store](/features/app-store#custom-template-registry) for more on custom
---
## Stacks
**Scope:** This browser (preferences are saved to local storage)
Stack editor and lifecycle workflow preferences. Each browser remembers its own choices, so they follow you across tabs but never change what other operators see. The masthead reads `SCOPE browser`.
### Deploy progress
Sencho streams live output whenever you deploy, restart, update, install, or run a Git operation. It is on by default; turn it off to run operations without it. When it is on, **Progress style** chooses how it appears: **Modal** (a centered overlay that closes automatically on success or stays open on failure) or **Inline** (a quiet status band on the stack detail). See [Deploy Progress](/features/deploy-progress) for the full reference.
| Value | Behavior |
|-------|----------|
| **Enabled** (default) | A progress surface (the Modal overlay or the Inline band, per Progress style) shows for every long-running operation |
| **Disabled** | Operations run without it; results surface via toast notifications, and a failed operation still shows recovery actions on the stack page |
### Diff preview before save
When enabled, clicking **Save & Deploy** or **Save Only** in the compose or env editor opens a side-by-side diff modal before writing anything to disk. The left pane shows the current on-disk content; the right pane shows your unsaved edits, with additions highlighted green and removals highlighted red.
| Value | Behavior |
|-------|----------|
| **Enabled** | Diff modal opens on every save that has unsaved changes |
| **Disabled** (default) | File is saved directly without a review step |
If there are no unsaved changes the modal is skipped and the save proceeds immediately. See [Diff preview before save](/features/editor#diff-preview-before-save) in the Editor guide for the full workflow.
---
## Support
**Scope:** Global