[Astal] Add mode indicator

config/astal/components/bar/Bar.tsx

@@ -1,19 +1,30 @@
-import { App, Astal, Gdk, Gtk } from "astal/gtk4";
-import Hyprland from "./modules/Hyprland";
-import Calendar from "./modules/Calendar";
-import QuickView from "./modules/QuickView";
-import SystemInfo from "./modules/SystemInfo";
-import { CenterBox } from "astal/gtk4/widget";
+import {
+    App, Astal, Gdk, Gtk
+} from 'astal/gtk4';
+import Calendar from './modules/Calendar';
+import {
+    CenterBox
+} from 'astal/gtk4/widget';
+import Hyprland from './modules/Hyprland';
+import QuickView from './modules/QuickView';
+import SystemInfo from './modules/SystemInfo';
 
-const Bar = ( { gdkmonitor, name }: { gdkmonitor: Gdk.Monitor, name: string } ) => {
-    const { TOP, LEFT, RIGHT } = Astal.WindowAnchor;
+const Bar = ( {
+    gdkmonitor, name
+}: {
+    'gdkmonitor': Gdk.Monitor,
+    'name': string
+} ) => {
+    const {
+        TOP, LEFT, RIGHT
+    } = Astal.WindowAnchor;
 
     return (
         <window
             gdkmonitor={gdkmonitor}
-            cssClasses={["Bar"]}
+            cssClasses={[ 'Bar' ]}
             name={name}
-            namespace={"bar"}
+            namespace={'bar'}
             exclusivity={Astal.Exclusivity.EXCLUSIVE}
             anchor={TOP | LEFT | RIGHT}
             visible
@@ -26,6 +37,7 @@ const Bar = ( { gdkmonitor, name }: { gdkmonitor: Gdk.Monitor, name: string } )
                             hexpand
                             halign={Gtk.Align.START}
                         >
+                            <Hyprland.ModeStatus />
                             <Calendar.Time />
                             <SystemInfo.SystemInfo />
                             <Hyprland.Workspace />
@@ -36,7 +48,7 @@ const Bar = ( { gdkmonitor, name }: { gdkmonitor: Gdk.Monitor, name: string } )
                         <box
                             hexpand
                             halign={Gtk.Align.END}
-                            cssClasses={["BarRight"]}
+                            cssClasses={[ 'BarRight' ]}
                         >
                             <Hyprland.SysTray />
                             <QuickView.QuickView />
@@ -48,21 +60,24 @@ const Bar = ( { gdkmonitor, name }: { gdkmonitor: Gdk.Monitor, name: string } )
     );
 };
 
-const cliHandler = (args: string[]): string => {
-    return "Not implemented";
+const cliHandler = ( args: string[] ): string => {
+    console.debug( args );
+
+    return 'Not implemented';
 };
 
-const BarLauncher = ( monitor: Gdk.Monitor ) =>  {
-    const windowName = `bar-${monitor.get_connector()}`
+const BarLauncher = ( monitor: Gdk.Monitor ) => {
+    const windowName = `bar-${ monitor.get_connector() }`;
+
     const createBar = () => {
-        return <Bar gdkmonitor={monitor} name={windowName}></Bar>
-    }
+        return <Bar gdkmonitor={monitor} name={windowName}></Bar>;
+    };
 
     // Actually start the bar
     createBar();
 
     return windowName;
-}
+};
 
 export default {
     BarLauncher,