Merge branch 'main' into MediaMiniImprovements

Modules/Bar/Calendar/CalendarPanel.qml

@@ -10,6 +10,7 @@ import qs.Widgets
 NPanel {
   id: root
 
+  property ShellScreen screen
   readonly property var now: Time.date
 
   preferredWidth: (Settings.data.location.showWeekNumberInCalendar ? 400 : 380) * Style.uiScaleRatio
@@ -347,6 +348,14 @@ NPanel {
           grid.year = newDate.getFullYear()
           grid.month = newDate.getMonth()
           content.isCurrentMonth = content.checkIsCurrentMonth()
+          const now = new Date()
+          const monthStart = new Date(grid.year, grid.month, 1)
+          const monthEnd = new Date(grid.year, grid.month + 1, 0)
+
+          const daysBehind = Math.max(0, Math.ceil((now - monthStart) / (24 * 60 * 60 * 1000)))
+          const daysAhead = Math.max(0, Math.ceil((monthEnd - now) / (24 * 60 * 60 * 1000)))
+
+          CalendarService.loadEvents(daysAhead + 30, daysBehind + 30)
         }
       }
       NIconButton {
@@ -355,6 +364,7 @@ NPanel {
           grid.month = Time.date.getMonth()
           grid.year = Time.date.getFullYear()
           content.isCurrentMonth = true
+          CalendarService.loadEvents()
         }
       }
       NIconButton {
@@ -364,6 +374,14 @@ NPanel {
           grid.year = newDate.getFullYear()
           grid.month = newDate.getMonth()
           content.isCurrentMonth = content.checkIsCurrentMonth()
+          const now = new Date()
+          const monthStart = new Date(grid.year, grid.month, 1)
+          const monthEnd = new Date(grid.year, grid.month + 1, 0)
+
+          const daysBehind = Math.max(0, Math.ceil((now - monthStart) / (24 * 60 * 60 * 1000)))
+          const daysAhead = Math.max(0, Math.ceil((monthEnd - now) / (24 * 60 * 60 * 1000)))
+
+          CalendarService.loadEvents(daysAhead + 30, daysBehind + 30)
         }
       }
     }
@@ -405,6 +423,71 @@ NPanel {
       Layout.fillWidth: true
       Layout.fillHeight: true
       spacing: 0
+
+      // Helper function to check if a date has events
+      function hasEventsOnDate(year, month, day) {
+        if (!CalendarService.available || CalendarService.events.length === 0)
+          return false
+
+        const targetDate = new Date(year, month, day)
+        const targetStart = new Date(targetDate.getFullYear(), targetDate.getMonth(), targetDate.getDate()).getTime() / 1000
+        const targetEnd = targetStart + 86400 // +24 hours
+
+        return CalendarService.events.some(event => {
+                                             // Check if event starts or overlaps with this day
+                                             return (event.start >= targetStart && event.start < targetEnd) || (event.end > targetStart && event.end <= targetEnd) || (event.start < targetStart && event.end > targetEnd)
+                                           })
+      }
+
+      // Helper function to get events for a specific date
+      function getEventsForDate(year, month, day) {
+        if (!CalendarService.available || CalendarService.events.length === 0)
+          return []
+
+        const targetDate = new Date(year, month, day)
+        const targetStart = Math.floor(new Date(targetDate.getFullYear(), targetDate.getMonth(), targetDate.getDate()).getTime() / 1000)
+        const targetEnd = targetStart + 86400 // +24 hours
+
+        return CalendarService.events.filter(event => {
+                                               return (event.start >= targetStart && event.start < targetEnd) || (event.end > targetStart && event.end <= targetEnd) || (event.start < targetStart && event.end > targetEnd)
+                                             })
+      }
+
+      // Helper function to check if an event is all-day
+      function isAllDayEvent(event) {
+        const duration = event.end - event.start
+        const startDate = new Date(event.start * 1000)
+        const isAtMidnight = startDate.getHours() === 0 && startDate.getMinutes() === 0
+        return duration === 86400 && isAtMidnight
+      }
+
+      // Helper function to check if an event is multi-day
+      function isMultiDayEvent(event) {
+        if (isAllDayEvent(event)) {
+          return false
+        }
+
+        const startDate = new Date(event.start * 1000)
+        const endDate = new Date(event.end * 1000)
+
+        const startDateOnly = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate())
+        const endDateOnly = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate())
+
+        return startDateOnly.getTime() !== endDateOnly.getTime()
+      }
+
+      // Helper function to get color for a specific event
+      function getEventColor(event, isToday) {
+        if (isMultiDayEvent(event)) {
+          return isToday ? Color.mOnSecondary : Color.mTertiary
+        } else if (isAllDayEvent(event)) {
+          return isToday ? Color.mOnSecondary : Color.mSecondary
+        } else {
+          return isToday ? Color.mOnSecondary : Color.mPrimary
+        }
+      }
+
+      // Column of week numbers
       ColumnLayout {
         visible: Settings.data.location.showWeekNumberInCalendar
         Layout.preferredWidth: visible ? Style.baseWidgetSize * 0.7 : 0
@@ -475,6 +558,55 @@ NPanel {
               pointSize: Style.fontSizeM
               font.weight: model.today ? Style.fontWeightBold : Style.fontWeightMedium
             }
+
+            // Event indicator dots
+            Row {
+              visible: parent.parent.parent.parent.parent.hasEventsOnDate(model.year, model.month, model.day)
+              spacing: 2
+              anchors.horizontalCenter: parent.horizontalCenter
+              anchors.bottom: parent.bottom
+              anchors.bottomMargin: Style.marginXS
+
+              readonly property int currentYear: model.year
+              readonly property int currentMonth: model.month
+              readonly property int currentDay: model.day
+              readonly property bool isToday: model.today
+
+              Repeater {
+                model: parent.parent.parent.parent.parent.parent.getEventsForDate(parent.currentYear, parent.currentMonth, parent.currentDay)
+
+                Rectangle {
+                  width: 4
+                  height: width
+                  radius: width / 2
+                  color: parent.parent.parent.parent.parent.parent.getEventColor(modelData, model.today)
+                }
+              }
+            }
+
+            MouseArea {
+              anchors.fill: parent
+              hoverEnabled: true
+
+              onEntered: {
+                const events = parent.parent.parent.parent.parent.getEventsForDate(model.year, model.month, model.day)
+                if (events.length > 0) {
+                  const summaries = events.map(e => e.summary).join('\n')
+                  TooltipService.show(Screen, parent, summaries)
+                  TooltipService.updateText(summaries)
+                }
+              }
+
+              onClicked: {
+                const dateWithSlashes = `${model.month.toString().padStart(2, '0')}/${model.day.toString().padStart(2, '0')}/${model.year.toString().substring(2)}`
+                Quickshell.execDetached(["gnome-calendar", "--date", dateWithSlashes])
+              }
+
+              onExited: {
+                TooltipService.hide()
+              }
+            }
+
             Behavior on color {
               ColorAnimation {
                 duration: Style.animationFast

Modules/Bar/Extras/BarPill.qml

@@ -16,8 +16,7 @@ Item {
   property bool autoHide: false
   property bool forceOpen: false
   property bool forceClose: false
-  property bool disableOpen: false
-  property bool rightOpen: false
+  property bool oppositeDirection: false
   property bool hovered: false
 
   readonly property string barPosition: Settings.data.bar.position
@@ -51,8 +50,7 @@ Item {
         autoHide: root.autoHide
         forceOpen: root.forceOpen
         forceClose: root.forceClose
-        disableOpen: root.disableOpen
-        rightOpen: root.rightOpen
+        oppositeDirection: root.oppositeDirection
         hovered: root.hovered
         density: root.density
         onShown: root.shown()
@@ -76,8 +74,7 @@ Item {
         autoHide: root.autoHide
         forceOpen: root.forceOpen
         forceClose: root.forceClose
-        disableOpen: root.disableOpen
-        rightOpen: root.rightOpen
+        oppositeDirection: root.oppositeDirection
         hovered: root.hovered
         density: root.density
         onShown: root.shown()

Modules/Bar/Extras/BarPillHorizontal.qml

@@ -18,8 +18,7 @@ Item {
   property bool autoHide: false
   property bool forceOpen: false
   property bool forceClose: false
-  property bool disableOpen: false
-  property bool rightOpen: false
+  property bool oppositeDirection: false
   property bool hovered: false
 
   // Effective shown state (true if hovered/animated open or forced)
@@ -79,18 +78,18 @@ Item {
     width: revealed ? pillMaxWidth : 1
     height: pillHeight
 
-    x: rightOpen ? (iconCircle.x + iconCircle.width / 2) : // Opens right
-                   (iconCircle.x + iconCircle.width / 2) - width // Opens left
+    x: oppositeDirection ? (iconCircle.x + iconCircle.width / 2) : // Opens right
+                           (iconCircle.x + iconCircle.width / 2) - width // Opens left
 
     opacity: revealed ? Style.opacityFull : Style.opacityNone
     color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
 
     readonly property int halfPillHeight: Math.round(pillHeight * 0.5)
 
-    topLeftRadius: rightOpen ? 0 : halfPillHeight
-    bottomLeftRadius: rightOpen ? 0 : halfPillHeight
-    topRightRadius: rightOpen ? halfPillHeight : 0
-    bottomRightRadius: rightOpen ? halfPillHeight : 0
+    topLeftRadius: oppositeDirection ? 0 : halfPillHeight
+    bottomLeftRadius: oppositeDirection ? 0 : halfPillHeight
+    topRightRadius: oppositeDirection ? halfPillHeight : 0
+    bottomRightRadius: oppositeDirection ? halfPillHeight : 0
     anchors.verticalCenter: parent.verticalCenter
 
     NText {
@@ -99,10 +98,10 @@ Item {
       x: {
         // Better text horizontal centering
         var centerX = (parent.width - width) / 2
-        var offset = rightOpen ? Style.marginXS : -Style.marginXS
+        var offset = oppositeDirection ? Style.marginXS : -Style.marginXS
         if (forceOpen) {
           // If its force open, the icon disc background is the same color as the bg pill move text slightly
-          offset += rightOpen ? -Style.marginXXS : Style.marginXXS
+          offset += oppositeDirection ? -Style.marginXXS : Style.marginXXS
         }
         return centerX + offset
       }
@@ -139,7 +138,7 @@ Item {
     color: hovered ? Color.mTertiary : Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
     anchors.verticalCenter: parent.verticalCenter
 
-    x: rightOpen ? 0 : (parent.width - width)
+    x: oppositeDirection ? 0 : (parent.width - width)
 
     Behavior on color {
       ColorAnimation {
@@ -245,7 +244,7 @@ Item {
       hovered = true
       root.entered()
       TooltipService.show(Screen, pill, root.tooltipText, BarService.getTooltipDirection(), Style.tooltipDelayLong)
-      if (disableOpen || forceClose) {
+      if (forceClose) {
         return
       }
       if (!forceOpen) {

Modules/Bar/Extras/BarPillVertical.qml

@@ -16,8 +16,7 @@ Item {
   property bool autoHide: false
   property bool forceOpen: false
   property bool forceClose: false
-  property bool disableOpen: false
-  property bool rightOpen: false
+  property bool oppositeDirection: false
   property bool hovered: false
 
   // Bar position detection for pill direction
@@ -25,8 +24,8 @@ Item {
   readonly property bool isVerticalBar: barPosition === "left" || barPosition === "right"
 
   // Determine pill direction based on section position
-  readonly property bool openDownward: rightOpen
-  readonly property bool openUpward: !rightOpen
+  readonly property bool openDownward: oppositeDirection
+  readonly property bool openUpward: !oppositeDirection
 
   // Effective shown state (true if animated open or forced, but not if force closed)
   readonly property bool revealed: !forceClose && (forceOpen || showPill)
@@ -114,7 +113,7 @@ Item {
         var offset = openDownward ? Math.round(pillPaddingVertical * 0.75) : -Math.round(pillPaddingVertical * 0.75)
         if (forceOpen) {
           // If its force open, the icon disc background is the same color as the bg pill move text slightly
-          offset += rightOpen ? -Style.marginXXS : Style.marginXXS
+          offset += oppositeDirection ? -Style.marginXXS : Style.marginXXS
         }
         return offset
       }
@@ -284,7 +283,7 @@ Item {
       hovered = true
       root.entered()
       TooltipService.show(Screen, pill, root.tooltipText, BarService.getTooltipDirection(), Style.tooltipDelayLong)
-      if (disableOpen || forceClose) {
+      if (forceClose) {
         return
       }
       if (!forceOpen) {

Modules/Bar/Widgets/ActiveWindow.qml

@@ -45,12 +45,12 @@ Item {
   readonly property string windowTitle: CompositorService.getFocusedWindowTitle() || "No active window"
   readonly property string fallbackIcon: "user-desktop"
 
-  implicitHeight: visible ? (isVerticalBar ? calculatedVerticalDimension() : Style.barHeight) : 0
-  implicitWidth: visible ? (isVerticalBar ? calculatedVerticalDimension() : dynamicWidth) : 0
+  implicitHeight: visible ? (isVerticalBar ? (((!hasFocusedWindow) && hideMode === "hidden") ? 0 : calculatedVerticalDimension()) : Style.capsuleHeight) : 0
+  implicitWidth: visible ? (isVerticalBar ? (((!hasFocusedWindow) && hideMode === "hidden") ? 0 : calculatedVerticalDimension()) : (((!hasFocusedWindow) && hideMode === "hidden") ? 0 : dynamicWidth)) : 0
 
   // "visible": Always Visible, "hidden": Hide When Empty, "transparent": Transparent When Empty
-  visible: hideMode !== "hidden" || hasFocusedWindow
-  opacity: hideMode !== "transparent" || hasFocusedWindow ? 1.0 : 0
+  visible: (hideMode !== "hidden" || hasFocusedWindow) || opacity > 0
+  opacity: ((hideMode !== "hidden" || hasFocusedWindow) && (hideMode !== "transparent" || hasFocusedWindow)) ? 1.0 : 0.0
   Behavior on opacity {
     NumberAnimation {
       duration: Style.animationNormal
@@ -58,6 +58,20 @@ Item {
     }
   }
 
+  Behavior on implicitWidth {
+    NumberAnimation {
+      duration: Style.animationNormal
+      easing.type: Easing.InOutCubic
+    }
+  }
+
+  Behavior on implicitHeight {
+    NumberAnimation {
+      duration: Style.animationNormal
+      easing.type: Easing.InOutCubic
+    }
+  }
+
   function calculatedVerticalDimension() {
     return Math.round((Style.baseWidgetSize - 5) * scaling)
   }
@@ -93,7 +107,7 @@ Item {
     }
     // Otherwise, adapt to content
     if (!hasFocusedWindow) {
-      return maxWidth
+      return Math.min(calculateContentWidth(), maxWidth)
     }
     // Use content width but don't exceed user-set maximum width
     return Math.min(calculateContentWidth(), maxWidth)
@@ -155,10 +169,9 @@ Item {
   Rectangle {
     id: windowActiveRect
     visible: root.visible
-    anchors.left: parent.left
     anchors.verticalCenter: parent.verticalCenter
-    width: isVerticalBar ? root.width : dynamicWidth
-    height: isVerticalBar ? width : Style.capsuleHeight
+    width: isVerticalBar ? ((!hasFocusedWindow) && hideMode === "hidden" ? 0 : calculatedVerticalDimension()) : ((!hasFocusedWindow) && (hideMode === "hidden") ? 0 : dynamicWidth)
+    height: isVerticalBar ? ((!hasFocusedWindow) && hideMode === "hidden" ? 0 : calculatedVerticalDimension()) : Style.capsuleHeight
     radius: isVerticalBar ? width / 2 : Style.radiusM
     color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
 
@@ -307,6 +320,14 @@ Item {
                 font.weight: Style.fontWeightMedium
                 verticalAlignment: Text.AlignVCenter
                 color: Color.mOnSurface
+                onTextChanged: {
+                  if (root.scrollingMode === "always") {
+                    titleContainer.isScrolling = false
+                    titleContainer.isResetting = false
+                    scrollContainer.scrollX = 0
+                    scrollStartTimer.restart()
+                  }
+                }
               }
 
               // Second copy for seamless scrolling
@@ -343,13 +364,6 @@ Item {
               easing.type: Easing.Linear
             }
           }
-
-          Behavior on Layout.preferredWidth {
-            NumberAnimation {
-              duration: Style.animationSlow
-              easing.type: Easing.InOutCubic
-            }
-          }
         }
       }
 

Modules/Bar/Widgets/Battery.qml

@@ -87,14 +87,13 @@ Item {
     id: pill
 
     density: Settings.data.bar.density
-    rightOpen: BarService.getPillDirection(root)
+    oppositeDirection: BarService.getPillDirection(root)
     icon: testMode ? BatteryService.getIcon(testPercent, testCharging, true) : BatteryService.getIcon(percent, charging, isReady)
     text: (isReady || testMode) ? Math.round(percent) : "-"
     suffix: "%"
     autoHide: false
     forceOpen: isReady && (testMode || battery.isLaptopBattery) && displayMode === "alwaysShow"
-    forceClose: displayMode === "alwaysHide"
-    disableOpen: (!isReady || (!testMode && !battery.isLaptopBattery))
+    forceClose: displayMode === "alwaysHide" || !isReady || (!testMode && !battery.isLaptopBattery)
     onClicked: PanelService.getPanel("batteryPanel")?.toggle(this)
     tooltipText: {
       let lines = []

Modules/Bar/Widgets/Bluetooth.qml

@@ -1,27 +1,66 @@
 import QtQuick
-import QtQuick.Layouts
-import QtQuick.Controls
 import Quickshell
-import Quickshell.Wayland
 import qs.Commons
 import qs.Services
-import qs.Widgets
+import qs.Modules.Bar.Extras
 
-NIconButton {
+Item {
   id: root
 
   property ShellScreen screen
 
-  baseSize: Style.capsuleHeight
-  applyUiScale: false
-  density: Settings.data.bar.density
-  colorBg: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
-  colorFg: Color.mOnSurface
-  colorBorder: Color.transparent
-  colorBorderHover: Color.transparent
-  tooltipText: I18n.tr("tooltips.bluetooth-devices")
-  tooltipDirection: BarService.getTooltipDirection()
-  icon: BluetoothService.enabled ? "bluetooth" : "bluetooth-off"
-  onClicked: PanelService.getPanel("bluetoothPanel")?.toggle(this)
-  onRightClicked: PanelService.getPanel("bluetoothPanel")?.toggle(this)
+  // Widget properties passed from Bar.qml for per-instance settings
+  property string widgetId: ""
+  property string section: ""
+  property int sectionWidgetIndex: -1
+  property int sectionWidgetsCount: 0
+
+  property var widgetMetadata: BarWidgetRegistry.widgetMetadata[widgetId]
+  property var widgetSettings: {
+    if (section && sectionWidgetIndex >= 0) {
+      var widgets = Settings.data.bar.widgets[section]
+      if (widgets && sectionWidgetIndex < widgets.length) {
+        return widgets[sectionWidgetIndex]
+      }
+    }
+    return {}
+  }
+
+  readonly property bool isBarVertical: Settings.data.bar.position === "left" || Settings.data.bar.position === "right"
+  readonly property string displayMode: widgetSettings.displayMode !== undefined ? widgetSettings.displayMode : widgetMetadata.displayMode
+
+  implicitWidth: pill.width
+  implicitHeight: pill.height
+
+  BarPill {
+    id: pill
+
+    density: Settings.data.bar.density
+    oppositeDirection: BarService.getPillDirection(root)
+    icon: BluetoothService.enabled ? "bluetooth" : "bluetooth-off"
+    text: {
+      if (BluetoothService.connectedDevices && BluetoothService.connectedDevices.length > 0) {
+        const firstDevice = BluetoothService.connectedDevices[0]
+        return firstDevice.name || firstDevice.deviceName
+      }
+      return ""
+    }
+    suffix: {
+      if (BluetoothService.connectedDevices && BluetoothService.connectedDevices.length > 1) {
+        return ` + ${BluetoothService.connectedDevices.length - 1}`
+      }
+      return ""
+    }
+    autoHide: false
+    forceOpen: !isBarVertical && root.displayMode === "alwaysShow"
+    forceClose: isBarVertical || root.displayMode === "alwaysHide" || BluetoothService.connectedDevices.length === 0
+    onClicked: PanelService.getPanel("bluetoothPanel")?.toggle(this)
+    onRightClicked: PanelService.getPanel("bluetoothPanel")?.toggle(this)
+    tooltipText: {
+      if (pill.text !== "") {
+        return pill.text
+      }
+      return I18n.tr("tooltips.bluetooth-devices")
+    }
+  }
 }

Modules/Bar/Widgets/Brightness.qml

@@ -77,7 +77,7 @@ Item {
     id: pill
 
     density: Settings.data.bar.density
-    rightOpen: BarService.getPillDirection(root)
+    oppositeDirection: BarService.getPillDirection(root)
     icon: getIcon()
     autoHide: false // Important to be false so we can hover as long as we want
     text: {

Modules/Bar/Widgets/CustomButton.qml

@@ -45,14 +45,13 @@ Item {
   BarPill {
     id: pill
 
-    rightOpen: BarService.getPillDirection(root)
+    oppositeDirection: BarService.getPillDirection(root)
     icon: customIcon
     text: _dynamicText
     density: Settings.data.bar.density
     autoHide: false
     forceOpen: _dynamicText !== ""
-    forceClose: false
-    disableOpen: true
+    forceClose: true
     tooltipText: {
       if (!hasExec) {
         return "Custom button, configure in settings."

Modules/Bar/Widgets/KeyboardLayout.qml

@@ -43,7 +43,7 @@ Item {
 
     anchors.verticalCenter: parent.verticalCenter
     density: Settings.data.bar.density
-    rightOpen: BarService.getPillDirection(root)
+    oppositeDirection: BarService.getPillDirection(root)
     icon: "keyboard"
     autoHide: false // Important to be false so we can hover as long as we want
     text: currentLayout.toUpperCase()

Modules/Bar/Widgets/Microphone.qml

@@ -89,7 +89,7 @@ Item {
   BarPill {
     id: pill
 
-    rightOpen: BarService.getPillDirection(root)
+    oppositeDirection: BarService.getPillDirection(root)
     icon: getIcon()
     density: Settings.data.bar.density
     autoHide: false // Important to be false so we can hover as long as we want

Modules/Bar/Widgets/NotificationHistory.qml

@@ -31,12 +31,8 @@ NIconButton {
   readonly property bool showUnreadBadge: (widgetSettings.showUnreadBadge !== undefined) ? widgetSettings.showUnreadBadge : widgetMetadata.showUnreadBadge
   readonly property bool hideWhenZero: (widgetSettings.hideWhenZero !== undefined) ? widgetSettings.hideWhenZero : widgetMetadata.hideWhenZero
 
-  function lastSeenTs() {
-    return Settings.data.notifications?.lastSeenTs || 0
-  }
-
   function computeUnreadCount() {
-    var since = lastSeenTs()
+    var since = NotificationService.lastSeenTs
     var count = 0
     var model = NotificationService.historyList
     for (var i = 0; i < model.count; i++) {

Modules/Bar/Widgets/TaskbarGrouped.qml

@@ -0,0 +1,223 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Wayland
+import Quickshell.Widgets
+import qs.Commons
+import qs.Services
+import qs.Widgets
+
+Item {
+  id: root
+
+  property ShellScreen screen
+
+  // Widget properties passed from Bar.qml for per-instance settings
+  property string widgetId: ""
+  property string section: ""
+  property int sectionWidgetIndex: -1
+  property int sectionWidgetsCount: 0
+
+  readonly property bool isVerticalBar: Settings.data.bar.position === "left" || Settings.data.bar.position === "right"
+  readonly property string density: Settings.data.bar.density
+  readonly property real itemSize: (density === "compact") ? Style.capsuleHeight * 0.9 : Style.capsuleHeight * 0.8
+  property var widgetMetadata: BarWidgetRegistry.widgetMetadata[widgetId]
+  property var widgetSettings: {
+    if (section && sectionWidgetIndex >= 0) {
+      var widgets = Settings.data.bar.widgets[section]
+      if (widgets && sectionWidgetIndex < widgets.length) {
+        return widgets[sectionWidgetIndex]
+      }
+    }
+    return {}
+  }
+  readonly property bool hideUnoccupied: (widgetSettings.hideUnoccupied !== undefined) ? widgetSettings.hideUnoccupied : false
+  property ListModel localWorkspaces: ListModel {}
+
+  function refreshWorkspaces() {
+    localWorkspaces.clear()
+    if (!screen)
+      return
+
+    const screenName = screen.name.toLowerCase()
+
+    for (var i = 0; i < CompositorService.workspaces.count; i++) {
+      const ws = CompositorService.workspaces.get(i)
+
+      if (ws.output.toLowerCase() !== screenName)
+        continue
+      if (hideUnoccupied && !ws.isOccupied && !ws.isFocused)
+        continue
+
+      // Copy all properties from ws and add windows
+      var workspaceData = Object.assign({}, ws)
+      workspaceData.windows = CompositorService.getWindowsForWorkspace(ws.id)
+
+      localWorkspaces.append(workspaceData)
+    }
+  }
+
+  Component.onCompleted: {
+    refreshWorkspaces()
+  }
+
+  onScreenChanged: refreshWorkspaces()
+
+  implicitWidth: isVerticalBar ? taskbarGrid.implicitWidth + Style.marginM * 2 : Math.round(taskbarGrid.implicitWidth + Style.marginM * 2)
+  implicitHeight: isVerticalBar ? Math.round(taskbarGrid.implicitHeight + Style.marginM * 2) : Style.barHeight
+
+  Connections {
+    target: CompositorService
+
+    function onWorkspacesChanged() {
+      refreshWorkspaces()
+    }
+
+    function onWindowListChanged() {
+      refreshWorkspaces()
+    }
+  }
+
+  Component {
+    id: workspaceRepeaterDelegate
+
+    Rectangle {
+      id: container
+
+      required property var model
+      property var workspaceModel: model
+      property bool hasWindows: workspaceModel.windows.count > 0
+
+      radius: Style.radiusS
+      border.color: workspaceModel.isFocused ? Color.mPrimary : Color.mOutline
+      border.width: 1
+      width: (hasWindows ? iconsFlow.implicitWidth : root.itemSize * 0.8) + (root.isVerticalBar ? Style.marginXS : Style.marginL)
+      height: (hasWindows ? iconsFlow.implicitHeight : root.itemSize * 0.8) + (root.isVerticalBar ? Style.marginL : Style.marginXS)
+      color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
+
+      MouseArea {
+        anchors.fill: parent
+        hoverEnabled: true
+        enabled: !hasWindows
+        cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
+        onClicked: {
+          CompositorService.switchToWorkspace(workspaceModel)
+        }
+      }
+
+      Flow {
+        id: iconsFlow
+
+        anchors.centerIn: parent
+        spacing: 4
+        flow: root.isVerticalBar ? Flow.TopToBottom : Flow.LeftToRight
+
+        Repeater {
+          model: workspaceModel.windows
+
+          delegate: Item {
+            id: taskbarItem
+
+            property bool itemHovered: false
+
+            width: root.itemSize * 0.8
+            height: root.itemSize * 0.8
+
+            // Smooth scale animation on hover
+            scale: itemHovered ? 1.1 : 1.0
+
+            Behavior on scale {
+              NumberAnimation {
+                duration: Style.animationNormal
+                easing.type: Easing.OutBack
+              }
+            }
+
+            IconImage {
+              id: appIcon
+
+              width: parent.width
+              height: parent.height
+              source: ThemeIcons.iconForAppId(model.appId)
+              smooth: true
+              asynchronous: true
+              opacity: model.isFocused ? Style.opacityFull : 0.6
+              layer.enabled: widgetSettings.colorizeIcons === true
+
+              Behavior on opacity {
+                NumberAnimation {
+                  duration: Style.animationNormal
+                  easing.type: Easing.InOutCubic
+                }
+              }
+
+              Rectangle {
+                id: focusIndicator
+                anchors.bottomMargin: -2
+                anchors.bottom: parent.bottom
+                anchors.horizontalCenter: parent.horizontalCenter
+                width: model.isFocused ? 4 : 0
+                height: model.isFocused ? 4 : 0
+                color: model.isFocused ? Color.mPrimary : Color.transparent
+                radius: width * 0.5
+              }
+
+              layer.effect: ShaderEffect {
+                property color targetColor: Color.mOnSurface
+                property real colorizeMode: 0
+                fragmentShader: Qt.resolvedUrl(Quickshell.shellDir + "/Shaders/qsb/appicon_colorize.frag.qsb")
+              }
+            }
+
+            MouseArea {
+              anchors.fill: parent
+              hoverEnabled: true
+              cursorShape: Qt.PointingHandCursor
+              acceptedButtons: Qt.LeftButton | Qt.RightButton
+
+              onPressed: function (mouse) {
+                if (!model) {
+                  return
+                }
+
+                if (mouse.button === Qt.LeftButton) {
+                  CompositorService.focusWindow(model)
+                } else if (mouse.button === Qt.RightButton) {
+                  CompositorService.closeWindow(model)
+                }
+              }
+              onEntered: {
+                taskbarItem.itemHovered = true
+                TooltipService.show(Screen, taskbarItem, model.title || model.appId || "Unknown app.", BarService.getTooltipDirection())
+              }
+              onExited: {
+                taskbarItem.itemHovered = false
+                TooltipService.hide()
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  Flow {
+    id: taskbarGrid
+
+    anchors.verticalCenter: isVerticalBar ? undefined : parent.verticalCenter
+    anchors.left: isVerticalBar ? undefined : parent.left
+    anchors.leftMargin: isVerticalBar ? 0 : Style.marginM
+    anchors.horizontalCenter: isVerticalBar ? parent.horizontalCenter : undefined
+    anchors.top: isVerticalBar ? parent.top : undefined
+    anchors.topMargin: isVerticalBar ? Style.marginM : 0
+
+    spacing: Style.marginS
+    flow: isVerticalBar ? Flow.TopToBottom : Flow.LeftToRight
+
+    Repeater {
+      model: localWorkspaces
+      delegate: workspaceRepeaterDelegate
+    }
+  }
+}

Modules/Bar/Widgets/Volume.qml

@@ -75,7 +75,7 @@ Item {
     id: pill
 
     density: Settings.data.bar.density
-    rightOpen: BarService.getPillDirection(root)
+    oppositeDirection: BarService.getPillDirection(root)
     icon: getIcon()
     autoHide: false // Important to be false so we can hover as long as we want
     text: Math.round(AudioService.volume * 100)

Modules/Bar/Widgets/WiFi.qml

@@ -1,46 +1,88 @@
 import QtQuick
-import QtQuick.Layouts
-import QtQuick.Controls
 import Quickshell
-import Quickshell.Wayland
 import qs.Commons
 import qs.Services
-import qs.Widgets
+import qs.Modules.Bar.Extras
 
-NIconButton {
+Item {
   id: root
 
   property ShellScreen screen
 
-  density: Settings.data.bar.density
-  baseSize: Style.capsuleHeight
-  applyUiScale: false
-  colorBg: (Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent)
-  colorFg: Color.mOnSurface
-  colorBorder: Color.transparent
-  colorBorderHover: Color.transparent
-  tooltipText: I18n.tr("tooltips.manage-wifi")
-  tooltipDirection: BarService.getTooltipDirection()
-  icon: {
-    try {
-      if (NetworkService.ethernetConnected) {
-        return "ethernet"
+  // Widget properties passed from Bar.qml for per-instance settings
+  property string widgetId: ""
+  property string section: ""
+  property int sectionWidgetIndex: -1
+  property int sectionWidgetsCount: 0
+
+  property var widgetMetadata: BarWidgetRegistry.widgetMetadata[widgetId]
+  property var widgetSettings: {
+    if (section && sectionWidgetIndex >= 0) {
+      var widgets = Settings.data.bar.widgets[section]
+      if (widgets && sectionWidgetIndex < widgets.length) {
+        return widgets[sectionWidgetIndex]
       }
-      let connected = false
-      let signalStrength = 0
-      for (const net in NetworkService.networks) {
-        if (NetworkService.networks[net].connected) {
-          connected = true
-          signalStrength = NetworkService.networks[net].signal
-          break
+    }
+    return {}
+  }
+
+  readonly property bool isBarVertical: Settings.data.bar.position === "left" || Settings.data.bar.position === "right"
+  readonly property string displayMode: widgetSettings.displayMode !== undefined ? widgetSettings.displayMode : widgetMetadata.displayMode
+
+  implicitWidth: pill.width
+  implicitHeight: pill.height
+
+  BarPill {
+    id: pill
+
+    density: Settings.data.bar.density
+    oppositeDirection: BarService.getPillDirection(root)
+    icon: {
+      try {
+        if (NetworkService.ethernetConnected) {
+          return "ethernet"
         }
+        let connected = false
+        let signalStrength = 0
+        for (const net in NetworkService.networks) {
+          if (NetworkService.networks[net].connected) {
+            connected = true
+            signalStrength = NetworkService.networks[net].signal
+            break
+          }
+        }
+        return connected ? NetworkService.signalIcon(signalStrength) : "wifi-off"
+      } catch (error) {
+        Logger.e("Wi-Fi", "Error getting icon:", error)
+        return "signal_wifi_bad"
       }
-      return connected ? NetworkService.signalIcon(signalStrength) : "wifi-off"
-    } catch (error) {
-      Logger.e("Wi-Fi", "Error getting icon:", error)
-      return "signal_wifi_bad"
+    }
+    text: {
+      try {
+        if (NetworkService.ethernetConnected) {
+          return ""
+        }
+        for (const net in NetworkService.networks) {
+          if (NetworkService.networks[net].connected) {
+            return net
+          }
+        }
+        return ""
+      } catch (error) {
+        Logger.e("Wi-Fi", "Error getting ssid:", error)
+        return "error"
+      }
+    }
+    autoHide: false
+    forceOpen: !isBarVertical && root.displayMode === "alwaysShow"
+    forceClose: isBarVertical || root.displayMode === "alwaysHide" || !pill.text
+    onClicked: PanelService.getPanel("wifiPanel")?.toggle(this)
+    onRightClicked: PanelService.getPanel("wifiPanel")?.toggle(this)
+    tooltipText: {
+      if (pill.text !== "") {
+        return pill.text
+      }
+      return I18n.tr("tooltips.manage-wifi")
     }
   }
-  onClicked: PanelService.getPanel("wifiPanel")?.toggle(this)
-  onRightClicked: PanelService.getPanel("wifiPanel")?.toggle(this)
 }