From e4f4a32415b47d6d8332e82364cea669db07c00f Mon Sep 17 00:00:00 2001 From: "Danilo M." Date: Tue, 6 Oct 2026 10:27:19 +0200 Subject: feat(appearance): wallpapers by folder, system ones, quality borders The wallpaper tab showed every image under ~/Pictures/wallpapers in one grid. It now groups them by top-level folder, each behind a header that opens and closes it, and adds the distribution's /usr/share/wallpapers: its loose images as "system", its Plasma packages as "Plasma". A package carries one picture at several resolutions under contents/images/, some with a dark version under contents/images_dark/, so it shows once, the dark version where there is one and the largest of those, labelled with the package name rather than "5120x2880.png". Groups are keyed apart from their names, so a local folder called "system" does not share open state with the system group. Open state lives in the Wallpapers singleton, because the panel is destroyed on close. The list is one flat ListView of rows, a header or a row of thumbnails, so only rows in view (plus cacheBuffer) are instantiated and decode. A first version made each folder one delegate, which loaded every image of a folder as soon as it opened; the system group alone is 727. The rows live in a ListModel and a toggle inserts or removes only that folder's rows: assigning a fresh JS array instead resets the view, which loses the scroll position and re-decodes everything visible. cacheBuffer is clamped at 0 because the column's width reads negative before layout and the ListView warns on each negative value. The scan's find calls go through a small shell function rather than eval. Each thumbnail's 2px border tells how it will look on the targeted screen. `file -N -0` reads every image's size from its header after each scan, ~0.6s for 1161; the NUL keeps names containing ": " intact, and the size is the last WxH in the description because a JPEG's "density 72x72" comes first. wallp runs swaybg -m fill, which scales to cover, so the measure is the enlargement factor: <=1 green, <=1.33 yellow, else red, in the udt palette colours. A note under the mock screens, in that colour, gives the size, the factor and why it will look soft or pixelated, for the hovered image or else the staged one. The staged image keeps its accent border. Screen sizes are fixed, as the mock's already were. Co-Authored-By: Claude Opus 5.5 --- appearance/Wallpapers.qml | 127 ++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 124 insertions(+), 3 deletions(-) (limited to 'appearance/Wallpapers.qml') diff --git a/appearance/Wallpapers.qml b/appearance/Wallpapers.qml index 0317ea5..9f43675 100644 --- a/appearance/Wallpapers.qml +++ b/appearance/Wallpapers.qml @@ -23,6 +23,10 @@ Singleton { readonly property string home: Quickshell.env("HOME") readonly property string dir: `${home}/Pictures/wallpapers` + // The distribution's wallpapers: loose images, and Plasma packages that + // each carry one picture at several resolutions under contents/images/, + // some with a dark version under contents/images_dark/. + readonly property string sysDir: "/usr/share/wallpapers" // Which screen a pick applies to. wallp calls them H and V. property string target: "H" @@ -64,20 +68,137 @@ Singleton { Process { id: scanProc running: true + // img DIR "DEPTH" [ACTIONS...]: the image files under DIR. DEPTH is + // left unquoted on purpose, so "-maxdepth 2" splits into two words + // and "" vanishes. command: ["sh", "-c", - `find ${JSON.stringify(root.dir)} -maxdepth 2 -type f ` + - `\\( -iname '*.png' -o -iname '*.jpg' -o -iname '*.jpeg' -o -iname '*.webp' \\) ` + - `-not -path '*/.*' -printf '%T@ %p\\n' 2>/dev/null | sort -rn | cut -d' ' -f2-`] + `img() { d=$1; o=$2; shift 2; find "$d" $o -type f ` + + `\\( -iname '*.png' -o -iname '*.jpg' -o -iname '*.jpeg' -o -iname '*.webp' \\) "$@" 2>/dev/null; }; ` + + `img ${JSON.stringify(root.dir)} "-maxdepth 2" -not -path '*/.*' -printf '%T@ %p\\n' | sort -rn | cut -d' ' -f2-; ` + + `img ${JSON.stringify(root.sysDir)} "-maxdepth 1" | sort; ` + + `img ${JSON.stringify(root.sysDir)} "" -path '*/contents/images*/*'`] stdout: StdioCollector { onStreamFinished: { root.files = text.trim().split("\n").filter(s => s.length); root.scanning = false; + sizeProc.running = false; + sizeProc.command = ["sh", "-c", 'printf "%s\\0" "$@" | xargs -0 -r file -N -0', "sh"].concat(root.files); + sizeProc.running = true; } } } + // Each file's pixel size, by path, from `file`, which reads only the + // header: about half a second for a thousand. -0 ends the name with a + // NUL, since a name can hold the ": " that would otherwise end it. The + // size is the last WxH in the description, because a JPEG's comes after + // its "density 72x72". A file `file` gives no size for has no entry and + // gets no quality colour. + property var sizes: ({}) + Process { + id: sizeProc + stdout: StdioCollector { + onStreamFinished: { + const out = {}; + for (const line of text.split("\n")) { + const nul = line.indexOf("\0"); + if (nul < 0) continue; + const re = /(\d+) ?x ?(\d+)/g; + let m, last = null; + while ((m = re.exec(line.slice(nul + 1))) !== null) last = m; + if (last) out[line.slice(0, nul)] = { w: +last[1], h: +last[2] }; + } + root.sizes = out; + } + } + } + + // The screens wallp sets, as the mock draws them: DP-1 wide, DP-3 turned + // upright. + // ponytail: fixed, like the mock; read Quickshell.screens if a monitor + // changes. + readonly property var panels: ({ H: { w: 2560, h: 1080 }, V: { w: 1080, h: 1920 } }) + + // How far swaybg's `-m fill` has to enlarge an image to cover a screen, + // 0 when the size is unknown. At or under 1 it is downscaled and sharp; + // to 1.33 the softening is slight; past that it shows pixels. + function upscale(path, which) { + const s = sizes[path]; + const p = panels[which]; + return s && s.w > 0 && s.h > 0 ? Math.max(p.w / s.w, p.h / s.h) : 0; + } + function qualityColor(path, which) { + const u = upscale(path, which); + return u === 0 ? "transparent" : u <= 1 ? Theme.green : u <= 1.33 ? Theme.yellow : Theme.red; + } + // Why an image that fits will still look bad, or "" when it will not. + function qualityNote(path, which) { + const u = upscale(path, which); + if (u <= 1) return ""; + const s = sizes[path], p = panels[which]; + return `${s.w}×${s.h} is enlarged ${u.toFixed(2)}× to cover the ${p.w}×${p.h} screen: ` + + (u <= 1.33 ? "each image pixel is spread over more than one screen pixel, so it will look slightly soft." + : "each image pixel becomes a visible block, so it will look pixelated."); + } + function basename(path) { return path.slice(path.lastIndexOf("/") + 1); } + // The files by the subfolder they sit in, folders by name, each keeping + // the newest-first order of `files`. Images loose in `dir` itself form a + // group named after it, which sorts first. A folder with no images at + // the scanned depth has no group. The system ones follow: its loose + // images as "system", and the Plasma packages as "Plasma", one image + // each: the dark version where the package has one, else the light, and + // of those the largest by the WxH its file is named after. `key` is what + // `expanded` is indexed by, so a local folder named "system" stays apart. + readonly property var groups: { + const local = {}, system = [], plasma = {}; + for (const f of files) { + if (f.startsWith(dir + "/")) { + const rel = f.slice(dir.length + 1); + const key = rel.includes("/") ? rel.slice(0, rel.indexOf("/")) : ""; + if (!local[key]) local[key] = []; + local[key].push(f); + } else if (f.includes("/contents/images")) { + const pkg = f.slice(sysDir.length + 1).split("/")[0]; + if (!plasma[pkg] || rank(f) > rank(plasma[pkg])) plasma[pkg] = f; + } else { + system.push(f); + } + } + const byName = (a, b) => a.localeCompare(b, undefined, { sensitivity: "base" }); + return Object.keys(local).sort(byName) + .map(k => ({ key: "local/" + k, name: k || basename(dir), files: local[k] })) + .concat([ + { key: "system", name: "system", files: system }, + { key: "plasma", name: "Plasma", files: Object.keys(plasma).sort(byName).map(k => plasma[k]) }, + ]) + .filter(g => g.files.length > 0); + } + + // Dark outranks any light, then size decides. + function rank(path) { + const m = /(\d+)x(\d+)\.\w+$/.exec(path); + return (path.includes("/contents/images_dark/") ? 1e12 : 0) + (m ? m[1] * m[2] : 0); + } + + // What a thumbnail is called: a Plasma package's file is named after its + // resolution, so it goes by the package instead. + function label(path) { + const i = path.indexOf("/contents/images"); + return i < 0 ? basename(path) : basename(path.slice(0, i)); + } + + // Which groups are open, by key. Here rather than in the panel, which is + // destroyed on close, so a folder left open is open next time. Reassigned + // whole, because bindings do not see a key change inside a var. + property var expanded: ({}) + function toggle(key) { + const e = Object.assign({}, expanded); + e[key] = !e[key]; + expanded = e; + } + // What is on each screen now. wallp writes these on every set, so // watching them keeps the mock honest even when set from a terminal. property string currentH: "" -- cgit v1.2.3