refaktor

.gitignore

@@ -1,3 +1,6 @@
 *.svg
-colors/Colors.qml
+Colors.qml
-modules/wlogout/scripts/helper.sh
+*.template
+modules/wlogout/scripts/helper.sh
+config/path/ConfigPath.qml
+config/path/WallpaperPath.qml

colors/Colors.qml.template

@@ -1,57 +0,0 @@
-pragma Singleton
-import QtQuick 2.15
-
-QtObject {
-
-    // ===== PRIMARY =====
-    readonly property color primary: "#cbcb77"
-    readonly property color primary_fg: "#323200"
-    readonly property color primaryContainer: "#494900"
-    readonly property color primaryContainer_fg: "#e7e790"
-
-    // ===== SECONDARY =====
-    readonly property color secondary: "#cac8a5"
-    readonly property color secondary_fg: "#323218"
-    readonly property color secondaryContainer: "#48482d"
-    readonly property color secondaryContainer_fg: "#e6e4bf"
-
-    // ===== TERTIARY =====
-    readonly property color tertiary: "#a4d0bd"
-    readonly property color tertiary_fg: "#0a372a"
-    readonly property color tertiaryContainer: "#254e40"
-    readonly property color tertiaryContainer_fg: "#bfecd9"
-
-    // ===== ERROR =====
-    readonly property color error: "#ffb4ab"
-    readonly property color error_fg: "#690005"
-    readonly property color errorContainer: "#93000a"
-    readonly property color errorContainer_fg: "#ffdad6"
-
-    // ===== BACKGROUND / SURFACE =====
-    readonly property color background: "#14140c"
-    readonly property color background_fg: "#e6e3d5"
-
-    readonly property color surface: "#14140c"
-    readonly property color surface_fg: "#e6e3d5"
-
-    readonly property color surfaceVariant: "#48473a"
-    readonly property color surfaceVariant_fg: "#c9c7b6"
-
-    // ===== SURFACE CONTAINERS =====
-    readonly property color surfaceContainerLowest: "#0f0f07"
-    readonly property color surfaceContainerLow: "#1c1c14"
-    readonly property color surfaceContainer: "#202018"
-    readonly property color surfaceContainerHigh: "#2b2a22"
-    readonly property color surfaceContainerHighest: "#36352c"
-
-    // ===== OUTLINE / UTILITY =====
-    readonly property color outline: "#939182"
-    readonly property color outlineVariant: "#48473a"
-    readonly property color shadowColor: "#000000"
-    readonly property color scrimColor: "#000000"
-
-    // ===== INVERSE =====
-    readonly property color inverseSurface: "#e6e3d5"
-    readonly property color inverseSurface_fg: "#313128"
-    readonly property color inversePrimary: "#616219"
-}

config/Config.qml

@@ -1,12 +1,24 @@
 pragma Singleton
 import QtQuick 2.15
+import "./path"
 
 QtObject {
+    readonly property string configDir: ConfigPath.path
+    readonly property string wallpaperDir: WallpaperPath.wallpaperDir
+
     readonly property int small_spacing: 4
     readonly property int spacing: 8
+    function small_spacing_fun(screenHeight) { return Math.floor(barHeight(screenHeight) / 16) }
+    function spacing_fun(barH) { return Math.floor(barH / 8) }
+    function big_spacing_fun(barH) { return Math.floor(barH / 6) }
 
-    readonly property int small_radius: 4
+    function font_size(spaceHeight) { return Math.floor(spaceHeight * 0.75) }
-    readonly property int radius: 6
+    function font_size_small(spaceHeight) { return Math.floor(spaceHeight * 0.625) }
+
+    readonly property int small_radius: 8
+    readonly property int radius: 16
+    function small_radius_fun(barHeight) { return Math.floor(barHeight / 8) }
+    function radius_fun(barHeight) { return Math.floor(barHeight / 4) }
     readonly property int big_radius: 10
     readonly property int border_width: 2
 
@@ -20,6 +32,25 @@ QtObject {
         return value * 0.4
     }
 
+    // Scale font/icon size relative to bar height
+    function bigIconSize(barHeight) { return Math.floor(barHeight * 0.7) }
+    function halfBigIconSize(barHeight) { return Math.floor(barHeight * 0.6) }
+    function iconSize(barHeight) { return Math.floor(barHeight * 0.5) }
+    function labelSize(barHeight) { return Math.floor(barHeight * 0.35) }
+    function normalSpacing(screenHeight) { return Math.floor(barHeight(screenHeight) / 4) }
+    function widgetSpacing(screenHeight) { return Math.floor(barHeight(screenHeight) / 8) }
+
+    function barHeight(screenHeight) {
+        return Math.floor(screenHeight * barHeightRatio(screenHeight))
+    }
+
+    // Resolution-aware bar height ratio
+    function barHeightRatio(screenHeight) {
+        return screenHeight >= 2160 ? 0.03 :
+               screenHeight >= 1440 ? 0.035 :
+               0.04
+    }
+
     // Tray
     readonly property int reload_interval: 10000
     readonly property int fast_reload_interval: 1000

config/path/qmldir

@@ -0,0 +1,2 @@
+singleton ConfigPath ConfigPath.qml
+singleton WallpaperPath WallpaperPath.qml

config/qmldir

@@ -0,0 +1,2 @@
+singleton Config Config.qml
+singleton Colors Colors.qml

install.sh

@@ -3,7 +3,10 @@ set -euo pipefail
 
 SCRIPT_DIR="$(cd -- "$(dirname -- "${BASH_SOURCE[0]}")" &>/dev/null && pwd)"
 
-cp "$SCRIPT_DIR/colors/Colors.qml.template" "$SCRIPT_DIR/colors/Colors.qml"
+cp "$SCRIPT_DIR/config/Colors.qml.template" "$SCRIPT_DIR/config/Colors.qml"
+
+cp "$SCRIPT_DIR/config/path/ConfigPath.qml.template" "$SCRIPT_DIR/config/path/ConfigPath.qml"
+sed -i "s|__CONFIG_DIR__|$SCRIPT_DIR|g" "$SCRIPT_DIR/config/path/ConfigPath.qml"
 
 # ----------------------------
 # UI helpers
@@ -51,7 +54,6 @@ transform_svg_white() {
 echo
 info "Preparing wlogout icons..."
 mkdir -p "$SCRIPT_DIR/modules/wlogout/icons"
-mkdir -p "$SCRIPT_DIR/colors/icons"
 
 # ----------------------------
 # Icons (wlogout)
@@ -103,6 +105,61 @@ download \
   "$SCRIPT_DIR/colors/icons/correct.svg" \
   "correct.svg"
 
+# ----------------------------
+# Nerd Font
+# ----------------------------
+echo
+info "Installing CodeNewRoman Nerd Font..."
+FONT_DIR="${XDG_DATA_HOME:-$HOME/.local/share}/fonts"
+mkdir -p "$FONT_DIR"
+
+if [ ! -f "$FONT_DIR/CodeNewRomanNerdFont-Regular.ttf" ]; then
+  download \
+    "https://github.com/ryanoasis/nerd-fonts/releases/latest/download/CodeNewRoman.tar.xz" \
+    "/tmp/CodeNewRoman.tar.xz" \
+    "CodeNewRoman Nerd Font"
+
+  tar -xf /tmp/CodeNewRoman.tar.xz -C "$FONT_DIR" --wildcards '*.ttf' 2>/dev/null || \
+    tar -xf /tmp/CodeNewRoman.tar.xz -C "$FONT_DIR"
+  rm -f /tmp/CodeNewRoman.tar.xz
+
+  if command -v fc-cache &>/dev/null; then
+    fc-cache -fv "$FONT_DIR" &>/dev/null
+  fi
+  ok "CodeNewRoman Nerd Font installed"
+else
+  ok "CodeNewRoman Nerd Font already installed"
+fi
+
+# ----------------------------
+# Japanese Font (for JLearner)
+# ----------------------------
+echo
+info "Installing Noto Sans JP font..."
+
+if [ ! -f "$FONT_DIR/NotoSansJP.ttf" ]; then
+  download \
+    "https://github.com/google/fonts/raw/main/ofl/notosansjp/NotoSansJP%5Bwght%5D.ttf" \
+    "$FONT_DIR/NotoSansJP.ttf" \
+    "Noto Sans JP"
+
+  ok "Noto Sans JP font installed"
+else
+  ok "Noto Sans JP font already installed"
+fi
+
+# ----------------------------
+# Font cache reload
+# ----------------------------
+echo
+info "Reloading font cache..."
+if command -v fc-cache &>/dev/null; then
+  fc-cache -fv &>/dev/null
+  ok "Font cache reloaded"
+else
+  warn "fc-cache not found — font cache not updated"
+fi
+
 # ----------------------------
 # Example Wallpaper
 # ----------------------------
@@ -111,6 +168,17 @@ info "Preparing wallpaper..."
 
 WALLPAPER_DIR=$(scripts/wallpaper_dir.sh)
 
+mkdir -p "$WALLPAPER_DIR"
+
+info "Copying example Wallpaper..."
+
+cp "$SCRIPT_DIR/assets/example_background.png" "$WALLPAPER_DIR/japan_old_emperor_stream_with_bridge.png"
+
+info "Creating Wallpaper Folder Config"
+
+cp "$SCRIPT_DIR/config/path/WallpaperPath.qml.template" "$SCRIPT_DIR/config/path/WallpaperPath.qml"
+sed -i "s|__CONFIG_DIR__|$WALLPAPER_DIR|g" "$SCRIPT_DIR/config/path/WallpaperPath.qml"
+
 # 5. Ensure it exists
 mkdir -p "$WALLPAPER_DIR"
 

modules/bar/Bar.qml

@@ -2,7 +2,6 @@ import QtQuick
 import Quickshell
 import Quickshell.Hyprland
 import "./widgets"
-import "../../colors"
 import "../../config"
 
 PanelWindow {
@@ -14,11 +13,7 @@ PanelWindow {
     anchors.left: true
     anchors.right: true
 
-    implicitHeight: (
+    implicitHeight: Math.floor(screen.height * Config.barHeightRatio(screen.height))
-        screen.height >= 2160 ? screen.height * 0.03 :
-        screen.height >= 1440 ? screen.height * 0.035 :
-        screen.height * 0.04
-    )
 
     exclusiveZone: height // this is so context menus don't clip into the bar
 
@@ -40,13 +35,13 @@ PanelWindow {
 
             anchors.verticalCenter: parent.verticalCenter
             anchors.left: parent.left
-            anchors.leftMargin: 0 // parent.height / 4
+            anchors.leftMargin: 0
-            spacing: Math.floor(parent.height / 4)
+            spacing: Config.big_spacing_fun(height)
 
             MenuButton {}
 
-            Workspaces { 
+            Workspaces {
-                thisMonitor: barThisMonitor 
+                thisMonitor: barThisMonitor
                 anchors.verticalCenter: parent.verticalCenter
             }
 
@@ -54,8 +49,8 @@ PanelWindow {
 
         Row {  // bar widgets center
             id: widgetsCenter
-
             anchors.centerIn: parent
+            spacing: Config.big_spacing_fun(height)
 
             Clock {}
 
@@ -66,8 +61,8 @@ PanelWindow {
 
             anchors.verticalCenter: parent.verticalCenter
             anchors.right: parent.right
-            anchors.rightMargin: 0 //parent.height / 4
+            anchors.rightMargin: 0
-            spacing: Math.floor(parent.height / 4)
+            spacing: Config.big_spacing_fun(height)
 
             // TODO: Add bluetooth, network, audio, power, maybe HW monitor
             Tray{}

modules/bar/states/Apps/AppsState.qml

@@ -0,0 +1,153 @@
+pragma Singleton
+import QtQuick
+import Quickshell
+import Quickshell.Io
+
+Item {
+    id: root
+
+    // Per-workspace icon cache: maps workspaceId -> array of icon strings
+    property var workspaceIcons: ({})
+
+    function iconsForWorkspace(workspaceId) {
+        return root.workspaceIcons[workspaceId] || []
+    }
+
+    function matchIcon(name) {
+        if (!name) return ""
+        var lower = name.toLowerCase()
+        if (iconMap[lower]) return iconMap[lower]
+        for (var key in iconMap) {
+            if (key.endsWith("*") && key.startsWith("*")) {
+                var middle = key.slice(1, -1)
+                if (lower.indexOf(middle) !== -1) return iconMap[key]
+            } else if (key.endsWith("*")) {
+                var prefix = key.slice(0, -1)
+                if (lower.startsWith(prefix)) return iconMap[key]
+            } else if (key.startsWith("*")) {
+                var suffix = key.slice(1)
+                if (lower.endsWith(suffix)) return iconMap[key]
+            }
+        }
+        return ""
+    }
+
+    Process {
+        id: clientsProc
+        command: ["hyprctl", "clients", "-j"]
+        running: true
+        stdout: StdioCollector {
+            onStreamFinished: {
+                try {
+                    var data = JSON.parse(this.text.trim())
+                    var newIcons = {}
+                    for (var i = 0; i < data.length; i++) {
+                        var client = data[i]
+                        var wid = client.workspace.id
+                        var icon = root.matchIcon(client.initialTitle) || root.matchIcon(client.initialClass)
+                        if (icon) {
+                            if (!newIcons[wid]) newIcons[wid] = []
+                            newIcons[wid].push(icon)
+                        }
+                    }
+                    root.workspaceIcons = newIcons
+                } catch (e) {
+                    // hyprctl output was not valid JSON
+                }
+            }
+        }
+    }
+
+    Timer {
+        interval: 1000
+        running: true
+        repeat: true
+        triggeredOnStart: true
+        onTriggered: clientsProc.running = true
+    }
+
+    readonly property var iconMap: ({
+        "grayjay":                  "",
+        "ablaze floorp":            "",
+        "floorp":                   "",
+        "librewolf":                "",
+        "midori":                   "",
+        "brave-browser":            "",
+        "chromium":                 "",
+        "org.mozilla.thunderbird":  "󰇮",
+        "kitty":                    "",
+        "alacritty":                "",
+        "vlc media player":         "󰕼",
+        "mpv":                      "",
+        "ffplay":                   "",
+        "org.kde.kdenlive":         "",
+        "discord":                  "",
+        "vesktop":                  "",
+        "signal":                   "󰭹",
+        "xyz.chatboxapp.app":       "",
+        "visual studio code":       "",
+        "vscodium":                 "",
+        "jetbrains-idea":           "",
+        "jetbrains-studio":         "",
+        "org.xfce.mousepad":        "󱩼",
+        "org.keepassxc.keepassxc":  "",
+        "yubico authenticator":     "",
+        "com.nextcloud*":           "󰅟",
+        "octopi":                   "󰒚",
+        "steam*":                   "",
+        "org.prismlauncher*":       "󰍳",
+        "minecraft*":               "󰍳",
+        "game":                     "",
+        "blender":                  "",
+        "krita":                    "",
+        "virt*":                    "",
+        "remote-viewer":            "",
+        "qpwgraph":                 "󱡫",
+        "carla":                    "󱡫",
+        "com.obsproject.studio":    "󰨜",
+        "hyprland-share-picker":    "󱎴",
+        "libreoffice-startcenter":  "",
+        "libreoffice-base":         "",
+        "libreoffice-calc":         "󱎏",
+        "libreoffice-draw":         "󱎐",
+        "libreoffice-impress":      "",
+        "libreoffice-math":         "",
+        "libreoffice-writer":       "󱎒",
+        "*rnote":                   "󱩼",
+        "xreader":                  "󱩼",
+        "*xournalpp*":              "󱩼",
+        "qpdfview.local.qpdfview":  "󱩼",
+        "mission center":           "",
+        "qdirstat":                 "󰋊",
+        "disks":                    "󰋊",
+        "nemo":                     "󰉋",
+        "org.gnome.nautilus":       "󰉋",
+        "org.kde.dolphin":          "󰉋",
+        "xdg-desktop-portal-gtk":   "󰉋",
+        "nwg-look":                 "",
+        "qt5ct":                    "",
+        "qt6ct":                    "",
+        "sddm-conf":                "",
+        "blueman*":                 "󰂯",
+        "nm-connection-editor":     "󱛆",
+        "calculator":               "󰪚",
+        "*vpn":                     "󰳌",
+        "*cisco*":                  "󰳌",
+        "*qbittorrent*":            "󰉍",
+        "xilinx*":                  "",
+        "vsim":                     "",
+        "*boxbuddy*":               "󰒋",
+        "fladder":                  "󰼁",
+        "crunchyroll":              "",
+        "netflix":                  "",
+        "primevideo":               "󰯜",
+        "viewnior":                 "",
+        "gimp":                     "󱇣",
+        "*inkscape*":               "󱇣",
+        "lightburn":                "󱇣",
+        "wofi":                     "",
+        "org.gnome.Settings":       "",
+        "pavucontrol":              "",
+        "nm-applet":                "󱛆"
+    })
+}

modules/bar/states/Apps/qmldir

@@ -0,0 +1 @@
+singleton AppsState AppsState.qml

modules/bar/states/Battery/BatteryState.qml

@@ -4,6 +4,7 @@ import Quickshell
 import Quickshell.Io
 
 Item {
+    property bool available: false
     property real percentage: 0
     property bool charging: false
     property real energy: 0
@@ -14,37 +15,30 @@ Item {
 
     function parseUpower(line) {
         line = line.trim()
-
         if (line.startsWith("percentage:")) {
             percentage = parseInt(line.split(":")[1])
             // console.log("percentage =", percentage)
         }
-
         else if (line.startsWith("state:")) {
             charging = !line.includes("discharging")
             // console.log("charging =", charging)
         }
-
         else if (line.startsWith("energy:")) {
             energy = parseFloat(line.split(":")[1])
             // console.log("energy =", energy)
         }
-
         else if (line.startsWith("voltage:")) {
             voltage = parseFloat(line.split(":")[1])
             // console.log("voltage =", voltage)
         }
-
         else if (line.startsWith("energy-rate:")) {
             energy_rate = parseFloat(line.split(":")[1])
             // console.log("energy_rate =", energy_rate)
         }
-
         else if (line.startsWith("charge-cycles:")) {
             charge_cycle = parseInt(line.split(":")[1])
             // console.log("charge_cycle =", charge_cycle)
         }
-
         else if (line.startsWith("time to empty:")) {
             time_to_empty = parseFloat(line.split(":")[1])
             // console.log("time_to_empty =", time_to_empty)
@@ -53,12 +47,25 @@ Item {
 
     Process {
         id: upowerProc
-        command: ["bash", "-c", "upower -i $(upower -e | grep BAT)"]
+        command: ["bash", "-c", "upower -i $(upower -e | grep '^/org/freedesktop/UPower/devices/battery')"]
-
         stdout: SplitParser {
             onRead: function(data) {
                 parseUpower(data)
-                // console.log("battery available:", data)
+            }
+        }
+    }
+
+    Process {
+        id: batteryAvailable
+        command: ["sh", "-c", "upower -e | grep -q '^/org/freedesktop/UPower/devices/battery' && echo '1' || echo '0'"]
+
+        stdout: StdioCollector {
+            onStreamFinished: {
+                const hasBattery = this.text.trim() === "1"
+                available = hasBattery
+                if (hasBattery) {
+                    pollTimer.start()
+                }
             }
         }
     }
@@ -68,16 +75,11 @@ Item {
         interval: 1000
         running: false
         repeat: true
-        triggeredOnStart: true
+        triggeredOnStart: false
         onTriggered: upowerProc.running = true
     }
 
-    function start() {
+    Component.onCompleted: {
-        pollTimer.start()
+        batteryAvailable.running = true
-        upowerProc.running = true
-    }
-
-    function stop() {
-        pollTimer.stop()
     }
 }

modules/bar/states/Idle/IdleState.qml

@@ -2,7 +2,27 @@ pragma Singleton
 import QtQuick
 import Quickshell
 import Quickshell.Io
+import "../../../../config"
 
-QtObject {
+Item {
     property int idle: 0
+
+    Process {
+        id: statusScript
+        command: ["sh", "-c", Config.configDir + "/modules/bar/scripts/Idle.sh --status"]
+        running: true
+        stdout: StdioCollector {
+            onStreamFinished: {
+                idle = this.text.trim() === "0" ? 1 : 0
+            }
+        }
+    }
+
+    Timer {
+        interval: 5000
+        running: true
+        repeat: true
+        triggeredOnStart: true
+        onTriggered: statusScript.running = true
+    }
 }

modules/bar/states/Network/NetworkState.qml

@@ -2,6 +2,7 @@ pragma Singleton
 import QtQuick
 import Quickshell
 import Quickshell.Io
+import "../../../../config"
 
 QtObject {
     id: root
@@ -9,7 +10,6 @@ QtObject {
     property string status: "..."
     property bool running: false
 
-    // Timer property
     property Timer networkTimer: Timer {
         interval: 10000
         repeat: true
@@ -17,15 +17,13 @@ QtObject {
         onTriggered: networkScript.running = true
     }
 
-    // Process property
     property Process networkScript: Process {
         running: true
-        command: ["sh", "-c", Quickshell.env("HOME") + "/.config/quickshell/modules/bar/scripts/Network.sh"]
+        command: ["sh", "-c", Config.configDir + "/modules/bar/scripts/Network.sh"]
 
         stdout: StdioCollector {
             onStreamFinished: {
                 root.status = this.text.trim()
-                // console.log("Network status:", root.status)
             }
         }
     }

modules/bar/widgets/Battery.qml

@@ -2,23 +2,18 @@ import QtQuick
 import Quickshell
 import Quickshell.Hyprland
 import Quickshell.Io
-import "../../../colors"
 import "../../../config"
 import "../states/Battery"
 
 MouseArea {
     id: batteryButton
-    width: clicked ? Math.max(batteryPercentageText.width + parent.spacing*3, bar.height) : Math.max(batteryText.width + parent.spacing*2, bar.height)
+    width: expanded ? Math.max(batteryPercentageText.width + Config.spacing_fun(height), bar.height) : Math.max(batteryText.width + Config.spacing_fun(height)*2, bar.height)
     height: bar.height
     hoverEnabled: true
     cursorShape: Qt.PointingHandCursor
-    visible: false
+    visible: BatteryState.available
 
-    property bool clicked: false
+    property bool expanded: false
-
-    Component.onCompleted: {
-        batteryAvailibleScript.running = true
-    }
     
     Rectangle {
         anchors.fill: parent
@@ -30,7 +25,7 @@ MouseArea {
 
         Text {
             id: batteryText
-            visible : !clicked
+            visible : !expanded
             anchors.centerIn: parent
             text:(
                 BatteryState.percentage >= 95 ? "" :
@@ -39,10 +34,13 @@ MouseArea {
                 BatteryState.percentage >= 25 ? "" :
                 ""
             )
-            font.pixelSize: Config.big_font_size(bar.height)
+            font.pixelSize: Config.font_size(batteryButton.height)
             font.family: Config.font
             color: (
-                BatteryState.charging ? BatteryState.percentage == 100 ? "white" : Colors.tertiary :
+                BatteryState.charging ? (
+                    BatteryState.percentage == 100 ? Colors.secondary : 
+                    Colors.tertiary
+                ) :
                 BatteryState.percentage <= 5 ? Colors.errorContainer :
                 BatteryState.percentage < 10 ? "yellow" :
                 batteryButton.containsMouse ? Colors.tertiary_fg :
@@ -51,11 +49,11 @@ MouseArea {
         }
 
         Text {
-            id: batteryChargingText
+            id: chargeIcon
-            visible : !clicked && BatteryState.charging
+            visible : !expanded && BatteryState.charging
             anchors.centerIn: parent
             text: "󱐋"
-            font.pixelSize: Config.big_font_size(bar.height)
+            font.pixelSize: Config.iconSize(batteryButton.height)
             font.family: Config.font
             style: Text.Outline
             styleColor: Qt.alpha(Colors.tertiaryContainer, 0.5)
@@ -63,10 +61,10 @@ MouseArea {
         }
 
         Row {
-            id: batteryPercentageRow
+            id: expandedRow
-            visible: clicked
+            visible: expanded
             anchors.centerIn: parent
-            spacing: batteryButton.parent.spacing/2
+            spacing: Config.spacing_fun(batteryButton.height)
 
             Text {
                 id: batteryPercentageSymbol
@@ -85,13 +83,16 @@ MouseArea {
                     "󰂃"
                 )
 
-                font.pixelSize: batteryText.font.pixelSize * 0.75
+                font.pixelSize: Config.labelSize(batteryButton.height)
-                font.family: "CodeNewRoman Nerd Font"
+                font.family: Config.font
                 font.bold: true
 
                 color: (
-                    BatteryState.percentage <= 5 ? "red" :
+                    BatteryState.percentage <= 5 ? Colors.errorContainer :
-                    BatteryState.charging ? "green" :
+                    BatteryState.charging ? (
+                        BatteryState.percentage == 100 ? Colors.secondary : 
+                        Colors.tertiary
+                    ) :
                     BatteryState.percentage < 10 ? "yellow" :
                     batteryButton.containsMouse ? Colors.tertiary_fg :
                     Colors.primary
@@ -102,8 +103,8 @@ MouseArea {
                 id: batteryPercentageText
                 text: BatteryState.percentage + "%"
 
-                font.pixelSize: batteryText.font.pixelSize * 0.75
+                font.pixelSize: Config.labelSize(batteryButton.height)
-                font.family: "CodeNewRoman Nerd Font"
+                font.family: Config.font
                 font.bold: true
 
                 color: batteryPercentageSymbol.color
@@ -111,25 +112,9 @@ MouseArea {
         }
     }
 
-    Process {
-        id: batteryAvailibleScript
-        command: ["sh", "-c", "upower -e | grep -q '^/org/freedesktop/UPower/devices/battery' && echo '1' || echo '0'"]
-        stdout: StdioCollector {
-            onStreamFinished: {
-                const hasBattery = this.text.trim() === "1"
-
-                batteryButton.visible = hasBattery
-                if (hasBattery) {
-                    BatteryState.start()
-                }
-
-                // console.log("battery available:", hasBattery)
-            }
-        }
-    }
-
     onClicked: {
-        batteryButton.clicked = !batteryButton.clicked
+        expanded = !expanded
+        console.log("[Battery] Expanded: " + expanded + ", percentage: " + BatteryState.percentage + "%, charging: " + BatteryState.charging)
     }
 
 }

modules/bar/widgets/Clock.qml

@@ -1,68 +1,70 @@
 import QtQuick
 import Quickshell
 import Quickshell.Hyprland
-import "../../../colors"
 import "../../../config"
 
 Rectangle {  //workspace
-    id: timeAnchore
+    id: clockRect
-    width: dateTimer.running ? Math.max(dateDisplay.width + timeDisplay.width + Config.spacing*3, bar.height) : Math.max(dateDisplay.width + timeDisplay.width + Config.spacing*2, bar.height)
+    width: dateTimer.running ? Math.max(dateText.width + timeText.width + Config.spacing_fun(height)*3, bar.height) : Math.max(dateText.width + timeText.width + Config.spacing_fun(height)*2, bar.height)
     height: bar.height
-    radius: Config.radius
+    radius: Config.radius_fun(height)
-    color: timeAnchoreMouseArea.containsMouse ? Colors.tertiaryContainer : Colors.primaryContainer
+    color: clockArea.containsMouse ? Colors.tertiaryContainer : Colors.primaryContainer
     border.color: (
-        timeAnchoreMouseArea.containsMouse ? Colors.tertiaryContainer_fg :
+        clockArea.containsMouse ? Colors.tertiaryContainer_fg :
         Colors.primaryContainer_fg
     )
     border.width: Config.border_width
+
     MouseArea {
-        id: timeAnchoreMouseArea
+        id: clockArea
         hoverEnabled: true
         cursorShape: Qt.PointingHandCursor
         anchors.fill: parent
         acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
+        onClicked: {
+            dateTimer.running = !dateTimer.running
+            if (!dateTimer.running) dateText.currentDate = ""
+            console.log("[Clock] Date visible: " + dateTimer.running)
+        }
         
         Row {
-            id: row
-            spacing: Config.spacing
             anchors.centerIn: parent
 
             Text {
-                id: dateDisplay
+                id: dateText
                 property string currentDate: ""
-
                 text: currentDate
                 color: (
-                    timeAnchoreMouseArea.containsMouse ? Colors.tertiary :
+                    clockArea.containsMouse ? Colors.tertiary :
                     Colors.primary
                 )
-                font.pixelSize: Math.floor(bar.height/2)
+                font.pixelSize: Config.font_size_small(clockRect.height)
-                font.family: "Inter, sans-serif"
+                font.family: Config.font
 
                 Timer {
                     id: dateTimer
-                    interval: 60000
+                    interval: Config.reload_interval
                     running: false
                     repeat: true
                     triggeredOnStart: true
                     onTriggered: {
                         var now = new Date()
-                        dateDisplay.currentDate = Qt.formatDate(now, "ddd, dd.MM.yyyy -")
+                        dateText.currentDate = Qt.formatDate(now, "ddd, dd.MM.yyyy - ")
                     }
                 }
             }
 
             Text {
-                id: timeDisplay
+                id: timeText
                 property string currentTime: ""
 
                 text: currentTime
                 color: (
-                    timeAnchoreMouseArea.containsMouse ? Colors.tertiary :
+                    clockArea.containsMouse ? Colors.tertiary :
                     Colors.primary
                 )
-                font.pixelSize: Math.floor(bar.height/2)
+                font.pixelSize: Config.font_size_small(clockRect.height)
-                font.family: "Inter, sans-serif"
+                font.family: Config.font
 
                 Component.onCompleted: {
                     var now = new Date()
@@ -75,14 +77,10 @@ Rectangle {  //workspace
                     repeat: true
                     onTriggered: {
                         var now = new Date()
-                        timeDisplay.currentTime = Qt.formatTime(now, "hh:mm:ss")
+                        timeText.currentTime = Qt.formatTime(now, "hh:mm:ss")
                     }
                 }
             }
         }
-        onClicked: {
-            dateDisplay.currentDate = "";
-            dateTimer.running = !dateTimer.running;
-        }
     }
 }

modules/bar/widgets/IdleButton.qml

@@ -2,70 +2,50 @@ import QtQuick
 import Quickshell
 import Quickshell.Hyprland
 import Quickshell.Io
-import "../../../colors"
 import "../../../config"
-import "../states/Idle" as Global
+import "../states/Idle"
 
 MouseArea {
     id: idleButton
-    width: Math.max(idleText.width + parent.spacing*2, bar.height)
+    width: Math.max(idleText.width + Config.spacing_fun(height)*2, height)
     height: bar.height
     hoverEnabled: true
     cursorShape: Qt.PointingHandCursor
 
-    Component.onCompleted: {
+    onClicked: {
-        idleStatusScript.running = true
+        var newState = IdleState.idle ? 0 : 1
+        console.log("[IdleButton] Toggling idle: " + (newState ? "enabled" : "disabled"))
+        idleToggleProc.startDetached()
+        IdleState.idle = newState
     }
     
     Rectangle {
         anchors.fill: parent
         color: idleButton.containsMouse ? Colors.tertiary : Qt.alpha(Colors.tertiaryContainer, 0.25)
-        radius: Config.radius
+        radius: Config.radius_fun(idleButton.height)
         border.width: Config.border_width
-        border.color: idleButton.containsMouse ? Colors.tertiaryContainer_fg
+        border.color: (
-            : Colors.secondaryContainer_fg
+            idleButton.containsMouse ? Colors.tertiaryContainer_fg :
-
+            Colors.secondaryContainer_fg
-        Item {
+        )
-            anchors.fill: parent
-            Process {
-                id: idleScript
-                command: ["sh", "-c", Quickshell.env("HOME") + "/.config/quickshell/modules/bar/scripts/Idle.sh"]
-                stdout: StdioCollector {
-                    onStreamFinished: Global.IdleState.idle ? console.log(`Disabling Idle`) : console.log(`Enabling Idle`)
-                }
-            }
-
-            MouseArea {
-                hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor
-                anchors.fill: parent
-                onClicked: {
-                    console.log("Running Idle Script")
-                    idleScript.startDetached()
-                    Global.IdleState.idle = !Global.IdleState.idle
-                    console.log("Current Idle State: " + Global.IdleState.idle)
-                }
-            }
-        }
 
         Text {
             id: idleText
             anchors.centerIn: parent
-            text: Global.IdleState.idle ? "" : ""
+            text: IdleState.idle ? "" : ""
-            font.pixelSize: Config.big_font_size(bar.height)
+            font.pixelSize: Config.iconSize(idleButton.height)
             font.family: Config.font
-            color: idleButton.containsMouse ? Colors.tertiary_fg : idleText.text == "" ? Colors.primary : Colors.tertiary
+            color: (
+                idleButton.containsMouse ? Colors.tertiary_fg :
+                IdleState.idle ? Colors.tertiary
+                : Colors.primary
+            )
         }
     }
 
-
     Process {
-        id: idleStatusScript
+        id: idleToggleProc
-        command: ["sh", "-c", Quickshell.env("HOME") + "/.config/quickshell/modules/bar/scripts/Idle.sh" + " --status"]
+        command: ["sh", "-c", Config.configDir + "/modules/bar/scripts/Idle.sh"]
-        stdout: StdioCollector {
+        running: false
-            onStreamFinished: {
-                Global.IdleState.idle = this.text.trim() === "0" ? 1 : 0
-            }
-        }
     }
 }

modules/bar/widgets/MenuButton.qml

@@ -1,45 +1,38 @@
 import QtQuick
 import Quickshell
-import Quickshell.Hyprland
 import Quickshell.Io
-import "../../../colors"
 import "../../../config"
 
 MouseArea {
-    id: archButton
+    id: menuButton
-    width: Math.max(bar.height, archButtonText.width+Config.spacing)
+    width: Math.max(bar.height, menuText.width + Config.spacing)
     height: bar.height
     hoverEnabled: true
     cursorShape: Qt.PointingHandCursor
 
     onClicked: {
-        archButtonScript.running = true
+        menuProc.running = true
     }
     
     Rectangle {
         anchors.fill: parent
-        color: archButton.containsMouse ? Colors.secondaryContainer_fg : Qt.alpha(Colors.secondary, 0.75)
+        color: menuButton.containsMouse ? Colors.secondaryContainer_fg : Qt.alpha(Colors.secondary, 0.75)
         radius: Config.radius
+        border.width: 0
 
         Text {
-            id: archButtonText
+            id: menuText
             anchors.centerIn: parent
             text: "󰣇"
-            font.pixelSize: Config.big_font_size(bar.height)
+            font.pixelSize: Config.bigIconSize(menuButton.height)
             font.family: Config.font
-            color: archButton.containsMouse ? Colors.secondaryContainer : Colors.secondary_fg
+            color: menuButton.containsMouse ? Colors.secondaryContainer : Colors.secondary_fg
         }
     }
 
     Process {
-        id: archButtonScript
+        id: menuProc
         command: ["sh", "-c", "wofi --show drun"]
         running: false
-
-        stdout: StdioCollector {
-            onStreamFinished: {
-                console.log("Opening wofi")
-            }
-        }
     }
 }

modules/bar/widgets/Network.qml

@@ -1,23 +1,19 @@
 import QtQuick
 import Quickshell
-import Quickshell.Hyprland
-import Quickshell.Io
-import "../../../colors"
 import "../../../config"
-import "../states/Network" as Global
+import "../states/Network"
 
 MouseArea {
     id: networkButton
 
-    width: Math.max(networkText.width + Config.spacing*2, bar.height)
+    width: Math.max(networkText.width + Config.spacing_fun(height)*2, height)
     height: bar.height
-
     hoverEnabled: true
     cursorShape: Qt.PointingHandCursor
 
     onClicked: {
-        Global.NetworkState.networkScript.running = true
+        console.log("[Network] Refreshing... current status: " + NetworkState.status)
-        // networkStatus.running = true
+        NetworkState.networkScript.running = true
     }
 
     Rectangle {
@@ -30,31 +26,11 @@ MouseArea {
 
         Text {
             id: networkText
-            text: Global.NetworkState.status
+            text: NetworkState.status
             anchors.centerIn: parent
-            font.pixelSize: Config.big_font_size(bar.height)
+            font.pixelSize: Config.iconSize(bar.height)
             font.family: Config.font
             color: networkButton.containsMouse ? Colors.tertiary_fg : networkText.text === "󰤭 /󱐤" ? Colors.error : Colors.primary
         }
-
-        // Process {
-        //     id: networkStatus
-        //     command: ["sh", "-c", Quickshell.env("HOME") + "/.config/quickshell/modules/bar/scripts/Network.sh"]
-        //     running: true
-
-        //     stdout: StdioCollector {
-        //         onStreamFinished: {
-        //             networkText.text = this.text.trim()
-        //             // console.log("networkScript networkText:", this.text.trim())
-        //         }
-        //     }
-        // }
-
-        // Timer {
-        //     interval: 10000
-        //     running: true
-        //     repeat: true
-        //     onTriggered: networkStatus.running = true
-        // }
     }
 }

modules/bar/widgets/PowerButton.qml

@@ -1,48 +1,30 @@
 import QtQuick
 import Quickshell
-import Quickshell.Hyprland
-import Quickshell.Io
-import "../../../colors"
 import "../../../config"
 
 MouseArea {
     id: powerButton
-    width: Math.max(powerText.width + Config.spacing, bar.height)
+    width: Math.max(powerText.width + Config.spacing_fun(height), height)
     height: bar.height
     hoverEnabled: true
     cursorShape: Qt.PointingHandCursor
+
+    onClicked: {
+        console.log("[PowerButton] Opening wlogout")
+        root.openWlogout()
+    }
     
     Rectangle {
         anchors.fill: parent
         color: powerButton.containsMouse ? Colors.secondaryContainer_fg : Qt.alpha(Colors.secondary, 0.75)
         radius: Config.radius
-
+        border.width: 0
-        Item {
-            anchors.fill: parent
-            // Process {
-            //     id: powerOff
-            //     command: ["wlogout", "-b", "2"]
-            //     stdout: StdioCollector {
-            //         onStreamFinished: console.log(`line read: ${this.text}`)
-            //     }
-            // }
-
-            MouseArea {
-                hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor
-                anchors.fill: parent
-                onClicked: {
-                    console.log("Running PowerOff Menu")
-                    root.openWlogout()
-                }
-            }
-        }
 
         Text {
             id: powerText
             anchors.centerIn: parent
             text: ""
-            font.pixelSize: Config.big_font_size(bar.height)
+            font.pixelSize: Config.bigIconSize(bar.height)
             font.family: Config.font
             color:powerButton.containsMouse ? Colors.secondaryContainer : Colors.secondary_fg
         }

modules/bar/widgets/Tray.qml

@@ -1,29 +1,30 @@
 import QtQuick
 import Quickshell
-import Quickshell.Hyprland
 import Quickshell.Services.SystemTray
 import Quickshell.Io
-import "../../../colors"
 import "../../../config"
 
+
 Row {   // Workspace Row
     id: trayRow
-    spacing: Math.floor(bar.height/8)
+    spacing: Config.small_spacing_fun(height)
 
     Repeater {
         model: SystemTray.items
         Column{
-            Rectangle{
+            Item {
-                width: iconImage.width + Config.spacing
+                width: 1
-                height: Math.floor((bar.height-trayItem.height)/2)
+                height: Math.floor((bar.height - trayItem.height) / 2)
-                color: "transparent"
             }
+
             Rectangle {  //trayItem
                 id: trayItem
-                width: iconImage.width + Config.spacing
+                width: iconImage.width + Config.spacing_fun(bar.height)
-                height: iconImage.height + Config.spacing
+                height: iconImage.height + Config.spacing_fun(bar.height)
-                radius: Config.small_radius
+                radius: Config.small_radius_fun(height)
-                color: "transparent"
+                color: trayArea.containsMouse ? Colors.tertiaryContainer
+                    : modelData.active ? Colors.primaryContainer
+                    : Colors.secondaryContainer
                 border.width: Config.border_width
 
                 Process {
@@ -33,88 +34,59 @@ Row {   // Workspace Row
                 }
 
                 MouseArea {
-                    id: workspaceButton
+                    id: trayArea
                     hoverEnabled: true
                     cursorShape: Qt.PointingHandCursor
                     anchors.fill: parent
                     acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
+                    property int clickX: 0
+                    property int clickY: 0
                     onClicked: (mouse) => {
                         switch (mouse.button) {
                         case Qt.LeftButton:
-                            if (!modelData.onlyMenu) {
+                            console.log("[Tray] Activate: " + modelData.title)
-                                modelData.activate()
+                            if (!modelData.onlyMenu) modelData.activate()
-                                console.log('Activcate function of ', modelData.title)
+                            if (modelData.title.trim() === "Steam") {
-                            }
+                                console.log("[Tray] Starting Steam")
-                            if (modelData.title.trim()==="Steam") {
                                 steamRunner.startDetached()
                             }
                             break
+                        case Qt.RightButton:
+                            console.log("[Tray] Context menu: " + modelData.title)
+                            clickX = mouse.x
+                            clickY = mouse.y
+                            trayMenu.menu = modelData.menu
+                            trayMenu.open()
+                            break
                         case Qt.MiddleButton:
+                            console.log("[Tray] Secondary activate: " + modelData.title)
                             modelData.secondaryActivate()
                             break
-                        // case Qt.RightButton:
-                        //     if (modelData.hasMenu) {
-                        //         console.log('Activcate menu of ', modelData.title)
-                        //         menuAnchor.open()
-                        //     }
-                        //     break
                         }
                     }
+                }
 
-                    // QsMenuAnchor {
+                QsMenuAnchor {
-                    //     id: menuAnchor
+                    id: trayMenu
-                    //     menu: modelData.menu
+                    anchor {
-                    //     anchor.window: menuHost
+                        item: trayArea
-                    // }
+                        edges: Edges.Top | Edges.Left
-
+                        gravity: Edges.Bottom | Edges.Right
-                    Rectangle {
+                        adjustment: PopupAdjustment.FlipX | PopupAdjustment.SlideY
-                        anchors.fill: parent
+                        onAnchoring: {
-                        color:  workspaceButton.containsMouse ? Colors.tertiaryContainer
+                            rect.x = trayArea.clickX
-                            : modelData.active ? Colors.primaryContainer
+                            rect.y = trayArea.clickY
-                            : Colors.secondaryContainer
+                            rect.w = 1
-                        border.color: workspaceButton.containsMouse ? Colors.tertiaryContainer_fg
+                            rect.h = 1
-                            : modelData.active ? Colors.primaryContainer_fg
+                        }
-                            : Colors.secondaryContainer_fg
-                        radius: Config.radius
                     }
-
                 }
 
                 Image { // Image
                     id: iconImage
-                    // source: modelData.icon; Does not work for some tray icons
-                    fillMode: Image.PreserveAspectCrop
-
                     anchors.centerIn: parent
-
+                    width: Config.halfBigIconSize(bar.height)
-                    width: Config.big_font_size(bar.height)
+                    height: Config.halfBigIconSize(bar.height)
-                    height: Config.big_font_size(bar.height)
-
-                    // Component.onCompleted: {
-                    //     // Default to the original icon
-                    //     let src = modelData.icon;
-                    //     // console.log("########## icon: " + modelData.icon)
-
-                    //     // Check if there is a "?" in the URL (custom path)
-                    //     if (src.includes('goxlr')) {
-                    //         let pathMatch = src.match(/path=([^&]+)/);
-                    //         if (pathMatch && pathMatch[1]) {
-
-                    //             let folderPath = pathMatch[1];
-                    //             // Build a file:// URL pointing to the actual icon file
-                    //             let segments = folderPath.split('/');
-                    //             let fileName = segments[segments.length - 1] + "-icon.png";
-                    //             console.log("########## filename: " + fileName)
-                    //             console.log("########## icon: " + modelData.icon)
-                    //             src = "file://" + pathMatch[1] + "/" + fileName;
-                    //         }
-                    //     }
-
-                    //     // Set the resolved source
-                    //     iconImage.source = src;
-
-                    //     // console.log("Resolved icon source:", src);
-                    // }
                     asynchronous: true
                     cache: true
                 }
@@ -127,21 +99,25 @@ Row {   // Workspace Row
                     onTriggered: {
                         let src = modelData.icon;
                         // console.log("########## icon: " + modelData.icon)
-
+                        // console.log("########## name: " + modelData.title)
-                        // Check if there is a "?" in the URL (custom path)
+                        if (modelData.title.includes('GoXLR')) {
-                        if (src.includes('goxlr')) {
+                            // console.log("[Tray] Resolving GoXLR icon path")
                             let pathMatch = src.match(/path=([^&]+)/);
                             if (pathMatch && pathMatch[1]) {
 
                                 let folderPath = pathMatch[1];
-                                // Build a file:// URL pointing to the actual icon file
                                 let segments = folderPath.split('/');
                                 let fileName = segments[segments.length - 1] + "-icon.png";
-                                // console.log("########## filename: " + fileName)
-                                // console.log("########## icon: " + modelData.icon)
                                 src = "file://" + pathMatch[1] + "/" + fileName;
                             }
                         }
+                        // if (modelData.title.includes('Nextcloud')) {
+                        //     src = Quickshell.iconPath("Nextcloud")
+                        // }
+                        // console.log("########## icon: " + src)
+                        if (src.exists) {
+                            console.log("########## icon: " + src)
+                        }
 
                         // Set the resolved source
                         iconImage.source = src;

modules/bar/widgets/Workspaces.qml

@@ -1,119 +1,83 @@
 import QtQuick
 import Quickshell
 import Quickshell.Hyprland
-import Quickshell.Io
-import "../../../colors"
 import "../../../config"
+import "../states/Apps"
 
-Row {   // Workspace Row
+Row {
     id: workspacesRow
 
     required property HyprlandMonitor thisMonitor
-    spacing: Math.floor(bar.height/4)
+    spacing: Config.spacing_fun(bar.height)
 
-    // Get infos of Type Unknown
+    Repeater {
-    // Repeater {
-    //     model: Hyprland.workspaces
-
-    //     Rectangle {
-    //         Component.onCompleted: {
-    //             console.log("roles:")
-    //             console.log("id:", modelData.id)
-    //             console.log("monitor:", modelData.monitor)
-    //             console.log("monitorId:", modelData.monitorId)
-    //             console.log("name:", modelData.name)
-    //         }
-    //     }
-    // }
-
-    Repeater {   // repeats workspaces
         model: Hyprland.workspaces
         Loader {
             active: modelData.monitor === thisMonitor
-            sourceComponent: Rectangle {  //workspace
+            sourceComponent: Rectangle {
-                // visible: modelData.monitor === thisMonitor
+                id: wsRect
-                width: workspaceText.text.length === 0 ? Math.max(workspaceNum.width + Config.spacing*2, workspaceNum.height + Config.spacing) : Math.max(workspaceNum.width + workspaceText.width + Config.spacing*2, bar.height)
+                property var workspaceData: modelData
-                height: workspaceNum.height + Config.spacing
+
-                radius: Config.small_radius
+                width: {
-                color: (
+                    var cw = wsNum.width
-                    workspaceButton.containsMouse ? Colors.tertiaryContainer :
+                    if (wsIconsRow.children.length > 0)
-                    modelData.active ? Colors.primaryContainer :
+                        cw += Config.spacing_fun(workspacesRow.height) + wsIconsRow.width
-                    Colors.secondaryContainer
+                    Math.max(cw + Config.spacing_fun(workspacesRow.height), wsNum.height + Config.spacing_fun(workspacesRow.height))
-                )
+                }
-                border.color: (
+                height: wsNum.height + Config.spacing_fun(wsNum.height)
-                    workspaceButton.containsMouse ? Colors.tertiaryContainer_fg :
+                radius: Config.radius_fun(height)
-                    modelData.active ? Colors.primaryContainer_fg :
+                color: wsArea.containsMouse ? Colors.tertiaryContainer
-                    Colors.secondaryContainer_fg
+                    : workspaceData.active ? Colors.primaryContainer
-                )
+                    : Colors.secondaryContainer
+                border.color: wsArea.containsMouse ? Colors.tertiaryContainer_fg
+                    : workspaceData.active ? Colors.primaryContainer_fg
+                    : Colors.secondaryContainer_fg
                 border.width: Config.border_width
 
                 MouseArea {
-                    id: workspaceButton
+                    id: wsArea
                     hoverEnabled: true
                     cursorShape: Qt.PointingHandCursor
                     anchors.fill: parent
                     onClicked: {
-                        Hyprland.dispatch("workspace " + modelData.id)
+                        console.log("[Workspaces] Switch to workspace: " + workspaceData.id)
-                        // console.log("workspaceText: " + workspaceText.text.length)
+                        Hyprland.dispatch("workspace " + workspaceData.id)
                     }
-                    
+
                     Row {
-                        id: workspaceRow
                         anchors.centerIn: parent
-                        spacing: Math.floor(bar.height/8)
+                        spacing: Config.spacing_fun(parent.height)
-                        leftPadding: workspaceText.text.length === 0 ? 0 : Math.floor(bar.height / 4)
 
                         Text {
-                            id: workspaceNum
+                            id: wsNum
-                            text: modelData.id
+                            text: workspaceData.id
                             anchors.verticalCenter: parent.verticalCenter
-                            color: workspaceButton.containsMouse ? Colors.tertiary
+                            color: wsArea.containsMouse ? Colors.tertiary
-                                : modelData.active ? Colors.primary
+                                : workspaceData.active ? Colors.primary
                                 : Colors.secondary
-
+                            font.pixelSize: Config.iconSize(bar.height)
-                            font.pixelSize: Config.medium_scaling(bar.height)
                             font.family: Config.font
                             font.bold: true
                         }
 
-                        Text {
+                        Row {
-                            id: workspaceText
+                            id: wsIconsRow
-                            text: ""
+                            spacing: Config.spacing_fun(workspacesRow.height)
                             anchors.verticalCenter: parent.verticalCenter
-                            color: workspaceButton.containsMouse ? Colors.tertiary
-                                : modelData.active ? Colors.primary
-                                : Colors.secondary
 
-                            font.pixelSize: Config.medium_scaling(bar.height)*0.8
+                            Repeater {
-                            font.family: Config.font
+                                model: AppsState.iconsForWorkspace(workspaceData.id)
-                            font.letterSpacing: Math.floor(Config.medium_scaling(bar.height) * (2 / 3))
+                                delegate: Text {
-                        }
+                                    text: modelData
-                    }
+                                    color: wsArea.containsMouse ? Colors.tertiary
-                }
+                                        : Colors.secondary
-
+                                    font.pixelSize: Config.labelSize(bar.height)
-                Process {
+                                    font.family: Config.font
-                    id: workspaceContent
+                                }
-                    command: ["sh", "-c", Quickshell.env("HOME") + "/.config/quickshell/modules/bar/scripts/Apps.sh " + modelData.id]
-                    running: true
-
-                    stdout: StdioCollector {
-                        onStreamFinished: {
-                            if (this.text.length > 1) {
-                                workspaceText.text = this.text
-                            } else {
-                                workspaceText.text = ""
                             }
-                            // console.log("workspaceScript output:", workspaceText.text, workspaceText.text.length)
                         }
                     }
                 }
-
-                Timer {
-                    interval: Config.fast_reload_interval
-                    running: true
-                    repeat: true
-                    onTriggered: workspaceContent.running = true
-                }
             }
         }
     }
@@ -122,6 +86,6 @@ Row {   // Workspace Row
         visible: Hyprland.workspaces.length === 0
         text: "No Workspaces"
         color: Colors.error
-        font.pixelSize: Config.big_font_size(bar.height)
+        font.pixelSize: Config.iconSize(bar.height)
     }
 }

modules/jl/JLearner.qml

@@ -4,7 +4,7 @@ import QtQuick.Controls
 import Quickshell.Wayland
 import Quickshell.Hyprland
 import Quickshell.Io
-import "../../colors"
+import "../../config"
 import "./modules"
 
 PanelWindow {
@@ -72,6 +72,7 @@ PanelWindow {
                         text: "Language Learner"
                         anchors.centerIn: parent
                         font.pixelSize: parent.height * 0.8
+                        font.family: Config.font
                         color: Colors.tertiary
                     }
                 }

modules/jl/modules/JLearnerResult.qml

@@ -1,6 +1,6 @@
 import QtQuick
 import QtQuick.Controls
-import "../../../colors"
+import "../../../config"
 
 Item { // Chooser
     id: learnerResult
@@ -94,6 +94,7 @@ Item { // Chooser
                                     anchors.verticalCenterOffset: -parent.height * 0.125
                                     anchors.horizontalCenterOffset: parent.width * 0.1
                                     font.pixelSize: parent.height * 0.8
+                                    font.family: Config.jfont
                                     color: modelData.correctness ? "green" : "red"
                                 }
                             }
@@ -108,7 +109,7 @@ Item { // Chooser
                                 border.color: Colors.primaryContainer_fg
 
                                 Image {
-                                    source: modelData.correctness ? "../../../colors/icons/correct.svg" : "../../../colors/icons/wrong.svg"
+                                    source: modelData.correctness ? Config.configDir+"/modules/jl/assets/correct.svg" : Config.configDir+"/modules/jl/assets/wrong.svg"
                                     anchors.centerIn: parent
                                     width: parent.height*0.8
                                     height: parent.height*0.8
@@ -135,6 +136,7 @@ Item { // Chooser
                                     anchors.centerIn: parent
                                     anchors.horizontalCenterOffset: 10
                                     font.pixelSize: parent.height * 0.8
+                                    font.family: Config.font
                                     color: modelData.correctness ? "green" : "red"
                                 }
                             }
@@ -180,6 +182,7 @@ Item { // Chooser
                                 anchors.centerIn: parent
                                 anchors.verticalCenterOffset: -parent.height * 0.1
                                 font.pixelSize: parent.height * 0.8
+                                font.family: Config.font
                                 color: Colors.primary
                             }
                         }
@@ -199,6 +202,7 @@ Item { // Chooser
                                 text: "[" + results[results.length-1].correct + "]"
                                 anchors.centerIn: parent
                                 font.pixelSize: learnerLastResultKana.font.pixelSize/2
+                                font.family: Config.font
                                 color: Colors.primary
                             }
                         }
@@ -221,6 +225,7 @@ Item { // Chooser
                             width: parent.width
                             horizontalAlignment: Text.AlignHCenter
                             font.pixelSize: Math.min(parent.width / text.length * 1.2, parent.height * 0.8)
+                            font.family: Config.font
                             color: Colors.primary
                         }
                     }
@@ -253,6 +258,7 @@ Item { // Chooser
                                     text: "Again"
                                     anchors.centerIn: parent
                                     font.pixelSize: Math.min(parent.width / text.length * 1.2, parent.height * 0.8)
+                                    font.family: Config.font
                                     color: parent.parent.containsMouse ? Colors.secondary_fg : Colors.secondary
                                 }
                             }
@@ -281,6 +287,7 @@ Item { // Chooser
                                     text: "Menu"
                                     anchors.centerIn: parent
                                     font.pixelSize: Math.min(parent.width / text.length * 1.2, parent.height * 0.8)
+                                    font.family: Config.font
                                     color: parent.parent.containsMouse ? Colors.secondary_fg : Colors.secondary
                                 }
                             }

modules/jl/modules/KanaVoicing.qml

@@ -1,6 +1,6 @@
 import QtQuick
 import QtQuick.Controls
-import "../../../colors"
+import "../../../config"
 
 Item { // Kana_Try
     id: kanaVoicing
@@ -96,6 +96,7 @@ Item { // Kana_Try
                 text: "Im Spiel - Runde: " + kanaVoicing.roundNum
                 anchors.centerIn: parent
                 font.pixelSize: parent.height * 0.6
+                font.family: Config.font
                 color: Colors.primary
             }
         }
@@ -116,6 +117,7 @@ Item { // Kana_Try
                 text: typeof kanaVoicing.currentKana.hira === "undefined" ? "" : kanaVoicing.currentKana.hira
                 anchors.centerIn: parent
                 font.pixelSize: Math.min(parent.width / text.length * 1.2, parent.height * 0.8)
+                font.family: Config.jfont
                 color: Colors.primary
             }
         }

modules/jl/modules/ModeChooser.qml

@@ -1,6 +1,6 @@
 import QtQuick
 import QtQuick.Controls
-import "../../../colors"
+import "../../../config"
 
 Item { // Chooser
     id: languageChooser
@@ -29,6 +29,7 @@ Item { // Chooser
                 text: "Wähle ein Modus:"
                 anchors.centerIn: parent
                 font.pixelSize: parent.height * 0.6
+                font.family: Config.font
                 color: Colors.primary
             }
         }
@@ -61,6 +62,7 @@ Item { // Chooser
                         text: "Kana to Voicing"
                         anchors.centerIn: parent
                         font.pixelSize: Math.min(parent.width / text.length * 1.2, parent.height * 0.8)
+                        font.family: Config.font
                         color: parent.parent.containsMouse ? Colors.secondary_fg : Colors.secondary
                     }
                 }
@@ -89,6 +91,7 @@ Item { // Chooser
                         text: "Voicing to Kana"
                         anchors.centerIn: parent
                         font.pixelSize: Math.min(parent.width / text.length * 1.2, parent.height * 0.8)
+                        font.family: Config.font
                         color: parent.parent.containsMouse ? Colors.secondary_fg : Colors.secondary
                     }
                 }

modules/jl/modules/VoicingKana.qml

@@ -1,6 +1,6 @@
 import QtQuick
 import QtQuick.Controls
-import "../../../colors"
+import "../../../config"
 
 Item { // Kana_Try
     id: voicingKana
@@ -141,6 +141,7 @@ Item { // Kana_Try
                 text: "Runde: " + roundNum + " - [" + targetKana.voice.join("|") + "]:"
                 anchors.centerIn: parent
                 font.pixelSize: parent.height * 0.6
+                font.family: Config.font
                 color: Colors.primary
             }
         }
@@ -203,7 +204,8 @@ Item { // Kana_Try
                                 anchors.centerIn: parent
                                 anchors.verticalCenterOffset: -parent.height * 0.1
                                 font.pixelSize: parent.height * 0.8
-                        color: parent.parent.containsMouse ? Colors.secondary_fg : Colors.secondary
+                                font.family: Config.jfont
+                                color: parent.parent.containsMouse ? Colors.secondary_fg : Colors.secondary
                             }
                         }
                     }
@@ -227,6 +229,7 @@ Item { // Kana_Try
                 text: "Wähle das richtige Zeichen"
                 anchors.centerIn: parent
                 font.pixelSize: parent.height * 0.6
+                font.family: Config.font
                 color: Colors.primary
             }
         }

modules/wlogout/WLogout.qml

@@ -4,8 +4,7 @@ import Quickshell
 import Quickshell.Io
 import Quickshell.Wayland
 
-import "../../colors"
+import "../../config"
-import "../../states/wallpaperdir" as Global
 
 Variants {
 	id: root
@@ -33,7 +32,7 @@ Variants {
 			Keys.onPressed: event => {
 				if (event.key == Qt.Key_Escape) {
 					console.log("Pressed Escape, closing Wallpaper Picker")
-					console.log("Wallpaper Dir:", Global.WallpaperState.wallpaperDir)
+					console.log("Wallpaper Dir:", Config.wallpaperDir)
 					wlogoutLoader.active = false
 				} else {
 					for (let i = 0; i < buttons.length; i++) {
@@ -56,7 +55,7 @@ Variants {
 
 			Image {
 				anchors.fill: parent
-				source: Global.WallpaperState.wallpaperDir + "/Static/blurred.jpg"
+				source: Config.wallpaperDir + "/Static/blurred.jpg"
 				fillMode: Image.PreserveAspectCrop
 			}
 

modules/wlogout/Wlogout.qml

@@ -1,10 +1,11 @@
 import QtQuick
 import Quickshell
+import "../../config"
 
 ShellRoot {
 	WLogout {
 		LogoutButton {
-			command: Quickshell.env("HOME") + "/.config/quickshell/modules/wlogout/scripts/lock.sh"
+			command: Config.configDir + "/modules/wlogout/scripts/lock.sh"
 			keybind: Qt.Key_L
 			text: "Lock"
 			icon: "lock"
@@ -12,7 +13,7 @@ ShellRoot {
 		}
 
 		LogoutButton {
-			command: Quickshell.env("HOME") + "/.config/quickshell/modules/wlogout/scripts/logout.sh"
+			command: Config.configDir + "/modules/wlogout/scripts/logout.sh"
 			keybind: Qt.Key_E
 			text: "Logout"
 			icon: "logout"
@@ -20,7 +21,7 @@ ShellRoot {
 		}
 
 		LogoutButton {
-			command: Quickshell.env("HOME") + "/.config/quickshell/modules/wlogout/scripts/suspend.sh"
+			command: Config.configDir + "/modules/wlogout/scripts/suspend.sh"
 			keybind: Qt.Key_U
 			text: "Suspend"
 			icon: "suspend"
@@ -28,7 +29,7 @@ ShellRoot {
 		}
 
 		LogoutButton {
-			command: Quickshell.env("HOME") + "/.config/quickshell/modules/wlogout/scripts/hibernate.sh"
+			command: Config.configDir + "/modules/wlogout/scripts/hibernate.sh"
 			keybind: Qt.Key_H
 			text: "Hibernate"
 			icon: "hibernate"
@@ -36,7 +37,7 @@ ShellRoot {
 		}
 
 		LogoutButton {
-			command: Quickshell.env("HOME") + "/.config/quickshell/modules/wlogout/scripts/shutdown.sh"
+			command: Config.configDir + "/modules/wlogout/scripts/shutdown.sh"
 			keybind: Qt.Key_K
 			text: "Shutdown"
 			icon: "shutdown"
@@ -44,7 +45,7 @@ ShellRoot {
 		}
 
 		LogoutButton {
-			command: Quickshell.env("HOME") + "/.config/quickshell/modules/wlogout/scripts/reboot.sh"
+			command: Config.configDir + "/modules/wlogout/scripts/reboot.sh"
 			keybind: Qt.Key_R
 			text: "Reboot"
 			icon: "reboot"

modules/wlogout/WlogoutLoader.qml

@@ -2,27 +2,12 @@ import QtQuick
 import Quickshell
 import Quickshell.Hyprland
 import Quickshell.Io
-
+import "../../config"
-import "../../states/wallpaperdir" as Global
 
 
 Item {  // container, invisible
     id: wlLoader
 
-    Process {
-        id: getWallpaper
-        command: ["sh", "-c", Quickshell.env("HOME") + "/.config/quickshell/scripts/wallpaper_dir.sh"]
-        stdout: StdioCollector {
-            onStreamFinished: function() {
-                console.log("getWallpaper: " + this.text)
-
-                Global.WallpaperState.wallpaperDir = this.text.trim()
-
-                wlogoutLoader.active = true
-            }
-        }
-    }
-
     Loader {
         id: wlogoutLoader
         active: false
@@ -37,8 +22,7 @@ Item {  // container, invisible
 
         onPressed: {
             console.log("Pressed Meta+Shift+W (Hyprland global shortcut)")
-            getWallpaper.running = true
+            wlogoutLoader.active = !wlogoutLoader.active
-            // wlogoutLoader.active = !wlogoutLoader.active
         }
     }
 

modules/wp/WallpaperPicker.qml

@@ -4,8 +4,7 @@ import QtQuick.Controls
 import Quickshell.Hyprland
 import Quickshell.Io
 import Qt.labs.folderlistmodel
-import "../../colors"
+import "../../config"
-import "../../states/wallpaperdir" as Global
 
 PanelWindow {
     id: picker
@@ -206,7 +205,7 @@ PanelWindow {
                             anchors.fill: parent
                             Process {
                                 id: wallpaperProcess
-                                command: ["sh", "-c", Quickshell.env("HOME") + "/.config/quickshell/modules/wp/set-wallpaper.sh" + " " + model.filePath + " &"]
+                                command: ["sh", "-c", Config.configDir + "/modules/wp/set-wallpaper.sh" + " " + model.filePath + " &"]
                                 stdout: StdioCollector {
                                     onStreamFinished: console.log('line read:', this.text)
                                 }

modules/wp/WallpaperPickerLoader.qml

@@ -2,14 +2,15 @@ import QtQuick
 import Quickshell
 import Quickshell.Hyprland
 import Quickshell.Io
+import "../../config"
 
 
-Item {  // container, invisible
+Item {
     id: wLoader
 
     Process {
         id: generateThumbs
-        command: ["sh", "-c", Quickshell.env("HOME") + "/.config/quickshell/modules/wp/generate-wallpaper-thumbs.sh"]
+        command: ["sh", "-c", Config.configDir + "/modules/wp/generate-wallpaper-thumbs.sh"]
         stdout: StdioCollector {
             onStreamFinished: console.log(this.text)
         }

modules/wp/set-wallpaper.sh

@@ -61,7 +61,7 @@ fi
 if [ -x "/usr/bin/matugen" ]; then
     matugen image $image --mode dark --source-color-index 0
 else
-    cp $HOME/.config/quickshell/colors/example_colors.qml $HOME/.config/quickshell/colors/Colors.qml
+    cp "$SCRIPT_DIR/../../assets/example_colors.qml" "$SCRIPT_DIR/../../config/Colors.qml"
 fi
 
 ### Blured Wallpaper for wlogout

states/wallpaperdir/WallpaperState.qml

@@ -1,7 +0,0 @@
-pragma Singleton
-import QtQuick
-import Quickshell
-
-QtObject {
-    property string wallpaperDir: Quickshell.env("HOME") + "/Pictures/Wallpapers"
-}

states/wallpaperdir/qmldir

@@ -1 +0,0 @@
-singleton WallpaperState WallpaperState.qml