tpanel/widgets/bar/index.tsx

import { App, Astal, Gdk } from "astal/gtk4";
import { FocusedClient, WorkspaceButton } from "./workspace";
import { Battery } from "./battery";
import { Tailscale } from "./tailscale";
import { Time } from "./time";

export const WINDOW_NAME = "bar";

export const Bar = (gdkmonitor: Gdk.Monitor) => {
  const { TOP } = Astal.WindowAnchor;

  return (
    <window
      name={WINDOW_NAME}
      visible
      cssClasses={["Bar"]}
      gdkmonitor={gdkmonitor}
      exclusivity={Astal.Exclusivity.EXCLUSIVE}
      anchor={TOP}
      application={App}
    >
      <centerbox>
        <Start />
        <Center />
        <End />
      </centerbox>
    </window>
  );
};

const Start = () => {
  return (
    <box spacing={10}>
      <WorkspaceButton />
    </box>
  );
};

const Center = () => {
  return <FocusedClient />;
};

const End = () => {
  return (
    <box spacing={10}>
      <Tailscale />
      <Battery />
      <Time />
    </box>
  );
};