Squashed commit of the following:

commit 990d86d481
Author: bbedward <bbedward@gmail.com>
Date:   Sat Jul 18 10:43:22 2026 -0400

    flake: update-common

commit 526cb157fd
Author: bbedward <bbedward@gmail.com>
Date:   Thu Jul 16 17:56:40 2026 -0400

    i18n: update sync scrirpt for dank-qml-common

commit 92ba96d9f9
Author: bbedward <bbedward@gmail.com>
Date:   Thu Jul 16 09:24:37 2026 -0400

    qs: integrate with dank-qml-common

quickshell/AGENTS.md

@@ -141,13 +141,15 @@ DankMaterialShell/
 │   │   ├── ipp/        # Internet Printing Protocol
 │   │   └── syncmap/    # Thread-safe map
 │   └── go.mod          # Go module definition
+├── dank-qml-common/    # Shared widget library (git submodule)
 ├── quickshell/         # QML frontend (UI layer) - see "QML Frontend Architecture" below
 │   ├── shell.qml       # Main entry point
 │   ├── Services/       # IPC client wrappers
 │   ├── Modules/        # UI components
 │   ├── Widgets/        # Reusable controls
 │   ├── Modals/         # Full-screen overlays
-│   └── Common/         # Shared resources
+│   ├── Common/         # Shared resources
+│   └── DankCommon/     # Symlink to ../dank-qml-common/DankCommon
 ├── distro/             # Distribution packaging
 │   ├── arch/           # AUR packages
 │   ├── fedora/         # RPM specs
@@ -490,6 +492,8 @@ import qs.Services       // For service access
 import qs.Widgets        // For reusable widgets (DankIcon, etc.)
 ```
 
+Many widgets in `Widgets/`, `Common/`, and `Modals/FileBrowser/` are thin wrappers over the shared dank-qml-common library (`quickshell/DankCommon/`, a submodule symlink). Keep importing them through `qs.Widgets`, `qs.Common`, and `qs.Modals.FileBrowser` — the wrappers are the stable API for the shell and for plugins. Edit the implementations in `dank-qml-common/` (see CONTRIBUTING.md, "Shared widgets").
+
 #### Go Import Order
 
 Follow standard Go conventions:

quickshell/Common/Appearance.qml

@@ -1,66 +1,11 @@
 pragma Singleton
-pragma ComponentBehavior: Bound
 
-import QtQuick
 import Quickshell
+import qs.DankCommon.Common as DankCommon
 
 Singleton {
-    id: root
-
-    readonly property Rounding rounding: Rounding {}
-    readonly property Spacing spacing: Spacing {}
-    readonly property FontSize fontSize: FontSize {}
-    readonly property Anim anim: Anim {}
-
-    component Rounding: QtObject {
-        readonly property int small: 8
-        readonly property int normal: 12
-        readonly property int large: 16
-        readonly property int extraLarge: 24
-        readonly property int full: 1000
-    }
-
-    component Spacing: QtObject {
-        readonly property int small: 4
-        readonly property int normal: 8
-        readonly property int large: 12
-        readonly property int extraLarge: 16
-        readonly property int huge: 24
-    }
-
-    component FontSize: QtObject {
-        readonly property int small: 12
-        readonly property int normal: 14
-        readonly property int large: 16
-        readonly property int extraLarge: 20
-        readonly property int huge: 24
-    }
-
-    component AnimCurves: QtObject {
-        readonly property list<real> standard: [0.2, 0, 0, 1, 1, 1]
-        readonly property list<real> standardAccel: [0.3, 0, 1, 1, 1, 1]
-        readonly property list<real> standardDecel: [0, 0, 0, 1, 1, 1]
-        readonly property list<real> emphasized: [0.05, 0, 2 / 15, 0.06, 1
-            / 6, 0.4, 5 / 24, 0.82, 0.25, 1, 1, 1]
-        readonly property list<real> emphasizedAccel: [0.3, 0, 0.8, 0.15, 1, 1]
-        readonly property list<real> emphasizedDecel: [0.05, 0.7, 0.1, 1, 1, 1]
-        readonly property list<real> expressiveFastSpatial: [0.42, 1.67, 0.21, 0.9, 1, 1]
-        readonly property list<real> expressiveDefaultSpatial: [0.38, 1.21, 0.22, 1, 1, 1]
-        readonly property list<real> expressiveEffects: [0.34, 0.8, 0.34, 1, 1, 1]
-    }
-
-    component AnimDurations: QtObject {
-        readonly property int quick: 150
-        readonly property int normal: 300
-        readonly property int slow: 500
-        readonly property int extraSlow: 1000
-        readonly property int expressiveFastSpatial: 350
-        readonly property int expressiveDefaultSpatial: 500
-        readonly property int expressiveEffects: 200
-    }
-
-    component Anim: QtObject {
-        readonly property AnimCurves curves: AnimCurves {}
-        readonly property AnimDurations durations: AnimDurations {}
-    }
+    readonly property var rounding: DankCommon.Appearance.rounding
+    readonly property var spacing: DankCommon.Appearance.spacing
+    readonly property var fontSize: DankCommon.Appearance.fontSize
+    readonly property var anim: DankCommon.Appearance.anim
 }

quickshell/Common/DankAnim.qml

@@ -1,9 +1,3 @@
-import QtQuick
-import qs.Common
+import qs.DankCommon.Common as DankCommon
 
-// Reusable NumberAnimation wrapper
-NumberAnimation {
-    duration: Theme.expressiveDurations.normal
-    easing.type: Easing.BezierSpline
-    easing.bezierCurve: Theme.expressiveCurves.standard
-}
+DankCommon.DankAnim {}

quickshell/Common/DankColorAnim.qml

@@ -1,9 +1,3 @@
-import QtQuick
-import qs.Common
+import qs.DankCommon.Common as DankCommon
 
-// Reusable ColorAnimation wrapper
-ColorAnimation {
-    duration: Theme.expressiveDurations.normal
-    easing.type: Easing.BezierSpline
-    easing.bezierCurve: Theme.expressiveCurves.standard
-}
+DankCommon.DankColorAnim {}

quickshell/Common/DankSocket.qml

@@ -1,64 +1,3 @@
-import QtQuick
-import Quickshell.Io
+import qs.DankCommon.Common as DankCommon
 
-Item {
-    id: root
-
-    property alias path: socket.path
-    property alias parser: socket.parser
-    property bool connected: false
-    property bool linkUp: false
-
-    property int reconnectBaseMs: 400
-    property int reconnectMaxMs: 15000
-
-    property int _reconnectAttempt: 0
-
-    signal connectionStateChanged
-
-    onConnectedChanged: {
-        socket.connected = connected;
-    }
-
-    Socket {
-        id: socket
-
-        onConnectionStateChanged: {
-            root.linkUp = connected;
-            root.connectionStateChanged();
-            if (connected) {
-                root._reconnectAttempt = 0;
-                return;
-            }
-            if (root.connected) {
-                root._scheduleReconnect();
-            }
-        }
-    }
-
-    Timer {
-        id: reconnectTimer
-        interval: 0
-        repeat: false
-        onTriggered: {
-            socket.connected = false;
-            Qt.callLater(() => socket.connected = true);
-        }
-    }
-
-    function send(data) {
-        const json = typeof data === "string" ? data : JSON.stringify(data);
-        const message = json.endsWith("\n") ? json : json + "\n";
-        socket.write(message);
-        socket.flush();
-    }
-
-    function _scheduleReconnect() {
-        const pow = Math.min(_reconnectAttempt, 10);
-        const base = Math.min(reconnectBaseMs * Math.pow(2, pow), reconnectMaxMs);
-        const jitter = Math.floor(Math.random() * Math.floor(base / 4));
-        reconnectTimer.interval = base + jitter;
-        reconnectTimer.restart();
-        _reconnectAttempt++;
-    }
-}
+DankCommon.DankSocket {}

quickshell/Common/ElevationShadow.qml

@@ -1,54 +1,3 @@
-pragma ComponentBehavior: Bound
+import qs.DankCommon.Common as DankCommon
 
-import QtQuick
-import qs.Common
-
-Item {
-    id: root
-
-    property var level: Theme.elevationLevel2
-    property string direction: Theme.elevationLightDirection
-    property real fallbackOffset: 4
-
-    property color targetColor: "white"
-    property real targetRadius: Theme.cornerRadius
-    property real topLeftRadius: targetRadius
-    property real topRightRadius: targetRadius
-    property real bottomLeftRadius: targetRadius
-    property real bottomRightRadius: targetRadius
-    property color borderColor: "transparent"
-    property real borderWidth: 0
-
-    property real sourceX: 0
-    property real sourceY: 0
-    property real sourceWidth: width
-    property real sourceHeight: height
-
-    property bool shadowEnabled: Theme.elevationEnabled
-    property real shadowBlurPx: level && level.blurPx !== undefined ? level.blurPx : 0
-    property real shadowSpreadPx: level && level.spreadPx !== undefined ? level.spreadPx : 0
-    property real shadowOffsetX: Theme.elevationOffsetXFor(level, direction, fallbackOffset)
-    property real shadowOffsetY: Theme.elevationOffsetYFor(level, direction, fallbackOffset)
-    property color shadowColor: Theme.elevationShadowColor(level)
-    property real shadowOpacity: 1
-
-    readonly property var _ambient: Theme.elevationAmbient(level)
-    readonly property real _pad: shadowEnabled ? Math.ceil(Math.max(shadowBlurPx + shadowSpreadPx + Math.max(Math.abs(shadowOffsetX), Math.abs(shadowOffsetY)), _ambient.blurPx + _ambient.spreadPx) + 2) : 0
-
-    ShaderEffect {
-        anchors.fill: parent
-        anchors.margins: -root._pad
-        fragmentShader: Qt.resolvedUrl("../Shaders/qsb/elevation_rect.frag.qsb")
-
-        property real widthPx: width
-        property real heightPx: height
-        property real borderWidth: root.borderWidth
-        property vector4d rectPx: Qt.vector4d(root._pad + root.sourceX, root._pad + root.sourceY, root.sourceWidth, root.sourceHeight)
-        property vector4d cornerRadius: Qt.vector4d(root.topLeftRadius, root.topRightRadius, root.bottomRightRadius, root.bottomLeftRadius)
-        property vector4d fillColor: Qt.vector4d(root.targetColor.r, root.targetColor.g, root.targetColor.b, root.targetColor.a)
-        property vector4d borderColor: Qt.vector4d(root.borderColor.r, root.borderColor.g, root.borderColor.b, root.borderColor.a)
-        property vector4d shadowColor: Qt.vector4d(root.shadowColor.r, root.shadowColor.g, root.shadowColor.b, root.shadowEnabled ? root.shadowColor.a * root.shadowOpacity : 0)
-        property vector4d shadowParam: Qt.vector4d(Math.max(0, root.shadowBlurPx), root.shadowSpreadPx, root.shadowOffsetX, root.shadowOffsetY)
-        property vector4d ambientParam: Qt.vector4d(root._ambient.blurPx, root._ambient.spreadPx, root.shadowEnabled ? root._ambient.alpha * root.shadowOpacity : 0, 0)
-    }
-}
+DankCommon.ElevationShadow {}

quickshell/Common/I18n.qml

@@ -25,6 +25,7 @@ Singleton {
     readonly property bool isRtl: _rtlLanguages.includes(_lang)
 
     readonly property url translationsFolder: Qt.resolvedUrl("../translations/poexports")
+    readonly property url commonTranslationsFolder: Qt.resolvedUrl("../DankCommon/translations/poexports")
 
     readonly property alias folder: dir.folder
     property var presentLocales: ({
@@ -32,8 +33,11 @@ Singleton {
         })
     property var translations: ({})
     property bool translationsLoaded: false
+    property var commonTranslations: ({})
+    property bool commonTranslationsLoaded: false
 
     property url _selectedPath: ""
+    property url _commonSelectedPath: ""
 
     FolderListModel {
         id: dir
@@ -48,6 +52,18 @@ Singleton {
         }
     }
 
+    FolderListModel {
+        id: commonDir
+        folder: root.commonTranslationsFolder
+        nameFilters: ["*.json"]
+        showDirs: false
+        showDotAndDotDot: false
+
+        onStatusChanged: if (status === FolderListModel.Ready) {
+            root._pickCommonTranslation();
+        }
+    }
+
     FileView {
         id: translationLoader
         path: root._selectedPath
@@ -69,6 +85,22 @@ Singleton {
         }
     }
 
+    FileView {
+        id: commonTranslationLoader
+        path: root._commonSelectedPath
+        printErrors: false
+
+        onLoaded: {
+            try {
+                root.commonTranslations = JSON.parse(text());
+                root.commonTranslationsLoaded = true;
+                log.info(`I18n: Loaded DankCommon translations (${Object.keys(root.commonTranslations).length} contexts)`);
+            } catch (e) {
+                log.warn("I18n: Error parsing DankCommon translations:", e);
+            }
+        }
+    }
+
     function locale() {
         if (SessionData.timeLocale)
             return Qt.locale(SessionData.timeLocale);
@@ -117,29 +149,58 @@ Singleton {
         log.warn("Falling back to built-in English strings");
     }
 
+    function _pickCommonTranslation() {
+        const present = {};
+        for (let i = 0; i < commonDir.count; i++) {
+            const name = commonDir.get(i, "fileName");
+            if (name && name.endsWith(".json"))
+                present[name.slice(0, -5)] = true;
+        }
+        for (let i = 0; i < _candidates.length; i++) {
+            if (!present[_candidates[i]])
+                continue;
+            _commonSelectedPath = commonTranslationsFolder + "/" + _candidates[i] + ".json";
+            return;
+        }
+    }
+
+    function _lookup(table, term, context) {
+        if (!table)
+            return "";
+        if (context && table[context] && table[context][term])
+            return table[context][term];
+        if (table[term] && table[term][term])
+            return table[term][term];
+        for (const c in table) {
+            if (table[c] && table[c][term])
+                return table[c][term];
+        }
+        return "";
+    }
+
     // isRealContext is consumed by translations/extract_translations.py only:
     // pass a literal `true` (same line) to give (term, context) its own POEditor
     // translation slot. Lookup ignores it -- a real context exists as a bucket
     // in the export, a comment-only context does not.
     function tr(term, context, isRealContext) {
-        if (!translationsLoaded || !translations)
-            return term;
-        if (context && translations[context] && translations[context][term])
-            return translations[context][term];
-        if (translations[term] && translations[term][term])
-            return translations[term][term];
-        for (const c in translations) {
-            if (translations[c] && translations[c][term])
-                return translations[c][term];
+        if (translationsLoaded) {
+            const hit = _lookup(translations, term, context);
+            if (hit)
+                return hit;
+        }
+        if (commonTranslationsLoaded) {
+            const hit = _lookup(commonTranslations, term, context);
+            if (hit)
+                return hit;
         }
         return term;
     }
 
     function trContext(context, term) {
-        if (!translationsLoaded || !translations)
-            return term;
-        if (translations[context] && translations[context][term])
+        if (translationsLoaded && translations[context] && translations[context][term])
             return translations[context][term];
+        if (commonTranslationsLoaded && commonTranslations[context] && commonTranslations[context][term])
+            return commonTranslations[context][term];
         return term;
     }
 }

quickshell/Common/ListViewTransitions.qml

@@ -1,72 +1,13 @@
 pragma Singleton
-pragma ComponentBehavior: Bound
 
 import QtQuick
 import Quickshell
-import qs.Common
+import qs.DankCommon.Common as DankCommon
 
-// Reusable ListView/GridView transitions
 Singleton {
-    id: root
-
-    // 0ms ViewTransitions break ListView delegate cleanup, so null the set when the shortest
-    // duration truncates to 0. Keep this gate - don't inline these back into add/remove/etc.
-    readonly property bool enabled: Math.floor(Theme.currentAnimationBaseDuration * 0.4) >= 1
-
-    readonly property Transition add: enabled ? _add : null
-    readonly property Transition remove: null
-    readonly property Transition displaced: enabled ? _displaced : null
-    readonly property Transition move: enabled ? _move : null
-
-    readonly property int _staggerMs: Math.round(Theme.currentAnimationBaseDuration * 0.03)
-    readonly property int _staggerCap: 8
-
-    readonly property Transition _add: Transition {
-        id: addTransition
-
-        SequentialAnimation {
-            PropertyAction {
-                property: "opacity"
-                value: 0
-            }
-            PauseAnimation {
-                duration: Math.max(0, Math.min(addTransition.ViewTransition.index - (addTransition.ViewTransition.targetIndexes[0] ?? 0), root._staggerCap)) * root._staggerMs
-            }
-            DankAnim {
-                property: "opacity"
-                from: 0
-                to: 1
-                duration: Theme.expressiveDurations.fast
-                easing.bezierCurve: Theme.expressiveCurves.emphasizedDecel
-            }
-        }
-    }
-
-    readonly property Transition _displaced: Transition {
-        DankAnim {
-            property: "y"
-            duration: Theme.expressiveDurations.fast
-            easing.bezierCurve: Theme.expressiveCurves.standard
-        }
-        DankAnim {
-            property: "opacity"
-            to: 1
-            duration: Theme.expressiveDurations.fast
-            easing.bezierCurve: Theme.expressiveCurves.standard
-        }
-    }
-
-    readonly property Transition _move: Transition {
-        DankAnim {
-            property: "y"
-            duration: Theme.expressiveDurations.fast
-            easing.bezierCurve: Theme.expressiveCurves.standard
-        }
-        DankAnim {
-            property: "opacity"
-            to: 1
-            duration: Theme.expressiveDurations.fast
-            easing.bezierCurve: Theme.expressiveCurves.standard
-        }
-    }
+    readonly property bool enabled: DankCommon.ListViewTransitions.enabled
+    readonly property Transition add: DankCommon.ListViewTransitions.add
+    readonly property Transition remove: DankCommon.ListViewTransitions.remove
+    readonly property Transition displaced: DankCommon.ListViewTransitions.displaced
+    readonly property Transition move: DankCommon.ListViewTransitions.move
 }

quickshell/Common/Paths.qml

@@ -108,6 +108,14 @@ Singleton {
         return themedIconPath(iconName) || DesktopService.resolveIconPath(iconName);
     }
 
+    function trashPath(path: string, callback): void {
+        TrashService.trashPath(path, callback);
+    }
+
+    function copyPathToClipboard(path: string): void {
+        Quickshell.execDetached([Proc.dmsBin, "cl", "copy", path]);
+    }
+
     function resolveIconUrl(iconName: string): string {
         if (!iconName)
             return "";

quickshell/Common/Proc.qml

@@ -1,157 +1,13 @@
 pragma Singleton
-pragma ComponentBehavior: Bound
 
-import QtQuick
 import Quickshell
-import Quickshell.Io
-import qs.Services
+import qs.DankCommon.Common as DankCommon
 
 Singleton {
-    id: root
-    readonly property var log: Log.scoped("Proc")
-
-    readonly property int noTimeout: -1
-    readonly property string dmsBin: Quickshell.env("DMS_EXECUTABLE") || "dms"
-    property int defaultDebounceMs: 50
-    property int defaultTimeoutMs: 10000
-    property var _procDebouncers: ({})
+    readonly property int noTimeout: DankCommon.Proc.noTimeout
+    readonly property string dmsBin: DankCommon.Proc.dmsBin
 
     function runCommand(id, command, callback, debounceMs, timeoutMs) {
-        const wait = (typeof debounceMs === "number" && debounceMs >= 0) ? debounceMs : defaultDebounceMs;
-        const timeout = (typeof timeoutMs === "number") ? timeoutMs : defaultTimeoutMs;
-        let procId = id ? id : Math.random();
-        const isRandomId = !id;
-
-        if (!_procDebouncers[procId]) {
-            const t = debounceTimerComp.createObject(root);
-            t.triggered.connect(function () {
-                _launchProc(procId, isRandomId);
-            });
-            _procDebouncers[procId] = {
-                timer: t,
-                command: command,
-                callback: callback,
-                waitMs: wait,
-                timeoutMs: timeout,
-                isRandomId: isRandomId
-            };
-        } else {
-            _procDebouncers[procId].command = command;
-            _procDebouncers[procId].callback = callback;
-            _procDebouncers[procId].waitMs = wait;
-            _procDebouncers[procId].timeoutMs = timeout;
-        }
-
-        const entry = _procDebouncers[procId];
-        entry.timer.interval = entry.waitMs;
-        entry.timer.restart();
-    }
-
-    function _launchProc(id, isRandomId) {
-        const entry = _procDebouncers[id];
-        if (!entry)
-            return;
-        const proc = procComp.createObject(root, {
-            command: entry.command
-        });
-        const timeoutTimer = debounceTimerComp.createObject(root);
-
-        let capturedOut = "";
-        let capturedErr = "";
-        let exitSeen = false;
-        let exitCodeValue = -1;
-        let outSeen = false;
-        let errSeen = false;
-        let timedOut = false;
-
-        timeoutTimer.interval = entry.timeoutMs;
-        timeoutTimer.triggered.connect(function () {
-            if (!exitSeen) {
-                timedOut = true;
-                proc.running = false;
-                exitSeen = true;
-                exitCodeValue = 124;
-                maybeComplete();
-            }
-        });
-
-        proc.stdout.streamFinished.connect(function () {
-            try {
-                capturedOut = proc.stdout.text || "";
-            } catch (e) {
-                capturedOut = "";
-            }
-            outSeen = true;
-            maybeComplete();
-        });
-
-        proc.stderr.streamFinished.connect(function () {
-            try {
-                capturedErr = proc.stderr.text || "";
-            } catch (e) {
-                capturedErr = "";
-            }
-            errSeen = true;
-            maybeComplete();
-        });
-
-        proc.exited.connect(function (code) {
-            timeoutTimer.stop();
-            exitSeen = true;
-            exitCodeValue = code;
-            maybeComplete();
-        });
-
-        function maybeComplete() {
-            if (!exitSeen || !outSeen || !errSeen)
-                return;
-            timeoutTimer.stop();
-            if (entry && entry.callback && typeof entry.callback === "function") {
-                try {
-                    const safeOutput = capturedOut !== null && capturedOut !== undefined ? capturedOut : "";
-                    const safeExitCode = exitCodeValue !== null && exitCodeValue !== undefined ? exitCodeValue : -1;
-                    entry.callback(safeOutput, safeExitCode);
-                } catch (e) {
-                    log.warn("runCommand callback error for command:", entry.command, "Error:", e);
-                }
-            }
-            try {
-                proc.destroy();
-            } catch (_) {}
-            try {
-                timeoutTimer.destroy();
-            } catch (_) {}
-
-            if (isRandomId || entry.isRandomId) {
-                Qt.callLater(function () {
-                    if (_procDebouncers[id]) {
-                        try {
-                            _procDebouncers[id].timer.destroy();
-                        } catch (_) {}
-                        delete _procDebouncers[id];
-                    }
-                });
-            }
-        }
-
-        proc.running = true;
-        if (entry.timeoutMs !== noTimeout)
-            timeoutTimer.start();
-    }
-
-    Component {
-        id: debounceTimerComp
-        Timer {
-            repeat: false
-        }
-    }
-
-    Component {
-        id: procComp
-        Process {
-            running: false
-            stdout: StdioCollector {}
-            stderr: StdioCollector {}
-        }
+        DankCommon.Proc.runCommand(id, command, callback, debounceMs, timeoutMs);
     }
 }

quickshell/Common/Theme.qml

@@ -6,6 +6,7 @@ import QtQuick
 import Quickshell
 import Quickshell.Io
 import qs.Common
+import qs.DankCommon.Common as DankCommon
 import qs.Services
 import qs.Modules.Greetd
 import "StockThemes.js" as StockThemes
@@ -1230,16 +1231,28 @@ Singleton {
 
     property string fontFamily: {
         if (typeof SessionData !== "undefined" && SessionData.isGreeterMode && typeof GreetdSettings !== "undefined") {
-            return GreetdSettings.getEffectiveFontFamily();
+            return resolvedFontFamily(GreetdSettings.getEffectiveFontFamily());
         }
-        return typeof SettingsData !== "undefined" ? SettingsData.fontFamily : "Inter Variable";
+        return typeof SettingsData !== "undefined" ? resolvedFontFamily(SettingsData.fontFamily) : DankCommon.Fonts.sans;
     }
 
     property string monoFontFamily: {
         if (typeof SessionData !== "undefined" && SessionData.isGreeterMode && typeof GreetdSettings !== "undefined") {
-            return GreetdSettings.monoFontFamily;
+            return resolvedMonoFontFamily(GreetdSettings.monoFontFamily);
         }
-        return typeof SettingsData !== "undefined" ? SettingsData.monoFontFamily : "Fira Code";
+        return typeof SettingsData !== "undefined" ? resolvedMonoFontFamily(SettingsData.monoFontFamily) : DankCommon.Fonts.mono;
+    }
+
+    function resolvedFontFamily(family) {
+        if (family === defaultFontFamily)
+            return DankCommon.Fonts.sans;
+        return family;
+    }
+
+    function resolvedMonoFontFamily(family) {
+        if (family === defaultMonoFontFamily)
+            return DankCommon.Fonts.mono;
+        return family;
     }
 
     property int fontWeight: {

quickshell/DankCommon

@@ -0,0 +1 @@
+../dank-qml-common/DankCommon

quickshell/Modals/FileBrowser/FileBrowserContent.qml

@@ -1,935 +1,3 @@
-import Qt.labs.folderlistmodel
-import QtCore
-import QtQuick
-import QtQuick.Controls
-import qs.Common
-import qs.Widgets
+import qs.DankCommon.Modals.FileBrowser as DankCommon
 
-FocusScope {
-    id: root
-
-    LayoutMirroring.enabled: I18n.isRtl
-    LayoutMirroring.childrenInherit: true
-
-    property string homeDir: StandardPaths.writableLocation(StandardPaths.HomeLocation)
-    property string docsDir: StandardPaths.writableLocation(StandardPaths.DocumentsLocation)
-    property string musicDir: StandardPaths.writableLocation(StandardPaths.MusicLocation)
-    property string videosDir: StandardPaths.writableLocation(StandardPaths.MoviesLocation)
-    property string picsDir: StandardPaths.writableLocation(StandardPaths.PicturesLocation)
-    property string downloadDir: StandardPaths.writableLocation(StandardPaths.DownloadLocation)
-    property string desktopDir: StandardPaths.writableLocation(StandardPaths.DesktopLocation)
-    property string currentPath: ""
-    property var fileExtensions: ["*.*"]
-    property alias filterExtensions: root.fileExtensions
-    property string browserTitle: "Select File"
-    property string browserIcon: "folder_open"
-    property string browserType: "generic"
-    property bool showHiddenFiles: false
-    property int selectedIndex: -1
-    property bool keyboardNavigationActive: false
-    property bool backButtonFocused: false
-    property bool saveMode: false
-    property string defaultFileName: ""
-    property int keyboardSelectionIndex: -1
-    property bool keyboardSelectionRequested: false
-    property bool showKeyboardHints: false
-    property bool showFileInfo: false
-    property string selectedFilePath: ""
-    property string selectedFileName: ""
-    property bool selectedFileIsDir: false
-    property bool showOverwriteConfirmation: false
-    property string pendingFilePath: ""
-    property bool showSidebar: true
-    property string viewMode: "grid"
-    property string sortBy: "name"
-    property bool sortAscending: true
-    property int iconSizeIndex: 1
-    property var iconSizes: [80, 120, 160, 200]
-    property bool pathEditMode: false
-    property bool pathInputHasFocus: false
-    property int actualGridColumns: 5
-    property bool _initialized: false
-    property bool closeOnEscape: true
-    property var windowControls: null
-
-    signal fileSelected(string path)
-    signal closeRequested
-
-    function encodeFileUrl(path) {
-        if (!path)
-            return "";
-        return "file://" + path.split('/').map(s => encodeURIComponent(s)).join('/');
-    }
-
-    function initialize() {
-        loadSettings();
-        currentPath = getLastPath();
-        _initialized = true;
-    }
-
-    function reset() {
-        currentPath = getLastPath();
-        selectedIndex = -1;
-        keyboardNavigationActive = false;
-        backButtonFocused = false;
-    }
-
-    function loadSettings() {
-        const type = browserType || "default";
-        const settings = CacheData.fileBrowserSettings[type];
-        const isImageBrowser = ["wallpaper", "profile"].includes(browserType);
-
-        if (settings) {
-            viewMode = settings.viewMode || (isImageBrowser ? "grid" : "list");
-            sortBy = settings.sortBy || "name";
-            sortAscending = settings.sortAscending !== undefined ? settings.sortAscending : true;
-            iconSizeIndex = settings.iconSizeIndex !== undefined ? settings.iconSizeIndex : 1;
-            showSidebar = settings.showSidebar !== undefined ? settings.showSidebar : true;
-        } else {
-            viewMode = isImageBrowser ? "grid" : "list";
-        }
-    }
-
-    function saveSettings() {
-        if (!_initialized)
-            return;
-        const type = browserType || "default";
-        let settings = CacheData.fileBrowserSettings;
-        if (!settings[type]) {
-            settings[type] = {};
-        }
-        settings[type].viewMode = viewMode;
-        settings[type].sortBy = sortBy;
-        settings[type].sortAscending = sortAscending;
-        settings[type].iconSizeIndex = iconSizeIndex;
-        settings[type].showSidebar = showSidebar;
-        settings[type].lastPath = currentPath;
-        CacheData.fileBrowserSettings = settings;
-
-        if (browserType === "wallpaper") {
-            CacheData.wallpaperLastPath = currentPath;
-        } else if (browserType === "profile") {
-            CacheData.profileLastPath = currentPath;
-        }
-
-        CacheData.saveCache();
-    }
-
-    onViewModeChanged: saveSettings()
-    onSortByChanged: saveSettings()
-    onSortAscendingChanged: saveSettings()
-    onIconSizeIndexChanged: saveSettings()
-    onShowSidebarChanged: saveSettings()
-
-    function isImageFile(fileName) {
-        if (!fileName)
-            return false;
-        const ext = fileName.toLowerCase().split('.').pop();
-        return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'].includes(ext);
-    }
-
-    function getLastPath() {
-        const type = browserType || "default";
-        const settings = CacheData.fileBrowserSettings[type];
-        const lastPath = settings?.lastPath || "";
-        return (lastPath && lastPath !== "") ? lastPath : homeDir;
-    }
-
-    function saveLastPath(path) {
-        const type = browserType || "default";
-        let settings = CacheData.fileBrowserSettings;
-        if (!settings[type]) {
-            settings[type] = {};
-        }
-        settings[type].lastPath = path;
-        CacheData.fileBrowserSettings = settings;
-        CacheData.saveCache();
-
-        if (browserType === "wallpaper") {
-            CacheData.wallpaperLastPath = path;
-        } else if (browserType === "profile") {
-            CacheData.profileLastPath = path;
-        }
-    }
-
-    function setSelectedFileData(path, name, isDir) {
-        selectedFilePath = path;
-        selectedFileName = name;
-        selectedFileIsDir = isDir;
-    }
-
-    function openItemContextMenu(sender, localX, localY, path, name, isDir) {
-        if (!sender)
-            return;
-        const pos = sender.mapToItem(root, localX, localY);
-        itemContextMenu.showAt(root, pos.x, pos.y, path, name, isDir);
-    }
-
-    function navigateUp() {
-        const path = currentPath;
-        if (path === homeDir)
-            return;
-        const lastSlash = path.lastIndexOf('/');
-        if (lastSlash <= 0)
-            return;
-        const newPath = path.substring(0, lastSlash);
-        if (newPath.length < homeDir.length) {
-            currentPath = homeDir;
-            saveLastPath(homeDir);
-        } else {
-            currentPath = newPath;
-            saveLastPath(newPath);
-        }
-    }
-
-    function navigateTo(path) {
-        currentPath = path;
-        saveLastPath(path);
-        selectedIndex = -1;
-        backButtonFocused = false;
-    }
-
-    function keyboardFileSelection(index) {
-        if (index < 0)
-            return;
-        keyboardSelectionTimer.targetIndex = index;
-        keyboardSelectionTimer.start();
-    }
-
-    function executeKeyboardSelection(index) {
-        keyboardSelectionIndex = index;
-        keyboardSelectionRequested = true;
-    }
-
-    function activateFile(path, name, isDir) {
-        if (isDir) {
-            navigateTo(path);
-            return;
-        }
-        if (saveMode) {
-            saveRow.fileName = name;
-            pendingFilePath = path;
-            showOverwriteConfirmation = true;
-        } else {
-            fileSelected(path);
-            closeRequested();
-        }
-    }
-
-    function handleSaveFile(filePath) {
-        var normalizedPath = filePath;
-        if (!normalizedPath.startsWith("file://")) {
-            normalizedPath = encodeFileUrl(filePath);
-        }
-
-        var exists = false;
-        var fileName = filePath.split('/').pop();
-
-        for (var i = 0; i < folderModel.count; i++) {
-            if (folderModel.get(i, "fileName") === fileName && !folderModel.get(i, "fileIsDir")) {
-                exists = true;
-                break;
-            }
-        }
-
-        if (exists) {
-            pendingFilePath = normalizedPath;
-            showOverwriteConfirmation = true;
-        } else {
-            fileSelected(normalizedPath);
-            closeRequested();
-        }
-    }
-
-    onCurrentPathChanged: {
-        selectedFilePath = "";
-        selectedFileName = "";
-        selectedFileIsDir = false;
-        saveSettings();
-    }
-
-    onSelectedIndexChanged: {
-        if (selectedIndex >= 0 && folderModel && selectedIndex < folderModel.count) {
-            selectedFilePath = "";
-            selectedFileName = "";
-            selectedFileIsDir = false;
-        }
-    }
-
-    property var steamPaths: [StandardPaths.writableLocation(StandardPaths.HomeLocation) + "/.steam/steam/steamapps/workshop/content/431960", StandardPaths.writableLocation(StandardPaths.HomeLocation) + "/.local/share/Steam/steamapps/workshop/content/431960", StandardPaths.writableLocation(StandardPaths.HomeLocation) + "/.var/app/com.valvesoftware.Steam/.local/share/Steam/steamapps/workshop/content/431960", StandardPaths.writableLocation(StandardPaths.HomeLocation) + "/snap/steam/common/.local/share/Steam/steamapps/workshop/content/431960"]
-
-    property var quickAccessLocations: [
-        {
-            "name": I18n.tr("Home"),
-            "path": homeDir,
-            "icon": "home"
-        },
-        {
-            "name": I18n.tr("Documents"),
-            "path": docsDir,
-            "icon": "description"
-        },
-        {
-            "name": I18n.tr("Downloads"),
-            "path": downloadDir,
-            "icon": "download"
-        },
-        {
-            "name": I18n.tr("Pictures"),
-            "path": picsDir,
-            "icon": "image"
-        },
-        {
-            "name": I18n.tr("Music"),
-            "path": musicDir,
-            "icon": "music_note"
-        },
-        {
-            "name": I18n.tr("Videos"),
-            "path": videosDir,
-            "icon": "movie"
-        },
-        {
-            "name": I18n.tr("Desktop"),
-            "path": desktopDir,
-            "icon": "computer"
-        }
-    ]
-
-    FolderListModel {
-        id: folderModel
-
-        showDirsFirst: true
-        showDotAndDotDot: false
-        showHidden: root.showHiddenFiles
-        caseSensitive: false
-        nameFilters: fileExtensions
-        showFiles: true
-        showDirs: true
-        folder: encodeFileUrl(currentPath || homeDir)
-        sortField: {
-            switch (sortBy) {
-            case "name":
-                return FolderListModel.Name;
-            case "size":
-                return FolderListModel.Size;
-            case "modified":
-                return FolderListModel.Time;
-            case "type":
-                return FolderListModel.Type;
-            default:
-                return FolderListModel.Name;
-            }
-        }
-        sortReversed: !sortAscending
-    }
-
-    QtObject {
-        id: keyboardController
-
-        property int totalItems: folderModel.count
-        property int gridColumns: viewMode === "list" ? 1 : Math.max(1, actualGridColumns)
-
-        function handleKey(event) {
-            if (event.key === Qt.Key_Escape && root.closeOnEscape) {
-                closeRequested();
-                event.accepted = true;
-                return;
-            }
-            if (event.key === Qt.Key_F10) {
-                showKeyboardHints = !showKeyboardHints;
-                event.accepted = true;
-                return;
-            }
-            if (event.key === Qt.Key_F1 || event.key === Qt.Key_I) {
-                showFileInfo = !showFileInfo;
-                event.accepted = true;
-                return;
-            }
-            if ((event.modifiers & Qt.AltModifier && event.key === Qt.Key_Left) || event.key === Qt.Key_Backspace) {
-                if (currentPath !== homeDir) {
-                    navigateUp();
-                    event.accepted = true;
-                }
-                return;
-            }
-            if (!keyboardNavigationActive) {
-                const isInitKey = event.key === Qt.Key_Tab || event.key === Qt.Key_Down || event.key === Qt.Key_Right || (event.key === Qt.Key_N && event.modifiers & Qt.ControlModifier) || (event.key === Qt.Key_J && event.modifiers & Qt.ControlModifier) || (event.key === Qt.Key_L && event.modifiers & Qt.ControlModifier);
-
-                if (isInitKey) {
-                    keyboardNavigationActive = true;
-                    if (currentPath !== homeDir) {
-                        backButtonFocused = true;
-                        selectedIndex = -1;
-                    } else {
-                        backButtonFocused = false;
-                        selectedIndex = 0;
-                    }
-                    event.accepted = true;
-                }
-                return;
-            }
-            switch (event.key) {
-            case Qt.Key_Tab:
-                if (backButtonFocused) {
-                    backButtonFocused = false;
-                    selectedIndex = 0;
-                } else if (selectedIndex < totalItems - 1) {
-                    selectedIndex++;
-                } else if (currentPath !== homeDir) {
-                    backButtonFocused = true;
-                    selectedIndex = -1;
-                } else {
-                    selectedIndex = 0;
-                }
-                event.accepted = true;
-                break;
-            case Qt.Key_Backtab:
-                if (backButtonFocused) {
-                    backButtonFocused = false;
-                    selectedIndex = totalItems - 1;
-                } else if (selectedIndex > 0) {
-                    selectedIndex--;
-                } else if (currentPath !== homeDir) {
-                    backButtonFocused = true;
-                    selectedIndex = -1;
-                } else {
-                    selectedIndex = totalItems - 1;
-                }
-                event.accepted = true;
-                break;
-            case Qt.Key_N:
-                if (event.modifiers & Qt.ControlModifier) {
-                    if (backButtonFocused) {
-                        backButtonFocused = false;
-                        selectedIndex = 0;
-                    } else if (selectedIndex < totalItems - 1) {
-                        selectedIndex++;
-                    }
-                    event.accepted = true;
-                }
-                break;
-            case Qt.Key_P:
-                if (event.modifiers & Qt.ControlModifier) {
-                    if (selectedIndex > 0) {
-                        selectedIndex--;
-                    } else if (currentPath !== homeDir) {
-                        backButtonFocused = true;
-                        selectedIndex = -1;
-                    }
-                    event.accepted = true;
-                }
-                break;
-            case Qt.Key_J:
-                if (event.modifiers & Qt.ControlModifier) {
-                    if (selectedIndex < totalItems - 1) {
-                        selectedIndex++;
-                    }
-                    event.accepted = true;
-                }
-                break;
-            case Qt.Key_K:
-                if (event.modifiers & Qt.ControlModifier) {
-                    if (selectedIndex > 0) {
-                        selectedIndex--;
-                    } else if (currentPath !== homeDir) {
-                        backButtonFocused = true;
-                        selectedIndex = -1;
-                    }
-                    event.accepted = true;
-                }
-                break;
-            case Qt.Key_H:
-                if (event.modifiers & Qt.ControlModifier) {
-                    if (!backButtonFocused && selectedIndex > 0) {
-                        selectedIndex--;
-                    } else if (currentPath !== homeDir) {
-                        backButtonFocused = true;
-                        selectedIndex = -1;
-                    }
-                    event.accepted = true;
-                }
-                break;
-            case Qt.Key_L:
-                if (event.modifiers & Qt.ControlModifier) {
-                    if (backButtonFocused) {
-                        backButtonFocused = false;
-                        selectedIndex = 0;
-                    } else if (selectedIndex < totalItems - 1) {
-                        selectedIndex++;
-                    }
-                    event.accepted = true;
-                }
-                break;
-            case Qt.Key_Left:
-                if (pathInputHasFocus)
-                    return;
-                if (backButtonFocused)
-                    return;
-                if (selectedIndex > 0) {
-                    selectedIndex--;
-                } else if (currentPath !== homeDir) {
-                    backButtonFocused = true;
-                    selectedIndex = -1;
-                }
-                event.accepted = true;
-                break;
-            case Qt.Key_Right:
-                if (pathInputHasFocus)
-                    return;
-                if (backButtonFocused) {
-                    backButtonFocused = false;
-                    selectedIndex = 0;
-                } else if (selectedIndex < totalItems - 1) {
-                    selectedIndex++;
-                }
-                event.accepted = true;
-                break;
-            case Qt.Key_Up:
-                if (backButtonFocused) {
-                    backButtonFocused = false;
-                    if (gridColumns === 1) {
-                        selectedIndex = 0;
-                    } else {
-                        var col = selectedIndex % gridColumns;
-                        selectedIndex = Math.min(col, totalItems - 1);
-                    }
-                } else if (selectedIndex >= gridColumns) {
-                    selectedIndex -= gridColumns;
-                } else if (selectedIndex > 0 && gridColumns === 1) {
-                    selectedIndex--;
-                } else if (currentPath !== homeDir) {
-                    backButtonFocused = true;
-                    selectedIndex = -1;
-                }
-                event.accepted = true;
-                break;
-            case Qt.Key_Down:
-                if (backButtonFocused) {
-                    backButtonFocused = false;
-                    selectedIndex = 0;
-                } else if (gridColumns === 1) {
-                    if (selectedIndex < totalItems - 1) {
-                        selectedIndex++;
-                    }
-                } else {
-                    var newIndex = selectedIndex + gridColumns;
-                    if (newIndex < totalItems) {
-                        selectedIndex = newIndex;
-                    } else {
-                        var lastRowStart = Math.floor((totalItems - 1) / gridColumns) * gridColumns;
-                        var col = selectedIndex % gridColumns;
-                        var targetIndex = lastRowStart + col;
-                        if (targetIndex < totalItems && targetIndex > selectedIndex) {
-                            selectedIndex = targetIndex;
-                        }
-                    }
-                }
-                event.accepted = true;
-                break;
-            case Qt.Key_Return:
-            case Qt.Key_Enter:
-            case Qt.Key_Space:
-                if (backButtonFocused) {
-                    navigateUp();
-                } else if (selectedIndex >= 0 && selectedIndex < totalItems) {
-                    root.keyboardFileSelection(selectedIndex);
-                }
-                event.accepted = true;
-                break;
-            }
-        }
-    }
-
-    Timer {
-        id: keyboardSelectionTimer
-
-        property int targetIndex: -1
-
-        interval: 1
-        onTriggered: {
-            executeKeyboardSelection(targetIndex);
-        }
-    }
-
-    focus: true
-
-    Keys.onPressed: event => {
-        keyboardController.handleKey(event);
-    }
-
-    Column {
-        anchors.fill: parent
-        spacing: 0
-
-        Item {
-            width: parent.width
-            height: 48
-
-            MouseArea {
-                anchors.fill: parent
-                onPressed: if (windowControls)
-                    windowControls.tryStartMove()
-                onDoubleClicked: if (windowControls)
-                    windowControls.tryToggleMaximize()
-            }
-
-            Row {
-                spacing: Theme.spacingM
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.left: parent.left
-                anchors.leftMargin: Theme.spacingL
-
-                DankIcon {
-                    name: browserIcon
-                    size: Theme.iconSizeLarge
-                    color: Theme.primary
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-
-                StyledText {
-                    text: browserTitle
-                    font.pixelSize: Theme.fontSizeXLarge
-                    color: Theme.surfaceText
-                    font.weight: Font.Medium
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-            }
-
-            Row {
-                anchors.right: parent.right
-                anchors.rightMargin: Theme.spacingM
-                anchors.verticalCenter: parent.verticalCenter
-                spacing: Theme.spacingS
-
-                DankActionButton {
-                    circular: false
-                    iconName: showHiddenFiles ? "visibility_off" : "visibility"
-                    iconSize: Theme.iconSize - 4
-                    iconColor: showHiddenFiles ? Theme.primary : Theme.surfaceText
-                    onClicked: showHiddenFiles = !showHiddenFiles
-                }
-
-                DankActionButton {
-                    circular: false
-                    iconName: viewMode === "grid" ? "view_list" : "grid_view"
-                    iconSize: Theme.iconSize - 4
-                    iconColor: Theme.surfaceText
-                    onClicked: viewMode = viewMode === "grid" ? "list" : "grid"
-                }
-
-                DankActionButton {
-                    circular: false
-                    iconName: iconSizeIndex === 0 ? "photo_size_select_small" : iconSizeIndex === 1 ? "photo_size_select_large" : iconSizeIndex === 2 ? "photo_size_select_actual" : "zoom_in"
-                    iconSize: Theme.iconSize - 4
-                    iconColor: Theme.surfaceText
-                    visible: viewMode === "grid"
-                    onClicked: iconSizeIndex = (iconSizeIndex + 1) % iconSizes.length
-                }
-
-                DankActionButton {
-                    circular: false
-                    iconName: "info"
-                    iconSize: Theme.iconSize - 4
-                    iconColor: Theme.surfaceText
-                    onClicked: root.showKeyboardHints = !root.showKeyboardHints
-                }
-
-                DankActionButton {
-                    visible: windowControls?.supported ?? false
-                    circular: false
-                    iconName: windowControls?.targetWindow?.maximized ? "fullscreen_exit" : "fullscreen"
-                    iconSize: Theme.iconSize - 4
-                    iconColor: Theme.surfaceText
-                    onClicked: if (windowControls)
-                        windowControls.tryToggleMaximize()
-                }
-
-                DankActionButton {
-                    circular: false
-                    iconName: "close"
-                    iconSize: Theme.iconSize - 4
-                    iconColor: Theme.surfaceText
-                    onClicked: root.closeRequested()
-                }
-            }
-        }
-
-        StyledRect {
-            width: parent.width
-            height: 1
-            color: Theme.outline
-        }
-
-        Item {
-            width: parent.width
-            height: parent.height - 49
-
-            Row {
-                anchors.fill: parent
-                anchors.bottomMargin: root.saveMode ? 40 + Theme.spacingL * 2 : 0
-                spacing: 0
-
-                Row {
-                    width: showSidebar ? 201 : 0
-                    height: parent.height
-                    spacing: 0
-                    visible: showSidebar
-
-                    FileBrowserSidebar {
-                        height: parent.height
-                        quickAccessLocations: root.quickAccessLocations
-                        currentPath: root.currentPath
-                        onLocationSelected: path => navigateTo(path)
-                    }
-
-                    StyledRect {
-                        width: 1
-                        height: parent.height
-                        color: Theme.outline
-                    }
-                }
-
-                Column {
-                    width: parent.width - (showSidebar ? 201 : 0)
-                    height: parent.height
-                    spacing: 0
-
-                    FileBrowserNavigation {
-                        width: parent.width
-                        currentPath: root.currentPath
-                        homeDir: root.homeDir
-                        backButtonFocused: root.backButtonFocused
-                        keyboardNavigationActive: root.keyboardNavigationActive
-                        showSidebar: root.showSidebar
-                        pathEditMode: root.pathEditMode
-                        onNavigateUp: root.navigateUp()
-                        onNavigateTo: path => root.navigateTo(path)
-                        onPathInputFocusChanged: hasFocus => {
-                            root.pathInputHasFocus = hasFocus;
-                            if (hasFocus) {
-                                root.pathEditMode = true;
-                            }
-                        }
-                    }
-
-                    StyledRect {
-                        width: parent.width
-                        height: 1
-                        color: Theme.outline
-                    }
-
-                    Item {
-                        id: gridContainer
-                        width: parent.width
-                        height: parent.height - 41
-                        clip: true
-
-                        property real gridCellWidth: iconSizes[iconSizeIndex] + 24
-                        property real gridCellHeight: iconSizes[iconSizeIndex] + 56
-                        property real availableGridWidth: width - Theme.spacingM * 2
-                        property int gridColumns: Math.max(1, Math.floor(availableGridWidth / gridCellWidth))
-                        property real gridLeftMargin: Theme.spacingM + Math.max(0, (availableGridWidth - (gridColumns * gridCellWidth)) / 2)
-
-                        onGridColumnsChanged: {
-                            root.actualGridColumns = gridColumns;
-                        }
-                        Component.onCompleted: {
-                            root.actualGridColumns = gridColumns;
-                        }
-
-                        DankGridView {
-                            id: fileGrid
-                            anchors.fill: parent
-                            anchors.leftMargin: gridContainer.gridLeftMargin
-                            anchors.rightMargin: Theme.spacingM
-                            anchors.topMargin: Theme.spacingS
-                            anchors.bottomMargin: Theme.spacingS
-                            visible: viewMode === "grid"
-                            cellWidth: gridContainer.gridCellWidth
-                            cellHeight: gridContainer.gridCellHeight
-                            cacheBuffer: 260
-                            model: folderModel
-                            currentIndex: selectedIndex
-                            onCurrentIndexChanged: {
-                                if (keyboardNavigationActive && currentIndex >= 0)
-                                    positionViewAtIndex(currentIndex, GridView.Contain);
-                            }
-
-                            ScrollBar.vertical: DankScrollbar {
-                                id: gridScrollbar
-                            }
-
-                            ScrollBar.horizontal: DankScrollbar {
-                                policy: ScrollBar.AlwaysOff
-                            }
-
-                            delegate: FileBrowserGridDelegate {
-                                iconSizes: root.iconSizes
-                                iconSizeIndex: root.iconSizeIndex
-                                selectedIndex: root.selectedIndex
-                                keyboardNavigationActive: root.keyboardNavigationActive
-                                onItemClicked: (index, path, name, isDir) => {
-                                    selectedIndex = index;
-                                    setSelectedFileData(path, name, isDir);
-                                    root.activateFile(path, name, isDir);
-                                }
-                                onItemSelected: (index, path, name, isDir) => {
-                                    setSelectedFileData(path, name, isDir);
-                                }
-                                onItemContextMenuRequested: (sender, localX, localY, path, name, isDir) => {
-                                    root.openItemContextMenu(sender, localX, localY, path, name, isDir);
-                                }
-
-                                Connections {
-                                    function onKeyboardSelectionRequestedChanged() {
-                                        if (root.keyboardSelectionRequested && root.keyboardSelectionIndex === index) {
-                                            root.keyboardSelectionRequested = false;
-                                            selectedIndex = index;
-                                            setSelectedFileData(filePath, fileName, fileIsDir);
-                                            root.activateFile(filePath, fileName, fileIsDir);
-                                        }
-                                    }
-
-                                    target: root
-                                }
-                            }
-                        }
-
-                        DankListView {
-                            id: fileList
-                            anchors.fill: parent
-                            anchors.leftMargin: Theme.spacingM
-                            anchors.rightMargin: Theme.spacingM
-                            anchors.topMargin: Theme.spacingS
-                            anchors.bottomMargin: Theme.spacingS
-                            visible: viewMode === "list"
-                            spacing: Theme.spacingXXS
-                            model: folderModel
-                            currentIndex: selectedIndex
-                            onCurrentIndexChanged: {
-                                if (keyboardNavigationActive && currentIndex >= 0)
-                                    positionViewAtIndex(currentIndex, ListView.Contain);
-                            }
-
-                            ScrollBar.vertical: DankScrollbar {
-                                id: listScrollbar
-                            }
-
-                            delegate: FileBrowserListDelegate {
-                                width: fileList.width
-                                selectedIndex: root.selectedIndex
-                                keyboardNavigationActive: root.keyboardNavigationActive
-                                onItemClicked: (index, path, name, isDir) => {
-                                    selectedIndex = index;
-                                    setSelectedFileData(path, name, isDir);
-                                    root.activateFile(path, name, isDir);
-                                }
-                                onItemSelected: (index, path, name, isDir) => {
-                                    setSelectedFileData(path, name, isDir);
-                                }
-                                onItemContextMenuRequested: (sender, localX, localY, path, name, isDir) => {
-                                    root.openItemContextMenu(sender, localX, localY, path, name, isDir);
-                                }
-
-                                Connections {
-                                    function onKeyboardSelectionRequestedChanged() {
-                                        if (root.keyboardSelectionRequested && root.keyboardSelectionIndex === index) {
-                                            root.keyboardSelectionRequested = false;
-                                            selectedIndex = index;
-                                            setSelectedFileData(filePath, fileName, fileIsDir);
-                                            root.activateFile(filePath, fileName, fileIsDir);
-                                        }
-                                    }
-
-                                    target: root
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-
-            FileBrowserSaveRow {
-                id: saveRow
-                anchors.bottom: parent.bottom
-                anchors.left: parent.left
-                anchors.right: parent.right
-                anchors.margins: Theme.spacingL
-                saveMode: root.saveMode
-                defaultFileName: root.defaultFileName
-                currentPath: root.currentPath
-                onSaveRequested: filePath => handleSaveFile(filePath)
-            }
-
-            KeyboardHints {
-                id: keyboardHints
-
-                anchors.bottom: parent.bottom
-                anchors.left: parent.left
-                anchors.right: parent.right
-                anchors.margins: Theme.spacingL
-                showHints: root.showKeyboardHints
-            }
-
-            FileInfo {
-                id: fileInfo
-
-                anchors.top: parent.top
-                anchors.right: parent.right
-                anchors.margins: Theme.spacingL
-                width: 300
-                showFileInfo: root.showFileInfo
-                selectedIndex: root.selectedIndex
-                sourceFolderModel: folderModel
-                currentPath: root.currentPath
-                currentFileName: root.selectedFileName
-                currentFileIsDir: root.selectedFileIsDir
-                currentFileExtension: {
-                    if (root.selectedFileIsDir || !root.selectedFileName)
-                        return "";
-
-                    var lastDot = root.selectedFileName.lastIndexOf('.');
-                    return lastDot > 0 ? root.selectedFileName.substring(lastDot + 1).toLowerCase() : "";
-                }
-            }
-
-            FileBrowserSortMenu {
-                id: sortMenu
-                anchors.top: parent.top
-                anchors.right: parent.right
-                anchors.topMargin: 120
-                anchors.rightMargin: Theme.spacingL
-                sortBy: root.sortBy
-                sortAscending: root.sortAscending
-                onSortBySelected: value => {
-                    root.sortBy = value;
-                }
-                onSortOrderSelected: ascending => {
-                    root.sortAscending = ascending;
-                }
-            }
-        }
-    }
-
-    FileBrowserOverwriteDialog {
-        anchors.fill: parent
-        showDialog: showOverwriteConfirmation
-        pendingFilePath: root.pendingFilePath
-        onConfirmed: filePath => {
-            showOverwriteConfirmation = false;
-            fileSelected(filePath);
-            pendingFilePath = "";
-            Qt.callLater(() => root.closeRequested());
-        }
-        onCancelled: {
-            showOverwriteConfirmation = false;
-            pendingFilePath = "";
-        }
-    }
-
-    FileBrowserItemContextMenu {
-        id: itemContextMenu
-        parentFocusItem: root
-    }
-}
+DankCommon.FileBrowserContent {}

quickshell/Modals/FileBrowser/FileBrowserGridDelegate.qml

@@ -1,252 +1,3 @@
-import QtQuick
-import Quickshell.Widgets
-import qs.Common
-import qs.Widgets
+import qs.DankCommon.Modals.FileBrowser as DankCommon
 
-StyledRect {
-    id: delegateRoot
-
-    required property bool fileIsDir
-    required property string filePath
-    required property string fileName
-    required property int index
-
-    property bool weMode: false
-    property var iconSizes: [80, 120, 160, 200]
-    property int iconSizeIndex: 1
-    property int selectedIndex: -1
-    property bool keyboardNavigationActive: false
-
-    signal itemClicked(int index, string path, string name, bool isDir)
-    signal itemSelected(int index, string path, string name, bool isDir)
-    signal itemContextMenuRequested(var sender, real localX, real localY, string path, string name, bool isDir)
-
-    function getFileExtension(fileName) {
-        const parts = fileName.split('.');
-        if (parts.length > 1) {
-            return parts[parts.length - 1].toLowerCase();
-        }
-        return "";
-    }
-
-    function determineFileType(fileName) {
-        const ext = getFileExtension(fileName);
-
-        const imageExts = ["png", "jpg", "jpeg", "gif", "bmp", "webp", "svg", "ico", "jxl", "avif", "heif", "exr"];
-        if (imageExts.includes(ext)) {
-            return "image";
-        }
-
-        const videoExts = ["mp4", "mkv", "avi", "mov", "webm", "flv", "wmv", "m4v"];
-        if (videoExts.includes(ext)) {
-            return "video";
-        }
-
-        const audioExts = ["mp3", "wav", "flac", "ogg", "m4a", "aac", "wma"];
-        if (audioExts.includes(ext)) {
-            return "audio";
-        }
-
-        const codeExts = ["js", "ts", "jsx", "tsx", "py", "go", "rs", "c", "cpp", "h", "java", "kt", "swift", "rb", "php", "html", "css", "scss", "json", "xml", "yaml", "yml", "toml", "sh", "bash", "zsh", "fish", "qml", "vue", "svelte"];
-        if (codeExts.includes(ext)) {
-            return "code";
-        }
-
-        const docExts = ["txt", "md", "pdf", "doc", "docx", "odt", "rtf"];
-        if (docExts.includes(ext)) {
-            return "document";
-        }
-
-        const archiveExts = ["zip", "tar", "gz", "bz2", "xz", "7z", "rar"];
-        if (archiveExts.includes(ext)) {
-            return "archive";
-        }
-
-        if (!ext || fileName.indexOf('.') === -1) {
-            return "binary";
-        }
-
-        return "file";
-    }
-
-    function isImageFile(fileName) {
-        if (!fileName) {
-            return false;
-        }
-        return determineFileType(fileName) === "image";
-    }
-
-    function isVideoFile(fileName) {
-        if (!fileName) {
-            return false;
-        }
-        return determineFileType(fileName) === "video";
-    }
-
-    property bool isImage: isImageFile(delegateRoot.fileName)
-    property bool isVideo: isVideoFile(delegateRoot.fileName)
-
-    property string _xdgCacheHome: Paths.strip(Paths.xdgCache)
-    property string _thumbnailSize: iconSizeIndex >= 2 ? "x-large" : "large"
-    property int _thumbnailPx: iconSizeIndex >= 2 ? 512 : 256
-    property string videoThumbnailPath: {
-        if (!delegateRoot.fileIsDir && isVideo) {
-            const hash = Qt.md5("file://" + delegateRoot.filePath);
-            return _xdgCacheHome + "/thumbnails/" + _thumbnailSize + "/" + hash + ".png";
-        }
-        return "";
-    }
-
-    property string _videoThumb: ""
-    property bool _thumbGenAttempted: false
-
-    // Probe the thumbnail optimistically; Image.Error triggers generation
-    onVideoThumbnailPathChanged: {
-        _thumbGenAttempted = false;
-        _videoThumb = videoThumbnailPath;
-    }
-
-    function generateVideoThumbnail() {
-        if (_thumbGenAttempted)
-            return;
-        _thumbGenAttempted = true;
-        _videoThumb = "";
-        const thumbPath = videoThumbnailPath;
-        const thumbDir = _xdgCacheHome + "/thumbnails/" + _thumbnailSize;
-        const script = "mkdir -p \"$1\" && ffmpegthumbnailer -i \"$2\" -o \"$3\" -s " + _thumbnailPx + " -f";
-        Proc.runCommand(null, ["sh", "-c", script, "thumb", thumbDir, delegateRoot.filePath, thumbPath], function (output, exitCode) {
-            if (exitCode === 0)
-                _videoThumb = thumbPath;
-        });
-    }
-
-    function getIconForFile(fileName) {
-        const lowerName = fileName.toLowerCase();
-        if (lowerName.startsWith("dockerfile")) {
-            return "docker";
-        }
-        const ext = fileName.split('.').pop();
-        return ext || "";
-    }
-
-    width: weMode ? 245 : iconSizes[iconSizeIndex] + 16
-    height: weMode ? 205 : iconSizes[iconSizeIndex] + 48
-    radius: Theme.cornerRadius
-    color: {
-        if (keyboardNavigationActive && delegateRoot.index === selectedIndex)
-            return Theme.surfacePressed;
-
-        return mouseArea.containsMouse ? Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency) : Theme.withAlpha(Theme.surfaceContainerHigh, 0);
-    }
-    border.color: keyboardNavigationActive && delegateRoot.index === selectedIndex ? Theme.primary : Theme.withAlpha(Theme.primary, 0)
-    border.width: (keyboardNavigationActive && delegateRoot.index === selectedIndex) ? 2 : 0
-
-    Component.onCompleted: {
-        if (keyboardNavigationActive && delegateRoot.index === selectedIndex)
-            itemSelected(delegateRoot.index, delegateRoot.filePath, delegateRoot.fileName, delegateRoot.fileIsDir);
-    }
-
-    onSelectedIndexChanged: {
-        if (keyboardNavigationActive && selectedIndex === delegateRoot.index)
-            itemSelected(delegateRoot.index, delegateRoot.filePath, delegateRoot.fileName, delegateRoot.fileIsDir);
-    }
-
-    Column {
-        anchors.centerIn: parent
-        spacing: Theme.spacingS
-
-        Item {
-            width: weMode ? 225 : (iconSizes[iconSizeIndex] - 8)
-            height: weMode ? 165 : (iconSizes[iconSizeIndex] - 8)
-            anchors.horizontalCenter: parent.horizontalCenter
-
-            ClippingRectangle {
-                anchors.fill: parent
-                anchors.margins: 2
-                radius: Theme.cornerRadius
-                color: "transparent"
-
-                Image {
-                    id: gridPreviewImage
-                    anchors.fill: parent
-                    property var weExtensions: [".jpg", ".jpeg", ".png", ".webp", ".gif", ".bmp", ".tga", ".jxl", ".avif", ".heif", ".exr"]
-                    property int weExtIndex: 0
-                    property string imagePath: {
-                        if (weMode && delegateRoot.fileIsDir)
-                            return delegateRoot.filePath + "/preview" + weExtensions[weExtIndex];
-                        if (_videoThumb)
-                            return _videoThumb;
-                        return "";
-                    }
-                    source: imagePath ? "file://" + imagePath.split('/').map(s => encodeURIComponent(s)).join('/') : ""
-                    onStatusChanged: {
-                        if (status !== Image.Error)
-                            return;
-                        if (weMode && delegateRoot.fileIsDir) {
-                            if (weExtIndex < weExtensions.length - 1) {
-                                weExtIndex++;
-                            } else {
-                                imagePath = "";
-                            }
-                            return;
-                        }
-                        if (_videoThumb)
-                            generateVideoThumbnail();
-                    }
-                    fillMode: Image.PreserveAspectCrop
-                    sourceSize.width: weMode ? 225 : iconSizes[iconSizeIndex]
-                    sourceSize.height: weMode ? 225 : iconSizes[iconSizeIndex]
-                    asynchronous: true
-                    visible: status === Image.Ready && ((!delegateRoot.fileIsDir && isVideo) || (weMode && delegateRoot.fileIsDir))
-                }
-
-                CachingImage {
-                    anchors.fill: parent
-                    imagePath: !delegateRoot.fileIsDir && isImage ? delegateRoot.filePath : ""
-                    maxCacheSize: 256
-                    animate: false
-                    visible: !delegateRoot.fileIsDir && isImage
-                }
-            }
-
-            DankNFIcon {
-                anchors.centerIn: parent
-                name: delegateRoot.fileIsDir ? "folder" : getIconForFile(delegateRoot.fileName)
-                size: iconSizes[iconSizeIndex] * 0.45
-                color: delegateRoot.fileIsDir ? Theme.primary : Theme.surfaceText
-                visible: (!delegateRoot.fileIsDir && !isImage && !(isVideo && gridPreviewImage.status === Image.Ready)) || (delegateRoot.fileIsDir && !weMode)
-            }
-        }
-
-        StyledText {
-            text: delegateRoot.fileName || ""
-            font.pixelSize: Theme.fontSizeSmall
-            color: Theme.surfaceText
-            width: delegateRoot.width - Theme.spacingM
-            elide: Text.ElideRight
-            horizontalAlignment: Text.AlignHCenter
-            anchors.horizontalCenter: parent.horizontalCenter
-            maximumLineCount: 2
-            wrapMode: Text.Wrap
-        }
-    }
-
-    MouseArea {
-        id: mouseArea
-
-        anchors.fill: parent
-        hoverEnabled: true
-        cursorShape: Qt.PointingHandCursor
-        acceptedButtons: Qt.LeftButton | Qt.RightButton
-        onClicked: mouse => {
-            switch (mouse.button) {
-            case Qt.LeftButton:
-                itemClicked(delegateRoot.index, delegateRoot.filePath, delegateRoot.fileName, delegateRoot.fileIsDir);
-                break;
-            case Qt.RightButton:
-                itemContextMenuRequested(delegateRoot, mouse.x, mouse.y, delegateRoot.filePath, delegateRoot.fileName, delegateRoot.fileIsDir);
-                break;
-            }
-        }
-    }
-}
+DankCommon.FileBrowserGridDelegate {}

quickshell/Modals/FileBrowser/FileBrowserItemContextMenu.qml

@@ -1,153 +1,3 @@
-import QtQuick
-import QtQuick.Controls
-import Quickshell
-import qs.Common
-import qs.Services
-import qs.Widgets
+import qs.DankCommon.Modals.FileBrowser as DankCommon
 
-Popup {
-    id: root
-
-    property string filePath: ""
-    property string fileName: ""
-    property bool fileIsDir: false
-    property var parentFocusItem: null
-
-    signal trashed
-    signal menuClosed
-
-    readonly property var menuItems: [
-        {
-            text: I18n.tr("Move to Trash"),
-            icon: "delete",
-            action: trashItem,
-            enabled: filePath.length > 0,
-            dangerous: true
-        },
-        {
-            text: I18n.tr("Copy path"),
-            icon: "content_copy",
-            action: copyPath,
-            enabled: filePath.length > 0
-        }
-    ]
-
-    function showAt(parentItem, localX, localY, path, name, isDir) {
-        if (!parentItem)
-            return;
-        parent = parentItem;
-        filePath = path || "";
-        fileName = name || "";
-        fileIsDir = !!isDir;
-        x = Math.max(0, Math.min(parentItem.width - width, localX));
-        y = Math.max(0, Math.min(parentItem.height - height, localY));
-        open();
-    }
-
-    function trashItem() {
-        if (!filePath)
-            return;
-        TrashService.trashPath(filePath, ok => {
-            if (ok)
-                root.trashed();
-        });
-        close();
-    }
-
-    function copyPath() {
-        if (!filePath)
-            return;
-        Quickshell.execDetached(["dms", "cl", "copy", filePath]);
-        close();
-    }
-
-    width: 220
-    height: menuColumn.implicitHeight + Theme.spacingS * 2
-    padding: 0
-    modal: false
-    closePolicy: Popup.CloseOnEscape
-
-    onClosed: {
-        closePolicy = Popup.CloseOnEscape;
-        menuClosed();
-        if (parentFocusItem)
-            Qt.callLater(() => parentFocusItem.forceActiveFocus());
-    }
-
-    onOpened: outsideClickTimer.start()
-
-    Timer {
-        id: outsideClickTimer
-        interval: 100
-        onTriggered: root.closePolicy = Popup.CloseOnEscape | Popup.CloseOnPressOutside
-    }
-
-    background: Rectangle {
-        color: "transparent"
-    }
-
-    contentItem: Rectangle {
-        color: Theme.floatingSurface
-        radius: Theme.cornerRadius
-        border.color: BlurService.borderColor
-        border.width: BlurService.borderWidth
-
-        Column {
-            id: menuColumn
-            anchors.fill: parent
-            anchors.margins: Theme.spacingS
-            spacing: 1
-
-            Repeater {
-                model: root.menuItems
-
-                Rectangle {
-                    width: parent.width
-                    height: 32
-                    radius: Theme.cornerRadius
-                    opacity: modelData.enabled ? 1 : 0.5
-                    color: {
-                        if (!modelData.enabled || !area.containsMouse)
-                            return "transparent";
-                        if (modelData.dangerous)
-                            return Theme.errorHover;
-                        return BlurService.hoverColor(Theme.widgetBaseHoverColor);
-                    }
-
-                    Row {
-                        anchors.left: parent.left
-                        anchors.leftMargin: Theme.spacingS
-                        anchors.right: parent.right
-                        anchors.rightMargin: Theme.spacingS
-                        anchors.verticalCenter: parent.verticalCenter
-                        spacing: Theme.spacingS
-
-                        DankIcon {
-                            anchors.verticalCenter: parent.verticalCenter
-                            name: modelData.icon
-                            size: 16
-                            color: modelData.dangerous && area.containsMouse && modelData.enabled ? Theme.error : Theme.surfaceText
-                        }
-
-                        StyledText {
-                            anchors.verticalCenter: parent.verticalCenter
-                            text: modelData.text
-                            font.pixelSize: Theme.fontSizeSmall
-                            color: modelData.dangerous && area.containsMouse && modelData.enabled ? Theme.error : Theme.surfaceText
-                            elide: Text.ElideRight
-                        }
-                    }
-
-                    MouseArea {
-                        id: area
-                        anchors.fill: parent
-                        hoverEnabled: true
-                        enabled: modelData.enabled
-                        cursorShape: Qt.PointingHandCursor
-                        onClicked: modelData.action()
-                    }
-                }
-            }
-        }
-    }
-}
+DankCommon.FileBrowserItemContextMenu {}

quickshell/Modals/FileBrowser/FileBrowserListDelegate.qml

@@ -1,256 +1,3 @@
-import QtQuick
-import Quickshell.Widgets
-import qs.Common
-import qs.Widgets
+import qs.DankCommon.Modals.FileBrowser as DankCommon
 
-StyledRect {
-    id: listDelegateRoot
-
-    required property bool fileIsDir
-    required property string filePath
-    required property string fileName
-    required property int index
-    required property var fileModified
-    required property int fileSize
-
-    property int selectedIndex: -1
-    property bool keyboardNavigationActive: false
-
-    signal itemClicked(int index, string path, string name, bool isDir)
-    signal itemSelected(int index, string path, string name, bool isDir)
-    signal itemContextMenuRequested(var sender, real localX, real localY, string path, string name, bool isDir)
-
-    function getFileExtension(fileName) {
-        const parts = fileName.split('.');
-        if (parts.length > 1) {
-            return parts[parts.length - 1].toLowerCase();
-        }
-        return "";
-    }
-
-    function determineFileType(fileName) {
-        const ext = getFileExtension(fileName);
-
-        const imageExts = ["png", "jpg", "jpeg", "gif", "bmp", "webp", "svg", "ico", "jxl", "avif", "heif", "exr"];
-        if (imageExts.includes(ext)) {
-            return "image";
-        }
-
-        const videoExts = ["mp4", "mkv", "avi", "mov", "webm", "flv", "wmv", "m4v"];
-        if (videoExts.includes(ext)) {
-            return "video";
-        }
-
-        const audioExts = ["mp3", "wav", "flac", "ogg", "m4a", "aac", "wma"];
-        if (audioExts.includes(ext)) {
-            return "audio";
-        }
-
-        const codeExts = ["js", "ts", "jsx", "tsx", "py", "go", "rs", "c", "cpp", "h", "java", "kt", "swift", "rb", "php", "html", "css", "scss", "json", "xml", "yaml", "yml", "toml", "sh", "bash", "zsh", "fish", "qml", "vue", "svelte"];
-        if (codeExts.includes(ext)) {
-            return "code";
-        }
-
-        const docExts = ["txt", "md", "pdf", "doc", "docx", "odt", "rtf"];
-        if (docExts.includes(ext)) {
-            return "document";
-        }
-
-        const archiveExts = ["zip", "tar", "gz", "bz2", "xz", "7z", "rar"];
-        if (archiveExts.includes(ext)) {
-            return "archive";
-        }
-
-        if (!ext || fileName.indexOf('.') === -1) {
-            return "binary";
-        }
-
-        return "file";
-    }
-
-    function isImageFile(fileName) {
-        if (!fileName) {
-            return false;
-        }
-        return determineFileType(fileName) === "image";
-    }
-
-    function isVideoFile(fileName) {
-        if (!fileName) {
-            return false;
-        }
-        return determineFileType(fileName) === "video";
-    }
-
-    property bool isImage: isImageFile(listDelegateRoot.fileName)
-    property bool isVideo: isVideoFile(listDelegateRoot.fileName)
-
-    property string _xdgCacheHome: Paths.strip(Paths.xdgCache)
-    property string videoThumbnailPath: {
-        if (!listDelegateRoot.fileIsDir && isVideo) {
-            const hash = Qt.md5("file://" + listDelegateRoot.filePath);
-            return _xdgCacheHome + "/thumbnails/normal/" + hash + ".png";
-        }
-        return "";
-    }
-
-    property string _videoThumb: ""
-    property bool _thumbGenAttempted: false
-
-    // Probe the thumbnail optimistically; Image.Error triggers generation
-    onVideoThumbnailPathChanged: {
-        _thumbGenAttempted = false;
-        _videoThumb = videoThumbnailPath;
-    }
-
-    function generateVideoThumbnail() {
-        if (_thumbGenAttempted)
-            return;
-        _thumbGenAttempted = true;
-        _videoThumb = "";
-        const thumbPath = videoThumbnailPath;
-        const thumbDir = _xdgCacheHome + "/thumbnails/normal";
-        const script = "mkdir -p \"$1\" && ffmpegthumbnailer -i \"$2\" -o \"$3\" -s 128 -f";
-        Proc.runCommand(null, ["sh", "-c", script, "thumb", thumbDir, listDelegateRoot.filePath, thumbPath], function (output, exitCode) {
-            if (exitCode === 0)
-                _videoThumb = thumbPath;
-        });
-    }
-
-    function getIconForFile(fileName) {
-        const lowerName = fileName.toLowerCase();
-        if (lowerName.startsWith("dockerfile")) {
-            return "docker";
-        }
-        const ext = fileName.split('.').pop();
-        return ext || "";
-    }
-
-    function formatFileSize(size) {
-        if (size < 1024)
-            return size + " B";
-        if (size < 1024 * 1024)
-            return (size / 1024).toFixed(1) + " KB";
-        if (size < 1024 * 1024 * 1024)
-            return (size / (1024 * 1024)).toFixed(1) + " MB";
-        return (size / (1024 * 1024 * 1024)).toFixed(1) + " GB";
-    }
-
-    height: 44
-    radius: Theme.cornerRadius
-    color: {
-        if (keyboardNavigationActive && listDelegateRoot.index === selectedIndex)
-            return Theme.surfacePressed;
-        return listMouseArea.containsMouse ? Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency) : Theme.withAlpha(Theme.surfaceContainerHigh, 0);
-    }
-    border.color: keyboardNavigationActive && listDelegateRoot.index === selectedIndex ? Theme.primary : Theme.withAlpha(Theme.primary, 0)
-    border.width: (keyboardNavigationActive && listDelegateRoot.index === selectedIndex) ? 2 : 0
-
-    Component.onCompleted: {
-        if (keyboardNavigationActive && listDelegateRoot.index === selectedIndex)
-            itemSelected(listDelegateRoot.index, listDelegateRoot.filePath, listDelegateRoot.fileName, listDelegateRoot.fileIsDir);
-    }
-
-    onSelectedIndexChanged: {
-        if (keyboardNavigationActive && selectedIndex === listDelegateRoot.index)
-            itemSelected(listDelegateRoot.index, listDelegateRoot.filePath, listDelegateRoot.fileName, listDelegateRoot.fileIsDir);
-    }
-
-    Row {
-        anchors.fill: parent
-        anchors.leftMargin: Theme.spacingS
-        anchors.rightMargin: Theme.spacingS
-        spacing: Theme.spacingS
-
-        Item {
-            width: 28
-            height: 28
-            anchors.verticalCenter: parent.verticalCenter
-
-            ClippingRectangle {
-                anchors.fill: parent
-                radius: Theme.cornerRadius
-                color: "transparent"
-
-                Image {
-                    id: listPreviewImage
-                    anchors.fill: parent
-                    property string imagePath: _videoThumb
-                    source: imagePath ? "file://" + imagePath.split('/').map(s => encodeURIComponent(s)).join('/') : ""
-                    fillMode: Image.PreserveAspectCrop
-                    sourceSize.width: 32
-                    sourceSize.height: 32
-                    asynchronous: true
-                    visible: status === Image.Ready && !listDelegateRoot.fileIsDir && isVideo
-                    onStatusChanged: {
-                        if (status === Image.Error && _videoThumb)
-                            generateVideoThumbnail();
-                    }
-                }
-
-                CachingImage {
-                    anchors.fill: parent
-                    imagePath: !listDelegateRoot.fileIsDir && isImage ? listDelegateRoot.filePath : ""
-                    maxCacheSize: 256
-                    animate: false
-                    visible: !listDelegateRoot.fileIsDir && isImage
-                }
-            }
-
-            DankNFIcon {
-                anchors.centerIn: parent
-                name: listDelegateRoot.fileIsDir ? "folder" : getIconForFile(listDelegateRoot.fileName)
-                size: Theme.iconSize - 2
-                color: listDelegateRoot.fileIsDir ? Theme.primary : Theme.surfaceText
-                visible: listDelegateRoot.fileIsDir || (!isImage && !(isVideo && listPreviewImage.status === Image.Ready))
-            }
-        }
-
-        StyledText {
-            text: listDelegateRoot.fileName || ""
-            font.pixelSize: Theme.fontSizeMedium
-            color: Theme.surfaceText
-            width: parent.width - 280
-            elide: Text.ElideRight
-            anchors.verticalCenter: parent.verticalCenter
-            maximumLineCount: 1
-            clip: true
-        }
-
-        StyledText {
-            text: listDelegateRoot.fileIsDir ? "" : formatFileSize(listDelegateRoot.fileSize)
-            font.pixelSize: Theme.fontSizeSmall
-            color: Theme.surfaceTextMedium
-            width: 70
-            horizontalAlignment: Text.AlignRight
-            anchors.verticalCenter: parent.verticalCenter
-        }
-
-        StyledText {
-            text: Qt.formatDateTime(listDelegateRoot.fileModified, "MMM d, yyyy h:mm AP")
-            font.pixelSize: Theme.fontSizeSmall
-            color: Theme.surfaceTextMedium
-            width: 140
-            horizontalAlignment: Text.AlignRight
-            anchors.verticalCenter: parent.verticalCenter
-        }
-    }
-
-    MouseArea {
-        id: listMouseArea
-        anchors.fill: parent
-        hoverEnabled: true
-        cursorShape: Qt.PointingHandCursor
-        acceptedButtons: Qt.LeftButton | Qt.RightButton
-        onClicked: mouse => {
-            switch (mouse.button) {
-            case Qt.LeftButton:
-                itemClicked(listDelegateRoot.index, listDelegateRoot.filePath, listDelegateRoot.fileName, listDelegateRoot.fileIsDir);
-                break;
-            case Qt.RightButton:
-                itemContextMenuRequested(listDelegateRoot, mouse.x, mouse.y, listDelegateRoot.filePath, listDelegateRoot.fileName, listDelegateRoot.fileIsDir);
-                break;
-            }
-        }
-    }
-}
+DankCommon.FileBrowserListDelegate {}

quickshell/Modals/FileBrowser/FileBrowserModal.qml

@@ -1,100 +1,3 @@
-import QtQuick
-import Quickshell
-import qs.Common
-import qs.Widgets
+import qs.DankCommon.Modals.FileBrowser as DankCommon
 
-FloatingWindow {
-    id: fileBrowserModal
-
-    property bool disablePopupTransparency: true
-    property string browserTitle: "Select File"
-    property string browserIcon: "folder_open"
-    property string browserType: "generic"
-    property var fileExtensions: ["*.*"]
-    property alias filterExtensions: fileBrowserModal.fileExtensions
-    property bool showHiddenFiles: false
-    property bool saveMode: false
-    property string defaultFileName: ""
-    property var parentModal: null
-    parentWindow: parentModal
-    property bool shouldHaveFocus: visible
-    property bool allowFocusOverride: false
-    property bool shouldBeVisible: visible
-    property bool allowStacking: true
-
-    signal fileSelected(string path)
-    signal dialogClosed
-
-    function open() {
-        visible = true;
-    }
-
-    function close() {
-        visible = false;
-    }
-
-    objectName: "fileBrowserModal"
-    title: "Files - " + browserTitle
-    minimumSize: Qt.size(500, 400)
-    implicitWidth: 800
-    implicitHeight: 600
-    color: Theme.surfaceContainer
-    visible: false
-
-    onClosed: close()
-
-    onVisibleChanged: {
-        if (visible) {
-            if (parentModal && "shouldHaveFocus" in parentModal) {
-                parentModal.shouldHaveFocus = false;
-                parentModal.allowFocusOverride = true;
-            }
-            Qt.callLater(() => {
-                if (content) {
-                    content.reset();
-                    content.forceActiveFocus();
-                }
-            });
-        } else {
-            if (parentModal && "allowFocusOverride" in parentModal) {
-                parentModal.allowFocusOverride = false;
-                parentModal.shouldHaveFocus = Qt.binding(() => parentModal.shouldBeVisible);
-            }
-            dialogClosed();
-        }
-    }
-
-    Loader {
-        id: contentLoader
-        anchors.fill: parent
-        active: fileBrowserModal.visible
-        sourceComponent: FileBrowserContent {
-            id: content
-            anchors.fill: parent
-            focus: true
-            closeOnEscape: false
-            windowControls: fileBrowserModal.windowControlsRef
-
-            browserTitle: fileBrowserModal.browserTitle
-            browserIcon: fileBrowserModal.browserIcon
-            browserType: fileBrowserModal.browserType
-            fileExtensions: fileBrowserModal.fileExtensions
-            showHiddenFiles: fileBrowserModal.showHiddenFiles
-            saveMode: fileBrowserModal.saveMode
-            defaultFileName: fileBrowserModal.defaultFileName
-
-            Component.onCompleted: initialize()
-
-            onFileSelected: path => fileBrowserModal.fileSelected(path)
-            onCloseRequested: fileBrowserModal.close()
-        }
-    }
-
-    property alias content: contentLoader.item
-    property alias windowControlsRef: windowControls
-
-    FloatingWindowControls {
-        id: windowControls
-        targetWindow: fileBrowserModal
-    }
-}
+DankCommon.FileBrowserModal {}

quickshell/Modals/FileBrowser/FileBrowserNavigation.qml

@@ -1,130 +1,3 @@
-import QtQuick
-import qs.Common
-import qs.Widgets
+import qs.DankCommon.Modals.FileBrowser as DankCommon
 
-Row {
-    id: navigation
-
-    property string currentPath: ""
-    property string homeDir: ""
-    property bool backButtonFocused: false
-    property bool keyboardNavigationActive: false
-    property bool showSidebar: true
-    property bool pathEditMode: false
-    property bool pathInputHasFocus: false
-
-    signal navigateUp
-    signal navigateTo(string path)
-    signal pathInputFocusChanged(bool hasFocus)
-
-    height: 40
-    leftPadding: Theme.spacingM
-    rightPadding: Theme.spacingM
-    spacing: Theme.spacingS
-
-    StyledRect {
-        width: 32
-        height: 32
-        radius: Theme.cornerRadius
-        color: (backButtonMouseArea.containsMouse || (backButtonFocused && keyboardNavigationActive)) && currentPath !== homeDir ? Theme.surfaceVariant : Theme.withAlpha(Theme.surfaceVariant, 0)
-        opacity: currentPath !== homeDir ? 1 : 0
-        anchors.verticalCenter: parent.verticalCenter
-
-        DankIcon {
-            anchors.centerIn: parent
-            name: "arrow_back"
-            size: Theme.iconSizeSmall
-            color: Theme.surfaceText
-        }
-
-        MouseArea {
-            id: backButtonMouseArea
-
-            anchors.fill: parent
-            hoverEnabled: currentPath !== homeDir
-            cursorShape: currentPath !== homeDir ? Qt.PointingHandCursor : Qt.ArrowCursor
-            enabled: currentPath !== homeDir
-            onClicked: navigation.navigateUp()
-        }
-    }
-
-    Item {
-        width: Math.max(0, (parent?.width ?? 0) - 40 - Theme.spacingS - (showSidebar ? 0 : 80))
-        height: 32
-        anchors.verticalCenter: parent.verticalCenter
-
-        StyledRect {
-            anchors.fill: parent
-            radius: Theme.cornerRadius
-            color: pathEditMode ? Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency) : Theme.withAlpha(Theme.surfaceContainer, 0)
-            border.color: pathEditMode ? Theme.primary : Theme.withAlpha(Theme.primary, 0)
-            border.width: pathEditMode ? 1 : 0
-            visible: !pathEditMode
-
-            StyledText {
-                id: pathDisplay
-                text: currentPath.replace("file://", "")
-                font.pixelSize: Theme.fontSizeMedium
-                color: Theme.surfaceText
-                font.weight: Font.Medium
-                anchors.fill: parent
-                anchors.leftMargin: Theme.spacingS
-                anchors.rightMargin: Theme.spacingS
-                elide: Text.ElideMiddle
-                verticalAlignment: Text.AlignVCenter
-                maximumLineCount: 1
-                wrapMode: Text.NoWrap
-            }
-
-            MouseArea {
-                anchors.fill: parent
-                cursorShape: Qt.IBeamCursor
-                onClicked: {
-                    pathEditMode = true;
-                    pathInput.text = currentPath.replace("file://", "");
-                    Qt.callLater(() => pathInput.forceActiveFocus());
-                }
-            }
-        }
-
-        DankTextField {
-            id: pathInput
-            anchors.fill: parent
-            visible: pathEditMode
-            topPadding: Theme.spacingXS
-            bottomPadding: Theme.spacingXS
-            onAccepted: {
-                const newPath = text.trim();
-                if (newPath !== "") {
-                    navigation.navigateTo(newPath);
-                }
-                pathEditMode = false;
-            }
-            Keys.onEscapePressed: {
-                pathEditMode = false;
-            }
-            Keys.onDownPressed: {
-                pathEditMode = false;
-            }
-            onActiveFocusChanged: {
-                navigation.pathInputFocusChanged(activeFocus);
-                if (!activeFocus && pathEditMode) {
-                    pathEditMode = false;
-                }
-            }
-        }
-    }
-
-    Row {
-        spacing: Theme.spacingXS
-        visible: !showSidebar
-        anchors.verticalCenter: parent.verticalCenter
-
-        DankActionButton {
-            circular: false
-            iconName: "sort"
-            iconSize: Theme.iconSize - 6
-            iconColor: Theme.surfaceText
-        }
-    }
-}
+DankCommon.FileBrowserNavigation {}

quickshell/Modals/FileBrowser/FileBrowserOverwriteDialog.qml

@@ -1,127 +1,3 @@
-import QtQuick
-import qs.Common
-import qs.Widgets
+import qs.DankCommon.Modals.FileBrowser as DankCommon
 
-Item {
-    id: overwriteDialog
-
-    property bool showDialog: false
-    property string pendingFilePath: ""
-
-    signal confirmed(string filePath)
-    signal cancelled
-
-    visible: showDialog
-    focus: showDialog
-
-    Keys.onEscapePressed: {
-        cancelled();
-    }
-
-    Keys.onReturnPressed: {
-        confirmed(pendingFilePath);
-    }
-
-    Rectangle {
-        anchors.fill: parent
-        color: Theme.shadowStrong
-        opacity: 0.8
-
-        MouseArea {
-            anchors.fill: parent
-            onClicked: {
-                cancelled();
-            }
-        }
-    }
-
-    StyledRect {
-        anchors.centerIn: parent
-        width: 400
-        height: 160
-        color: Theme.surfaceContainer
-        radius: Theme.cornerRadius
-        border.color: Theme.outlineMedium
-        border.width: 1
-
-        Column {
-            anchors.centerIn: parent
-            width: parent.width - Theme.spacingL * 2
-            spacing: Theme.spacingM
-
-            StyledText {
-                text: I18n.tr("File Already Exists")
-                font.pixelSize: Theme.fontSizeLarge
-                font.weight: Font.Medium
-                color: Theme.surfaceText
-                anchors.horizontalCenter: parent.horizontalCenter
-            }
-
-            StyledText {
-                text: I18n.tr("A file with this name already exists. Do you want to overwrite it?")
-                font.pixelSize: Theme.fontSizeMedium
-                color: Theme.surfaceTextMedium
-                width: parent.width
-                wrapMode: Text.WordWrap
-                horizontalAlignment: Text.AlignHCenter
-            }
-
-            Row {
-                anchors.horizontalCenter: parent.horizontalCenter
-                spacing: Theme.spacingM
-
-                StyledRect {
-                    width: 80
-                    height: 36
-                    radius: Theme.cornerRadius
-                    color: cancelArea.containsMouse ? Qt.lighter(Theme.surfaceVariant, 1.2) : Theme.surfaceVariant
-                    border.color: Theme.outline
-                    border.width: 1
-
-                    StyledText {
-                        anchors.centerIn: parent
-                        text: I18n.tr("Cancel")
-                        font.pixelSize: Theme.fontSizeMedium
-                        color: Theme.surfaceText
-                        font.weight: Font.Medium
-                    }
-
-                    MouseArea {
-                        id: cancelArea
-                        anchors.fill: parent
-                        hoverEnabled: true
-                        cursorShape: Qt.PointingHandCursor
-                        onClicked: {
-                            cancelled();
-                        }
-                    }
-                }
-
-                StyledRect {
-                    width: 90
-                    height: 36
-                    radius: Theme.cornerRadius
-                    color: overwriteArea.containsMouse ? Qt.darker(Theme.primary, 1.1) : Theme.primary
-
-                    StyledText {
-                        anchors.centerIn: parent
-                        text: I18n.tr("Overwrite")
-                        font.pixelSize: Theme.fontSizeMedium
-                        color: Theme.background
-                        font.weight: Font.Medium
-                    }
-
-                    MouseArea {
-                        id: overwriteArea
-                        anchors.fill: parent
-                        hoverEnabled: true
-                        cursorShape: Qt.PointingHandCursor
-                        onClicked: {
-                            confirmed(pendingFilePath);
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
+DankCommon.FileBrowserOverwriteDialog {}

quickshell/Modals/FileBrowser/FileBrowserSaveRow.qml

@@ -1,75 +1,3 @@
-import QtQuick
-import qs.Common
-import qs.Widgets
+import qs.DankCommon.Modals.FileBrowser as DankCommon
 
-Row {
-    id: saveRow
-
-    property bool saveMode: false
-    property string defaultFileName: ""
-    property string currentPath: ""
-    property alias fileName: fileNameInput.text
-
-    signal saveRequested(string filePath)
-
-    height: saveMode ? 40 : 0
-    visible: saveMode
-    spacing: Theme.spacingM
-
-    DankTextField {
-        id: fileNameInput
-
-        width: parent.width - saveButton.width - Theme.spacingM
-        height: 40
-        text: defaultFileName
-        placeholderText: I18n.tr("Enter filename...")
-        ignoreLeftRightKeys: false
-        focus: saveMode
-        topPadding: Theme.spacingS
-        bottomPadding: Theme.spacingS
-        Component.onCompleted: {
-            if (saveMode)
-                Qt.callLater(() => {
-                    forceActiveFocus();
-                });
-        }
-        onAccepted: {
-            if (text.trim() !== "") {
-                var basePath = currentPath.replace(/^file:\/\//, '');
-                var fullPath = basePath + "/" + text.trim();
-                fullPath = fullPath.replace(/\/+/g, '/');
-                saveRequested(fullPath);
-            }
-        }
-    }
-
-    StyledRect {
-        id: saveButton
-
-        width: 80
-        height: 40
-        color: fileNameInput.text.trim() !== "" ? Theme.primary : Theme.surfaceVariant
-        radius: Theme.cornerRadius
-
-        StyledText {
-            anchors.centerIn: parent
-            text: I18n.tr("Save")
-            color: fileNameInput.text.trim() !== "" ? Theme.primaryText : Theme.surfaceVariantText
-            font.pixelSize: Theme.fontSizeMedium
-        }
-
-        StateLayer {
-            stateColor: Theme.primary
-            cornerRadius: Theme.cornerRadius
-            enabled: fileNameInput.text.trim() !== ""
-            onClicked: {
-                if (fileNameInput.text.trim() !== "") {
-                    var basePath = currentPath.replace(/^file:\/\//, '');
-                    var fullPath = basePath + "/" + fileNameInput.text.trim();
-                    fullPath = fullPath.replace(/\/+/g, '/');
-                    saveRequested(fullPath);
-                }
-            }
-        }
-    }
-}
+DankCommon.FileBrowserSaveRow {}

quickshell/Modals/FileBrowser/FileBrowserSidebar.qml

@@ -1,70 +1,3 @@
-import QtQuick
-import qs.Common
-import qs.Widgets
+import qs.DankCommon.Modals.FileBrowser as DankCommon
 
-StyledRect {
-    id: sidebar
-
-    property var quickAccessLocations: []
-    property string currentPath: ""
-    signal locationSelected(string path)
-
-    width: 200
-    color: Theme.nestedSurface
-    clip: true
-
-    Column {
-        anchors.fill: parent
-        anchors.margins: Theme.spacingS
-        spacing: Theme.spacingXS
-
-        StyledText {
-            text: I18n.tr("Quick Access")
-            font.pixelSize: Theme.fontSizeSmall
-            color: Theme.surfaceTextMedium
-            font.weight: Font.Medium
-            leftPadding: Theme.spacingS
-            bottomPadding: Theme.spacingXS
-        }
-
-        Repeater {
-            model: quickAccessLocations
-
-            StyledRect {
-                width: parent?.width ?? 0
-                height: 38
-                radius: Theme.cornerRadius
-                color: quickAccessMouseArea.containsMouse ? Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency) : (currentPath === modelData?.path ? Theme.surfacePressed : Theme.withAlpha(Theme.surfacePressed, 0))
-
-                Row {
-                    anchors.fill: parent
-                    anchors.leftMargin: Theme.spacingM
-                    spacing: Theme.spacingS
-
-                    DankIcon {
-                        name: modelData?.icon ?? ""
-                        size: Theme.iconSize - 2
-                        color: currentPath === modelData?.path ? Theme.primary : Theme.surfaceText
-                        anchors.verticalCenter: parent.verticalCenter
-                    }
-
-                    StyledText {
-                        text: modelData?.name ?? ""
-                        font.pixelSize: Theme.fontSizeMedium
-                        color: currentPath === modelData?.path ? Theme.primary : Theme.surfaceText
-                        font.weight: currentPath === modelData?.path ? Font.Medium : Font.Normal
-                        anchors.verticalCenter: parent.verticalCenter
-                    }
-                }
-
-                MouseArea {
-                    id: quickAccessMouseArea
-                    anchors.fill: parent
-                    hoverEnabled: true
-                    cursorShape: Qt.PointingHandCursor
-                    onClicked: locationSelected(modelData?.path ?? "")
-                }
-            }
-        }
-    }
-}
+DankCommon.FileBrowserSidebar {}

quickshell/Modals/FileBrowser/FileBrowserSortMenu.qml

@@ -1,189 +1,3 @@
-import QtQuick
-import qs.Common
-import qs.Widgets
+import qs.DankCommon.Modals.FileBrowser as DankCommon
 
-StyledRect {
-    id: sortMenu
-
-    property string sortBy: "name"
-    property bool sortAscending: true
-    property color surfaceColor: Theme.surfaceContainer
-
-    signal sortBySelected(string value)
-    signal sortOrderSelected(bool ascending)
-
-    width: 200
-    height: sortColumn.height + Theme.spacingM * 2
-    color: surfaceColor
-    radius: Theme.cornerRadius
-    border.color: Theme.outlineMedium
-    border.width: 1
-    visible: false
-    z: 100
-
-    Column {
-        id: sortColumn
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.top: parent.top
-        anchors.margins: Theme.spacingM
-        spacing: Theme.spacingXS
-
-        StyledText {
-            text: "Sort By"
-            font.pixelSize: Theme.fontSizeSmall
-            color: Theme.surfaceTextMedium
-            font.weight: Font.Medium
-        }
-
-        Repeater {
-            model: [
-                {
-                    "name": "Name",
-                    "value": "name"
-                },
-                {
-                    "name": "Size",
-                    "value": "size"
-                },
-                {
-                    "name": "Modified",
-                    "value": "modified"
-                },
-                {
-                    "name": "Type",
-                    "value": "type"
-                }
-            ]
-
-            StyledRect {
-                width: sortColumn?.width ?? 0
-                height: 32
-                radius: Theme.cornerRadius
-                color: sortMouseArea.containsMouse ? Theme.surfaceVariant : (sortBy === modelData?.value ? Theme.surfacePressed : Theme.withAlpha(Theme.surfacePressed, 0))
-
-                Row {
-                    anchors.fill: parent
-                    anchors.leftMargin: Theme.spacingS
-                    spacing: Theme.spacingS
-
-                    DankIcon {
-                        name: sortBy === modelData?.value ? "check" : ""
-                        size: Theme.iconSizeSmall
-                        color: Theme.primary
-                        anchors.verticalCenter: parent.verticalCenter
-                        visible: sortBy === modelData?.value
-                    }
-
-                    StyledText {
-                        text: modelData?.name ?? ""
-                        font.pixelSize: Theme.fontSizeMedium
-                        color: sortBy === modelData?.value ? Theme.primary : Theme.surfaceText
-                        anchors.verticalCenter: parent.verticalCenter
-                    }
-                }
-
-                MouseArea {
-                    id: sortMouseArea
-                    anchors.fill: parent
-                    hoverEnabled: true
-                    cursorShape: Qt.PointingHandCursor
-                    onClicked: {
-                        sortMenu.sortBySelected(modelData?.value ?? "name");
-                        sortMenu.visible = false;
-                    }
-                }
-            }
-        }
-
-        StyledRect {
-            width: sortColumn.width
-            height: 1
-            color: Theme.outline
-        }
-
-        StyledText {
-            text: "Order"
-            font.pixelSize: Theme.fontSizeSmall
-            color: Theme.surfaceTextMedium
-            font.weight: Font.Medium
-            topPadding: Theme.spacingXS
-        }
-
-        StyledRect {
-            width: sortColumn?.width ?? 0
-            height: 32
-            radius: Theme.cornerRadius
-            color: ascMouseArea.containsMouse ? Theme.surfaceVariant : (sortAscending ? Theme.surfacePressed : Theme.withAlpha(Theme.surfacePressed, 0))
-
-            Row {
-                anchors.fill: parent
-                anchors.leftMargin: Theme.spacingS
-                spacing: Theme.spacingS
-
-                DankIcon {
-                    name: "arrow_upward"
-                    size: Theme.iconSizeSmall
-                    color: sortAscending ? Theme.primary : Theme.surfaceText
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-
-                StyledText {
-                    text: "Ascending"
-                    font.pixelSize: Theme.fontSizeMedium
-                    color: sortAscending ? Theme.primary : Theme.surfaceText
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-            }
-
-            MouseArea {
-                id: ascMouseArea
-                anchors.fill: parent
-                hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor
-                onClicked: {
-                    sortMenu.sortOrderSelected(true);
-                    sortMenu.visible = false;
-                }
-            }
-        }
-
-        StyledRect {
-            width: sortColumn?.width ?? 0
-            height: 32
-            radius: Theme.cornerRadius
-            color: descMouseArea.containsMouse ? Theme.surfaceVariant : (!sortAscending ? Theme.surfacePressed : Theme.withAlpha(Theme.surfacePressed, 0))
-
-            Row {
-                anchors.fill: parent
-                anchors.leftMargin: Theme.spacingS
-                spacing: Theme.spacingS
-
-                DankIcon {
-                    name: "arrow_downward"
-                    size: Theme.iconSizeSmall
-                    color: !sortAscending ? Theme.primary : Theme.surfaceText
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-
-                StyledText {
-                    text: "Descending"
-                    font.pixelSize: Theme.fontSizeMedium
-                    color: !sortAscending ? Theme.primary : Theme.surfaceText
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-            }
-
-            MouseArea {
-                id: descMouseArea
-                anchors.fill: parent
-                hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor
-                onClicked: {
-                    sortMenu.sortOrderSelected(false);
-                    sortMenu.visible = false;
-                }
-            }
-        }
-    }
-}
+DankCommon.FileBrowserSortMenu {}

quickshell/Modals/FileBrowser/FileInfo.qml

@@ -1,236 +1,3 @@
-import QtQuick
-import Quickshell.Io
-import qs.Common
-import qs.Widgets
+import qs.DankCommon.Modals.FileBrowser as DankCommon
 
-Rectangle {
-    id: root
-
-    property bool showFileInfo: false
-    property int selectedIndex: -1
-    property var sourceFolderModel: null
-    property string currentPath: ""
-
-    height: 200
-    radius: Theme.cornerRadius
-    color: Theme.withAlpha(Theme.surfaceContainer, 0.95)
-    border.color: Theme.secondary
-    border.width: 2
-    opacity: showFileInfo ? 1 : 0
-    z: 100
-
-    onShowFileInfoChanged: {
-        if (showFileInfo && currentFileName && currentPath) {
-            const fullPath = currentPath + "/" + currentFileName;
-            fileStatProcess.selectedFilePath = fullPath;
-            fileStatProcess.running = true;
-        }
-    }
-
-    Process {
-        id: fileStatProcess
-        command: ["stat", "-c", "%y|%A|%s|%n", selectedFilePath]
-        property string selectedFilePath: ""
-        property var fileStats: null
-        running: false
-
-        stdout: StdioCollector {
-            onStreamFinished: {
-                if (text && text.trim()) {
-                    const parts = text.trim().split('|');
-                    if (parts.length >= 4) {
-                        fileStatProcess.fileStats = {
-                            "modifiedTime": parts[0],
-                            "permissions": parts[1],
-                            "size": parseInt(parts[2]) || 0,
-                            "fullPath": parts[3]
-                        };
-                    }
-                }
-            }
-        }
-
-        onExited: function (exitCode) {}
-    }
-
-    property string currentFileName: ""
-    property bool currentFileIsDir: false
-    property string currentFileExtension: ""
-
-    onCurrentFileNameChanged: {
-        if (showFileInfo && currentFileName && currentPath) {
-            const fullPath = currentPath + "/" + currentFileName;
-            if (fullPath !== fileStatProcess.selectedFilePath) {
-                fileStatProcess.selectedFilePath = fullPath;
-                fileStatProcess.running = true;
-            }
-        }
-    }
-
-    function updateFileInfo(filePath, fileName, isDirectory) {
-        if (filePath && filePath !== fileStatProcess.selectedFilePath) {
-            fileStatProcess.selectedFilePath = filePath;
-            currentFileName = fileName || "";
-            currentFileIsDir = isDirectory || false;
-
-            let ext = "";
-            if (!isDirectory && fileName) {
-                const lastDot = fileName.lastIndexOf('.');
-                if (lastDot > 0) {
-                    ext = fileName.substring(lastDot + 1).toLowerCase();
-                }
-            }
-            currentFileExtension = ext;
-
-            if (showFileInfo) {
-                fileStatProcess.running = true;
-            }
-        }
-    }
-
-    readonly property var currentFileDisplayData: {
-        if (selectedIndex < 0 || !sourceFolderModel) {
-            return {
-                "exists": false,
-                "name": "No selection",
-                "type": "",
-                "size": "",
-                "modified": "",
-                "permissions": "",
-                "extension": "",
-                "position": "N/A"
-            };
-        }
-
-        const hasValidFile = currentFileName !== "";
-        return {
-            "exists": hasValidFile,
-            "name": hasValidFile ? currentFileName : "Loading...",
-            "type": currentFileIsDir ? "Directory" : "File",
-            "size": fileStatProcess.fileStats ? formatFileSize(fileStatProcess.fileStats.size) : "Calculating...",
-            "modified": fileStatProcess.fileStats ? formatDateTime(fileStatProcess.fileStats.modifiedTime) : "Loading...",
-            "permissions": fileStatProcess.fileStats ? fileStatProcess.fileStats.permissions : "Loading...",
-            "extension": currentFileExtension,
-            "position": sourceFolderModel ? ((selectedIndex + 1) + " of " + sourceFolderModel.count) : "N/A"
-        };
-    }
-
-    Column {
-        anchors.top: parent.top
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.margins: Theme.spacingM
-        spacing: Theme.spacingXS
-
-        Row {
-            width: parent.width
-            spacing: Theme.spacingS
-
-            DankIcon {
-                name: "info"
-                size: Theme.iconSize
-                color: Theme.secondary
-            }
-
-            StyledText {
-                text: I18n.tr("File Information")
-                font.pixelSize: Theme.fontSizeMedium
-                color: Theme.surfaceText
-                font.weight: Font.Medium
-                anchors.verticalCenter: parent.verticalCenter
-            }
-        }
-
-        Column {
-            width: parent.width
-            spacing: Theme.spacingXS
-
-            StyledText {
-                text: currentFileDisplayData.name
-                font.pixelSize: Theme.fontSizeMedium
-                color: Theme.surfaceText
-                width: parent.width
-                elide: Text.ElideMiddle
-                wrapMode: Text.NoWrap
-                font.weight: Font.Medium
-            }
-
-            StyledText {
-                text: currentFileDisplayData.type + (currentFileDisplayData.extension ? " (." + currentFileDisplayData.extension + ")" : "")
-                font.pixelSize: Theme.fontSizeSmall
-                color: Theme.surfaceTextMedium
-                width: parent.width
-            }
-
-            StyledText {
-                text: currentFileDisplayData.size
-                font.pixelSize: Theme.fontSizeSmall
-                color: Theme.surfaceTextMedium
-                width: parent.width
-                visible: currentFileDisplayData.exists && !currentFileIsDir
-            }
-
-            StyledText {
-                text: currentFileDisplayData.modified
-                font.pixelSize: Theme.fontSizeSmall
-                color: Theme.surfaceTextMedium
-                width: parent.width
-                elide: Text.ElideRight
-                visible: currentFileDisplayData.exists
-            }
-
-            StyledText {
-                text: currentFileDisplayData.permissions
-                font.pixelSize: Theme.fontSizeSmall
-                color: Theme.surfaceTextMedium
-                visible: currentFileDisplayData.exists
-            }
-
-            StyledText {
-                text: currentFileDisplayData.position
-                font.pixelSize: Theme.fontSizeSmall
-                color: Theme.surfaceTextMedium
-                width: parent.width
-            }
-        }
-    }
-
-    StyledText {
-        text: I18n.tr("F1/I: Toggle • F10: Help")
-        font.pixelSize: Theme.fontSizeSmall
-        color: Theme.surfaceTextMedium
-        anchors.bottom: parent.bottom
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.margins: Theme.spacingM
-        horizontalAlignment: Text.AlignHCenter
-    }
-
-    function formatFileSize(bytes) {
-        if (bytes === 0 || !bytes) {
-            return "0 B";
-        }
-        const k = 1024;
-        const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
-        const i = Math.floor(Math.log(bytes) / Math.log(k));
-        return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
-    }
-
-    function formatDateTime(dateTimeString) {
-        if (!dateTimeString) {
-            return "Unknown";
-        }
-        const parts = dateTimeString.split(' ');
-        if (parts.length >= 2) {
-            return parts[0] + " " + parts[1].split('.')[0];
-        }
-        return dateTimeString;
-    }
-
-    Behavior on opacity {
-        NumberAnimation {
-            duration: Theme.shortDuration
-            easing.type: Theme.standardEasing
-        }
-    }
-}
+DankCommon.FileInfo {}

quickshell/Modals/FileBrowser/KeyboardHints.qml

@@ -1,50 +1,3 @@
-import QtQuick
-import qs.Common
-import qs.Widgets
+import qs.DankCommon.Modals.FileBrowser as DankCommon
 
-Rectangle {
-    id: root
-
-    property bool showHints: false
-
-    height: 80
-    radius: Theme.cornerRadius
-    color: Theme.withAlpha(Theme.surfaceContainer, 0.95)
-    border.color: Theme.primary
-    border.width: 2
-    opacity: showHints ? 1 : 0
-    z: 100
-
-    Column {
-        anchors.verticalCenter: parent.verticalCenter
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.margins: Theme.spacingS
-        spacing: Theme.spacingXXS
-
-        StyledText {
-            text: I18n.tr("Tab/Shift+Tab: Nav • ←→↑↓: Grid Nav • Enter/Space: Select")
-            font.pixelSize: Theme.fontSizeSmall
-            color: Theme.surfaceText
-            width: parent.width
-            wrapMode: Text.WordWrap
-            horizontalAlignment: Text.AlignHCenter
-        }
-
-        StyledText {
-            text: I18n.tr("Alt+←/Backspace: Back • F1/I: File Info • F10: Help • Esc: Close")
-            font.pixelSize: Theme.fontSizeSmall
-            color: Theme.surfaceText
-            width: parent.width
-            wrapMode: Text.WordWrap
-            horizontalAlignment: Text.AlignHCenter
-        }
-    }
-
-    Behavior on opacity {
-        NumberAnimation {
-            duration: Theme.shortDuration
-            easing.type: Theme.standardEasing
-        }
-    }
-}
+DankCommon.KeyboardHints {}

quickshell/Modules/Settings/AboutTab.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import QtQuick.Effects
 import qs.Common
+import qs.DankCommon.Common as DankCommon
 import qs.Services
 import qs.Widgets
 
@@ -176,14 +177,9 @@ Item {
                             text: "DANK LINUX"
                             font.pixelSize: parent.compactLogo ? 32 : 48
                             font.weight: Font.Bold
-                            font.family: interFont.name
+                            font.family: DankCommon.Fonts.sans
                             color: Theme.surfaceText
                             antialiasing: true
-
-                            FontLoader {
-                                id: interFont
-                                source: Qt.resolvedUrl("../../assets/fonts/inter/InterVariable.ttf")
-                            }
                         }
                     }
 

quickshell/PLUGINS/README.md

@@ -35,6 +35,8 @@ Plugins let you add custom widgets to DankBar and Control Center. They're discov
    - Supports left, center, and right sections
    - Supports any dankbar position (top/left/right/bottom)
 
+Many widgets are implemented in the shared [dank-qml-common](https://github.com/AvengeMedia/dank-qml-common) library and re-exported by DMS. Plugins should keep importing `qs.Common`, `qs.Services`, `qs.Widgets`, and `qs.Modules.Plugins` — these remain the supported plugin API and are unaffected by where a widget is implemented.
+
 ## Plugin Structure
 
 Each plugin must be a directory in `$CONFIGPATH/DankMaterialShell/plugins/` containing:

quickshell/Shaders/frag/elevation_rect.frag

@@ -1,54 +0,0 @@
-#version 450
-
-// Standalone rounded rect with border and M3 elevation shadow as one SDF.
-
-layout(location = 0) in vec2 qt_TexCoord0;
-layout(location = 0) out vec4 fragColor;
-
-layout(std140, binding = 0) uniform buf {
-    mat4 qt_Matrix;
-    float qt_Opacity;
-    float widthPx;
-    float heightPx;
-    float borderWidth;
-    vec4 rectPx;        // rounded rect in item px: x, y, w, h
-    vec4 cornerRadius;  // topLeft, topRight, bottomRight, bottomLeft
-    vec4 fillColor;     // straight (non-premultiplied) rgba
-    vec4 borderColor;   // straight rgba
-    vec4 shadowColor;   // straight rgba; a = 0 disables both shadow terms
-    vec4 shadowParam;   // key: x = blur px, y = spread px, z,w = offset px
-    vec4 ambientParam;  // ambient: x = blur px, y = spread px, z = alpha
-} ubuf;
-
-float sdRoundBox4(vec2 p, vec2 c, vec2 hs, vec4 r) {
-    p -= c;
-    float rr = (p.x >= 0.0) ? (p.y >= 0.0 ? r.z : r.y) : (p.y >= 0.0 ? r.w : r.x);
-    rr = min(rr, min(hs.x, hs.y));
-    vec2 q = abs(p) - hs + rr;
-    return min(max(q.x, q.y), 0.0) + length(max(q, vec2(0.0))) - rr;
-}
-
-float rectDist(vec2 px) {
-    vec2 hs = ubuf.rectPx.zw * 0.5;
-    return sdRoundBox4(px, ubuf.rectPx.xy + hs, hs, ubuf.cornerRadius);
-}
-
-void main() {
-    vec2 px = qt_TexCoord0 * vec2(ubuf.widthPx, ubuf.heightPx);
-    float d = rectDist(px);
-    float fw = max(fwidth(d), 1e-4);
-    float cov = 1.0 - smoothstep(-fw, fw, d);
-    float covInner = 1.0 - smoothstep(-fw, fw, d + ubuf.borderWidth);
-    vec4 col = vec4(ubuf.fillColor.rgb, 1.0) * (ubuf.fillColor.a * covInner)
-             + vec4(ubuf.borderColor.rgb, 1.0) * (ubuf.borderColor.a * max(0.0, cov - covInner));
-    if (ubuf.shadowColor.a > 0.0) {
-        float dk = rectDist(px - ubuf.shadowParam.zw) - ubuf.shadowParam.y;
-        float bk = max(ubuf.shadowParam.x, fw);
-        float covK = 1.0 - smoothstep(-bk, bk, dk);
-        float ba = max(ubuf.ambientParam.x, fw);
-        float covA = 1.0 - smoothstep(-ba, ba, d - ubuf.ambientParam.y);
-        float sh = 1.0 - (1.0 - covK * ubuf.shadowColor.a) * (1.0 - covA * ubuf.ambientParam.z);
-        col += vec4(ubuf.shadowColor.rgb, 1.0) * (sh * (1.0 - cov));
-    }
-    fragColor = col * ubuf.qt_Opacity;
-}

quickshell/Shaders/frag/ripple.frag

@@ -1,61 +0,0 @@
-#version 450
-
-layout(location = 0) in vec2 qt_TexCoord0;
-layout(location = 0) out vec4 fragColor;
-
-layout(std140, binding = 0) uniform buf {
-    mat4 qt_Matrix;
-    float qt_Opacity;
-    float widthPx;
-    float heightPx;
-    float cornerRadiusPx;
-    float rippleCenterX;
-    float rippleCenterY;
-    float rippleRadius;
-    float rippleOpacity;
-    float offsetX;
-    float offsetY;
-    float parentWidth;
-    float parentHeight;
-    vec4 rippleCol;
-} ubuf;
-
-float sdRoundRect(vec2 p, vec2 b, float r) {
-    vec2 q = abs(p) - (b - vec2(r));
-    return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - r;
-}
-
-void main() {
-    if (ubuf.rippleOpacity <= 0.0 || ubuf.rippleRadius <= 0.0) {
-        fragColor = vec4(0.0);
-        return;
-    }
-
-    vec2 px = qt_TexCoord0 * vec2(ubuf.widthPx, ubuf.heightPx) + vec2(ubuf.offsetX, ubuf.offsetY);
-
-    float circleD = length(px - vec2(ubuf.rippleCenterX, ubuf.rippleCenterY)) - ubuf.rippleRadius;
-    float aaCircle = max(fwidth(circleD), 0.001);
-    float circleMask = 1.0 - smoothstep(-aaCircle, aaCircle, circleD);
-    if (circleMask <= 0.0) {
-        fragColor = vec4(0.0);
-        return;
-    }
-
-    float rrMask = 1.0;
-    if (ubuf.cornerRadiusPx > 0.0) {
-        vec2 halfSize = vec2(ubuf.parentWidth, ubuf.parentHeight) * 0.5;
-        float r = clamp(ubuf.cornerRadiusPx, 0.0, min(halfSize.x, halfSize.y));
-        float rrD = sdRoundRect(px - halfSize, halfSize, r);
-        float aaRR = max(fwidth(rrD), 0.001);
-        rrMask = 1.0 - smoothstep(-aaRR, aaRR, rrD);
-    }
-
-    float mask = circleMask * rrMask;
-    if (mask <= 0.0) {
-        fragColor = vec4(0.0);
-        return;
-    }
-
-    float a = ubuf.rippleCol.a * ubuf.rippleOpacity * mask * ubuf.qt_Opacity;
-    fragColor = vec4(ubuf.rippleCol.rgb * a, a);
-}

quickshell/Shaders/frag/wave_progress.frag

@@ -1,115 +0,0 @@
-#version 450
-
-layout(location = 0) in vec2 qt_TexCoord0;
-layout(location = 0) out vec4 fragColor;
-
-layout(std140, binding = 0) uniform buf {
-    mat4 qt_Matrix;
-    float qt_Opacity;
-    float widthPx;
-    float heightPx;
-    float value;
-    float actualValue;
-    float phase;
-    float ampPx;
-    float wavelengthPx;
-    float lineWidthPx;
-    float showActual;
-    vec4 fillColor;
-    vec4 trackColor;
-    vec4 playheadColor;
-    vec4 actualColor;
-} ubuf;
-
-const float TAU = 6.28318530718;
-const float AA = 0.75; // pixel-space antialias band
-
-// Signed distance to a rounded box centered at the origin.
-float sdRoundBar(vec2 p, vec2 halfSize, float r) {
-    vec2 q = abs(p) - halfSize + vec2(r);
-    return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - r;
-}
-
-// Composite a straight-alpha color over a premultiplied accumulator.
-vec4 blendOver(vec4 dst, vec3 rgb, float a) {
-    return vec4(rgb * a + dst.rgb * (1.0 - a), a + dst.a * (1.0 - a));
-}
-
-void main() {
-    float w = ubuf.widthPx;
-    float h = ubuf.heightPx;
-    vec2 px = vec2(qt_TexCoord0.x * w, qt_TexCoord0.y * h);
-
-    float mid = h * 0.5;
-    float halfW = ubuf.lineWidthPx * 0.5;
-    float k = TAU / max(ubuf.wavelengthPx, 1e-3);
-
-    float playX = clamp(ubuf.value, 0.0, 1.0) * w;
-    float actualX = clamp(ubuf.actualValue, 0.0, 1.0) * w;
-    bool seeking = ubuf.showActual > 0.5;
-
-    float loX = min(playX, actualX);
-    float hiX = max(playX, actualX);
-    float fillEnd = seeking ? loX : playX;   // filled progress ends here
-    float actStart = seeking ? loX : playX;  // seek-preview segment
-    float actEnd = seeking ? hiX : playX;
-    float trackStart = seeking ? hiX : playX; // unplayed remainder
-
-    // Perpendicular distance to the animated sine stroke.
-    float ang = k * px.x + ubuf.phase;
-    float wy = mid + ubuf.ampPx * sin(ang);
-    float slope = ubuf.ampPx * k * cos(ang);
-    float dWave = abs(px.y - wy) / sqrt(1.0 + slope * slope);
-    float aaW = AA;
-    float waveStroke = 1.0 - smoothstep(halfW - aaW, halfW + aaW, dWave);
-
-    // Straight remainder line.
-    float dLine = abs(px.y - mid);
-    float aaL = AA;
-    float lineStroke = 1.0 - smoothstep(halfW - aaL, halfW + aaL, dLine);
-
-    vec4 col = vec4(0.0);
-
-    // 1. Track (unplayed remainder), to the right of the progress head.
-    {
-        float m = lineStroke * step(trackStart, px.x);
-        col = blendOver(col, ubuf.trackColor.rgb, ubuf.trackColor.a * m);
-    }
-
-    // 2. Seek-preview segment (only while seeking).
-    if (seeking) {
-        float m = waveStroke * step(actStart, px.x) * step(px.x, actEnd);
-        col = blendOver(col, ubuf.actualColor.rgb, ubuf.actualColor.a * m);
-    }
-
-    // 3. Filled progress wave.
-    {
-        float m = waveStroke * step(halfW, px.x) * step(px.x, fillEnd);
-        // Rounded start cap.
-        float capS = length(px - vec2(halfW, mid + ubuf.ampPx * sin(k * halfW + ubuf.phase))) - halfW;
-        float capM = 1.0 - smoothstep(-aaW, aaW, capS);
-        m = max(m, capM * step(halfW - 1.0, px.x));
-        col = blendOver(col, ubuf.fillColor.rgb, ubuf.fillColor.a * m);
-    }
-
-    // 4. Actual-position marker (only while seeking).
-    if (seeking) {
-        float amH = max(ubuf.lineWidthPx + 4.0, 10.0);
-        float d = sdRoundBar(px - vec2(actualX, mid), vec2(1.0, amH * 0.5), 1.0);
-        float aa = AA;
-        float m = 1.0 - smoothstep(-aa, aa, d);
-        col = blendOver(col, ubuf.actualColor.rgb, ubuf.actualColor.a * m);
-    }
-
-    // 5. Playhead pill (on top).
-    {
-        float phW = 3.5;
-        float phH = max(ubuf.lineWidthPx + 12.0, 16.0);
-        float d = sdRoundBar(px - vec2(playX, mid), vec2(phW * 0.5, phH * 0.5), phW * 0.5);
-        float aa = AA;
-        float m = 1.0 - smoothstep(-aa, aa, d);
-        col = blendOver(col, ubuf.playheadColor.rgb, ubuf.playheadColor.a * m);
-    }
-
-    fragColor = col * ubuf.qt_Opacity;
-}

quickshell/Widgets/AppIconRenderer.qml

@@ -1,129 +1,3 @@
-import QtQuick
-import Quickshell.Widgets
-import qs.Common
+import qs.DankCommon.Widgets as DankCommon
 
-Item {
-    id: root
-
-    required property string iconValue
-    required property int iconSize
-    property string fallbackText: "A"
-    property color iconColor: Theme.surfaceText
-    property color colorOverride: "transparent"
-    property real brightnessOverride: 0.0
-    property real contrastOverride: 0.0
-    property real saturationOverride: 0.0
-    property color fallbackBackgroundColor: Theme.surfaceLight
-    property color fallbackTextColor: Theme.primary
-    property real materialIconSizeAdjustment: Theme.spacingM
-    property real unicodeIconScale: 0.7
-    property real fallbackTextScale: 0.4
-    property real iconMargins: 0
-    property real fallbackLeftMargin: 0
-    property real fallbackRightMargin: 0
-    property real fallbackTopMargin: 0
-    property real fallbackBottomMargin: 0
-
-    readonly property bool isMaterial: iconValue && iconValue.startsWith("material:")
-    readonly property bool isUnicode: iconValue && iconValue.startsWith("unicode:")
-    readonly property bool isSvgCorner: iconValue && iconValue.startsWith("svg+corner:")
-    readonly property bool isSvg: iconValue && !isSvgCorner && iconValue.startsWith("svg:")
-    readonly property bool isImage: iconValue && iconValue.startsWith("image:")
-    readonly property bool hasColorOverride: colorOverride.a > 0
-    readonly property string materialName: isMaterial ? iconValue.substring(9) : ""
-    readonly property string unicodeChar: isUnicode ? iconValue.substring(8) : ""
-    readonly property string imagePath: isImage ? iconValue.substring(6) : ""
-    readonly property string svgSource: {
-        if (isSvgCorner) {
-            const parts = iconValue.substring(11).split("|");
-            return parts[0] || "";
-        }
-        if (isSvg)
-            return iconValue.substring(4);
-        return "";
-    }
-    readonly property string svgCornerIcon: isSvgCorner ? (iconValue.substring(11).split("|")[1] || "") : ""
-    readonly property bool hasSpecialPrefix: isMaterial || isUnicode || isSvg || isSvgCorner || isImage
-    readonly property string iconPath: {
-        if (hasSpecialPrefix || !iconValue)
-            return "";
-        return Paths.resolveIconPath(iconValue);
-    }
-
-    visible: iconValue !== undefined && iconValue !== ""
-
-    DankIcon {
-        anchors.centerIn: parent
-        name: root.materialName
-        size: root.iconSize - root.materialIconSizeAdjustment
-        color: root.hasColorOverride ? root.colorOverride : root.iconColor
-        visible: root.isMaterial
-    }
-
-    StyledText {
-        anchors.centerIn: parent
-        text: root.unicodeChar
-        font.pixelSize: root.iconSize * root.unicodeIconScale
-        color: root.hasColorOverride ? root.colorOverride : root.iconColor
-        visible: root.isUnicode
-    }
-
-    DankSVGIcon {
-        anchors.centerIn: parent
-        source: root.svgSource
-        size: root.iconSize
-        cornerIcon: root.svgCornerIcon
-        colorOverride: root.colorOverride
-        brightnessOverride: root.brightnessOverride
-        contrastOverride: root.contrastOverride
-        saturationOverride: root.saturationOverride
-        visible: root.isSvg || root.isSvgCorner
-    }
-
-    CachingImage {
-        id: cachingImg
-        anchors.fill: parent
-        imagePath: root.imagePath
-        maxCacheSize: root.iconSize * 2
-        animate: false
-        visible: root.isImage && status === Image.Ready
-    }
-
-    Loader {
-        id: iconImgLoader
-        anchors.fill: parent
-        anchors.margins: root.iconMargins
-        active: !root.hasSpecialPrefix && root.iconPath !== ""
-        sourceComponent: IconImage {
-            anchors.fill: parent
-            source: root.iconPath
-            backer.sourceSize: Qt.size(root.iconSize * 2, root.iconSize * 2)
-            mipmap: true
-            asynchronous: true
-            visible: status === Image.Ready
-        }
-    }
-
-    Rectangle {
-        id: fallbackRect
-
-        anchors.fill: parent
-        anchors.leftMargin: root.fallbackLeftMargin
-        anchors.rightMargin: root.fallbackRightMargin
-        anchors.topMargin: root.fallbackTopMargin
-        anchors.bottomMargin: root.fallbackBottomMargin
-        visible: !root.hasSpecialPrefix && (root.iconPath === "" || !iconImgLoader.item || iconImgLoader.item.status !== Image.Ready)
-        color: root.fallbackBackgroundColor
-        radius: Theme.cornerRadius
-        border.width: 0
-        border.color: Theme.primarySelected
-
-        StyledText {
-            anchors.centerIn: parent
-            text: root.fallbackText
-            font.pixelSize: root.iconSize * root.fallbackTextScale
-            color: root.fallbackTextColor
-            font.weight: Font.Bold
-        }
-    }
-}
+DankCommon.AppIconRenderer {}

quickshell/Widgets/CachingImage.qml

@@ -1,132 +1,3 @@
-import QtQuick
-import qs.Common
+import qs.DankCommon.Widgets as DankCommon
 
-Item {
-    id: root
-
-    property string imagePath: ""
-    property int maxCacheSize: 512
-    property int status: isAnimated ? animatedImg.status : staticImg.status
-    property int fillMode: Image.PreserveAspectCrop
-    // AnimatedImage decodes full-size on the GUI thread and is never cached;
-    // disable for thumbnail grids
-    property bool animate: true
-    property bool _fromCache: false
-
-    readonly property bool isRemoteUrl: imagePath.startsWith("http://") || imagePath.startsWith("https://")
-    readonly property bool isAnimated: {
-        if (!animate || !imagePath)
-            return false;
-        const lower = imagePath.toLowerCase();
-        return lower.endsWith(".gif") || lower.endsWith(".webp");
-    }
-    readonly property string normalizedPath: {
-        if (!imagePath)
-            return "";
-        if (isRemoteUrl)
-            return imagePath;
-        if (imagePath.startsWith("file://"))
-            return imagePath.substring(7);
-        return imagePath;
-    }
-
-    function djb2Hash(str) {
-        if (!str)
-            return "";
-        let hash = 5381;
-        for (let i = 0; i < str.length; i++) {
-            hash = ((hash << 5) + hash) + str.charCodeAt(i);
-            hash = hash & 0x7FFFFFFF;
-        }
-        return hash.toString(16).padStart(8, '0');
-    }
-
-    readonly property string imageHash: normalizedPath ? djb2Hash(normalizedPath) : ""
-    readonly property string cacheFileName: imageHash && !isRemoteUrl && !isAnimated ? `${imageHash}@${maxCacheSize}x${maxCacheSize}.png` : ""
-    readonly property string cachePath: cacheFileName ? `${Paths.stringify(Paths.imagecache)}/${cacheFileName}` : ""
-    readonly property string encodedImagePath: {
-        if (!normalizedPath)
-            return "";
-        if (isRemoteUrl)
-            return normalizedPath;
-        return "file://" + normalizedPath.split('/').map(s => encodeURIComponent(s)).join('/');
-    }
-
-    AnimatedImage {
-        id: animatedImg
-        anchors.fill: parent
-        visible: root.isAnimated
-        asynchronous: true
-        fillMode: root.fillMode
-        source: root.isAnimated ? root.imagePath : ""
-        playing: visible && status === AnimatedImage.Ready
-    }
-
-    Image {
-        id: staticImg
-        anchors.fill: parent
-        visible: !root.isAnimated
-        asynchronous: true
-        fillMode: root.fillMode
-        sourceSize.width: root.maxCacheSize
-        sourceSize.height: root.maxCacheSize
-        smooth: true
-
-        onStatusChanged: {
-            switch (status) {
-            case Image.Error:
-                if (!root._fromCache)
-                    return;
-                root._fromCache = false;
-                source = root.encodedImagePath;
-                return;
-            case Image.Ready:
-                if (root._fromCache || root.isRemoteUrl || !root.cachePath)
-                    return;
-                if (!visible || width <= 0 || height <= 0 || !Window.window?.visible)
-                    return;
-                const grabPath = root.cachePath;
-                grabToImage(res => {
-                    res.saveToFile(grabPath);
-                });
-                return;
-            }
-        }
-    }
-
-    // Derives everything from a local snapshot of imagePath: sibling property
-    // bindings (isRemoteUrl, encodedImagePath, ...) are still stale when
-    // onImagePathChanged runs, so reading them here routes remote URLs down
-    // the local-file branch on the first path change
-    function resolveSource() {
-        const path = imagePath;
-        if (!path) {
-            _fromCache = false;
-            staticImg.source = "";
-            return;
-        }
-        const lower = path.toLowerCase();
-        if (animate && (lower.endsWith(".gif") || lower.endsWith(".webp")))
-            return;
-        if (path.startsWith("http://") || path.startsWith("https://")) {
-            _fromCache = false;
-            staticImg.source = path;
-            return;
-        }
-        const stripped = path.startsWith("file://") ? path.substring(7) : path;
-        const encoded = "file://" + stripped.split('/').map(s => encodeURIComponent(s)).join('/');
-        const hash = djb2Hash(stripped);
-        if (!hash) {
-            _fromCache = false;
-            staticImg.source = encoded;
-            return;
-        }
-        // Cache-first; a miss errors and falls back to encodedImagePath
-        _fromCache = true;
-        staticImg.source = `${Paths.stringify(Paths.imagecache)}/${hash}@${maxCacheSize}x${maxCacheSize}.png`;
-    }
-
-    onImagePathChanged: resolveSource()
-    // During creation onImagePathChanged fires before sibling properties (maxCacheSize) initialize
-    onCachePathChanged: resolveSource()
-}
+DankCommon.CachingImage {}

quickshell/Widgets/DankActionButton.qml

@@ -1,45 +1,3 @@
-import QtQuick
-import qs.Common
-import qs.Widgets
+import qs.DankCommon.Widgets as DankCommon
 
-StyledRect {
-    id: root
-
-    property string iconName: ""
-    property int iconSize: Theme.iconSize - 4
-    property color iconColor: Theme.surfaceText
-    property color backgroundColor: "transparent"
-    property bool circular: true
-    property int buttonSize: 32
-    property var tooltipText: null
-    property string tooltipSide: "bottom"
-    readonly property alias pressed: stateLayer.pressed
-
-    signal clicked
-    signal entered
-    signal exited
-
-    width: buttonSize
-    height: buttonSize
-    radius: Theme.cornerRadius
-    color: backgroundColor
-
-    DankIcon {
-        anchors.centerIn: parent
-        name: root.iconName
-        size: root.iconSize
-        color: root.iconColor
-    }
-
-    StateLayer {
-        id: stateLayer
-        disabled: !root.enabled
-        stateColor: Theme.primary
-        cornerRadius: root.radius
-        onClicked: root.clicked()
-        onEntered: root.entered()
-        onExited: root.exited()
-        tooltipText: root.tooltipText
-        tooltipSide: root.tooltipSide
-    }
-}
+DankCommon.DankActionButton {}

quickshell/Widgets/DankBlink.qml

@@ -1,28 +1,3 @@
-import QtQuick
+import qs.DankCommon.Widgets as DankCommon
 
-SequentialAnimation {
-    id: root
-
-    property Item target
-    property real minOpacity: 0.3
-    property int pulseDuration: 600
-
-    loops: Animation.Infinite
-
-    NumberAnimation {
-        target: root.target
-        property: "opacity"
-        to: root.minOpacity
-        duration: root.pulseDuration
-        easing.type: Easing.InOutQuad
-    }
-    NumberAnimation {
-        target: root.target
-        property: "opacity"
-        to: 1.0
-        duration: root.pulseDuration
-        easing.type: Easing.InOutQuad
-    }
-
-    onStopped: if (root.target) root.target.opacity = 1.0
-}
+DankCommon.DankBlink {}

quickshell/Widgets/DankButton.qml

@@ -1,99 +1,3 @@
-import QtQuick
-import qs.Common
-import qs.Widgets
+import qs.DankCommon.Widgets as DankCommon
 
-Rectangle {
-    id: root
-
-    property string text: ""
-    property string iconName: ""
-    property int iconSize: Theme.iconSizeSmall
-    property bool hovered: mouseArea.containsMouse
-    property bool pressed: mouseArea.pressed
-    property color backgroundColor: Theme.buttonBg
-    property color textColor: Theme.buttonText
-    property int buttonHeight: 40
-    property int horizontalPadding: Theme.spacingL
-    property bool enableScaleAnimation: false
-    property bool enableRipple: typeof SettingsData !== "undefined" ? (SettingsData.enableRippleEffects ?? true) : true
-
-    signal clicked
-
-    width: Math.max(contentRow.implicitWidth + horizontalPadding * 2, 64)
-    height: buttonHeight
-    radius: Theme.cornerRadius
-    color: backgroundColor
-    opacity: enabled ? 1 : 0.4
-    scale: (enableScaleAnimation && pressed) ? 0.98 : 1.0
-
-    Behavior on scale {
-        enabled: enableScaleAnimation && Theme.currentAnimationSpeed !== SettingsData.AnimationSpeed.None
-        NumberAnimation {
-            easing.type: Easing.BezierSpline
-            duration: 100
-            easing.bezierCurve: Theme.expressiveCurves.standard
-        }
-    }
-
-    Rectangle {
-        id: stateLayer
-        anchors.fill: parent
-        radius: parent.radius
-        color: {
-            if (pressed)
-                return Theme.withAlpha(root.textColor, 0.20);
-            if (hovered)
-                return Theme.withAlpha(root.textColor, 0.12);
-            return Theme.withAlpha(root.textColor, 0);
-        }
-
-        Behavior on color {
-            ColorAnimation {
-                duration: Theme.shorterDuration
-                easing.type: Theme.standardEasing
-            }
-        }
-    }
-
-    DankRipple {
-        id: rippleLayer
-        rippleColor: root.textColor
-        cornerRadius: root.radius
-        enableRipple: root.enableRipple
-    }
-
-    Row {
-        id: contentRow
-        anchors.centerIn: parent
-        spacing: Theme.spacingS
-
-        DankIcon {
-            name: root.iconName
-            size: root.iconSize
-            color: root.textColor
-            visible: root.iconName !== ""
-            anchors.verticalCenter: parent.verticalCenter
-        }
-
-        StyledText {
-            text: root.text
-            font.pixelSize: Theme.fontSizeMedium
-            font.weight: Font.Medium
-            color: root.textColor
-            anchors.verticalCenter: parent.verticalCenter
-        }
-    }
-
-    MouseArea {
-        id: mouseArea
-        anchors.fill: parent
-        hoverEnabled: true
-        cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
-        enabled: root.enabled
-        onPressed: mouse => {
-            if (root.enableRipple)
-                rippleLayer.trigger(mouse.x, mouse.y);
-        }
-        onClicked: root.clicked()
-    }
-}
+DankCommon.DankButton {}

quickshell/Widgets/DankButtonGroup.qml

@@ -1,271 +1,3 @@
-import QtQuick
-import Quickshell
-import qs.Common
-import qs.Widgets
+import qs.DankCommon.Widgets as DankCommon
 
-Row {
-    id: root
-
-    function checkParentDisablesTransparency() {
-        let p = parent;
-        while (p) {
-            if (p.disablePopupTransparency === true)
-                return true;
-            p = p.parent;
-        }
-        return false;
-    }
-
-    property var model: []
-    property int currentIndex: -1
-    property string selectionMode: "single"
-    property bool multiSelect: selectionMode === "multi"
-    property var initialSelection: []
-    property var currentSelection: initialSelection
-    property bool checkEnabled: true
-    property string size: "medium"
-    property int buttonHeight: size === "small" ? 32 : 40
-    property int minButtonWidth: size === "small" ? 56 : 64
-    property int buttonPadding: size === "small" ? Theme.spacingM : Theme.spacingL
-    property int checkIconSize: size === "small" ? Theme.iconSizeSmall - 2 : Theme.iconSizeSmall
-    property int textSize: size === "small" ? Theme.fontSizeSmall : Theme.fontSizeMedium
-    property bool userInteracted: false
-    property bool usePopupTransparency: !checkParentDisablesTransparency()
-    property real maximumWidth: -1
-    readonly property real _segmentCap: {
-        const count = model?.length ?? 0;
-        if (maximumWidth <= 0 || count === 0)
-            return -1;
-        return (maximumWidth - spacing * (count - 1)) / count - 4;
-    }
-
-    signal selectionChanged(int index, bool selected)
-    signal animationCompleted
-
-    spacing: Theme.spacingXS
-
-    Timer {
-        id: animationTimer
-        interval: Theme.shortDuration
-        onTriggered: {
-            root.userInteracted = false;
-            root.animationCompleted();
-        }
-    }
-
-    function isSelected(index) {
-        if (multiSelect) {
-            return repeater.itemAt(index)?.selected || false;
-        }
-        return index === currentIndex;
-    }
-
-    function selectItem(index) {
-        userInteracted = true;
-        if (multiSelect) {
-            const modelValue = model[index];
-            let newSelection = [...currentSelection];
-            const isCurrentlySelected = newSelection.includes(modelValue);
-
-            if (isCurrentlySelected) {
-                newSelection = newSelection.filter(item => item !== modelValue);
-            } else {
-                newSelection.push(modelValue);
-            }
-
-            currentSelection = newSelection;
-            selectionChanged(index, !isCurrentlySelected);
-            animationTimer.restart();
-        } else {
-            const oldIndex = currentIndex;
-            selectionChanged(index, true);
-            if (oldIndex !== index && oldIndex >= 0) {
-                selectionChanged(oldIndex, false);
-            }
-            animationTimer.restart();
-        }
-    }
-
-    Repeater {
-        id: repeater
-        model: ScriptModel {
-            values: root.model
-        }
-
-        delegate: Rectangle {
-            id: segment
-
-            property bool selected: multiSelect ? root.currentSelection.includes(modelData) : (index === root.currentIndex)
-            property bool hovered: mouseArea.containsMouse
-            property bool pressed: mouseArea.pressed
-            property bool isFirst: index === 0
-            property bool isLast: index === repeater.count - 1
-            property bool visualFirst: I18n.isRtl ? isLast : isFirst
-            property bool visualLast: I18n.isRtl ? isFirst : isLast
-            property bool prevSelected: index > 0 ? root.isSelected(index - 1) : false
-            property bool nextSelected: index < repeater.count - 1 ? root.isSelected(index + 1) : false
-
-            readonly property real contentNaturalWidth: (checkIcon.visible ? checkIcon.width + contentRow.spacing : 0) + buttonText.implicitWidth
-
-            width: {
-                const natural = Math.max(contentNaturalWidth + root.buttonPadding * 2, root.minButtonWidth);
-                const capped = root._segmentCap > 0 ? Math.min(natural, Math.max(root._segmentCap, root.minButtonWidth)) : natural;
-                return capped + (selected ? 4 : 0);
-            }
-            height: root.buttonHeight
-
-            color: selected ? Theme.buttonBg : (root.usePopupTransparency ? Theme.withAlpha(Theme.surfaceVariant, Theme.popupTransparency) : Theme.surfaceVariant)
-            border.color: "transparent"
-            border.width: 0
-
-            topLeftRadius: (visualFirst || selected) ? Theme.cornerRadius : Math.min(4, Theme.cornerRadius)
-            bottomLeftRadius: (visualFirst || selected) ? Theme.cornerRadius : Math.min(4, Theme.cornerRadius)
-            topRightRadius: (visualLast || selected) ? Theme.cornerRadius : Math.min(4, Theme.cornerRadius)
-            bottomRightRadius: (visualLast || selected) ? Theme.cornerRadius : Math.min(4, Theme.cornerRadius)
-
-            Behavior on width {
-                enabled: root.userInteracted
-                NumberAnimation {
-                    duration: Theme.shortDuration
-                    easing.type: Theme.standardEasing
-                }
-            }
-
-            Behavior on topLeftRadius {
-                enabled: root.userInteracted
-                NumberAnimation {
-                    duration: Theme.shortDuration
-                    easing.type: Theme.standardEasing
-                }
-            }
-
-            Behavior on topRightRadius {
-                enabled: root.userInteracted
-                NumberAnimation {
-                    duration: Theme.shortDuration
-                    easing.type: Theme.standardEasing
-                }
-            }
-
-            Behavior on bottomLeftRadius {
-                enabled: root.userInteracted
-                NumberAnimation {
-                    duration: Theme.shortDuration
-                    easing.type: Theme.standardEasing
-                }
-            }
-
-            Behavior on bottomRightRadius {
-                enabled: root.userInteracted
-                NumberAnimation {
-                    duration: Theme.shortDuration
-                    easing.type: Theme.standardEasing
-                }
-            }
-
-            Behavior on color {
-                enabled: root.userInteracted
-                ColorAnimation {
-                    duration: Theme.shortDuration
-                    easing.type: Theme.standardEasing
-                }
-            }
-
-            Rectangle {
-                id: stateLayer
-                anchors.fill: parent
-                topLeftRadius: parent.topLeftRadius
-                bottomLeftRadius: parent.bottomLeftRadius
-                topRightRadius: parent.topRightRadius
-                bottomRightRadius: parent.bottomRightRadius
-                color: {
-                    if (pressed)
-                        return selected ? Theme.buttonPressed : Theme.surfaceTextHover;
-                    if (hovered)
-                        return selected ? Theme.buttonHover : Theme.surfaceTextHover;
-                    return "transparent";
-                }
-
-                Behavior on color {
-                    ColorAnimation {
-                        duration: Theme.shorterDuration
-                        easing.type: Theme.standardEasing
-                    }
-                }
-            }
-
-            DankRipple {
-                id: segmentRipple
-                cornerRadius: Theme.cornerRadius
-                rippleColor: segment.selected ? Theme.buttonText : Theme.surfaceVariantText
-            }
-
-            Item {
-                id: contentItem
-                anchors.centerIn: parent
-                implicitWidth: contentRow.implicitWidth
-                implicitHeight: contentRow.implicitHeight
-
-                Row {
-                    id: contentRow
-                    spacing: Theme.spacingS
-
-                    DankIcon {
-                        id: checkIcon
-                        name: "check"
-                        size: root.checkIconSize
-                        color: segment.selected ? Theme.buttonText : Theme.surfaceVariantText
-                        visible: root.checkEnabled && segment.selected
-                        opacity: segment.selected ? 1 : 0
-                        scale: segment.selected ? 1 : 0.6
-                        anchors.verticalCenter: parent.verticalCenter
-
-                        Behavior on opacity {
-                            enabled: root.userInteracted
-                            NumberAnimation {
-                                duration: Theme.shortDuration
-                                easing.type: Theme.standardEasing
-                            }
-                        }
-
-                        Behavior on scale {
-                            enabled: root.userInteracted
-                            NumberAnimation {
-                                duration: Theme.shortDuration
-                                easing.type: Theme.emphasizedEasing
-                            }
-                        }
-                    }
-
-                    StyledText {
-                        id: buttonText
-
-                        readonly property real capAvailable: {
-                            if (root._segmentCap <= 0)
-                                return -1;
-                            const cap = Math.max(root._segmentCap, root.minButtonWidth);
-                            return Math.max(0, cap - root.buttonPadding * 2 - (checkIcon.visible ? checkIcon.width + contentRow.spacing : 0));
-                        }
-
-                        text: typeof modelData === "string" ? modelData : modelData.text || ""
-                        font.pixelSize: root.textSize
-                        font.weight: segment.selected ? Font.Medium : Font.Normal
-                        color: segment.selected ? Theme.buttonText : Theme.surfaceVariantText
-                        anchors.verticalCenter: parent.verticalCenter
-                        width: capAvailable < 0 ? implicitWidth : Math.min(implicitWidth, capAvailable)
-                        maximumLineCount: 1
-                    }
-                }
-            }
-
-            MouseArea {
-                id: mouseArea
-                anchors.fill: parent
-                hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor
-                onPressed: mouse => segmentRipple.trigger(mouse.x, mouse.y)
-                onClicked: root.selectItem(index)
-            }
-        }
-    }
-}
+DankCommon.DankButtonGroup {}

quickshell/Widgets/DankCircularImage.qml

@@ -1,131 +1,3 @@
-import QtQuick
-import QtQuick.Window
-import Quickshell.Widgets
-import qs.Common
-import qs.Widgets
+import qs.DankCommon.Widgets as DankCommon
 
-Rectangle {
-    id: root
-
-    property string imageSource: ""
-    property string fallbackIcon: "notifications"
-    property string fallbackText: ""
-    property bool cacheImages: true
-    property bool hasImage: imageSource !== ""
-    readonly property bool shouldProbe: imageSource !== "" && !imageSource.startsWith("image://")
-    readonly property bool isAnimated: shouldProbe && probe.status === Image.Ready && probe.frameCount > 1
-    readonly property bool probeSettled: probe.status === Image.Ready || probe.status === Image.Error
-    readonly property var activeImage: {
-        if (isAnimated)
-            return probe;
-        if (staticImage.status === Image.Ready)
-            return staticImage;
-        if (probe.status === Image.Ready && probe.source !== "")
-            return probe;
-        return staticImage;
-    }
-    property int imageStatus: activeImage.status
-
-    signal imageSaved(string filePath)
-
-    property string _pendingSavePath: ""
-    property var _attachedWindow: root.Window.window
-
-    on_AttachedWindowChanged: {
-        if (_attachedWindow && _pendingSavePath !== "") {
-            Qt.callLater(function () {
-                if (root._pendingSavePath !== "") {
-                    let path = root._pendingSavePath;
-                    root._pendingSavePath = "";
-                    root.saveImageToFile(path);
-                }
-            });
-        }
-    }
-
-    function saveImageToFile(filePath) {
-        if (activeImage.status !== Image.Ready)
-            return false;
-
-        if (!activeImage.Window.window) {
-            _pendingSavePath = filePath;
-            return true;
-        }
-
-        activeImage.grabToImage(function (result) {
-            if (result && result.saveToFile(filePath)) {
-                root.imageSaved(filePath);
-            }
-        });
-        return true;
-    }
-
-    radius: width / 2
-    color: Theme.primaryHover
-    border.color: "transparent"
-    border.width: 0
-
-    ClippingRectangle {
-        anchors.fill: parent
-        anchors.margins: 2
-        radius: Math.min(width, height) / 2
-        color: "transparent"
-
-        // Probes as AnimatedImage to read frameCount; retires once staticImage is ready.
-        AnimatedImage {
-            id: probe
-            anchors.fill: parent
-            asynchronous: true
-            fillMode: Image.PreserveAspectCrop
-            smooth: true
-            mipmap: true
-            cache: root.cacheImages
-            visible: root.activeImage === probe && probe.status === Image.Ready && root.imageSource !== ""
-            source: root.shouldProbe && (root.isAnimated || staticImage.status !== Image.Ready) ? root.imageSource : ""
-        }
-
-        // Takes over once the probe settles on a non-animated image, then latches.
-        Image {
-            id: staticImage
-            anchors.fill: parent
-            asynchronous: true
-            fillMode: Image.PreserveAspectCrop
-            smooth: true
-            mipmap: true
-            cache: root.cacheImages
-            visible: root.activeImage === staticImage && staticImage.status === Image.Ready && root.imageSource !== ""
-            sourceSize.width: Math.max(width * 2, 128)
-            sourceSize.height: Math.max(height * 2, 128)
-            source: {
-                if (!root.shouldProbe)
-                    return root.imageSource;
-                if ((root.probeSettled && !root.isAnimated) || staticImage.status !== Image.Null)
-                    return root.imageSource;
-                return "";
-            }
-        }
-    }
-
-    AppIconRenderer {
-        anchors.centerIn: parent
-        width: Math.round(parent.width * 0.75)
-        height: width
-        visible: (root.activeImage.status !== Image.Ready || root.imageSource === "") && root.fallbackIcon !== ""
-        iconValue: root.fallbackIcon
-        iconSize: width
-        iconColor: Theme.surfaceVariantText
-        materialIconSizeAdjustment: 0
-        fallbackText: root.fallbackText
-        fallbackBackgroundColor: "transparent"
-        fallbackTextColor: Theme.surfaceVariantText
-    }
-
-    StyledText {
-        anchors.centerIn: parent
-        visible: root.imageSource === "" && root.fallbackIcon === "" && root.fallbackText !== ""
-        text: root.fallbackText
-        font.pixelSize: Math.max(12, parent.width * 0.5)
-        font.weight: Font.Bold
-        color: Theme.surfaceVariantText
-    }
-}
+DankCommon.DankCircularImage {}

quickshell/Widgets/DankCollapsibleSection.qml

@@ -1,133 +1,3 @@
-import QtQuick
-import QtQuick.Layouts
-import qs.Common
-import qs.Widgets
+import qs.DankCommon.Widgets as DankCommon
 
-ColumnLayout {
-    id: root
-
-    required property string title
-    property string description: ""
-    property bool expanded: false
-    property bool showBackground: false
-    property alias headerColor: headerRect.color
-
-    signal toggleRequested
-
-    spacing: Theme.spacingS
-    Layout.fillWidth: true
-
-    Rectangle {
-        id: headerRect
-        Layout.fillWidth: true
-        Layout.preferredHeight: Math.max(titleRow.implicitHeight + Theme.paddingM * 2, 48)
-        radius: Theme.cornerRadius
-        color: "transparent"
-
-        RowLayout {
-            id: titleRow
-            anchors.fill: parent
-            anchors.leftMargin: Theme.paddingM
-            anchors.rightMargin: Theme.paddingM
-            spacing: Theme.spacingM
-
-            StyledText {
-                text: root.title
-                font.pixelSize: Theme.fontSizeLarge
-                font.weight: Font.Medium
-                Layout.fillWidth: true
-            }
-
-            DankIcon {
-                name: "expand_more"
-                size: Theme.iconSizeSmall
-                rotation: root.expanded ? 180 : 0
-
-                Behavior on rotation {
-                    enabled: Theme.currentAnimationSpeed !== SettingsData.AnimationSpeed.None
-                    NumberAnimation {
-                        easing.type: Easing.BezierSpline
-                        duration: Theme.shortDuration
-                        easing.bezierCurve: Theme.expressiveCurves.standard
-                    }
-                }
-            }
-        }
-
-        StateLayer {
-            anchors.fill: parent
-            onClicked: {
-                root.toggleRequested();
-                root.expanded = !root.expanded;
-            }
-        }
-    }
-
-    default property alias content: contentColumn.data
-
-    Item {
-        id: contentWrapper
-        Layout.fillWidth: true
-        Layout.preferredHeight: root.expanded ? (contentColumn.implicitHeight + Theme.spacingS * 2) : 0
-        clip: true
-
-        Behavior on Layout.preferredHeight {
-            enabled: Theme.currentAnimationSpeed !== SettingsData.AnimationSpeed.None
-            DankAnim {
-                duration: Theme.expressiveDurations.expressiveDefaultSpatial
-                easing.bezierCurve: Theme.expressiveCurves.standard
-            }
-        }
-
-        Rectangle {
-            id: backgroundRect
-            anchors.fill: parent
-            radius: Theme.cornerRadius
-            color: Theme.surfaceContainer
-            opacity: root.showBackground && root.expanded ? 1.0 : 0.0
-            visible: root.showBackground
-
-            Behavior on opacity {
-                enabled: Theme.currentAnimationSpeed !== SettingsData.AnimationSpeed.None
-                NumberAnimation {
-                    easing.type: Easing.BezierSpline
-                    duration: Theme.shortDuration
-                    easing.bezierCurve: Theme.expressiveCurves.standard
-                }
-            }
-        }
-
-        ColumnLayout {
-            id: contentColumn
-            anchors.left: parent.left
-            anchors.right: parent.right
-            y: Theme.spacingS
-            anchors.leftMargin: Theme.paddingM
-            anchors.rightMargin: Theme.paddingM
-            anchors.bottomMargin: Theme.spacingS
-            spacing: Theme.spacingS
-            opacity: root.expanded ? 1.0 : 0.0
-
-            Behavior on opacity {
-                enabled: Theme.currentAnimationSpeed !== SettingsData.AnimationSpeed.None
-                NumberAnimation {
-                    easing.type: Easing.BezierSpline
-                    duration: Theme.shortDuration
-                    easing.bezierCurve: Theme.expressiveCurves.standard
-                }
-            }
-
-            StyledText {
-                id: descriptionText
-                Layout.fillWidth: true
-                Layout.topMargin: root.description !== "" ? Theme.spacingXS : 0
-                Layout.bottomMargin: root.description !== "" ? Theme.spacingS : 0
-                visible: root.description !== ""
-                text: root.description
-                color: Theme.surfaceTextSecondary
-                font.pixelSize: Theme.fontSizeSmall
-                wrapMode: Text.Wrap
-            }
-        }
-    }
-}
+DankCommon.DankCollapsibleSection {}

quickshell/Widgets/DankColorAnimation.qml

@@ -1,62 +1,3 @@
-import QtQuick
-import qs.Common
+import qs.DankCommon.Widgets as DankCommon
 
-// Premultiplied-alpha color tween: bind `to`, read `value`. Plain
-// ColorAnimation lerps raw RGBA and flashes when the endpoints differ
-// in both color and alpha (translucent <-> opaque).
-QtObject {
-    id: root
-
-    property color to
-    property bool animated: true
-    property int duration: Theme.mediumDuration
-    property int easingType: Theme.emphasizedEasing
-
-    property color _from: to
-    property color _target: to
-    property real _mix: 1
-    property bool _ready: false
-
-    readonly property color value: {
-        const from = _from;
-        const target = _target;
-        const alpha = from.a + (target.a - from.a) * _mix;
-        if (alpha <= 0)
-            return Qt.rgba(target.r, target.g, target.b, 0);
-        const mix = (a, b) => (a * from.a + (b * target.a - a * from.a) * _mix) / alpha;
-        return Qt.rgba(mix(from.r, target.r), mix(from.g, target.g), mix(from.b, target.b), alpha);
-    }
-
-    readonly property NumberAnimation _anim: NumberAnimation {
-        target: root
-        property: "_mix"
-        from: 0
-        to: 1
-        duration: root.duration
-        easing.type: root.easingType
-    }
-
-    onToChanged: {
-        if (!_ready || !animated) {
-            _anim.stop();
-            _from = to;
-            _target = to;
-            _mix = 1;
-            return;
-        }
-        if (Qt.colorEqual(to, _target))
-            return;
-        const current = value;
-        _anim.stop();
-        _from = current;
-        _target = to;
-        _mix = 0;
-        _anim.restart();
-    }
-
-    Component.onCompleted: {
-        _from = to;
-        _target = to;
-        _ready = true;
-    }
-}
+DankCommon.DankColorAnimation {}

quickshell/Widgets/DankColorSwatch.qml

@@ -1,45 +1,3 @@
-import QtQuick
-import qs.Common
+import qs.DankCommon.Widgets as DankCommon
 
-Item {
-    id: root
-
-    property color swatchColor: "transparent"
-    property color ringColor: Theme.outline
-    property real minPreviewAlpha: 0.4
-    readonly property bool translucent: swatchColor.a > 0 && swatchColor.a < 1
-    readonly property color displayColor: translucent ? Theme.withAlpha(swatchColor, Math.max(swatchColor.a, minPreviewAlpha)) : swatchColor
-
-    Loader {
-        anchors.fill: parent
-        active: root.translucent
-        sourceComponent: Component {
-            Canvas {
-                onPaint: {
-                    const ctx = getContext("2d");
-                    ctx.reset();
-                    ctx.beginPath();
-                    ctx.arc(width / 2, height / 2, width / 2, 0, 2 * Math.PI);
-                    ctx.clip();
-                    const s = Math.max(2, Math.round(width / 4));
-                    for (let y = 0; y < height; y += s) {
-                        for (let x = 0; x < width; x += s) {
-                            ctx.fillStyle = (((x / s) + (y / s)) % 2 === 0) ? "#ffffff" : "#bdbdbd";
-                            ctx.fillRect(x, y, s, s);
-                        }
-                    }
-                }
-                onVisibleChanged: if (visible)
-                    requestPaint()
-            }
-        }
-    }
-
-    Rectangle {
-        anchors.fill: parent
-        radius: width / 2
-        color: root.displayColor
-        border.color: root.ringColor
-        border.width: 1
-    }
-}
+DankCommon.DankColorSwatch {}

quickshell/Widgets/DankDropdown.qml

@@ -1,555 +1,3 @@
-import "../Common/fzf.js" as Fzf
-import QtQuick
-import QtQuick.Controls
-import Quickshell
-import qs.Common
-import qs.Widgets
+import qs.DankCommon.Widgets as DankCommon
 
-Item {
-    id: root
-
-    LayoutMirroring.enabled: I18n.isRtl
-    LayoutMirroring.childrenInherit: true
-
-    function checkParentDisablesTransparency() {
-        let p = parent;
-        while (p) {
-            if (p.disablePopupTransparency === true)
-                return true;
-            p = p.parent;
-        }
-        return false;
-    }
-
-    property string text: ""
-    property string description: ""
-    property string currentValue: ""
-    property var options: []
-    property var optionIcons: []
-    property bool enableFuzzySearch: false
-    property var optionIconMap: ({})
-    property var optionColorMap: ({})
-
-    function rebuildIconMap() {
-        const map = {};
-        for (let i = 0; i < options.length; i++) {
-            if (optionIcons.length > i)
-                map[options[i]] = optionIcons[i];
-        }
-        optionIconMap = map;
-    }
-
-    onOptionsChanged: rebuildIconMap()
-    onOptionIconsChanged: rebuildIconMap()
-
-    property int popupWidthOffset: 0
-    property int maxPopupHeight: 400
-    property bool openUpwards: false
-    property int popupWidth: 0
-    property bool alignPopupRight: false
-    property int dropdownWidth: 200
-    property bool compactMode: text === "" && description === ""
-    property bool showTrigger: true
-    property Item popupAnchorItem: null
-    property bool addHorizontalPadding: false
-    property string emptyText: ""
-    property bool usePopupTransparency: !checkParentDisablesTransparency()
-    property var transientSurfaceTracker: null
-
-    signal valueChanged(string value)
-
-    property bool menuOpen: false
-
-    onMenuOpenChanged: transientSurfaceTracker?.setActive(root, menuOpen, null)
-
-    function closeDropdownMenu() {
-        if (!root.menuOpen && !dropdownMenu.opened && !dropdownMenu.visible)
-            return;
-        root.menuOpen = false;
-        dropdownMenu.close();
-    }
-
-    function positionDropdownMenu() {
-        let currentIndex = root.options.indexOf(root.currentValue);
-        listView.positionViewAtIndex(currentIndex >= 0 ? currentIndex : 0, ListView.Beginning);
-
-        const anchorItem = root.popupAnchorItem || dropdown;
-        const pos = anchorItem.mapToItem(Overlay.overlay, 0, 0);
-        const popupW = dropdownMenu.width;
-        const popupH = dropdownMenu.height;
-        const overlayH = Overlay.overlay.height;
-        const goUp = root.openUpwards || pos.y + anchorItem.height + popupH + 4 > overlayH;
-        dropdownMenu.x = root.alignPopupRight ? pos.x + anchorItem.width - popupW : pos.x - (root.popupWidthOffset / 2);
-        dropdownMenu.y = goUp ? pos.y - popupH - 4 : pos.y + anchorItem.height + 4;
-    }
-
-    function showDropdownMenu() {
-        if (root.options.length === 0)
-            return;
-        if (root.menuOpen)
-            return;
-
-        root.menuOpen = true;
-        dropdownMenu.open();
-        positionDropdownMenu();
-
-        if (root.enableFuzzySearch)
-            searchField.forceActiveFocus();
-    }
-
-    function openDropdownMenu() {
-        if (root.menuOpen) {
-            closeDropdownMenu();
-            return;
-        }
-        showDropdownMenu();
-    }
-
-    function resetSearch() {
-        searchField.text = "";
-        dropdownMenu.fzfFinder = null;
-        dropdownMenu.searchQuery = "";
-        dropdownMenu.selectedIndex = -1;
-    }
-
-    width: !showTrigger ? 0 : (compactMode ? dropdownWidth : parent.width)
-    implicitHeight: !showTrigger ? 0 : (compactMode ? 40 : Math.max(60, labelColumn.implicitHeight + Theme.spacingM))
-
-    Component.onDestruction: {
-        transientSurfaceTracker?.unregister(root);
-        if (root.menuOpen || dropdownMenu.opened || dropdownMenu.visible)
-            dropdownMenu.close();
-    }
-
-    Connections {
-        target: root.transientSurfaceTracker
-        ignoreUnknownSignals: true
-
-        function onCloseRequested() {
-            root.closeDropdownMenu();
-        }
-    }
-
-    Column {
-        id: labelColumn
-
-        anchors.left: parent.left
-        anchors.right: dropdown.left
-        anchors.verticalCenter: parent.verticalCenter
-        anchors.leftMargin: root.addHorizontalPadding ? Theme.spacingM : 0
-        anchors.rightMargin: Theme.spacingL
-        spacing: Theme.spacingXS
-        visible: !root.compactMode && root.showTrigger
-
-        StyledText {
-            text: root.text
-            font.pixelSize: Theme.fontSizeMedium
-            color: Theme.surfaceText
-            font.weight: Font.Medium
-            width: parent.width
-            horizontalAlignment: Text.AlignLeft
-        }
-
-        StyledText {
-            text: root.description
-            font.pixelSize: Theme.fontSizeSmall
-            color: Theme.surfaceVariantText
-            visible: description.length > 0
-            wrapMode: Text.WordWrap
-            width: parent.width
-            horizontalAlignment: Text.AlignLeft
-        }
-    }
-
-    Rectangle {
-        id: dropdown
-
-        visible: root.showTrigger
-        width: root.compactMode ? parent.width : (root.popupWidth === -1 ? undefined : (root.popupWidth > 0 ? root.popupWidth : root.dropdownWidth))
-        height: 40
-        anchors.right: parent.right
-        anchors.rightMargin: root.addHorizontalPadding && !root.compactMode ? Theme.spacingM : 0
-        anchors.verticalCenter: parent.verticalCenter
-        radius: Theme.cornerRadius
-        color: dropdownArea.containsMouse || dropdownMenu.visible ? Theme.surfaceContainerHigh : (root.usePopupTransparency ? Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency) : Theme.surfaceContainer)
-        border.color: dropdownMenu.visible ? Theme.primary : Theme.outlineHeavy
-        border.width: dropdownMenu.visible ? 2 : 1
-
-        MouseArea {
-            id: dropdownArea
-
-            anchors.fill: parent
-            hoverEnabled: true
-            cursorShape: Qt.PointingHandCursor
-            onClicked: root.openDropdownMenu()
-        }
-
-        Row {
-            id: contentRow
-
-            anchors.left: parent.left
-            anchors.right: expandIcon.left
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.leftMargin: Theme.spacingM
-            anchors.rightMargin: Theme.spacingS
-            spacing: Theme.spacingS
-
-            DankColorSwatch {
-                id: triggerSwatch
-
-                width: 16
-                height: 16
-                anchors.verticalCenter: parent.verticalCenter
-                visible: root.optionColorMap[root.currentValue] !== undefined
-                swatchColor: visible ? root.optionColorMap[root.currentValue] : "transparent"
-            }
-
-            DankIcon {
-                id: triggerIcon
-
-                name: root.optionIconMap[root.currentValue] ?? ""
-                size: 18
-                color: Theme.surfaceText
-                anchors.verticalCenter: parent.verticalCenter
-                visible: name !== ""
-            }
-
-            StyledText {
-                anchors.verticalCenter: parent.verticalCenter
-                text: root.currentValue !== "" ? root.currentValue : root.emptyText
-                font.pixelSize: Theme.fontSizeMedium
-                color: root.currentValue !== "" ? Theme.surfaceText : Theme.outline
-                width: contentRow.width - (triggerSwatch.visible ? triggerSwatch.width + contentRow.spacing : 0) - (triggerIcon.visible ? triggerIcon.width + contentRow.spacing : 0)
-                elide: Text.ElideRight
-                wrapMode: Text.NoWrap
-                horizontalAlignment: Text.AlignLeft
-            }
-        }
-
-        DankIcon {
-            id: expandIcon
-
-            name: dropdownMenu.visible ? "expand_less" : "expand_more"
-            size: 20
-            color: Theme.surfaceText
-            anchors.right: parent.right
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.rightMargin: Theme.spacingS
-
-            Behavior on rotation {
-                NumberAnimation {
-                    duration: Theme.shortDuration
-                    easing.type: Theme.standardEasing
-                }
-            }
-        }
-    }
-
-    Popup {
-        id: dropdownMenu
-
-        property string searchQuery: ""
-        property var filteredOptions: {
-            if (!root.enableFuzzySearch || searchQuery.length === 0)
-                return root.options;
-            if (!fzfFinder)
-                return root.options;
-            return fzfFinder.find(searchQuery).map(r => r.item);
-        }
-        property int selectedIndex: -1
-        property var fzfFinder: null
-
-        function initFinder() {
-            fzfFinder = new Fzf.Finder(root.options, {
-                "selector": option => option,
-                "limit": 50,
-                "casing": "case-insensitive",
-                "sort": true,
-                "tiebreakers": [(a, b, selector) => selector(a.item).length - selector(b.item).length]
-            });
-        }
-
-        function selectNext() {
-            if (filteredOptions.length === 0)
-                return;
-            selectedIndex = (selectedIndex + 1) % filteredOptions.length;
-            listView.positionViewAtIndex(selectedIndex, ListView.Contain);
-        }
-
-        function selectPrevious() {
-            if (filteredOptions.length === 0)
-                return;
-            selectedIndex = selectedIndex <= 0 ? filteredOptions.length - 1 : selectedIndex - 1;
-            listView.positionViewAtIndex(selectedIndex, ListView.Contain);
-        }
-
-        function selectCurrent() {
-            if (selectedIndex < 0 || selectedIndex >= filteredOptions.length)
-                return;
-            root.currentValue = filteredOptions[selectedIndex];
-            root.valueChanged(filteredOptions[selectedIndex]);
-            close();
-        }
-
-        onOpened: {
-            root.menuOpen = true;
-            selectedIndex = -1;
-            if (searchField.text.length > 0) {
-                initFinder();
-                searchQuery = searchField.text;
-            } else {
-                fzfFinder = null;
-                searchQuery = "";
-            }
-        }
-
-        onClosed: root.menuOpen = false
-
-        parent: root.Overlay.overlay
-        width: root.popupWidth === -1 ? undefined : (root.popupWidth > 0 ? root.popupWidth : (dropdown.width + root.popupWidthOffset))
-        height: {
-            let h = root.enableFuzzySearch ? 54 : 0;
-            if (root.options.length === 0 && root.emptyText !== "")
-                h += 32;
-            else
-                h += Math.min(filteredOptions.length, 10) * 36;
-            return Math.min(root.maxPopupHeight, h + 16);
-        }
-        padding: 0
-        modal: true
-        dim: false
-        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
-
-        enter: Transition {
-            NumberAnimation {
-                property: "scale"
-                from: 0.9
-                to: 1
-                duration: Theme.shortDuration
-                easing.type: Theme.emphasizedEasing
-            }
-            NumberAnimation {
-                property: "opacity"
-                from: 0
-                to: 1
-                duration: Theme.shortDuration
-                easing.type: Theme.standardEasing
-            }
-        }
-
-        exit: Transition {
-            NumberAnimation {
-                property: "scale"
-                from: 1
-                to: 0.9
-                duration: Theme.shortDuration
-                easing.type: Theme.emphasizedEasing
-            }
-            NumberAnimation {
-                property: "opacity"
-                from: 1
-                to: 0
-                duration: Theme.shortDuration
-                easing.type: Theme.standardEasing
-            }
-        }
-
-        background: Rectangle {
-            color: "transparent"
-        }
-
-        contentItem: Rectangle {
-            id: contentSurface
-
-            LayoutMirroring.enabled: I18n.isRtl
-            LayoutMirroring.childrenInherit: true
-            color: Theme.withAlpha(Theme.surfaceContainer, 1)
-            border.color: Theme.primary
-            border.width: 2
-            radius: Theme.cornerRadius
-
-            ElevationShadow {
-                id: shadowLayer
-                anchors.fill: parent
-                z: -1
-                level: Theme.elevationLevel2
-                fallbackOffset: 4
-                targetRadius: contentSurface.radius
-                targetColor: contentSurface.color
-                borderColor: contentSurface.border.color
-                borderWidth: contentSurface.border.width
-                shadowEnabled: Theme.elevationEnabled && SettingsData.popoutElevationEnabled
-            }
-
-            Column {
-                anchors.fill: parent
-                anchors.margins: Theme.spacingS
-
-                Rectangle {
-                    id: searchContainer
-
-                    width: parent.width
-                    height: 42
-                    visible: root.enableFuzzySearch
-                    radius: Theme.cornerRadius
-                    color: root.usePopupTransparency ? Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency) : Theme.surfaceContainerHigh
-
-                    DankTextField {
-                        id: searchField
-
-                        anchors.fill: parent
-                        anchors.margins: 1
-                        placeholderText: I18n.tr("Search...")
-                        topPadding: Theme.spacingS
-                        bottomPadding: Theme.spacingS
-                        onTextChanged: searchDebounce.restart()
-                        Keys.onDownPressed: dropdownMenu.selectNext()
-                        Keys.onUpPressed: dropdownMenu.selectPrevious()
-                        Keys.onReturnPressed: dropdownMenu.selectCurrent()
-                        Keys.onEnterPressed: dropdownMenu.selectCurrent()
-                        Keys.onPressed: event => {
-                            if (!(event.modifiers & Qt.ControlModifier))
-                                return;
-                            switch (event.key) {
-                            case Qt.Key_N:
-                            case Qt.Key_J:
-                                dropdownMenu.selectNext();
-                                event.accepted = true;
-                                break;
-                            case Qt.Key_P:
-                            case Qt.Key_K:
-                                dropdownMenu.selectPrevious();
-                                event.accepted = true;
-                                break;
-                            }
-                        }
-
-                        Timer {
-                            id: searchDebounce
-                            interval: 50
-                            onTriggered: {
-                                if (!dropdownMenu.fzfFinder)
-                                    dropdownMenu.initFinder();
-                                dropdownMenu.searchQuery = searchField.text;
-                                dropdownMenu.selectedIndex = -1;
-                            }
-                        }
-                    }
-                }
-
-                Item {
-                    width: 1
-                    height: Theme.spacingXS
-                    visible: root.enableFuzzySearch
-                }
-
-                Item {
-                    width: parent.width
-                    height: 32
-                    visible: root.options.length === 0 && root.emptyText !== ""
-
-                    StyledText {
-                        anchors.left: parent.left
-                        anchors.right: parent.right
-                        anchors.leftMargin: Theme.spacingS
-                        anchors.rightMargin: Theme.spacingS
-                        anchors.verticalCenter: parent.verticalCenter
-                        text: root.emptyText
-                        font.pixelSize: Theme.fontSizeMedium
-                        color: Theme.surfaceVariantText
-                        horizontalAlignment: Text.AlignLeft
-                    }
-                }
-
-                DankListView {
-                    id: listView
-
-                    width: parent.width
-                    height: parent.height - (root.enableFuzzySearch ? searchContainer.height + Theme.spacingXS : 0) - (root.options.length === 0 && root.emptyText !== "" ? 32 : 0)
-                    clip: true
-                    visible: root.options.length > 0
-                    model: ScriptModel {
-                        values: dropdownMenu.filteredOptions
-                    }
-                    spacing: Theme.spacingXXS
-
-                    interactive: true
-                    flickDeceleration: 1500
-                    maximumFlickVelocity: 2000
-                    boundsBehavior: Flickable.DragAndOvershootBounds
-                    boundsMovement: Flickable.FollowBoundsBehavior
-                    pressDelay: 0
-                    flickableDirection: Flickable.VerticalFlick
-
-                    delegate: Rectangle {
-                        id: delegateRoot
-
-                        required property var modelData
-                        required property int index
-                        property bool isSelected: dropdownMenu.selectedIndex === index
-                        property bool isCurrentValue: root.currentValue === modelData
-                        property string iconName: root.optionIconMap[modelData] ?? ""
-                        property var swatchColor: root.optionColorMap[modelData]
-
-                        width: ListView.view.width
-                        height: 32
-                        radius: Theme.cornerRadius
-                        color: isSelected ? Theme.primaryHover : optionArea.containsMouse ? Theme.primaryHoverLight : Theme.withAlpha(Theme.primaryHoverLight, 0)
-
-                        Row {
-                            anchors.left: parent.left
-                            anchors.right: parent.right
-                            anchors.leftMargin: Theme.spacingS
-                            anchors.rightMargin: Theme.spacingS
-                            anchors.verticalCenter: parent.verticalCenter
-                            spacing: Theme.spacingS
-
-                            DankColorSwatch {
-                                id: optionSwatch
-
-                                width: 16
-                                height: 16
-                                anchors.verticalCenter: parent.verticalCenter
-                                visible: delegateRoot.swatchColor !== undefined
-                                swatchColor: visible ? delegateRoot.swatchColor : Theme.withAlpha(delegateRoot.swatchColor, 0)
-                                ringColor: delegateRoot.isCurrentValue ? Theme.primary : Theme.outline
-                            }
-
-                            DankIcon {
-                                name: delegateRoot.iconName
-                                size: 18
-                                color: delegateRoot.isCurrentValue ? Theme.primary : Theme.surfaceText
-                                visible: name !== ""
-                            }
-
-                            StyledText {
-                                anchors.verticalCenter: parent.verticalCenter
-                                text: delegateRoot.modelData
-                                font.pixelSize: Theme.fontSizeMedium
-                                color: delegateRoot.isCurrentValue ? Theme.primary : Theme.surfaceText
-                                font.weight: delegateRoot.isCurrentValue ? Font.Medium : Font.Normal
-                                width: root.popupWidth > 0 ? undefined : (delegateRoot.width - parent.x - Theme.spacingS * 2 - (optionSwatch.visible ? optionSwatch.width + parent.spacing : 0))
-                                elide: root.popupWidth > 0 ? Text.ElideNone : Text.ElideRight
-                                wrapMode: Text.NoWrap
-                                horizontalAlignment: Text.AlignLeft
-                            }
-                        }
-
-                        MouseArea {
-                            id: optionArea
-
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            cursorShape: Qt.PointingHandCursor
-                            onClicked: {
-                                root.currentValue = delegateRoot.modelData;
-                                root.valueChanged(delegateRoot.modelData);
-                                root.closeDropdownMenu();
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
+DankCommon.DankDropdown {}

quickshell/Widgets/DankFilterChips.qml

@@ -1,108 +1,3 @@
-import QtQuick
-import qs.Common
-import qs.Widgets
+import qs.DankCommon.Widgets as DankCommon
 
-Flow {
-    id: root
-
-    property var model: []
-    property int currentIndex: 0
-    property int chipHeight: 32
-    property int chipPadding: Theme.spacingM
-    property bool showCheck: true
-    property bool showCounts: true
-
-    signal selectionChanged(int index)
-
-    spacing: Theme.spacingS
-    width: parent ? parent.width : 400
-
-    Repeater {
-        model: root.model
-
-        Rectangle {
-            id: chip
-            required property var modelData
-            required property int index
-
-            property bool selected: index === root.currentIndex
-            property bool hovered: mouseArea.containsMouse
-            property bool pressed: mouseArea.pressed
-            property string label: typeof modelData === "string" ? modelData : (modelData.label || "")
-            property int count: typeof modelData === "object" ? (modelData.count || 0) : 0
-            property bool showCount: root.showCounts && count > 0
-
-            width: contentRow.implicitWidth + root.chipPadding * 2
-            height: root.chipHeight
-            radius: height / 2
-
-            color: selected ? Theme.primary : Theme.surfaceVariant
-
-            Behavior on color {
-                ColorAnimation {
-                    duration: Theme.shortDuration
-                    easing.type: Theme.standardEasing
-                }
-            }
-
-            Rectangle {
-                anchors.fill: parent
-                radius: parent.radius
-                color: {
-                    if (pressed)
-                        return chip.selected ? Theme.primaryPressed : Theme.surfaceTextHover;
-                    if (hovered)
-                        return chip.selected ? Theme.primaryHover : Theme.surfaceTextHover;
-                    return "transparent";
-                }
-
-                Behavior on color {
-                    ColorAnimation {
-                        duration: Theme.shorterDuration
-                        easing.type: Theme.standardEasing
-                    }
-                }
-            }
-
-            DankRipple {
-                id: chipRipple
-                cornerRadius: chip.radius
-                rippleColor: chip.selected ? Theme.primaryText : Theme.surfaceVariantText
-            }
-
-            Row {
-                id: contentRow
-                anchors.centerIn: parent
-                spacing: Theme.spacingXS
-
-                DankIcon {
-                    name: "check"
-                    size: 16
-                    anchors.verticalCenter: parent.verticalCenter
-                    color: Theme.primaryText
-                    visible: root.showCheck && chip.selected
-                }
-
-                StyledText {
-                    text: chip.label + (chip.showCount ? " (" + chip.count + ")" : "")
-                    font.pixelSize: Theme.fontSizeSmall
-                    font.weight: chip.selected ? Font.Medium : Font.Normal
-                    color: chip.selected ? Theme.primaryText : Theme.surfaceVariantText
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-            }
-
-            MouseArea {
-                id: mouseArea
-                anchors.fill: parent
-                hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor
-                onPressed: mouse => chipRipple.trigger(mouse.x, mouse.y)
-                onClicked: {
-                    root.currentIndex = chip.index;
-                    root.selectionChanged(chip.index);
-                }
-            }
-        }
-    }
-}
+DankCommon.DankFilterChips {}

quickshell/Widgets/DankFlickable.qml

@@ -1,179 +1,3 @@
-import QtQuick
-import QtQuick.Controls
-import qs.Widgets
-import "ScrollConstants.js" as Scroll
+import qs.DankCommon.Widgets as DankCommon
 
-Flickable {
-    id: flickable
-
-    property alias verticalScrollBar: vbar
-    property real mouseWheelSpeed: Scroll.mouseWheelSpeed
-    property real momentumVelocity: 0
-    property bool isMomentumActive: false
-    property real friction: Scroll.friction
-    property bool _scrollBarActive: false
-
-    flickDeceleration: Scroll.flickDeceleration
-    maximumFlickVelocity: Scroll.maximumFlickVelocity
-    boundsBehavior: Flickable.StopAtBounds
-    boundsMovement: Flickable.FollowBoundsBehavior
-    pressDelay: 0
-    flickableDirection: Flickable.VerticalFlick
-
-    WheelHandler {
-        id: wheelHandler
-
-        property real touchpadSpeed: Scroll.touchpadSpeed
-        property real momentumRetention: Scroll.momentumRetention
-        property real lastWheelTime: 0
-        property real momentum: 0
-        property var velocitySamples: []
-        property bool sessionUsedMouseWheel: false
-
-        function startMomentum() {
-            flickable.isMomentumActive = true;
-            momentumAnim.running = true;
-        }
-
-        acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
-
-        onWheel: event => {
-            vbar._scrollBarActive = true;
-            vbar.hideTimer.restart();
-
-            const currentTime = Date.now();
-            const timeDelta = currentTime - lastWheelTime;
-            lastWheelTime = currentTime;
-
-            const hasPixel = event.pixelDelta && event.pixelDelta.y !== 0;
-            const deltaY = event.angleDelta.y;
-            const isTraditionalMouse = !hasPixel && Math.abs(deltaY) >= 120 && (Math.abs(deltaY) % 120) === 0;
-            const isHighDpiMouse = !hasPixel && !isTraditionalMouse && deltaY !== 0;
-            const isTouchpad = hasPixel;
-
-            if (isTraditionalMouse) {
-                sessionUsedMouseWheel = true;
-                momentumAnim.running = false;
-                flickable.isMomentumActive = false;
-                velocitySamples = [];
-                momentum = 0;
-                flickable.momentumVelocity = 0;
-
-                const lines = Math.round(Math.abs(deltaY) / 120);
-                const scrollAmount = (deltaY > 0 ? -lines : lines) * flickable.mouseWheelSpeed;
-                let newY = flickable.contentY + scrollAmount;
-                newY = Math.max(0, Math.min(flickable.contentHeight - flickable.height, newY));
-
-                if (flickable.flicking) {
-                    flickable.cancelFlick();
-                }
-
-                flickable.contentY = newY;
-            } else if (isHighDpiMouse) {
-                sessionUsedMouseWheel = true;
-                momentumAnim.running = false;
-                flickable.isMomentumActive = false;
-                velocitySamples = [];
-                momentum = 0;
-                flickable.momentumVelocity = 0;
-
-                let delta = deltaY / 8 * touchpadSpeed;
-                let newY = flickable.contentY - delta;
-                newY = Math.max(0, Math.min(flickable.contentHeight - flickable.height, newY));
-
-                if (flickable.flicking) {
-                    flickable.cancelFlick();
-                }
-
-                flickable.contentY = newY;
-            } else if (isTouchpad) {
-                sessionUsedMouseWheel = false;
-                momentumAnim.running = false;
-                flickable.isMomentumActive = false;
-
-                let delta = event.pixelDelta.y * touchpadSpeed;
-
-                velocitySamples.push({
-                    "delta": delta,
-                    "time": currentTime
-                });
-                velocitySamples = velocitySamples.filter(s => currentTime - s.time < Scroll.velocitySampleWindowMs);
-
-                if (velocitySamples.length > 1) {
-                    const totalDelta = velocitySamples.reduce((sum, s) => sum + s.delta, 0);
-                    const timeSpan = currentTime - velocitySamples[0].time;
-                    if (timeSpan > 0) {
-                        flickable.momentumVelocity = Math.max(-Scroll.maxMomentumVelocity, Math.min(Scroll.maxMomentumVelocity, totalDelta / timeSpan * 1000));
-                    }
-                }
-
-                if (timeDelta < Scroll.momentumTimeThreshold) {
-                    momentum = momentum * momentumRetention + delta * Scroll.momentumDeltaFactor;
-                    delta += momentum;
-                } else {
-                    momentum = 0;
-                }
-
-                let newY = flickable.contentY - delta;
-                newY = Math.max(0, Math.min(flickable.contentHeight - flickable.height, newY));
-
-                if (flickable.flicking) {
-                    flickable.cancelFlick();
-                }
-
-                flickable.contentY = newY;
-            }
-
-            event.accepted = true;
-        }
-
-        onActiveChanged: {
-            if (!active) {
-                if (!sessionUsedMouseWheel && Math.abs(flickable.momentumVelocity) >= Scroll.minMomentumVelocity) {
-                    startMomentum();
-                } else {
-                    velocitySamples = [];
-                    flickable.momentumVelocity = 0;
-                }
-            }
-        }
-    }
-
-    onMovementStarted: {
-        vbar._scrollBarActive = true;
-        vbar.hideTimer.stop();
-    }
-    onMovementEnded: vbar.hideTimer.restart()
-
-    FrameAnimation {
-        id: momentumAnim
-        running: false
-
-        onTriggered: {
-            const dt = frameTime;
-            const newY = flickable.contentY - flickable.momentumVelocity * dt;
-            const maxY = Math.max(0, flickable.contentHeight - flickable.height);
-
-            if (newY < 0 || newY > maxY) {
-                flickable.contentY = newY < 0 ? 0 : maxY;
-                running = false;
-                flickable.isMomentumActive = false;
-                flickable.momentumVelocity = 0;
-                return;
-            }
-
-            flickable.contentY = newY;
-            flickable.momentumVelocity *= Math.pow(flickable.friction, dt / 0.016);
-
-            if (Math.abs(flickable.momentumVelocity) < Scroll.momentumStopThreshold) {
-                running = false;
-                flickable.isMomentumActive = false;
-                flickable.momentumVelocity = 0;
-            }
-        }
-    }
-
-    ScrollBar.vertical: DankScrollbar {
-        id: vbar
-    }
-}
+DankCommon.DankFlickable {}

quickshell/Widgets/DankGridView.qml

@@ -1,175 +1,3 @@
-import QtQuick
-import QtQuick.Controls
-import qs.Widgets
-import "ScrollConstants.js" as Scroll
+import qs.DankCommon.Widgets as DankCommon
 
-GridView {
-    id: gridView
-
-    property real momentumVelocity: 0
-    property bool isMomentumActive: false
-    property real friction: Scroll.friction
-
-    flickDeceleration: Scroll.flickDeceleration
-    maximumFlickVelocity: Scroll.maximumFlickVelocity
-    boundsBehavior: Flickable.StopAtBounds
-    boundsMovement: Flickable.FollowBoundsBehavior
-    pressDelay: 0
-    flickableDirection: Flickable.VerticalFlick
-
-    onMovementStarted: {
-        vbar._scrollBarActive = true;
-        vbar.hideTimer.stop();
-    }
-    onMovementEnded: vbar.hideTimer.restart()
-
-    WheelHandler {
-        id: wheelHandler
-
-        property real mouseWheelSpeed: Scroll.mouseWheelSpeed
-        property real touchpadSpeed: Scroll.touchpadSpeed
-        property real momentumRetention: Scroll.momentumRetention
-        property real lastWheelTime: 0
-        property real momentum: 0
-        property var velocitySamples: []
-        property bool sessionUsedMouseWheel: false
-
-        function startMomentum() {
-            isMomentumActive = true;
-            momentumAnim.running = true;
-        }
-
-        acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
-        onWheel: event => {
-            vbar._scrollBarActive = true;
-            vbar.hideTimer.restart();
-
-            const currentTime = Date.now();
-            const timeDelta = currentTime - lastWheelTime;
-            lastWheelTime = currentTime;
-
-            const hasPixel = event.pixelDelta && event.pixelDelta.y !== 0;
-            const deltaY = event.angleDelta.y;
-            const isTraditionalMouse = !hasPixel && Math.abs(deltaY) >= 120 && (Math.abs(deltaY) % 120) === 0;
-            const isHighDpiMouse = !hasPixel && !isTraditionalMouse && deltaY !== 0;
-            const isTouchpad = hasPixel;
-
-            if (isTraditionalMouse) {
-                sessionUsedMouseWheel = true;
-                momentumAnim.running = false;
-                isMomentumActive = false;
-                velocitySamples = [];
-                momentum = 0;
-                momentumVelocity = 0;
-
-                const lines = Math.round(Math.abs(deltaY) / 120);
-                const scrollAmount = (deltaY > 0 ? -lines : lines) * cellHeight * 0.35;
-                let newY = contentY + scrollAmount;
-                newY = Math.max(0, Math.min(contentHeight - height, newY));
-
-                if (flicking) {
-                    cancelFlick();
-                }
-
-                contentY = newY;
-            } else if (isHighDpiMouse) {
-                sessionUsedMouseWheel = true;
-                momentumAnim.running = false;
-                isMomentumActive = false;
-                velocitySamples = [];
-                momentum = 0;
-                momentumVelocity = 0;
-
-                let delta = deltaY / 120 * cellHeight * 1.2;
-                let newY = contentY - delta;
-                newY = Math.max(0, Math.min(contentHeight - height, newY));
-
-                if (flicking) {
-                    cancelFlick();
-                }
-
-                contentY = newY;
-            } else if (isTouchpad) {
-                sessionUsedMouseWheel = false;
-                momentumAnim.running = false;
-                isMomentumActive = false;
-
-                let delta = event.pixelDelta.y * touchpadSpeed;
-
-                velocitySamples.push({
-                    "delta": delta,
-                    "time": currentTime
-                });
-                velocitySamples = velocitySamples.filter(s => currentTime - s.time < Scroll.velocitySampleWindowMs);
-
-                if (velocitySamples.length > 1) {
-                    const totalDelta = velocitySamples.reduce((sum, s) => sum + s.delta, 0);
-                    const timeSpan = currentTime - velocitySamples[0].time;
-                    if (timeSpan > 0) {
-                        momentumVelocity = Math.max(-Scroll.maxMomentumVelocity, Math.min(Scroll.maxMomentumVelocity, totalDelta / timeSpan * 1000));
-                    }
-                }
-
-                if (timeDelta < Scroll.momentumTimeThreshold) {
-                    momentum = momentum * momentumRetention + delta * Scroll.momentumDeltaFactor;
-                    delta += momentum;
-                } else {
-                    momentum = 0;
-                }
-
-                let newY = contentY - delta;
-                newY = Math.max(0, Math.min(contentHeight - height, newY));
-
-                if (flicking) {
-                    cancelFlick();
-                }
-
-                contentY = newY;
-            }
-
-            event.accepted = true;
-        }
-        onActiveChanged: {
-            if (!active) {
-                if (!sessionUsedMouseWheel && Math.abs(momentumVelocity) >= Scroll.minMomentumVelocity) {
-                    startMomentum();
-                } else {
-                    velocitySamples = [];
-                    momentumVelocity = 0;
-                }
-            }
-        }
-    }
-
-    FrameAnimation {
-        id: momentumAnim
-        running: false
-
-        onTriggered: {
-            const dt = frameTime;
-            const newY = contentY - momentumVelocity * dt;
-            const maxY = Math.max(0, contentHeight - height);
-
-            if (newY < 0 || newY > maxY) {
-                contentY = newY < 0 ? 0 : maxY;
-                running = false;
-                isMomentumActive = false;
-                momentumVelocity = 0;
-                return;
-            }
-
-            contentY = newY;
-            momentumVelocity *= Math.pow(friction, dt / 0.016);
-
-            if (Math.abs(momentumVelocity) < Scroll.momentumStopThreshold) {
-                running = false;
-                isMomentumActive = false;
-                momentumVelocity = 0;
-            }
-        }
-    }
-
-    ScrollBar.vertical: DankScrollbar {
-        id: vbar
-    }
-}
+DankCommon.DankGridView {}

quickshell/Widgets/DankIcon.qml

@@ -1,72 +1,3 @@
-import QtQuick
-import qs.Common
+import qs.DankCommon.Widgets as DankCommon
 
-Item {
-    id: root
-
-    property alias name: icon.text
-    property alias size: icon.font.pixelSize
-    property alias color: icon.color
-    property bool filled: false
-    property real fill: filled ? 1.0 : 0.0
-    property int grade: Theme.isLightMode ? 0 : -25
-    property int weight: filled ? 500 : 400
-    property bool smoothTransform: false
-
-    implicitWidth: Math.round(size)
-    implicitHeight: Math.round(size)
-
-    signal rotationCompleted
-
-    FontLoader {
-        id: materialSymbolsFont
-        source: Qt.resolvedUrl("../assets/fonts/material-design-icons/variablefont/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf")
-    }
-
-    StyledText {
-        id: icon
-
-        anchors.fill: parent
-
-        font.family: materialSymbolsFont.name
-        font.pixelSize: Math.round(Theme.fontSizeMedium)
-        font.weight: root.weight
-        font.hintingPreference: Font.PreferNoHinting
-        color: Theme.surfaceText
-        verticalAlignment: Text.AlignVCenter
-        horizontalAlignment: Text.AlignHCenter
-        renderType: root.smoothTransform ? Text.QtRendering : Text.NativeRendering
-
-        font.variableAxes: {
-            "FILL": root.fill.toFixed(1),
-            "GRAD": root.grade,
-            "opsz": 24,
-            "wght": root.weight
-        }
-
-        Behavior on font.weight {
-            NumberAnimation {
-                duration: Theme.shortDuration
-                easing.type: Theme.standardEasing
-            }
-        }
-    }
-
-    Behavior on fill {
-        NumberAnimation {
-            duration: Theme.shortDuration
-            easing.type: Theme.standardEasing
-        }
-    }
-
-    Timer {
-        id: rotationTimer
-        interval: 16
-        repeat: false
-        onTriggered: root.rotationCompleted()
-    }
-
-    onRotationChanged: {
-        rotationTimer.restart();
-    }
-}
+DankCommon.DankIcon {}

quickshell/Widgets/DankIconPicker.qml

@@ -1,259 +1,3 @@
-import QtQuick
-import QtQuick.Controls
-import qs.Common
-import qs.Widgets
+import qs.DankCommon.Widgets as DankCommon
 
-Rectangle {
-    id: root
-
-    property string currentIcon: ""
-    property string iconType: "icon"
-
-    signal iconSelected(string iconName, string iconType)
-
-    width: 240
-    height: 32
-    radius: Theme.cornerRadius
-    color: Theme.surfaceContainer
-    border.color: iconPopup.visible ? Theme.primary : Theme.outline
-    border.width: 1
-
-    property var iconCategories: [
-        {
-            "name": I18n.tr("Numbers"),
-            "icons": ["looks_one", "looks_two", "looks_3", "looks_4", "looks_5", "looks_6", "filter_1", "filter_2", "filter_3", "filter_4", "filter_5", "filter_6", "filter_7", "filter_8", "filter_9", "filter_9_plus", "plus_one", "exposure_plus_1", "exposure_plus_2"]
-        },
-        {
-            "name": I18n.tr("Workspace"),
-            "icons": ["work", "laptop", "desktop_windows", "folder", "view_module", "dashboard", "apps", "grid_view"]
-        },
-        {
-            "name": I18n.tr("Development"),
-            "icons": ["code", "terminal", "bug_report", "build", "engineering", "integration_instructions", "data_object", "schema", "api", "webhook"]
-        },
-        {
-            "name": I18n.tr("Communication"),
-            "icons": ["chat", "mail", "forum", "message", "video_call", "call", "contacts", "group", "notifications", "campaign"]
-        },
-        {
-            "name": I18n.tr("Media"),
-            "icons": ["music_note", "headphones", "mic", "videocam", "photo", "movie", "library_music", "album", "radio", "volume_up"]
-        },
-        {
-            "name": I18n.tr("System"),
-            "icons": ["memory", "storage", "developer_board", "monitor", "keyboard", "mouse", "battery_std", "wifi", "bluetooth", "security", "settings"]
-        },
-        {
-            "name": I18n.tr("Navigation"),
-            "icons": ["home", "arrow_forward", "arrow_back", "expand_more", "expand_less", "menu", "close", "search", "filter_list", "sort"]
-        },
-        {
-            "name": I18n.tr("Actions"),
-            "icons": ["add", "remove", "edit", "delete", "save", "download", "upload", "share", "content_copy", "content_paste", "content_cut", "undo", "redo"]
-        },
-        {
-            "name": I18n.tr("Status"),
-            "icons": ["check", "error", "warning", "info", "done", "pending", "schedule", "update", "sync", "offline_bolt"]
-        },
-        {
-            "name": I18n.tr("Fun"),
-            "icons": ["celebration", "cake", "star", "favorite", "pets", "sports_esports", "local_fire_department", "bolt", "auto_awesome", "diamond"]
-        }
-    ]
-
-    MouseArea {
-        anchors.fill: parent
-        hoverEnabled: true
-        cursorShape: Qt.PointingHandCursor
-        onClicked: {
-            if (iconPopup.visible) {
-                iconPopup.close();
-                return;
-            }
-            const pos = root.mapToItem(Overlay.overlay, 0, 0);
-            const popupHeight = 500;
-            const overlayHeight = Overlay.overlay?.height ?? 800;
-            iconPopup.x = pos.x;
-            if (pos.y + root.height + popupHeight + 4 > overlayHeight) {
-                iconPopup.y = pos.y - popupHeight - 4;
-            } else {
-                iconPopup.y = pos.y + root.height + 4;
-            }
-            iconPopup.open();
-        }
-    }
-
-    Row {
-        anchors.left: parent.left
-        anchors.verticalCenter: parent.verticalCenter
-        anchors.leftMargin: Theme.spacingS
-        spacing: Theme.spacingS
-
-        DankIcon {
-            name: (root.iconType === "icon" && root.currentIcon) ? root.currentIcon : (root.iconType === "text" ? "text_fields" : "add")
-            size: 16
-            color: root.currentIcon ? Theme.surfaceText : Theme.outline
-            anchors.verticalCenter: parent.verticalCenter
-        }
-
-        StyledText {
-            text: root.currentIcon ? root.currentIcon : I18n.tr("Choose icon")
-            font.pixelSize: Theme.fontSizeSmall
-            color: root.currentIcon ? Theme.surfaceText : Theme.outline
-            anchors.verticalCenter: parent.verticalCenter
-            width: 160
-            elide: Text.ElideRight
-        }
-    }
-
-    DankIcon {
-        name: iconPopup.visible ? "expand_less" : "expand_more"
-        size: 16
-        color: Theme.outline
-        anchors.right: parent.right
-        anchors.rightMargin: Theme.spacingS
-        anchors.verticalCenter: parent.verticalCenter
-    }
-
-    Popup {
-        id: iconPopup
-
-        parent: root.Overlay.overlay
-        width: 320
-        height: Math.min(500, dropdownContent.implicitHeight + 32)
-        padding: 0
-        modal: true
-        dim: false
-        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
-
-        background: Rectangle {
-            color: "transparent"
-        }
-
-        contentItem: Rectangle {
-            id: contentSurface
-            color: Theme.surface
-            radius: Theme.cornerRadius
-
-            ElevationShadow {
-                id: shadowLayer
-                anchors.fill: parent
-                z: -1
-                level: Theme.elevationLevel2
-                fallbackOffset: 4
-                targetRadius: contentSurface.radius
-                targetColor: contentSurface.color
-                shadowOpacity: Theme.elevationLevel2 && Theme.elevationLevel2.alpha !== undefined ? Theme.elevationLevel2.alpha : 0.25
-                shadowEnabled: Theme.elevationEnabled
-            }
-
-            Rectangle {
-                width: 24
-                height: 24
-                radius: 12
-                color: closeMouseArea.containsMouse ? Theme.errorHover : Theme.withAlpha(Theme.errorHover, 0)
-                anchors.top: parent.top
-                anchors.right: parent.right
-                anchors.topMargin: Theme.spacingS
-                anchors.rightMargin: Theme.spacingS
-                z: 1
-
-                DankIcon {
-                    name: "close"
-                    size: 16
-                    color: closeMouseArea.containsMouse ? Theme.error : Theme.outline
-                    anchors.centerIn: parent
-                }
-
-                MouseArea {
-                    id: closeMouseArea
-                    anchors.fill: parent
-                    hoverEnabled: true
-                    cursorShape: Qt.PointingHandCursor
-                    onClicked: iconPopup.close()
-                }
-            }
-
-            DankFlickable {
-                anchors.fill: parent
-                anchors.margins: Theme.spacingS
-                contentHeight: dropdownContent.height
-                clip: true
-                pressDelay: 0
-
-                Column {
-                    id: dropdownContent
-                    width: parent.width
-                    spacing: Theme.spacingM
-
-                    Repeater {
-                        model: root.iconCategories
-
-                        Column {
-                            required property var modelData
-                            width: parent.width
-                            spacing: Theme.spacingS
-
-                            StyledText {
-                                text: modelData.name
-                                font.pixelSize: Theme.fontSizeSmall
-                                font.weight: Font.Medium
-                                color: Theme.surfaceText
-                            }
-
-                            Flow {
-                                width: parent.width
-                                spacing: Theme.spacingXS
-
-                                Repeater {
-                                    model: modelData.icons
-
-                                    Rectangle {
-                                        required property string modelData
-                                        width: 36
-                                        height: 36
-                                        radius: Theme.cornerRadius
-                                        color: iconMouseArea.containsMouse ? Theme.primaryHover : Theme.withAlpha(Theme.primaryHover, 0)
-                                        border.color: root.currentIcon === modelData ? Theme.primary : Theme.withAlpha(Theme.primary, 0)
-                                        border.width: 2
-
-                                        DankIcon {
-                                            name: parent.modelData
-                                            size: 20
-                                            color: root.currentIcon === parent.modelData ? Theme.primary : Theme.surfaceText
-                                            anchors.centerIn: parent
-                                        }
-
-                                        MouseArea {
-                                            id: iconMouseArea
-                                            anchors.fill: parent
-                                            hoverEnabled: true
-                                            cursorShape: Qt.PointingHandCursor
-                                            onClicked: {
-                                                root.iconSelected(parent.modelData, "icon");
-                                                iconPopup.close();
-                                            }
-                                        }
-
-                                        Behavior on color {
-                                            ColorAnimation {
-                                                duration: Theme.shortDuration
-                                                easing.type: Theme.standardEasing
-                                            }
-                                        }
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    function setIcon(iconName, type) {
-        root.iconType = type;
-        root.iconType = "icon";
-        root.currentIcon = iconName;
-    }
-}
+DankCommon.DankIconPicker {}

quickshell/Widgets/DankListView.qml

@@ -1,277 +1,3 @@
-import QtQuick
-import QtQuick.Controls
-import qs.Common
-import qs.Widgets
-import "ScrollConstants.js" as Scroll
+import qs.DankCommon.Widgets as DankCommon
 
-ListView {
-    id: listView
-
-    property real scrollBarTopMargin: 0
-    property real mouseWheelSpeed: Scroll.mouseWheelSpeed
-    property real savedY: 0
-    property bool justChanged: false
-    property bool isUserScrolling: false
-    property real momentumVelocity: 0
-    property bool isMomentumActive: false
-    property real friction: Scroll.friction
-
-    flickDeceleration: Scroll.flickDeceleration
-    maximumFlickVelocity: Scroll.maximumFlickVelocity
-    boundsBehavior: Flickable.StopAtBounds
-    boundsMovement: Flickable.FollowBoundsBehavior
-    pressDelay: 0
-    flickableDirection: Flickable.VerticalFlick
-
-    add: ListViewTransitions.add
-    remove: ListViewTransitions.remove
-    displaced: ListViewTransitions.displaced
-    move: ListViewTransitions.move
-
-    // QQmlDelegateModel can release a delegate back to its cache without hiding it,
-    // leaving a stale row painted over live ones. Hide anything the view no longer claims.
-    Connections {
-        target: listView.model?.objectName !== undefined ? listView.model : null
-        ignoreUnknownSignals: true
-        function onRowsInserted() {
-            orphanSweep.arm();
-        }
-        function onRowsRemoved() {
-            orphanSweep.arm();
-        }
-        function onRowsMoved() {
-            orphanSweep.arm();
-        }
-        function onModelReset() {
-            orphanSweep.arm();
-        }
-    }
-
-    FrameAnimation {
-        id: orphanSweep
-
-        property int frames: 0
-
-        function arm() {
-            frames = 0;
-            running = true;
-        }
-
-        onTriggered: {
-            const kids = listView.contentItem.children;
-            const rows = [];
-            for (let i = 0; i < kids.length; i++) {
-                const c = kids[i];
-                if (!c || c.index === undefined)
-                    continue;
-                const claimed = listView.itemAtIndex(c.index) === c;
-                if (claimed && !c.visible) {
-                    c.visible = true;
-                    continue;
-                }
-                if (c.visible)
-                    rows.push({
-                        item: c,
-                        claimed: claimed
-                    });
-            }
-            for (let a = 0; a < rows.length; a++) {
-                if (rows[a].claimed)
-                    continue;
-                for (let b = 0; b < rows.length; b++) {
-                    if (a === b || !rows[b].claimed)
-                        continue;
-                    if (Math.abs(rows[a].item.y - rows[b].item.y) < rows[b].item.height / 2) {
-                        rows[a].item.visible = false;
-                        break;
-                    }
-                }
-            }
-            if (++frames >= 3)
-                running = false;
-        }
-    }
-
-    onMovementStarted: {
-        isUserScrolling = true;
-        vbar._scrollBarActive = true;
-        vbar.hideTimer.stop();
-    }
-    onMovementEnded: {
-        isUserScrolling = false;
-        vbar.hideTimer.restart();
-    }
-
-    onContentYChanged: {
-        if (!justChanged && isUserScrolling) {
-            savedY = contentY;
-        }
-        justChanged = false;
-    }
-
-    onModelChanged: {
-        justChanged = true;
-        contentY = savedY;
-    }
-
-    WheelHandler {
-        id: wheelHandler
-        property real touchpadSpeed: Scroll.touchpadSpeed
-        property real lastWheelTime: 0
-        property real momentum: 0
-        property var velocitySamples: []
-        property bool sessionUsedMouseWheel: false
-
-        function startMomentum() {
-            isMomentumActive = true;
-            momentumAnim.running = true;
-        }
-
-        acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
-
-        onWheel: event => {
-            isUserScrolling = true;
-            vbar._scrollBarActive = true;
-            vbar.hideTimer.restart();
-
-            const currentTime = Date.now();
-            const timeDelta = currentTime - lastWheelTime;
-            lastWheelTime = currentTime;
-
-            const hasPixel = event.pixelDelta && event.pixelDelta.y !== 0;
-            const deltaY = event.angleDelta.y;
-            const isTraditionalMouse = !hasPixel && Math.abs(deltaY) >= 120 && (Math.abs(deltaY) % 120) === 0;
-            const isHighDpiMouse = !hasPixel && !isTraditionalMouse && deltaY !== 0;
-            const isTouchpad = hasPixel;
-
-            if (isTraditionalMouse) {
-                sessionUsedMouseWheel = true;
-                momentumAnim.running = false;
-                isMomentumActive = false;
-                velocitySamples = [];
-                momentum = 0;
-                momentumVelocity = 0;
-
-                const lines = Math.round(Math.abs(deltaY) / 120);
-                const scrollAmount = (deltaY > 0 ? -lines : lines) * mouseWheelSpeed;
-                let newY = listView.contentY + scrollAmount;
-                const maxY = Math.max(0, listView.contentHeight - listView.height + listView.originY);
-                newY = Math.max(listView.originY, Math.min(maxY, newY));
-
-                if (listView.flicking) {
-                    listView.cancelFlick();
-                }
-
-                listView.contentY = newY;
-                savedY = newY;
-            } else if (isHighDpiMouse) {
-                sessionUsedMouseWheel = true;
-                momentumAnim.running = false;
-                isMomentumActive = false;
-                velocitySamples = [];
-                momentum = 0;
-                momentumVelocity = 0;
-
-                let delta = deltaY / 8 * touchpadSpeed;
-                let newY = listView.contentY - delta;
-                const maxY = Math.max(0, listView.contentHeight - listView.height + listView.originY);
-                newY = Math.max(listView.originY, Math.min(maxY, newY));
-
-                if (listView.flicking) {
-                    listView.cancelFlick();
-                }
-
-                listView.contentY = newY;
-                savedY = newY;
-            } else if (isTouchpad) {
-                sessionUsedMouseWheel = false;
-                momentumAnim.running = false;
-                isMomentumActive = false;
-
-                let delta = event.pixelDelta.y * touchpadSpeed;
-
-                velocitySamples.push({
-                    "delta": delta,
-                    "time": currentTime
-                });
-                velocitySamples = velocitySamples.filter(s => currentTime - s.time < Scroll.velocitySampleWindowMs);
-
-                if (velocitySamples.length > 1) {
-                    const totalDelta = velocitySamples.reduce((sum, s) => sum + s.delta, 0);
-                    const timeSpan = currentTime - velocitySamples[0].time;
-                    if (timeSpan > 0) {
-                        momentumVelocity = Math.max(-Scroll.maxMomentumVelocity, Math.min(Scroll.maxMomentumVelocity, totalDelta / timeSpan * 1000));
-                    }
-                }
-
-                if (timeDelta < Scroll.momentumTimeThreshold) {
-                    momentum = momentum * Scroll.momentumRetention + delta * Scroll.momentumDeltaFactor;
-                    delta += momentum;
-                } else {
-                    momentum = 0;
-                }
-
-                let newY = listView.contentY - delta;
-                const maxY = Math.max(0, listView.contentHeight - listView.height + listView.originY);
-                newY = Math.max(listView.originY, Math.min(maxY, newY));
-
-                if (listView.flicking) {
-                    listView.cancelFlick();
-                }
-
-                listView.contentY = newY;
-                savedY = newY;
-            }
-
-            event.accepted = true;
-        }
-
-        onActiveChanged: {
-            if (!active) {
-                isUserScrolling = false;
-                if (!sessionUsedMouseWheel && Math.abs(momentumVelocity) >= Scroll.minMomentumVelocity) {
-                    startMomentum();
-                } else {
-                    velocitySamples = [];
-                    momentumVelocity = 0;
-                }
-            }
-        }
-    }
-
-    FrameAnimation {
-        id: momentumAnim
-        running: false
-
-        onTriggered: {
-            const dt = frameTime;
-            const newY = contentY - momentumVelocity * dt;
-            const maxY = Math.max(0, contentHeight - height + originY);
-            const minY = originY;
-
-            if (newY < minY || newY > maxY) {
-                contentY = newY < minY ? minY : maxY;
-                savedY = contentY;
-                running = false;
-                isMomentumActive = false;
-                momentumVelocity = 0;
-                return;
-            }
-
-            contentY = newY;
-            savedY = newY;
-            momentumVelocity *= Math.pow(friction, dt / 0.016);
-
-            if (Math.abs(momentumVelocity) < Scroll.momentumStopThreshold) {
-                running = false;
-                isMomentumActive = false;
-                momentumVelocity = 0;
-            }
-        }
-    }
-
-    ScrollBar.vertical: DankScrollbar {
-        id: vbar
-        topPadding: listView.scrollBarTopMargin
-    }
-}
+DankCommon.DankListView {}

quickshell/Widgets/DankLocationSearch.qml

@@ -1,271 +1,3 @@
-import QtQuick
-import qs.Common
-import qs.Widgets
+import qs.DankCommon.Widgets as DankCommon
 
-Item {
-    id: root
-
-    activeFocusOnTab: true
-
-    KeyNavigation.tab: keyNavigationTab
-    KeyNavigation.backtab: keyNavigationBacktab
-
-    onActiveFocusChanged: {
-        if (activeFocus) {
-            locationInput.forceActiveFocus();
-        }
-    }
-
-    property string currentLocation: ""
-    property string placeholderText: I18n.tr("Search for a location...")
-    property bool _internalChange: false
-    property bool isLoading: false
-    property string currentSearchText: ""
-    property Item keyNavigationTab: null
-    property Item keyNavigationBacktab: null
-
-    signal locationSelected(string displayName, string coordinates)
-
-    function resetSearchState() {
-        locationSearchTimer.stop();
-        dropdownHideTimer.stop();
-        isLoading = false;
-        searchResultsModel.clear();
-    }
-
-    // CJK city names are commonly two code points (北京, 東京, 서울).
-    function canSearch(t) {
-        return t.length > 2 || (t.length >= 2 && /[぀-ヿ㐀-䶿一-鿿豈-﫿가-힯]/.test(t));
-    }
-
-    width: parent.width
-    height: searchInputField.height + (searchDropdown.visible ? searchDropdown.height : 0)
-
-    ListModel {
-        id: searchResultsModel
-    }
-
-    Timer {
-        id: locationSearchTimer
-
-        interval: 500
-        running: false
-        repeat: false
-        onTriggered: {
-            if (root.canSearch(locationInput.text)) {
-                searchResultsModel.clear();
-                root.isLoading = true;
-                const searchLocation = locationInput.text;
-                root.currentSearchText = searchLocation;
-                const encodedLocation = encodeURIComponent(searchLocation);
-                const searchUrl = "https://nominatim.openstreetmap.org/search?q=" + encodedLocation + "&format=json&limit=5&addressdetails=1";
-                Proc.runCommand("locationSearch", [Proc.dmsBin, "dl", "-4", "--timeout", "10", searchUrl], (output, exitCode) => {
-                    root.isLoading = false;
-                    if (exitCode !== 0) {
-                        searchResultsModel.clear();
-                        return;
-                    }
-                    if (root.currentSearchText !== locationInput.text)
-                        return;
-                    const raw = output.trim();
-                    searchResultsModel.clear();
-                    if (!raw || raw[0] !== "[") {
-                        return;
-                    }
-                    try {
-                        const data = JSON.parse(raw);
-                        if (data.length === 0) {
-                            return;
-                        }
-                        for (var i = 0; i < Math.min(data.length, 5); i++) {
-                            const location = data[i];
-                            if (location.display_name && location.lat && location.lon) {
-                                const parts = location.display_name.split(', ');
-                                let cleanName = parts[0];
-                                if (parts.length > 1) {
-                                    const state = parts[parts.length - 2];
-                                    if (state && state !== cleanName)
-                                        cleanName += `, ${state}`;
-                                }
-                                const query = `${location.lat},${location.lon}`;
-                                searchResultsModel.append({
-                                    "name": cleanName,
-                                    "query": query
-                                });
-                            }
-                        }
-                    } catch (e) {}
-                });
-            }
-        }
-    }
-
-    Timer {
-        id: dropdownHideTimer
-
-        interval: 200
-        running: false
-        repeat: false
-        onTriggered: {
-            if (!locationInput.getActiveFocus() && !searchDropdown.hovered)
-                root.resetSearchState();
-        }
-    }
-
-    Item {
-        id: searchInputField
-
-        width: parent.width
-        height: 48
-
-        DankTextField {
-            id: locationInput
-
-            width: parent.width
-            height: parent.height
-            leftIconName: "search"
-            placeholderText: root.placeholderText
-            text: ""
-            backgroundColor: Theme.surfaceVariant
-            normalBorderColor: Theme.primarySelected
-            focusedBorderColor: Theme.primary
-            keyNavigationTab: root.keyNavigationTab
-            keyNavigationBacktab: root.keyNavigationBacktab
-            onTextEdited: {
-                if (root._internalChange)
-                    return;
-                if (getActiveFocus()) {
-                    if (root.canSearch(text)) {
-                        root.isLoading = true;
-                        locationSearchTimer.restart();
-                    } else {
-                        root.resetSearchState();
-                    }
-                }
-            }
-            onFocusStateChanged: hasFocus => {
-                if (hasFocus) {
-                    dropdownHideTimer.stop();
-                } else {
-                    dropdownHideTimer.start();
-                }
-            }
-        }
-
-        DankIcon {
-            name: root.isLoading ? "hourglass_empty" : (searchResultsModel.count > 0 ? "check_circle" : "error")
-            size: Theme.iconSize - 4
-            color: root.isLoading ? Theme.surfaceVariantText : (searchResultsModel.count > 0 ? Theme.primary : Theme.error)
-            anchors.right: parent.right
-            anchors.rightMargin: Theme.spacingM
-            anchors.verticalCenter: parent.verticalCenter
-            opacity: (locationInput.getActiveFocus() && root.canSearch(locationInput.text)) ? 1 : 0
-
-            Behavior on opacity {
-                NumberAnimation {
-                    duration: Theme.shortDuration
-                    easing.type: Theme.standardEasing
-                }
-            }
-        }
-    }
-
-    StyledRect {
-        id: searchDropdown
-
-        property bool hovered: false
-
-        width: parent.width
-        height: Math.min(Math.max(searchResultsModel.count * 38 + Theme.spacingS * 2, 50), 200)
-        y: searchInputField.height
-        radius: Theme.cornerRadius
-        color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
-        border.color: Theme.primarySelected
-        border.width: 1
-        visible: locationInput.getActiveFocus() && root.canSearch(locationInput.text) && (searchResultsModel.count > 0 || root.isLoading)
-
-        MouseArea {
-            anchors.fill: parent
-            hoverEnabled: true
-            onEntered: {
-                parent.hovered = true;
-                dropdownHideTimer.stop();
-            }
-            onExited: {
-                parent.hovered = false;
-                if (!locationInput.getActiveFocus())
-                    dropdownHideTimer.start();
-            }
-            acceptedButtons: Qt.NoButton
-        }
-
-        Item {
-            anchors.fill: parent
-            anchors.margins: Theme.spacingS
-
-            DankListView {
-                id: searchResultsList
-
-                anchors.fill: parent
-                clip: true
-                model: searchResultsModel
-                spacing: Theme.spacingXXS
-
-                delegate: StyledRect {
-                    width: searchResultsList.width
-                    height: 36
-                    radius: Theme.cornerRadius
-                    color: resultMouseArea.containsMouse ? Theme.surfaceLight : Theme.withAlpha(Theme.surfaceLight, 0)
-
-                    Row {
-                        anchors.fill: parent
-                        anchors.margins: Theme.spacingM
-                        spacing: Theme.spacingS
-
-                        DankIcon {
-                            name: "place"
-                            size: Theme.iconSize - 6
-                            color: Theme.surfaceVariantText
-                            anchors.verticalCenter: parent.verticalCenter
-                        }
-
-                        StyledText {
-                            text: model.name || "Unknown"
-                            font.pixelSize: Theme.fontSizeMedium
-                            color: Theme.surfaceText
-                            anchors.verticalCenter: parent.verticalCenter
-                            elide: Text.ElideRight
-                            width: parent.width - 30
-                        }
-                    }
-
-                    MouseArea {
-                        id: resultMouseArea
-
-                        anchors.fill: parent
-                        hoverEnabled: true
-                        cursorShape: Qt.PointingHandCursor
-                        onClicked: {
-                            root._internalChange = true;
-                            const selectedName = model.name;
-                            const selectedQuery = model.query;
-                            locationInput.text = selectedName;
-                            root.locationSelected(selectedName, selectedQuery);
-                            root.resetSearchState();
-                            locationInput.setFocus(false);
-                            root._internalChange = false;
-                        }
-                    }
-                }
-            }
-
-            StyledText {
-                anchors.centerIn: parent
-                text: root.isLoading ? "Searching..." : "No locations found"
-                font.pixelSize: Theme.fontSizeMedium
-                color: Theme.surfaceVariantText
-                visible: searchResultsList.count === 0 && root.canSearch(locationInput.text)
-            }
-        }
-    }
-}
+DankCommon.DankLocationSearch {}

quickshell/Widgets/DankNFIcon.qml

@@ -1,164 +1,3 @@
-import QtQuick
-import qs.Common
+import qs.DankCommon.Widgets as DankCommon
 
-Item {
-    id: root
-
-    property string name: ""
-    property int size: Theme.fontSizeMedium
-    property alias color: icon.color
-
-    width: size
-    height: size
-    visible: text.length > 0
-
-    // This is for file browser, particularly - might want another map later for app IDs
-    readonly property var iconMap: ({
-            // --- Distribution logos ---
-            "debian": "\u{f08da}",
-            "arch": "\u{f08c7}",
-            "archcraft": "\u{f345}",
-            "guix": "\u{f325}",
-            "fedora": "\u{f08db}",
-            "nixos": "\u{f1105}",
-            "ubuntu": "\u{f0548}",
-            "gentoo": "\u{f08e8}",
-            "endeavouros": "\u{f322}",
-            "manjaro": "\u{f160a}",
-            "opensuse": "\u{f314}",
-            "artix": "\u{f31f}",
-            "void": "\u{f32e}",
-
-            // --- special types ---
-            "folder": "\u{F024B}",
-            "file": "\u{F0214}",
-
-            // --- special filenames (no extension) ---
-            "docker": "\u{F0868}",
-            "makefile": "\u{F09EE}",
-            "license": "\u{F09EE}",
-            "readme": "\u{F0354}",
-
-            // --- programming languages ---
-            "rs": "\u{F1617}",
-            "dart": "\u{e798}",
-            "go": "\u{F07D3}",
-            "py": "\u{F0320}",
-            "js": "\u{F031E}",
-            "jsx": "\u{F031E}",
-            "ts": "\u{F06E6}",
-            "tsx": "\u{F06E6}",
-            "java": "\u{F0B37}",
-            "c": "\u{F0671}",
-            "cpp": "\u{F0672}",
-            "cxx": "\u{F0672}",
-            "h": "\u{F0672}",
-            "hpp": "\u{F0672}",
-            "cs": "\u{F031B}",
-            "html": "\u{e60e}",
-            "htm": "\u{e60e}",
-            "css": "\u{E6b8}",
-            "scss": "\u{F031C}",
-            "less": "\u{F031C}",
-            "md": "\u{F0354}",
-            "markdown": "\u{F0354}",
-            "json": "\u{eb0f}",
-            "jsonc": "\u{eb0f}",
-            "yaml": "\u{e8eb}",
-            "yml": "\u{e8eb}",
-            "xml": "\u{F09EE}",
-            "sql": "\u{f1c0}",
-
-            // --- scripts / shells ---
-            "sh": "\u{f0bc1}",
-            "bash": "\u{f0bc1}",
-            "zsh": "\u{f0bc1}",
-            "fish": "\u{f0bc1}",
-            "ps1": "\u{f0bc1}",
-            "bat": "\u{f0bc1}",
-
-            // --- data / config ---
-            "toml": "\u{e6b2}",
-            "ini": "\u{F09EE}",
-            "conf": "\u{F09EE}",
-            "cfg": "\u{F09EE}",
-            "csv": "\u{eefc}",
-            "tsv": "\u{F021C}",
-
-            // --- docs / office ---
-            "pdf": "\u{F0226}",
-            "doc": "\u{F09EE}",
-            "docx": "\u{F09EE}",
-            "rtf": "\u{F09EE}",
-            "ppt": "\u{F09EE}",
-            "pptx": "\u{F09EE}",
-            "log": "\u{F09EE}",
-            "xls": "\u{F021C}",
-            "xlsx": "\u{F021C}",
-
-            // --- images ---
-            "ico": "\u{F021F}",
-
-            // --- audio / video ---
-            "mp3": "\u{e638}",
-            "wav": "\u{e638}",
-            "flac": "\u{e638}",
-            "ogg": "\u{e638}",
-            "mp4": "\u{f0567}",
-            "mkv": "\u{f0567}",
-            "webm": "\u{f0567}",
-            "mov": "\u{f0567}",
-
-            // --- archives / packages ---
-            "zip": "\u{e6aa}",
-            "tar": "\u{f003c}",
-            "gz": "\u{f003c}",
-            "bz2": "\u{f003c}",
-            "7z": "\u{f003c}",
-
-            // --- containers / infra / cloud ---
-            "dockerfile": "\u{F0868}",
-            "yml.k8s": "\u{F09EE}",
-            "yaml.k8s": "\u{F09EE}",
-            "tf": "\u{F09EE}",
-            "tfvars": "\u{F09EE}",
-
-            // --- moon phases
-            "moon_new": "\u{F0F64}",
-            "moon_waxing_crescent": "\u{F0F67}",
-            "moon_first_quarter": "\u{F0F61}",
-            "moon_waxing_gibbous": "\u{F0F68}",
-            "moon_full": "\u{F0F62}",
-            "moon_waning_gibbous": "\u{F0F66}",
-            "moon_last_quarter": "\u{F0F63}",
-            "moon_waning_crescent": "\u{F0F65}"
-        })
-
-    readonly property string text: iconMap[name] || iconMap["file"] || ""
-
-    function getIconForFile(fileName) {
-        const lowerName = fileName.toLowerCase();
-        if (lowerName.startsWith("dockerfile")) {
-            return "docker";
-        }
-        const ext = fileName.split('.').pop();
-        return ext || "";
-    }
-
-    FontLoader {
-        id: firaCodeFont
-        source: Qt.resolvedUrl("../assets/fonts/nerd-fonts/FiraCodeNerdFont-Regular.ttf")
-    }
-
-    StyledText {
-        id: icon
-
-        anchors.centerIn: parent
-
-        font.family: firaCodeFont.name
-        font.pixelSize: root.size
-        color: Theme.surfaceText
-        text: root.text
-        antialiasing: true
-    }
-}
+DankCommon.DankNFIcon {}

quickshell/Widgets/DankNumberStepper.qml

@@ -1,73 +1,3 @@
-import QtQuick
-import qs.Common
+import qs.DankCommon.Widgets as DankCommon
 
-Column {
-    id: root
-    property string text: ""
-    property var incrementTooltipText: ""
-    property var decrementTooltipText: ""
-    property var onIncrement: undefined
-    property var onDecrement: undefined
-    property string incrementIconName: "keyboard_arrow_up"
-    property string decrementIconName: "keyboard_arrow_down"
-
-    property bool incrementEnabled: true
-    property bool decrementEnabled: true
-
-    property color textColor: Theme.surfaceText
-    property color iconColor: Theme.withAlpha(Theme.surfaceText, 0.5)
-    property color backgroundColor: Theme.primary
-
-    property int textSize: Theme.fontSizeSmall
-    property var iconSize: 12
-    property int buttonSize: 20
-    property int horizontalPadding: Theme.spacingL
-
-    readonly property bool effectiveIncrementEnabled: root.onIncrement ? root.incrementEnabled : false
-    readonly property bool effectiveDecrementEnabled: root.onDecrement ? root.decrementEnabled : false
-
-    width: Math.max(buttonSize * 2, root.implicitWidth + horizontalPadding * 2)
-    spacing: Theme.spacingXS
-
-    DankActionButton {
-        anchors.horizontalCenter: parent.horizontalCenter
-        enabled: root.effectiveIncrementEnabled
-        iconColor: root.effectiveIncrementEnabled ? root.iconColor : Theme.blendAlpha(root.iconColor, 0.5)
-        iconSize: root.iconSize
-        buttonSize: root.buttonSize
-        iconName: root.incrementIconName
-        onClicked: if (typeof root.onIncrement === 'function')
-            root.onIncrement()
-        tooltipText: root.incrementTooltipText
-    }
-
-    Row {
-        anchors.horizontalCenter: parent.horizontalCenter
-        Item {
-            width: 5
-            height: 1
-        }
-        StyledText {
-            isMonospace: true
-            text: root.text
-            font.pixelSize: root.textSize
-            color: root.textColor
-        }
-        Item {
-            width: 5
-            height: 1
-        }
-    }
-
-    DankActionButton {
-        anchors.horizontalCenter: parent.horizontalCenter
-        enabled: root.effectiveDecrementEnabled
-        iconColor: root.effectiveDecrementEnabled ? root.iconColor : Theme.blendAlpha(root.iconColor, 0.5)
-        iconSize: root.iconSize
-        buttonSize: root.buttonSize
-        iconName: root.decrementIconName
-        onClicked: if (typeof root.onDecrement === 'function')
-            root.onDecrement()
-        tooltipText: root.decrementTooltipText
-    }
-}
+DankCommon.DankNumberStepper {}

quickshell/Widgets/DankRipple.qml

@@ -1,105 +1,3 @@
-import QtQuick
-import qs.Common
+import qs.DankCommon.Widgets as DankCommon
 
-Item {
-    id: root
-
-    property color rippleColor: Theme.primary
-    property real cornerRadius: 0
-    property bool enableRipple: typeof SettingsData !== "undefined" ? (SettingsData.enableRippleEffects ?? true) : true
-    property int animationDuration: Theme.expressiveDurations.expressiveDefaultSpatial
-
-    property real _rippleX: 0
-    property real _rippleY: 0
-    property real _rippleMaxRadius: 0
-    readonly property alias animating: rippleAnim.running
-
-    anchors.fill: parent
-
-    function trigger(x, y) {
-        if (!enableRipple || Theme.currentAnimationSpeed === SettingsData.AnimationSpeed.None)
-            return;
-
-        _rippleX = x;
-        _rippleY = y;
-
-        const dist = (ox, oy) => ox * ox + oy * oy;
-        _rippleMaxRadius = Math.sqrt(Math.max(dist(x, y), dist(x, height - y), dist(width - x, y), dist(width - x, height - y)));
-
-        rippleAnim.restart();
-    }
-
-    SequentialAnimation {
-        id: rippleAnim
-
-        PropertyAction {
-            target: rippleFx
-            property: "rippleCenterX"
-            value: root._rippleX
-        }
-        PropertyAction {
-            target: rippleFx
-            property: "rippleCenterY"
-            value: root._rippleY
-        }
-        PropertyAction {
-            target: rippleFx
-            property: "rippleRadius"
-            value: 0
-        }
-        PropertyAction {
-            target: rippleFx
-            property: "rippleOpacity"
-            value: 0.10
-        }
-
-        ParallelAnimation {
-            DankAnim {
-                target: rippleFx
-                property: "rippleRadius"
-                from: 0
-                to: root._rippleMaxRadius
-                duration: root.animationDuration
-                easing.bezierCurve: Theme.expressiveCurves.standardDecel
-            }
-            SequentialAnimation {
-                PauseAnimation {
-                    duration: Math.round(root.animationDuration * 0.6)
-                }
-                DankAnim {
-                    target: rippleFx
-                    property: "rippleOpacity"
-                    to: 0
-                    duration: root.animationDuration
-                    easing.bezierCurve: Theme.expressiveCurves.standard
-                }
-            }
-        }
-    }
-
-    ShaderEffect {
-        id: rippleFx
-        visible: rippleAnim.running
-
-        property real rippleCenterX: 0
-        property real rippleCenterY: 0
-        property real rippleRadius: 0
-        property real rippleOpacity: 0
-
-        x: Math.max(0, rippleCenterX - rippleRadius)
-        y: Math.max(0, rippleCenterY - rippleRadius)
-        width: Math.max(0, Math.min(root.width, rippleCenterX + rippleRadius) - x)
-        height: Math.max(0, Math.min(root.height, rippleCenterY + rippleRadius) - y)
-
-        property real widthPx: width
-        property real heightPx: height
-        property real cornerRadiusPx: root.cornerRadius
-        property real offsetX: x
-        property real offsetY: y
-        property real parentWidth: root.width
-        property real parentHeight: root.height
-        property vector4d rippleCol: Qt.vector4d(root.rippleColor.r, root.rippleColor.g, root.rippleColor.b, root.rippleColor.a)
-
-        fragmentShader: Qt.resolvedUrl("../Shaders/qsb/ripple.frag.qsb")
-    }
-}
+DankCommon.DankRipple {}

quickshell/Widgets/DankSVGIcon.qml

@@ -1,81 +1,3 @@
-import QtQuick
-import QtQuick.Effects
-import Quickshell.Widgets
-import qs.Common
+import qs.DankCommon.Widgets as DankCommon
 
-Item {
-    id: root
-
-    required property string source
-    property int size: 24
-    property string cornerIcon: ""
-    property int cornerIconSize: Math.max(10, size * 0.4)
-    property color cornerIconColor: Theme.surfaceText
-    property color cornerIconBackground: Theme.surface
-    property color colorOverride: "transparent"
-    property real brightnessOverride: 0.0
-    property real contrastOverride: 0.0
-    property real saturationOverride: 0.0
-
-    readonly property bool hasCornerIcon: cornerIcon !== ""
-    readonly property bool hasColorOverride: colorOverride.a > 0
-    readonly property bool hasColorEffect: hasColorOverride || brightnessOverride !== 0.0 || contrastOverride !== 0.0 || saturationOverride !== 0.0
-    readonly property string resolvedSource: {
-        if (!source)
-            return "";
-        if (source.startsWith("file://"))
-            return source;
-        if (source.startsWith("/"))
-            return "file://" + source;
-        if (source.startsWith("qrc:"))
-            return source;
-        return source;
-    }
-
-    implicitWidth: size
-    implicitHeight: size
-
-    IconImage {
-        id: iconImage
-        anchors.fill: parent
-        source: root.resolvedSource
-        smooth: true
-        mipmap: true
-        asynchronous: true
-        implicitSize: root.size * 2
-        backer.sourceSize.width: root.size * 2
-        backer.sourceSize.height: root.size * 2
-        backer.cache: true
-        layer.enabled: root.hasColorEffect
-        layer.smooth: true
-        layer.mipmap: true
-        layer.effect: MultiEffect {
-            saturation: root.saturationOverride
-            colorization: root.hasColorOverride ? 1 : 0
-            colorizationColor: root.colorOverride
-            brightness: root.brightnessOverride
-            contrast: root.contrastOverride
-        }
-    }
-
-    Rectangle {
-        visible: root.hasCornerIcon
-        anchors.right: parent.right
-        anchors.bottom: parent.bottom
-        anchors.rightMargin: -2
-        anchors.bottomMargin: -2
-        width: root.cornerIconSize + 4
-        height: root.cornerIconSize + 4
-        radius: width / 2
-        color: root.cornerIconBackground
-        border.width: 1
-        border.color: Theme.surfaceLight
-
-        DankIcon {
-            anchors.centerIn: parent
-            name: root.cornerIcon
-            size: root.cornerIconSize
-            color: root.cornerIconColor
-        }
-    }
-}
+DankCommon.DankSVGIcon {}

quickshell/Widgets/DankScrollbar.qml

@@ -1,46 +1,3 @@
-import QtQuick
-import QtQuick.Controls
-import qs.Common
+import qs.DankCommon.Widgets as DankCommon
 
-ScrollBar {
-    id: scrollbar
-
-    property var targetFlickable: null
-    readonly property var _target: targetFlickable ?? parent
-
-    property bool _scrollBarActive: false
-    property alias hideTimer: hideScrollBarTimer
-    property bool _isParentMoving: _target && (_target.moving || _target.flicking || _target.isMomentumActive)
-    property bool _shouldShow: pressed || hovered || active || _isParentMoving || _scrollBarActive
-
-    policy: (_target && _target.contentHeight > _target.height) ? ScrollBar.AsNeeded : ScrollBar.AlwaysOff
-    minimumSize: 0.08
-    implicitWidth: 10
-    interactive: true
-    hoverEnabled: true
-    z: 1000
-    opacity: (policy !== ScrollBar.AlwaysOff && _shouldShow) ? 1.0 : 0.0
-    visible: policy !== ScrollBar.AlwaysOff
-
-    Behavior on opacity {
-        NumberAnimation {
-            duration: 160
-            easing.type: Easing.OutQuad
-        }
-    }
-
-    contentItem: Rectangle {
-        implicitWidth: 6
-        radius: width / 2
-        color: scrollbar.pressed ? Theme.primary : scrollbar._shouldShow ? Theme.outline : Theme.outlineMedium
-        opacity: scrollbar.pressed ? 1.0 : scrollbar._shouldShow ? 1.0 : 0.6
-    }
-
-    background: Item {}
-
-    Timer {
-        id: hideScrollBarTimer
-        interval: 1200
-        onTriggered: scrollbar._scrollBarActive = false
-    }
-}
+DankCommon.DankScrollbar {}

quickshell/Widgets/DankSlider.qml

@@ -1,308 +1,3 @@
-import QtQuick
-import qs.Common
-import qs.Widgets
+import qs.DankCommon.Widgets as DankCommon
 
-Item {
-    id: slider
-
-    function checkParentDisablesTransparency() {
-        let p = parent;
-        while (p) {
-            if (p.disablePopupTransparency === true)
-                return true;
-            p = p.parent;
-        }
-        return false;
-    }
-
-    property int value: 50
-    property int minimum: 0
-    property int maximum: 100
-    property int step: 1
-    property string leftIcon: ""
-    property string rightIcon: ""
-    property string unit: "%"
-    property bool showValue: true
-    property bool isDragging: false
-    property bool wheelEnabled: true
-    property bool centerMinimum: false
-    property real valueOverride: -1
-    property bool alwaysShowValue: false
-    readonly property bool containsMouse: sliderMouseArea.containsMouse
-
-    property color thumbOutlineColor: Theme.surfaceContainer
-    property color trackColor: enabled ? Theme.outline : Theme.outline
-    property bool usePopupTransparency: !checkParentDisablesTransparency()
-    property real trackOpacity: usePopupTransparency ? Theme.popupTransparency : 1.0
-
-    signal sliderValueChanged(int newValue)
-    signal sliderDragFinished(int finalValue)
-
-    height: 48
-
-    function updateValueFromPosition(x) {
-        let ratio = Math.max(0, Math.min(1, (x - sliderHandle.width / 2) / (sliderTrack.width - sliderHandle.width)));
-        if (centerMinimum)
-            ratio = Math.max(0, (ratio - 0.5) * 2);
-        let rawValue = minimum + ratio * (maximum - minimum);
-        let newValue = step > 1 ? Math.round(rawValue / step) * step : Math.round(rawValue);
-        newValue = Math.max(minimum, Math.min(maximum, newValue));
-        if (newValue !== value) {
-            value = newValue;
-            sliderValueChanged(newValue);
-        }
-    }
-
-    Row {
-        anchors.centerIn: parent
-        width: parent.width
-        spacing: Theme.spacingM
-
-        DankIcon {
-            name: slider.leftIcon
-            size: Theme.iconSize
-            color: slider.enabled ? Theme.surfaceText : Theme.onSurface_38
-            anchors.verticalCenter: parent.verticalCenter
-            visible: slider.leftIcon.length > 0
-        }
-
-        StyledRect {
-            id: sliderTrack
-
-            property int leftIconWidth: slider.leftIcon.length > 0 ? Theme.iconSize : 0
-            property int rightIconWidth: slider.rightIcon.length > 0 ? Theme.iconSize : 0
-
-            width: parent.width - (leftIconWidth + rightIconWidth + (slider.leftIcon.length > 0 ? Theme.spacingM : 0) + (slider.rightIcon.length > 0 ? Theme.spacingM : 0))
-            height: 12
-            radius: Theme.cornerRadius
-            color: Theme.withAlpha(slider.trackColor, slider.trackOpacity)
-            anchors.verticalCenter: parent.verticalCenter
-            clip: false
-
-            StyledRect {
-                id: sliderFill
-                height: parent.height
-                radius: Theme.cornerRadius
-                topRightRadius: 0
-                bottomRightRadius: 0
-                width: {
-                    const range = slider.maximum - slider.minimum;
-                    const rawRatio = range === 0 ? 0 : (slider.value - slider.minimum) / range;
-                    const ratio = slider.centerMinimum ? (0.5 + rawRatio * 0.5) : rawRatio;
-                    const travel = sliderTrack.width - sliderHandle.width;
-                    const handleLeft = travel * ratio;
-                    const endPoint = handleLeft - 3;
-                    return Math.max(0, Math.min(sliderTrack.width, endPoint));
-                }
-                color: slider.enabled ? Theme.primary : Theme.withAlpha(Theme.onSurface, 0.12)
-            }
-
-            StyledRect {
-                id: sliderHandle
-
-                property bool active: sliderMouseArea.containsMouse || sliderMouseArea.pressed || slider.isDragging
-
-                width: 4
-                height: 20
-                radius: Theme.cornerRadius
-                x: {
-                    const range = slider.maximum - slider.minimum;
-                    const rawRatio = range === 0 ? 0 : (slider.value - slider.minimum) / range;
-                    const ratio = slider.centerMinimum ? (0.5 + rawRatio * 0.5) : rawRatio;
-                    const travel = sliderTrack.width - width;
-                    return Math.max(0, Math.min(travel, travel * ratio));
-                }
-                anchors.verticalCenter: parent.verticalCenter
-                color: slider.enabled ? Theme.primary : Theme.withAlpha(Theme.onSurface, 0.12)
-                border.width: 0
-                border.color: slider.thumbOutlineColor
-
-                StyledRect {
-                    anchors.fill: parent
-                    radius: Theme.cornerRadius
-                    color: Theme.onPrimary
-                    opacity: slider.enabled ? (sliderMouseArea.pressed ? 0.16 : (sliderMouseArea.containsMouse ? 0.08 : 0)) : 0
-                    visible: opacity > 0
-                }
-
-                StyledRect {
-                    anchors.centerIn: parent
-                    width: parent.width + 20
-                    height: parent.height + 20
-                    radius: width / 2
-                    color: "transparent"
-                    border.width: 2
-                    border.color: Theme.primary
-                    opacity: slider.enabled && slider.focus ? 0.3 : 0
-                    visible: opacity > 0
-                }
-
-                Rectangle {
-                    id: ripple
-                    anchors.centerIn: parent
-                    width: 0
-                    height: 0
-                    radius: width / 2
-                    color: Theme.onPrimary
-                    opacity: 0
-
-                    function start() {
-                        opacity = 0.16;
-                        width = 0;
-                        height = 0;
-                        rippleAnimation.start();
-                    }
-
-                    SequentialAnimation {
-                        id: rippleAnimation
-                        NumberAnimation {
-                            target: ripple
-                            properties: "width,height"
-                            to: 28
-                            duration: 180
-                        }
-                        NumberAnimation {
-                            target: ripple
-                            property: "opacity"
-                            to: 0
-                            duration: 150
-                        }
-                    }
-                }
-
-                TapHandler {
-                    acceptedButtons: Qt.LeftButton
-                    onPressedChanged: {
-                        if (pressed && slider.enabled) {
-                            ripple.start();
-                        }
-                    }
-                }
-
-                scale: active ? 1.05 : 1.0
-
-                Behavior on scale {
-                    NumberAnimation {
-                        duration: Theme.shortDuration
-                        easing.type: Theme.standardEasing
-                    }
-                }
-            }
-
-            Item {
-                id: sliderContainer
-
-                anchors.fill: parent
-
-                MouseArea {
-                    id: sliderMouseArea
-
-                    property bool isDragging: false
-
-                    anchors.fill: parent
-                    anchors.topMargin: -10
-                    anchors.bottomMargin: -10
-                    hoverEnabled: true
-                    cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
-                    enabled: slider.enabled
-                    preventStealing: true
-                    acceptedButtons: Qt.LeftButton
-                    onWheel: wheelEvent => {
-                        if (!slider.wheelEnabled) {
-                            wheelEvent.accepted = false;
-                            return;
-                        }
-                        let wheelStep = slider.step > 1 ? slider.step : Math.max(1, (maximum - minimum) / 100);
-                        let newValue = wheelEvent.angleDelta.y > 0 ? Math.min(maximum, value + wheelStep) : Math.max(minimum, value - wheelStep);
-                        if (slider.step > 1)
-                            newValue = Math.round(newValue / slider.step) * slider.step;
-                        newValue = Math.round(newValue);
-                        if (newValue !== value) {
-                            value = newValue;
-                            sliderValueChanged(newValue);
-                        }
-                        wheelEvent.accepted = true;
-                    }
-                    onPressed: mouse => {
-                        if (slider.enabled) {
-                            slider.isDragging = true;
-                            sliderMouseArea.isDragging = true;
-                            updateValueFromPosition(mouse.x);
-                        }
-                    }
-                    onReleased: {
-                        if (slider.enabled) {
-                            slider.isDragging = false;
-                            sliderMouseArea.isDragging = false;
-                            slider.sliderDragFinished(slider.value);
-                        }
-                    }
-                    onPositionChanged: mouse => {
-                        if (pressed && slider.isDragging && slider.enabled) {
-                            updateValueFromPosition(mouse.x);
-                        }
-                    }
-                    onClicked: mouse => {
-                        if (slider.enabled && !slider.isDragging) {
-                            updateValueFromPosition(mouse.x);
-                        }
-                    }
-                }
-            }
-
-            StyledRect {
-                id: valueTooltip
-
-                width: tooltipText.reservedWidth + Theme.spacingS * 2
-                height: tooltipText.contentHeight + Theme.spacingXS * 2
-                radius: Theme.cornerRadius
-                color: Theme.surfaceContainer
-                border.color: Theme.outline
-                border.width: 1
-                anchors.bottom: parent.top
-                anchors.bottomMargin: Theme.spacingM
-                x: Math.max(0, Math.min(parent.width - width, sliderHandle.x + sliderHandle.width / 2 - width / 2))
-                visible: slider.alwaysShowValue ? slider.showValue : ((sliderMouseArea.containsMouse && slider.showValue) || (slider.isDragging && slider.showValue))
-                opacity: visible ? 1 : 0
-
-                NumericText {
-                    id: tooltipText
-
-                    text: (slider.valueOverride >= 0 ? Math.round(slider.valueOverride) : slider.value) + slider.unit
-                    reserveText: {
-                        let widest = "";
-                        const samples = [slider.minimum, slider.maximum];
-                        if (slider.valueOverride >= 0)
-                            samples.push(slider.valueOverride);
-                        for (let i = 0; i < samples.length; i++) {
-                            const candidate = Math.round(samples[i]) + slider.unit;
-                            if (candidate.length > widest.length)
-                                widest = candidate;
-                        }
-                        return widest;
-                    }
-                    font.pixelSize: Theme.fontSizeSmall
-                    color: Theme.surfaceText
-                    font.weight: Font.Medium
-                    anchors.centerIn: parent
-                    font.hintingPreference: Font.PreferFullHinting
-                }
-
-                Behavior on opacity {
-                    NumberAnimation {
-                        duration: Theme.shortDuration
-                        easing.type: Theme.standardEasing
-                    }
-                }
-            }
-        }
-
-        DankIcon {
-            name: slider.rightIcon
-            size: Theme.iconSize
-            color: slider.enabled ? Theme.surfaceText : Theme.onSurface_38
-            anchors.verticalCenter: parent.verticalCenter
-            visible: slider.rightIcon.length > 0
-        }
-    }
-}
+DankCommon.DankSlider {}

quickshell/Widgets/DankSpinner.qml

@@ -1,108 +1,3 @@
-import QtQuick
-import QtQuick.Shapes
-import qs.Common
+import qs.DankCommon.Widgets as DankCommon
 
-Item {
-    id: root
-
-    property real size: 48
-    property real strokeWidth: Math.max(2, size / 12)
-    property color color: Theme.primary
-    property bool running: visible
-
-    implicitWidth: size
-    implicitHeight: size
-
-    onRunningChanged: {
-        if (running)
-            return;
-        arc.rotation = 0;
-        arc.startAngle = 0;
-        arc.sweepAngle = 16;
-    }
-
-    Item {
-        id: rotator
-
-        anchors.fill: parent
-
-        RotationAnimator on rotation {
-            from: 0
-            to: 360
-            duration: 1568
-            loops: Animation.Infinite
-            running: root.running
-        }
-
-        Shape {
-            id: arc
-
-            property real startAngle: 0
-            property real sweepAngle: 16
-
-            anchors.fill: parent
-            antialiasing: true
-            preferredRendererType: Shape.CurveRenderer
-
-            ShapePath {
-                strokeColor: root.color
-                strokeWidth: root.strokeWidth
-                fillColor: "transparent"
-                capStyle: ShapePath.RoundCap
-
-                PathAngleArc {
-                    centerX: arc.width / 2
-                    centerY: arc.height / 2
-                    radiusX: Math.max(1, (Math.min(arc.width, arc.height) - root.strokeWidth) / 2)
-                    radiusY: radiusX
-                    startAngle: arc.startAngle
-                    sweepAngle: arc.sweepAngle
-                }
-            }
-        }
-
-        SequentialAnimation {
-            running: root.running
-            loops: Animation.Infinite
-
-            NumberAnimation {
-                target: arc
-                property: "sweepAngle"
-                from: 16
-                to: 270
-                duration: 666
-                easing.type: Easing.BezierSpline
-                easing.bezierCurve: Anims.standard
-            }
-
-            ParallelAnimation {
-                NumberAnimation {
-                    target: arc
-                    property: "startAngle"
-                    from: 0
-                    to: 254
-                    duration: 666
-                    easing.type: Easing.BezierSpline
-                    easing.bezierCurve: Anims.standard
-                }
-
-                NumberAnimation {
-                    target: arc
-                    property: "sweepAngle"
-                    from: 270
-                    to: 16
-                    duration: 666
-                    easing.type: Easing.BezierSpline
-                    easing.bezierCurve: Anims.standard
-                }
-            }
-
-            ScriptAction {
-                script: {
-                    arc.rotation = (arc.rotation + 254) % 360;
-                    arc.startAngle = 0;
-                }
-            }
-        }
-    }
-}
+DankCommon.DankSpinner {}

quickshell/Widgets/DankTabBar.qml

@@ -1,270 +1,3 @@
-import QtQuick
-import qs.Common
-import qs.Widgets
+import qs.DankCommon.Widgets as DankCommon
 
-FocusScope {
-    id: tabBar
-
-    property alias model: tabRepeater.model
-    property int currentIndex: 0
-    property int spacing: Theme.spacingL
-    property int tabHeight: 56
-    property bool showIcons: true
-    property bool equalWidthTabs: true
-    property bool enableArrowNavigation: true
-    property Item nextFocusTarget: null
-    property Item previousFocusTarget: null
-
-    signal tabClicked(int index)
-    signal actionTriggered(int index)
-
-    focus: false
-    activeFocusOnTab: true
-    height: tabHeight
-
-    KeyNavigation.tab: nextFocusTarget
-    KeyNavigation.down: nextFocusTarget
-    KeyNavigation.backtab: previousFocusTarget
-    KeyNavigation.up: previousFocusTarget
-
-    Keys.onPressed: event => {
-        if (!tabBar.activeFocus || tabRepeater.count === 0)
-            return;
-        function findSelectableIndex(startIndex, step) {
-            let idx = startIndex;
-            for (let i = 0; i < tabRepeater.count; i++) {
-                idx = (idx + step + tabRepeater.count) % tabRepeater.count;
-                const item = tabRepeater.itemAt(idx);
-                if (item && !item.isAction)
-                    return idx;
-            }
-            return -1;
-        }
-
-        const goToIndex = nextIndex => {
-            if (nextIndex >= 0 && nextIndex !== tabBar.currentIndex) {
-                tabBar.currentIndex = nextIndex;
-                tabBar.tabClicked(nextIndex);
-            }
-        };
-
-        const resolveTarget = item => {
-            if (!item)
-                return null;
-
-            if (item.focusTarget)
-                return resolveTarget(item.focusTarget);
-
-            return item;
-        };
-
-        const focusItem = item => {
-            const target = resolveTarget(item);
-            if (!target)
-                return false;
-
-            if (target.requestFocus) {
-                Qt.callLater(() => target.requestFocus());
-                return true;
-            }
-
-            if (target.forceActiveFocus) {
-                Qt.callLater(() => target.forceActiveFocus());
-                return true;
-            }
-
-            return false;
-        };
-
-        if (event.key === Qt.Key_Right && tabBar.enableArrowNavigation) {
-            const baseIndex = (tabBar.currentIndex >= 0 && tabBar.currentIndex < tabRepeater.count) ? tabBar.currentIndex : -1;
-            const nextIndex = findSelectableIndex(baseIndex, 1);
-            if (nextIndex >= 0) {
-                goToIndex(nextIndex);
-                event.accepted = true;
-            }
-        } else if (event.key === Qt.Key_Left && tabBar.enableArrowNavigation) {
-            const baseIndex = (tabBar.currentIndex >= 0 && tabBar.currentIndex < tabRepeater.count) ? tabBar.currentIndex : 0;
-            const nextIndex = findSelectableIndex(baseIndex, -1);
-            if (nextIndex >= 0) {
-                goToIndex(nextIndex);
-                event.accepted = true;
-            }
-        } else if (event.key === Qt.Key_Tab && (event.modifiers & Qt.ShiftModifier)) {
-            if (focusItem(tabBar.previousFocusTarget)) {
-                event.accepted = true;
-            }
-        } else if (event.key === Qt.Key_Tab || event.key === Qt.Key_Down) {
-            if (focusItem(tabBar.nextFocusTarget)) {
-                event.accepted = true;
-            }
-        } else if (event.key === Qt.Key_Up) {
-            if (focusItem(tabBar.previousFocusTarget)) {
-                event.accepted = true;
-            }
-        }
-    }
-
-    Row {
-        id: tabRow
-        anchors.fill: parent
-        spacing: tabBar.spacing
-
-        Repeater {
-            id: tabRepeater
-
-            Item {
-                id: tabItem
-                property bool isAction: modelData && modelData.isAction === true
-                property bool isActive: !isAction && tabBar.currentIndex === index
-                property bool hasIcon: tabBar.showIcons && modelData && modelData.icon && modelData.icon.length > 0
-                property bool hasText: modelData && modelData.text && modelData.text.length > 0
-
-                width: tabBar.equalWidthTabs ? (tabBar.width - tabBar.spacing * Math.max(0, tabRepeater.count - 1)) / Math.max(1, tabRepeater.count) : Math.max(contentCol.implicitWidth + Theme.spacingXL, 64)
-                height: tabBar.tabHeight
-
-                Column {
-                    id: contentCol
-                    anchors.centerIn: parent
-                    spacing: Theme.spacingXS
-
-                    DankIcon {
-                        name: modelData.icon || ""
-                        anchors.horizontalCenter: parent.horizontalCenter
-                        size: Theme.iconSize
-                        color: tabItem.isActive ? Theme.primary : Theme.surfaceText
-                        visible: hasIcon
-                    }
-
-                    StyledText {
-                        text: modelData.text || ""
-                        anchors.horizontalCenter: parent.horizontalCenter
-                        font.pixelSize: Theme.fontSizeMedium
-                        color: tabItem.isActive ? Theme.primary : Theme.surfaceText
-                        font.weight: Font.Medium
-                        visible: hasText
-                    }
-                }
-
-                Rectangle {
-                    id: stateLayer
-                    anchors.fill: parent
-                    color: Theme.surfaceTint
-                    opacity: tabArea.pressed ? 0.12 : (tabArea.containsMouse ? 0.08 : 0)
-                    visible: opacity > 0
-                    radius: Theme.cornerRadius
-                    Behavior on opacity {
-                        NumberAnimation {
-                            duration: Theme.shortDuration
-                            easing.type: Theme.standardEasing
-                        }
-                    }
-                }
-
-                DankRipple {
-                    id: tabRipple
-                    cornerRadius: Theme.cornerRadius
-                }
-
-                MouseArea {
-                    id: tabArea
-                    anchors.fill: parent
-                    hoverEnabled: true
-                    cursorShape: Qt.PointingHandCursor
-                    onPressed: mouse => tabRipple.trigger(mouse.x, mouse.y)
-                    onClicked: {
-                        if (tabItem.isAction) {
-                            tabBar.actionTriggered(index);
-                        } else {
-                            tabBar.tabClicked(index);
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    Rectangle {
-        id: indicator
-        y: parent.height + 7
-        height: 3
-        width: 60
-        topLeftRadius: Theme.cornerRadius
-        topRightRadius: Theme.cornerRadius
-        bottomLeftRadius: 0
-        bottomRightRadius: 0
-        color: Theme.primary
-        visible: false
-
-        property bool animationEnabled: false
-        property bool initialSetupComplete: false
-
-        Behavior on x {
-            enabled: indicator.animationEnabled
-            NumberAnimation {
-                duration: Theme.mediumDuration
-                easing.type: Theme.standardEasing
-            }
-        }
-
-        Behavior on width {
-            enabled: indicator.animationEnabled
-            NumberAnimation {
-                duration: Theme.mediumDuration
-                easing.type: Theme.standardEasing
-            }
-        }
-    }
-
-    Rectangle {
-        width: parent.width
-        height: 1
-        y: parent.height + 10
-        color: Theme.outlineStrong
-    }
-
-    function updateIndicator() {
-        if (tabRepeater.count === 0 || currentIndex < 0 || currentIndex >= tabRepeater.count) {
-            indicator.visible = false;
-            indicator.initialSetupComplete = false;
-            return;
-        }
-
-        const item = tabRepeater.itemAt(currentIndex);
-        if (!item || item.isAction) {
-            return;
-        }
-
-        const tabPos = item.mapToItem(tabBar, 0, 0);
-        const tabCenterX = tabPos.x + item.width / 2;
-        const indicatorWidth = 60;
-
-        if (tabPos.x < 10 && currentIndex > 0) {
-            Qt.callLater(updateIndicator);
-            return;
-        }
-
-        if (!indicator.initialSetupComplete) {
-            indicator.animationEnabled = false;
-            indicator.width = indicatorWidth;
-            indicator.x = tabCenterX - indicatorWidth / 2;
-            indicator.visible = true;
-            indicator.initialSetupComplete = true;
-            indicator.animationEnabled = true;
-        } else {
-            indicator.width = indicatorWidth;
-            indicator.x = tabCenterX - indicatorWidth / 2;
-            indicator.visible = true;
-        }
-    }
-
-    function snapIndicator() {
-        indicator.initialSetupComplete = false;
-        updateIndicator();
-    }
-
-    onCurrentIndexChanged: {
-        Qt.callLater(updateIndicator);
-    }
-    onWidthChanged: Qt.callLater(updateIndicator)
-}
+DankCommon.DankTabBar {}

quickshell/Widgets/DankTextCursor.qml

@@ -1,31 +1,3 @@
-import QtQuick
-import qs.Common
+import qs.DankCommon.Widgets as DankCommon
 
-Rectangle {
-    id: root
-
-    property bool shown: true
-    property bool blinkOn: true
-
-    readonly property int flashTime: Qt.styleHints.cursorFlashTime
-
-    function resetBlink() {
-        blinkOn = true;
-        blinkTimer.restart();
-    }
-
-    width: 2
-    radius: 1
-    color: Theme.primary
-    visible: shown && blinkOn
-
-    onShownChanged: resetBlink()
-
-    Timer {
-        id: blinkTimer
-        running: root.shown && root.flashTime > 1
-        interval: root.flashTime / 2
-        repeat: true
-        onTriggered: root.blinkOn = !root.blinkOn
-    }
-}
+DankCommon.DankTextCursor {}

quickshell/Widgets/DankTextField.qml

@@ -1,290 +1,3 @@
-import QtQuick
-import qs.Common
-import qs.Widgets
+import qs.DankCommon.Widgets as DankCommon
 
-StyledRect {
-    id: root
-
-    LayoutMirroring.enabled: I18n.isRtl
-    LayoutMirroring.childrenInherit: true
-
-    KeyNavigation.tab: keyNavigationTab
-    KeyNavigation.backtab: keyNavigationBacktab
-
-    function checkParentDisablesTransparency() {
-        let p = parent;
-        while (p) {
-            if (p.disablePopupTransparency === true)
-                return true;
-            p = p.parent;
-        }
-        return false;
-    }
-
-    property alias text: textInput.text
-    property alias cursorPosition: textInput.cursorPosition
-    property string placeholderText: ""
-    property string labelText: ""
-    property alias font: textInput.font
-    property alias textColor: textInput.color
-    property alias echoMode: textInput.echoMode
-    property alias validator: textInput.validator
-    property alias maximumLength: textInput.maximumLength
-    property string leftIconName: ""
-    property int leftIconSize: Theme.iconSize
-    property color leftIconColor: Theme.surfaceVariantText
-    property color leftIconFocusedColor: Theme.primary
-    property bool showClearButton: false
-    property bool showPasswordToggle: false
-    property real rightAccessoryWidth: 0
-    property bool passwordVisible: false
-    property bool usePopupTransparency: !checkParentDisablesTransparency()
-    property color backgroundColor: usePopupTransparency ? Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency) : Theme.surfaceContainerHigh
-    property color focusedBorderColor: Theme.primary
-    property color normalBorderColor: Theme.outlineMedium
-    property color placeholderColor: Theme.outlineButton
-    property real borderWidth: 1
-    property real focusedBorderWidth: 2
-    property real cornerRadius: Theme.cornerRadius
-    readonly property real leftPadding: Theme.spacingM + (leftIconName ? leftIconSize + Theme.spacingM : 0)
-    readonly property real rightPadding: {
-        let p = Theme.spacingS + rightAccessoryWidth;
-        if (showPasswordToggle)
-            p += 20 + Theme.spacingXS;
-        if (showClearButton && text.length > 0)
-            p += 20 + Theme.spacingXS;
-        return p;
-    }
-    property real topPadding: Theme.spacingS
-    property real bottomPadding: Theme.spacingS
-    property bool ignoreLeftRightKeys: false
-    property bool ignoreUpDownKeys: false
-    property bool ignoreTabKeys: false
-    property var keyForwardTargets: []
-    property Item keyNavigationTab: null
-    property Item keyNavigationBacktab: null
-
-    signal textEdited
-    signal editingFinished
-    signal accepted
-    signal focusStateChanged(bool hasFocus)
-
-    function getActiveFocus() {
-        return textInput.activeFocus;
-    }
-    function setFocus(value) {
-        textInput.focus = value;
-    }
-    function forceActiveFocus() {
-        textInput.forceActiveFocus();
-    }
-    function selectAll() {
-        textInput.selectAll();
-    }
-    function clear() {
-        textInput.clear();
-    }
-    function insertText(str) {
-        textInput.insert(textInput.cursorPosition, str);
-    }
-
-    readonly property real labelBandHeight: Math.round(Theme.fontSizeSmall * 1.4) + Theme.spacingXS * 2
-
-    width: 200
-    height: labelText !== "" ? Math.round(Theme.fontSizeMedium * 3) + labelBandHeight : Math.round(Theme.fontSizeMedium * 3)
-    radius: cornerRadius
-    color: backgroundColor
-    border.color: textInput.activeFocus ? focusedBorderColor : normalBorderColor
-    border.width: textInput.activeFocus ? focusedBorderWidth : borderWidth
-
-    DankIcon {
-        id: leftIcon
-
-        anchors.left: parent.left
-        anchors.leftMargin: Theme.spacingM
-        anchors.verticalCenter: textInput.verticalCenter
-        name: leftIconName
-        size: leftIconSize
-        color: textInput.activeFocus ? leftIconFocusedColor : leftIconColor
-        visible: leftIconName !== ""
-    }
-
-    StyledText {
-        id: fieldLabel
-
-        anchors.left: textInput.left
-        anchors.right: textInput.right
-        anchors.top: parent.top
-        anchors.topMargin: Theme.spacingXS
-        text: root.labelText
-        visible: root.labelText !== ""
-        font.pixelSize: Theme.fontSizeSmall
-        color: textInput.activeFocus ? Theme.primary : Theme.surfaceVariantText
-        elide: Text.ElideRight
-    }
-
-    TextInput {
-        id: textInput
-
-        anchors.left: leftIcon.visible ? leftIcon.right : parent.left
-        anchors.leftMargin: Theme.spacingM
-        anchors.right: rightButtonsRow.left
-        anchors.rightMargin: rightButtonsRow.visible ? Theme.spacingS : Theme.spacingM
-        anchors.top: parent.top
-        anchors.topMargin: root.labelText !== "" ? root.labelBandHeight : root.topPadding
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: root.bottomPadding
-        font.pixelSize: Theme.fontSizeMedium
-        font.family: Theme.fontFamily
-        color: Theme.surfaceText
-        selectionColor: Theme.primaryContainer
-        selectedTextColor: Theme.primary
-        horizontalAlignment: TextInput.AlignLeft
-        verticalAlignment: TextInput.AlignVCenter
-        selectByMouse: !root.ignoreLeftRightKeys
-        clip: true
-        activeFocusOnTab: true
-        KeyNavigation.tab: root.keyNavigationTab
-        KeyNavigation.backtab: root.keyNavigationBacktab
-        onTextChanged: root.textEdited()
-        onEditingFinished: root.editingFinished()
-        onAccepted: root.accepted()
-        onActiveFocusChanged: root.focusStateChanged(activeFocus)
-        Keys.forwardTo: root.keyForwardTargets
-        Keys.onLeftPressed: event => {
-            if (root.ignoreLeftRightKeys) {
-                event.accepted = true;
-            } else {
-                // Allow normal TextInput cursor movement
-                event.accepted = false;
-            }
-        }
-        Keys.onRightPressed: event => {
-            if (root.ignoreLeftRightKeys) {
-                event.accepted = true;
-            } else {
-                event.accepted = false;
-            }
-        }
-        Keys.onPressed: event => {
-            if (root.ignoreTabKeys && (event.key === Qt.Key_Tab || event.key === Qt.Key_Backtab)) {
-                event.accepted = false;
-                for (var i = 0; i < root.keyForwardTargets.length; i++) {
-                    if (root.keyForwardTargets[i])
-                        root.keyForwardTargets[i].Keys.pressed(event);
-                }
-                return;
-            }
-            if (root.ignoreUpDownKeys && (event.key === Qt.Key_Up || event.key === Qt.Key_Down)) {
-                event.accepted = false;
-                for (var i = 0; i < root.keyForwardTargets.length; i++) {
-                    if (root.keyForwardTargets[i])
-                        root.keyForwardTargets[i].Keys.pressed(event);
-                }
-                return;
-            }
-            if ((event.modifiers & (Qt.ControlModifier | Qt.AltModifier | Qt.MetaModifier)) && root.keyForwardTargets.length > 0) {
-                for (var i = 0; i < root.keyForwardTargets.length; i++) {
-                    if (root.keyForwardTargets[i])
-                        root.keyForwardTargets[i].Keys.pressed(event);
-                }
-            }
-        }
-
-        MouseArea {
-            anchors.fill: parent
-            hoverEnabled: true
-            cursorShape: Qt.IBeamCursor
-            acceptedButtons: Qt.NoButton
-        }
-    }
-
-    Row {
-        id: rightButtonsRow
-
-        anchors.right: parent.right
-        anchors.rightMargin: Theme.spacingS + root.rightAccessoryWidth
-        anchors.verticalCenter: parent.verticalCenter
-        spacing: Theme.spacingXS
-        visible: showPasswordToggle || (showClearButton && text.length > 0)
-
-        StyledRect {
-            id: passwordToggleButton
-
-            width: 20
-            height: 20
-            radius: 10
-            color: passwordToggleArea.containsMouse ? Theme.outlineStrong : Theme.withAlpha(Theme.outlineStrong, 0)
-            visible: showPasswordToggle
-
-            DankIcon {
-                anchors.centerIn: parent
-                name: passwordVisible ? "visibility_off" : "visibility"
-                size: 14
-                color: passwordToggleArea.containsMouse ? Theme.outline : Theme.surfaceVariantText
-            }
-
-            MouseArea {
-                id: passwordToggleArea
-
-                anchors.fill: parent
-                hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor
-                onClicked: passwordVisible = !passwordVisible
-            }
-        }
-
-        StyledRect {
-            id: clearButton
-
-            width: 20
-            height: 20
-            radius: 10
-            color: clearArea.containsMouse ? Theme.outlineStrong : Theme.withAlpha(Theme.outlineStrong, 0)
-            visible: showClearButton && text.length > 0
-
-            DankIcon {
-                anchors.centerIn: parent
-                name: "close"
-                size: 14
-                color: clearArea.containsMouse ? Theme.outline : Theme.surfaceVariantText
-            }
-
-            MouseArea {
-                id: clearArea
-
-                anchors.fill: parent
-                hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor
-                onClicked: textInput.text = ""
-            }
-        }
-    }
-
-    StyledText {
-        id: placeholderLabel
-
-        anchors.fill: textInput
-        text: root.placeholderText
-        font: textInput.font
-        color: placeholderColor
-        horizontalAlignment: Text.AlignLeft
-        verticalAlignment: textInput.verticalAlignment
-        visible: textInput.text.length === 0 && !textInput.activeFocus
-        elide: I18n.isRtl ? Text.ElideLeft : Text.ElideRight
-    }
-
-    Behavior on border.color {
-        ColorAnimation {
-            duration: Theme.shortDuration
-            easing.type: Theme.standardEasing
-        }
-    }
-
-    Behavior on border.width {
-        NumberAnimation {
-            duration: Theme.shortDuration
-            easing.type: Theme.standardEasing
-        }
-    }
-}
+DankCommon.DankTextField {}

quickshell/Widgets/DankToggle.qml

@@ -1,194 +1,3 @@
-import QtQuick
-import qs.Common
-import qs.Widgets
+import qs.DankCommon.Widgets as DankCommon
 
-Item {
-    id: toggle
-
-    LayoutMirroring.enabled: I18n.isRtl
-    LayoutMirroring.childrenInherit: true
-
-    // API
-    property bool checked: false
-    property bool toggling: false
-    property string text: ""
-    property string description: ""
-    property color descriptionColor: Theme.surfaceVariantText
-    property bool hideText: false
-
-    signal clicked
-    signal toggled(bool checked)
-    signal toggleCompleted(bool checked)
-
-    readonly property bool showText: text && !hideText
-
-    readonly property int trackWidth: 52
-    readonly property int trackHeight: 30
-    readonly property int insetCircle: 24
-
-    width: showText ? parent.width : trackWidth
-    height: showText ? Math.max(trackHeight, textColumn.implicitHeight + Theme.spacingM * 2) : trackHeight
-
-    function handleClick() {
-        if (!enabled)
-            return;
-        clicked();
-        toggled(!checked);
-    }
-
-    StyledRect {
-        id: background
-        anchors.fill: parent
-        radius: showText ? Theme.cornerRadius : 0
-        color: "transparent"
-        visible: showText
-
-        StateLayer {
-            visible: showText
-            disabled: !toggle.enabled
-            stateColor: Theme.primary
-            cornerRadius: parent.radius
-            onClicked: toggle.handleClick()
-        }
-    }
-
-    Row {
-        anchors.left: parent.left
-        anchors.right: toggleTrack.left
-        anchors.verticalCenter: parent.verticalCenter
-        anchors.leftMargin: Theme.spacingM
-        anchors.rightMargin: Theme.spacingM
-        spacing: Theme.spacingXS
-        visible: showText
-
-        Column {
-            id: textColumn
-            width: parent.width
-            anchors.verticalCenter: parent.verticalCenter
-            spacing: Theme.spacingXS
-
-            StyledText {
-                text: toggle.text
-                font.pixelSize: Appearance.fontSize.normal
-                font.weight: Font.Medium
-                opacity: toggle.enabled ? 1 : 0.4
-                width: parent.width
-                horizontalAlignment: Text.AlignLeft
-            }
-
-            StyledText {
-                text: toggle.description
-                font.pixelSize: Appearance.fontSize.small
-                color: toggle.descriptionColor
-                wrapMode: Text.WordWrap
-                width: parent.width
-                visible: toggle.description.length > 0
-                horizontalAlignment: Text.AlignLeft
-            }
-        }
-    }
-
-    StyledRect {
-        id: toggleTrack
-
-        width: showText ? trackWidth : Math.max(parent.width, trackWidth)
-        height: showText ? trackHeight : Math.max(parent.height, trackHeight)
-        anchors.right: parent.right
-        anchors.rightMargin: showText ? Theme.spacingM : 0
-        anchors.verticalCenter: parent.verticalCenter
-        radius: Theme.cornerRadius
-
-        // Distinguish disabled checked vs unchecked so unchecked disabled switches don't look enabled
-        color: !toggle.enabled ? (toggle.checked ? Qt.alpha(Theme.surfaceText, 0.12) : Theme.withAlpha(Qt.alpha(Theme.surfaceText, 0.12), 0)) : (toggle.checked ? Theme.primary : Theme.surfaceVariantAlpha)
-        opacity: toggle.toggling ? 0.6 : 1
-
-        // M3 disabled unchecked border: on surface 12% opacity
-        border.color: toggle.checked ? Theme.withAlpha(Theme.outline, 0) : (!toggle.enabled ? Qt.alpha(Theme.surfaceText, 0.12) : Theme.outline)
-
-        readonly property int pad: Math.round((height - thumb.width) / 2)
-        readonly property int edgeLeft: pad
-        readonly property int edgeRight: width - thumb.width - pad
-
-        StyledRect {
-            id: thumb
-
-            width: toggle.checked ? insetCircle : insetCircle - 4
-            height: toggle.checked ? insetCircle : insetCircle - 4
-            radius: Theme.cornerRadius
-            anchors.verticalCenter: parent.verticalCenter
-
-            // M3 disabled thumb:
-            // checked = solid surface | unchecked = outlined off-state thumb
-            color: !toggle.enabled ? (toggle.checked ? Theme.surface : Theme.withAlpha(Theme.surface, 0)) : (toggle.checked ? Theme.surface : Theme.outline)
-            border.color: !toggle.enabled ? (toggle.checked ? Theme.withAlpha(Qt.alpha(Theme.surfaceText, 0.38), 0) : Qt.alpha(Theme.surfaceText, 0.38)) : Theme.outline
-            border.width: (toggle.checked && toggle.enabled) ? 1 : 2
-
-            x: toggle.checked ? toggleTrack.edgeRight : toggleTrack.edgeLeft
-
-            Behavior on x {
-                SequentialAnimation {
-                    NumberAnimation {
-                        duration: Appearance.anim.durations.normal
-                        easing.type: Easing.BezierSpline
-                        easing.bezierCurve: Appearance.anim.curves.emphasizedDecel
-                    }
-                    ScriptAction {
-                        script: {
-                            toggle.toggleCompleted(toggle.checked);
-                        }
-                    }
-                }
-            }
-
-            Behavior on color {
-                ColorAnimation {
-                    duration: Appearance.anim.durations.normal
-                    easing.type: Easing.BezierSpline
-                    easing.bezierCurve: Appearance.anim.curves.emphasized
-                }
-            }
-
-            Behavior on border.width {
-                NumberAnimation {
-                    duration: Appearance.anim.durations.normal
-                    easing.type: Easing.BezierSpline
-                    easing.bezierCurve: Appearance.anim.curves.emphasized
-                }
-            }
-
-            DankIcon {
-                id: checkIcon
-                anchors.centerIn: parent
-                name: "check"
-                size: 20
-                // M3 disabled icon: on surface 38%
-                color: toggle.enabled ? Theme.surfaceText : Qt.alpha(Theme.surfaceText, 0.38)
-                filled: true
-                opacity: (toggle.checked && toggle.enabled) ? 1 : 0
-                scale: (toggle.checked && toggle.enabled) ? 1 : 0.6
-
-                Behavior on opacity {
-                    NumberAnimation {
-                        duration: Anims.durShort
-                        easing.type: Easing.BezierSpline
-                        easing.bezierCurve: Anims.emphasized
-                    }
-                }
-                Behavior on scale {
-                    NumberAnimation {
-                        duration: Anims.durShort
-                        easing.type: Easing.BezierSpline
-                        easing.bezierCurve: Anims.emphasized
-                    }
-                }
-            }
-        }
-
-        StateLayer {
-            disabled: !toggle.enabled
-            stateColor: Theme.primary
-            cornerRadius: parent.radius
-            onClicked: toggle.handleClick()
-        }
-    }
-}
+DankCommon.DankToggle {}

quickshell/Widgets/DankTooltipV2.qml

@@ -1,154 +1,3 @@
-import QtQuick
-import QtQuick.Controls
-import qs.Common
+import qs.DankCommon.Widgets as DankCommon
 
-Item {
-    id: root
-
-    property string text: ""
-
-    function show(text, item, offsetX, offsetY, preferredSide) {
-        if (!item)
-            return;
-
-        let windowContentItem = item.Window?.window?.contentItem;
-        if (!windowContentItem) {
-            let current = item;
-            while (current) {
-                if (current.Window?.window?.contentItem) {
-                    windowContentItem = current.Window.window.contentItem;
-                    break;
-                }
-                current = current.parent;
-            }
-        }
-        if (!windowContentItem)
-            return;
-
-        tooltip.parent = windowContentItem;
-        tooltip.text = text;
-
-        const itemPos = item.mapToItem(windowContentItem, 0, 0);
-        const parentWidth = windowContentItem.width;
-        const parentHeight = windowContentItem.height;
-        const tooltipWidth = tooltip.implicitWidth;
-        const tooltipHeight = tooltip.implicitHeight;
-
-        const side = preferredSide || _determineBestSide(itemPos, item, parentWidth, parentHeight, tooltipWidth, tooltipHeight);
-
-        let targetX = 0;
-        let targetY = 0;
-
-        switch (side) {
-        case "left":
-            targetX = itemPos.x - tooltipWidth - 8;
-            targetY = itemPos.y + (item.height - tooltipHeight) / 2;
-            break;
-        case "right":
-            targetX = itemPos.x + item.width + 8;
-            targetY = itemPos.y + (item.height - tooltipHeight) / 2;
-            break;
-        case "top":
-            targetX = itemPos.x + (item.width - tooltipWidth) / 2;
-            targetY = itemPos.y - tooltipHeight - 8;
-            break;
-        case "bottom":
-        default:
-            targetX = itemPos.x + (item.width - tooltipWidth) / 2;
-            targetY = itemPos.y + item.height + 8;
-            break;
-        }
-
-        tooltip.x = Math.max(4, Math.min(parentWidth - tooltipWidth - 4, targetX + (offsetX || 0)));
-        tooltip.y = Math.max(4, Math.min(parentHeight - tooltipHeight - 4, targetY + (offsetY || 0)));
-
-        tooltip.open();
-    }
-
-    function _determineBestSide(itemPos, item, parentWidth, parentHeight, tooltipWidth, tooltipHeight) {
-        const itemCenterX = itemPos.x + item.width / 2;
-        const itemCenterY = itemPos.y + item.height / 2;
-
-        const spaceLeft = itemPos.x;
-        const spaceRight = parentWidth - (itemPos.x + item.width);
-        const spaceTop = itemPos.y;
-        const spaceBottom = parentHeight - (itemPos.y + item.height);
-
-        if (spaceRight >= tooltipWidth + 16) {
-            return "right";
-        }
-        if (spaceLeft >= tooltipWidth + 16) {
-            return "left";
-        }
-        if (spaceBottom >= tooltipHeight + 16) {
-            return "bottom";
-        }
-        if (spaceTop >= tooltipHeight + 16) {
-            return "top";
-        }
-
-        if (itemCenterX > parentWidth / 2) {
-            return "left";
-        }
-        return "right";
-    }
-
-    function hide() {
-        tooltip.close();
-    }
-
-    Popup {
-        id: tooltip
-
-        property string text: ""
-
-        leftPadding: Theme.spacingM
-        rightPadding: Theme.spacingM
-        topPadding: Theme.spacingS
-        bottomPadding: Theme.spacingS
-        closePolicy: Popup.NoAutoClose
-        modal: false
-        dim: false
-
-        background: Rectangle {
-            color: Theme.surfaceContainerHigh
-            radius: Theme.cornerRadius
-            border.width: 1
-            border.color: Theme.outlineMedium
-        }
-
-        contentItem: Text {
-            id: textContent
-
-            width: Math.min(implicitWidth, 500)
-            text: tooltip.text
-            font.pixelSize: Theme.fontSizeSmall
-            color: Theme.surfaceText
-            wrapMode: Text.NoWrap
-            maximumLineCount: 1
-            elide: Text.ElideRight
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
-        }
-
-        enter: Transition {
-            NumberAnimation {
-                property: "opacity"
-                from: 0
-                to: 1
-                duration: Theme.shortDuration
-                easing.type: Theme.standardEasing
-            }
-        }
-
-        exit: Transition {
-            NumberAnimation {
-                property: "opacity"
-                from: 1
-                to: 0
-                duration: Theme.shorterDuration
-                easing.type: Theme.standardEasing
-            }
-        }
-    }
-}
+DankCommon.DankTooltipV2 {}

quickshell/Widgets/FloatingWindowControls.qml

@@ -1,115 +1,3 @@
-import QtQuick
+import qs.DankCommon.Widgets as DankCommon
 
-Item {
-    id: root
-
-    readonly property real edgeSize: 8
-    required property var targetWindow
-    readonly property bool canMaximize: targetWindow.minimumSize.width !== targetWindow.maximumSize.width || targetWindow.minimumSize.height !== targetWindow.maximumSize.height
-
-    anchors.fill: parent
-
-    function tryStartMove() {
-        targetWindow.startSystemMove();
-    }
-
-    function tryStartResize(edges) {
-        if (!canMaximize)
-            return;
-        targetWindow.startSystemResize(edges);
-    }
-
-    function tryToggleMaximize() {
-        if (!canMaximize)
-            return;
-        targetWindow.maximized = !targetWindow.maximized;
-    }
-
-    MouseArea {
-        visible: root.canMaximize
-        height: root.edgeSize
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.top: parent.top
-        anchors.leftMargin: 6
-        anchors.rightMargin: 6
-        cursorShape: Qt.SizeVerCursor
-        onPressed: root.tryStartResize(Qt.TopEdge)
-    }
-
-    MouseArea {
-        visible: root.canMaximize
-        width: root.edgeSize
-        anchors.left: parent.left
-        anchors.top: parent.top
-        anchors.bottom: parent.bottom
-        anchors.topMargin: 6
-        anchors.bottomMargin: 6
-        cursorShape: Qt.SizeHorCursor
-        onPressed: root.tryStartResize(Qt.LeftEdge)
-    }
-
-    MouseArea {
-        visible: root.canMaximize
-        width: root.edgeSize
-        anchors.right: parent.right
-        anchors.top: parent.top
-        anchors.bottom: parent.bottom
-        anchors.topMargin: 6
-        anchors.bottomMargin: 6
-        cursorShape: Qt.SizeHorCursor
-        onPressed: root.tryStartResize(Qt.RightEdge)
-    }
-
-    MouseArea {
-        visible: root.canMaximize
-        width: root.edgeSize
-        height: root.edgeSize
-        anchors.left: parent.left
-        anchors.top: parent.top
-        cursorShape: Qt.SizeFDiagCursor
-        onPressed: root.tryStartResize(Qt.LeftEdge | Qt.TopEdge)
-    }
-
-    MouseArea {
-        visible: root.canMaximize
-        width: root.edgeSize
-        height: root.edgeSize
-        anchors.right: parent.right
-        anchors.top: parent.top
-        cursorShape: Qt.SizeBDiagCursor
-        onPressed: root.tryStartResize(Qt.RightEdge | Qt.TopEdge)
-    }
-
-    MouseArea {
-        visible: root.canMaximize
-        height: root.edgeSize
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.bottom: parent.bottom
-        anchors.leftMargin: 6
-        anchors.rightMargin: 6
-        cursorShape: Qt.SizeVerCursor
-        onPressed: root.tryStartResize(Qt.BottomEdge)
-    }
-
-    MouseArea {
-        visible: root.canMaximize
-        width: root.edgeSize
-        height: root.edgeSize
-        anchors.left: parent.left
-        anchors.bottom: parent.bottom
-        cursorShape: Qt.SizeBDiagCursor
-        onPressed: root.tryStartResize(Qt.LeftEdge | Qt.BottomEdge)
-    }
-
-    MouseArea {
-        visible: root.canMaximize
-        width: root.edgeSize
-        height: root.edgeSize
-        anchors.right: parent.right
-        anchors.bottom: parent.bottom
-        cursorShape: Qt.SizeFDiagCursor
-        onPressed: root.tryStartResize(Qt.RightEdge | Qt.BottomEdge)
-    }
-}
+DankCommon.FloatingWindowControls {}

quickshell/Widgets/M3WaveProgress.qml

@@ -1,64 +1,3 @@
-import QtQuick
-import qs.Common
+import qs.DankCommon.Widgets as DankCommon
 
-// Wave progress indicator: track, animated fill, seek preview and playhead are
-// all drawn in a single fragment shader (Shaders/frag/wave_progress.frag).
-Item {
-    id: root
-
-    property real value: 0
-    property real actualValue: value
-    property bool showActualPlaybackState: false
-    property real lineWidth: 2
-    property real wavelength: 20
-    property real amp: 1.6
-    property real phase: 0.0
-    property bool isPlaying: false
-    property real currentAmp: 1.6
-    property color trackColor: Theme.withAlpha(Theme.surfaceVariant, 0.40)
-    property color fillColor: Theme.primary
-    property color playheadColor: Theme.primary
-    property color actualProgressColor: Theme.onSurface_38
-
-    Behavior on currentAmp {
-        NumberAnimation {
-            duration: 300
-            easing.type: Easing.OutCubic
-        }
-    }
-    onIsPlayingChanged: currentAmp = isPlaying ? amp : 0
-    Component.onCompleted: currentAmp = isPlaying ? amp : 0
-
-    ShaderEffect {
-        anchors.fill: parent
-        blending: true
-
-        readonly property real widthPx: width
-        readonly property real heightPx: height
-        readonly property real value: root.value
-        readonly property real actualValue: root.actualValue
-        readonly property real phase: root.phase
-        readonly property real ampPx: root.currentAmp
-        readonly property real wavelengthPx: root.wavelength
-        readonly property real lineWidthPx: root.lineWidth
-        readonly property real showActual: root.showActualPlaybackState ? 1.0 : 0.0
-        readonly property color fillColor: root.fillColor
-        readonly property color trackColor: root.trackColor
-        readonly property color playheadColor: root.playheadColor
-        readonly property color actualColor: root.actualProgressColor
-
-        fragmentShader: Qt.resolvedUrl("../Shaders/qsb/wave_progress.frag.qsb")
-    }
-
-    signal frameTicked
-
-    FrameAnimation {
-        running: root.visible && (root.isPlaying || root.currentAmp > 0) && (root.Window.window?.visible ?? false)
-        onTriggered: {
-            if (!root.isPlaying)
-                return;
-            root.phase = (root.phase + 0.03 * frameTime * 60) % 6.28318530718;
-            root.frameTicked();
-        }
-    }
-}
+DankCommon.M3WaveProgress {}

quickshell/Widgets/NumericText.qml

@@ -1,22 +1,3 @@
-import QtQuick
-import qs.Common
+import qs.DankCommon.Widgets as DankCommon
 
-StyledText {
-    id: root
-
-    property string reserveText: ""
-    readonly property real reservedWidth: reserveText !== "" ? Math.max(contentWidth, reserveMetrics.width) : contentWidth
-
-    isMonospace: true
-    wrapMode: Text.NoWrap
-
-    StyledTextMetrics {
-        id: reserveMetrics
-        isMonospace: root.isMonospace
-        font.pixelSize: root.font.pixelSize
-        font.family: root.font.family
-        font.weight: root.font.weight
-        font.hintingPreference: root.font.hintingPreference
-        text: root.reserveText
-    }
-}
+DankCommon.NumericText {}

quickshell/Widgets/ScrollConstants.js

@@ -1,14 +0,0 @@
-.pragma library
-
-const friction = 0.96;
-const touchpadSpeed = 3.5;
-const mouseWheelSpeed = 60;
-const momentumRetention = 0.92;
-const momentumDeltaFactor = 0.15;
-const maxMomentumVelocity = 2500;
-const minMomentumVelocity = 50;
-const momentumStopThreshold = 5;
-const velocitySampleWindowMs = 100;
-const momentumTimeThreshold = 50;
-const flickDeceleration = 1500;
-const maximumFlickVelocity = 2000;

quickshell/Widgets/StateLayer.qml

@@ -1,74 +1,3 @@
-import QtQuick
-import qs.Common
+import qs.DankCommon.Widgets as DankCommon
 
-MouseArea {
-    id: root
-
-    property bool disabled: false
-    property color stateColor: Theme.surfaceText
-    property real cornerRadius: parent && parent.radius !== undefined ? parent.radius : Theme.cornerRadius
-    property var tooltipText: null
-    property string tooltipSide: "bottom"
-    property bool enableRipple: typeof SettingsData !== "undefined" ? (SettingsData.enableRippleEffects ?? true) : true
-
-    readonly property real stateOpacity: disabled ? 0 : pressed ? 0.12 : containsMouse ? 0.08 : 0
-
-    anchors.fill: parent
-    cursorShape: disabled ? undefined : Qt.PointingHandCursor
-    hoverEnabled: true
-
-    onPressed: mouse => {
-        if (!disabled && enableRipple) {
-            rippleLayer.trigger(mouse.x, mouse.y);
-        }
-    }
-
-    Rectangle {
-        id: stateRect
-        anchors.fill: parent
-        radius: root.cornerRadius
-        color: Theme.withAlpha(stateColor, stateOpacity)
-
-        Behavior on color {
-            enabled: Theme.currentAnimationSpeed !== SettingsData.AnimationSpeed.None
-            DankColorAnim {
-                duration: Theme.shorterDuration
-                easing.bezierCurve: Theme.expressiveCurves.standardDecel
-            }
-        }
-    }
-
-    DankRipple {
-        id: rippleLayer
-        anchors.fill: parent
-        rippleColor: root.stateColor
-        cornerRadius: root.cornerRadius
-        enableRipple: root.enableRipple
-    }
-
-    Timer {
-        id: hoverDelay
-        interval: 400
-        repeat: false
-        onTriggered: {
-            tooltip.show(root.tooltipText, root, 0, 0, root.tooltipSide);
-        }
-    }
-
-    onEntered: {
-        if (!tooltipText)
-            return;
-        hoverDelay.restart();
-    }
-
-    onExited: {
-        if (!tooltipText)
-            return;
-        hoverDelay.stop();
-        tooltip.hide();
-    }
-
-    DankTooltipV2 {
-        id: tooltip
-    }
-}
+DankCommon.StateLayer {}

quickshell/Widgets/StyledRect.qml

@@ -1,29 +1,3 @@
-import QtQuick
-import qs.Common
+import qs.DankCommon.Widgets as DankCommon
 
-Rectangle {
-    color: "transparent"
-    radius: Appearance.rounding.normal
-
-    readonly property var standardAnimation: {
-        "duration": Appearance.anim.durations.normal,
-        "easing.type": Easing.BezierSpline,
-        "easing.bezierCurve": Appearance.anim.curves.standard
-    }
-
-    Behavior on radius {
-        NumberAnimation {
-            duration: standardAnimation.duration
-            easing.type: standardAnimation["easing.type"]
-            easing.bezierCurve: standardAnimation["easing.bezierCurve"]
-        }
-    }
-
-    Behavior on opacity {
-        NumberAnimation {
-            duration: standardAnimation.duration
-            easing.type: standardAnimation["easing.type"]
-            easing.bezierCurve: standardAnimation["easing.bezierCurve"]
-        }
-    }
-}
+DankCommon.StyledRect {}

quickshell/Widgets/StyledText.qml

@@ -1,76 +1,3 @@
-import QtQuick
-import qs.Common
+import qs.DankCommon.Widgets as DankCommon
 
-Text {
-    property bool isMonospace: false
-    FontLoader {
-        id: interFont
-        source: Qt.resolvedUrl("../assets/fonts/inter/InterVariable.ttf")
-    }
-
-    FontLoader {
-        id: firaCodeFont
-        source: Qt.resolvedUrl("../assets/fonts/nerd-fonts/FiraCodeNerdFont-Regular.ttf")
-    }
-
-    readonly property string resolvedFontFamily: {
-        const requestedFont = isMonospace ? Theme.monoFontFamily : Theme.fontFamily;
-        const defaultFont = isMonospace ? Theme.defaultMonoFontFamily : Theme.defaultFontFamily;
-
-        if (requestedFont === defaultFont) {
-            return isMonospace ? firaCodeFont.name : interFont.name;
-        }
-        return requestedFont;
-    }
-
-    readonly property int resolvedRenderType: {
-        switch (SettingsData.textRenderType) {
-        case SettingsData.TextRenderType.Qt:
-            return Text.QtRendering;
-        case SettingsData.TextRenderType.Curve:
-            return Text.CurveRendering;
-        default:
-            return Text.NativeRendering;
-        }
-    }
-
-    readonly property int resolvedRenderQuality: {
-        switch (SettingsData.textRenderQuality) {
-        case SettingsData.TextRenderQuality.Low:
-            return Text.LowRenderTypeQuality;
-        case SettingsData.TextRenderQuality.Normal:
-            return Text.NormalRenderTypeQuality;
-        case SettingsData.TextRenderQuality.High:
-            return Text.HighRenderTypeQuality;
-        case SettingsData.TextRenderQuality.VeryHigh:
-            return Text.VeryHighRenderTypeQuality;
-        default:
-            return Text.DefaultRenderTypeQuality;
-        }
-    }
-
-    readonly property var standardAnimation: {
-        "duration": Appearance.anim.durations.normal,
-        "easing.type": Easing.BezierSpline,
-        "easing.bezierCurve": Appearance.anim.curves.standard
-    }
-
-    color: Theme.surfaceText
-    font.pixelSize: Appearance.fontSize.normal
-    font.family: resolvedFontFamily
-    font.weight: Theme.fontWeight
-    textFormat: Text.PlainText
-    wrapMode: Text.WordWrap
-    elide: Text.ElideRight
-    verticalAlignment: Text.AlignVCenter
-    renderType: resolvedRenderType
-    renderTypeQuality: resolvedRenderQuality
-
-    Behavior on opacity {
-        NumberAnimation {
-            duration: standardAnimation.duration
-            easing.type: standardAnimation["easing.type"]
-            easing.bezierCurve: standardAnimation["easing.bezierCurve"]
-        }
-    }
-}
+DankCommon.StyledText {}

quickshell/Widgets/StyledTextMetrics.qml

@@ -1,24 +1,3 @@
-import QtQuick
-import qs.Common
-import qs.Services
+import qs.DankCommon.Widgets as DankCommon
 
-TextMetrics {
-    property bool isMonospace: false
-
-    readonly property string resolvedFontFamily: {
-        const requestedFont = isMonospace ? SettingsData.monoFontFamily : SettingsData.fontFamily;
-        const defaultFont = isMonospace ? Theme.defaultMonoFontFamily : Theme.defaultFontFamily;
-
-        if (requestedFont === defaultFont) {
-            const availableFonts = Qt.fontFamilies();
-            if (!availableFonts.includes(requestedFont)) {
-                return isMonospace ? "Monospace" : "DejaVu Sans";
-            }
-        }
-        return requestedFont;
-    }
-
-    font.pixelSize: Appearance.fontSize.normal
-    font.family: resolvedFontFamily
-    font.weight: SettingsData.fontWeight
-}
+DankCommon.StyledTextMetrics {}

quickshell/Widgets/SystemLogo.qml

@@ -1,81 +1,3 @@
-import QtQuick
-import QtQuick.Effects
-import Quickshell
-import Quickshell.Widgets
-import qs.Common
-import qs.Widgets
+import qs.DankCommon.Widgets as DankCommon
 
-Item {
-    id: root
-
-    property string colorOverride: ""
-    property real brightnessOverride: 0.5
-    property real contrastOverride: 1
-
-    readonly property bool hasColorOverride: colorOverride !== ""
-
-    property bool useNerdFont: false
-    property string nerdFontIcon: ""
-
-    IconImage {
-        id: iconImage
-        anchors.fill: parent
-        visible: !root.useNerdFont
-
-        smooth: true
-        asynchronous: true
-        layer.enabled: hasColorOverride
-
-        layer.effect: MultiEffect {
-            colorization: 1
-            colorizationColor: colorOverride
-            brightness: brightnessOverride
-            contrast: contrastOverride
-        }
-    }
-
-    DankNFIcon {
-        id: nfIcon
-        anchors.centerIn: parent
-        visible: root.useNerdFont
-        name: root.nerdFontIcon
-        size: Math.min(root.width, root.height)
-        color: hasColorOverride ? colorOverride : Theme.surfaceText
-    }
-
-    Component.onCompleted: {
-        Proc.runCommand(null, ["sh", "-c", ". /etc/os-release && echo $ID"], (output, exitCode) => {
-            if (!root || exitCode !== 0 || !output) return
-            const distroId = output.trim()
-            if (!distroId) return
-
-            const supportedDistroNFs = ["debian", "arch", "archcraft", "fedora", "nixos", "ubuntu", "guix", "gentoo", "endeavouros", "manjaro", "opensuse"]
-            if (supportedDistroNFs.includes(distroId)) {
-                if (!root) return
-                root.useNerdFont = true
-                root.nerdFontIcon = distroId
-                return
-            }
-
-            Proc.runCommand(null, ["sh", "-c", ". /etc/os-release && echo $LOGO"], (logoOutput, logoExitCode) => {
-                if (!root || !iconImage || logoExitCode !== 0 || !logoOutput) return
-                const logo = logoOutput.trim()
-                if (!logo) return
-
-                if (logo === "cachyos") {
-                    iconImage.source = "file:///usr/share/icons/cachyos.svg"
-                    return
-                }
-                if (logo === "guix-icon") {
-                    iconImage.source = "file:///run/current-system/profile/share/icons/hicolor/scalable/apps/guix-icon.svg"
-                    return
-                }
-                if (logo === "zirconium") {
-                    iconImage.source = "file:///usr/share/zirconium/pixmaps/logo-z.svg"
-                    return
-                }
-                iconImage.source = Quickshell.iconPath(logo, true)
-            }, 0)
-        }, 0)
-    }
-}
+DankCommon.SystemLogo {}

quickshell/assets/fonts/inter/LICENSE.txt

@@ -1,92 +0,0 @@
-Copyright (c) 2016 The Inter Project Authors (https://github.com/rsms/inter)
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-http://scripts.sil.org/OFL
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded,
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION AND CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.

quickshell/assets/fonts/inter/README.md

@@ -1,163 +0,0 @@
-# Inter
-
-Inter is a typeface carefully crafted & designed for computer screens.
-Inter features a tall x-height to aid in readability of mixed-case and lower-case text.
-Inter is a [variable font](https://rsms.me/inter/#variable) with
-several [OpenType features](https://rsms.me/inter/#features), like contextual alternates that adjusts punctuation depending on the shape of surrounding glyphs, slashed zero for when you need to disambiguate "0" from "o", tabular numbers, etc.
-
-[**Download Inter font files…**](https://github.com/rsms/inter/releases/latest)
-
-<br>
-
-[![Sample](misc/readme/intro.png)](https://rsms.me/inter/)
-
-
-### Quick questions
-
-- **Where can I get Inter?** [Here](https://github.com/rsms/inter/releases/latest)
-- **I think I found a bug. How can I let you know?** [Open an issue here](https://github.com/rsms/inter/issues/new?template=bug_report.md)
-- **I have a question. Where can I get help?** [Post in Discussions Q&A](https://github.com/rsms/inter/discussions/categories/q-a)
-- **Should I use Inter from Google Fonts?** No, unless you have no other choice.
-  (outdated, no italics)
-- **Can I legally use Inter for my purpose?** Most likely _yes!_ Inter is free and open source.
-  ([Read the license](LICENSE.txt) for details.)
-
-
-## Using & installing Inter
-
-[**Download the latest font files…**](https://github.com/rsms/inter/releases/latest)
-
-Using Inter on a web page:
-
-```html
-<link rel="preconnect" href="https://your-font-file-host/">
-<link rel="stylesheet" href="https://your-font-file-host/inter.css">
-```
-
-```css
-:root { font-family: 'Inter', sans-serif; }
-@supports (font-variation-settings: normal) {
-  :root { font-family: 'Inter var', sans-serif; }
-}
-```
-
-For web pages, there's an official [CDN distribution](https://rsms.me/inter/inter.css) that you can use directly without having to host the font files yourself:
-
-```html
-<link rel="preconnect" href="https://rsms.me/">
-<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
-```
-
-
-### Alternate distributions
-
-- [NPM `inter-ui`](https://www.npmjs.com/package/inter-ui)
-- [Homebrew `font-inter`](https://github.com/Homebrew/homebrew-cask-fonts)
-- [Ubuntu `fonts-inter`](https://packages.ubuntu.com/search?keywords=fonts-inter)
-- [List of Inter available on various Linux distributions…](https://repology.org/project/fonts:inter/versions)
-- [Google Fonts](https://fonts.google.com/specimen/Inter)
-
-**Disclaimer:** Alternate distributions may not always be up-to-date.
-
-
-## Notable uses of Inter
-
-- [ElementaryOS](https://elementary.io/)
-- [Figma](https://figma.com/)
-- [GitLab](https://gitlab.com/)
-- [Guggenheim museums](https://www.pentagram.com/work/guggenheim-3) ([case study](https://www.pentagram.com/work/guggenheim-3/))
-- [ISO (International Organization for Standardization)](https://www.iso.org/) ([case study](https://www.motherbird.com.au/projects/iso/))
-- [Minimalissimo magazine](https://minimalissimo.com/)
-- [Mozilla](https://mozilla.design/firefox/typography/)
-- [NASA](https://www.nasa.gov/specials/artemis-ii/)
-- [Pixar Presto](https://en.wikipedia.org/wiki/Presto_(animation_software))
-- [Switzerland, Canton of Zurich](https://www.zh.ch/)
-- [Unity](https://unity.com/)
-- [Zurich Airport](https://flughafen-zuerich.ch/)
-
-
-> **Have you made something nice with Inter?**<br>
-> [Please share in Show & Tell! →](https://github.com/rsms/inter/discussions/categories/show-and-tell)
-
-
-### Notable forks
-
-- [Open Runde](https://github.com/lauridskern/open-runde) is a rounded variant of Inter
-- [Interalia](https://github.com/Shavian-info/interalia) extends Inter with Shavian characters
-- [Raveo](https://github.com/jakubfoglar/raveo) is a "warmer version" of Inter
-
-
-## Supporters & contributors
-
-A wholehearted **Thank You** to everyone who supports the Inter project!
-
-Special thanks to
-[@thundernixon](https://github.com/thundernixon) and
-[@KatjaSchimmel](https://github.com/KatjaSchimmel)
-who have put in significant effort into making Inter what it is through
-their contributions ♡
-
-See [graphs/contributors](https://github.com/rsms/inter/graphs/contributors)
-for a complete list of all contributors.
-
-
-## Contributing to this project
-
-For instructions on how to work with the source files and how to
-[compile & build font files](CONTRIBUTING.md#compiling-font-files),
-refer to [**CONTRIBUTING.md**](CONTRIBUTING.md).
-
-Inter is licensed under the [SIL Open Font License](LICENSE.txt)
-
-
-## Creating derivative fonts
-
-Inter is open source which means you can make your own versions with your own changes.
-However when doing so, please [**read LICENSE.txt carefully.**](LICENSE.txt) It is a standard **SIL Open Font License 1.1**:
-
-> The goals of the Open Font License (OFL) are to stimulate worldwide
-> development of collaborative font projects, to support the font creation
-> efforts of academic and linguistic communities, and to provide a free and
-> open framework in which fonts may be shared and improved in partnership
-> with others.
->
-> The OFL allows the licensed fonts to be used, studied, modified and
-> redistributed freely as long as they are not sold by themselves. The
-> fonts, including any derivative works, can be bundled, embedded,
-> redistributed and/or sold with any software provided that any reserved
-> names are not used by derivative works. The fonts and derivatives,
-> however, cannot be released under any other type of license. The
-> requirement for fonts to remain under this license does not apply
-> to any document created using the fonts or their derivatives.
-
-While you are allowed to use Inter commercially, i.e. bundled with product or service which makes you money, you are NOT allowed to sell Inter itself or derivatives of Inter. If you would like to do so, please [reach out](https://github.com/rsms) and we can talk about it.
-
-Inter a trademark of Rasmus Andersson (DBA: RSMS)
-
-"Inter" is a Reserved Font Name by Rasmus Andersson
-([font vendor code RSMS.](https://learn.microsoft.com/en-us/typography/vendors/#r))
-
-
-## Design
-
-_This section discusses some of the design choices made for Inter._
-
-Inter can be classified as a geometric neo-grotesque, similar in style to Roboto, Apple San Francisco, Akkurat, Asap, Lucida Grande and more. Some trade-offs were made in order to make this typeface work really well at small sizes:
-
-- Early versions of Inter was not suitable for very large sizes because of some small-scale glyph optimizations (like "pits" and "traps") that help rasterization at small sizes but stand out and interfere at large sizes. However today Inter works well at large sizes and a [Display subfamily](https://github.com/rsms/inter/releases/tag/display-beta-1) is in the works for really large "display" sizes.
-
-- Rasterized at sizes below 12px, some stems—like the horizontal center of "E", "F", or vertical center of "m"—are drawn with two semi-opaque pixels instead of one solid. This is because we "prioritize" (optimize for) higher-density rasterizations. If we move these stems to an off-center position—so that they can be drawn sharply at e.g. 11px—text will be less legible at higher resolutions.
-
-Inter is a [variable font](https://rsms.me/inter/#variable) and is in addition also distributed as a set of traditional distinct font files in the following styles:
-
-| Roman (upright) name | Italic name          | Weight
-| -------------------- | -------------------- | ------------
-| Thin                 | Thin Italic          | 100
-| Extra Light          | Extra Light Italic   | 200
-| Light                | Light Italic         | 300
-| Regular              | Italic               | 400
-| Medium               | Medium Italic        | 500
-| Semi Bold            | Semi Bold Italic     | 600
-| Bold                 | Bold Italic          | 700
-| Extra Bold           | Extra Bold Italic    | 800
-| Black                | Black Italic         | 900

quickshell/assets/fonts/material-design-icons/LICENSE

@@ -1,202 +0,0 @@
-
-                                 Apache License
-                           Version 2.0, January 2004
-                        http://www.apache.org/licenses/
-
-   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-   1. Definitions.
-
-      "License" shall mean the terms and conditions for use, reproduction,
-      and distribution as defined by Sections 1 through 9 of this document.
-
-      "Licensor" shall mean the copyright owner or entity authorized by
-      the copyright owner that is granting the License.
-
-      "Legal Entity" shall mean the union of the acting entity and all
-      other entities that control, are controlled by, or are under common
-      control with that entity. For the purposes of this definition,
-      "control" means (i) the power, direct or indirect, to cause the
-      direction or management of such entity, whether by contract or
-      otherwise, or (ii) ownership of fifty percent (50%) or more of the
-      outstanding shares, or (iii) beneficial ownership of such entity.
-
-      "You" (or "Your") shall mean an individual or Legal Entity
-      exercising permissions granted by this License.
-
-      "Source" form shall mean the preferred form for making modifications,
-      including but not limited to software source code, documentation
-      source, and configuration files.
-
-      "Object" form shall mean any form resulting from mechanical
-      transformation or translation of a Source form, including but
-      not limited to compiled object code, generated documentation,
-      and conversions to other media types.
-
-      "Work" shall mean the work of authorship, whether in Source or
-      Object form, made available under the License, as indicated by a
-      copyright notice that is included in or attached to the work
-      (an example is provided in the Appendix below).
-
-      "Derivative Works" shall mean any work, whether in Source or Object
-      form, that is based on (or derived from) the Work and for which the
-      editorial revisions, annotations, elaborations, or other modifications
-      represent, as a whole, an original work of authorship. For the purposes
-      of this License, Derivative Works shall not include works that remain
-      separable from, or merely link (or bind by name) to the interfaces of,
-      the Work and Derivative Works thereof.
-
-      "Contribution" shall mean any work of authorship, including
-      the original version of the Work and any modifications or additions
-      to that Work or Derivative Works thereof, that is intentionally
-      submitted to Licensor for inclusion in the Work by the copyright owner
-      or by an individual or Legal Entity authorized to submit on behalf of
-      the copyright owner. For the purposes of this definition, "submitted"
-      means any form of electronic, verbal, or written communication sent
-      to the Licensor or its representatives, including but not limited to
-      communication on electronic mailing lists, source code control systems,
-      and issue tracking systems that are managed by, or on behalf of, the
-      Licensor for the purpose of discussing and improving the Work, but
-      excluding communication that is conspicuously marked or otherwise
-      designated in writing by the copyright owner as "Not a Contribution."
-
-      "Contributor" shall mean Licensor and any individual or Legal Entity
-      on behalf of whom a Contribution has been received by Licensor and
-      subsequently incorporated within the Work.
-
-   2. Grant of Copyright License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      copyright license to reproduce, prepare Derivative Works of,
-      publicly display, publicly perform, sublicense, and distribute the
-      Work and such Derivative Works in Source or Object form.
-
-   3. Grant of Patent License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      (except as stated in this section) patent license to make, have made,
-      use, offer to sell, sell, import, and otherwise transfer the Work,
-      where such license applies only to those patent claims licensable
-      by such Contributor that are necessarily infringed by their
-      Contribution(s) alone or by combination of their Contribution(s)
-      with the Work to which such Contribution(s) was submitted. If You
-      institute patent litigation against any entity (including a
-      cross-claim or counterclaim in a lawsuit) alleging that the Work
-      or a Contribution incorporated within the Work constitutes direct
-      or contributory patent infringement, then any patent licenses
-      granted to You under this License for that Work shall terminate
-      as of the date such litigation is filed.
-
-   4. Redistribution. You may reproduce and distribute copies of the
-      Work or Derivative Works thereof in any medium, with or without
-      modifications, and in Source or Object form, provided that You
-      meet the following conditions:
-
-      (a) You must give any other recipients of the Work or
-          Derivative Works a copy of this License; and
-
-      (b) You must cause any modified files to carry prominent notices
-          stating that You changed the files; and
-
-      (c) You must retain, in the Source form of any Derivative Works
-          that You distribute, all copyright, patent, trademark, and
-          attribution notices from the Source form of the Work,
-          excluding those notices that do not pertain to any part of
-          the Derivative Works; and
-
-      (d) If the Work includes a "NOTICE" text file as part of its
-          distribution, then any Derivative Works that You distribute must
-          include a readable copy of the attribution notices contained
-          within such NOTICE file, excluding those notices that do not
-          pertain to any part of the Derivative Works, in at least one
-          of the following places: within a NOTICE text file distributed
-          as part of the Derivative Works; within the Source form or
-          documentation, if provided along with the Derivative Works; or,
-          within a display generated by the Derivative Works, if and
-          wherever such third-party notices normally appear. The contents
-          of the NOTICE file are for informational purposes only and
-          do not modify the License. You may add Your own attribution
-          notices within Derivative Works that You distribute, alongside
-          or as an addendum to the NOTICE text from the Work, provided
-          that such additional attribution notices cannot be construed
-          as modifying the License.
-
-      You may add Your own copyright statement to Your modifications and
-      may provide additional or different license terms and conditions
-      for use, reproduction, or distribution of Your modifications, or
-      for any such Derivative Works as a whole, provided Your use,
-      reproduction, and distribution of the Work otherwise complies with
-      the conditions stated in this License.
-
-   5. Submission of Contributions. Unless You explicitly state otherwise,
-      any Contribution intentionally submitted for inclusion in the Work
-      by You to the Licensor shall be under the terms and conditions of
-      this License, without any additional terms or conditions.
-      Notwithstanding the above, nothing herein shall supersede or modify
-      the terms of any separate license agreement you may have executed
-      with Licensor regarding such Contributions.
-
-   6. Trademarks. This License does not grant permission to use the trade
-      names, trademarks, service marks, or product names of the Licensor,
-      except as required for reasonable and customary use in describing the
-      origin of the Work and reproducing the content of the NOTICE file.
-
-   7. Disclaimer of Warranty. Unless required by applicable law or
-      agreed to in writing, Licensor provides the Work (and each
-      Contributor provides its Contributions) on an "AS IS" BASIS,
-      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-      implied, including, without limitation, any warranties or conditions
-      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-      PARTICULAR PURPOSE. You are solely responsible for determining the
-      appropriateness of using or redistributing the Work and assume any
-      risks associated with Your exercise of permissions under this License.
-
-   8. Limitation of Liability. In no event and under no legal theory,
-      whether in tort (including negligence), contract, or otherwise,
-      unless required by applicable law (such as deliberate and grossly
-      negligent acts) or agreed to in writing, shall any Contributor be
-      liable to You for damages, including any direct, indirect, special,
-      incidental, or consequential damages of any character arising as a
-      result of this License or out of the use or inability to use the
-      Work (including but not limited to damages for loss of goodwill,
-      work stoppage, computer failure or malfunction, or any and all
-      other commercial damages or losses), even if such Contributor
-      has been advised of the possibility of such damages.
-
-   9. Accepting Warranty or Additional Liability. While redistributing
-      the Work or Derivative Works thereof, You may choose to offer,
-      and charge a fee for, acceptance of support, warranty, indemnity,
-      or other liability obligations and/or rights consistent with this
-      License. However, in accepting such obligations, You may act only
-      on Your own behalf and on Your sole responsibility, not on behalf
-      of any other Contributor, and only if You agree to indemnify,
-      defend, and hold each Contributor harmless for any liability
-      incurred by, or claims asserted against, such Contributor by reason
-      of your accepting any such warranty or additional liability.
-
-   END OF TERMS AND CONDITIONS
-
-   APPENDIX: How to apply the Apache License to your work.
-
-      To apply the Apache License to your work, attach the following
-      boilerplate notice, with the fields enclosed by brackets "[]"
-      replaced with your own identifying information. (Don't include
-      the brackets!)  The text should be enclosed in the appropriate
-      comment syntax for the file format. We also recommend that a
-      file or class name and description of purpose be included on the
-      same "printed page" as the copyright notice for easier
-      identification within third-party archives.
-
-   Copyright [yyyy] [name of copyright owner]
-
-   Licensed under the Apache License, Version 2.0 (the "License");
-   you may not use this file except in compliance with the License.
-   You may obtain a copy of the License at
-
-       http://www.apache.org/licenses/LICENSE-2.0
-
-   Unless required by applicable law or agreed to in writing, software
-   distributed under the License is distributed on an "AS IS" BASIS,
-   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   See the License for the specific language governing permissions and
-   limitations under the License.

quickshell/assets/fonts/material-design-icons/README.md

@@ -1,141 +0,0 @@
-## Material Symbols / Material Icons
-
-These are two different official icon sets from Google, using the same underlying designs. Material Symbols is the current set, introduced in April 2022, built on variable font technology. Material Icons is the classic set, but no longer updated. More details below.
-
-The icons can be browsed in a more user-friendly way at https://fonts.google.com/icons. Use the popdown menu near top left to choose between the two sets; Material Symbols is the default.
-
-The icons are designed under the [material design guidelines](https://material.io/guidelines/).
-
-## Icon Requests
-
-We’d love to support your icon needs! Please submit your request here on GitHub as an issue.
-
-Please note that Google Fonts does not accept user submissions of finished icon designs! There are fairly strict  guidelines for Material icons, plus Google has upstream source files from which this repo is generated. Therefore, Google does not accept pull requests for icon files (whether new icon suggestions, or fixes for existing icons). Concepts are appreciated—just don’t design SVGs and submit them via pull request.
-
-However, users are perfectly welcome to point at outside files or images as examples—for the kind of thing they want, but they won’t just be taken “as is.” This works especially well if you have multiple examples for a single icon, to help us understand the “essence” of the idea.
-
-> For example, there is a fairly universal conceptual logo/icon for “agender,” so if you were proposing Google add an agender icon in the Material style, either mentioning that, or pointing at https://www.google.com/search?q=agender+icon would be a helpful tip.
-
-### Third-party logos
-
-Currently, Google does not include 3rd-party logos among the Material Symbols or Material Icons due to legal reasons. Some 3rd-party logos that were included in the past have since been removed.
-
-## npm Packages
-
-Google does not currently maintain the npm package for this repo, past v3 (2016). However, user @marella is hosting the following. He tells us these are automatically updated and published using GitHub Actions. Note: Google does **not** monitor or vet these packages.
-
-### [material-symbols](https://github.com/marella/material-symbols/tree/main/material-symbols#readme) [![npm](https://img.shields.io/npm/v/material-symbols)](https://www.npmjs.com/package/material-symbols) [![install size](https://packagephobia.com/badge?p=material-symbols)](https://packagephobia.com/result?p=material-symbols)
-
-- Only WOFF2 variable fonts and CSS for Material Symbols
-- Includes outlined, rounded, and sharp icons and all variations of fill, weight, grade, and optical size
-- Supports Sass
-
-### [material-icons](https://github.com/marella/material-icons#readme) [![npm](https://img.shields.io/npm/v/material-icons)](https://www.npmjs.com/package/material-icons) [![install size](https://packagephobia.com/badge?p=material-icons)](https://packagephobia.com/result?p=material-icons) [![Downloads](https://img.shields.io/npm/dm/material-icons)](https://www.npmjs.com/package/material-icons)
-
-- Only WOFF2, WOFF fonts and CSS
-- Includes outlined, round, sharp and two-tone icons
-- Supports Sass
-
-### [@material-design-icons/font](https://github.com/marella/material-design-icons/tree/main/font#readme) [![npm (scoped)](https://img.shields.io/npm/v/@material-design-icons/font)](https://www.npmjs.com/package/@material-design-icons/font) [![install size](https://packagephobia.com/badge?p=@material-design-icons/font)](https://packagephobia.com/result?p=@material-design-icons/font)
-
-- Only WOFF2 fonts and CSS
-- Lighter version of `material-icons` package
-- Doesn't support [older browsers](https://caniuse.com/woff2) such as Internet Explorer because of dropping WOFF (v1)
-
-### [@material-design-icons/svg](https://github.com/marella/material-design-icons/tree/main/svg#readme) [![npm (scoped)](https://img.shields.io/npm/v/@material-design-icons/svg)](https://www.npmjs.com/package/@material-design-icons/svg) [![install size](https://packagephobia.com/badge?p=@material-design-icons/svg)](https://packagephobia.com/result?p=@material-design-icons/svg)
-
-- Only SVGs
-- Optimizes SVGs using SVGO
-
-## Material Symbols
-
-These newer icons can be browsed in a more user-friendly way at https://fonts.google.com/icons. Use the popdown menu near top left to choose between the two sets; Material Symbols is the default.
-
-These icons were built/designed as variable fonts first (based on the 24 px designs from Material Icons). There are three separate Material Symbols variable fonts, which also have static icons available (but those do not have all the variations available, as that would be hundreds of styles):
-- Outlined
-- Rounded
-- Sharp
-- Note that although there is no separate Filled font, the Fill axis allows access to filled styles, in all three fonts. It can also be manipulated for an animated fill effect, to indicate user selection.
-
-Each of the fonts has these design axes, which can be varied in CSS, or in many more modern design apps:
-- Optical Size (opsz) from 20 to 48 px. The default is 24.
-- Weight from 100 (Thin) to 700 (Bold). Regular is 400.
-- Grade from -50 to 200. The default is 0 (zero). -50 is suggested for reversed contrast (e.g. white icons on black background)
-- Fill from 0 to 100. The default is 0 (zero).
-
-The following directories in this repo contain specifically Material Symbols (not Material Icons) content:
-- symbols
-- variablefont
-
-What is currently _not_ available in Material Symbols?
-- only the 20 and 24 px versions are designed with perfect pixel-grid alignment
-- the only pre-made fonts are the variable fonts
-- there are no two-tone icons
-
-## Material Icons
-
-The icons can be browsed in a more user-friendly way at https://fonts.google.com/icons?icon.set=Material+Icons
-
-These classic icons are available in five distinct styles:
-- Outlined
-- Filled (the font version is just called Material Icons, as this is the oldest style)
-- Rounded
-- Sharp
-- Two tone
-
-The following directories in this repo contain specifically Material Icons (not Material Symbols) content:
-- android
-- font
-- ios
-- png
-- src
-
-What is currently _not_ available in Material Icons?
-- variable fonts
-- weights other than Regular
-- grades other than Regular
-- a means to animate Fill transitions
-- new icons (since updates were halted in 2022)
-
-## Material Icons update history
-
-### 4.0.0 Update
-* 2020 Aug 31
-* Restructured repository, updated assets.
-
-### 3.0.1 Update
-* 2016 Sep 01
-* Changed license in package.json.
-* Added missing device symbol sprites.
-
-### 3.0.0 Update
-* 2016 Aug 25
-* License change to Apache 2.0!
-
-### 2.0
-* 2016 May 28
-
-## Getting Started
-
-Read the [developer guide](https://developers.google.com/fonts/docs/material_icons) on how to use the material design icons in your project.
-
-### Using a font
-
-The `font` and `variablefont` folders contain pre-generated font files that can be included in a project. This is especially convenient for the web; however, it is generally better to link to the web font hosted on Google Fonts:
-
-```html
-<link href="https://fonts.googleapis.com/css2?family=Material+Icons"
-      rel="stylesheet">
-```
-
-```html
-<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"
-      rel="stylesheet">
-```
-Read more on [Material Symbols](https://developers.google.com/fonts/docs/material_symbols/) or [Material Icons](https://developers.google.com/fonts/docs/material_icons/) in the Google Fonts developer guide.
-
-
-## License
-
-We have made these icons available for you to incorporate into your products under the [Apache License Version 2.0](https://www.apache.org/licenses/LICENSE-2.0.txt). Feel free to remix and re-share these icons and documentation in your products.
-We'd love attribution in your app's *about* screen, but it's not required.

quickshell/assets/fonts/nerd-fonts/LICENSE

@@ -1,93 +0,0 @@
-Copyright (c) 2014, The Fira Code Project Authors (https://github.com/tonsky/FiraCode)
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-http://scripts.sil.org/OFL
-
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded,
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION & CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.

quickshell/assets/fonts/nerd-fonts/README.md

@@ -1,47 +0,0 @@
-# Nerd Fonts
-
-This is an archived font from the Nerd Fonts release v3.4.0.
-
-For more information see:
-* https://github.com/ryanoasis/nerd-fonts/
-* https://github.com/ryanoasis/nerd-fonts/releases/latest/
-
-# Fira Code
-
-**Fira Code** is a free monospaced font with programming ligatures.
-
-For more information have a look at the upstream website: https://github.com/tonsky/FiraCode
-
-Version: 6.2
-
-## Which font?
-
-### TL;DR
-
-* Pick your font family:
-  * If you are limited to monospaced fonts (because of your terminal, etc) then pick a font with `Nerd Font Mono` (or `NFM`).
-  * If you want to have bigger icons (usually around 1.5 normal letters wide) pick a font without `Mono` i.e. `Nerd Font` (or `NF`). Most terminals support this, but ymmv.
-  * If you work in a proportional context (GUI elements or edit a presentation etc) pick a font with `Nerd Font Propo` (or `NFP`).
-
-### Ligatures
-
-Ligatures are generally preserved in the patched fonts.
-Nerd Fonts `v2.0.0` had no ligatures in the `Nerd Font Mono` fonts, this has been dropped with `v2.1.0`.
-If you have a ligature-aware terminal and don't want ligatures you can (usually) disable them in the terminal settings.
-
-### Explanation
-
-Once you narrow down your font choice of family (`Droid Sans`, `Inconsolata`, etc) and style (`bold`, `italic`, etc) you have 2 main choices:
-
-#### `Option 1: Download already patched font`
-
- * For a stable version download a font package from the [release page](https://github.com/ryanoasis/nerd-fonts/releases)
- * Or download the development version from the folders here
-
-#### `Option 2: Patch your own font`
-
- * Patch your own variations with the various options provided by the font patcher (i.e. not include all symbols for smaller font size)
-
-For more information see: [The FAQ](https://github.com/ryanoasis/nerd-fonts/wiki/FAQ-and-Troubleshooting#which-font)
-
-[SIL-RFN]:http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web_fonts_and_RFNs#14cbfd4a