refactor

widget/Bar.tsx

@@ -1,6 +1,4 @@
 import { App, Astal, Gtk, Gdk } from "astal/gtk3";
-import Mpris from "gi://AstalMpris";
-import { bind } from "astal";
 import {
   PowerMenu,
   Cpu,
@@ -8,17 +6,17 @@ import {
   Ram,
   Storage,
   Workspaces,
-  FocusedClient,
+  // FocusedClient,
   Time,
   SysTray,
   Media,
+  LauncherButton,
+  PowerMenuButton,
+  MediaPlayerButton,
 } from "./modules/export";
-import { close_all_menus } from "./utils/windows";
 
 export default function Bar(gdkmonitor: Gdk.Monitor) {
   const { TOP, LEFT, RIGHT } = Astal.WindowAnchor;
-  const mpris = Mpris.get_default();
-
   return (
     <>
       <window
@@ -31,13 +29,7 @@ export default function Bar(gdkmonitor: Gdk.Monitor) {
       >
         <centerbox>
           <box hexpand halign={Gtk.Align.START} className="RoudedBlock">
-            <button
-              onClicked="/home/tola/dotfiles/rofi/launcher/launcher.sh"
-              halign={Gtk.Align.START}
-              className="Menubutton"
-            >
-              
-            </button>
+            <LauncherButton />
             <Cpu />
             <Ram />
             <Storage />
@@ -47,34 +39,11 @@ export default function Bar(gdkmonitor: Gdk.Monitor) {
             <Workspaces />
           </box>
           <box hexpand halign={Gtk.Align.END} className="RoudedBlock">
-            {bind(mpris, "players").as((ps) =>
-              ps[0] ? (
-                <button
-                  onClicked={() => {
-                    close_all_menus("Mediamenu");
-                    App.toggle_window("Mediamenu");
-                  }}
-                  className="Menubutton"
-                >
-                  
-                </button>
-              ) : (
-                <></>
-              ),
-            )}
+            <MediaPlayerButton />
             <SysTray />
             <BatteryLevel />
             <Time />
-            <button
-              onClicked={() => {
-                close_all_menus("powermenu");
-                App.toggle_window("powermenu");
-              }}
-              halign={Gtk.Align.START}
-              className="Menubutton"
-            >
-              ⏻
-            </button>
+            <PowerMenuButton />
           </box>
         </centerbox>
       </window>

widget/modules/LauncherButton.tsx

@@ -0,0 +1,13 @@
+import { Gtk } from "astal/gtk3";
+
+export default function LauncherButton() {
+  return (
+    <button
+      onClicked="/home/tola/dotfiles/rofi/launcher/launcher.sh"
+      halign={Gtk.Align.START}
+      className="Menubutton"
+    >
+      
+    </button>
+  );
+}

widget/modules/MediaPlayerButton.tsx

@@ -0,0 +1,27 @@
+import Mpris from "gi://AstalMpris";
+import { bind } from "astal";
+import { close_all_menus } from "../utils/windows";
+import { App } from "astal/gtk3";
+
+export default function MediaPlayerButton() {
+  const mpris = Mpris.get_default();
+  return (
+    <>
+      {bind(mpris, "players").as((ps) =>
+        ps[0] ? (
+          <button
+            onClicked={() => {
+              close_all_menus("Mediamenu");
+              App.toggle_window("Mediamenu");
+            }}
+            className="Menubutton"
+          >
+            
+          </button>
+        ) : (
+          <></>
+        ),
+      )}
+    </>
+  );
+}

widget/modules/PowerMenuButton.tsx

@@ -0,0 +1,17 @@
+import { close_all_menus } from "../utils/windows";
+import { App, Gtk } from "astal/gtk3";
+
+export default function PowerMenuButton() {
+  return (
+    <button
+      onClicked={() => {
+        close_all_menus("powermenu");
+        App.toggle_window("powermenu");
+      }}
+      halign={Gtk.Align.START}
+      className="Menubutton"
+    >
+      ⏻
+    </button>
+  );
+}

widget/modules/export.ts

@@ -8,6 +8,9 @@ import SysTray from "./SysTray";
 import Time from "./Time";
 import Workspaces from "./Workspaces";
 import Media from "./Media/Media";
+import LauncherButton from "./LauncherButton";
+import PowerMenuButton from "./PowerMenuButton";
+import MediaPlayerButton from "./MediaPlayerButton";
 
 export {
   BatteryLevel,
@@ -20,4 +23,7 @@ export {
   Time,
   Workspaces,
   Media,
+  LauncherButton,
+  PowerMenuButton,
+  MediaPlayerButton,
 };