Bar widgets: modular loading refactoring via BarWidgetRegistry+NWidgetLoader

- Hot reload is working again.
- Should also be more memory efficient on multi monitors.
This commit is contained in:
LemmyCook 2025-08-24 23:50:09 -04:00
parent a110a0d636
commit a10d55e7f5
36 changed files with 514 additions and 446 deletions

View file

@ -1,88 +0,0 @@
import QtQuick
import qs.Commons
QtObject {
id: root
// Signal emitted when widget loading status changes
signal widgetLoaded(string widgetName)
signal widgetFailed(string widgetName, string error)
signal loadingComplete(int total, int loaded, int failed)
// Properties to track loading status
property int totalWidgets: 0
property int loadedWidgets: 0
property int failedWidgets: 0
// Auto-discover widget components
function getWidgetComponent(widgetName) {
if (!widgetName || widgetName.trim() === "") {
return null
}
const widgetPath = `../Modules/Bar/Widgets/${widgetName}.qml`
// Try to load the widget directly from file
const component = Qt.createComponent(widgetPath)
if (component.status === Component.Ready) {
return component
}
const errorMsg = `Failed to load ${widgetName}.qml widget, status: ${component.status}, error: ${component.errorString(
)}`
Logger.error("WidgetLoader", errorMsg)
return null
}
// Initialize loading tracking
function initializeLoading(widgetList) {
totalWidgets = widgetList.length
loadedWidgets = 0
failedWidgets = 0
}
// Track widget loading success
function onWidgetLoaded(widgetName) {
loadedWidgets++
widgetLoaded(widgetName)
if (loadedWidgets + failedWidgets === totalWidgets) {
Logger.log("WidgetLoader", `Loaded ${loadedWidgets} widgets`)
loadingComplete(totalWidgets, loadedWidgets, failedWidgets)
}
}
// Track widget loading failure
function onWidgetFailed(widgetName, error) {
failedWidgets++
widgetFailed(widgetName, error)
if (loadedWidgets + failedWidgets === totalWidgets) {
loadingComplete(totalWidgets, loadedWidgets, failedWidgets)
}
}
// This is where you should add your Modules/Bar/Widgets/
// so it gets registered in the BarTab
function discoverAvailableWidgets() {
const widgetFiles = ["ActiveWindow", "ArchUpdater", "Battery", "Bluetooth", "Brightness", "Clock", "KeyboardLayout", "MediaMini", "NotificationHistory", "PowerProfile", "ScreenRecorderIndicator", "SidePanelToggle", "SystemMonitor", "Tray", "Volume", "WiFi", "Workspace"]
const availableWidgets = []
widgetFiles.forEach(widgetName => {
// Test if the widget can be loaded
const component = getWidgetComponent(widgetName)
if (component) {
availableWidgets.push({
"key": widgetName,
"name": widgetName
})
}
})
// Sort alphabetically
availableWidgets.sort((a, b) => a.name.localeCompare(b.name))
return availableWidgets
}
}

View file

@ -48,6 +48,7 @@ Variants {
layer.enabled: true
}
// ------------------------------
// Left Section - Dynamic Widgets
Row {
id: leftSection
@ -61,30 +62,19 @@ Variants {
Repeater {
model: Settings.data.bar.widgets.left
delegate: Loader {
id: leftWidgetLoader
sourceComponent: widgetLoader.getWidgetComponent(modelData)
active: true
visible: {
if (modelData === "WiFi" && !Settings.data.network.wifiEnabled)
return false
if (modelData === "Bluetooth" && !Settings.data.network.bluetoothEnabled)
return false
if (modelData === "Battery" && !shouldShowBattery())
return false
return true
}
anchors.verticalCenter: parent.verticalCenter
onStatusChanged: {
if (status === Loader.Error) {
widgetLoader.onWidgetFailed(modelData, "Loader error")
} else if (status === Loader.Ready) {
widgetLoader.onWidgetLoaded(modelData)
sourceComponent: NWidgetLoader {
widgetName: modelData
widgetProps: {
"screen": screen
}
}
anchors.verticalCenter: parent.verticalCenter
}
}
}
// ------------------------------
// Center Section - Dynamic Widgets
Row {
id: centerSection
@ -97,30 +87,19 @@ Variants {
Repeater {
model: Settings.data.bar.widgets.center
delegate: Loader {
id: centerWidgetLoader
sourceComponent: widgetLoader.getWidgetComponent(modelData)
active: true
visible: {
if (modelData === "WiFi" && !Settings.data.network.wifiEnabled)
return false
if (modelData === "Bluetooth" && !Settings.data.network.bluetoothEnabled)
return false
if (modelData === "Battery" && !shouldShowBattery())
return false
return true
}
anchors.verticalCenter: parent.verticalCenter
onStatusChanged: {
if (status === Loader.Error) {
widgetLoader.onWidgetFailed(modelData, "Loader error")
} else if (status === Loader.Ready) {
widgetLoader.onWidgetLoaded(modelData)
sourceComponent: NWidgetLoader {
widgetName: modelData
widgetProps: {
"screen": screen
}
}
anchors.verticalCenter: parent.verticalCenter
}
}
}
// ------------------------------
// Right Section - Dynamic Widgets
Row {
id: rightSection
@ -134,49 +113,17 @@ Variants {
Repeater {
model: Settings.data.bar.widgets.right
delegate: Loader {
id: rightWidgetLoader
sourceComponent: widgetLoader.getWidgetComponent(modelData)
active: true
visible: {
if (modelData === "WiFi" && !Settings.data.network.wifiEnabled)
return false
if (modelData === "Bluetooth" && !Settings.data.network.bluetoothEnabled)
return false
return true
}
anchors.verticalCenter: parent.verticalCenter
onStatusChanged: {
if (status === Loader.Error) {
widgetLoader.onWidgetFailed(modelData, "Loader error")
} else if (status === Loader.Ready) {
widgetLoader.onWidgetLoaded(modelData)
sourceComponent: NWidgetLoader {
widgetName: modelData
widgetProps: {
"screen": screen
}
}
anchors.verticalCenter: parent.verticalCenter
}
}
}
}
// Helper function to check if battery widget should be visible (same logic as Battery.qml)
function shouldShowBattery() {
// For now, always show battery widget and let it handle its own visibility
// The Battery widget has its own testMode and visibility logic
return true
}
// Widget loader instance
WidgetLoader {
id: widgetLoader
onWidgetFailed: function (widgetName, error) {
Logger.error("Bar", `Widget failed: ${widgetName} - ${error}`)
}
}
// Initialize widget loading tracking
Component.onCompleted: {
const allWidgets = [...Settings.data.bar.widgets.left, ...Settings.data.bar.widgets.center, ...Settings.data.bar.widgets.right]
widgetLoader.initializeLoading(allWidgets)
}
}
}

View file

@ -9,13 +9,16 @@ import qs.Widgets
Row {
id: root
property ShellScreen screen
property real scaling: ScalingService.scale(screen)
property bool showingFullTitle: false
property int lastWindowIndex: -1
anchors.verticalCenter: parent.verticalCenter
spacing: Style.marginS * scaling
visible: getTitle() !== ""
property bool showingFullTitle: false
property int lastWindowIndex: -1
// Timer to hide full title after window switch
Timer {
id: fullTitleTimer

View file

@ -1,16 +1,18 @@
import qs.Commons
import qs.Services
import qs.Widgets
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Quickshell
import qs.Commons
import qs.Services
import qs.Widgets
NIconButton {
id: root
property ShellScreen screen
property real scaling: ScalingService.scale(screen)
sizeMultiplier: 0.8
readonly property real scaling: ScalingService.scale(screen)
colorBg: Color.mSurfaceVariant
colorFg: Color.mOnSurface
colorBorder: Color.transparent
@ -64,7 +66,7 @@ NIconButton {
if (ArchUpdaterService.updatePackages.length > 0) {
// Show confirmation dialog for updates
PanelService.updatePanel.toggle(screen)
PanelService.getPanel("archUpdaterPanel").toggle(screen)
} else {
// Just refresh if no updates available
ArchUpdaterService.doPoll()

View file

@ -6,89 +6,100 @@ import qs.Commons
import qs.Services
import qs.Widgets
NPill {
Item {
id: root
// Test mode
property bool testMode: false
property int testPercent: 49
property bool testCharging: false
property ShellScreen screen
property real scaling: ScalingService.scale(screen)
property var battery: UPower.displayDevice
property bool isReady: testMode ? true : (battery && battery.ready && battery.isLaptopBattery && battery.isPresent)
property real percent: testMode ? testPercent : (isReady ? (battery.percentage * 100) : 0)
property bool charging: testMode ? testCharging : (isReady ? battery.state === UPowerDeviceState.Charging : false)
property bool show: isReady && percent > 0
implicitWidth: pill.width
implicitHeight: pill.height
// Choose icon based on charge and charging state
function batteryIcon() {
NPill {
id: pill
if (charging)
return "battery_android_bolt"
// Test mode
property bool testMode: false
property int testPercent: 49
property bool testCharging: false
if (percent >= 95)
return "battery_android_full"
property var battery: UPower.displayDevice
property bool isReady: testMode ? true : (battery && battery.ready && battery.isLaptopBattery && battery.isPresent)
property real percent: testMode ? testPercent : (isReady ? (battery.percentage * 100) : 0)
property bool charging: testMode ? testCharging : (isReady ? battery.state === UPowerDeviceState.Charging : false)
// Hardcoded battery symbols
if (percent >= 85)
return "battery_android_6"
if (percent >= 70)
return "battery_android_5"
if (percent >= 55)
return "battery_android_4"
if (percent >= 40)
return "battery_android_3"
if (percent >= 25)
return "battery_android_2"
if (percent >= 10)
return "battery_android_1"
if (percent >= 0)
return "battery_android_0"
}
// Choose icon based on charge and charging state
function batteryIcon() {
visible: testMode || (isReady && battery.isLaptopBattery)
if (!isReady || !battery.isLaptopBattery)
return "battery_android_alert"
icon: root.batteryIcon()
text: Math.round(root.percent) + "%"
textColor: charging ? Color.mPrimary : Color.mOnSurface
forceShown: Settings.data.bar.alwaysShowBatteryPercentage
tooltipText: {
let lines = []
if (charging)
return "battery_android_bolt"
if (testMode) {
lines.push("Time left: " + Time.formatVagueHumanReadableDuration(12345))
if (percent >= 95)
return "battery_android_full"
// Hardcoded battery symbols
if (percent >= 85)
return "battery_android_6"
if (percent >= 70)
return "battery_android_5"
if (percent >= 55)
return "battery_android_4"
if (percent >= 40)
return "battery_android_3"
if (percent >= 25)
return "battery_android_2"
if (percent >= 10)
return "battery_android_1"
if (percent >= 0)
return "battery_android_0"
}
icon: batteryIcon()
text: (isReady && battery.isLaptopBattery) ? Math.round(percent) + "%" : "-"
textColor: charging ? Color.mPrimary : Color.mOnSurface
forceOpen: isReady && battery.isLaptopBattery && Settings.data.bar.alwaysShowBatteryPercentage
disableOpen: (!isReady || !battery.isLaptopBattery)
tooltipText: {
let lines = []
if (testMode) {
lines.push("Time Left: " + Time.formatVagueHumanReadableDuration(12345))
return lines.join("\n")
}
if (!isReady || !battery.isLaptopBattery) {
return "No Battery Detected"
}
if (battery.timeToEmpty > 0) {
lines.push("Time Left: " + Time.formatVagueHumanReadableDuration(battery.timeToEmpty))
}
if (battery.timeToFull > 0) {
lines.push("Time Until Full: " + Time.formatVagueHumanReadableDuration(battery.timeToFull))
}
if (battery.changeRate !== undefined) {
const rate = battery.changeRate
if (rate > 0) {
lines.push(charging ? "Charging Rate: " + rate.toFixed(2) + " W" : "Discharging Rate: " + rate.toFixed(
2) + " W")
} else if (rate < 0) {
lines.push("Discharging Rate: " + Math.abs(rate).toFixed(2) + " W")
} else {
lines.push("Estimating...")
}
} else {
lines.push(charging ? "Charging" : "Discharging")
}
if (battery.healthPercentage !== undefined && battery.healthPercentage > 0) {
lines.push("Health: " + Math.round(battery.healthPercentage) + "%")
}
return lines.join("\n")
}
if (!root.isReady) {
return ""
}
if (root.battery.timeToEmpty > 0) {
lines.push("Time left: " + Time.formatVagueHumanReadableDuration(root.battery.timeToEmpty))
}
if (root.battery.timeToFull > 0) {
lines.push("Time until full: " + Time.formatVagueHumanReadableDuration(root.battery.timeToFull))
}
if (root.battery.changeRate !== undefined) {
const rate = root.battery.changeRate
if (rate > 0) {
lines.push(root.charging ? "Charging rate: " + rate.toFixed(2) + " W" : "Discharging rate: " + rate.toFixed(
2) + " W")
} else if (rate < 0) {
lines.push("Discharging rate: " + Math.abs(rate).toFixed(2) + " W")
} else {
lines.push("Estimating...")
}
} else {
lines.push(root.charging ? "Charging" : "Discharging")
}
if (root.battery.healthPercentage !== undefined && root.battery.healthPercentage > 0) {
lines.push("Health: " + Math.round(root.battery.healthPercentage) + "%")
}
return lines.join("\n")
}
}

View file

@ -10,8 +10,11 @@ import qs.Widgets
NIconButton {
id: root
sizeMultiplier: 0.8
property ShellScreen screen
property real scaling: ScalingService.scale(screen)
visible: Settings.data.network.bluetoothEnabled
sizeMultiplier: 0.8
colorBg: Color.mSurfaceVariant
colorFg: Color.mOnSurface
colorBorder: Color.transparent
@ -28,7 +31,5 @@ NIconButton {
}
}
tooltipText: "Bluetooth Devices"
onClicked: {
bluetoothPanel.toggle(screen)
}
onClicked: PanelService.getPanel("bluetoothPanel")?.toggle(screen)
}

View file

@ -8,13 +8,16 @@ import qs.Widgets
Item {
id: root
width: pill.width
height: pill.height
visible: getMonitor() !== null
property ShellScreen screen
property real scaling: ScalingService.scale(screen)
// Used to avoid opening the pill on Quickshell startup
property bool firstBrightnessReceived: false
width: pill.width
height: pill.height
visible: getMonitor() !== null
function getMonitor() {
return BrightnessService.getMonitorForScreen(screen) || null
}

View file

@ -1,16 +1,21 @@
import QtQuick
import Quickshell
import qs.Commons
import qs.Services
import qs.Widgets
// Clock Icon with attached calendar
Rectangle {
id: root
width: clock.width + Style.marginM * 2 * scaling
height: Math.round(Style.capsuleHeight * scaling)
property ShellScreen screen
property real scaling: ScalingService.scale(screen)
implicitWidth: clock.width + Style.marginM * 2 * scaling
implicitHeight: Math.round(Style.capsuleHeight * scaling)
radius: Math.round(Style.radiusM * scaling)
color: Color.mSurfaceVariant
// Clock Icon with attached calendar
NClock {
id: clock
anchors.verticalCenter: parent.verticalCenter
@ -24,7 +29,7 @@ Rectangle {
}
onEntered: {
if (!calendarPanel.active) {
if (!PanelService.getPanel("calendarPanel")?.active) {
tooltip.show()
}
}
@ -33,7 +38,7 @@ Rectangle {
}
onClicked: {
tooltip.hide()
calendarPanel.toggle(screen)
PanelService.getPanel("calendarPanel")?.toggle(screen)
}
}
}

View file

@ -6,15 +6,18 @@ import qs.Commons
import qs.Services
import qs.Widgets
Item {
Row {
id: root
width: pill.width
height: pill.height
property ShellScreen screen
property real scaling: ScalingService.scale(screen)
// Use the shared service for keyboard layout
property string currentLayout: KeyboardLayoutService.currentLayout
width: pill.width
height: pill.height
NPill {
id: pill
icon: "keyboard_alt"

View file

@ -9,6 +9,10 @@ import qs.Widgets
Row {
id: root
property ShellScreen screen
property real scaling: ScalingService.scale(screen)
anchors.verticalCenter: parent.verticalCenter
spacing: Style.marginS * scaling
visible: MediaService.currentPlayer !== null && MediaService.canPlay

View file

@ -10,6 +10,9 @@ import qs.Widgets
NIconButton {
id: root
property ShellScreen screen
property real scaling: ScalingService.scale(screen)
sizeMultiplier: 0.8
icon: "notifications"
tooltipText: "Notification History"
@ -17,8 +20,5 @@ NIconButton {
colorFg: Color.mOnSurface
colorBorder: Color.transparent
colorBorderHover: Color.transparent
onClicked: {
notificationHistoryPanel.toggle(screen)
}
onClicked: PanelService.getPanel("notificationHistoryPanel")?.toggle(screen)
}

View file

@ -1,7 +1,7 @@
import QtQuick
import QtQuick.Layouts
import Quickshell
import Quickshell.Services.UPower
import QtQuick.Layouts
import qs.Commons
import qs.Services
import qs.Widgets
@ -9,6 +9,8 @@ import qs.Widgets
NIconButton {
id: root
property ShellScreen screen
property real scaling: ScalingService.scale(screen)
property var powerProfiles: PowerProfiles
readonly property bool hasPP: powerProfiles.hasPerformanceProfile

View file

@ -1,18 +1,21 @@
import Quickshell
import qs.Commons
import qs.Services
import qs.Widgets
// Screen Recording Indicator
NIconButton {
id: screenRecordingIndicator
id: root
property ShellScreen screen
property real scaling: ScalingService.scale(screen)
visible: ScreenRecorderService.isRecording
icon: "videocam"
tooltipText: "Screen Recording Active\nClick To Stop Recording"
sizeMultiplier: 0.8
colorBg: Color.mPrimary
colorFg: Color.mOnPrimary
visible: ScreenRecorderService.isRecording
anchors.verticalCenter: parent.verticalCenter
onClicked: {
ScreenRecorderService.toggleRecording()
}
onClicked: ScreenRecorderService.toggleRecording()
}

View file

@ -1,9 +1,14 @@
import Quickshell
import qs.Commons
import qs.Widgets
import qs.Services
NIconButton {
id: sidePanelToggle
id: root
property ShellScreen screen
property real scaling: ScalingService.scale(screen)
icon: "widgets"
tooltipText: "Open Side Panel"
sizeMultiplier: 0.8
@ -14,5 +19,5 @@ NIconButton {
colorBorderHover: Color.transparent
anchors.verticalCenter: parent.verticalCenter
onClicked: sidePanel.toggle(screen)
onClicked: PanelService.getPanel("sidePanel")?.toggle(screen)
}

View file

@ -6,6 +6,10 @@ import qs.Widgets
Row {
id: root
property ShellScreen screen
property real scaling: ScalingService.scale(screen)
anchors.verticalCenter: parent.verticalCenter
spacing: Style.marginS * scaling

View file

@ -6,15 +6,20 @@ import Quickshell
import Quickshell.Services.SystemTray
import Quickshell.Widgets
import qs.Commons
import qs.Modules.Bar.Extras
import qs.Services
import qs.Widgets
Rectangle {
id: root
property ShellScreen screen
property real scaling: ScalingService.scale(screen)
readonly property real itemSize: 24 * scaling
visible: SystemTray.items.values.length > 0
width: tray.width + Style.marginM * scaling * 2
height: Math.round(Style.capsuleHeight * scaling)
implicitWidth: tray.width + Style.marginM * scaling * 2
implicitHeight: Math.round(Style.capsuleHeight * scaling)
radius: Math.round(Style.radiusM * scaling)
color: Color.mSurfaceVariant
@ -134,9 +139,7 @@ Rectangle {
function open() {
visible = true
// Register into the panel service
// so this will autoclose if we open another panel
PanelService.registerOpen(trayPanel)
PanelService.willOpenPanel(trayPanel)
}
function close() {
@ -152,7 +155,7 @@ Rectangle {
Loader {
id: trayMenu
source: "TrayMenu.qml"
source: "../Extras/TrayMenu.qml"
}
}
}

View file

@ -9,12 +9,15 @@ import qs.Widgets
Item {
id: root
width: pill.width
height: pill.height
property ShellScreen screen
property real scaling: ScalingService.scale(screen)
// Used to avoid opening the pill on Quickshell startup
property bool firstVolumeReceived: false
implicitWidth: pill.width
implicitHeight: pill.height
function getIcon() {
if (AudioService.muted) {
return "volume_off"
@ -64,6 +67,7 @@ Item {
}
}
onClicked: {
var settingsPanel = PanelService.getPanel("settingsPanel")
settingsPanel.requestedTab = SettingsPanel.Tab.AudioService
settingsPanel.open(screen)
}

View file

@ -10,6 +10,11 @@ import qs.Widgets
NIconButton {
id: root
property ShellScreen screen
property real scaling: ScalingService.scale(screen)
visible: Settings.data.network.wifiEnabled
sizeMultiplier: 0.8
Component.onCompleted: {
@ -44,11 +49,11 @@ NIconButton {
return "signal_wifi_bad"
}
}
tooltipText: "WiFi Networks"
tooltipText: "Network / WiFi"
onClicked: {
try {
Logger.log("WiFi", "Button clicked, toggling panel")
wifiPanel.toggle(screen)
PanelService.getPanel("wifiPanel")?.toggle(screen)
} catch (error) {
Logger.error("WiFi", "Error toggling panel:", error)
}

View file

@ -10,6 +10,10 @@ import qs.Services
Item {
id: root
property ShellScreen screen: null
property real scaling: ScalingService.scale(screen)
property bool isDestroying: false
property bool hovered: false
@ -23,7 +27,8 @@ Item {
signal workspaceChanged(int workspaceId, color accentColor)
width: {
implicitHeight: Math.round(36 * scaling)
implicitWidth: {
let total = 0
for (var i = 0; i < localWorkspaces.count; i++) {
const ws = localWorkspaces.get(i)
@ -39,34 +44,35 @@ Item {
return total
}
height: Math.round(36 * scaling)
Component.onCompleted: {
localWorkspaces.clear()
for (var i = 0; i < WorkspaceService.workspaces.count; i++) {
const ws = WorkspaceService.workspaces.get(i)
if (ws.output.toLowerCase() === screen.name.toLowerCase()) {
localWorkspaces.append(ws)
}
}
workspaceRepeater.model = localWorkspaces
updateWorkspaceFocus()
refreshWorkspaces()
}
Component.onDestruction: {
root.isDestroying = true
}
onScreenChanged: refreshWorkspaces()
Connections {
target: WorkspaceService
function onWorkspacesChanged() {
localWorkspaces.clear()
refreshWorkspaces()
}
}
function refreshWorkspaces() {
localWorkspaces.clear()
if (screen !== null) {
for (var i = 0; i < WorkspaceService.workspaces.count; i++) {
const ws = WorkspaceService.workspaces.get(i)
if (ws.output.toLowerCase() === screen.name.toLowerCase()) {
localWorkspaces.append(ws)
}
}
workspaceRepeater.model = localWorkspaces
updateWorkspaceFocus()
}
workspaceRepeater.model = localWorkspaces
updateWorkspaceFocus()
}
function triggerUnifiedWave() {
@ -74,6 +80,17 @@ Item {
masterAnimation.restart()
}
function updateWorkspaceFocus() {
for (var i = 0; i < localWorkspaces.count; i++) {
const ws = localWorkspaces.get(i)
if (ws.isFocused === true) {
root.triggerUnifiedWave()
root.workspaceChanged(ws.id, Color.mPrimary)
break
}
}
}
SequentialAnimation {
id: masterAnimation
PropertyAction {
@ -101,17 +118,6 @@ Item {
}
}
function updateWorkspaceFocus() {
for (var i = 0; i < localWorkspaces.count; i++) {
const ws = localWorkspaces.get(i)
if (ws.isFocused === true) {
root.triggerUnifiedWave()
root.workspaceChanged(ws.id, Color.mPrimary)
break
}
}
}
Rectangle {
id: workspaceBackground
width: parent.width - Style.marginS * scaling * 2
@ -254,8 +260,4 @@ Item {
}
}
}
Component.onDestruction: {
root.isDestroying = true
}
}

View file

@ -104,17 +104,6 @@ NPanel {
year: Time.date.getFullYear()
locale: Qt.locale() // Use system locale
// Optionally, update when the panel becomes visible
Connections {
target: calendarPanel
function onVisibleChanged() {
if (calendarPanel.visible) {
grid.month = Time.date.getMonth()
grid.year = Time.date.getFullYear()
}
}
}
delegate: Rectangle {
width: (Style.baseWidgetSize * scaling)
height: (Style.baseWidgetSize * scaling)

View file

@ -163,7 +163,7 @@ ColumnLayout {
spacing: Style.marginM * scaling
// Left Section
NWidgetCard {
NSectionEditor {
sectionName: "Left"
widgetModel: Settings.data.bar.widgets.left
availableWidgets: availableWidgets
@ -174,7 +174,7 @@ ColumnLayout {
}
// Center Section
NWidgetCard {
NSectionEditor {
sectionName: "Center"
widgetModel: Settings.data.bar.widgets.center
availableWidgets: availableWidgets
@ -185,7 +185,7 @@ ColumnLayout {
}
// Right Section
NWidgetCard {
NSectionEditor {
sectionName: "Right"
widgetModel: Settings.data.bar.widgets.right
availableWidgets: availableWidgets
@ -228,15 +228,6 @@ ColumnLayout {
// Assign the new array
Settings.data.bar.widgets[section] = newArray
// Force a settings save
//Logger.log("BarTab", "Settings updated, triggering save...")
// Verify the change was applied
Qt.setTimeout(function () {
var updatedArray = Settings.data.bar.widgets[section]
//Logger.log("BarTab", "Verification - updated section array:", JSON.stringify(updatedArray))
}, 100)
} else {
//Logger.log("BarTab", "Invalid section or index:", section, index, "array length:",
@ -262,29 +253,19 @@ ColumnLayout {
}
}
// Widget loader for discovering available widgets
WidgetLoader {
id: widgetLoader
}
// Base list model for all combo boxes
ListModel {
id: availableWidgets
}
Component.onCompleted: {
discoverWidgets()
}
// Automatically discover available widgets using WidgetLoader
function discoverWidgets() {
// Fill out availableWidgets ListModel
availableWidgets.clear()
// Use WidgetLoader to discover available widgets
const discoveredWidgets = widgetLoader.discoverAvailableWidgets()
// Add discovered widgets to the ListModel
discoveredWidgets.forEach(widget => {
availableWidgets.append(widget)
})
BarWidgetRegistry.getAvailableWidgets().forEach(entry => {
availableWidgets.append({
"key": entry,
"name": entry
})
})
}
}

View file

@ -50,6 +50,7 @@ NBox {
icon: "image"
tooltipText: "Open Wallpaper Selector"
onClicked: {
var settingsPanel = PanelService.getPanel("settingsPanel")
settingsPanel.requestedTab = SettingsPanel.Tab.WallpaperSelector
settingsPanel.open(screen)
}

View file

@ -0,0 +1,99 @@
pragma Singleton
import QtQuick
import Quickshell
import qs.Modules.Bar.Widgets
Singleton {
id: root
// Widget registry object mapping widget names to components
property var widgets: ({
"ActiveWindow": activeWindowComponent,
"ArchUpdater": archUpdaterComponent,
"Battery": batteryComponent,
"Bluetooth": bluetoothComponent,
"Brightness": brightnessComponent,
"Clock": clockComponent,
"KeyboardLayout": keyboardLayoutComponent,
"MediaMini": mediaMiniComponent,
"NotificationHistory": notificationHistoryComponent,
"PowerProfile": powerProfileComponent,
"ScreenRecorderIndicator": screenRecorderIndicatorComponent,
"SidePanelToggle": sidePanelToggleComponent,
"SystemMonitor": systemMonitorComponent,
"Tray": trayComponent,
"Volume": volumeComponent,
"WiFi": wiFiComponent,
"Workspace": workspaceComponent
})
// Component definitions - these are loaded once at startup
property Component activeWindowComponent: Component {
ActiveWindow {}
}
property Component archUpdaterComponent: Component {
ArchUpdater {}
}
property Component batteryComponent: Component {
Battery {}
}
property Component bluetoothComponent: Component {
Bluetooth {}
}
property Component brightnessComponent: Component {
Brightness {}
}
property Component clockComponent: Component {
Clock {}
}
property Component keyboardLayoutComponent: Component {
KeyboardLayout {}
}
property Component mediaMiniComponent: Component {
MediaMini {}
}
property Component notificationHistoryComponent: Component {
NotificationHistory {}
}
property Component powerProfileComponent: Component {
PowerProfile {}
}
property Component screenRecorderIndicatorComponent: Component {
ScreenRecorderIndicator {}
}
property Component sidePanelToggleComponent: Component {
SidePanelToggle {}
}
property Component systemMonitorComponent: Component {
SystemMonitor {}
}
property Component trayComponent: Component {
Tray {}
}
property Component volumeComponent: Component {
Volume {}
}
property Component wiFiComponent: Component {
WiFi {}
}
property Component workspaceComponent: Component {
Workspace {}
}
// ------------------------------
// Helper function to get widget component by name
function getWidget(name) {
return widgets[name] || null
}
// Helper function to check if widget exists
function hasWidget(name) {
return name in widgets
}
// Get list of available widget names
function getAvailableWidgets() {
return Object.keys(widgets)
}
}

View file

@ -38,7 +38,7 @@ Singleton {
id: process
stdinEnabled: true
running: (Settings.data.audio.visualizerType !== "none")
&& (PanelService.sidePanel.active || Settings.data.audio.showMiniplayerCava
&& (PanelService.getPanel("sidePanel").active || Settings.data.audio.showMiniplayerCava
|| (PanelService.lockScreen && PanelService.lockScreen.active))
command: ["cava", "-p", "/dev/stdin"]
onExited: {

View file

@ -19,7 +19,7 @@ Singleton {
property ListModel workspaces: ListModel {}
property var windows: []
property int focusedWindowIndex: -1
property string focusedWindowTitle: "(No active window)"
property string focusedWindowTitle: "n/a"
property bool inOverview: false
// Generic events

View file

@ -1,9 +1,10 @@
pragma Singleton
import QtQuick
import Quickshell
import Quickshell.Io
import qs.Commons
import qs.Services
pragma Singleton
// GitHub API logic and caching
Singleton {

View file

@ -1,9 +1,10 @@
pragma Singleton
import QtQuick
import Quickshell
import Quickshell.Io
import qs.Commons
import qs.Services
pragma Singleton
// Weather logic and caching
Singleton {

View file

@ -1,10 +1,11 @@
pragma Singleton
import QtQuick
import Quickshell
import Quickshell.Io
import qs.Commons
import qs.Services
import Quickshell.Services.Notifications
pragma Singleton
QtObject {
id: root

View file

@ -1,23 +1,38 @@
pragma Singleton
import Quickshell
import qs.Commons
Singleton {
id: root
// A ref. to the sidePanel, so it's accessible from other services
property var sidePanel: null
// A ref. to the lockScreen, so it's accessible from other services
// A ref. to the lockScreen, so it's accessible from anywhere
// This is not a panel...
property var lockScreen: null
// A ref. to the updatePanel, so it's accessible from other services
property var updatePanel: null
// Currently opened panel
property var openedPanel: null
function registerOpen(panel) {
property var registeredPanels: ({})
// Register this panel
function registerPanel(panel) {
registeredPanels[panel.objectName] = panel
Logger.log("PanelService", "Registered:", panel.objectName)
}
// Returns a panel
function getPanel(name) {
return registeredPanels[name] || null
}
// Check if a panel exists
function hasPanel(name) {
return name in registeredPanels
}
// Helper to keep only one panel open at any time
function willOpenPanel(panel) {
if (openedPanel && openedPanel != panel) {
openedPanel.close()
}

View file

@ -46,7 +46,6 @@ Singleton {
//Logger.log("ScreenRecorder", command)
Quickshell.execDetached(["sh", "-c", command])
Logger.log("ScreenRecorder", "Started recording")
//Logger.log("ScreenRecorder", command)
}
// Stop recording using Quickshell.execDetached

View file

@ -31,6 +31,12 @@ Loader {
signal opened
signal closed
Component.onCompleted: {
// console.log("Oh Yeah")
// console.log(objectName)
PanelService.registerPanel(root)
}
// -----------------------------------------
function toggle(aScreen) {
if (!active || isClosing) {
@ -53,7 +59,7 @@ Loader {
opacityValue = 1.0
}
PanelService.registerOpen(root)
PanelService.willOpenPanel(root)
active = true
root.opened()

View file

@ -16,10 +16,11 @@ Item {
property color collapsedIconColor: Color.mOnSurface
property real sizeMultiplier: 0.8
property bool autoHide: false
// When true, keep the pill expanded regardless of hover state
property bool forceShown: false
property bool forceOpen: false
property bool disableOpen: false
// Effective shown state (true if hovered/animated open or forced)
readonly property bool effectiveShown: forceShown || showPill
readonly property bool effectiveShown: forceOpen || showPill
signal shown
signal hidden
@ -85,7 +86,7 @@ Item {
height: iconSize
radius: width * 0.5
// When forced shown, match pill background; otherwise use accent when hovered
color: forceShown ? pillColor : (showPill ? iconCircleColor : Color.mSurfaceVariant)
color: forceOpen ? pillColor : (showPill ? iconCircleColor : Color.mSurfaceVariant)
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
@ -100,7 +101,7 @@ Item {
text: root.icon
font.pointSize: Style.fontSizeM * scaling
// When forced shown, use pill text color; otherwise accent color when hovered
color: forceShown ? textColor : (showPill ? iconTextColor : Color.mOnSurface)
color: forceOpen ? textColor : (showPill ? iconTextColor : Color.mOnSurface)
anchors.centerIn: parent
}
}
@ -194,18 +195,21 @@ Item {
anchors.fill: parent
hoverEnabled: true
onEntered: {
if (!forceShown) {
root.entered()
tooltip.show()
if (disableOpen) {
return
}
if (!forceOpen) {
showDelayed()
}
tooltip.show()
root.entered()
}
onExited: {
if (!forceShown) {
root.exited()
if (!forceOpen) {
hide()
}
tooltip.hide()
root.exited()
}
onClicked: {
root.clicked()
@ -226,7 +230,7 @@ Item {
}
function hide() {
if (forceShown) {
if (forceOpen) {
return
}
if (showPill) {
@ -245,8 +249,8 @@ Item {
}
}
onForceShownChanged: {
if (forceShown) {
onForceOpenChanged: {
if (forceOpen) {
// Immediately lock open without animations
showAnim.stop()
hideAnim.stop()

View file

@ -90,6 +90,7 @@ NBox {
colorFgHover: Color.mOnSecondary
enabled: comboBox.selectedKey !== ""
Layout.alignment: Qt.AlignVCenter
Layout.leftMargin: Style.marginS * scaling
onClicked: {
if (comboBox.currentKey !== "") {
addWidget(comboBox.currentKey, sectionName.toLowerCase())
@ -174,27 +175,27 @@ NBox {
anchors.fill: parent
drag.target: parent
onPressed: {
// Check if the click is on the close button area
const closeButtonX = widgetContent.x + widgetContent.width - 20 * scaling
const closeButtonY = widgetContent.y
const closeButtonWidth = 20 * scaling
const closeButtonHeight = 20 * scaling
onPressed: mouse => {
// Check if the click is on the close button area
const closeButtonX = widgetContent.x + widgetContent.width - 20 * scaling
const closeButtonY = widgetContent.y
const closeButtonWidth = 20 * scaling
const closeButtonHeight = 20 * scaling
if (mouseX >= closeButtonX && mouseX <= closeButtonX + closeButtonWidth && mouseY >= closeButtonY
&& mouseY <= closeButtonY + closeButtonHeight) {
// Click is on the close button, don't start drag
mouse.accepted = false
return
}
if (mouseX >= closeButtonX && mouseX <= closeButtonX + closeButtonWidth
&& mouseY >= closeButtonY && mouseY <= closeButtonY + closeButtonHeight) {
// Click is on the close button, don't start drag
mouse.accepted = false
return
}
Logger.log("NWidgetCard", `Started dragging widget: ${modelData} at index ${index}`)
// Bring to front when starting drag
widgetItem.z = 1000
}
Logger.log("NSectionEditor", `Started dragging widget: ${modelData} at index ${index}`)
// Bring to front when starting drag
widgetItem.z = 1000
}
onReleased: {
Logger.log("NWidgetCard", `Released widget: ${modelData} at index ${index}`)
Logger.log("NSectionEditor", `Released widget: ${modelData} at index ${index}`)
// Reset z-index when drag ends
widgetItem.z = 0
@ -232,12 +233,12 @@ NBox {
const fromIndex = index
const toIndex = targetIndex
Logger.log(
"NWidgetCard",
"NSectionEditor",
`Dropped widget from index ${fromIndex} to position ${toIndex} (distance: ${minDistance.toFixed(
2)})`)
reorderWidget(sectionName.toLowerCase(), fromIndex, toIndex)
} else {
Logger.log("NWidgetCard", `No valid drop target found for widget at index ${index}`)
Logger.log("NSectionEditor", `No valid drop target found for widget at index ${index}`)
}
}
}
@ -264,16 +265,16 @@ NBox {
}
onEntered: function (drag) {
Logger.log("NWidgetCard", "Entered start drop zone")
Logger.log("NSectionEditor", "Entered start drop zone")
}
onDropped: function (drop) {
Logger.log("NWidgetCard", "Dropped on start zone")
Logger.log("NSectionEditor", "Dropped on start zone")
if (drop.source && drop.source.widgetIndex !== undefined) {
const fromIndex = drop.source.widgetIndex
const toIndex = 0 // Insert at the beginning
if (fromIndex !== toIndex) {
Logger.log("NWidgetCard", `Dropped widget from index ${fromIndex} to beginning`)
Logger.log("NSectionEditor", `Dropped widget from index ${fromIndex} to beginning`)
reorderWidget(sectionName.toLowerCase(), fromIndex, toIndex)
}
}
@ -299,16 +300,16 @@ NBox {
}
onEntered: function (drag) {
Logger.log("NWidgetCard", "Entered end drop zone")
Logger.log("NSectionEditor", "Entered end drop zone")
}
onDropped: function (drop) {
Logger.log("NWidgetCard", "Dropped on end zone")
Logger.log("NSectionEditor", "Dropped on end zone")
if (drop.source && drop.source.widgetIndex !== undefined) {
const fromIndex = drop.source.widgetIndex
const toIndex = widgetModel.length // Insert at the end
if (fromIndex !== toIndex) {
Logger.log("NWidgetCard", `Dropped widget from index ${fromIndex} to end`)
Logger.log("NSectionEditor", `Dropped widget from index ${fromIndex} to end`)
reorderWidget(sectionName.toLowerCase(), fromIndex, toIndex)
}
}

46
Widgets/NWidgetLoader.qml Normal file
View file

@ -0,0 +1,46 @@
import QtQuick
import Quickshell
import qs.Services
Item {
id: root
property string widgetName: ""
property var widgetProps: ({})
property bool enabled: true
// Don't reserve space unless the loaded widget is really visible
implicitWidth: loader.item ? loader.item.visible ? loader.item.implicitWidth : 0 : 0
implicitHeight: loader.item ? loader.item.visible ? loader.item.implicitHeight : 0 : 0
Loader {
id: loader
anchors.fill: parent
active: enabled && widgetName !== ""
sourceComponent: {
if (!active) {
return null
}
return BarWidgetRegistry.getWidget(widgetName)
}
onLoaded: {
if (item && widgetProps) {
// Apply properties to loaded widget
for (var prop in widgetProps) {
if (item.hasOwnProperty(prop)) {
item[prop] = widgetProps[prop]
}
}
}
}
}
// Error handling
onWidgetNameChanged: {
if (widgetName && !BarWidgetRegistry.hasWidget(widgetName)) {
Logger.warn("WidgetLoader", "Widget not found in registry:", widgetName)
}
}
}

View file

@ -40,64 +40,69 @@ ShellRoot {
Bar {}
Dock {}
Launcher {
id: launcherPanel
}
SidePanel {
id: sidePanel
}
Calendar {
id: calendarPanel
}
SettingsPanel {
id: settingsPanel
}
Notification {
id: notification
}
NotificationHistoryPanel {
id: notificationHistoryPanel
}
LockScreen {
id: lockScreen
}
PowerPanel {
id: powerPanel
}
WiFiPanel {
id: wifiPanel
}
BluetoothPanel {
id: bluetoothPanel
}
ArchUpdaterPanel {
id: updatePanel
}
ToastManager {}
IPCManager {}
// ------------------------------
// All the panels
Launcher {
id: launcherPanel
objectName: "launcherPanel"
}
SidePanel {
id: sidePanel
objectName: "sidePanel"
}
Calendar {
id: calendarPanel
objectName: "calendarPanel"
}
SettingsPanel {
id: settingsPanel
objectName: "settingsPanel"
}
NotificationHistoryPanel {
id: notificationHistoryPanel
objectName: "notificationHistoryPanel"
}
PowerPanel {
id: powerPanel
objectName: "powerPanel"
}
WiFiPanel {
id: wifiPanel
objectName: "wifiPanel"
}
BluetoothPanel {
id: bluetoothPanel
objectName: "bluetoothPanel"
}
ArchUpdaterPanel {
id: archUpdaterPanel
objectName: "archUpdaterPanel"
}
Component.onCompleted: {
// Save a ref. to our sidePanel so we can access it from services
PanelService.sidePanel = sidePanel
// Save a ref. to our lockScreen so we can access it from services
// Save a ref. to our lockScreen so we can access it easily
PanelService.lockScreen = lockScreen
// Save a ref. to our updatePanel so we can access it from services
PanelService.updatePanel = updatePanel
// Ensure our singleton is created as soon as possible so we start fetching weather asap
LocationService.init()
}