feat(ags): add clock widget

config/ags/js/bar/bar.js

@@ -8,6 +8,7 @@ import { Heart }          from './heart.js';
 import { TabletToggle }   from './tablet-toggle.js';
 import { QsToggle }       from './quick-settings.js';
 import { NotifButton }    from './notif-button.js';
+import { Clock }    from './clock.js';
 
 export const Bar = Window({
   name: 'left-bar',
@@ -52,6 +53,10 @@ export const Bar = Window({
       Box({
         halign: 'end',
         children: [
+          Clock,
+
+          Separator(12),
+
           NotifButton,
 
           Separator(12),

config/ags/js/bar/clock.js

@@ -0,0 +1,18 @@
+const { Box, Label } = ags.Widget;
+const { execAsync } = ags.Utils;
+const { DateTime } = imports.gi.GLib;
+
+const ClockModule = ({
+    format = '%a. %e %b. %H:%M',
+    interval = 1000,
+    ...props
+}) => Label({
+    ...props,
+    className: 'clock',
+    connections: [[interval, label => label.label = DateTime.new_now_local().format(format)]],
+});
+
+export const Clock = Box({
+  className: 'toggle-off',
+  child: ClockModule({}),
+});

config/ags/js/bar/current-window.js

@@ -6,6 +6,7 @@ const { Gtk } = imports.gi;
 
 const currentWindow = () => Label({
   style: 'color: #CBA6F7; font-size: 18px',
+  truncate: 'end',
   connections: [
     [Hyprland, label => {
       label.label = Hyprland.active.client.title;

config/ags/scss/widgets/traybuttons.scss

@@ -22,15 +22,6 @@
   }
 }
 
-.filler {
-  border-left: 2px solid $contrastbg;
-  border-right: 2px solid $contrastbg;
-  min-height: 14px;
-  min-width: 105px;
-  background-color: $bg;
-  transition: all 0.5s;
-}
-
 .quick-settings-toggle {
   font-size: 24px;
   min-height: 40px;
@@ -62,3 +53,12 @@
   transition: background-color 0.5s ease-in-out,
               border 0.5s ease-in-out;
 }
+
+.clock {
+  font-size: 20px;
+  padding-left: 10px;
+  padding-right: 10px;
+  min-width: 230px;
+  border: 2px solid rgba(#382c4a, 0.8);
+  border-radius: 80px;
+}

config/ags/style.css

@@ -58,14 +58,6 @@
     border-bottom-right-radius: 0px;
     border-bottom: 0px solid rgba(40, 42, 54, 0.8); }
 
-.filler {
-  border-left: 2px solid rgba(189, 147, 249, 0.8);
-  border-right: 2px solid rgba(189, 147, 249, 0.8);
-  min-height: 14px;
-  min-width: 105px;
-  background-color: rgba(40, 42, 54, 0.8);
-  transition: all 0.5s; }
-
 .quick-settings-toggle {
   font-size: 24px;
   min-height: 40px;
@@ -91,6 +83,14 @@
   background-color: rgba(127, 132, 156, 0.4);
   transition: background-color 0.5s ease-in-out, border 0.5s ease-in-out; }
 
+.clock {
+  font-size: 20px;
+  padding-left: 10px;
+  padding-right: 10px;
+  min-width: 230px;
+  border: 2px solid rgba(56, 44, 74, 0.8);
+  border-radius: 80px; }
+
 .workspaces {
   background-color: rgba(40, 42, 54, 0.8);
   border-radius: 80px;