ags: MASSIVE REVAMP

pkgs/ags/biscuit/widget/Bar.tsx

@@ -124,27 +124,42 @@ function Workspaces() {
 }
 
 function FocusedClient() {
-    const hypr = Hyprland.get_default()
-    const focused = bind(hypr, "focusedClient")
+    const hypr = Hyprland.get_default();
+    const focused = bind(hypr, "focusedClient");
 
-    return <box
-        className="Focused"
-        visible={focused.as(Boolean)}>
-        {focused.as(client => (
-            client && <label label={bind(client, "title").as(String)} />
-        ))}
-    </box>
+    return (
+        <box className="FocusedClient" visible={focused.as(Boolean)}>
+            {focused.as(client => {
+                if (!client) return null;
+
+                return (
+                    <label
+                        label={bind(client, "title").as(title => {
+                            return title.length > 40
+                                ? title.slice(0, 37) + "..."
+                                : title;
+                        })}
+                    />
+                );
+            })}
+        </box>
+    );
 }
-
-function Time({ format = "%H:%M  %a %b %d" }) {
+function Time({ format = "%H:%M|%a %b %d" }) {
     const time = Variable<string>("").poll(1000, () =>
-        GLib.DateTime.new_now_local().format(format)!)
+        GLib.DateTime.new_now_local().format(format)!
+    );
 
-    return <label
-        className="Time"
-        onDestroy={() => time.drop()}
-        label={time()}
-    />
+    return bind(time).as(str => {
+        const [hm, date] = str.split("|");
+
+        return (
+            <box className="Time">
+                <label className="TimeHM" label={hm} />
+                <label className="TimeDate" label={date} />
+            </box>
+        );
+    });
 }
 
 export default function Bar(monitor: Gdk.Monitor) {
@@ -158,6 +173,7 @@ export default function Bar(monitor: Gdk.Monitor) {
         <centerbox>
             <box hexpand halign={Gtk.Align.START}>
                 <Workspaces />
+                <FocusedClient />
             </box>
             <box>
                 <Time />