diff options
Diffstat (limited to 'src/modules/navbar.tsx')
| -rw-r--r-- | src/modules/navbar.tsx | 203 |
1 files changed, 0 insertions, 203 deletions
diff --git a/src/modules/navbar.tsx b/src/modules/navbar.tsx deleted file mode 100644 index 35d3900..0000000 --- a/src/modules/navbar.tsx +++ /dev/null @@ -1,203 +0,0 @@ -import type { Monitor } from "@/services/monitors"; -import { capitalize } from "@/utils/strings"; -import type { AstalWidget } from "@/utils/types"; -import { bind, execAsync, Variable } from "astal"; -import { App, Astal, Gtk } from "astal/gtk3"; -import { navbar as config } from "config"; -import AstalHyprland from "gi://AstalHyprland"; -import Pango from "gi://Pango"; -import SideBar, { awaitSidebar, paneNames, switchPane, type PaneName } from "./sidebar"; - -const layerNames = ["mediadisplay"] as const; -type LayerName = `${(typeof layerNames)[number]}${number}`; - -const specialWsNames = ["sysmon", "communication", "music", "todo"] as const; -type SpecialWsName = (typeof specialWsNames)[number]; - -const getPaneIcon = (name: PaneName) => { - if (name === "dashboard") return "dashboard"; - if (name === "audio") return "tune"; - if (name === "connectivity") return "settings_ethernet"; - if (name === "packages") return "package_2"; - if (name === "alerts") return "notifications"; - return "date_range"; -}; - -const getLayerIcon = (name: LayerName) => { - return "graphic_eq"; -}; - -const getSpecialWsIcon = (name: SpecialWsName) => { - if (name === "sysmon") return "speed"; - if (name === "communication") return "communication"; - if (name === "music") return "music_note"; - return "checklist"; -}; - -const hookIsCurrent = ( - self: AstalWidget, - sidebar: Variable<SideBar | null>, - name: PaneName, - callback: (isCurrent: boolean) => void -) => { - const unsub = sidebar.subscribe(s => { - if (!s) return; - self.hook(s.shown, (_, v) => callback(s.visible && v === name)); - self.hook(s, "notify::visible", () => callback(s.visible && s.shown.get() === name)); - callback(s.visible && s.shown.get() === name); - unsub(); - }); -}; - -const PaneButton = ({ - monitor, - name, - sidebar, -}: { - monitor: Monitor; - name: PaneName; - sidebar: Variable<SideBar | null>; -}) => ( - <button - cursor="pointer" - onClicked={() => switchPane(monitor, name)} - setup={self => hookIsCurrent(self, sidebar, name, c => self.toggleClassName("current", c))} - > - <box vertical className="nav-button"> - <label className="icon" label={getPaneIcon(name)} /> - <revealer - transitionType={Gtk.RevealerTransitionType.SLIDE_DOWN} - transitionDuration={150} - setup={self => { - let isCurrent = false; - hookIsCurrent(self, sidebar, name, c => { - isCurrent = c; - self.set_reveal_child(config.showLabels.get() && c); - }); - self.hook(config.showLabels, (_, v) => self.set_reveal_child(v && isCurrent)); - }} - > - <label truncate wrapMode={Pango.WrapMode.WORD_CHAR} className="label" label={capitalize(name)} /> - </revealer> - </box> - </button> -); - -const LayerButton = ({ name }: { name: LayerName }) => ( - <button - cursor="pointer" - onClicked={() => App.toggle_window(name)} - setup={self => - self.hook(App, "window-toggled", (_, window) => { - if (window.name === name) self.toggleClassName("current", window.visible); - }) - } - > - <box vertical className="nav-button"> - <label className="icon" label={getLayerIcon(name)} /> - <revealer - transitionType={Gtk.RevealerTransitionType.SLIDE_DOWN} - transitionDuration={150} - setup={self => { - let visible = false; - self.hook(config.showLabels, (_, v) => self.toggleClassName(v && visible)); - self.hook(App, "window-toggled", (_, window) => { - if (window.name === name) - self.toggleClassName("current", config.showLabels.get() && window.visible); - }); - }} - > - <label truncate wrapMode={Pango.WrapMode.WORD_CHAR} className="label" label={capitalize(name)} /> - </revealer> - </box> - </button> -); - -const SpecialWsButton = ({ name }: { name: SpecialWsName }) => { - const revealChild = Variable.derive( - [config.showLabels, bind(AstalHyprland.get_default(), "focusedClient")], - (l, c) => l && c?.get_workspace().get_name() === `special:${name}` - ); - - return ( - <button - className={bind(AstalHyprland.get_default(), "focusedClient").as(c => - c?.get_workspace().get_name() === `special:${name}` ? "current" : "" - )} - cursor="pointer" - onClicked={() => execAsync(`caelestia toggle ${name}`).catch(console.error)} - > - <box vertical className="nav-button"> - <label className="icon" label={getSpecialWsIcon(name)} /> - <revealer - transitionType={Gtk.RevealerTransitionType.SLIDE_DOWN} - transitionDuration={150} - revealChild={bind(revealChild)} - onDestroy={() => revealChild.drop()} - > - <label truncate wrapMode={Pango.WrapMode.WORD_CHAR} className="label" label={capitalize(name)} /> - </revealer> - </box> - </button> - ); -}; - -export default ({ monitor }: { monitor: Monitor }) => { - const sidebar = Variable<SideBar | null>(null); - awaitSidebar(monitor).then(s => sidebar.set(s)); - - return ( - <window - namespace="caelestia-navbar" - monitor={monitor.id} - anchor={Astal.WindowAnchor.TOP | Astal.WindowAnchor.LEFT | Astal.WindowAnchor.BOTTOM} - exclusivity={Astal.Exclusivity.EXCLUSIVE} - visible={config.persistent.get()} - setup={self => { - const hyprland = AstalHyprland.get_default(); - const visible = Variable(config.persistent.get()); - - visible.poll(100, () => { - const width = self.visible - ? Math.max(config.appearWidth.get(), self.get_allocated_width()) - : config.appearWidth.get(); - return hyprland.get_cursor_position().x < width; - }); - if (config.persistent.get()) visible.stopPoll(); - - self.hook(config.persistent, (_, v) => { - if (v) { - visible.stopPoll(); - visible.set(true); - } else visible.startPoll(); - }); - - self.hook(visible, (_, v) => self.set_visible(v)); - self.connect("destroy", () => visible.drop()); - }} - > - <eventbox - onScroll={(_, event) => { - const shown = sidebar.get()?.shown; - if (!shown) return; - const idx = paneNames.indexOf(shown.get()); - if (event.delta_y > 0) shown.set(paneNames[Math.min(paneNames.length - 1, idx + 1)]); - else shown.set(paneNames[Math.max(0, idx - 1)]); - }} - > - <box vertical className="navbar"> - {paneNames.map(n => ( - <PaneButton monitor={monitor} name={n} sidebar={sidebar} /> - ))} - {layerNames.map(n => ( - <LayerButton name={`${n}${monitor.id}`} /> - ))} - <box vexpand /> - {specialWsNames.map(n => ( - <SpecialWsButton name={n} /> - ))} - </box> - </eventbox> - </window> - ); -}; |