ags: MASSIVE REVAMP

pkgs/ags/biscuit/style.scss

@@ -1,8 +1,21 @@
 @use "sass:color";
 
-$bg: #212223;
+// default
+// $bg: #212223;
+// $fg: #f1f1f1;
+// $accent: #378DF7;
+// $radius: 7px;
+
+// Kanagawa Theme
+// $bg: #1F1F28;
+// $fg: #DCD7BA;
+// $accent: #C0A36E;
+// $radius: 7px;
+
+// mstcl 
+$bg: #121212;
 $fg: #f1f1f1;
-$accent: #378DF7;
+$accent: #C0A36E;
 $radius: 7px;
 
 window.Bar {
@@ -12,7 +25,7 @@ window.Bar {
     color: $fg;
     font-size: 1.1em;
     font-weight: bold;
-    font-family: "Rubik";
+    font-family: "JetBrainsMono Nerd Font";
 
     label {
         margin: 0 8px;
@@ -55,10 +68,26 @@ window.Bar {
         }
     }
 
-    .FocusedClient {
+    .Time {
+        .TimeHM {
+            font-weight: bold;
             color: $accent;
         }
 
+        .TimeDate {
+            // color: color.adjust($fg, $lightness: -10%);
+            color: $fg;
+            opacity: 0.85;
+            font-weight: normal;
+        }
+    }
+
+    
+    .FocusedClient {
+        color: color.adjust($fg, $lightness: -30%);
+        opacity: 0.7;
+    }
+
     .Media .Cover {
         min-height: 1.2em;
         min-width: 1.2em;

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;
 
-function Time({ format = "%H:%M  %a %b %d" }) {
-    const time = Variable<string>("").poll(1000, () =>
-        GLib.DateTime.new_now_local().format(format)!)
-
-    return <label
-        className="Time"
-        onDestroy={() => time.drop()}
-        label={time()}
+                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" }) {
+    const time = Variable<string>("").poll(1000, () =>
+        GLib.DateTime.new_now_local().format(format)!
+    );
+
+    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 />