feat: add icons

widgets/bar/battery.tsx

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

widgets/bar/cpu.tsx

@@ -8,8 +8,9 @@ export const CPU = () => {
   ]);
 
   return (
-    <box cssClasses={["pill"]}>
-      <label label={bind(cpu).as((val) => `CPU: ${parseInt(val) / 1000} °C`)} />
+    <box cssClasses={["pill"]} spacing={5}>
+      <image iconName="fa-cpu-symbolic" />
+      <label label={bind(cpu).as((val) => `${parseInt(val) / 1000} °C`)} />
     </box>
   );
 };

widgets/bar/gpu.tsx

@@ -4,8 +4,9 @@ export const GPU = () => {
   const gpu = Variable("").poll(5000, ["bash", "-c", "supergfxctl -g"]);
 
   return (
-    <box cssClasses={["pill"]}>
-      <label label={bind(gpu).as((val) => `GPU: ${val}`)} />
+    <box cssClasses={["pill"]} spacing={5}>
+      <image iconName="fa-video-card-symbolic" />
+      <label label={bind(gpu).as((val) => val)} />
     </box>
   );
 };

widgets/bar/index.tsx

@@ -7,6 +7,7 @@ import { Network } from "./network";
 import { Profile } from "./profile";
 import { GPU } from "./gpu";
 import { CPU } from "./cpu";
+import { Launcher } from "./launcher";
 
 export const WINDOW_NAME = "bar";
 
@@ -35,6 +36,7 @@ export const Bar = (gdkmonitor: Gdk.Monitor) => {
 const Start = () => {
   return (
     <box spacing={10}>
+      <Launcher />
       <WorkspaceButton />
     </box>
   );

widgets/bar/network.tsx

@@ -10,8 +10,8 @@ export const Network = () => {
       {wifi.as(
         (wifi) =>
           wifi && (
-            <box spacing={10}>
-              <image iconName={bind(wifi, "iconName")} />
+            <box spacing={5}>
+              <image iconName="fa-wifi-symbolic" />
               <label label={bind(wifi, "ssid")} />
             </box>
           ),

widgets/bar/profile.tsx

@@ -4,11 +4,12 @@ export const Profile = () => {
   const profile = Variable("").poll(5000, ["bash", "-c", "asusctl profile -p"]);
 
   return (
-    <box cssClasses={["pill"]}>
+    <box cssClasses={["pill"]} spacing={5}>
+      <image iconName="fa-speed-symbolic" />
       <label
         label={bind(profile).as((val) => {
           const data = val.split(" ");
-          return "P: " + data[data.length - 1];
+          return data[data.length - 1];
         })}
       />
     </box>

widgets/bar/style.scss

@@ -7,12 +7,6 @@ window.Bar {
   padding: 10px;
 
   .launcher {
-    background-color: $inactive-color;
-    border-radius: $rounded;
-    transition: all 0.15s ease-out;
-    padding: 0px;
-    margin: 0px;
-
     &:hover {
       background-color: $bg-color;
     }
@@ -65,6 +59,10 @@ window.Bar {
     color: $fg-color;
     background-color: $inactive-color;
     border-radius: calc($rounded / 1.5);
-    padding: 5px 10px;
+    padding: 8px;
+
+    image {
+      -gtk-icon-size: 1.5rem;
+    }
   }
 }

widgets/bar/tailscale.tsx

@@ -8,11 +8,12 @@ export const Tailscale = () => {
   ]);
 
   return (
-    <box cssClasses={["pill"]}>
+    <box cssClasses={["pill"]} spacing={5}>
+      <image iconName="fa-home-symbolic" />
       <label
         label={bind(tailscale).as((val) => {
           const data = val.split(" ");
-          return "H: " + data[data.length - 1];
+          return data[data.length - 1];
         })}
       />
     </box>