Give the desktop real themes, video wallpapers, and honest titlebars

Appearance now opens on Themes: light and dark side by side, each
remembering its own choice, over galleries of ten shipped themes —
Tokyo Moon and Day joined by Moon Rose, Catppuccin, Nord, Gruvbox and
Everforest in both modes. A theme is a complete palette: the catalog
lives in themes.json, Theme.qml reads every color token from the
active record, and one render pipeline carries it to kitty, tmux,
btop, GTK, Vicinae, Firefox's chrome, and the lock screen. The Theme
editor builds new ones from four wells — wheel, hex, or eyedropper —
with derived surfaces, a saturation slider, debounced fine-tune, and
effects that save with the theme. Custom edits finally keep GNOME's
accent, kitty's border, and hyprlock in sync.

Wallpapers can be video: mpvpaper per output, hardware-decoded, muted
and looped, supervised and respawned. Panama owns the pausing — games,
battery, and a bar pill for right now — because the compositor
rebuilds full-screen blur for every frame a video wallpaper draws.
The lock screen gets a still frame.

Titlebars stop lying. GNOME apps get close-only on your chosen side,
the maximize and double-click settings are gone, the Settings window
obeys the same rules, and its titlebar can be turned off entirely.
Typography becomes five labeled dropdowns instead of a wall of
samples.

Contracts updated and written throughout (165 now); per the redesign
workflow none were executed — the full sweep runs once at the end.

Claude-Session: https://claude.ai/code/session_01Ms2FbjQy31TVf3CEvQhGM8

config/dot/quickshell/modules/settings/WallpaperPicker.qml

@@ -34,16 +34,24 @@ Item {
     property var setAssignmentAction: function(output, path) { Wallpaper.setAssignment(output, path); }
     readonly property int collapsedRows: 2
 
-    readonly property var shown: root.expanded
-        ? Wallpaper.available
-        : Wallpaper.available.slice(0, root.columns * root.collapsedRows)
+    // Videos join the grid only in single mode — slideshow and per-display
+    // are hyprpaper's modes and stills-only.
+    readonly property var catalog: root.mode === "single"
+        ? Wallpaper.available.concat(VideoWallpaper.candidates)
+        : Wallpaper.available
 
-    readonly property int hidden: Wallpaper.available.length - root.shown.length
+    readonly property var shown: root.expanded
+        ? root.catalog
+        : root.catalog.slice(0, root.columns * root.collapsedRows)
+
+    readonly property int hidden: root.catalog.length - root.shown.length
 
     readonly property int columns: Math.max(2, Math.floor(width / 190))
     readonly property real cellWidth: columns > 0 ? (width - (columns - 1) * 10) / columns : 160
 
     function isCurrent(path: string): bool {
+        if (VideoWallpaper.active)
+            return VideoWallpaper.path === path;
         return root.activeByOutput[root.selectedOutput] === path;
     }
 
@@ -80,6 +88,7 @@ Item {
                 required property var modelData
 
                 readonly property bool current: root.isCurrent(tile.modelData)
+                readonly property bool video: VideoWallpaper.isVideo(tile.modelData)
                 readonly property bool member: root.mode === "slideshow" && root.selected(tile.modelData)
 
                 width: root.cellWidth
@@ -93,7 +102,8 @@ Item {
                     id: thumbnail
 
                     anchors.fill: parent
-                    source: "file://" + tile.modelData
+                    visible: !tile.video
+                    source: tile.video ? "" : "file://" + tile.modelData
                     fillMode: Image.PreserveAspectCrop
                     asynchronous: true
                     // Decode to roughly the size actually drawn. Without this a
@@ -120,6 +130,48 @@ Item {
                     }
                 }
 
+                // A video tile draws a play badge instead of a thumbnail —
+                // decoding a frame per tile is exactly the cost this feature
+                // is designed to avoid paying casually.
+                Rectangle {
+                    anchors.fill: parent
+                    visible: tile.video
+                    radius: parent.radius
+                    gradient: Gradient {
+                        GradientStop { position: 0; color: Theme.alpha(Theme.accent, 0.14) }
+                        GradientStop { position: 1; color: Theme.alpha(Theme.bgDark, 0.9) }
+                    }
+
+                    Text {
+                        anchors.centerIn: parent
+                        text: "\u{F040A}"
+                        color: Theme.alpha(Theme.fg, 0.8)
+                        font.family: Theme.fontMono
+                        font.pixelSize: 26
+                    }
+
+                    Rectangle {
+                        anchors.top: parent.top
+                        anchors.right: parent.right
+                        anchors.margins: 7
+                        width: videoBadge.implicitWidth + 14
+                        height: 20
+                        radius: Theme.pillRadius
+                        color: Theme.alpha(Theme.bgDark, 0.75)
+
+                        Text {
+                            id: videoBadge
+                            anchors.centerIn: parent
+                            text: "VIDEO"
+                            color: Theme.fgDim
+                            font.family: Theme.fontFamily
+                            font.pixelSize: 9
+                            font.weight: Font.DemiBold
+                            font.letterSpacing: 0.5
+                        }
+                    }
+                }
+
                 Text {
                     anchors.centerIn: parent
                     visible: thumbnail.status === Image.Loading