Complete the Panama theme system

2026-08-20 22:03:08 -04:00
parent 69ecec7ecf
commit ed428e87c4
17 changed files with 1370 additions and 41 deletions
@@ -0,0 +1,123 @@
+// Named themes are the first layer of Appearance: shipped profiles stay
+// immutable, while saved profiles can be selected or removed in place.
+
+import QtQuick
+import qs.config
+import qs.services
+
+Column {
+    id: root
+
+    width: parent ? parent.width : 620
+    spacing: 0
+
+    Repeater {
+        model: ThemeProfiles.profiles
+
+        SettingRow {
+            id: profileRow
+
+            required property var modelData
+
+            label: profileRow.modelData.name
+            detail: (profileRow.modelData.scheme === "light" ? "Light" : "Dark")
+                + " · " + profileRow.modelData.accent + " → " + profileRow.modelData.secondary
+            controlWidth: profileRow.modelData.shipped ? 88 : 170
+
+            Row {
+                anchors.right: parent.right
+                anchors.verticalCenter: parent.verticalCenter
+                spacing: 6
+
+                SettingsButton {
+                    id: useButton
+                    text: profileRow.modelData.id === ThemeProfiles.activeProfile.id ? "Selected" : "Use"
+                    enabled: profileRow.modelData.id !== ThemeProfiles.activeProfile.id
+                    activeFocusOnTab: enabled
+                    border.width: activeFocus ? 2 : (tone === "accent" ? 0 : 1)
+                    border.color: activeFocus ? Theme.accent : Theme.alpha(Theme.fg, 0.08)
+                    onClicked: ThemeProfiles.selectProfile(profileRow.modelData.id)
+                    Keys.onReturnPressed: if (enabled) ThemeProfiles.selectProfile(profileRow.modelData.id)
+                    Keys.onSpacePressed: if (enabled) ThemeProfiles.selectProfile(profileRow.modelData.id)
+                }
+
+                SettingsButton {
+                    id: deleteButton
+                    visible: !profileRow.modelData.shipped
+                    text: "Delete"
+                    activeFocusOnTab: visible
+                    border.width: activeFocus ? 2 : 1
+                    border.color: activeFocus ? Theme.danger : Theme.alpha(Theme.fg, 0.08)
+                    onClicked: ThemeProfiles.deleteProfile(profileRow.modelData.id)
+                    Keys.onReturnPressed: ThemeProfiles.deleteProfile(profileRow.modelData.id)
+                    Keys.onSpacePressed: ThemeProfiles.deleteProfile(profileRow.modelData.id)
+                }
+            }
+        }
+    }
+
+    SettingRow {
+        label: "Save current theme"
+        detail: "Stores this scheme and accent pair under a unique name"
+        divider: false
+        controlWidth: 292
+
+        Row {
+            anchors.right: parent.right
+            anchors.verticalCenter: parent.verticalCenter
+            spacing: 7
+
+            Rectangle {
+                width: 196
+                height: 31
+                radius: 8
+                color: Theme.alpha(Theme.fg, 0.05)
+                border.width: nameInput.activeFocus ? 2 : 1
+                border.color: nameInput.activeFocus ? Theme.accent : Theme.alpha(Theme.fg, 0.12)
+
+                TextInput {
+                    id: nameInput
+                    anchors.fill: parent
+                    anchors.leftMargin: 10
+                    anchors.rightMargin: 10
+                    activeFocusOnTab: true
+                    verticalAlignment: TextInput.AlignVCenter
+                    maximumLength: 40
+                    color: Theme.fg
+                    selectionColor: Theme.alpha(Theme.accent, 0.35)
+                    font.family: Theme.fontFamily
+                    font.pixelSize: Theme.fontSizeSmall
+                    Accessible.name: "Theme profile name"
+
+                    Text {
+                        anchors.verticalCenter: parent.verticalCenter
+                        visible: nameInput.text === "" && !nameInput.activeFocus
+                        text: "Theme name"
+                        color: Theme.fgMuted
+                        font: nameInput.font
+                    }
+
+                    onAccepted: saveButton.save()
+                }
+            }
+
+            SettingsButton {
+                id: saveButton
+                text: "Save"
+                tone: "accent"
+                activeFocusOnTab: true
+                border.width: activeFocus ? 2 : 0
+                border.color: activeFocus ? Theme.fg : "transparent"
+
+                function save(): void {
+                    if (ThemeProfiles.saveProfile(nameInput.text))
+                        nameInput.text = "";
+                }
+
+                onClicked: save()
+                Keys.onReturnPressed: save()
+                Keys.onSpacePressed: save()
+            }
+        }
+    }
+}