Modularlize the shell

Common/Theme.qml

@@ -0,0 +1,66 @@
+import QtQuick
+pragma Singleton
+pragma ComponentBehavior: Bound
+
+QtObject {
+    id: root
+    
+    property color primary: "#D0BCFF"
+    property color primaryText: "#381E72"
+    property color primaryContainer: "#4F378B"
+    property color secondary: "#CCC2DC"
+    property color surface: "#10121E"
+    property color surfaceText: "#E6E0E9"
+    property color surfaceVariant: "#49454F"
+    property color surfaceVariantText: "#CAC4D0"
+    property color surfaceTint: "#D0BCFF"
+    property color background: "#10121E"
+    property color backgroundText: "#E6E0E9"
+    property color outline: "#938F99"
+    property color surfaceContainer: "#1D1B20"
+    property color surfaceContainerHigh: "#2B2930"
+    property color archBlue: "#1793D1"
+    property color success: "#4CAF50"
+    property color warning: "#FF9800"
+    property color info: "#2196F3"
+    property color error: "#F2B8B5"
+    
+    property int shortDuration: 150
+    property int mediumDuration: 300
+    property int longDuration: 500
+    property int extraLongDuration: 1000
+    
+    property int standardEasing: Easing.OutCubic
+    property int emphasizedEasing: Easing.OutQuart
+    
+    property real cornerRadius: 12
+    property real cornerRadiusSmall: 8
+    property real cornerRadiusLarge: 16
+    property real cornerRadiusXLarge: 24
+    
+    property real spacingXS: 4
+    property real spacingS: 8
+    property real spacingM: 12
+    property real spacingL: 16
+    property real spacingXL: 24
+    
+    property real fontSizeSmall: 12
+    property real fontSizeMedium: 14
+    property real fontSizeLarge: 16
+    property real fontSizeXLarge: 20
+    
+    property real barHeight: 48
+    property real iconSize: 24
+    property real iconSizeSmall: 16
+    property real iconSizeLarge: 32
+    
+    property real opacityDisabled: 0.38
+    property real opacityMedium: 0.60
+    property real opacityHigh: 0.87
+    property real opacityFull: 1.0
+    
+    property string iconFont: "Material Symbols Rounded"
+    property string iconFontFilled: "Material Symbols Rounded"
+    property int iconFontWeight: Font.Normal
+    property int iconFontFilledWeight: Font.Medium
+}

Common/Utilities.js

@@ -0,0 +1,101 @@
+function parseWorkspaceOutput(data) {
+    const lines = data.split('\n')
+    let currentOutputName = ""
+    let focusedOutput = ""
+    let focusedWorkspace = 1
+    let outputWorkspaces = {}
+    
+    
+    for (const line of lines) {
+        if (line.startsWith('Output "')) {
+            const outputMatch = line.match(/Output "(.+)"/)
+            if (outputMatch) {
+                currentOutputName = outputMatch[1]
+                outputWorkspaces[currentOutputName] = []
+            }
+            continue
+        }
+        
+        if (line.trim() && line.match(/^\s*\*?\s*(\d+)$/)) {
+            const wsMatch = line.match(/^\s*(\*?)\s*(\d+)$/)
+            if (wsMatch) {
+                const isActive = wsMatch[1] === '*'
+                const wsNum = parseInt(wsMatch[2])
+                
+                if (currentOutputName && outputWorkspaces[currentOutputName]) {
+                    outputWorkspaces[currentOutputName].push(wsNum)
+                }
+                
+                if (isActive) {
+                    focusedOutput = currentOutputName
+                    focusedWorkspace = wsNum
+                }
+            }
+        }
+    }
+    
+    // Show workspaces for THIS screen only
+    if (topBar.screenName && outputWorkspaces[topBar.screenName]) {
+        workspaceList = outputWorkspaces[topBar.screenName]
+        
+        // Always track the active workspace for this display
+        // Parse all lines to find which workspace is active on this display
+        let thisDisplayActiveWorkspace = 1
+        let inThisOutput = false
+        
+        for (const line of lines) {
+            if (line.startsWith('Output "')) {
+                const outputMatch = line.match(/Output "(.+)"/)
+                inThisOutput = outputMatch && outputMatch[1] === topBar.screenName
+                continue
+            }
+            
+            if (inThisOutput && line.trim() && line.match(/^\s*\*\s*(\d+)$/)) {
+                const wsMatch = line.match(/^\s*\*\s*(\d+)$/)
+                if (wsMatch) {
+                    thisDisplayActiveWorkspace = parseInt(wsMatch[1])
+                    break
+                }
+            }
+        }
+        
+        currentWorkspace = thisDisplayActiveWorkspace
+        // console.log("Monitor", topBar.screenName, "active workspace:", thisDisplayActiveWorkspace)
+    } else {
+        // Fallback if screen name not found
+        workspaceList = [1, 2]
+        currentWorkspace = 1
+    }
+}
+
+function showMenu(x, y) {
+    root.currentTrayMenu = customTrayMenu
+    root.currentTrayItem = trayItem
+    
+    // Simple positioning: right side of screen, below the panel
+    root.trayMenuX = rightSection.x + rightSection.width - 180 - theme.spacingL
+    root.trayMenuY = theme.barHeight + theme.spacingS
+    
+    console.log("Showing menu at:", root.trayMenuX, root.trayMenuY)
+    menuVisible = true
+    root.showTrayMenu = true
+}
+
+function hideMenu() {
+    menuVisible = false
+    root.showTrayMenu = false
+    root.currentTrayMenu = null
+    root.currentTrayItem = null
+}
+
+function showNotificationPopup(notification) {
+    root.activeNotification = notification
+    root.showNotificationPopup = true
+    notificationTimer.restart()
+}
+
+function hideNotificationPopup() {
+    root.showNotificationPopup = false
+    notificationTimer.stop()
+    clearNotificationTimer.restart()
+}

Common/qmldir

@@ -0,0 +1,4 @@
+module Common
+
+singleton Theme 1.0 Theme.qml
+Utilities 1.0 Utilities.js