[AGS] Save for migration to GTK4

config/astal/components/bar/ui/Bar.tsx

@@ -2,6 +2,7 @@ import { Astal, Gdk, Gtk } from "astal/gtk3";
 import Hyprland from "./modules/Hyprland";
 import Calendar from "./modules/Calendar";
 import QuickView from "./modules/QuickView";
+import SystemInfo from "./modules/SystemInfo";
 
 const Bar = (gdkmonitor: Gdk.Monitor) => {
     const { TOP, LEFT, RIGHT } = Astal.WindowAnchor;
@@ -14,6 +15,7 @@ const Bar = (gdkmonitor: Gdk.Monitor) => {
             <box orientation={Gtk.Orientation.HORIZONTAL} spacing={10}>
                 <box hexpand halign={Gtk.Align.START}>
                     <Calendar.Time />
+                    <SystemInfo.SystemInfo />
                     <Hyprland.Workspace />
                 </box>
                 <Hyprland.ActiveWindow />

config/astal/components/bar/ui/modules/Calendar.tsx

@@ -11,6 +11,10 @@ const Time = ({ format = "%a, %e.%m %H:%M:%S" }) => {
     />
 }
 
+const Calendar = () => {
+    
+}
+
 
 export default {
     Time

config/astal/components/bar/ui/modules/Hyprland.tsx

@@ -1,5 +1,5 @@
 import AstalTray from "gi://AstalTray";
-import { bind } from "astal";
+import { bind, Variable } from "astal";
 import AstalHyprland from "gi://AstalHyprland";
 
 const SysTray = () => {
@@ -42,14 +42,25 @@ const Workspace = () => {
 const ActiveWindow = () => {
     const hypr = AstalHyprland.get_default();
     const focused = bind( hypr, "focusedClient" );
+    let visible = Variable( false );
+
+    const toggleOverlay = () => {
+        visible.set( !visible.get() );
+    }
 
     return <box className={"HyprlandFocusedClients"} visible={focused.as(Boolean)}>
-        {focused.as( client => (
+        <button onClicked={toggleOverlay}>
-            client && <label label={bind( client, "title" ).as( String )} />
+            {focused.as( client => (
-        ))}
+                client && <label label={bind( client, "title" ).as( String )} />
+            ))}
+        </button>
+        <eventbox visible={bind(visible).as( v => v )} name="popover-container">
+            <label label="This is a test"></label>
+        </eventbox>
     </box>
 }
 
+
 export default {
     Workspace, 
     ActiveWindow,

config/astal/components/bar/ui/modules/SystemInfo.tsx

@@ -17,6 +17,9 @@ const featureTest = () => {
         availableFeatures.cpu = false;
         printerr( '[ SysInfo ] Feature Test for CPU info failed. mpstat from the sysstat package missing!' );
     }
+
+    // Screen brightness... CTL might be available, but no screen controllable
+    // Battery... acpi might be present, but potentially no bat
 }
 
 let enabled = false;
@@ -52,5 +55,10 @@ const sysInfoFetcher = () => {
 
 const SystemInfo = () => {
     
-    
+    return <box></box>
+}
+
+
+export default {
+    SystemInfo
 }