Bluetooth works now and some style adjustments

app.ts

@@ -7,7 +7,7 @@ const hyprland = Hyprland.get_default()
 
 App.start({
     css: style,
-	icons: "/home/protoshark/.config/astal/assets/",
+	icons: "/home/protoshark/.config/ags/assets/",
     main() {
 		hyprland.monitors.map((monitor) => Bar(monitor))
     },

style.scss

@@ -4,7 +4,7 @@ window {
   background: $background-1;
   color: $text-2;
   font-family: comfortaa; 
-  font-weight: bolder;
+  font-weight: 900;
   font-size: 14px;
 
   > centerbox {
@@ -154,6 +154,18 @@ button {
 }
 
 .toggleButton {
+  &.bt {
+    icon {
+      margin-right: 8px;
+    }
+    box {
+      background: none;
+    }
+    label {
+      margin-top: 2px;
+      margin-right: 60px;
+    }
+  }
   &:hover .toggleIndicator {
     box-shadow: 0 0 6px 0px $highlight-3;
   }
@@ -229,6 +241,7 @@ button {
 @keyframes upIn {
   from {margin-top: -50px; opacity: 0;}
   to {opacity: 100;}
+
 }
 
 .clientLabel {

widget/battery.tsx

@@ -44,7 +44,7 @@ function BattWindow() {
 		<box
 			className="popupBattery"
 			vertical={true}
-			spacing={8}>
+			spacing={12}>
 			<box spacing={10}>
 				<overlay overlay={new Widget.Label({
 					halign: Gtk.Align.CENTER,
@@ -107,7 +107,8 @@ function BattWindow() {
 				</box>
 			</box>
 			<box
-				vertical={true}>
+				vertical={true}
+				spacing={4}>
 				{profileButton("Power Saver", "power-saver")}
 				{profileButton("Balanced", "balanced")}
 				{profileButton("Performance", "performance")}

widget/bluetooth.tsx

@@ -1,4 +1,4 @@
-import { bind } from "astal"
+import { bind, execAsync } from "astal"
 import Bluetooth from "gi://AstalBluetooth"
 import { popup } from "./popup"
 import { Astal, Gtk, Widget } from "astal/gtk3"
@@ -8,15 +8,21 @@ const { TOP, LEFT } = Astal.WindowAnchor
 const bluetooth = Bluetooth.get_default()
 
 function bluetoothItem(device: Bluetooth.Device) {
-	return <button className="toggleButton">
+	return <button
+		className="bt toggleButton"
+		onClicked={() => {
+			execAsync(["bluetoothctl", device.connected ? "disconnect" : "connect", device.address]).then(out => console.log(out)).catch(out => console.log(out))
+		}}>
 		<overlay overlay={new Widget.Box({
-			className: "toggleIndicator",
+			className: bind(device, "connected").as(c => 
+				"toggleIndicator ".concat(c ? "active" : "inactive")
+			),
 			halign: Gtk.Align.END,
 			valign: Gtk.Align.CENTER,
 		})}>
 			<box>
 				<icon icon={device.icon} css="font-size: 32px;" />
-				<label>{device.alias ?? device.name}</label>
+				<label valign={Gtk.Align.CENTER}>{device.alias ?? device.name}</label>
 			</box>
 		</overlay>
 	</button>
@@ -25,10 +31,10 @@ function bluetoothItem(device: Bluetooth.Device) {
 function bluetoothWindow() {
 	return <window
 		anchor={ TOP | LEFT }
-		marginLeft={170}
+		marginLeft={140}
 		namespace="lazerpopup"
 		className="popupWindow">
-		<box vertical={true}>
+		<box vertical={true} css="margin-left: 40px">
 			{bluetooth.devices.map(dev => bluetoothItem(dev))}
 		</box>
 	</window>

widget/client.tsx

@@ -4,18 +4,30 @@ import Apps from "gi://AstalApps"
 import { Gtk, Widget } from "astal/gtk3"
 import { Overlay } from "astal/gtk3/widget"
 const hyprland = Hyprland.get_default()
-const apps = new Apps.Apps()
+const apps = new Apps.Apps({
+	entryMultiplier: 2,
+	categories_multiplier: 0,
+	description_multiplier: 0,
+	executable_multiplier: 0,
+	name_multiplier: 0,
+	keywordsMultiplier: 0,
+})
 
 function NewClient(client: Hyprland.Client) {
-	apps.entryMultiplier = 10
-	let hyprClass = (client) ? apps.exact_query(client.class)[0] : null
+	let appsClass = null
+	if (client) {
+		if (client.class == "soffice") {
+			client.class = ""
+		}
+		appsClass = apps.exact_query(client.class)[0]
+	}
 	let b = <box halign={Gtk.Align.END} className="clientLabel" visible={true}>
 		<icon 
-			icon={(client) ? hyprClass?.iconName : "archlinux"}
+			icon={(appsClass) ? appsClass.iconName : "archlinux"}
 			css="font-size: 24px; margin-right: 4px;"
 		/>
 		<label css="font-family: comfortaa; font-size: 14px;">{
-			(client) ? hyprClass?.name : "Hummingbird"
+			(appsClass) ? appsClass.name : "Hummingbird"
 		}</label>
 	</box>
 	return b