feat: update style

style.scss

@@ -1,9 +1,14 @@
-$accent: #ebdbb2;
-$fg-color: #ebdbb2;
-$bg-color: #282828;
-$inactive-color: #807966;
+$accent: #54cdb3;
+$fg-color: #fff;
+$bg-color: #0e0e0e;
+$inactive-color: #252525;
 $rounded: 8px;
-$font-size: 1.3rem;
+$font-size: 1.1rem;
+
+* {
+  all: unset;
+  font-family: FiraCode Nerd Font Bold;
+}
 
 // bar
 @import "./widgets/bar/style.scss";

widgets/bar/battery.tsx

@@ -5,9 +5,11 @@ export const Battery = () => {
   const battery = AstalBattery.get_default();
 
   return (
-    <box cssClasses={["battery"]} visible={bind(battery, "isPresent")}>
+    <box cssClasses={["pill"]} visible={bind(battery, "isPresent")}>
       <label
-        label={bind(battery, "percentage").as((p) => `${Math.floor(p * 100)}%`)}
+        label={bind(battery, "percentage").as(
+          (p) => `Bat: ${Math.floor(p * 100)}%`,
+        )}
       />
     </box>
   );

widgets/bar/index.tsx

@@ -1,15 +1,13 @@
 import { App, Astal, Gdk } from "astal/gtk4";
 import { FocusedClient, WorkspaceButton } from "./workspace";
 import { Battery } from "./battery";
-import { Launcher } from "./launcher";
 import { Tailscale } from "./tailscale";
-import { Tray } from "./tray";
 import { Time } from "./time";
 
 export const WINDOW_NAME = "bar";
 
 export const Bar = (gdkmonitor: Gdk.Monitor) => {
-  const { TOP, LEFT, RIGHT } = Astal.WindowAnchor;
+  const { TOP } = Astal.WindowAnchor;
 
   return (
     <window
@@ -18,7 +16,7 @@ export const Bar = (gdkmonitor: Gdk.Monitor) => {
       cssClasses={["Bar"]}
       gdkmonitor={gdkmonitor}
       exclusivity={Astal.Exclusivity.EXCLUSIVE}
-      anchor={TOP | LEFT | RIGHT}
+      anchor={TOP}
       application={App}
     >
       <centerbox>
@@ -32,8 +30,7 @@ export const Bar = (gdkmonitor: Gdk.Monitor) => {
 
 const Start = () => {
   return (
-    <box spacing={15}>
-      <Launcher />
+    <box spacing={10}>
       <WorkspaceButton />
     </box>
   );
@@ -45,10 +42,9 @@ const Center = () => {
 
 const End = () => {
   return (
-    <box spacing={15}>
+    <box spacing={10}>
       <Tailscale />
       <Battery />
-      <Tray />
       <Time />
     </box>
   );

widgets/bar/style.scss

@@ -7,6 +7,7 @@ window.Bar {
   margin: 5px;
   border-radius: $rounded;
   padding: 10px;
+  min-width: 100rem;
 
   .launcher {
     background-color: $inactive-color;
@@ -30,8 +31,8 @@ window.Bar {
       border: 0px;
       margin: 2px;
       background-color: $inactive-color;
-      min-height: 1.3rem;
-      min-width: 1.3rem;
+      min-height: 1rem;
+      min-width: 1rem;
       border-radius: calc(list.nth(8px, 1) * 1.5);
       transition: min-width 0.15s ease-out;
 
@@ -43,8 +44,8 @@ window.Bar {
       }
 
       &.active {
-        min-width: 3.5rem;
-        min-height: 1.3rem;
+        min-width: 2.5rem;
+        min-height: 1rem;
         background-color: $accent;
       }
 
@@ -59,42 +60,14 @@ window.Bar {
 
   .focused-client {
     font-size: $font-size;
-    font-weight: 900;
+    color: $fg-color;
   }
 
-  .tailscale {
+  .pill {
     font-size: $font-size;
-    font-weight: 900;
-    color: $bg-color;
+    color: $fg-color;
     background-color: $inactive-color;
-    border-radius: $rounded;
-    padding: 0px 10px;
-  }
-
-  .tray {
-    font-size: $font-size;
-    font-weight: 900;
-    color: #fff;
-    background-color: $inactive-color;
-    border-radius: $rounded;
-    padding: 0px 10px;
-  }
-
-  .battery {
-    font-size: $font-size;
-    font-weight: 900;
-    color: $bg-color;
-    background-color: $inactive-color;
-    border-radius: $rounded;
-    padding: 0px 10px;
-  }
-
-  .time {
-    font-size: $font-size;
-    font-weight: 900;
-    color: $bg-color;
-    background-color: $inactive-color;
-    border-radius: $rounded;
-    padding: 0px 10px;
+    border-radius: calc($rounded / 1.5);
+    padding: 5px 10px;
   }
 }

widgets/bar/tailscale.tsx

@@ -8,11 +8,11 @@ export const Tailscale = () => {
   ]);
 
   return (
-    <box cssClasses={["tailscale"]}>
+    <box cssClasses={["pill"]}>
       <label
         label={bind(tailscale).as((val) => {
           const data = val.split(" ");
-          return data[data.length - 1];
+          return "Home: " + data[data.length - 1];
         })}
       />
     </box>

widgets/bar/time.tsx

@@ -3,10 +3,10 @@ import { GLib, Variable } from "astal";
 export const Time = () => {
   const time = Variable("").poll(
     1000,
-    () => GLib.DateTime.new_now_local().format("%I:%M:%S %p")!,
+    () => GLib.DateTime.new_now_local().format("%a %b %d - %I:%M:%S %p")!,
   );
 
   return (
-    <label cssClasses={["time"]} onDestroy={() => time.drop()} label={time()} />
+    <label cssClasses={["pill"]} onDestroy={() => time.drop()} label={time()} />
   );
 };

widgets/bar/tray.tsx

@@ -9,7 +9,7 @@ export const Tray = () => {
   }
 
   return (
-    <box cssClasses={["tray"]}>
+    <box cssClasses={["pill"]}>
       {bind(tray, "items").as((items) =>
         items.map((item) => <image gicon={bind(item, "gicon")} />),
       )}

widgets/bar/workspace.tsx

@@ -48,9 +48,14 @@ export const WorkspaceButton = () => {
 
 export const FocusedClient = () => {
   const hyprland = AstalHyprland.get_default();
-  const title = bind(hyprland, "focusedClient").as(
-    (fcsClient) => fcsClient.title,
-  );
+  const focused = bind(hyprland, "focusedClient");
 
-  return <label cssClasses={["focused-client"]}>{title}</label>;
+  return (
+    <box cssClasses={["focused-client"]} visible={focused.as(Boolean)}>
+      {focused.as(
+        (client) =>
+          client && <label label={bind(client, "initialTitle").as(String)} />,
+      )}
+    </box>
+  );
 };