added Batterymenu and refactor

widget/menus/MediaMenu/MediaMenu.scss

@@ -0,0 +1,53 @@
+window.Media {
+    margin: 5px;
+    padding: 5px;
+    background-color: transparent;
+    box {
+        margin: 5px;
+        padding: 5px;
+        background-color: black;
+        border-radius: 25px;
+    }
+    box.MediaContent {
+        margin: 5px;
+        background-color: rgb(70, 70, 70);
+        border-radius: 25px;
+        padding: 5px;
+        box {
+            background-color: rgb(70, 70, 70);
+        }
+    }
+
+    box.title {
+        padding: 5px;
+        margin: 0;
+        /* background-color: rgb(70, 70, 70); */
+        label {
+            font-weight: bold;
+            font-size: 1.1em;
+        }
+        icon {
+            font-size: 30px;
+            padding: 0;
+            margin: 0;
+        }
+    }
+
+    .Cover {
+        min-width: 120px;
+        min-height: 120px;
+        border-radius: 9px;
+        margin-right: 0.6rem;
+        background-size: contain;
+        background-position: center;
+    }
+
+    label.artist {
+        padding: 5px;
+    }
+
+    button {
+        margin: 5px;
+        border-radius: 25px;
+    }
+}

widget/menus/MediaMenu/MediaMenu.tsx

@@ -0,0 +1,126 @@
+import { App } from "astal/gtk3";
+import { bind } from "astal";
+import { Astal, Gtk } from "astal/gtk3";
+import Mpris from "gi://AstalMpris";
+
+function lengthStr(length: number) {
+  const min = Math.floor(length / 60);
+  const sec = Math.floor(length % 60);
+  const sec0 = sec < 10 ? "0" : "";
+  return `${min}:${sec0}${sec}`;
+}
+
+export default function MediaMenu() {
+  const { TOP, RIGHT } = Astal.WindowAnchor;
+  const mpris = Mpris.get_default();
+
+  return (
+    <window
+      anchor={TOP | RIGHT}
+      name="Mediamenu"
+      className="Media"
+      application={App}
+      visible={false}
+    >
+      <box vertical>
+        {bind(mpris, "players").as((ps) =>
+          ps.map((psi) =>
+            psi ? (
+              <box className="MediaContent">
+                <box>
+                  <box
+                    className="Cover"
+                    valign={Gtk.Align.CENTER}
+                    css={bind(psi, "coverArt").as(
+                      (cover) => `background-image: url('${cover}');`,
+                    )}
+                  />
+                  <box vertical>
+                    <box className="title">
+                      <label
+                        truncate
+                        hexpand
+                        halign={Gtk.Align.START}
+                        label={bind(psi, "metadata").as(() => `${psi.title}`)}
+                      />
+                      <icon
+                        icon={bind(psi, "entry").as((e) =>
+                          Astal.Icon.lookup_icon(e)
+                            ? e
+                            : "audio-x-generic-symbolic",
+                        )}
+                      />
+                    </box>
+                    <label
+                      halign={Gtk.Align.START}
+                      valign={Gtk.Align.START}
+                      className="artist"
+                      vexpand
+                      wrap
+                      label={bind(psi, "metadata").as(() => `${psi.artist}`)}
+                    />
+                    <slider
+                      visible={bind(psi, "length").as((l) => l > 0)}
+                      onDragged={({ value }) =>
+                        (psi.position = value * psi.length)
+                      }
+                      value={bind(psi, "position").as((p) =>
+                        psi.length > 0 ? p / psi.length : 0,
+                      )}
+                    />
+                    <centerbox className="actions">
+                      <label
+                        hexpand
+                        className="position"
+                        halign={Gtk.Align.START}
+                        visible={bind(psi, "length").as((l) => l > 0)}
+                        label={bind(psi, "position").as(lengthStr)}
+                      />
+                      <box>
+                        <button
+                          onClicked={() => psi.previous()}
+                          visible={bind(psi, "canGoPrevious")}
+                        >
+                          <icon icon="media-skip-backward-symbolic" />
+                        </button>
+                        <button
+                          onClicked={() => psi.play_pause()}
+                          visible={bind(psi, "canControl")}
+                        >
+                          <icon
+                            icon={bind(psi, "playbackStatus").as((s) =>
+                              s === Mpris.PlaybackStatus.PLAYING
+                                ? "media-playback-pause-symbolic"
+                                : "media-playback-start-symbolic",
+                            )}
+                          />
+                        </button>
+                        <button
+                          onClicked={() => psi.next()}
+                          visible={bind(psi, "canGoNext")}
+                        >
+                          <icon icon="media-skip-forward-symbolic" />
+                        </button>
+                      </box>
+                      <label
+                        className="length"
+                        hexpand
+                        halign={Gtk.AlignEND}
+                        visible={bind(psi, "length").as((l) => l > 0)}
+                        label={bind(psi, "length").as((l) =>
+                          l > 0 ? lengthStr(l) : "0:00",
+                        )}
+                      />
+                    </centerbox>
+                  </box>
+                </box>
+              </box>
+            ) : (
+              <label label="Nothing Playing" />
+            ),
+          ),
+        )}
+      </box>
+    </window>
+  );
+}