bar: better active window popout

Add icon, style better

modules/bar/popouts/ActiveWindow.qml

@@ -2,6 +2,7 @@ import "root:/widgets"
 import "root:/services"
 import "root:/utils"
 import "root:/config"
+import Quickshell
 import Quickshell.Widgets
 import Quickshell.Wayland
 import QtQuick
@@ -9,7 +10,7 @@ import QtQuick
 Item {
     id: root
 
-    implicitWidth: child.implicitWidth
+    implicitWidth: Hyprland.activeClient ? child.implicitWidth : 0
     implicitHeight: child.implicitHeight
 
     Column {
@@ -18,18 +19,37 @@ Item {
         anchors.centerIn: parent
         spacing: Appearance.spacing.normal
 
-        StyledText {
+        Row {
-            text: Hyprland.activeClient?.title ?? ""
+            id: detailsRow
 
-            elide: Text.ElideRight
+            spacing: Appearance.spacing.normal
-            width: preview.implicitWidth
-        }
 
-        StyledText {
+            IconImage {
-            text: Hyprland.activeClient?.wmClass ?? ""
+                id: icon
 
-            elide: Text.ElideRight
+                implicitSize: details.implicitHeight
-            width: preview.implicitWidth
+                source: Quickshell.iconPath(DesktopEntries.applications.values.find(a => a.id === Hyprland.activeClient?.wmClass.toLowerCase())?.icon, "image-missing")
+            }
+
+            Column {
+                id: details
+
+                StyledText {
+                    text: Hyprland.activeClient?.title ?? ""
+                    font.pointSize: Appearance.font.size.normal
+
+                    elide: Text.ElideRight
+                    width: preview.implicitWidth - icon.implicitWidth - detailsRow.spacing
+                }
+
+                StyledText {
+                    text: Hyprland.activeClient?.wmClass ?? ""
+                    color: Colours.palette.m3onSurfaceVariant
+
+                    elide: Text.ElideRight
+                    width: preview.implicitWidth - icon.implicitWidth - detailsRow.spacing
+                }
+            }
         }
 
         ClippingWrapperRectangle {
@@ -47,4 +67,10 @@ Item {
             }
         }
     }
+
+    component Anim: NumberAnimation {
+        duration: Appearance.anim.durations.normal
+        easing.type: Easing.BezierSpline
+        easing.bezierCurve: Appearance.anim.curves.emphasized
+    }
 }