Bar: compact mode works pretty well but need some more testing.

Commons/Settings.qml

@@ -121,6 +121,12 @@ Singleton {
         }
       }
     }
+
+    // Upgrade the density of the bar so the look stay the same for people who upgrade.
+    if (adapter.settingsVersion == 2) {
+      adapter.bar.density = "comfortable"
+      adapter.settingsVersion++
+    }
   }
 
   // -----------------------------------------------------
@@ -259,13 +265,14 @@ Singleton {
     JsonAdapter {
       id: adapter
 
-      property int settingsVersion: 2
+      property int settingsVersion: 3
 
       // bar
       property JsonObject bar: JsonObject {
         property string position: "top" // "top", "bottom", "left", or "right"
         property real backgroundOpacity: 1.0
         property list<string> monitors: []
+        property string density: "default" // "compact", "default", "comfortable"
 
         // Floating bar settings
         property bool floating: false

Commons/Style.qml

@@ -75,6 +75,26 @@ Singleton {
   property real sliderWidth: 200
 
   // Bar Dimensions
-  property real barHeight: (Settings.data.bar.position === "left" || Settings.data.bar.position === "right") ? 39 : 37
+  property real barHeight: {
-  property real capsuleHeight: Math.round(barHeight * 0.73)
+    if (Settings.data.bar.density === "compact") {
+      return (Settings.data.bar.position === "left" || Settings.data.bar.position === "right") ? 25 : 23
+    }
+    if (Settings.data.bar.density === "default") {
+      return (Settings.data.bar.position === "left" || Settings.data.bar.position === "right") ? 29 : 27
+    }
+    if (Settings.data.bar.density === "comfortable") {
+      return (Settings.data.bar.position === "left" || Settings.data.bar.position === "right") ? 39 : 37
+    }
+  }
+  property real capsuleHeight: {
+    if (Settings.data.bar.density === "compact") {
+      return barHeight
+    }
+    if (Settings.data.bar.density === "default") {
+      return barHeight
+    }
+    if (Settings.data.bar.density === "comfortable") {
+      return Math.round(barHeight * 0.73)
+    }
+  }
 }

Modules/Bar/Widgets/ActiveWindow.qml

@@ -37,9 +37,19 @@ Item {
   readonly property real maxWidth: minWidth * 2
 
   readonly property string barPosition: Settings.data.bar.position
+  readonly property bool isVertical: barPosition === "left" || barPosition === "right"
+  readonly property bool compact: (Settings.data.bar.density === "compact")
+
   implicitHeight: (barPosition === "left" || barPosition === "right") ? calculatedVerticalHeight() : Math.round(Style.barHeight * scaling)
   implicitWidth: (barPosition === "left" || barPosition === "right") ? Math.round(Style.capsuleHeight * 0.8 * scaling) : (horizontalLayout.implicitWidth + Style.marginM * 2 * scaling)
 
+  readonly property real textSize: {
+    var base = isVertical ? width : height
+    return Math.max(1, compact ? base * 0.43 : base * 0.33)
+  }
+
+  readonly property real iconSize: textSize * 1.25
+
   function getTitle() {
     try {
       return CompositorService.focusedWindowTitle !== "(No active window)" ? CompositorService.focusedWindowTitle : ""
@@ -122,7 +132,7 @@ Item {
     id: fullTitleMetrics
     visible: false
     text: getTitle()
-    font.pointSize: Style.fontSizeS * scaling
+    font.pointSize: textSize
     font.weight: Style.fontWeightMedium
   }
 
@@ -136,7 +146,7 @@ Item {
     width: (barPosition === "left" || barPosition === "right") ? Math.round(Style.capsuleHeight * scaling) : (horizontalLayout.implicitWidth + Style.marginM * 2 * scaling)
     height: (barPosition === "left" || barPosition === "right") ? Math.round(Style.capsuleHeight * scaling) : Math.round(Style.capsuleHeight * scaling)
     radius: width / 2
-    color: Color.mSurfaceVariant
+    color: compact ? Color.transparent : Color.mSurfaceVariant
 
     Item {
       id: mainContainer
@@ -193,7 +203,7 @@ Item {
           Layout.alignment: Qt.AlignVCenter
           horizontalAlignment: Text.AlignLeft
           text: getTitle()
-          font.pointSize: Style.fontSizeS * scaling
+          font.pointSize: textSize
           font.weight: Style.fontWeightMedium
           elide: mouseArea.containsMouse ? Text.ElideNone : Text.ElideRight
           verticalAlignment: Text.AlignVCenter

Modules/Bar/Widgets/Battery.qml

@@ -84,6 +84,7 @@ Item {
   NPill {
     id: pill
 
+    compact: (Settings.data.bar.density === "compact")
     rightOpen: BarWidgetRegistry.getNPillDirection(root)
     icon: testMode ? BatteryService.getIcon(testPercent, testCharging, true) : BatteryService.getIcon(percent, charging, isReady)
     text: (isReady || testMode) ? Math.round(percent) : "-"

Modules/Bar/Widgets/Bluetooth.qml

@@ -14,6 +14,7 @@ NIconButton {
   property real scaling: 1.0
 
   baseSize: Style.capsuleHeight
+  compact: (Settings.data.bar.density === "compact")
   colorBg: Color.mSurfaceVariant
   colorFg: Color.mOnSurface
   colorBorder: Color.transparent

Modules/Bar/Widgets/Brightness.qml

@@ -76,6 +76,7 @@ Item {
   NPill {
     id: pill
 
+    compact: (Settings.data.bar.density === "compact")
     rightOpen: BarWidgetRegistry.getNPillDirection(root)
     icon: getIcon()
     autoHide: false // Important to be false so we can hover as long as we want

Modules/Bar/Widgets/Clock.qml

@@ -29,6 +29,7 @@ Rectangle {
   }
 
   readonly property string barPosition: Settings.data.bar.position
+  readonly property bool compact: (Settings.data.bar.density === "compact")
 
   // Resolve settings: try user settings or defaults from BarWidgetRegistry
   readonly property bool use12h: widgetSettings.use12HourClock !== undefined ? widgetSettings.use12HourClock : widgetMetadata.use12HourClock
@@ -42,12 +43,12 @@ Rectangle {
   implicitHeight: verticalMode ? Math.round(Style.capsuleHeight * 2.5 * scaling) : Math.round(Style.capsuleHeight * scaling) // Match NPill
 
   radius: Math.round(Style.radiusS * scaling)
-  color: Color.mSurfaceVariant
+  color: compact ? Color.transparent : Color.mSurfaceVariant
 
   Item {
     id: clockContainer
     anchors.fill: parent
-    anchors.margins: Style.marginXS * scaling
+    anchors.margins: compact ? 0 : Style.marginXS * scaling
 
     ColumnLayout {
       id: layout

Modules/Bar/Widgets/CustomButton.qml

@@ -49,6 +49,7 @@ Item {
     rightOpen: BarWidgetRegistry.getNPillDirection(root)
     icon: customIcon
     text: _dynamicText
+    compact: (Settings.data.bar.density === "compact")
     autoHide: false
     forceOpen: _dynamicText !== ""
     forceClose: false

Modules/Bar/Widgets/DarkModeToggle.qml

@@ -11,7 +11,7 @@ NIconButton {
 
   icon: "dark-mode"
   tooltipText: "Toggle light/dark mode."
-
+  compact: (Settings.data.bar.density === "compact")
   baseSize: Style.capsuleHeight
   colorBg: Settings.data.colorSchemes.darkMode ? Color.mSurfaceVariant : Color.mPrimary
   colorFg: Settings.data.colorSchemes.darkMode ? Color.mOnSurface : Color.mOnPrimary

Modules/Bar/Widgets/KeepAwake.qml

@@ -12,6 +12,7 @@ NIconButton {
   property real scaling: 1.0
 
   baseSize: Style.capsuleHeight
+  compact: (Settings.data.bar.density === "compact")
   icon: IdleInhibitorService.isInhibited ? "keep-awake-on" : "keep-awake-off"
   tooltipText: IdleInhibitorService.isInhibited ? "Disable keep awake" : "Enable keep awake"
   colorBg: IdleInhibitorService.isInhibited ? Color.mPrimary : Color.mSurfaceVariant

Modules/Bar/Widgets/KeyboardLayout.qml

@@ -42,6 +42,7 @@ Item {
     id: pill
 
     anchors.verticalCenter: parent.verticalCenter
+    compact: (Settings.data.bar.density === "compact")
     rightOpen: BarWidgetRegistry.getNPillDirection(root)
     icon: "keyboard"
     autoHide: false // Important to be false so we can hover as long as we want

Modules/Bar/Widgets/MediaMini.qml

@@ -31,6 +31,7 @@ Item {
   }
 
   readonly property string barPosition: Settings.data.bar.position
+  readonly property bool compact: (Settings.data.bar.density === "compact")
 
   readonly property bool showAlbumArt: (widgetSettings.showAlbumArt !== undefined) ? widgetSettings.showAlbumArt : widgetMetadata.showAlbumArt
   readonly property bool showVisualizer: (widgetSettings.showVisualizer !== undefined) ? widgetSettings.showVisualizer : widgetMetadata.showVisualizer
@@ -81,7 +82,7 @@ Item {
     width: (barPosition === "left" || barPosition === "right") ? Math.round(Style.baseWidgetSize * 0.8 * scaling) : (rowLayout.implicitWidth + Style.marginM * 2 * scaling)
     height: (barPosition === "left" || barPosition === "right") ? Math.round(Style.baseWidgetSize * 0.8 * scaling) : Math.round(Style.capsuleHeight * scaling)
     radius: (barPosition === "left" || barPosition === "right") ? width / 2 : Math.round(Style.radiusM * scaling)
-    color: Color.mSurfaceVariant
+    color: compact ? Color.transparent : Color.mSurfaceVariant
 
     // Used to anchor the tooltip, so the tooltip does not move when the content expands
     Item {

Modules/Bar/Widgets/Microphone.qml

@@ -90,6 +90,7 @@ Item {
     id: pill
     rightOpen: BarWidgetRegistry.getNPillDirection(root)
     icon: getIcon()
+    compact: (Settings.data.bar.density === "compact")
     autoHide: false // Important to be false so we can hover as long as we want
     text: Math.floor(AudioService.inputVolume * 100)
     suffix: "%"

Modules/Bar/Widgets/NightLight.qml

@@ -14,6 +14,7 @@ NIconButton {
   property ShellScreen screen
   property real scaling: 1.0
 
+  compact: (Settings.data.bar.density === "compact")
   baseSize: Style.capsuleHeight
   colorBg: Settings.data.nightLight.forced ? Color.mPrimary : Color.mSurfaceVariant
   colorFg: Settings.data.nightLight.forced ? Color.mOnPrimary : Color.mOnSurface

Modules/Bar/Widgets/NotificationHistory.qml

@@ -50,6 +50,7 @@ NIconButton {
   }
 
   baseSize: Style.capsuleHeight
+  compact: (Settings.data.bar.density === "compact")
   icon: Settings.data.notifications.doNotDisturb ? "bell-off" : "bell"
   tooltipText: Settings.data.notifications.doNotDisturb ? "Notification history.\nRight-click to disable 'Do Not Disturb'." : "Notification history.\nRight-click to enable 'Do Not Disturb'."
   colorBg: Color.mSurfaceVariant

Modules/Bar/Widgets/PowerProfile.qml

@@ -46,6 +46,7 @@ NIconButton {
 
   icon: root.profileIcon()
   tooltipText: root.profileName()
+  compact: (Settings.data.bar.density === "compact")
   colorBg: (PowerProfileService.profile === PowerProfile.Balanced) ? Color.mSurfaceVariant : Color.mPrimary
   colorFg: (PowerProfileService.profile === PowerProfile.Balanced) ? Color.mOnSurface : Color.mOnPrimary
   colorBorder: Color.transparent

Modules/Bar/Widgets/PowerToggle.qml

@@ -11,8 +11,8 @@ NIconButton {
   property ShellScreen screen
   property real scaling: 1.0
 
+  compact: (Settings.data.bar.density === "compact")
   baseSize: Style.capsuleHeight
-
   icon: "power"
   tooltipText: "Power Settings"
   colorBg: Color.mSurfaceVariant

Modules/Bar/Widgets/ScreenRecorderIndicator.qml

@@ -13,6 +13,7 @@ NIconButton {
   visible: ScreenRecorderService.isRecording
   icon: "camera-video"
   tooltipText: "Screen recording is active\nClick to stop recording"
+  compact: (Settings.data.bar.density === "compact")
   baseSize: Style.capsuleHeight
   colorBg: Color.mPrimary
   colorFg: Color.mOnPrimary

Modules/Bar/Widgets/SidePanelToggle.qml

@@ -34,7 +34,7 @@ NIconButton {
   icon: useDistroLogo ? "" : "noctalia"
   tooltipText: "Open side panel."
   baseSize: Style.capsuleHeight
-
+  compact: (Settings.data.bar.density === "compact")
   colorBg: Color.mSurfaceVariant
   colorFg: Color.mOnSurface
   colorBgHover: useDistroLogo ? Color.mSurfaceVariant : Color.mTertiary

Modules/Bar/Widgets/SystemMonitor.qml

@@ -30,6 +30,7 @@ Rectangle {
 
   readonly property string barPosition: Settings.data.bar.position
   readonly property bool isVertical: barPosition === "left" || barPosition === "right"
+  readonly property bool compact: (Settings.data.bar.density === "compact")
 
   readonly property bool showCpuUsage: (widgetSettings.showCpuUsage !== undefined) ? widgetSettings.showCpuUsage : widgetMetadata.showCpuUsage
   readonly property bool showCpuTemp: (widgetSettings.showCpuTemp !== undefined) ? widgetSettings.showCpuTemp : widgetMetadata.showCpuTemp
@@ -38,31 +39,18 @@ Rectangle {
   readonly property bool showNetworkStats: (widgetSettings.showNetworkStats !== undefined) ? widgetSettings.showNetworkStats : widgetMetadata.showNetworkStats
   readonly property bool showDiskUsage: (widgetSettings.showDiskUsage !== undefined) ? widgetSettings.showDiskUsage : widgetMetadata.showDiskUsage
 
+  readonly property real textSize: {
+    var base = isVertical ? width * 0.82 : height
+    return Math.max(1, compact ? base * 0.43 : base * 0.33)
+  }
+
+  readonly property real iconSize: textSize * 1.25
+
   anchors.centerIn: parent
   implicitWidth: isVertical ? Math.round(Style.capsuleHeight * scaling) : Math.round(mainGrid.implicitWidth + Style.marginM * 2 * scaling)
   implicitHeight: isVertical ? Math.round(mainGrid.implicitHeight + Style.marginM * 2 * scaling) : Math.round(Style.capsuleHeight * scaling)
   radius: Math.round(Style.radiusM * scaling)
-  color: Color.mSurfaceVariant
+  color: compact ? Color.transparent : Color.mSurfaceVariant
-
-  // Compact speed formatter for vertical bar display
-  function formatCompactSpeed(bytesPerSecond) {
-    if (!bytesPerSecond || bytesPerSecond <= 0)
-      return "0"
-    const units = ["", "k", "M", "G"]
-    let value = bytesPerSecond
-    let unitIndex = 0
-    while (value >= 1024 && unitIndex < units.length - 1) {
-      value = value / 1024.0
-      unitIndex++
-    }
-    // Promote at ~100 of current unit (e.g., 100k -> ~0.1M shown as 0.1M or 0M if rounded)
-    if (unitIndex < units.length - 1 && value >= 100) {
-      value = value / 1024.0
-      unitIndex++
-    }
-    const display = (value >= 10) ? Math.round(value).toString() : value.toFixed(1)
-    return display + units[unitIndex]
-  }
 
   GridLayout {
     id: mainGrid
@@ -95,7 +83,7 @@ Rectangle {
         NText {
           text: isVertical ? `${Math.round(SystemStatService.cpuUsage)}%` : `${SystemStatService.cpuUsage}%`
           font.family: Settings.data.ui.fontFixed
-          font.pointSize: isVertical ? (Style.fontSizeXXS * scaling) : (Style.fontSizeXS * scaling)
+          font.pointSize: textSize
           font.weight: Style.fontWeightMedium
           Layout.alignment: Qt.AlignCenter
           horizontalAlignment: Text.AlignHCenter
@@ -107,7 +95,7 @@ Rectangle {
 
         NIcon {
           icon: "cpu-usage"
-          font.pointSize: isVertical ? (Style.fontSizeS * scaling) : (Style.fontSizeM * scaling)
+          font.pointSize: iconSize
           Layout.alignment: Qt.AlignCenter
           Layout.row: isVertical ? 1 : 0
           Layout.column: 0
@@ -134,7 +122,7 @@ Rectangle {
         NText {
           text: isVertical ? `${SystemStatService.cpuTemp}°` : `${SystemStatService.cpuTemp}°C`
           font.family: Settings.data.ui.fontFixed
-          font.pointSize: isVertical ? (Style.fontSizeXXS * scaling) : (Style.fontSizeXS * scaling)
+          font.pointSize: textSize
           font.weight: Style.fontWeightMedium
           Layout.alignment: Qt.AlignCenter
           horizontalAlignment: Text.AlignHCenter
@@ -146,7 +134,7 @@ Rectangle {
 
         NIcon {
           icon: "cpu-temperature"
-          font.pointSize: isVertical ? (Style.fontSizeXS * scaling) : (Style.fontSizeS * scaling)
+          font.pointSize: iconSize
           Layout.alignment: Qt.AlignCenter
           Layout.row: isVertical ? 1 : 0
           Layout.column: 0
@@ -179,7 +167,7 @@ Rectangle {
             }
           }
           font.family: Settings.data.ui.fontFixed
-          font.pointSize: isVertical ? (Style.fontSizeXXS * scaling) : (Style.fontSizeXS * scaling)
+          font.pointSize: textSize
           font.weight: Style.fontWeightMedium
           Layout.alignment: Qt.AlignCenter
           horizontalAlignment: Text.AlignHCenter
@@ -191,7 +179,7 @@ Rectangle {
 
         NIcon {
           icon: "memory"
-          font.pointSize: isVertical ? (Style.fontSizeS * scaling) : (Style.fontSizeM * scaling)
+          font.pointSize: iconSize
           Layout.alignment: Qt.AlignCenter
           Layout.row: isVertical ? 1 : 0
           Layout.column: 0
@@ -216,9 +204,9 @@ Rectangle {
         columnSpacing: isVertical ? (Style.marginXXS * scaling) : (Style.marginXS * scaling)
 
         NText {
-          text: isVertical ? formatCompactSpeed(SystemStatService.rxSpeed) : SystemStatService.formatSpeed(SystemStatService.rxSpeed)
+          text: isVertical ? SystemStatService.formatCompactSpeed(SystemStatService.rxSpeed) : SystemStatService.formatSpeed(SystemStatService.rxSpeed)
           font.family: Settings.data.ui.fontFixed
-          font.pointSize: isVertical ? (Style.fontSizeXXS * scaling) : (Style.fontSizeXS * scaling)
+          font.pointSize: textSize
           font.weight: Style.fontWeightMedium
           Layout.alignment: Qt.AlignCenter
           horizontalAlignment: Text.AlignHCenter
@@ -230,7 +218,7 @@ Rectangle {
 
         NIcon {
           icon: "download-speed"
-          font.pointSize: isVertical ? (Style.fontSizeS * scaling) : (Style.fontSizeM * scaling)
+          font.pointSize: iconSize
           Layout.alignment: Qt.AlignCenter
           Layout.row: isVertical ? 1 : 0
           Layout.column: 0
@@ -255,9 +243,9 @@ Rectangle {
         columnSpacing: isVertical ? (Style.marginXXS * scaling) : (Style.marginXS * scaling)
 
         NText {
-          text: isVertical ? formatCompactSpeed(SystemStatService.txSpeed) : SystemStatService.formatSpeed(SystemStatService.txSpeed)
+          text: isVertical ? SystemStatService.formatCompactSpeed(SystemStatService.txSpeed) : SystemStatService.formatSpeed(SystemStatService.txSpeed)
           font.family: Settings.data.ui.fontFixed
-          font.pointSize: isVertical ? (Style.fontSizeXXS * scaling) : (Style.fontSizeXS * scaling)
+          font.pointSize: textSize
           font.weight: Style.fontWeightMedium
           Layout.alignment: Qt.AlignCenter
           horizontalAlignment: Text.AlignHCenter
@@ -269,7 +257,7 @@ Rectangle {
 
         NIcon {
           icon: "upload-speed"
-          font.pointSize: isVertical ? (Style.fontSizeS * scaling) : (Style.fontSizeM * scaling)
+          font.pointSize: iconSize
           Layout.alignment: Qt.AlignCenter
           Layout.row: isVertical ? 1 : 0
           Layout.column: 0
@@ -296,7 +284,7 @@ Rectangle {
         NText {
           text: `${SystemStatService.diskPercent}%`
           font.family: Settings.data.ui.fontFixed
-          font.pointSize: isVertical ? (Style.fontSizeXXS * scaling) : (Style.fontSizeXS * scaling)
+          font.pointSize: textSize
           font.weight: Style.fontWeightMedium
           Layout.alignment: Qt.AlignCenter
           horizontalAlignment: Text.AlignHCenter
@@ -308,7 +296,7 @@ Rectangle {
 
         NIcon {
           icon: "storage"
-          font.pointSize: isVertical ? (Style.fontSizeS * scaling) : (Style.fontSizeM * scaling)
+          font.pointSize: iconSize
           Layout.alignment: Qt.AlignCenter
           Layout.row: isVertical ? 1 : 0
           Layout.column: 0

Modules/Bar/Widgets/Taskbar.qml

@@ -13,14 +13,15 @@ Rectangle {
   property ShellScreen screen
   property real scaling: 1.0
 
-  readonly property real itemSize: Style.capsuleHeight * 0.8 * scaling
   readonly property bool isVerticalBar: Settings.data.bar.position === "left" || Settings.data.bar.position === "right"
+  readonly property bool compact: (Settings.data.bar.density === "compact")
+  readonly property real itemSize: compact ? Style.capsuleHeight * 0.9 * scaling : Style.capsuleHeight * 0.8 * scaling
 
   // Always visible when there are toplevels
   implicitWidth: isVerticalBar ? Math.round(Style.capsuleHeight * scaling) : taskbarLayout.implicitWidth + Style.marginM * scaling * 2
   implicitHeight: isVerticalBar ? taskbarLayout.implicitHeight + Style.marginM * scaling * 2 : Math.round(Style.capsuleHeight * scaling)
   radius: Math.round(Style.radiusM * scaling)
-  color: Color.mSurfaceVariant
+  color: compact ? Color.transparent : Color.mSurfaceVariant
 
   GridLayout {
     id: taskbarLayout
@@ -28,8 +29,8 @@ Rectangle {
     anchors {
       leftMargin: isVerticalBar ? undefined : Style.marginM * scaling
       rightMargin: isVerticalBar ? undefined : Style.marginM * scaling
-      topMargin: isVerticalBar ? Style.marginM * scaling : undefined
+      topMargin: compact ? 0 : isVerticalBar ? Style.marginM * scaling : undefined
-      bottomMargin: isVerticalBar ? Style.marginM * scaling : undefined
+      bottomMargin: compact ? 0 : isVerticalBar ? Style.marginM * scaling : undefined
     }
 
     // Configure GridLayout to behave like RowLayout or ColumnLayout
@@ -54,8 +55,8 @@ Rectangle {
         Rectangle {
           id: iconBackground
           anchors.centerIn: parent
-          width: root.itemSize * 0.75
+          width: parent.width
-          height: root.itemSize * 0.75
+          height: parent.height
           color: taskbarItem.isActive ? Color.mPrimary : root.color
           border.width: 0
           radius: Math.round(Style.radiusXS * root.scaling)
@@ -65,8 +66,8 @@ Rectangle {
           IconImage {
             id: appIcon
             anchors.centerIn: parent
-            width: Style.marginL * root.scaling
+            width: parent.width
-            height: Style.marginL * root.scaling
+            height: parent.height
             source: AppIcons.iconForAppId(taskbarItem.modelData.appId)
             smooth: true
             asynchronous: true

Modules/Bar/Widgets/Tray.qml

@@ -16,9 +16,10 @@ Rectangle {
   property ShellScreen screen
   property real scaling: 1.0
 
-  readonly property real itemSize: 24 * scaling
   readonly property string barPosition: Settings.data.bar.position
   readonly property bool isVertical: barPosition === "left" || barPosition === "right"
+  readonly property bool compact: (Settings.data.bar.density === "compact")
+  readonly property real itemSize: isVertical ? width * 0.75 : height * 0.85
 
   function onLoaded() {
     // When the widget is fully initialized with its props set the screen for the trayMenu
@@ -31,7 +32,7 @@ Rectangle {
   implicitWidth: isVertical ? Math.round(Style.capsuleHeight * scaling) : (trayFlow.implicitWidth + Style.marginS * scaling * 2)
   implicitHeight: isVertical ? (trayFlow.implicitHeight + Style.marginS * scaling * 2) : Math.round(Style.capsuleHeight * scaling)
   radius: Math.round(Style.radiusM * scaling)
-  color: Color.mSurfaceVariant
+  color: compact ? Color.transparent : Color.mSurfaceVariant
 
   Layout.alignment: Qt.AlignVCenter
 

Modules/Bar/Widgets/Volume.qml

@@ -74,6 +74,7 @@ Item {
   NPill {
     id: pill
 
+    compact: (Settings.data.bar.density === "compact")
     rightOpen: BarWidgetRegistry.getNPillDirection(root)
     icon: getIcon()
     autoHide: false // Important to be false so we can hover as long as we want

Modules/Bar/Widgets/WiFi.qml

@@ -13,6 +13,7 @@ NIconButton {
   property ShellScreen screen
   property real scaling: 1.0
 
+  compact: (Settings.data.bar.density === "compact")
   baseSize: Style.capsuleHeight
   colorBg: Color.mSurfaceVariant
   colorFg: Color.mOnSurface

Modules/Bar/Widgets/Workspace.qml

@@ -32,6 +32,7 @@ Item {
   }
 
   readonly property string barPosition: Settings.data.bar.position
+  readonly property bool compact: (Settings.data.bar.density === "compact")
 
   readonly property string labelMode: (widgetSettings.labelMode !== undefined) ? widgetSettings.labelMode : widgetMetadata.labelMode
   readonly property bool hideUnoccupied: (widgetSettings.hideUnoccupied !== undefined) ? widgetSettings.hideUnoccupied : widgetMetadata.hideUnoccupied
@@ -176,7 +177,7 @@ Item {
     width: (barPosition === "left" || barPosition === "right") ? Math.round(Style.capsuleHeight * scaling) : parent.width
     height: (barPosition === "left" || barPosition === "right") ? parent.height : Math.round(Style.capsuleHeight * scaling)
     radius: Math.round(Style.radiusM * scaling)
-    color: Color.mSurfaceVariant
+    color: compact ? Color.transparent : Color.mSurfaceVariant
 
     anchors.horizontalCenter: parent.horizontalCenter
     anchors.verticalCenter: parent.verticalCenter
@@ -187,7 +188,6 @@ Item {
     id: pillRow
     spacing: spacingBetweenPills
     anchors.verticalCenter: workspaceBackground.verticalCenter
-    width: root.width - horizontalPadding * 2
     x: horizontalPadding
     visible: barPosition === "top" || barPosition === "bottom"
 
@@ -196,7 +196,7 @@ Item {
       model: localWorkspaces
       Item {
         id: workspacePillContainer
-        height: (labelMode !== "none") ? Math.round(18 * scaling) : Math.round(14 * scaling)
+        height: compact ? root.height : workspaceBackground.height * 0.75
         width: root.calculatedWsWidth(model)
 
         Rectangle {
@@ -216,7 +216,7 @@ Item {
                     return model.idx.toString()
                   }
                 }
-                font.pointSize: model.isFocused ? Style.fontSizeXS * scaling : Style.fontSizeXXS * scaling
+                font.pointSize: model.isFocused ? workspacePillContainer.height * 0.5 : workspacePillContainer.height * 0.42
                 font.capitalization: Font.AllUppercase
                 font.family: Settings.data.ui.fontFixed
                 font.weight: Style.fontWeightBold
@@ -332,7 +332,6 @@ Item {
     id: pillColumn
     spacing: spacingBetweenPills
     anchors.horizontalCenter: workspaceBackground.horizontalCenter
-    height: root.height - horizontalPadding * 2
     y: horizontalPadding
     visible: barPosition === "left" || barPosition === "right"
 
@@ -341,7 +340,7 @@ Item {
       model: localWorkspaces
       Item {
         id: workspacePillContainerVertical
-        width: (labelMode !== "none") ? Math.round(18 * scaling) : Math.round(14 * scaling)
+        width: compact ? root.width : workspaceBackground.width * 0.75
         height: root.calculatedWsHeight(model)
 
         Rectangle {
@@ -361,7 +360,7 @@ Item {
                     return model.idx.toString()
                   }
                 }
-                font.pointSize: model.isFocused ? Style.fontSizeXS * scaling : Style.fontSizeXXS * scaling
+                font.pointSize: model.isFocused ? workspacePillContainerVertical.width * 0.45 : workspacePillContainerVertical.width * 0.42
                 font.capitalization: Font.AllUppercase
                 font.family: Settings.data.ui.fontFixed
                 font.weight: Style.fontWeightBold

Modules/SettingsPanel/Tabs/BarTab.qml

@@ -45,32 +45,52 @@ ColumnLayout {
     description: "Configure bar appearance and positioning."
   }
 
-  RowLayout {
+  NComboBox {
-    NComboBox {
+    Layout.fillWidth: true
-      Layout.fillWidth: true
+    label: "Bar Position"
-      label: "Bar Position"
+    description: "Choose where to place the bar on the screen."
-      description: "Choose where to place the bar on the screen."
+    model: ListModel {
-      model: ListModel {
+      ListElement {
-        ListElement {
+        key: "top"
-          key: "top"
+        name: "Top"
-          name: "Top"
+      }
-        }
+      ListElement {
-        ListElement {
+        key: "bottom"
-          key: "bottom"
+        name: "Bottom"
-          name: "Bottom"
+      }
-        }
+      ListElement {
-        ListElement {
+        key: "left"
-          key: "left"
+        name: "Left"
-          name: "Left"
+      }
-        }
+      ListElement {
-        ListElement {
+        key: "right"
-          key: "right"
+        name: "Right"
-          name: "Right"
-        }
       }
-      currentKey: Settings.data.bar.position
-      onSelected: key => Settings.data.bar.position = key
     }
+    currentKey: Settings.data.bar.position
+    onSelected: key => Settings.data.bar.position = key
+  }
+
+  NComboBox {
+    Layout.fillWidth: true
+    label: "Bar Density"
+    description: "Choose the density of the bar."
+    model: ListModel {
+      ListElement {
+        key: "compact"
+        name: "Compact"
+      }
+      ListElement {
+        key: "default"
+        name: "Default"
+      }
+      ListElement {
+        key: "comfortable"
+        name: "Comfortable"
+      }
+    }
+    currentKey: Settings.data.bar.density
+    onSelected: key => Settings.data.bar.density = key
   }
 
   ColumnLayout {

Services/SystemStatService.qml

@@ -333,6 +333,26 @@ Singleton {
     }
   }
 
+  // Compact speed formatter for vertical bar display
+  function formatCompactSpeed(bytesPerSecond) {
+    if (!bytesPerSecond || bytesPerSecond <= 0)
+      return "0"
+    const units = ["", "K", "M", "G"]
+    let value = bytesPerSecond
+    let unitIndex = 0
+    while (value >= 1024 && unitIndex < units.length - 1) {
+      value = value / 1024.0
+      unitIndex++
+    }
+    // Promote at ~100 of current unit (e.g., 100k -> ~0.1M shown as 0.1M or 0M if rounded)
+    if (unitIndex < units.length - 1 && value >= 100) {
+      value = value / 1024.0
+      unitIndex++
+    }
+    const display = Math.round(value).toString()
+    return display + units[unitIndex]
+  }
+
   // -------------------------------------------------------
   // Function to start fetching and computing the cpu temperature
   function updateCpuTemperature() {