refactor(slint): Settings "Offline" panel matches the other sections' layout

The panel improvised its own title + free-form paragraph + ghost buttons,
breaking the established Settings structure. Rebuilt it like Audio/Playback/
Appearance: a GroupHeader ("OFFLINE CACHE") + SettingRow rows (label +
description + a SecondaryButton control on the right) — Manage offline cache /
Cache folder / Clear offline cache. No panel-level title (the left sub-nav
names the section). Keeps the layout consistent for the offline settings we'll
add here later.

cc
This commit is contained in:
vicrodh committed 2026-05-28 13:18:03 -06:00
1 parent 2b6c71000f
commit 78b1a9c508
1 file changed
+39 -30
@@ -1,24 +1,36 @@
// Settings > Offline Playback (cache half). Launches the Offline Cache // Settings > Offline Playback (cache half). Same structure as the other
// Manager and offers clear-all / open-folder. The full per-album/track // settings panels (GroupHeader + SettingRow + a secondary button control) so
// management lives in the manager; the Local-Library-dependent rows // the section stays consistent as more offline settings land. Launches the
// (show-in-library, repair) arrive with the Local Library port. // Offline Cache Manager + offers open-folder / clear-all. The Local-Library
// rows (show-in-library, repair) arrive with the Local Library port.
import { Theme } from "../foundation/semantic-colors.slint"; import { Theme } from "../foundation/semantic-colors.slint";
import { Typography } from "../foundation/typography.slint"; import { Typography } from "../foundation/typography.slint";
import { Radius } from "../foundation/radius.slint"; import { Radius } from "../foundation/radius.slint";
import { OfflineManagerActions } from "../state.slint"; import { OfflineManagerActions } from "../state.slint";
import { SettingRow } from "SettingRow.slint";
component Btn inherits Rectangle { component GroupHeader inherits Text {
color: Theme.text-muted;
font-size: 11px;
letter-spacing: 1.5px;
font-weight: Typography.semibold;
}
// Matches AudioSettings/AppearanceSettings' SecondaryButton.
component SecondaryButton inherits Rectangle {
in property <string> label; in property <string> label;
in property <bool> danger: false; in property <bool> danger: false;
callback clicked(); callback clicked();
width: 184px; width: 160px;
height: 36px; height: 34px;
border-radius: Radius.sm; border-radius: Radius.sm;
border-width: 1px; border-width: 1px;
border-color: root.danger ? #e0564f : Theme.border-subtle; border-color: root.danger ? #e0564f : Theme.border-subtle;
background: ta.has-hover ? Theme.surface-hover : Theme.surface-elevated; background: ta.has-hover ? Theme.surface-hover : Theme.surface-elevated;
Text { Text {
width: 100%;
height: 100%;
text: root.label; text: root.label;
color: root.danger ? #e0564f : Theme.text-secondary; color: root.danger ? #e0564f : Theme.text-secondary;
font-size: Typography.body; font-size: Typography.body;
@@ -35,36 +47,34 @@ component Btn inherits Rectangle {
} }
export component OfflineSettings inherits VerticalLayout { export component OfflineSettings inherits VerticalLayout {
spacing: 16px; spacing: 4px;
padding: 4px;
Text { GroupHeader { text: @tr("OFFLINE CACHE"); }
text: @tr("Offline Playback");
color: Theme.text-primary; SettingRow {
font-size: Typography.title; label: @tr("Manage offline cache");
font-weight: Typography.bold; description: @tr("Browse and manage your downloaded tracks and albums.");
} SecondaryButton {
Text { label: @tr("Open manager");
text: @tr("Cache Qobuz tracks for offline listening while your subscription is active. Manage what's downloaded, free up space, or change the cache size limit in the manager.");
color: Theme.text-muted;
font-size: Typography.body;
wrap: word-wrap;
}
HorizontalLayout {
spacing: 12px;
alignment: start;
Btn {
label: @tr("Manage offline cache");
clicked => { clicked => {
OfflineManagerActions.open(); OfflineManagerActions.open();
} }
} }
Btn { }
label: @tr("Open cache folder"); SettingRow {
label: @tr("Cache folder");
description: @tr("Open the folder where offline tracks are stored on disk.");
SecondaryButton {
label: @tr("Open folder");
clicked => { clicked => {
OfflineManagerActions.open-folder(); OfflineManagerActions.open-folder();
} }
} }
Btn { }
SettingRow {
label: @tr("Clear offline cache");
description: @tr("Remove every downloaded track. This cannot be undone.");
SecondaryButton {
label: @tr("Clear all"); label: @tr("Clear all");
danger: true; danger: true;
clicked => { clicked => {
@@ -72,5 +82,4 @@ export component OfflineSettings inherits VerticalLayout {
} }
} }
} }
Rectangle { } // spacer
} }