lets goo

.tool-versions

@@ -1 +1 @@
-bun 1.2.8
+bun latest

components/Svg.tsx

@@ -0,0 +1,8 @@
+interface SvgProps {
+	color?: string;
+	rotation?: number;
+}
+
+export function Svg({ color, rotation }: SvgProps) {
+	const svgPath = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" ${rotation && 'transform="rotate(180 12 12)"'} fill="none" stroke="${color || "#cac9c9"}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/></svg>`;
+}

style.scss

@@ -1,15 +1,16 @@
-$crust: #181926;
+$primary: #1fb854;
-$mantle: #1e2030;
+$secondary: #1eb88e;
-$base: #24273a;
+$accent: #1fb8ab;
+$neutral: #19362d;
+$base100: #1b1717;
+$base200: #161212;
+$base300: #110d0d;
+$basecontent: #cac9c9;
 
-$surface0: #363a4f;
+$info: #00b5ff;
-$surface1: #494d64;
+$success: #00a96e;
-$surface2: #5b6078;
+$warning: #ffbe00;
-
+$error: #ff5861;
-$rosewater: #f4dbd6;
-$flamingo: #dd7878;
-$pink: #ea76cb;
-$mauve: #8839ef;
 
 :root {
   font-family: JetBrainsMono Nerd Font;
@@ -22,14 +23,16 @@ button {
 
   label {
     transition:
-      border 0.5s,
+      border 0.35s,
-      background 0.5s;
+      background 0.35s,
-    background: $mantle;
+      color 0.35s;
+    background: $base100;
   }
 
   label:hover {
-    background: $crust;
+    background: $primary;
-    border: 3px solid $rosewater;
+    color: $base300;
+    // border: 3px solid $primary;
   }
 }
 
@@ -37,10 +40,10 @@ label {
   all: initial;
 
   font-family: inherit;
-  color: $rosewater;
+  font-size: 14px;
-  padding: 2px 12px;
+  color: $basecontent;
-  background: $crust;
+  padding: 0 12px;
-  border: 3px solid $crust;
+  // background: $base200;
   border-radius: 8px;
 }
 
@@ -49,53 +52,48 @@ popover > contents {
 
   padding: 4px 12px;
   border-radius: 8px;
-  border: 4px solid $crust;
+  border: 4px solid $base200;
-  background: rgba($color: $base, $alpha: 0.75);
+  background: rgba($color: $base100, $alpha: 0.98);
 }
 
 .no-styles {
   all: initial;
 
-  color: $rosewater;
+  color: $primary;
 }
 
 .active {
   label {
-    background: $crust;
+    background: $secondary;
+    color: $base300;
   }
 }
 
 .Arch {
-  -gtk-icon-size: 24px;
+  -gtk-icon-size: 22px;
-  padding: 4px 8px;
+  padding: 0 6px;
-  border-radius: 8px;
-  border: 3px solid $crust;
-  background: $mantle;
-  transition:
-    border 0.5s,
-    background 0.5s;
-
-  &:hover {
-    background: $crust;
-    border: 3px solid $rosewater;
-  }
 }
 
 .Pywal {
   label {
-    font-size: 18px;
+    font-size: 16px;
-    padding: 6px 16px 6px 10px;
+    padding: 4px 16px 4px 10px;
   }
 }
 
 .SwayNC {
   label {
+    font-size: 16px;
     padding: 0 12px;
   }
 }
 
 .Tray {
   margin: 0 4px;
+
+  arrow {
+    all: initial;
+  }
 }
 
 .Tray > * {
@@ -107,12 +105,11 @@ popover > contents {
 }
 
 .Workspaces {
-  background: $mantle;
+  // background: $base300;
-  border-radius: 8px;
+  // border-radius: 8px;
-  border: 4px solid $crust;
 
   > * {
-    margin: 2px;
+    margin: 0 2px;
   }
 }
 
@@ -132,14 +129,14 @@ popover > contents {
       margin: 4px;
       padding: 4px;
       border-radius: 8px;
-      background: $crust;
+      background: $base200;
       transition:
         border 0.5s,
         background 0.5s;
 
       &:hover {
-        color: $crust;
+        color: $base300;
-        background: $rosewater;
+        background: $primary;
       }
     }
 
@@ -148,15 +145,15 @@ popover > contents {
     }
 
     .today {
-      border: 3px solid $rosewater;
+      border: 3px solid $primary;
     }
 
     .other-month {
-      color: $surface0;
+      color: $accent;
       transition: border 0.5s;
 
       &:hover {
-        border: 3px solid $rosewater;
+        border: 3px solid $secondary;
       }
     }
   }
@@ -168,15 +165,19 @@ popover > contents {
 
 window.Bar {
   background: transparent;
+  padding: 4px;
 
   > centerbox {
-    background: rgba($color: $base, $alpha: 0.75);
+    border-radius: 8px;
-    border-bottom: 4px solid $crust;
+
+    background-color: $base300;
+    // background: rgba($color: $base300, $alpha: 0.75);
+    // border-bottom: 4px solid $base200;
 
     > box {
-      margin: 6px;
+      margin: 5px 2px;
       & > * {
-        margin: 0 4px;
+        margin: 0 3px;
       }
     }
   }

widget/Bar.tsx

@@ -37,8 +37,8 @@ export default function Bar(gdkmonitor: Gdk.Monitor) {
 				<box halign={Gtk.Align.END}>
 					<Pywal />
 					<WirePlumber />
-          <Internet />
 					<Bluetooth />
+					<Internet />
 					<Memory />
 					<Calendar />
 					<SwayNC />

widget/Bluetooth.tsx

@@ -34,10 +34,11 @@ const Bluetooth = function () {
 	const bluetooth = AstalBluetooth.get_default();
 
 	const devices = bind(bluetooth, "devices");
+	const count = devices.as((devices) => devices.length);
 
 	return (
 		<menubutton>
-      <label label={"󰂯"} />
+			<label label={devices.as((devices) => `󰂯 ${devices.length}`)} />
 			<popover>
 				<DeviceList devices={devices} />
 			</popover>

widget/Hyprland/workspaces.tsx

@@ -1,6 +1,7 @@
 import { bind } from "astal";
-import { Gdk } from "astal/gtk4";
+import { Gdk, Gtk } from "astal/gtk4";
 import Hyprland from "gi://AstalHyprland";
+import Rsvg from "gi://Rsvg?version=2.0";
 
 const Workspaces = function () {
 	const hyprland = Hyprland.get_default();
@@ -22,18 +23,31 @@ const Workspaces = function () {
 		workspaces.filter((workspace) => workspace.id < 0),
 	);
 
+	Gtk.Image.interface_install_property;
+
+	const activeTrianglePath =
+		'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#1fb854" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-icon lucide-triangle"><path d="M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/></svg>';
+	const inactiveTrianglePath =
+		'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" transform="rotate(180 12 12)" fill="none" stroke="#cac9c9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-icon lucide-triangle"><path d="M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/></svg>';
+
+	const activeTrianglePixBuf =
+		Rsvg.Handle.new_from_data(activeTrianglePath).get_pixbuf();
+	const inactiveTrianglePixBuf =
+		Rsvg.Handle.new_from_data(inactiveTrianglePath).get_pixbuf();
+
 	return (
 		<box cssClasses={["Workspaces"]}>
 			{workspaces.as((workspaces) => {
 				return workspaces.map((workspace) => (
 					<button
 						cursor={Gdk.Cursor.new_from_name("pointer", null)}
-            cssClasses={focusedWorkspace.as((focused) => [
-              focused.id === workspace.id ? "active" : "",
-            ])}
 						onClicked={() => workspace.focus()}
 					>
-            {workspace?.name}
+						{focusedWorkspace.as((focused) =>
+							focused.id === workspace.id
+								? Gtk.Image.new_from_pixbuf(activeTrianglePixBuf)
+								: Gtk.Image.new_from_pixbuf(inactiveTrianglePixBuf),
+						)}
 					</button>
 				));
 			})}

widget/Tray.tsx

@@ -1,38 +1,27 @@
 import { bind } from "astal";
-import { Gdk } from "astal/gtk4";
+import { Gdk, Gtk } from "astal/gtk4";
 import AstalTray from "gi://AstalTray";
 
-const TrayItemPopover = function ({ item }: { item: AstalTray.TrayItem }) {
+const TrayItem = function ({ item }: { item: AstalTray.TrayItem }) {
-  const actionGroup = bind(item, "actionGroup");
+	const popover = Gtk.PopoverMenu.new_from_model(item.menu_model);
+	popover.insert_action_group("dbusmenu", item.action_group);
 
 	return (
-    <popover>
+		<menubutton
-      <box>{actionGroup.get()}</box>
+			cursor={Gdk.Cursor.new_from_name("pointer", null)}
-    </popover>
+			icon_name={item.icon_name}
+			popover={popover}
+		/>
 	);
 };
 
 const Tray = function () {
 	const tray = AstalTray.get_default();
 
-  const trayItems = bind(tray, "items");
-
 	return (
 		<box cssClasses={["Tray"]}>
-      {trayItems.as((items) =>
+			{bind(tray, "items").as((items) =>
-        items.map((item) => {
+				items.map((item) => TrayItem({ item })),
-          return (
-            <menubutton cursor={Gdk.Cursor.new_from_name("pointer", null)}>
-              <image
-                tooltip_text={bind(item, "tooltip_markup")}
-                file={bind(item, "icon_name").as(
-                  (iconName) => iconName || "NONE",
-                )}
-              />
-              <TrayItemPopover item={item} />
-            </menubutton>
-          );
-        }),
 			)}
 		</box>
 	);