Added new pockets refactoring cach add new yazi config

home-manager/data/ags/ags.nix

@@ -10,6 +10,8 @@
       echo \$surface0: \#${colors.base02}\; >> colors.scss
       echo \$fg:       \#${colors.base05}\; >> colors.scss
       echo \$accent:   \#${colors.base0B}\; >> colors.scss
+
+      echo \#${colors.base0B} > accent.css
     '';
 
     installPhase = ''
@@ -17,5 +19,7 @@
       mkdir $out
       cp $src/* $out -r
       mv colors.scss $out
+      mv accent.css  $out
     '';
   }
+

home-manager/data/ags/ags/style.scss

@@ -67,8 +67,8 @@ window.Bar {
             background: $surface0;
         }
     }
-    
-    Media {
+
+    .Media {
         &.playing {
             border: 2pt solid $accent;
         }
@@ -91,7 +91,7 @@ window.Bar {
 
     .AudioSlider icon { margin-left: 8px; }
 
-    .Workspaces, .Layout, .Media, .SysTray, .AudioSlider, .Time {
+    .Workspaces, .Wifi, .Layout, .Media, .SysTray, .AudioSlider, .Battery, .Time {
         @extend %item;
     }
 }

home-manager/data/ags/ags/widget/elements/Audio.tsx

@@ -1,16 +1,16 @@
 import { bind } from "astal"
+import { execAsync } from "astal/process"
 import Wp from "gi://AstalWp"
-import {execAsync} from "astal/process"
 
 export default function Audio() {
     const speaker = Wp.get_default()?.audio.defaultSpeaker!
 
-    return <box className="AudioSlider">
-        <button onClicked={() => {execAsync("kitty --class pulsemixer -e pulsemixer")}}>
-            <box spacing={4}> 
-                <icon icon={bind(speaker, "volumeIcon")} />
-                <label label={bind(speaker, "volume").as(v => `${Math.floor(v*100)}%`)} />
-            </box>
-        </button>
-    </box>
+    return <button
+        className="AudioSlider"
+        onClicked={() => { execAsync("ghostty --title=pulsemixer -e pulsemixer") }}>
+        <box>
+            <icon icon={bind(speaker, "volumeIcon")} />
+            <label label={bind(speaker, "volume").as(v => `${Math.floor(v*100)}%`)} />
+        </box>
+    </button>
 }

home-manager/data/ags/ags/widget/elements/Battery.tsx

@@ -1,14 +1,30 @@
-import { bind } from "astal"
-import Battery from "gi://AstalBattery"
+import { bind } from "astal";
+import Battery from "gi://AstalBattery";
+import accent from "../../accent.css";
 
 export default function BatteryLevel() {
-    const bat = Battery.get_default()
+    const bat = Battery.get_default();
+    const percent = bind(bat, "percentage").as(p => Math.floor(p * 100));
 
-    return <box className="Battery"
-        visible={bind(bat, "isPresent")}>
-        <icon icon={bind(bat, "batteryIconName")} />
-        <label label={bind(bat, "percentage").as(p =>
-            `${Math.floor(p * 100)} %`
-        )} />
-    </box>
+    return (
+        <box
+            className="Battery"
+            visible={bind(bat, "isPresent")}
+            css={percent.as(p => `
+                background-image: linear-gradient(
+                    to right,
+                    ${accent} 0%,
+                    ${accent} ${p}%,
+                    transparent ${p}%,
+                    transparent 100%
+                );
+                background-size: 100% 3px;
+                background-repeat: no-repeat;
+                background-position: bottom;
+            `)}
+        >
+            <icon icon={bind(bat, "batteryIconName")} />
+            <label label={percent.as(p => `${p}%`)} />
+        </box>
+    );
 }

home-manager/data/ags/ags/widget/elements/Wifi.tsx

@@ -1,21 +1,6 @@
 import { bind } from "astal"
 import Network from "gi://AstalNetwork"
-import {execAsync} from "astal/process"
-
-/*export default function Wifi() {
-    const network = Network.get_default()
-    const wifi = bind(network, "wifi")
-
-    return <box visible={wifi.as(Boolean)}>
-        {wifi.as(wifi => wifi && (
-            <icon
-                tooltipText={bind(wifi, "ssid").as(String)}
-                className="Wifi"
-                icon={bind(wifi, "iconName")}
-            />
-        ))}
-    </box>
-}*/
+import { execAsync } from "astal/process"
 
 export default function Wifi() {
     const network = Network.get_default()
@@ -23,10 +8,17 @@ export default function Wifi() {
 
     return <box visible={wifi.as(Boolean)}>
         {wifi.as(wifi => wifi && (
-            <button onClicked={() => {execAsync("kitty --title=nmtui -e nmtui")}} className="Wifi">
-                <box spacing={4}>
-                    <icon icon={bind(wifi, "iconName")}/>
-                    <label label={wifi.ssid.slice(0, 10) + (wifi.ssid.length > 10 ? "…" : "")}/>
+            <button
+                className="Wifi"
+                onClicked={() => {execAsync("ghostty --title=nmtui -e nmtui")}}>
+                <box>
+                    <icon
+                        tooltipText={bind(wifi, "ssid").as(String)}
+                        icon={bind(wifi, "iconName")}
+                    />
+                    <label
+                        label={bind(wifi, "ssid").as(String)}
+                    />
                 </box>
             </button>
         ))}