1 files changed, 40 insertions, 14 deletions

diff --git a/appearance/AppearancePanel.qml b/appearance/AppearancePanel.qml
index 708682c..42bc454 100644
--- a/appearance/AppearancePanel.qml
+++ b/appearance/AppearancePanel.qml
@@ -21,6 +21,12 @@ Scope {
     property string tab: "wallpaper"
     property string notice: ""
 
+    readonly property var tabs: ["wallpaper", "theme", "sunset", "idle", "icons"]
+    readonly property var tabLabels: ({
+        wallpaper: "Wallpaper", theme: "Theme", sunset: "Sunset",
+        idle: "Idle", icons: "Icons",
+    })
+
     // What the mock screens show. Hovering a thumbnail previews it on the
     // targeted screen; the other keeps whatever is currently set.
     property string hovering: ""
@@ -35,6 +41,9 @@ Scope {
         // started, which for an autostarted one is the whole session.
         Udt.refresh();
         Wallpapers.refresh();
+        Hyprsunset.refresh();
+        Hypridle.refresh();
+        Icons.refresh();
         root.open = true;
     }
     function close() { root.open = false; }
@@ -99,7 +108,8 @@ Scope {
                 Keys.onEscapePressed: root.close()
                 Keys.onPressed: event => {
                     if (event.key === Qt.Key_Tab) {
-                        root.tab = root.tab === "theme" ? "wallpaper" : "theme";
+                        const i = root.tabs.indexOf(root.tab);
+                        root.tab = root.tabs[(i + 1) % root.tabs.length];
                         event.accepted = true;
                     }
                 }
@@ -121,20 +131,30 @@ Scope {
                     anchors.margins: 20
                     spacing: 16
 
-                    Row {
-                        spacing: 8
-                        Tab {
-                            text: "Wallpaper"
-                            selected: root.tab === "wallpaper"
-                            onClicked: root.tab = "wallpaper"
-                        }
-                        Tab {
-                            text: "Theme"
-                            selected: root.tab === "theme"
-                            onClicked: root.tab = "theme"
+                    // Centred against the panel, not against the hint: the row
+                    // reads as the drawer's own chrome rather than the first
+                    // line of a tab's content.
+                    Item {
+                        width: parent.width
+                        height: tabBar.implicitHeight
+
+                        Row {
+                            id: tabBar
+                            anchors.horizontalCenter: parent.horizontalCenter
+                            spacing: 8
+                            Repeater {
+                                model: root.tabs
+                                Tab {
+                                    required property var modelData
+                                    text: root.tabLabels[modelData]
+                                    selected: root.tab === modelData
+                                    onClicked: root.tab = modelData
+                                }
+                            }
                         }
-                        Item { width: 12; height: 1 }
+
                         Text {
+                            anchors.right: parent.right
                             anchors.verticalCenter: parent.verticalCenter
                             text: "Tab switches · Esc closes"
                             font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4 }
@@ -154,7 +174,13 @@ Scope {
                     Loader {
                         width: parent.width
                         height: parent.height - y
-                        sourceComponent: root.tab === "theme" ? themeTab : wallpaperTab
+                        // Existing tabs are inline Components; the new ones are
+                        // files. sourceComponent wins when it is non-null.
+                        sourceComponent: root.tab === "theme" ? themeTab
+                                       : root.tab === "wallpaper" ? wallpaperTab : null
+                        source: root.tab === "sunset" ? Qt.resolvedUrl("SunsetTab.qml")
+                              : root.tab === "idle" ? Qt.resolvedUrl("IdleTab.qml")
+                              : root.tab === "icons" ? Qt.resolvedUrl("IconsTab.qml") : ""
                     }
                 }
             }