bar: add "hella shortened" form for even narrower screens

.config/quickshell/modules/bar/Bar.qml

@@ -29,9 +29,12 @@ Scope {
 
             property ShellScreen modelData
             property var brightnessMonitor: Brightness.getMonitorForScreen(modelData)
-            property bool useShortenedForm: Appearance.sizes.barShortenScreenWidth >= screen.width
-            readonly property int centerSideModuleWidth: useShortenedForm ? 
-                Appearance.sizes.barCenterSideModuleWidthShortened : Appearance.sizes.barCenterSideModuleWidth
+            property real useShortenedForm: (Appearance.sizes.barHellaShortenScreenWidthThreshold >= screen.width) ? 2 :
+                (Appearance.sizes.barShortenScreenWidthThreshold >= screen.width) ? 1 : 0
+            readonly property int centerSideModuleWidth: 
+                (useShortenedForm == 2) ? Appearance.sizes.barCenterSideModuleWidthHellaShortened :
+                (useShortenedForm == 1) ? Appearance.sizes.barCenterSideModuleWidthShortened : 
+                    Appearance.sizes.barCenterSideModuleWidth
 
             WlrLayershell.namespace: "quickshell:bar"
             implicitHeight: barHeight + Appearance.rounding.screenRounding
@@ -162,7 +165,7 @@ Scope {
                             }
 
                             ActiveWindow {
-                                visible: !barRoot.useShortenedForm
+                                visible: barRoot.useShortenedForm === 0
                                 Layout.rightMargin: Appearance.rounding.screenRounding
                                 Layout.fillWidth: true
                                 bar: barRoot
@@ -177,21 +180,26 @@ Scope {
                     spacing: 8
 
                     RowLayout {
+                        id: leftCenterGroup
                         Layout.preferredWidth: barRoot.centerSideModuleWidth
                         spacing: 4
                         Layout.fillHeight: true
                         implicitWidth: 350
 
                         Resources {
+                            alwaysShowAllResources: barRoot.useShortenedForm === 2
+                            Layout.fillWidth: barRoot.useShortenedForm === 2
                         }
 
                         Media {
+                            visible: barRoot.useShortenedForm < 2
                             Layout.fillWidth: true
                         }
 
                     }
 
                     RowLayout {
+                        id: middleCenterGroup
                         Layout.fillWidth: true
                         Layout.fillHeight: true
 
@@ -212,21 +220,24 @@ Scope {
                     }
 
                     RowLayout {
-                        Layout.preferredWidth: barRoot.centerSideModuleWidth
+                        id: rightCenterGroup
+                        Layout.preferredWidth: leftCenterGroup.width
                         Layout.fillHeight: true
                         spacing: 4
 
                         ClockWidget {
+                            showDate: barRoot.useShortenedForm < 2
                             Layout.alignment: Qt.AlignVCenter
                             Layout.fillWidth: true
                         }
 
                         UtilButtons {
-                            visible: !barRoot.useShortenedForm
+                            visible: barRoot.useShortenedForm === 0
                             Layout.alignment: Qt.AlignVCenter
                         }
 
                         Battery {
+                            visible: barRoot.useShortenedForm < 2
                             Layout.alignment: Qt.AlignVCenter
                         }
 
@@ -397,7 +408,7 @@ Scope {
 
                             SysTray {
                                 bar: barRoot
-                                visible: !barRoot.useShortenedForm
+                                visible: barRoot.useShortenedForm === 0
                                 Layout.fillWidth: false
                                 Layout.fillHeight: true
                             }

.config/quickshell/modules/bar/ClockWidget.qml

@@ -6,6 +6,7 @@ import QtQuick.Layouts
 
 Rectangle {
     property bool borderless: ConfigOptions.bar.borderless
+    property bool showDate: true
     implicitWidth: rowLayout.implicitWidth + rowLayout.spacing * 6 // idk, text seems nicer w/ more padding
     implicitHeight: 32
     color: borderless ? "transparent" : Appearance.colors.colLayer1
@@ -24,12 +25,14 @@ Rectangle {
         }
 
         StyledText {
+            visible: showDate
             font.pixelSize: Appearance.font.pixelSize.small
             color: Appearance.colors.colOnLayer1
             text: "•"
         }
 
         StyledText {
+            visible: showDate
             font.pixelSize: Appearance.font.pixelSize.small
             color: Appearance.colors.colOnLayer1
             text: DateTime.date

.config/quickshell/modules/bar/Resources.qml

@@ -8,7 +8,9 @@ import Quickshell.Io
 import Quickshell.Services.Mpris
 
 Rectangle {
+    id: root
     property bool borderless: ConfigOptions.bar.borderless
+    property bool alwaysShowAllResources: false
     implicitWidth: rowLayout.implicitWidth + rowLayout.anchors.leftMargin + rowLayout.anchors.rightMargin
     implicitHeight: 32
     color: borderless ? "transparent" : Appearance.colors.colLayer1
@@ -30,14 +32,18 @@ Rectangle {
         Resource {
             iconName: "swap_horiz"
             percentage: ResourceUsage.swapUsedPercentage
-            shown: (ConfigOptions.bar.resources.alwaysShowSwap && percentage > 0) || (MprisController.activePlayer?.trackTitle == null)
+            shown: (ConfigOptions.bar.resources.alwaysShowSwap && percentage > 0) || 
+                (MprisController.activePlayer?.trackTitle == null) ||
+                root.alwaysShowAllResources
             Layout.leftMargin: shown ? 4 : 0
         }
 
         Resource {
             iconName: "settings_slow_motion"
             percentage: ResourceUsage.cpuUsage
-            shown: ConfigOptions.bar.resources.alwaysShowCpu || !(MprisController.activePlayer?.trackTitle?.length > 0)
+            shown: ConfigOptions.bar.resources.alwaysShowCpu || 
+                !(MprisController.activePlayer?.trackTitle?.length > 0) ||
+                root.alwaysShowAllResources
             Layout.leftMargin: shown ? 4 : 0
         }
 

.config/quickshell/modules/common/Appearance.qml

@@ -260,7 +260,9 @@ Singleton {
         property real barHeight: 40
         property real barCenterSideModuleWidth: 360
         property real barCenterSideModuleWidthShortened: 280
-        property real barShortenScreenWidth: 1200 // Bar will be shortened if screen width is at most this value
+        property real barCenterSideModuleWidthHellaShortened: 190
+        property real barShortenScreenWidthThreshold: 1200 // Shorten if screen width is at most this value
+        property real barHellaShortenScreenWidthThreshold: 1000 // Shorten even more...
         property real sidebarWidth: 460
         property real sidebarWidthExtended: 750
         property real osdWidth: 200