feat(agsV2): add clock

nixosModules/ags/v2/widgets/bar/items/clock.tsx

@@ -0,0 +1,31 @@
+import { bind, Variable } from 'astal';
+
+import GLib from 'gi://GLib?version=2.0';
+
+
+export default () => {
+    const timeVar = Variable<string>('').poll(1000, (prev) => {
+        const time = GLib.DateTime.new_now_local();
+
+        const dayName = time.format('%a. ');
+        const dayNum = time.get_day_of_month();
+        const date = time.format(' %b. ');
+        const hour = (new Date().toLocaleString([], {
+            hour: 'numeric',
+            minute: 'numeric',
+            hour12: true,
+        }) ?? '')
+            .replace('a.m.', 'AM')
+            .replace('p.m.', 'PM');
+
+        return (dayNum && dayName && date) ?
+            (dayName + dayNum + date + hour) :
+            prev;
+    });
+
+    return (
+        <box className="bar-item">
+            <label label={bind(timeVar)} />
+        </box>
+    );
+};

nixosModules/ags/v2/widgets/bar/wim.tsx

@@ -1,14 +1,14 @@
 import { Astal, Gtk } from 'astal';
 
 import Battery from './items/battery';
+import Clock from './items/clock';
 import CurrentClient from './items/current-client';
 
 import BarRevealer from './fullscreen';
 import Separator from '../misc/separator';
 
 
-export default () => {
-    return (
+export default () => (
     <BarRevealer
         exclusivity={Astal.Exclusivity.EXCLUSIVE}
         anchor={
@@ -24,6 +24,7 @@ export default () => {
             </box>
 
             <box>
+                <Clock />
             </box>
 
             <box hexpand halign={Gtk.Align.END}>
@@ -34,5 +35,4 @@ export default () => {
         </centerbox>
 
     </BarRevealer>
-    );
-};
+);