diff options
| -rw-r--r-- | scss/navbar.scss | 15 | ||||
| -rw-r--r-- | src/modules/navbar.tsx | 52 |
2 files changed, 49 insertions, 18 deletions
diff --git a/scss/navbar.scss b/scss/navbar.scss index 213fc48..4888618 100644 --- a/scss/navbar.scss +++ b/scss/navbar.scss @@ -21,36 +21,37 @@ } &.current { - .pane-button { + .nav-button { background-color: scheme.$primary; color: color.change(scheme.$base, $alpha: 1); } - &:hover .pane-button, - &:focus .pane-button { + &:hover .nav-button, + &:focus .nav-button { background-color: color.mix(scheme.$primary, scheme.$base, 80%); } - &:active .pane-button { + &:active .nav-button { background-color: color.mix(scheme.$primary, scheme.$base, 70%); } } - &:first-child .pane-button { + &:first-child .nav-button { margin-top: lib.s(10); } - &:last-child .pane-button { + &:last-child .nav-button { margin-bottom: lib.s(10); } } - .pane-button { + .nav-button { @include lib.rounded(20); @include lib.element-decel; padding: lib.s(10) lib.s(8); margin: lib.s(5) lib.s(8); + min-width: lib.s(40); .icon { font-size: lib.s(28); diff --git a/src/modules/navbar.tsx b/src/modules/navbar.tsx index b844ff4..e230c19 100644 --- a/src/modules/navbar.tsx +++ b/src/modules/navbar.tsx @@ -1,11 +1,16 @@ import type { Monitor } from "@/services/monitors"; +import { capitalize } from "@/utils/strings"; import type { AstalWidget } from "@/utils/types"; -import { Variable } from "astal"; +import { bind, execAsync, Variable } from "astal"; import { 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 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"; @@ -15,13 +20,11 @@ const getPaneIcon = (name: PaneName) => { return "date_range"; }; -const getPaneName = (name: PaneName) => { - if (name === "dashboard") return "Dash"; - if (name === "audio") return "Audio"; - if (name === "connectivity") return "Conn"; - if (name === "packages") return "Pkgs"; - if (name === "notifpane") return "Alrts"; - return "Time"; +const getSpecialWsIcon = (name: SpecialWsName) => { + if (name === "sysmon") return "speed"; + if (name === "communication") return "communication"; + if (name === "music") return "music_note"; + return "checklist"; }; const hookIsCurrent = ( @@ -50,17 +53,40 @@ const PaneButton = ({ }) => ( <button cursor="pointer" - onClick={() => switchPane(monitor, name)} + onClicked={() => switchPane(monitor, name)} setup={self => hookIsCurrent(self, sidebar, name, c => self.toggleClassName("current", c))} > - <box vertical className="pane-button"> + <box vertical className="nav-button"> <label className="icon" label={getPaneIcon(name)} /> <revealer transitionType={Gtk.RevealerTransitionType.SLIDE_DOWN} transitionDuration={150} setup={self => hookIsCurrent(self, sidebar, name, c => self.set_reveal_child(c))} > - <label className="label" label={getPaneName(name)} /> + <label truncate wrapMode={Pango.WrapMode.WORD_CHAR} className="label" label={capitalize(name)} /> + </revealer> + </box> + </button> +); + +const SpecialWsButton = ({ name }: { name: SpecialWsName }) => ( + <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(AstalHyprland.get_default(), "focusedClient").as( + c => c?.get_workspace().get_name() === `special:${name}` + )} + > + <label truncate wrapMode={Pango.WrapMode.WORD_CHAR} className="label" label={capitalize(name)} /> </revealer> </box> </button> @@ -113,6 +139,10 @@ export default ({ monitor }: { monitor: Monitor }) => { {paneNames.map(n => ( <PaneButton monitor={monitor} name={n} sidebar={sidebar} /> ))} + <box vexpand /> + {specialWsNames.map(n => ( + <SpecialWsButton name={n} /> + ))} </box> </eventbox> </window> |