[Astal] Start adding hyprland module

config/astal/components/bar/bar.scss

@@ -11,6 +11,27 @@ window.Bar {
   /*     border-radius: 10px; */
   /*     margin: 8px; */
   /* } */
+  .mode-status {
+    &.windowing-mode {
+
+    }
+
+    &.workspace-mode {
+
+    }
+
+    &.launch-mode {
+
+    }
+
+    &.device-mode {
+
+    }
+    
+    &.screenshotting-mode {
+
+    }
+  }
 
   .bar-button {
     border-radius: 20px;

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

@@ -118,6 +118,23 @@ const ActiveWindow = () => {
     );
 };
 
+const ModeStatus = () => {
+    const label = new Gtk.Label();
+    const map = {
+        "device": "D",
+        "launch": "L",
+        "workspace": "W",
+        "windowing": "M",
+        "screenshotting": "S",
+    }
+    // TODO: Possibly add popover to it that lists binds
+    hypr.connect("submap", (name: string) => {
+        label.label = map[name];
+        label.cssClasses = ["mode-status", name + '-mode']
+    })
+    return 
+}
+
 const WindowPopoverBox = () => {
     return <box vertical>
         <label label={"Available Windows"} cssClasses={['title-2']}></label>
@@ -144,4 +161,5 @@ export default {
     Workspace,
     ActiveWindow,
     SysTray,
+    ModeStatus
 };