group panels more properly

dots/.config/quickshell/ii/modules/common/Config.qml

@@ -78,10 +78,7 @@ Singleton {
         JsonAdapter {
             id: configOptionsJsonAdapter
 
-            property list<string> enabledPanels: [
+            property string panelFamily: "ii" // "ii", "waffle"
-                "iiBar", "iiBackground", "iiCheatsheet", "iiDock", "iiLock", "iiMediaControls", "iiNotificationPopup", "iiOnScreenDisplay", "iiOnScreenKeyboard", "iiOverlay", "iiOverview", "iiPolkit", "iiRegionSelector", "iiReloadPopup", "iiScreenCorners", "iiSessionScreen", "iiSidebarLeft", "iiSidebarRight", "iiVerticalBar", "iiWallpaperSelector"
-            ]
-            property string panelFamily: "ii" // "ii", "w"
 
             property JsonObject policies: JsonObject {
                 property int ai: 1 // 0: No | 1: Yes | 2: Local

dots/.config/quickshell/ii/modules/waffle/looks/Looks.qml

@@ -89,10 +89,11 @@ Singleton {
         // Special
         property color shadow: ColorUtils.transparentize('#161616', 0.62)
         property color ambientShadow: ColorUtils.transparentize("#000000", 0.75)
-        property color bgPanelFooterBase: ColorUtils.transparentize(root.dark ? root.darkColors.bg0 : root.lightColors.bg0, root.panelBackgroundTransparency)
+        property color bgPanelFooterBase: root.dark ? root.darkColors.bg0 : root.lightColors.bg0
-        property color bgPanelFooter: ColorUtils.transparentize(bgPanelFooterBase, root.panelLayerTransparency)
+        property color bgPanelFooterBackground: ColorUtils.transparentize(root.dark ? root.darkColors.bg0 : root.lightColors.bg0, root.panelBackgroundTransparency)
+        property color bgPanelFooter: ColorUtils.transparentize(bgPanelFooterBackground, root.panelLayerTransparency)
         property color bgPanelBodyBase: root.dark ? root.darkColors.bgPanelBody : root.lightColors.bgPanelBody
-        property color bgPanelBody: ColorUtils.solveOverlayColor(bgPanelFooterBase,bgPanelBodyBase, 1 - root.panelLayerTransparency)
+        property color bgPanelBody: ColorUtils.solveOverlayColor(bgPanelFooterBackground,bgPanelBodyBase, 1 - root.panelLayerTransparency)
         property color bgPanelSeparator: ColorUtils.solveOverlayColor(bgPanelBodyBase, root.dark ? root.darkColors.bgPanelSeparator : root.lightColors.bgPanelSeparator, 1 - root.panelBackgroundTransparency)
         // Layer 0
         property color bg0Base: root.dark ? root.darkColors.bg0 : root.lightColors.bg0

dots/.config/quickshell/ii/modules/waffle/looks/WPane.qml

@@ -12,6 +12,7 @@ Item {
     id: root
     property Item contentItem
     property real radius: Looks.radius.large
+    property alias color: contentRect.color
     property alias border: borderRect
     property alias borderColor: borderRect.border.color
     property alias borderWidth: borderRect.border.width
@@ -42,7 +43,7 @@ Item {
         anchors.centerIn: parent
         z: 0
         
-        color: Looks.colors.bgPanelFooterBase
+        color: Looks.colors.bgPanelFooterBackground
         implicitWidth: contentItem.implicitWidth
         implicitHeight: contentItem.implicitHeight
         layer.enabled: true

dots/.config/quickshell/ii/modules/waffle/polkit/WPolkitContent.qml

@@ -135,7 +135,7 @@ Rectangle {
             }
             BodyRectangle {
                 implicitHeight: 80
-                color: Looks.colors.bgPanelFooterBase
+                color: Looks.colors.bgPanelFooterBackground
                 RowLayout {
                     anchors.fill: parent
                     anchors.margins: 24

dots/.config/quickshell/ii/modules/waffle/screenSnip/WRectangularSelection.qml

@@ -18,7 +18,7 @@ Item {
     Component.onCompleted: overlayColor = ColorUtils.transparentize("#000000", 0.4)
     Behavior on overlayColor {
         ColorAnimation {
-            duration: 250
+            duration: 150
             easing.type: Easing.InOutQuad
         }
     }

dots/.config/quickshell/ii/modules/waffle/taskView/TaskViewContent.qml

@@ -231,7 +231,7 @@ Rectangle {
             anchors.fill: parent
             anchors.margins: wsBorder.border.width
             radius: wsBorder.radius - wsBorder.border.width
-            color: Looks.colors.bgPanelFooterBase
+            color: Looks.colors.bgPanelFooterBackground
 
             implicitHeight: 174
 

dots/.config/quickshell/ii/modules/waffle/taskView/TaskViewWindow.qml

@@ -25,7 +25,7 @@ WMouseAreaButton {
 
     property string iconName: AppSearch.guessIcon(hyprlandClient?.class)
 
-    color: drag.active ? ColorUtils.transparentize(Looks.colors.bg1Base) : (containsMouse ? Looks.colors.bg1Base : Looks.colors.bgPanelFooterBase)
+    color: drag.active ? ColorUtils.transparentize(Looks.colors.bg1Base) : (containsMouse ? Looks.colors.bg1Base : Looks.colors.bgPanelFooterBackground)
     borderColor: ColorUtils.transparentize(Looks.colors.bg2Border, drag.active ? 1 : 0)
     radius: Looks.radius.xLarge
 

dots/.config/quickshell/ii/panelFamilies/IllogicalImpulseFamily.qml

@@ -0,0 +1,45 @@
+import QtQuick
+import Quickshell
+
+import qs.modules.common
+import qs.modules.ii.background
+import qs.modules.ii.bar
+import qs.modules.ii.cheatsheet
+import qs.modules.ii.dock
+import qs.modules.ii.lock
+import qs.modules.ii.mediaControls
+import qs.modules.ii.notificationPopup
+import qs.modules.ii.onScreenDisplay
+import qs.modules.ii.onScreenKeyboard
+import qs.modules.ii.overview
+import qs.modules.ii.polkit
+import qs.modules.ii.regionSelector
+import qs.modules.ii.screenCorners
+import qs.modules.ii.sessionScreen
+import qs.modules.ii.sidebarLeft
+import qs.modules.ii.sidebarRight
+import qs.modules.ii.overlay
+import qs.modules.ii.verticalBar
+import qs.modules.ii.wallpaperSelector
+
+Scope {
+    PanelLoader { extraCondition: !Config.options.bar.vertical; component: Bar {} }
+    PanelLoader { component: Background {} }
+    PanelLoader { component: Cheatsheet {} }
+    PanelLoader { extraCondition: Config.options.dock.enable; component: Dock {} }
+    PanelLoader { component: Lock {} }
+    PanelLoader { component: MediaControls {} }
+    PanelLoader { component: NotificationPopup {} }
+    PanelLoader { component: OnScreenDisplay {} }
+    PanelLoader { component: OnScreenKeyboard {} }
+    PanelLoader { component: Overlay {} }
+    PanelLoader { component: Overview {} }
+    PanelLoader { component: Polkit {} }
+    PanelLoader { component: RegionSelector {} }
+    PanelLoader { component: ScreenCorners {} }
+    PanelLoader { component: SessionScreen {} }
+    PanelLoader { component: SidebarLeft {} }
+    PanelLoader { component: SidebarRight {} }
+    PanelLoader { extraCondition: Config.options.bar.vertical; component: VerticalBar {} }
+    PanelLoader { component: WallpaperSelector {} }
+}

dots/.config/quickshell/ii/panelFamilies/PanelLoader.qml

@@ -0,0 +1,9 @@
+import QtQuick
+import Quickshell
+
+import qs.modules.common
+
+LazyLoader {
+    property bool extraCondition: true
+    active: Config.ready && extraCondition
+}

dots/.config/quickshell/ii/panelFamilies/WaffleFamily.qml

@@ -0,0 +1,44 @@
+import QtQuick
+import Quickshell
+
+import qs.modules.common
+import qs.modules.waffle.actionCenter
+import qs.modules.waffle.background
+import qs.modules.waffle.bar
+import qs.modules.waffle.lock
+import qs.modules.waffle.notificationCenter
+import qs.modules.waffle.notificationPopup
+import qs.modules.waffle.onScreenDisplay
+// import qs.modules.waffle.overlay
+import qs.modules.waffle.polkit
+import qs.modules.waffle.screenSnip
+import qs.modules.waffle.startMenu
+import qs.modules.waffle.sessionScreen
+import qs.modules.waffle.taskView
+
+// Fallbacks
+import qs.modules.ii.cheatsheet
+import qs.modules.ii.onScreenKeyboard
+import qs.modules.ii.overlay
+import qs.modules.ii.wallpaperSelector
+
+Scope {
+    PanelLoader { component: WaffleActionCenter {} }
+    PanelLoader { component: WaffleBar {} }
+    PanelLoader { component: WaffleBackground {} }
+    PanelLoader { component: WaffleLock {} }
+    PanelLoader { component: WaffleNotificationCenter {} }
+    PanelLoader { component: WaffleNotificationPopup {} }
+    PanelLoader { component: WaffleOSD {} }
+    // PanelLoader { component: WaffleOverlay {} }
+    PanelLoader { component: WafflePolkit {} }
+    PanelLoader { component: WScreenSnip {} }
+    PanelLoader { component: WaffleStartMenu {} }
+    PanelLoader { component: WaffleSessionScreen {} }
+    PanelLoader { component: WaffleTaskView {} }
+
+    PanelLoader { component: Cheatsheet {} }
+    PanelLoader { component: OnScreenKeyboard {} }
+    PanelLoader { component: Overlay {} }
+    PanelLoader { component: WallpaperSelector {} }
+}

dots/.config/quickshell/ii/shell.qml

@@ -6,51 +6,22 @@
 // Adjust this to make the shell smaller or larger
 //@ pragma Env QT_SCALE_FACTOR=1
 
-import qs.modules.common
+import "modules/common"
-import qs.modules.ii.background
+import "services"
-import qs.modules.ii.bar
+import "panelFamilies"
-import qs.modules.ii.cheatsheet
-import qs.modules.ii.dock
-import qs.modules.ii.lock
-import qs.modules.ii.mediaControls
-import qs.modules.ii.notificationPopup
-import qs.modules.ii.onScreenDisplay
-import qs.modules.ii.onScreenKeyboard
-import qs.modules.ii.overview
-import qs.modules.ii.polkit
-import qs.modules.ii.regionSelector
-import qs.modules.ii.screenCorners
-import qs.modules.ii.sessionScreen
-import qs.modules.ii.sidebarLeft
-import qs.modules.ii.sidebarRight
-import qs.modules.ii.overlay
-import qs.modules.ii.verticalBar
-import qs.modules.ii.wallpaperSelector
-
-import qs.modules.waffle.actionCenter
-import qs.modules.waffle.background
-import qs.modules.waffle.bar
-import qs.modules.waffle.lock
-import qs.modules.waffle.notificationCenter
-import qs.modules.waffle.notificationPopup
-import qs.modules.waffle.onScreenDisplay
-import qs.modules.waffle.polkit
-import qs.modules.waffle.screenSnip
-import qs.modules.waffle.startMenu
-import qs.modules.waffle.sessionScreen
-import qs.modules.waffle.taskView
 
 import QtQuick
 import QtQuick.Window
 import Quickshell
 import Quickshell.Io
 import Quickshell.Hyprland
-import qs.services
 
 ShellRoot {
     id: root
 
-    // Force initialization of some singletons
+    // Stuff for every panel family
+    ReloadPopup {}
+
     Component.onCompleted: {
         MaterialThemeLoader.reapplyTheme()
         Hyprsunset.load()
@@ -61,62 +32,33 @@ ShellRoot {
         Updates.load()
     }
 
-    // Load enabled stuff
-    // Well, these loaders only *allow* them to be loaded, to always load or not is defined in each component
-    // The media controls for example is not loaded if it's not opened
-    PanelLoader { identifier: "iiBar"; extraCondition: !Config.options.bar.vertical; component: Bar {} }
-    PanelLoader { identifier: "iiBackground"; component: Background {} }
-    PanelLoader { identifier: "iiCheatsheet"; component: Cheatsheet {} }
-    PanelLoader { identifier: "iiDock"; extraCondition: Config.options.dock.enable; component: Dock {} }
-    PanelLoader { identifier: "iiLock"; component: Lock {} }
-    PanelLoader { identifier: "iiMediaControls"; component: MediaControls {} }
-    PanelLoader { identifier: "iiNotificationPopup"; component: NotificationPopup {} }
-    PanelLoader { identifier: "iiOnScreenDisplay"; component: OnScreenDisplay {} }
-    PanelLoader { identifier: "iiOnScreenKeyboard"; component: OnScreenKeyboard {} }
-    PanelLoader { identifier: "iiOverlay"; component: Overlay {} }
-    PanelLoader { identifier: "iiOverview"; component: Overview {} }
-    PanelLoader { identifier: "iiPolkit"; component: Polkit {} }
-    PanelLoader { identifier: "iiRegionSelector"; component: RegionSelector {} }
-    PanelLoader { identifier: "iiScreenCorners"; component: ScreenCorners {} }
-    PanelLoader { identifier: "iiSessionScreen"; component: SessionScreen {} }
-    PanelLoader { identifier: "iiSidebarLeft"; component: SidebarLeft {} }
-    PanelLoader { identifier: "iiSidebarRight"; component: SidebarRight {} }
-    PanelLoader { identifier: "iiVerticalBar"; extraCondition: Config.options.bar.vertical; component: VerticalBar {} }
-    PanelLoader { identifier: "iiWallpaperSelector"; component: WallpaperSelector {} }
-
-    PanelLoader { identifier: "wActionCenter"; component: WaffleActionCenter {} }
-    PanelLoader { identifier: "wBar"; component: WaffleBar {} }
-    PanelLoader { identifier: "wBackground"; component: WaffleBackground {} }
-    PanelLoader { identifier: "wLock"; component: WaffleLock {} }
-    PanelLoader { identifier: "wNotificationCenter"; component: WaffleNotificationCenter {} }
-    PanelLoader { identifier: "wNotificationPopup"; component: WaffleNotificationPopup {} }
-    PanelLoader { identifier: "wOnScreenDisplay"; component: WaffleOSD {} }
-    PanelLoader { identifier: "wPolkit"; component: WafflePolkit {} }
-    PanelLoader { identifier: "wScreenSnip"; component: WScreenSnip {} }
-    PanelLoader { identifier: "wStartMenu"; component: WaffleStartMenu {} }
-    PanelLoader { identifier: "wSessionScreen"; component: WaffleSessionScreen {} }
-    PanelLoader { identifier: "wTaskView"; component: WaffleTaskView {} }
-    ReloadPopup {}
-
-    component PanelLoader: LazyLoader {
-        required property string identifier
-        property bool extraCondition: true
-        active: Config.ready && Config.options.enabledPanels.includes(identifier) && extraCondition
-    }
 
     // Panel families
     property list<string> families: ["ii", "waffle"]
-    property var panelFamilies: ({
-        "ii": ["iiBar", "iiBackground", "iiCheatsheet", "iiDock", "iiLock", "iiMediaControls", "iiNotificationPopup", "iiOnScreenDisplay", "iiOnScreenKeyboard", "iiOverlay", "iiOverview", "iiPolkit", "iiRegionSelector", "iiScreenCorners", "iiSessionScreen", "iiSidebarLeft", "iiSidebarRight", "iiVerticalBar", "iiWallpaperSelector"],
-        "waffle": ["wActionCenter", "wBar", "wBackground", "wLock", "wNotificationCenter", "wNotificationPopup", "wOnScreenDisplay", "wTaskView", "wPolkit", "wScreenSnip", "wSessionScreen", "wStartMenu", "iiCheatsheet", "iiOnScreenKeyboard", "iiOverlay", "iiWallpaperSelector"],
-    })
     function cyclePanelFamily() {
         const currentIndex = families.indexOf(Config.options.panelFamily)
         const nextIndex = (currentIndex + 1) % families.length
         Config.options.panelFamily = families[nextIndex]
-        Config.options.enabledPanels = panelFamilies[Config.options.panelFamily]
     }
 
+    component PanelFamilyLoader: LazyLoader {
+        required property string identifier
+        property bool extraCondition: true
+        active: Config.ready && Config.options.panelFamily === identifier && extraCondition
+    }
+    
+    PanelFamilyLoader {
+        identifier: "ii"
+        component: IllogicalImpulseFamily {}
+    }
+
+    PanelFamilyLoader {
+        identifier: "waffle"
+        component: WaffleFamily {}
+    }
+
+
+    // Shortcuts
     IpcHandler {
         target: "panelFamily"