rope/nixos
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
nixos/settings/quickshell.nix
rope e2c413d997 quickshell: derive surfaces from base00, fix status colours 
Stylix base01/base02 come off the wallpaper and land off-hue (purple card
over a slate bar). Tint base00 instead: #1c1f26 -> #2f3440 -> #434a5b.

base08-base0C collapse to the same cyan on monochrome wallpapers, so
warning and critical were indistinguishable. Replace with fixed err/warn/
ok/info/alt tokens; base0D stays the themed accent.

Also fixes Theme.base06, which was referenced but never declared.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-01 13:32:26 +01:00

5023 lines
258 KiB
Nix
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# settings/quickshell.nix — Quickshell desktop shell (bar, notifications, QML),
# split out of settings/hyprland.nix. The hyprland-side blur layer rule for
# the "quickshell-bar" namespace still lives there.
{ config, pkgs, lib, ... }:
let
isMacbook = config.networking.hostName == "FredOS-Macbook";
ui = import ./ui.nix; # shared corner-rounding knob
in
{
config = lib.mkIf (lib.elem config.networking.hostName [ "FredOS-Gaming" "FredOS-Macbook" ]) {
environment.systemPackages = with pkgs; [
quickshell
qt6.qt5compat # Qt5Compat.GraphicalEffects in Bar.qml
];
# Icon font for the shell. Lucide is ligature-based like Material Symbols
# was (text "wifi-high" renders the icon), so it drops straight in — only
# the names change. UI text font comes from stylix.
fonts.packages = [ pkgs.lucide ];
home-manager.users.fred = { config, lib, pkgs, osConfig, ... }:
let
c = config.lib.stylix.colors;
in {
systemd.user.services.quickshell = {
Unit = {
Description = "Quickshell desktop shell";
PartOf = [ "graphical-session.target" ];
After = [ "graphical-session.target" ];
};
Service = {
ExecStart = "${pkgs.quickshell}/bin/qs";
Restart = "always";
RestartSec = 2;
};
Install.WantedBy = [ "hyprland-session.target" ];
};
xdg.configFile = let
# Soft-reload quickshell in place: the process (and its DBus services —
# tray host, notification daemon) stays alive, so Electron apps with
# tray icons (vesktop) don't crash like they do on a hard restart.
# Falls back to a unit restart if the IPC socket isn't up.
qsRestart = ''
${pkgs.quickshell}/bin/qs ipc call shell reload 2>/dev/null || ${pkgs.systemd}/bin/systemctl --user restart quickshell.service 2>/dev/null || true
'';
wifiConnectScript = pkgs.writeShellScript "wifi-connect" ''
ssid="$1"
${pkgs.networkmanager}/bin/nmcli device wifi connect "$ssid" 2>/dev/null && exit 0
pw=$(${pkgs.zenity}/bin/zenity --password --title="WiFi Password" 2>/dev/null)
[ -n "$pw" ] && ${pkgs.networkmanager}/bin/nmcli device wifi connect "$ssid" password "$pw"
'';
nmcli = "${pkgs.networkmanager}/bin/nmcli";
# Follow stylix's sans choice so a font swap propagates to the bar
sansFont = osConfig.stylix.fonts.sansSerif.name;
# Shell chrome fragment shader: the bar, screen frame, dropdown panel
# and toast are one signed-distance field merged with a circular
# smooth-min (caelestia-style liquid junctions); the 2px border is the
# distance band just inside the surface, so it follows every fillet.
# Qt 6 requires shaders precompiled to .qsb — done here at build time.
chromeFragSrc = pkgs.writeText "shell-chrome.frag" ''
#version 440
layout(location = 0) in vec2 qt_TexCoord0;
layout(location = 0) out vec4 fragColor;
layout(std140, binding = 0) uniform buf {
mat4 qt_Matrix;
float qt_Opacity;
vec4 cutout; // cx, cy, hw, hh — rounded inner screen cutout
vec4 panel; // cx, cy, hw, hh — dropdown panel (hw <= 0: none)
vec4 toast; // cx, cy, hw, hh — toast (hw <= 0: none)
vec4 launcher; // cx, cy, hw, hh — bottom launcher (hw <= 0: none)
vec4 fillColor; // straight (non-premultiplied) rgba
vec4 borderColor;
vec2 res;
float cutoutR;
float panelR;
float meltK;
float borderW;
};
float sdRoundedBox(vec2 p, vec2 center, vec2 halfSize, float r) {
vec2 d = abs(p - center) - halfSize + vec2(r);
return length(max(d, vec2(0.0))) + min(max(d.x, d.y), 0.0) - r;
}
// Circular smooth min: the blend fillet is a true circular arc of
// radius k tangent to both surfaces.
float smin(float a, float b, float k) {
return max(k, min(a, b)) - length(max(vec2(k) - vec2(a, b), vec2(0.0)));
}
void main() {
vec2 p = qt_TexCoord0 * res;
// Shell = bar band + frame band = everything outside the cutout
float d = -sdRoundedBox(p, cutout.xy, cutout.zw, cutoutR);
if (panel.z > 0.5)
d = smin(d, sdRoundedBox(p, panel.xy, panel.zw, panelR), meltK);
if (toast.z > 0.5)
d = smin(d, sdRoundedBox(p, toast.xy, toast.zw, panelR), meltK);
if (launcher.z > 0.5)
d = smin(d, sdRoundedBox(p, launcher.xy, launcher.zw, panelR), meltK);
float fw = fwidth(d);
// 1 inside the union, 0 outside (antialiased)
float edge = 1.0 - smoothstep(-fw, fw, d);
// 1 deeper than the border band, 0 within it
float inner = 1.0 - smoothstep(-borderW - fw, -borderW + fw, d);
vec4 c = mix(borderColor, fillColor, inner);
fragColor = vec4(c.rgb * c.a, c.a) * edge * qt_Opacity;
}
'';
chromeShader = pkgs.runCommand "shell-chrome.frag.qsb" {
nativeBuildInputs = [ pkgs.qt6.qtshadertools ];
} ''
qsb --glsl "300 es,330" --hlsl 50 --msl 12 -o $out ${chromeFragSrc}
'';
# 7-day forecast JSON from Open-Meteo (no API key). Location is
# auto-detected by IP via ipinfo.io, falling back to London.
# Nova Pro Wireless ANC, no daemon: talk straight to the base station's
# vendor HID interface (iface 4). Report id 0x06 leads every 64-byte
# packet; opcode 0xbd sets ANC (0 off / 1 transparent / 2 on), 0xb0
# requests full status (anc @ 0x0a, power @ 0x0f, 0x08 = on-head).
# Protocol lifted from Arctis-Sound-Manager's nova_pro_wireless.yaml.
novaAncScript = pkgs.writeScript "nova-anc" ''
#!${pkgs.python3}/bin/python3
"""nova-anc [off|transparent|on] — no arg prints current mode."""
import glob, os, select, sys, time
MODES = {"off": 0, "transparent": 1, "on": 2}
NAMES = {0: "off", 1: "transparent", 2: "on"}
PIDS = {0x12e0, 0x12e5, 0x225d}
def dongle():
for h in glob.glob("/sys/class/hidraw/hidraw*"):
try:
uevent = open(h + "/device/uevent").read()
iface = open(h + "/device/../bInterfaceNumber").read().strip()
except OSError:
continue
for line in uevent.splitlines():
if line.startswith("HID_ID="):
_, vid, pid = line.split("=")[1].split(":")
if int(vid, 16) == 0x1038 and int(pid, 16) in PIDS and iface == "04":
return "/dev/" + os.path.basename(h)
return None
dev = dongle()
if not dev:
sys.exit(1)
fd = os.open(dev, os.O_RDWR)
if len(sys.argv) > 1:
os.write(fd, bytes([0x06, 0xbd, MODES[sys.argv[1]]]).ljust(64, b"\0"))
print(sys.argv[1])
sys.exit(0)
os.write(fd, bytes([0x06, 0xb0]).ljust(64, b"\0"))
deadline = time.time() + 1.0
while (left := deadline - time.time()) > 0:
if not select.select([fd], [], [], left)[0]:
break
pkt = os.read(fd, 64)
# Skip unsolicited 0x07xx event packets until the status reply
if len(pkt) > 0x0f and pkt[0] == 0x06 and pkt[1] == 0xb0:
if pkt[0x0f] != 0x08:
break # headset off / in cradle -> report nothing
print(NAMES.get(pkt[0x0a], "off"))
sys.exit(0)
sys.exit(1)
'';
weatherFetchScript = pkgs.writeShellScript "weather-fetch" ''
loc=$(${pkgs.curl}/bin/curl -sf --max-time 5 https://ipinfo.io/loc 2>/dev/null || true)
case "$loc" in
*,*) lat=''${loc%,*}; lon=''${loc#*,} ;;
*) lat=51.51; lon=-0.13 ;;
esac
${pkgs.curl}/bin/curl -sf --max-time 10 "https://api.open-meteo.com/v1/forecast?latitude=$lat&longitude=$lon&daily=weather_code,temperature_2m_max,temperature_2m_min,sunrise,sunset&timezone=auto&forecast_days=7"
'';
# Last-resort artwork: when a page publishes no MediaSession artwork
# (Jellyfin's web player, a bare <video> tag), fall back to its
# favicon. Filenames are often content-hashed, so /favicon.ico can't
# be guessed — the page's <link> tags have to be read. Prefers
# apple-touch-icon (180px) over favicon.ico (16px). Prints nothing on
# any failure, which the QML treats as "no icon".
faviconScript = pkgs.writeShellScript "favicon-fetch" ''
url="$1"
[ -z "$url" ] && exit 0
case "$url" in http://*|https://*) ;; *) exit 0 ;; esac
page=''${url%%#*} # drop SPA fragment (#/video)
proto=''${page%%://*}
rest=''${page#*://}
host=''${rest%%/*}
origin="$proto://$host"
dir=''${page%/*}/
html=$(${pkgs.curl}/bin/curl -sfL --max-time 5 "$page" 2>/dev/null)
[ -z "$html" ] && html=$(${pkgs.curl}/bin/curl -sfL --max-time 5 "$origin/" 2>/dev/null)
[ -z "$html" ] && exit 0
# Minified HTML is one long line, so pull each <link> out with
# grep -o rather than trying to split on newlines.
pick() {
printf '%s' "$html" \
| grep -oiE '<link[^>]*>' \
| grep -iE "rel=[\"']?$1" \
| grep -oiE "href=[\"'][^\"']+[\"']" \
| head -1 | sed -E "s/^href=[\"']//; s/[\"']\$//"
}
href=$(pick "apple-touch-icon")
[ -z "$href" ] && href=$(pick "(shortcut +)?icon[\"' ]")
[ -z "$href" ] && exit 0
case "$href" in
http://*|https://*) printf '%s' "$href" ;;
//*) printf '%s:%s' "$proto" "$href" ;;
/*) printf '%s%s' "$origin" "$href" ;;
*) printf '%s%s' "$dir" "$href" ;;
esac
'';
# cava in raw mode: one newline-terminated frame per tick, bars as
# semicolon-separated 0-100 ints — trivially parsed by SplitParser.
# Drives the media card's spectrum ring. Only spawned while the
# calendar popup is open, so nothing captures audio at idle.
cavaConfig = pkgs.writeText "cava-quickshell.conf" ''
[general]
framerate = 30
bars = 24
autosens = 1
[input]
method = pipewire
source = auto
[output]
method = raw
data_format = ascii
ascii_max_range = 100
channels = mono
'';
in {
"quickshell/qmldir" = {
onChange = qsRestart;
text = ''
singleton Theme 1.0 Theme.qml
singleton Commands 1.0 Commands.qml
Bar 1.0 Bar.qml
Lock 1.0 Lock.qml
Cheatsheet 1.0 Cheatsheet.qml
'';
};
"quickshell/Theme.qml" = {
onChange = qsRestart;
text = ''
pragma Singleton
import QtQuick
QtObject {
// ── Surfaces: one hue, three steps. base01/base02 are tints of
// base00 rather than stylix's own base01/base02, which come
// straight off the wallpaper and routinely land off-hue — a
// purple card floating over a slate bar. Tinting keeps
// bar → card → hover reading as one stack. Two numbers, and
// they are the whole surface ladder.
readonly property color base00: "#${c.base00}"
readonly property color base01: Qt.lighter(base00, 1.7) // card
readonly property color base02: Qt.lighter(base00, 2.4) // hover / chip / track
// ── Ink, wallpaper-derived: base05 primary, base04 muted,
// base03 disabled (also the border colour).
readonly property color base03: "#${c.base03}"
readonly property color base04: "#${c.base04}"
readonly property color base05: "#${c.base05}"
// The one themed accent: active, focused, selected, filled.
readonly property color base0D: "#${c.base0D}"
// ── Status colours, deliberately NOT wallpaper-derived.
// stylix's base08-base0F all collapse to near-identical values
// on a monochrome wallpaper, which leaves "battery critical"
// and "battery low" the same colour. Status has to stay legible
// whatever is on the desktop, so these are fixed.
readonly property color err: "#e0525f" // critical: temp ≥85, batt ≤15, auth failed
readonly property color warn: "#e0a44b" // caution: temp ≥70, batt ≤30
readonly property color ok: "#68c17c" // connected / active / net down
readonly property color info: "#5aa6e0" // memory
readonly property color alt: "#b98ce0" // net up
readonly property color barBg: Qt.rgba(base00.r, base00.g, base00.b, 0.70)
// Card surfaces are translucent so the compositor's bar-layer
// blur shows through — a lessened blur over the panel tint.
readonly property color cardBg: Qt.rgba(base01.r, base01.g, base01.b, 0.80)
// Transparent base02: hover highlights fade to/from this so the
// colour animation stays in-hue instead of dipping through
// transparent *black* (which reads as an extra flash colour).
readonly property color base02t: Qt.rgba(base02.r, base02.g, base02.b, 0)
readonly property string fontFamily: "${sansFont}"
// Ligature-based icon font: text "wifi-high" renders the icon
readonly property string iconFont: "lucide"
// Matches hyprland general.border_size (col.inactive_border = base03)
readonly property int borderWidth: 2
// Screen frame band; sits inside hyprland's gaps_out (12)
readonly property int frameWidth: 6
// ── Layout / metric tokens (referenced, not hardcoded) ──
// Bar band thickness. The bar is a VERTICAL column on the left
// edge, so this is its width: it drives widget cell widths, the
// dropdown x-origin and the shader cutout geometry — change
// here, not in ~15 places. Wide enough for the stacked HH/mm
// clock, which is what sets the floor.
readonly property int barWidth: 46
// ── Rounding. ONE knob: settings/ui.nix `radius`. Everything
// below derives from it, and hyprland's window rounding reads
// the same value, so changing that one number rescales the
// roundness of the entire desktop.
readonly property int radius: ${toString ui.radius} // panels, dropdowns, screen cutout
// Concentric, NOT a factor: a card inside a panel needs the
// panel's radius MINUS the gap between them. Give it the same
// radius as its container and the inner corner is over-round
// for its size — the card reads as inflated/balloon-like,
// invisible at r=8 and obvious by r=32.
readonly property int radiusCard: radius - panelGap
readonly property int radiusSmall: Math.round(radius * 0.75) // pill buttons, workspace dots
readonly property int radiusTiny: Math.round(radius * 0.5) // hover rows, action chips
readonly property int cardPad: 8 // card inner padding (inset = 2×)
readonly property int panelGap: 8 // gap between panel border and cards (all dropdowns/menus/toast)
// ── Animation duration tokens (ms) ──
readonly property int animMorph: 280 // panel grow / slide (OutExpo)
readonly property int animContent: 200 // content fade / highlight move
readonly property int animFade: 120 // hover colour transitions
}
'';
};
"quickshell/Lock.qml" = {
onChange = qsRestart;
text = ''
import Quickshell
import Quickshell.Io
import Quickshell.Wayland
import Quickshell.Services.Pam
import QtQuick
import Qt5Compat.GraphicalEffects
// ext-session-lock screen, replacing hyprlock. Set `locked: true`
// and the compositor hands every screen to a LockSurface below
// until PAM says otherwise.
//
// PAM and state live in a Scope OUTSIDE WlSessionLock: its default
// property is the surface *component*, so a PamContext declared
// inside it is never instantiated — `pam` didn't resolve and
// submit() threw, which is why enter/the arrow did nothing.
Scope {
id: root
property alias locked: lock.locked
property string password: ""
property bool failed: false
function submit(pw) {
if (pam.active || pw === "") return;
failed = false;
password = pw;
pam.start();
}
// greetd autologs us in, so lock as soon as the shell comes up:
// the lockscreen is the login prompt. mkdir is the atomic
// once-per-session test — XDG_RUNTIME_DIR dies with the
// session, so quickshell restarts (rebuilds) don't re-lock.
Process {
running: true
command: ["mkdir", Quickshell.env("XDG_RUNTIME_DIR") + "/qs-boot-lock"]
onExited: code => { if (code === 0) lock.locked = true; }
}
PamContext {
id: pam
// NixOS ships a "login" pam service; pam_unix verifies the
// user's own password via the unix_chkpwd setuid wrapper.
config: "login"
onPamMessage: {
if (this.responseRequired) this.respond(root.password);
}
onCompleted: result => {
root.password = "";
if (result === PamResult.Success) lock.locked = false;
else root.failed = true;
}
}
WlSessionLock {
id: lock
WlSessionLockSurface {
id: surface
color: "black"
Image {
id: wall
anchors.fill: parent
source: "file://" + Quickshell.env("HOME") + "/.local/share/backgrounds/wallpaper.png"
// cache:false — soft reload (qs ipc reload) keeps the process
// alive, and the QML pixmap cache is keyed by URL, so a new
// wallpaper behind the same path never shows without this.
cache: false
fillMode: Image.PreserveAspectCrop
visible: false
}
FastBlur {
anchors.fill: wall
source: wall
radius: 48
}
Rectangle { anchors.fill: parent; color: "black"; opacity: 0.4 }
SystemClock {
id: lockClock
precision: SystemClock.Minutes
}
Column {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: -60
spacing: 8
Text {
anchors.horizontalCenter: parent.horizontalCenter
text: lockClock.date.toLocaleTimeString(Qt.locale(), "HH:mm")
color: Theme.base05
font.family: Theme.fontFamily
font.pixelSize: 72
font.weight: Font.Medium
}
Text {
anchors.horizontalCenter: parent.horizontalCenter
text: lockClock.date.toLocaleDateString(Qt.locale(), "dddd, d MMMM")
color: Theme.base04
font.family: Theme.fontFamily
font.pixelSize: 16
}
Item { width: 1; height: 32 }
// Password pill: dots for typed chars; border tracks
// state (accent while checking, red on failure).
Rectangle {
anchors.horizontalCenter: parent.horizontalCenter
width: 280
height: 44
radius: Theme.radiusCard
color: Theme.cardBg
border.width: Theme.borderWidth
border.color: pam.active ? Theme.base0D
: root.failed ? Theme.err
: Theme.base03
Behavior on border.color { ColorAnimation { duration: Theme.animFade } }
Row {
anchors.centerIn: parent
spacing: 8
Repeater {
model: Math.min(pwInput.text.length, 24)
Rectangle {
width: 8; height: 8; radius: 4
color: Theme.base05
}
}
}
Text {
anchors.centerIn: parent
visible: pwInput.text === "" && root.failed
text: "wrong password"
color: Theme.err
font.family: Theme.fontFamily
font.pixelSize: 13
}
TextInput {
id: pwInput
anchors.fill: parent
opacity: 0
enabled: !pam.active
echoMode: TextInput.Password
focus: true
function go() {
root.submit(text);
text = "";
}
// Explicit key handlers: accepted() doesn't
// fire reliably on the lock surface.
Keys.onReturnPressed: go()
Keys.onEnterPressed: go()
onAccepted: go()
Keys.onEscapePressed: text = ""
}
// Visible confirm button (after TextInput: on top)
Rectangle {
anchors.right: parent.right
anchors.rightMargin: 6
anchors.verticalCenter: parent.verticalCenter
width: 32; height: 32; radius: 16
color: confirmMa.containsMouse ? Theme.base02 : "transparent"
Behavior on color { ColorAnimation { duration: Theme.animFade } }
visible: pwInput.text.length > 0
Text {
anchors.centerIn: parent
text: "arrow-right"
font.family: Theme.iconFont
font.pixelSize: 18
color: Theme.base0D
}
MouseArea {
id: confirmMa
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: pwInput.go()
}
}
}
}
Component.onCompleted: pwInput.forceActiveFocus()
}
}
}
'';
};
"quickshell/Cheatsheet.qml" = {
onChange = qsRestart;
text = ''
import Quickshell
import Quickshell.Wayland
import QtQuick
// Keybind cheat sheet — Super+C routes here via shell.qml's
// "cheatsheet" IpcHandler. The list is hand-maintained: the real
// binds live in settings/hyprland.nix's Lua config and the
// spotify-player ones are that app's built-in defaults, so both
// need updating here too when they change.
Scope {
id: root
property bool open: false
readonly property var sections: [
{ title: "Apps", binds: [
["Super + T", "Terminal"],
["Super + E", "Files"],
["Super + Z", "Zen browser"],
["Super + R", "Launcher"],
["Super + I", "Audio settings"],
["Super + A", "Colour picker"],
["Super + C", "This cheat sheet"],
]},
{ title: "Windows", binds: [
["Super + Q", "Close window"],
["Super + V", "Toggle floating"],
["Super + F", "Fullscreen"],
["Super + P", "Pseudo tile"],
["Super + S", "Toggle split"],
["Super + drag", "Move window"],
["Super + right-drag", "Resize window"],
]},
{ title: "Focus & workspaces", binds: [
["Super + ←↓↑→", "Focus window"],
["Super + H/J/K", "Focus left/down/up"],
["Super + Shift + ←↓↑→", "Move window"],
["Super + 0-9", "Go to workspace"],
["Super + Shift + 0-9", "Send to workspace"],
["Super + scroll", "Cycle workspaces"],
]},
{ title: "Session", binds: [
["Super + L", "Power menu"],
["Super + Shift + E", "Exit Hyprland"],
["Super + Shift + S", "Screenshot region"],
["Print", "Screenshot screen"],
]},
{ title: "Spotify Player", binds: [
["?", "Built-in help"],
["space", "Play / pause"],
["n / p", "Next / previous"],
["+ / -", "Volume"],
["< / >", "Seek"],
["D", "Switch device"],
["g s", "Search all of Spotify"],
["/", "Filter current page"],
["z", "Queue"],
["l", "Lyrics"],
["g l", "Library"],
["R", "Restart audio client"],
["tab", "Next pane"],
["q", "Quit"],
]},
]
PanelWindow {
visible: root.open
WlrLayershell.namespace: "quickshell-cheatsheet"
WlrLayershell.layer: WlrLayer.Overlay
// Exclusive works here (unlike the bar): this window uses no
// HyprlandFocusGrab, so nothing fights it for focus.
WlrLayershell.keyboardFocus: root.open
? WlrKeyboardFocus.Exclusive : WlrKeyboardFocus.None
exclusionMode: ExclusionMode.Ignore
anchors { top: true; left: true; right: true; bottom: true }
color: "transparent"
// Click anywhere outside the card to dismiss.
MouseArea {
anchors.fill: parent
onClicked: root.open = false
Rectangle { anchors.fill: parent; color: "#99000000" }
}
Item {
anchors.fill: parent
focus: true
Keys.onPressed: e => {
if (e.key === Qt.Key_Escape || e.key === Qt.Key_C
|| e.key === Qt.Key_Q)
root.open = false;
}
Rectangle {
anchors.centerIn: parent
width: grid.width + Theme.panelGap * 6
height: grid.height + Theme.panelGap * 6
radius: Theme.radius
color: Theme.cardBg
border.width: Theme.borderWidth
border.color: Theme.base02
// Swallow clicks on the card so it doesn't close.
MouseArea { anchors.fill: parent }
Row {
id: grid
anchors.centerIn: parent
spacing: Theme.panelGap * 4
Repeater {
model: root.sections
Column {
required property var modelData
spacing: 4
Text {
text: modelData.title
font.family: Theme.fontFamily
font.pixelSize: 15
font.bold: true
color: Theme.base0D
bottomPadding: 4
}
Repeater {
model: modelData.binds
Row {
required property var modelData
spacing: 10
Text {
width: 150
text: modelData[0]
font.family: Theme.fontFamily
font.pixelSize: 13
color: Theme.base0D
}
Text {
text: modelData[1]
font.family: Theme.fontFamily
font.pixelSize: 13
color: Theme.base05
}
}
}
}
}
}
}
}
}
}
'';
};
"quickshell/Commands.qml" = {
onChange = qsRestart;
text = ''
pragma Singleton
import QtQuick
QtObject {
readonly property string nmcli: "${nmcli}"
readonly property string wifiConnect: "${wifiConnectScript}"
readonly property string notifSound: "${pkgs.libcanberra-gtk3}/bin/canberra-gtk-play"
readonly property string systemctl: "${pkgs.systemd}/bin/systemctl"
readonly property string weatherFetch: "${weatherFetchScript}"
readonly property string ssh: "${pkgs.openssh}/bin/ssh"
readonly property string novaAnc: "${novaAncScript}"
// Unprivileged ping works via ICMP dgram sockets — NixOS sets
// net.ipv4.ping_group_range for everyone (no wrapper exists).
readonly property string ping: "${pkgs.iputils}/bin/ping"
// Recoloured to the theme accent at draw time (ColorOverlay),
// so the stock blue/grey snowflake artwork is fine here.
readonly property string nixLogo: "${pkgs.nixos-icons}/share/icons/hicolor/scalable/apps/nix-snowflake.svg"
readonly property string faviconFetch: "${faviconScript}"
readonly property string cava: "${pkgs.cava}/bin/cava"
readonly property string cavaConfig: "${cavaConfig}"
}
'';
};
"quickshell/shell.qml" = {
onChange = qsRestart;
text = ''
//@ pragma UseQApplication
import Quickshell
import Quickshell.Io
import Quickshell.Wayland
import Quickshell.Services.Notifications
import QtQuick
ShellRoot {
id: root
property var latestNotification: null
property var mainBar: null
signal notificationReceived()
// Bound in hyprland.nix: Super+R → launcher (bottom of the
// bar window), Super+L → session menu (right edge).
IpcHandler {
target: "launcher"
function toggle(): void { if (root.mainBar) root.mainBar.toggleLauncher(); }
function powermenu(): void { if (root.mainBar) root.mainBar.toggleSession(); }
}
// Keybind cheat sheet — Super+C in hyprland.nix.
Cheatsheet { id: cheatsheet }
IpcHandler {
target: "cheatsheet"
function toggle(): void { cheatsheet.open = !cheatsheet.open; }
}
// Soft reload, used by the nix onChange hook — keeps the
// process and its DBus services (tray host) alive.
IpcHandler {
target: "shell"
function reload(): void { Quickshell.reload(false); }
}
// Session lock (replaces hyprlock). `qs ipc call lock lock`
// from hypridle / loginctl lock-session; the session menu
// calls root.lock() directly. Idempotent while locked.
Lock { id: lockScreen }
function lock() { lockScreen.locked = true; }
IpcHandler {
target: "lock"
function lock(): void { root.lock(); }
// Escape hatch from a VT: qs ipc call lock unlock
function unlock(): void { lockScreen.locked = false; }
}
// Screenshot pin: the Shift+Super+S keybind brackets hyprshot
// with pin/unpin so the focus grab is suspended while slurp
// grabs input — otherwise the open menu would close like any
// click-outside. Self-heals via a watchdog if unpin is missed.
IpcHandler {
target: "screenshot"
function pin(): void { if (root.mainBar) root.mainBar.setScreenshotPin(true); }
function unpin(): void { if (root.mainBar) root.mainBar.setScreenshotPin(false); }
}
// ── OSD brightness (replaces swayosd). Volume needs nothing
// here — the bar watches Pipewire directly. Backlight has no
// watchable change event, so the keybind routes through here:
// brightnessctl -m prints the resulting level, which becomes
// the OSD value. Bars pick this up on the focused monitor.
signal osdBrightness(string icon, real value)
Process {
id: brightProc
property string osdIcon: "brightness"
stdout: StdioCollector {
// machine-readable: device,class,current,percent%,max
onStreamFinished: {
let f = text.trim().split("\n")[0].split(",");
if (f.length < 5) return;
let v = parseInt(f[3]) / 100;
// "brightness" is a request to grade the glyph by
// level; the kbd path passes a literal icon. Lucide
// gives three sun steps, not seven.
let ic = brightProc.osdIcon === "brightness"
? (v >= 0.66 ? "sun" : v >= 0.33 ? "sun-medium" : "sun-dim")
: brightProc.osdIcon;
root.osdBrightness(ic, v);
}
}
}
function setBrightness(args, icon) {
// Key repeat outpaces the process; dropping a step is
// invisible, rewriting a live command is not.
if (brightProc.running) return;
brightProc.osdIcon = icon;
brightProc.command = ["brightnessctl", "-m"].concat(args);
brightProc.running = true;
}
IpcHandler {
target: "osd"
// floor 1%: `set 0%` turns the panel fully off
function brightnessUp(): void { root.setBrightness(["set", "5%+"], "brightness"); }
function brightnessDown(): void { root.setBrightness(["-n", "1", "set", "5%-"], "brightness"); }
function kbdUp(): void { root.setBrightness(["-d", "smc::kbd_backlight", "set", "10%+"], "keyboard"); }
function kbdDown(): void { root.setBrightness(["-d", "smc::kbd_backlight", "set", "10%-"], "keyboard"); }
}
// ── Night light: quickshell owns the schedule, the hyprsunset
// daemon just applies the gamma (hyprctl hyprsunset …).
// sunrise/sunset default to 7:00/21:00 and are replaced with
// real times by the bar's open-meteo weather fetch.
property int sunriseMins: 7 * 60
property int sunsetMins: 21 * 60
readonly property var nightlight: nlState
FileView {
id: nlFile
path: Quickshell.env("HOME") + "/.local/state/quickshell-nightlight.json"
printErrors: false
adapter: JsonAdapter {
id: nlState
property bool autoOn: true
property real warmth: 0.5 // 0 = 6500K … 1 = 2500K
}
onLoaded: root.applyNightlight()
onLoadFailed: writeAdapter() // first run: create with defaults
}
function setNightlight(autoOn, warmth) {
nlState.autoOn = autoOn;
nlState.warmth = warmth;
applyNightlight();
nlFile.writeAdapter();
}
function applyNightlight() {
let w = nlState.warmth;
if (nlState.autoOn) {
let now = new Date();
let mins = now.getHours() * 60 + now.getMinutes();
if (mins >= sunriseMins && mins < sunsetMins) w = 0; // daytime
}
nlApply.command = w < 0.02
? ["hyprctl", "hyprsunset", "identity"]
: ["hyprctl", "hyprsunset", "temperature", String(Math.round(6500 - w * 4000))];
nlApply.running = true;
}
Process { id: nlApply }
Timer {
// Re-assert once a minute: crosses the sunrise/sunset
// boundaries and heals a hyprsunset daemon that (re)started
// after us.
interval: 60000; running: true; repeat: true; triggeredOnStart: true
onTriggered: root.applyNightlight()
}
NotificationServer {
id: _notifServer
bodySupported: true
actionsSupported: true
imageSupported: true
persistenceSupported: true
keepOnReload: true
onNotification: (notification) => {
notification.tracked = true;
root.latestNotification = notification;
root.notificationReceived();
}
}
// Wallpaper — replaces the hyprpaper daemon.
Variants {
model: Quickshell.screens
PanelWindow {
required property var modelData
screen: modelData
WlrLayershell.layer: WlrLayer.Background
exclusionMode: ExclusionMode.Ignore
anchors { top: true; bottom: true; left: true; right: true }
color: "black"
Image {
anchors.fill: parent
source: "file://" + Quickshell.env("HOME") + "/.local/share/backgrounds/wallpaper.png"
cache: false // same-URL pixmap cache survives soft reload
fillMode: Image.PreserveAspectCrop
}
}
}
Variants {
model: Quickshell.screens
Bar {
notifServer: _notifServer
shellRoot: root
}
}
}
'';
};
"quickshell/Bar.qml" = {
onChange = qsRestart;
text = ''
import Quickshell
import Quickshell.Hyprland
import Quickshell.Wayland
import Quickshell.Services.SystemTray
import Quickshell.Services.Notifications
import Quickshell.Services.Pipewire
import Quickshell.Services.UPower
import Quickshell.Services.Mpris
import Quickshell.Widgets
import Quickshell.Io
import QtQuick
import QtQml.Models
import Qt5Compat.GraphicalEffects
PanelWindow {
id: bar
required property var modelData
required property NotificationServer notifServer
required property var shellRoot
screen: modelData
WlrLayershell.namespace: "quickshell-bar"
// OnDemand + HyprlandFocusGrab is the working combination
// (caelestia's): the grab redirects focus to this window and
// OnDemand lets the layer surface accept it. Exclusive fights
// the grab — it self-clears and instantly closes the panel.
WlrLayershell.keyboardFocus: (launcherPanel.open || bar.activeDropdown !== null) && !bar.screenshotPinned ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
// Vertical bar on the left edge. The surface still covers the
// whole screen (the frame band and every panel are drawn into
// it); only the reserved strip is the bar itself.
anchors {
top: true
left: true
bottom: true
}
implicitWidth: bar.screen.width
exclusiveZone: Theme.barWidth
color: "transparent"
mask: Region {
item: barBgRect
Region {
x: activeDropdown ? activeDropdown.x : 0
y: activeDropdown ? activeDropdown.y : 0
width: activeDropdown && activeDropdown.visible ? activeDropdown.width : 0
height: activeDropdown && activeDropdown.visible ? activeDropdown.height : 0
}
Region {
x: toastItem.visible ? toastItem.x : 0
y: toastItem.visible ? toastItem.y : 0
width: toastItem.visible ? toastItem.width : 0
height: toastItem.visible ? toastItem.height : 0
}
Region {
x: launcherPanel.visible ? launcherPanel.x : 0
y: launcherPanel.visible ? launcherPanel.y : 0
width: launcherPanel.visible ? launcherPanel.width : 0
height: launcherPanel.visible ? launcherPanel.height : 0
}
}
Item {
id: barBgRect
anchors.top: parent.top
anchors.left: parent.left
anchors.bottom: parent.bottom
width: Theme.barWidth
}
// Register the primary bar so shell.qml's IPC handler can
// reach the session menu.
Component.onCompleted: {
if (bar.screen === Quickshell.screens[0])
bar.shellRoot.mainBar = bar;
}
function toggleSession() {
bar.toggleDropdown(sessionMenu, function() {
let pos = powerWidget.mapToItem(bar.contentItem, 0, powerWidget.height / 2);
sessionMenu.dropdownY = pos.y;
});
}
function toggleLauncher() {
launcherPanel.toggle();
}
// ── Shared base text types: default the shell's two fonts so
// no widget repeats `font.family`. Size/colour/weight are
// overridable per use (these are just the common defaults).
component SText: Text {
color: Theme.base05
font.family: Theme.fontFamily
font.pixelSize: 13
}
component SIcon: Text {
color: Theme.base05
font.family: Theme.iconFont
font.pixelSize: 16
// No variableAxes here: Lucide.ttf is a static font, so
// FILL/GRAD/opsz (Material Symbols axes) have nothing to
// act on. Stroke weight is fixed by the design.
}
// ── BarSep: extra whitespace between widget groups. Groups are
// separated by air, not by lines — a drawn rule read as clutter
// in a 46px column.
component BarSep: Item {
width: Theme.barWidth
height: 12
}
// ── GlanceStat: a bar-column stat — clock-sized value over a
// faded 9px caption (the server glance rows).
component GlanceStat: Column {
property alias value: _gsV.text
property alias caption: _gsC.text
property color valueColor: Theme.base05
anchors.horizontalCenter: parent.horizontalCenter
spacing: 0
SText {
id: _gsV
anchors.horizontalCenter: parent.horizontalCenter
font.pixelSize: 15
font.weight: Font.Medium
color: parent.valueColor
}
SText {
id: _gsC
anchors.horizontalCenter: parent.horizontalCenter
font.pixelSize: 9
color: Theme.base03
}
}
// ── VolIcon: a slider's volume glyph that toggles its audio
// node's mute on click. Glyph reflects the mute state; pair it
// with a fill that greys when `audioNode.muted`.
component VolIcon: SIcon {
property var audioNode: null
// Same mapping as the bar widget, so the slider's glyph
// tracks its level and not just the mute flag.
text: !audioNode ? "volume-2"
: audioNode.muted ? "volume-x"
: audioNode.volume >= 0.5 ? "volume-2"
: audioNode.volume > 0 ? "volume-1"
: "volume"
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: if (audioNode) audioNode.muted = !audioNode.muted
}
}
// ── HoverRow: a rounded clickable row that owns the shared
// base02 hover-fade + pointer cursor. Drop content inside and
// handle `onClicked`; override `radius` for non-radiusTiny rows.
component HoverRow: Rectangle {
default property alias rowData: _hrContent.data
signal clicked()
radius: Theme.radiusTiny
color: _hrMa.containsMouse ? Theme.base02 : Theme.base02t
Behavior on color { ColorAnimation { duration: Theme.animFade } }
Item { id: _hrContent; anchors.fill: parent }
MouseArea {
id: _hrMa
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: parent.clicked()
}
}
// ── Card: the rounded base01 section surface used by every
// dropdown. Children flow into a padded auto-height column,
// so callers just set `width` and drop content in.
component Card: Rectangle {
default property alias cardData: _cardCol.data
property alias cardSpacing: _cardCol.spacing
radius: Theme.radiusCard
color: Theme.cardBg
implicitHeight: _cardCol.height + 2 * Theme.cardPad
Column {
id: _cardCol
anchors.top: parent.top
anchors.topMargin: Theme.cardPad
anchors.horizontalCenter: parent.horizontalCenter
width: parent.width - 2 * Theme.cardPad
spacing: 8
}
}
// ── PillSlider: rounded track + fill + knob with a full-height
// invisible hit area. `value` is 0..1; `moved(v)` fires on drag.
// Knob diameter derives from the track, so the small app-stream
// variants scale with just a trackH override.
component PillSlider: Item {
property real value: 0
property color fillColor: Theme.base0D
property real trackH: 8
readonly property real knobD: trackH + 8
signal moved(real v)
height: 22
Rectangle {
anchors.verticalCenter: parent.verticalCenter
width: parent.width
height: parent.trackH
radius: parent.trackH / 2
color: Theme.base02
}
Rectangle {
anchors.verticalCenter: parent.verticalCenter
width: parent.value > 0 ? Math.max(parent.trackH, parent.value * parent.width) : 0
height: parent.trackH
radius: parent.trackH / 2
color: parent.fillColor
Behavior on width { NumberAnimation { duration: 80 } }
}
Rectangle {
width: parent.knobD
height: parent.knobD
radius: parent.knobD / 2
anchors.verticalCenter: parent.verticalCenter
x: Math.max(0, Math.min(parent.width - parent.knobD, parent.value * parent.width - parent.knobD / 2))
color: Theme.base05
Behavior on x { NumberAnimation { duration: 80 } }
}
MouseArea {
anchors.fill: parent
function set(mouse) { parent.moved(Math.max(0, Math.min(1, mouse.x / width))); }
onPressed: (mouse) => set(mouse)
onPositionChanged: (mouse) => { if (pressed) set(mouse); }
}
}
// ── ToggleSwitch: small on/off pill.
component ToggleSwitch: Rectangle {
property bool on: false
signal toggled(bool v)
width: 34; height: 18; radius: 9
color: on ? Theme.base0D : Theme.base02
Behavior on color { ColorAnimation { duration: Theme.animFade } }
Rectangle {
width: 12; height: 12; radius: 6
anchors.verticalCenter: parent.verticalCenter
x: parent.on ? parent.width - width - 3 : 3
color: Theme.base05
Behavior on x { NumberAnimation { duration: Theme.animContent; easing.type: Easing.OutExpo } }
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: parent.toggled(!parent.on)
}
}
// ── NightlightCard: colour-temperature control backed by
// shell.qml's night-light state. Auto on: follows
// sunrise/sunset and the slider sets the *warmest* colour the
// night reaches. Auto off: the slider is the temperature, now.
component NightlightCard: Card {
id: _nlc
cardSpacing: 6
property var nl: bar.shellRoot.nightlight
Item {
width: parent.width
height: 20
Row {
spacing: 6
anchors.verticalCenter: parent.verticalCenter
SIcon { anchors.verticalCenter: parent.verticalCenter; text: "moon"; font.pixelSize: 15 }
SText { anchors.verticalCenter: parent.verticalCenter; text: "Night Light"; font.weight: Font.Medium }
}
Row {
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
spacing: 6
SText { anchors.verticalCenter: parent.verticalCenter; text: "Auto"; color: Theme.base04; font.pixelSize: 11 }
ToggleSwitch {
anchors.verticalCenter: parent.verticalCenter
on: _nlc.nl.autoOn
onToggled: (v) => bar.shellRoot.setNightlight(v, _nlc.nl.warmth)
}
}
}
SText {
text: _nlc.nl.autoOn ? "Warmest colour (at night)" : "Colour temperature"
color: Theme.base04
font.pixelSize: 10
}
Row {
width: parent.width
spacing: 8
PillSlider {
width: parent.width - nlTempLabel.width - 8
anchors.verticalCenter: parent.verticalCenter
value: _nlc.nl.warmth
fillColor: Theme.warn
onMoved: (v) => bar.shellRoot.setNightlight(_nlc.nl.autoOn, v)
}
SText {
id: nlTempLabel
width: 38
text: Math.round(6500 - _nlc.nl.warmth * 4000) + "K"
font.pixelSize: 11
horizontalAlignment: Text.AlignRight
anchors.verticalCenter: parent.verticalCenter
}
}
}
// ── NotifContent: summary + body + action chips for one
// notification, shared by the calendar list and the toast.
// Callers supply the container, dismiss button and sizes.
component NotifContent: Column {
id: _nc
property var notif
property int summarySize: 12
property int bodySize: 11
property int bodyLines: 3
property color chipBg: Theme.base01
property color chipBgHover: Theme.base02
property color chipBorder: Theme.base02
signal actionInvoked()
spacing: 2
// App header: icon + name of the sending app, when known.
Row {
width: parent.width
spacing: 4
visible: _nc.notif && (_nc.notif.appName !== "" || _appIcon.source != "")
Image {
id: _appIcon
width: 14; height: 14
sourceSize.width: 14; sourceSize.height: 14
anchors.verticalCenter: parent.verticalCenter
source: _nc.notif && _nc.notif.appIcon ? Quickshell.iconPath(_nc.notif.appIcon, true) : ""
visible: source != ""
}
SText {
anchors.verticalCenter: parent.verticalCenter
text: _nc.notif ? _nc.notif.appName : ""
color: Theme.base04
font.pixelSize: 10
elide: Text.ElideRight
width: parent.width - (_appIcon.visible ? 18 : 0)
}
}
SText {
width: parent.width
text: _nc.notif ? (_nc.notif.summary || _nc.notif.appName) : ""
font.pixelSize: _nc.summarySize
font.weight: Font.Medium
elide: Text.ElideRight
}
SText {
width: parent.width
text: _nc.notif ? (_nc.notif.body || "") : ""
color: Theme.base04
font.pixelSize: _nc.bodySize
elide: Text.ElideRight
maximumLineCount: _nc.bodyLines
wrapMode: Text.Wrap
// ponytail: hyprshot's body is a noisy file path; the
// "Screenshot saved" summary + the preview say enough.
visible: text !== "" && !(_nc.notif && _nc.notif.appName === "Hyprshot")
}
Row {
spacing: 4
visible: _nc.notif && _nc.notif.actions.length > 0
Repeater {
model: _nc.notif ? _nc.notif.actions : []
Rectangle {
required property var modelData
width: _at.width + 12
height: _at.height + 6
radius: Theme.radiusTiny
color: _ama.containsMouse ? _nc.chipBgHover : _nc.chipBg
Behavior on color { ColorAnimation { duration: Theme.animFade } }
border.width: 1
border.color: _nc.chipBorder
SText { id: _at; anchors.centerIn: parent; text: modelData.text; font.pixelSize: 10 }
MouseArea {
id: _ama
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: { modelData.invoke(); _nc.actionInvoked(); }
}
}
}
}
}
// ── Shell chrome: bar, frame, panel and toast rendered as
// ONE signed-distance field (caelestia-style). Surfaces merge
// via circular smooth-min, and the 2px border is the distance
// band just inside the boundary — borders flow through every
// junction fillet by construction, so all of the previous
// ears / border-gaps / melt geometry lives in the math now.
ShaderEffect {
anchors.fill: parent
// Panels grow rightward out of the bar column, so the
// cross-axis is now vertical: the 8px inset that used to
// be left/right is top/bottom.
readonly property real rawTop: chrome.y + 8
readonly property real rawBottom: chrome.y + chrome.height - 8
// How deep a surface buries itself in the band it merges
// with. This MUST be >= the panel corner radius. A rounded
// corner curves away from the edge over exactly panelR
// pixels, so burying less than that leaves part of the
// curve sticking out past the joint: the outline pinches in
// where the corner turns, then the fillet bulges back out —
// the "ballooned at the connection point" look. Bury the
// whole corner and only straight edges reach the junction,
// which is what smin is meant to fillet.
readonly property real meltInto: Theme.radius
readonly property real meltTop: Theme.frameWidth - meltInto
readonly property real meltBot: bar.height - Theme.frameWidth + meltInto
// Trigger distance is about proximity, not burial depth.
readonly property real snapDist: Theme.panelGap + 4
readonly property real panelTop: rawTop <= Theme.frameWidth + snapDist
? meltTop : rawTop
readonly property real panelBottom: rawBottom >= bar.height - Theme.frameWidth - snapDist
? meltBot : rawBottom
// Left edge lands at (barWidth − meltInto): the surface
// buries a full corner radius inside the bar column.
readonly property real surfLeftX: Theme.barWidth - meltInto / 2
property vector4d cutout: Qt.vector4d(
(Theme.barWidth + bar.width - Theme.frameWidth) / 2,
bar.height / 2,
(bar.width - Theme.frameWidth - Theme.barWidth) / 2,
bar.height / 2 - Theme.frameWidth)
property vector4d panel: chrome.visible
? Qt.vector4d(surfLeftX + chrome.width / 2, (panelTop + panelBottom) / 2,
meltInto / 2 + chrome.width / 2, (panelBottom - panelTop) / 2)
: Qt.vector4d(0, 0, 0, 0)
// Toast sits under the top frame band and melts up into it.
readonly property real toastBot: toastItem.y + 8 + _toastRect.height
property vector4d toast: toastItem.visible && _toastRect.width > 0.5
? Qt.vector4d(surfLeftX + _toastRect.width / 2, (meltTop + toastBot) / 2,
meltInto / 2 + _toastRect.width / 2, (toastBot - meltTop) / 2)
: Qt.vector4d(0, 0, 0, 0)
// The launcher is the one surface that stays put: it still
// grows from the bottom frame band at screen centre.
readonly property real launchBot: bar.height - Theme.frameWidth + meltInto
property vector4d launcher: launcherPanel.visible
? Qt.vector4d(launcherPanel.x + launcherPanel.width / 2, (launcherPanel.y + launchBot) / 2,
launcherPanel.width / 2, (launchBot - launcherPanel.y) / 2)
: Qt.vector4d(0, 0, 0, 0)
property vector4d fillColor: Qt.vector4d(Theme.barBg.r, Theme.barBg.g, Theme.barBg.b, Theme.barBg.a)
property vector4d borderColor: Qt.vector4d(Theme.base03.r, Theme.base03.g, Theme.base03.b, 1)
property vector2d res: Qt.vector2d(width, height)
property real cutoutR: Theme.radius
property real panelR: Theme.radius
// Half the corner radius: the fillet scales with the
// one rounding knob instead of drifting out of step.
property real meltK: Theme.radius / 2
property real borderW: Theme.borderWidth
fragmentShader: "file://${chromeShader}"
}
// ── Launcher: rises out of the bottom frame edge (Super+R).
// Lives in the SDF field, so it melts into the frame and its
// height morphs live as results filter. Opens on a category
// browser; typing switches to fuzzy search. Results live in a
// ListModel that's DIFFED against each new filter pass, so
// surviving rows slide to their new rank (ListView move
// transitions) instead of the whole list repopulating.
Item {
id: launcherPanel
property bool open: false
readonly property real panelW: 520
// Cap the visible list at 8 rows; longer lists scroll.
readonly property real listCapH: 8 * 56
property real targetH: launcherCol.height + 24
// Both axes animate: expands from a small point on the
// bottom edge (like the top dropdowns' stub seed).
property real openH: open ? targetH : 0
property real openW: open ? panelW : 80
Behavior on openH {
NumberAnimation { duration: Theme.animMorph; easing.type: Easing.OutExpo }
}
Behavior on openW {
NumberAnimation { duration: Theme.animMorph; easing.type: Easing.OutExpo }
}
x: Math.round((bar.width - openW) / 2)
y: bar.height - Theme.frameWidth - openH
width: openW
height: openH
visible: openH > 0.5
property string activeCat: ""
property var entries: []
readonly property var catDefs: [
{ key: "All", label: "All apps", icon: "layout-grid" },
{ key: "Network", label: "Internet", icon: "globe" },
{ key: "Development", label: "Development", icon: "code" },
{ key: "Game", label: "Games", icon: "gamepad-2" },
{ key: "AudioVideo", label: "Media", icon: "circle-play" },
{ key: "Graphics", label: "Graphics", icon: "palette" },
{ key: "Office", label: "Office", icon: "file-text" },
{ key: "System", label: "System", icon: "monitor" },
{ key: "Utility", label: "Utilities", icon: "blocks" },
{ key: "Other", label: "Other", icon: "ellipsis" }
]
function inCat(a, key) {
if (key === "All") return true;
const c = a.categories;
if (key === "System") return c.indexOf("System") !== -1 || c.indexOf("Settings") !== -1;
if (key === "Other") {
const main = ["Network", "Development", "Game", "AudioVideo", "Graphics", "Office", "System", "Settings", "Utility"];
for (let i = 0; i < main.length; i++)
if (c.indexOf(main[i]) !== -1) return false;
return true;
}
return c.indexOf(key) !== -1;
}
function catCount(key) {
return DesktopEntries.applications.values.filter(a => !a.noDisplay && inCat(a, key)).length;
}
function catLabel(key) {
const d = catDefs.find(x => x.key === key);
return d ? d.label : key;
}
function toggle() {
open = !open;
if (open) {
searchInput.text = "";
activeCat = "";
refilter();
searchInput.forceActiveFocus();
}
}
function activate(item) {
if (!item) return;
item.execute();
open = false;
}
function refilter() {
let q = searchInput.text.toLowerCase().trim();
let apps = DesktopEntries.applications.values.filter(a => !a.noDisplay);
let list;
if (q === "") {
if (activeCat === "") {
list = [];
} else {
list = apps.filter(a => inCat(a, activeCat));
list.sort((a, b) => a.name.localeCompare(b.name));
}
} else {
let scored = [];
for (let i = 0; i < apps.length; i++) {
let s = score(apps[i].name, apps[i].genericName + " " + apps[i].comment, q);
if (s > 0) scored.push({ app: apps[i], s: s });
}
scored.sort((a, b) => b.s - a.s || a.app.name.localeCompare(b.app.name));
list = scored.slice(0, 12).map(x => x.app);
}
entries = list;
syncModel(list);
launcherList.currentIndex = list.length > 0 ? 0 : -1;
}
// Diff the new result list into the ListModel instead of
// resetting it: surviving rows MOVE (animated), dropped
// rows fade out, new rows fade in. A plain array model
// would rebuild every delegate on each keystroke.
function syncModel(list) {
const m = launcherModel;
const ids = {};
for (let i = 0; i < list.length; i++) ids[list[i].id] = true;
for (let i = m.count - 1; i >= 0; i--)
if (!ids[m.get(i).appId]) m.remove(i);
for (let i = 0; i < list.length; i++) {
const a = list[i];
let j = -1;
for (let k = i; k < m.count; k++)
if (m.get(k).appId === a.id) { j = k; break; }
if (j === -1) {
m.insert(i, {
appId: a.id,
name: a.name,
icon: Quickshell.iconPath(a.icon, true) || "",
desc: a.genericName !== "" ? a.genericName : a.comment
});
} else if (j !== i) {
m.move(j, i, 1);
}
}
while (m.count > list.length) m.remove(m.count - 1);
}
ListModel { id: launcherModel }
function score(name, extra, q) {
let n = name.toLowerCase();
if (n.startsWith(q)) return 5;
if (n.includes(" " + q)) return 4;
if (n.includes(q)) return 3;
if (extra && extra.toLowerCase().includes(q)) return 2;
// Fuzzy: q as an in-order subsequence of n (vktop →
// vesktop); fewer skipped characters scores higher.
let qi = 0, gaps = 0, last = -1;
for (let i = 0; i < n.length && qi < q.length; i++) {
if (n[i] === q[qi]) {
if (last >= 0) gaps += i - last - 1;
last = i;
qi++;
}
}
if (qi === q.length) return 1 / (1 + gaps);
return 0;
}
// Content anchored to the bottom so the grow reveals upward
Item {
anchors.fill: parent
clip: true
opacity: launcherPanel.open ? 1 : 0
Behavior on opacity {
NumberAnimation { duration: Theme.animContent; easing.type: Easing.OutCubic }
}
Column {
id: launcherCol
anchors.bottom: parent.bottom
anchors.bottomMargin: 12
anchors.horizontalCenter: parent.horizontalCenter
width: launcherPanel.panelW - 24
spacing: 8
// Category-browse breadcrumb: back to the grid.
HoverRow {
width: parent.width
height: 30
visible: launcherPanel.activeCat !== "" && searchInput.text === ""
onClicked: { launcherPanel.activeCat = ""; launcherPanel.refilter(); }
Row {
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 10
spacing: 8
SIcon {
anchors.verticalCenter: parent.verticalCenter
text: "arrow-left"
font.pixelSize: 16
color: Theme.base04
}
SText {
anchors.verticalCenter: parent.verticalCenter
text: launcherPanel.catLabel(launcherPanel.activeCat)
font.weight: Font.Medium
}
SText {
anchors.verticalCenter: parent.verticalCenter
text: launcherPanel.entries.length + " apps"
font.pixelSize: 11
color: Theme.base04
}
}
}
// Results sit in a base01 card segment, like the
// notification list and the other dropdowns.
Rectangle {
width: parent.width
height: Math.min(launcherList.contentHeight, launcherPanel.listCapH) + 2 * Theme.cardPad
radius: Theme.radiusCard
color: Theme.cardBg
visible: launcherList.count > 0
ListView {
id: launcherList
anchors.fill: parent
anchors.margins: Theme.cardPad
clip: true
interactive: contentHeight > height
model: launcherModel
highlight: Rectangle {
radius: Theme.radiusSmall
color: Theme.base02
}
highlightMoveDuration: 200
highlightMoveVelocity: -1
highlightResizeDuration: 0
move: Transition {
NumberAnimation { properties: "x,y"; duration: Theme.animContent; easing.type: Easing.OutExpo }
}
displaced: Transition {
NumberAnimation { properties: "x,y"; duration: Theme.animContent; easing.type: Easing.OutExpo }
}
add: Transition {
NumberAnimation { property: "opacity"; from: 0; to: 1; duration: Theme.animContent }
NumberAnimation { property: "scale"; from: 0.92; to: 1; duration: Theme.animContent; easing.type: Easing.OutExpo }
}
remove: Transition {
NumberAnimation { property: "opacity"; to: 0; duration: 100 }
}
delegate: Item {
required property string appId
required property string name
required property string icon
required property string desc
required property int index
width: launcherList.width
height: 56
Row {
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 12
spacing: 12
Image {
visible: source != ""
anchors.verticalCenter: parent.verticalCenter
width: 32
height: 32
sourceSize.width: 32
sourceSize.height: 32
source: icon
}
Column {
anchors.verticalCenter: parent.verticalCenter
width: launcherList.width - 68
spacing: 1
SText {
width: parent.width
text: name
font.pixelSize: 14
font.weight: Font.Medium
elide: Text.ElideRight
}
SText {
width: parent.width
visible: text !== ""
text: desc
font.pixelSize: 11
color: Theme.base04
elide: Text.ElideRight
}
}
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onEntered: launcherList.currentIndex = index
onClicked: launcherPanel.activate(launcherPanel.entries[index])
}
}
}
}
// Category grid: the browse view when nothing is
// typed and no category is active.
Rectangle {
width: parent.width
height: catGrid.height + 2 * Theme.cardPad
radius: Theme.radiusCard
color: Theme.cardBg
visible: searchInput.text === "" && launcherPanel.activeCat === ""
Grid {
id: catGrid
anchors.top: parent.top
anchors.topMargin: Theme.cardPad
anchors.horizontalCenter: parent.horizontalCenter
width: parent.width - 2 * Theme.cardPad
columns: 2
columnSpacing: 8
rowSpacing: 8
Repeater {
model: launcherPanel.catDefs
HoverRow {
required property var modelData
width: (catGrid.width - catGrid.columnSpacing) / 2
height: 48
onClicked: { launcherPanel.activeCat = modelData.key; launcherPanel.refilter(); }
Row {
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 12
spacing: 10
SIcon {
anchors.verticalCenter: parent.verticalCenter
text: modelData.icon
font.pixelSize: 20
color: Theme.base0D
}
Column {
anchors.verticalCenter: parent.verticalCenter
SText {
text: modelData.label
font.weight: Font.Medium
}
SText {
text: launcherPanel.catCount(modelData.key) + " apps"
font.pixelSize: 10
color: Theme.base04
}
}
}
}
}
}
}
Rectangle {
width: parent.width
height: 44
radius: Theme.radiusCard
color: Theme.cardBg
SIcon {
id: searchIcon
anchors.left: parent.left
anchors.leftMargin: 12
anchors.verticalCenter: parent.verticalCenter
text: "search"
color: Theme.base04
font.pixelSize: 18
}
TextInput {
id: searchInput
anchors.left: searchIcon.right
anchors.leftMargin: 10
anchors.right: parent.right
anchors.rightMargin: 12
anchors.verticalCenter: parent.verticalCenter
color: Theme.base05
font.family: Theme.fontFamily
font.pixelSize: 14
clip: true
onTextChanged: launcherPanel.refilter()
Keys.onEscapePressed: launcherPanel.open = false
Keys.onUpPressed: launcherList.currentIndex = Math.max(0, launcherList.currentIndex - 1)
Keys.onDownPressed: launcherList.currentIndex = Math.min(launcherPanel.entries.length - 1, launcherList.currentIndex + 1)
Keys.onTabPressed: launcherList.currentIndex = (launcherList.currentIndex + 1) % Math.max(1, launcherPanel.entries.length)
Keys.onReturnPressed: launcherPanel.activate(launcherPanel.entries[launcherList.currentIndex])
Keys.onEnterPressed: launcherPanel.activate(launcherPanel.entries[launcherList.currentIndex])
}
SText {
anchors.left: searchIcon.right
anchors.leftMargin: 10
anchors.verticalCenter: parent.verticalCenter
visible: searchInput.text === ""
text: launcherPanel.activeCat === "" ? "Search apps" : "Search all apps"
color: Theme.base03
font.pixelSize: 14
}
}
}
}
}
// Click-outside dismissal for every panel — the launcher,
// session menu AND the bar dropdowns. Clicking into another
// window (or anywhere outside the bar) clears the grab and
// closes whatever is open. Suspended while screenshotPinned so
// slurp can grab input without dismissing the menu.
HyprlandFocusGrab {
active: (launcherPanel.open || bar.activeDropdown !== null) && !bar.screenshotPinned
windows: [bar]
onCleared: {
if (bar.screenshotPinned) return;
launcherPanel.open = false;
bar.closeAllDropdowns();
}
}
property var activeDropdown: null
// Set by the screenshot keybind (via IPC) to hold menus open
// while a region screenshot runs. Watchdog unpins if the
// bracketing unpin call is ever missed.
property bool screenshotPinned: false
Timer {
id: _pinWatchdog
interval: 30000
onTriggered: bar.screenshotPinned = false
}
function setScreenshotPin(v) {
screenshotPinned = v;
if (v) _pinWatchdog.restart(); else _pinWatchdog.stop();
}
function closeAllDropdowns() {
if (activeDropdown && activeDropdown.visible) {
activeDropdown.animateClose();
}
}
// Preview image for a notification: its image hint, else a
// file-path appIcon (e.g. hyprshot's saved shot). "" = none.
function notifPreviewSource(notif) {
if (!notif) return "";
if (notif.image && notif.image !== "") return notif.image;
let a = notif.appIcon || "";
if (a.startsWith("file://")) return a;
if (a.startsWith("/")) return "file://" + a;
return "";
}
function toggleDropdown(dd, setupFn) {
if (dd.visible && !dd.closing) {
dd.animateClose();
} else {
if (setupFn) setupFn();
// Opening from fully closed: seed the chrome as a
// small stub on the widget so the panel grows out of
// it (reviving mid-close morphs back instead).
// width, not height: the growth axis is horizontal now.
// chrome.height is tH, which is never 0, so testing it
// meant this never fired and the panel never seeded.
if (!activeDropdown && chrome.width < 0.5) {
chrome.seedFromButton(dd);
}
// Retarget the chrome before closing the previous
// dropdown so it morphs instead of dipping closed.
const prev = activeDropdown;
activeDropdown = dd;
if (prev && prev !== dd && prev.visible) {
prev.animateClose();
}
if (dd.closing) {
dd.revive();
} else {
dd.visible = true;
}
}
}
// SystemClock ticks on the minute boundary instead of a 1 Hz
// Timer; the calendar reads clockText.now too.
SystemClock {
id: sysClock
precision: SystemClock.Minutes
}
// ── Top cluster: logo, clock, workspaces — the three groups
// that belong to "this machine, right now", split by hairlines.
// The server glance is NOT here: it anchors above the bottom
// cluster instead, so adding a workspace grows this column
// downward into empty space rather than shoving the stats.
Column {
id: barTop
anchors.top: parent.top
anchors.topMargin: 12
anchors.horizontalCenter: barBgRect.horizontalCenter
spacing: 12
// NixOS snowflake, flattened to the theme accent with the
// same hidden-Image + ColorOverlay trick the tray uses
// (no icon font ships a NixOS logo).
Item {
width: Theme.barWidth
height: 24
Image {
id: nixLogoImg
anchors.centerIn: parent
width: 22
height: 22
source: "file://" + Commands.nixLogo
sourceSize.width: 22
sourceSize.height: 22
smooth: true
visible: false
}
ColorOverlay {
anchors.fill: nixLogoImg
source: nixLogoImg
color: Theme.base0D
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: bar.toggleLauncher()
}
}
BarSep {}
// Clock — HH over mm; "HH:mm" does not fit a 46px column.
Item {
id: clockText
width: Theme.barWidth
height: clockCol.height
property date now: sysClock.date
Column {
id: clockCol
anchors.horizontalCenter: parent.horizontalCenter
spacing: 0
SText {
anchors.horizontalCenter: parent.horizontalCenter
text: clockText.now.toLocaleTimeString(Qt.locale(), "HH")
font.pixelSize: 15
font.weight: Font.Medium
}
SText {
anchors.horizontalCenter: parent.horizontalCenter
text: clockText.now.toLocaleTimeString(Qt.locale(), "mm")
font.pixelSize: 15
font.weight: Font.Medium
color: Theme.base04
}
}
// Anchors to the clock like every other dropdown
// anchors to its widget; the clamp in BarDropdown
// pulls it back on screen when it overhangs.
function openCalendar() {
bar.toggleDropdown(calPopup, function() {
let pos = clockText.mapToItem(bar.contentItem, 0, clockText.height / 2);
calPopup.dropdownY = pos.y;
calPopup.resetView();
});
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onClicked: clockText.openCalendar()
onEntered: {
if (bar.activeDropdown) {
if (bar.activeDropdown !== calPopup) clockText.openCalendar();
}
}
}
}
BarSep {}
// Workspace dots: accent pill for the focused workspace,
// dim dots otherwise. Stacked vertically now, so the
// focused pill grows along HEIGHT rather than width.
Column {
spacing: 4
Repeater {
model: Hyprland.workspaces
Item {
id: wsItem
required property var modelData
visible: modelData.id > 0
width: Theme.barWidth
height: visible ? dot.height + 6 : 0
Rectangle {
id: dot
anchors.centerIn: parent
width: 6
height: wsItem.modelData.focused ? 18 : 6
radius: 3
color: wsItem.modelData.focused ? Theme.base0D
: wsMa.containsMouse ? Theme.base04 : Theme.base03
Behavior on height {
NumberAnimation { duration: 200; easing.type: Easing.OutExpo }
}
Behavior on color { ColorAnimation { duration: Theme.animFade } }
}
MouseArea {
id: wsMa
anchors.fill: parent
hoverEnabled: true
onClicked: wsItem.modelData.activate()
}
}
}
}
}
// ── Mid cluster: the server glance, pinned just above the
// bottom cluster. Its own anchor (not a barTop child) is the
// whole point: workspace count then changes nothing here.
//
// Server monitor: one persistent SSH streaming `top -b`
// from the mediaserver (2s ticks, parsed line by line —
// no per-poll reconnects) plus a streaming ping to the
// router. Glance = CPU/RAM numbers + ping ms; click
// opens the btop-style dropdown.
Item {
id: srvWidget
width: Theme.barWidth
height: srvGlanceCol.height
anchors.horizontalCenter: barBgRect.horizontalCenter
anchors.bottom: barBottom.top
anchors.bottomMargin: 20
// Fades out while the OSD takes this slot.
opacity: osdItem.shown ? 0 : 1
Behavior on opacity {
NumberAnimation { duration: Theme.animContent }
}
property bool connected: false
property real cpu: 0
property real memUsed: 0 // GiB
property real memTotal: 0
property real pingMs: -1
property string uptime: ""
property string load: ""
property var procs: []
property int tempC: -1
property real rxBps: 0
property real txBps: 0
function fmtRate(bps) {
const b = bps * 8;
if (b >= 1e9) return (b / 1e9).toFixed(2) + " Gb/s";
if (b >= 1e6) return (b / 1e6).toFixed(1) + " Mb/s";
if (b >= 1e3) return Math.round(b / 1e3) + " Kb/s";
return Math.round(b) + " b/s";
}
// Split variants for the bar glance: number and unit
// live on separate lines, so both stay narrow.
function rateVal(bps) {
const b = bps * 8;
if (b >= 1e9) return (b / 1e9).toFixed(1);
if (b >= 1e7) return Math.round(b / 1e6).toString();
if (b >= 1e6) return (b / 1e6).toFixed(1);
return Math.round(b / 1e3).toString();
}
function rateUnit(bps) {
const b = bps * 8;
if (b >= 1e9) return "gb/s";
if (b >= 1e6) return "mb/s";
return "kb/s";
}
property var _procsPending: []
property bool _collecting: false
function _parseLine(line) {
if (line.indexOf("@STAT ") === 0) {
const t = line.match(/temp=(\d+)/);
if (t) tempC = parseInt(t[1]);
const rx = line.match(/rxbps=(-?\d+)/);
if (rx) rxBps = Math.max(0, parseInt(rx[1]));
const tx = line.match(/txbps=(-?\d+)/);
if (tx) txBps = Math.max(0, parseInt(tx[1]));
return;
}
if (line.indexOf("top - ") === 0) {
if (_collecting) procs = _procsPending;
_collecting = false;
const up = line.match(/up\s+(.*?),\s*\d+\s+users?,/);
if (up) uptime = up[1].replace(/\s+/g, " ");
const la = line.match(/load average:\s*(.*)$/);
if (la) load = la[1];
return;
}
if (line.indexOf("%Cpu(s)") === 0) {
const m = line.match(/([\d.]+)\s+id/);
if (m) { cpu = Math.max(0, 100 - parseFloat(m[1])); connected = true; }
return;
}
const mem = line.match(/^(\S+) Mem\s*:\s*([\d.]+)\s+total,\s*[\d.]+\s+free,\s*([\d.]+)\s+used/);
if (mem) {
const div = mem[1] === "KiB" ? 1048576 : mem[1] === "MiB" ? 1024 : 1;
memTotal = parseFloat(mem[2]) / div;
memUsed = parseFloat(mem[3]) / div;
return;
}
if (/^\s*PID\s/.test(line)) { _collecting = true; _procsPending = []; return; }
if (_collecting) {
const f = line.trim().split(/\s+/);
if (f.length >= 12) {
_procsPending.push({ pid: f[0], cpu: parseFloat(f[8]), mem: parseFloat(f[9]), name: f.slice(11).join(" ") });
// top sorts by %CPU; first 10 rows are the story
if (_procsPending.length >= 10) { procs = _procsPending; _collecting = false; }
} else {
procs = _procsPending; _collecting = false;
}
}
}
Process {
id: srvTop
command: [Commands.ssh, "-o", "BatchMode=yes", "-o", "ConnectTimeout=3",
"-o", "StrictHostKeyChecking=accept-new",
"-o", "ServerAliveInterval=5", "-o", "ServerAliveCountMax=2",
"fred@10.0.0.1", "qs-stats"]
running: true
stdout: SplitParser {
onRead: data => srvWidget._parseLine(data)
}
onRunningChanged: if (!running) { srvWidget.connected = false; srvRestart.start(); }
}
Timer { id: srvRestart; interval: 10000; onTriggered: srvTop.running = true }
// Ping is deliberately separate from the SSH stream:
// ping up + ssh down = box alive but wedged (seen it).
Process {
id: srvPing
command: [Commands.ping, "-n", "-i", "2", "10.0.0.1"]
running: true
stdout: SplitParser {
onRead: data => {
const m = data.match(/time=([\d.]+)\s*ms/);
if (m) { srvWidget.pingMs = parseFloat(m[1]); pingStale.restart(); }
}
}
onRunningChanged: if (!running) pingRestart.start()
}
Timer { id: pingRestart; interval: 10000; onTriggered: srvPing.running = true }
// No echo reply for 3 intervals -> show dashes, not a stale number.
Timer { id: pingStale; interval: 6000; onTriggered: srvWidget.pingMs = -1 }
function openSrvDropdown() {
bar.toggleDropdown(srvDropdown, function() {
let pos = srvWidget.mapToItem(bar.contentItem, 0, srvWidget.height / 2);
srvDropdown.dropdownY = pos.y;
});
}
// Stat stack, clock-sized values over faded captions.
Column {
id: srvGlanceCol
anchors.centerIn: parent
spacing: 5
GlanceStat {
value: srvWidget.connected ? Math.round(srvWidget.cpu) + "%" : "--"
caption: "cpu"
valueColor: srvWidget.connected ? Theme.base0D : Theme.base03
}
GlanceStat {
value: srvWidget.connected && srvWidget.memTotal > 0
? Math.round(100 * srvWidget.memUsed / srvWidget.memTotal) + "%" : "--"
caption: "ram"
valueColor: srvWidget.connected ? Theme.info : Theme.base03
}
GlanceStat {
value: srvWidget.connected && srvWidget.tempC >= 0 ? srvWidget.tempC + "°" : "--"
caption: "temp"
valueColor: !srvWidget.connected || srvWidget.tempC < 0 ? Theme.base03
: srvWidget.tempC >= 85 ? Theme.err
: srvWidget.tempC >= 70 ? Theme.warn : Theme.base05
}
GlanceStat {
value: srvWidget.connected ? srvWidget.rateVal(srvWidget.rxBps) : "--"
caption: "↓ " + srvWidget.rateUnit(srvWidget.rxBps)
valueColor: srvWidget.connected ? Theme.ok : Theme.base03
}
GlanceStat {
value: srvWidget.connected ? srvWidget.rateVal(srvWidget.txBps) : "--"
caption: "↑ " + srvWidget.rateUnit(srvWidget.txBps)
valueColor: srvWidget.connected ? Theme.alt : Theme.base03
}
GlanceStat {
value: srvWidget.pingMs < 0 ? "--"
: srvWidget.pingMs < 10 ? srvWidget.pingMs.toFixed(1)
: Math.round(srvWidget.pingMs).toString()
caption: "ms"
valueColor: srvWidget.pingMs < 0 ? Theme.base03 : Theme.base04
}
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onClicked: srvWidget.openSrvDropdown()
onEntered: {
if (bar.activeDropdown) {
if (bar.activeDropdown !== srvDropdown) srvWidget.openSrvDropdown();
}
}
}
}
// ── Bottom cluster: status icons, tray, power button. Anchored
// to the bottom edge; the server glance sits just above it and
// the OSD borrows that same slot while it is on screen.
Column {
id: barBottom
anchors.bottom: parent.bottom
anchors.bottomMargin: 12
anchors.horizontalCenter: barBgRect.horizontalCenter
spacing: 16
// Volume
Item {
id: volWidget
width: Theme.barWidth
height: 26
property PwNode sink: Pipewire.defaultAudioSink
PwObjectTracker {
objects: [volWidget.sink]
}
property int vol: sink && sink.audio ? Math.round(sink.audio.volume * 100) : 0
property bool muted: sink && sink.audio ? sink.audio.muted : false
// caelestia's getVolumeIcon shape, in Lucide's names.
property string volIcon: muted ? "volume-x"
: vol >= 50 ? "volume-2"
: vol > 0 ? "volume-1"
: "volume"
function openVolDropdown() {
bar.toggleDropdown(volDropdown, function() {
let pos = volWidget.mapToItem(bar.contentItem, 0, volWidget.height / 2);
volDropdown.dropdownY = pos.y;
});
}
// Icon only — the level lives in the OSD slot above and
// in the dropdown; "100%" does not fit the column.
SIcon {
anchors.centerIn: parent
text: volWidget.volIcon
color: volWidget.muted ? Theme.base03 : Theme.base05
font.pixelSize: 18
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
acceptedButtons: Qt.LeftButton | Qt.MiddleButton
onClicked: (event) => {
if (event.button === Qt.MiddleButton) {
if (volWidget.sink && volWidget.sink.audio)
volWidget.sink.audio.muted = !volWidget.sink.audio.muted;
} else {
volWidget.openVolDropdown();
}
}
onEntered: {
if (bar.activeDropdown) {
if (bar.activeDropdown !== volDropdown) volWidget.openVolDropdown();
}
}
}
}
// Network status
Item {
id: netWidget
width: Theme.barWidth
height: 26
property string netState: "disconnected"
property string netConn: ""
property string netType: ""
property int netStrength: 0
// Signal strength picks the arc glyph. Lucide draws four
// wifi levels where Material Symbols drew five, so the
// bottom two of caelestia's buckets collapse into one.
readonly property string netIcon:
netState !== "connected"
? (netType === "ethernet" ? "unplug" : "wifi-off")
: netType === "ethernet" ? "cable"
: netStrength >= 80 ? "wifi"
: netStrength >= 60 ? "wifi-high"
: netStrength >= 40 ? "wifi-low"
: "wifi-zero"
property var wifiNetworks: []
property string netDevice: ""
property string _pendingState: "disconnected"
property string _pendingConn: ""
property string _pendingType: ""
property string _pendingDevice: ""
property var _pendingNets: []
// Event-driven: `nmcli monitor` prints a line on every
// NetworkManager event; debounce bursts into one refresh.
Process {
id: netMonitor
command: [Commands.nmcli, "monitor"]
running: true
stdout: SplitParser {
onRead: data => netRefreshDebounce.restart()
}
onRunningChanged: if (!running) netMonitorRestart.start()
}
Timer {
id: netRefreshDebounce
interval: 500
onTriggered: netWidget.refreshNet()
}
Timer {
id: netMonitorRestart
interval: 5000
onTriggered: netMonitor.running = true
}
// Slow fallback poll in case the monitor dies quietly
Timer {
interval: 60000
running: true
repeat: true
triggeredOnStart: true
onTriggered: netWidget.refreshNet()
}
function refreshNet() {
netWidget._pendingState = "disconnected";
netWidget._pendingConn = "";
netWidget._pendingType = "";
netProc.running = true;
}
Process {
id: netProc
command: [Commands.nmcli, "-t", "-f", "DEVICE,TYPE,STATE,CONNECTION", "device"]
stdout: SplitParser {
onRead: data => {
let fields = data.split(":");
if (fields.length < 4) return;
let type = fields[1];
let state = fields[2];
let conn = fields[3];
if (type !== "ethernet" && type !== "wifi") return;
if (type === "wifi") {
netWidget._pendingDevice = fields[0];
}
if (state === "connected") {
netWidget._pendingState = "connected";
netWidget._pendingConn = conn;
netWidget._pendingType = type;
}
}
}
onRunningChanged: {
if (!running) {
netWidget.netState = netWidget._pendingState;
netWidget.netConn = netWidget._pendingConn;
netWidget.netType = netWidget._pendingType.length > 0 ? netWidget._pendingType : netWidget.netType;
netWidget.netDevice = netWidget._pendingDevice.length > 0 ? netWidget._pendingDevice : netWidget.netDevice;
// netIcon is a binding now; wifi needs the
// active AP's signal to pick its glyph.
if (netWidget.netState === "connected" && netWidget.netType === "wifi")
wifiSignalProc.running = true;
}
}
}
SIcon {
anchors.centerIn: parent
text: netWidget.netIcon
color: Theme.base05
font.pixelSize: 16
}
Timer {
id: netRefreshDelay
interval: 2000
onTriggered: netWidget.refreshNet()
}
Process {
id: wifiScanProc
command: [Commands.nmcli, "-t", "-f", "SSID,SIGNAL,SECURITY,IN-USE", "device", "wifi", "list", "--rescan", "auto"]
stdout: SplitParser {
onRead: data => {
let fields = data.split(":");
if (fields.length < 4 || fields[0] === "") return;
for (let i = 0; i < netWidget._pendingNets.length; i++) {
if (netWidget._pendingNets[i].ssid === fields[0]) return;
}
netWidget._pendingNets.push({
ssid: fields[0],
signal: parseInt(fields[1]) || 0,
security: fields[2],
active: fields[3] === "*"
});
}
}
onRunningChanged: {
if (!running) {
netWidget.wifiNetworks = netWidget._pendingNets;
netWidget._pendingNets = [];
}
}
}
// No --rescan, so this reads NetworkManager's cached
// scan — cheap enough to run on every net event.
Process {
id: wifiSignalProc
command: [Commands.nmcli, "-t", "-f", "IN-USE,SIGNAL", "device", "wifi"]
stdout: SplitParser {
onRead: data => {
let f = data.split(":");
if (f[0] === "*") netWidget.netStrength = parseInt(f[1]) || 0;
}
}
}
Process {
id: wifiConnectProc
property string targetSsid: ""
command: [Commands.wifiConnect, targetSsid]
}
Process {
id: netDisconnectProc
property string targetDevice: ""
command: [Commands.nmcli, "device", "disconnect", targetDevice]
}
function openNetDropdown() {
bar.toggleDropdown(netDropdown, function() {
wifiScanProc.running = true;
let pos = netWidget.mapToItem(bar.contentItem, 0, netWidget.height / 2);
netDropdown.dropdownY = pos.y;
});
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onClicked: netWidget.openNetDropdown()
onEntered: {
if (bar.activeDropdown) {
if (bar.activeDropdown !== netDropdown) netWidget.openNetDropdown();
}
}
}
}
${lib.optionalString isMacbook ''
// Battery
Item {
id: batteryWidget
width: Theme.barWidth
height: batteryCol.height
// Live DBus-driven properties from the UPower service —
// no polling, no /sys parsing, no subprocess spawns.
property var dev: UPower.displayDevice
property int batteryLevel: dev && dev.ready ? Math.round(dev.percentage * 100) : 0
property bool charging: dev ? dev.state === UPowerDeviceState.Charging : false
property real powerDraw: dev ? Math.abs(dev.changeRate) : 0.0
property string timeRemaining: {
if (!dev) return "";
let secs = charging ? dev.timeToFull : dev.timeToEmpty;
if (!secs || secs <= 0) return "";
let h = Math.floor(secs / 3600);
let m = Math.round((secs % 3600) / 60);
return h + "h " + m + "m";
}
property string powerProfile:
PowerProfiles.profile === PowerProfile.PowerSaver ? "power-saver"
: PowerProfiles.profile === PowerProfile.Performance ? "performance"
: "balanced"
// Lucide draws four battery levels and a single charging
// glyph, so caelestia's 7-step scale and its graded
// charging variants don't survive the swap. Low-battery
// warning is carried by colour below.
property string batteryIcon: charging ? "battery-charging"
: batteryLevel >= 75 ? "battery-full"
: batteryLevel >= 50 ? "battery-medium"
: batteryLevel >= 20 ? "battery-low"
: "battery"
// Stacked: icon over percentage. Side by side no longer
// fits, but the level is worth keeping on a laptop.
Column {
id: batteryCol
anchors.horizontalCenter: parent.horizontalCenter
spacing: 0
SIcon {
id: batteryIconText
anchors.horizontalCenter: parent.horizontalCenter
text: batteryWidget.batteryIcon
color: batteryWidget.batteryLevel <= 15 ? Theme.err
: batteryWidget.batteryLevel <= 30 ? Theme.warn
: Theme.base05
font.pixelSize: 18
}
SText {
id: batteryText
anchors.horizontalCenter: parent.horizontalCenter
text: batteryWidget.batteryLevel
color: batteryWidget.batteryLevel <= 15 ? Theme.err
: batteryWidget.batteryLevel <= 30 ? Theme.warn
: Theme.base05
font.pixelSize: 10
}
}
function openBatteryDropdown() {
bar.toggleDropdown(batteryDropdown, function() {
let pos = batteryWidget.mapToItem(bar.contentItem, 0, batteryWidget.height / 2);
batteryDropdown.dropdownY = pos.y;
brightRead.running = true; // refresh sliders on open
});
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onClicked: batteryWidget.openBatteryDropdown()
onEntered: {
if (bar.activeDropdown) {
if (bar.activeDropdown !== batteryDropdown) batteryWidget.openBatteryDropdown();
}
}
}
}
''}
${lib.optionalString (!isMacbook) ''
// Quick settings (night light) — no battery widget on the
// desktop, so the card gets its own bar icon.
Item {
id: qsWidget
width: Theme.barWidth
height: 26
SIcon {
id: qsIcon
// centerIn, not verticalCenter: the cell used to be
// qsIcon.width so horizontal centring was implicit.
anchors.centerIn: parent
text: "moon"
font.pixelSize: 18
}
function openQsDropdown() {
bar.toggleDropdown(qsDropdown, function() {
let pos = qsWidget.mapToItem(bar.contentItem, 0, qsWidget.height / 2);
qsDropdown.dropdownY = pos.y;
});
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onClicked: qsWidget.openQsDropdown()
onEntered: {
if (bar.activeDropdown) {
if (bar.activeDropdown !== qsDropdown) qsWidget.openQsDropdown();
}
}
}
}
''}
// Group separator: status icons / tray / power read
// as three clusters instead of one clump.
BarSep {}
// Tray icons — stacked, like everything else in the column
Column {
id: trayArea
spacing: 8
width: Theme.barWidth
// NO vertical anchor here: a Column refuses to position
// ANY child if one of them sets top/bottom/verticalCenter
// /fill/centerIn, and silently piles them all at y=0.
Repeater {
model: SystemTray.items
Item {
required property var modelData
width: Theme.barWidth
height: 24
Image {
id: trayIcon
anchors.centerIn: parent
width: 16
height: 16
source: modelData.icon
sourceSize.width: 16
sourceSize.height: 16
smooth: true
mipmap: true
visible: false
}
ColorOverlay {
anchors.fill: trayIcon
source: trayIcon
color: Theme.base05
}
// The icon's own menu cache: assigned from the
// moment the icon exists, so the DBus fetch
// (slow for Steam) happens at startup, not
// mid-animation. contextMenu just points at
// this — switching tray icons never reloads.
QsMenuOpener {
id: itemOpener
menu: modelData.menu
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
acceptedButtons: Qt.NoButton
onEntered: {
if (!modelData.hasMenu) return;
if (!bar.activeDropdown) return;
if (bar.activeDropdown === contextMenu && contextMenu.trayItem === modelData) return;
let pos = parent.mapToItem(bar.contentItem, 0, parent.height / 2);
if (bar.activeDropdown === contextMenu) {
// Same dropdown, just switch content
contextMenu.dropdownY = pos.y;
contextMenu.trayItem = modelData;
contextMenu.activeOpener = itemOpener;
} else {
contextMenu.openFor(modelData, pos.y, itemOpener);
}
}
}
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: (event) => {
if (!modelData.hasMenu) {
modelData.activate();
} else if (bar.activeDropdown === contextMenu && contextMenu.trayItem === modelData) {
// Clicking the open menu's own icon still closes it
contextMenu.animateClose();
} else {
let pos = parent.mapToItem(bar.contentItem, 0, parent.height / 2);
contextMenu.openFor(modelData, pos.y, itemOpener);
}
}
}
}
}
}
// Group separator: status icons / tray / power read
// as three clusters instead of one clump.
BarSep {}
// Power menu opener — bottom-left corner. Opens the same
// session menu as Super+L, which now unfolds from here.
Item {
id: powerWidget
width: Theme.barWidth
height: 26
SIcon {
anchors.centerIn: parent
text: "power"
color: powerMa.containsMouse || sessionMenu.open ? Theme.err : Theme.base05
font.pixelSize: 18
Behavior on color { ColorAnimation { duration: Theme.animFade } }
}
MouseArea {
id: powerMa
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: bar.toggleSession()
onEntered: {
if (bar.activeDropdown) {
if (bar.activeDropdown !== sessionMenu) bar.toggleSession();
}
}
}
}
}
// Dropdown container — content, sizing and autoclose only.
// The background, border and ears are drawn once by the shared
// `chrome` panel below, which morphs between dropdowns.
component BarDropdown: Item {
id: dropdown
property bool open: false
property bool closing: false
// Vertical centre of the widget that owns this dropdown;
// the panel tracks it, clamped to the screen. The old
// flush-to-far-edge special case is gone — the SDF melt
// already makes a clamped panel meet the frame cleanly.
property real dropdownY: 0
property real fullWidth: 200
property real fullHeight: 200
property real dropdownWidth: open ? fullWidth : 0
default property alias content: dropdownContent.data
function animateClose() {
if (!visible || closing) return;
closing = true;
open = false;
// Collapse the chrome immediately so the content fade
// and the panel animation run together (when switching
// dropdowns, toggleDropdown retargets activeDropdown
// first, so this doesn't fire and the chrome morphs).
// The panel also shrinks back toward its widget.
if (bar.activeDropdown === dropdown) {
bar.activeDropdown = null;
chrome.shrinkToButton(dropdown);
}
_closeDelay.start();
}
// Reopen a dropdown that's mid-close: the pending hide
// timer must be cancelled, otherwise it fires later and
// closes the revived dropdown (and the whole chrome).
function revive() {
_closeDelay.stop();
closing = false;
open = true;
}
// Clamp to the frame's inner edge. A panel that lands here
// is MEANT to fuse with the frame band — the shader melts
// it in (see meltTop/meltBot). Outer max wins when a panel
// is taller than the space (yMax < yMin).
readonly property real yMin: Theme.frameWidth
readonly property real yMax: bar.height - Theme.frameWidth - height
x: Theme.barWidth
y: Math.round(Math.max(yMin, Math.min(yMax, dropdownY - height / 2)))
width: fullWidth + 4
// +24, not +16: the shader insets the panel 8px top and
// bottom, so +16 left the panel edge flush with the content
// (0 padding) while the growth axis overhung by 4. The
// extra 8 gives 4px above and below, matching the right.
height: fullHeight + 24
visible: false
onVisibleChanged: {
if (visible) {
closing = false;
open = true;
} else {
open = false;
closing = false;
}
}
Timer {
id: _closeDelay
interval: 300
onTriggered: { dropdown.visible = false; dropdown.closing = false; if (bar.activeDropdown === dropdown) bar.activeDropdown = null; }
}
// Content is clipped to the chrome's ANIMATED geometry —
// revealed as the panel slides/grows over it and wiped as
// the panel leaves, instead of popping in place. The inner
// item counter-offsets so content stays put while the clip
// window moves across it. Growth axis is now x (rightward);
// the clip's height is the chrome's inner cross-axis span.
Item {
id: _dropdownRect
x: 0
y: (chrome.y + 8) - dropdown.y
width: Math.min(dropdown.fullWidth, chrome.width)
height: Math.max(0, chrome.height - 16)
clip: true
opacity: dropdown.open ? 1 : 0
Behavior on opacity {
NumberAnimation { duration: Theme.animContent; easing.type: Easing.OutCubic }
}
Item {
id: dropdownContent
// 12 = panel inset (8) + the 4px breathing room,
// keeping the content centred in the taller panel.
y: 12 - _dropdownRect.y
width: dropdown.fullWidth
height: dropdown.fullHeight
}
}
}
// The shared morphing panel: follows the active dropdown's
// geometry with animation (the caelestia-style morph), snaps
// instantly when opening from closed.
Item {
id: chrome
property real tY: 0
property real tH: 200
property real tW: 0
property real openW: bar.activeDropdown ? tW : 0
property bool snap: false
readonly property real stubH: 32
// Grow-from / shrink-to the widget that owns the dropdown:
// the panel opens as a small stub beside the button and
// expands rightward; closing retargets back to the stub
// while the width collapses.
function stubY(dd) {
return Math.round(Math.min(bar.height - Theme.frameWidth - stubH, Math.max(Theme.frameWidth, dd.dropdownY - stubH / 2)));
}
// Snap ONLY long enough to place the stub, then release so
// both axes animate out to the target: the panel grows
// from a small point on the widget rather than sliding out
// at full height. Holding the snap through the grow is
// what made it arrive pre-grown vertically.
function seedFromButton(dd) {
snap = true;
tY = stubY(dd);
tH = stubH;
snap = false;
}
function shrinkToButton(dd) {
tY = stubY(dd);
tH = stubH;
}
x: Theme.barWidth
y: tY
width: openW
height: tH
visible: width > 0.5
Binding {
target: chrome; property: "tY"
value: bar.activeDropdown ? bar.activeDropdown.y : 0
when: bar.activeDropdown !== null
restoreMode: Binding.RestoreNone
}
Binding {
target: chrome; property: "tH"
value: bar.activeDropdown ? bar.activeDropdown.height : 0
when: bar.activeDropdown !== null
restoreMode: Binding.RestoreNone
}
Binding {
target: chrome; property: "tW"
value: bar.activeDropdown ? bar.activeDropdown.fullWidth + 4 : 0
when: bar.activeDropdown !== null
restoreMode: Binding.RestoreNone
}
Behavior on tY {
enabled: !chrome.snap
NumberAnimation { duration: Theme.animMorph; easing.type: Easing.OutExpo }
}
Behavior on tH {
enabled: !chrome.snap
NumberAnimation { duration: Theme.animMorph; easing.type: Easing.OutExpo }
}
Behavior on openW {
NumberAnimation { duration: Theme.animMorph; easing.type: Easing.OutExpo }
}
}
// Context menu
BarDropdown {
id: contextMenu
property var trayItem: null
fullWidth: menuItems.width + 2 * Theme.panelGap
// While a freshly assigned menu is still loading, the Card
// is empty — and an empty Card is not height 0, it is
// 2*cardPad — so the panel would morph DOWN to a stub and
// then regrow once the items land, instead of moving
// across. Hold the last loaded height until the new items
// arrive so the morph stays continuous. The correction is
// small, and nil when it is the same menu as last time.
// Row metrics, shared by the delegate below and the height
// sum — these two must never drift apart.
readonly property int menuRowHeight: 28
readonly property int menuSepHeight: 9
// Size the panel from the MODEL, not from the laid-out
// Card. The Card only reaches its true height a frame or
// more after the model populates — the Repeater has to
// build delegates and the Column re-measure — and every
// previous attempt here read the Card during that gap,
// which is the flash. Summing the rows is exact and
// available the instant the data lands, so the height and
// its content update in the same binding pass.
readonly property real menuContentHeight: {
if (!menuModel) return 0;
const items = menuModel.values;
let h = 0;
for (let i = 0; i < items.length; i++)
h += items[i].isSeparator ? menuSepHeight : menuRowHeight;
return h;
}
// Hold the previous size across the DBus fetch of a newly
// assigned menu (the tray-to-tray path), so the switch
// morphs instead of collapsing to empty and regrowing.
property real lastMenuHeight: 0
onMenuContentHeightChanged: {
if (menuContentHeight > 0) lastMenuHeight = menuContentHeight;
}
fullHeight: (menuContentHeight > 0 ? menuContentHeight : lastMenuHeight)
+ 2 * Theme.cardPad + 2 * Theme.panelGap
// Which tray item's opener feeds the menu. Every tray icon
// owns an always-assigned QsMenuOpener (see the tray
// Repeater), fetched when the icon appears — so switching
// tray→tray swaps one POPULATED model for another in a
// single binding pass. The shared opener this replaces
// reloaded over DBus on every reassignment, and no sizing
// gate downstream could hide that the model itself went
// briefly empty (that gap was the flash).
property var activeOpener: null
readonly property var menuModel: activeOpener ? activeOpener.children : null
// Opens immediately — the item's opener has been loaded
// since its icon appeared, so there is nothing to wait on.
function openFor(item, y, opener) {
dropdownY = y;
trayItem = item;
activeOpener = opener;
bar.toggleDropdown(contextMenu, null);
}
Card {
id: menuItems
anchors.centerIn: parent
width: 200
cardSpacing: 0
Repeater {
model: contextMenu.menuModel
Rectangle {
required property var modelData
width: parent.width
height: modelData.isSeparator ? contextMenu.menuSepHeight
: contextMenu.menuRowHeight
color: !modelData.isSeparator && itemMouse.containsMouse && modelData.enabled
? Theme.base02 : Theme.base02t
Behavior on color { ColorAnimation { duration: Theme.animFade } }
radius: modelData.isSeparator ? 0 : 4
Rectangle {
visible: modelData.isSeparator
anchors.centerIn: parent
width: parent.width - 20
height: 1
color: Theme.base03
}
Item {
visible: !modelData.isSeparator
anchors.fill: parent
anchors.leftMargin: 10
anchors.rightMargin: 10
SText {
id: menuCheck
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
visible: modelData.buttonType !== QsMenuButtonType.None
text: modelData.checkState === Qt.Checked ? "\u2713" : ""
color: Theme.base0D
font.pixelSize: 12
}
SText {
anchors.left: parent.left
anchors.right: menuCheck.visible ? menuCheck.left : parent.right
anchors.rightMargin: menuCheck.visible ? 8 : 0
anchors.verticalCenter: parent.verticalCenter
text: modelData.text ?? ""
color: modelData.enabled ? Theme.base05 : Theme.base03
font.pixelSize: 12
elide: Text.ElideRight
}
}
MouseArea {
id: itemMouse
anchors.fill: parent
hoverEnabled: true
enabled: !modelData.isSeparator && modelData.enabled
onClicked: {
modelData.triggered();
bar.closeAllDropdowns();
}
}
}
}
}
}
// ── Session menu: icon-only power controls morphing out of
// the bar at the bottom-left (Super+L, or the power button).
// Keyboard: arrows/Tab move the selection, Enter activates,
// Esc closes.
BarDropdown {
id: sessionMenu
fullWidth: 48 + 2 * Theme.panelGap
fullHeight: sessionCard.height + 2 * Theme.panelGap
property int selIdx: 0
readonly property var actions: [
{ icon: "lock", danger: false, act: "lock" },
{ icon: "log-out", danger: false, act: "logout" },
{ icon: "rotate-ccw", danger: true, act: "reboot" },
{ icon: "power", danger: true, act: "poweroff" }
]
function activate(act) {
animateClose();
if (act === "lock") bar.shellRoot.lock();
else if (act === "logout") Hyprland.dispatch("hl.dsp.exit()");
else if (act === "reboot") Quickshell.execDetached([Commands.systemctl, "reboot"]);
else Quickshell.execDetached([Commands.systemctl, "poweroff"]);
}
focus: open
onOpenChanged: if (open) { selIdx = 0; forceActiveFocus(); }
Keys.onEscapePressed: bar.closeAllDropdowns()
Keys.onUpPressed: selIdx = (selIdx + actions.length - 1) % actions.length
Keys.onDownPressed: selIdx = (selIdx + 1) % actions.length
Keys.onTabPressed: selIdx = (selIdx + 1) % actions.length
Keys.onReturnPressed: activate(actions[selIdx].act)
Keys.onEnterPressed: activate(actions[selIdx].act)
// Card backing, matching the other dropdowns. The grow /
// clip reveal is BarDropdown's job now.
Rectangle {
id: sessionCard
anchors.centerIn: parent
width: 48
height: sessionCol.height + 8
radius: Theme.radiusCard
color: Theme.cardBg
// Sliding selection pill — same tech as the power
// profile selector; glides between the buttons.
Rectangle {
width: 40
height: 40
radius: Theme.radiusCard
color: Theme.base02
border.width: 1
border.color: Theme.base03
x: sessionCol.x
y: sessionCol.y + sessionMenu.selIdx * 44
Behavior on y {
NumberAnimation { duration: 250; easing.type: Easing.OutExpo }
}
}
Column {
id: sessionCol
anchors.centerIn: parent
spacing: 4
Repeater {
model: sessionMenu.actions
Item {
id: sessBtn
required property var modelData
required property int index
width: 40
height: 40
SIcon {
anchors.centerIn: parent
text: sessBtn.modelData.icon
// All four buttons share the logout
// setup: base05, FILL on selection.
color: Theme.base05
font.pixelSize: 20
font.weight: 600
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onEntered: sessionMenu.selIdx = sessBtn.index
onClicked: sessionMenu.activate(sessBtn.modelData.act)
}
}
}
}
}
}
// Volume dropdown
// Server monitor dropdown — the btop-at-a-distance view.
BarDropdown {
id: srvDropdown
fullWidth: srvDropdownCol.width + 2 * Theme.panelGap
fullHeight: srvDropdownCol.height + 2 * Theme.panelGap
Column {
id: srvDropdownCol
anchors.centerIn: parent
width: 340
spacing: 8
Card {
width: parent.width
Row {
spacing: 6
SIcon {
anchors.verticalCenter: parent.verticalCenter
text: "server"
color: srvWidget.connected ? Theme.ok : Theme.err
}
SText {
anchors.verticalCenter: parent.verticalCenter
text: "FredOS-Mediaserver"
font.weight: Font.Medium
}
}
SText {
width: parent.width
text: srvWidget.connected
? "up " + srvWidget.uptime + " • load " + srvWidget.load
: "unreachable"
font.pixelSize: 12
color: srvWidget.connected ? Theme.base04 : Theme.err
elide: Text.ElideRight
}
Row {
width: parent.width
spacing: 10
SText { width: 42; text: "cpu"; color: Theme.base04; anchors.verticalCenter: parent.verticalCenter }
PillSlider {
width: parent.width - 42 - 76 - 20
anchors.verticalCenter: parent.verticalCenter
value: srvWidget.cpu / 100
fillColor: srvWidget.cpu >= 90 ? Theme.err : Theme.base0D
}
SText {
width: 76
text: srvWidget.cpu.toFixed(1) + "%"
font.weight: Font.Medium
horizontalAlignment: Text.AlignRight
anchors.verticalCenter: parent.verticalCenter
}
}
Row {
width: parent.width
spacing: 10
SText { width: 42; text: "ram"; color: Theme.base04; anchors.verticalCenter: parent.verticalCenter }
PillSlider {
width: parent.width - 42 - 76 - 20
anchors.verticalCenter: parent.verticalCenter
value: srvWidget.memTotal > 0 ? srvWidget.memUsed / srvWidget.memTotal : 0
fillColor: Theme.info
}
SText {
width: 76
text: srvWidget.memUsed.toFixed(1) + "/" + Math.round(srvWidget.memTotal) + "G"
font.weight: Font.Medium
horizontalAlignment: Text.AlignRight
anchors.verticalCenter: parent.verticalCenter
}
}
Row {
width: parent.width
spacing: 10
SText { width: 42; text: "temp"; color: Theme.base04 }
SText {
text: srvWidget.tempC < 0 ? "--" : srvWidget.tempC + "°C"
font.weight: Font.Medium
color: srvWidget.tempC < 0 ? Theme.base03
: srvWidget.tempC >= 85 ? Theme.err
: srvWidget.tempC >= 70 ? Theme.warn : Theme.base05
}
}
Row {
width: parent.width
spacing: 10
SText { width: 42; text: "wan"; color: Theme.base04 }
Row {
spacing: 14
Row {
spacing: 4
SIcon { text: "arrow-down"; font.pixelSize: 14; color: Theme.ok; anchors.verticalCenter: parent.verticalCenter }
SText {
text: srvWidget.fmtRate(srvWidget.rxBps)
font.weight: Font.Medium
anchors.verticalCenter: parent.verticalCenter
}
}
Row {
spacing: 4
SIcon { text: "arrow-up"; font.pixelSize: 14; color: Theme.alt; anchors.verticalCenter: parent.verticalCenter }
SText {
text: srvWidget.fmtRate(srvWidget.txBps)
font.weight: Font.Medium
anchors.verticalCenter: parent.verticalCenter
}
}
}
}
Row {
width: parent.width
spacing: 10
SText { width: 42; text: "ping"; color: Theme.base04 }
SText {
text: srvWidget.pingMs < 0 ? "--" : srvWidget.pingMs.toFixed(1) + " ms"
font.weight: Font.Medium
color: srvWidget.pingMs < 0 ? Theme.base03 : Theme.base05
}
}
}
Card {
width: parent.width
Row {
spacing: 6
SIcon { anchors.verticalCenter: parent.verticalCenter; text: "activity" }
SText {
anchors.verticalCenter: parent.verticalCenter
text: "Processes"
font.weight: Font.Medium
}
}
Row {
width: parent.width
SText { width: parent.width - 112; text: "name"; font.pixelSize: 11; color: Theme.base03 }
SText { width: 56; text: "cpu%"; font.pixelSize: 11; color: Theme.base03; horizontalAlignment: Text.AlignRight }
SText { width: 56; text: "mem%"; font.pixelSize: 11; color: Theme.base03; horizontalAlignment: Text.AlignRight }
}
Column {
width: parent.width
spacing: 3
Repeater {
model: srvWidget.procs
Row {
required property var modelData
width: parent.width
height: 21
SText {
width: parent.width - 112
text: modelData.name
elide: Text.ElideRight
anchors.verticalCenter: parent.verticalCenter
}
SText {
width: 56
text: modelData.cpu.toFixed(1)
horizontalAlignment: Text.AlignRight
color: modelData.cpu >= 100 ? Theme.err
: modelData.cpu >= 25 ? Theme.warn : Theme.base05
anchors.verticalCenter: parent.verticalCenter
}
SText {
width: 56
text: modelData.mem.toFixed(1)
horizontalAlignment: Text.AlignRight
color: Theme.base04
anchors.verticalCenter: parent.verticalCenter
}
}
}
SText {
visible: srvWidget.procs.length === 0
text: "no data"
color: Theme.base03
}
}
}
}
}
BarDropdown {
id: volDropdown
fullWidth: volDropdownCol.width + 2 * Theme.panelGap
fullHeight: volDropdownCol.height + 2 * Theme.panelGap
Column {
id: volDropdownCol
anchors.centerIn: parent
width: 268
spacing: 8
// Master volume card
Card {
width: parent.width
Row {
spacing: 6
VolIcon { anchors.verticalCenter: parent.verticalCenter; audioNode: volWidget.sink ? volWidget.sink.audio : null }
SText {
anchors.verticalCenter: parent.verticalCenter
text: "Master"
font.weight: Font.Medium
}
}
Row {
width: parent.width
spacing: 8
PillSlider {
width: parent.width - masterVolLabel.width - 8
anchors.verticalCenter: parent.verticalCenter
value: volWidget.sink && volWidget.sink.audio ? Math.min(1, volWidget.sink.audio.volume) : 0
fillColor: volWidget.muted ? Theme.base03 : Theme.base0D
onMoved: (v) => { if (volWidget.sink && volWidget.sink.audio) volWidget.sink.audio.volume = v; }
}
SText {
id: masterVolLabel
width: 36
text: volWidget.vol + "%"
font.pixelSize: 11
horizontalAlignment: Text.AlignRight
anchors.verticalCenter: parent.verticalCenter
}
}
// Mute button
HoverRow {
width: parent.width
height: 28
onClicked: {
if (volWidget.sink && volWidget.sink.audio)
volWidget.sink.audio.muted = !volWidget.sink.audio.muted;
}
Row {
anchors.centerIn: parent
spacing: 6
SIcon {
anchors.verticalCenter: parent.verticalCenter
text: volWidget.muted ? "volume-x" : "volume-2"
font.pixelSize: 15
}
SText {
anchors.verticalCenter: parent.verticalCenter
text: volWidget.muted ? "Unmute" : "Mute"
font.pixelSize: 12
}
}
}
}
${lib.optionalString (!isMacbook) ''
// Nova Pro noise cancelling — writes straight to the
// base station's HID interface via the nova-anc
// script (no daemon). Card hides when the dongle or
// headset is gone.
Card {
id: ancCard
visible: ancMode !== ""
width: parent.width
property string ancMode: ""
function setMode(key) {
if (key === ancMode) return;
ancMode = key; // optimistic; next poll corrects if the device disagrees
ancSet.mode = key;
ancSet.running = true;
}
Process {
id: ancSet
property string mode: "off"
command: [Commands.novaAnc, mode]
}
Process {
id: ancStatus
command: [Commands.novaAnc]
stdout: StdioCollector {
onStreamFinished: {
const m = text.trim();
ancCard.ancMode = (m === "off" || m === "transparent" || m === "on") ? m : "";
}
}
}
// Poll only while the dropdown is up; keeps ticking
// with the card hidden so a headset appearing
// mid-open reveals it.
Timer {
interval: 3000
repeat: true
triggeredOnStart: true
running: volDropdown.visible
onTriggered: ancStatus.running = true
}
Row {
spacing: 6
SIcon { anchors.verticalCenter: parent.verticalCenter; text: "headphones" }
SText {
anchors.verticalCenter: parent.verticalCenter
text: "Noise Cancelling"
font.weight: Font.Medium
}
}
Row {
width: parent.width
spacing: 6
Repeater {
model: [
{ key: "off", label: "Off" },
{ key: "transparent", label: "Transparent" },
{ key: "on", label: "ANC" }
]
Rectangle {
required property var modelData
property bool active: ancCard.ancMode === modelData.key
width: (parent.width - 12) / 3
height: 26
radius: 6
color: active ? Theme.base0D : "transparent"
border.color: active ? Theme.base0D : Theme.base03
border.width: 1
SText {
anchors.centerIn: parent
text: modelData.label
font.pixelSize: 11
color: active ? Theme.base00 : Theme.base05
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: ancCard.setMode(modelData.key)
}
}
}
}
}
''}
// Applications card
Card {
visible: appStreamsCol.childrenRect.height > 0
width: parent.width
Row {
spacing: 6
SIcon { anchors.verticalCenter: parent.verticalCenter; text: "audio-waveform" }
SText {
anchors.verticalCenter: parent.verticalCenter
text: "Applications"
font.weight: Font.Medium
}
}
// Per-app streams
Column {
id: appStreamsCol
width: parent.width
spacing: 6
Repeater {
id: appStreamsRepeater
model: Pipewire.nodes
Column {
required property var modelData
width: parent.width
spacing: 2
visible: modelData.isStream && modelData.audio !== null
PwObjectTracker {
objects: [modelData]
}
SText {
text: modelData.properties["application.name"] || modelData.name || "Unknown"
color: Theme.base04
font.pixelSize: 11
elide: Text.ElideRight
width: parent.width
}
Row {
width: parent.width
spacing: 8
VolIcon {
anchors.verticalCenter: parent.verticalCenter
width: 18
color: Theme.base04
font.pixelSize: 15
audioNode: modelData.audio
}
PillSlider {
width: parent.width - 18 - appVolLabel.width - 16
anchors.verticalCenter: parent.verticalCenter
height: 16
trackH: 4
value: modelData.audio ? Math.min(1, modelData.audio.volume) : 0
fillColor: modelData.audio && modelData.audio.muted ? Theme.base03 : Theme.base0D
onMoved: (v) => { if (modelData.audio) modelData.audio.volume = v; }
}
SText {
id: appVolLabel
width: 36
text: modelData.audio ? Math.round(modelData.audio.volume * 100) + "%" : "0%"
color: Theme.base04
font.pixelSize: 10
horizontalAlignment: Text.AlignRight
anchors.verticalCenter: parent.verticalCenter
}
}
}
}
}
}
}
}
// Network dropdown
BarDropdown {
id: netDropdown
fullWidth: netDropdownCol.width + 2 * Theme.panelGap
fullHeight: netDropdownCol.height + 2 * Theme.panelGap
Column {
id: netDropdownCol
anchors.centerIn: parent
width: 228
spacing: 8
// Connection card
Card {
width: parent.width
cardSpacing: 4
Row {
width: parent.width
spacing: 6
SIcon {
anchors.verticalCenter: parent.verticalCenter
text: netWidget.netIcon
color: Theme.base05
font.pixelSize: 16
}
SText {
anchors.verticalCenter: parent.verticalCenter
width: parent.width - 22
text: netWidget.netState === "connected"
? netWidget.netConn : "Not connected"
color: Theme.base05
font.pixelSize: 13
font.weight: Font.Medium
elide: Text.ElideRight
}
}
HoverRow {
visible: netWidget.netState === "connected"
width: parent.width
height: 28
onClicked: {
netDisconnectProc.targetDevice = netWidget.netDevice;
netDisconnectProc.running = true;
netWidget.netState = "disconnected";
netWidget.netConn = "";
bar.closeAllDropdowns();
netRefreshDelay.start();
}
SText {
anchors.centerIn: parent
text: "Disconnect"
color: Theme.err
font.pixelSize: 12
}
}
}
// Available networks card
Card {
width: parent.width
cardSpacing: 4
SText {
text: "Available networks"
color: Theme.base04
font.pixelSize: 11
}
Repeater {
model: netWidget.wifiNetworks
HoverRow {
required property var modelData
width: parent.width
height: 32
onClicked: {
if (!modelData.active) {
wifiConnectProc.targetSsid = modelData.ssid;
wifiConnectProc.running = true;
netRefreshDelay.start();
}
bar.closeAllDropdowns();
}
Row {
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 8
anchors.right: parent.right
anchors.rightMargin: 8
spacing: 8
SIcon {
// Lucide has no padlocked wifi arc,
// so security is shown by the lock
// glyph on the row's right instead.
text: {
let s = modelData.signal;
if (s >= 80) return "wifi";
if (s >= 60) return "wifi-high";
if (s >= 40) return "wifi-low";
return "wifi-zero";
}
color: modelData.active ? Theme.ok : Theme.base04
font.pixelSize: 16
anchors.verticalCenter: parent.verticalCenter
}
SText {
text: modelData.ssid
color: modelData.active ? Theme.ok : Theme.base05
font.pixelSize: 12
elide: Text.ElideRight
width: 140
anchors.verticalCenter: parent.verticalCenter
}
SIcon {
visible: modelData.security !== "" && modelData.security !== "--"
text: "lock"
color: Theme.base03
font.pixelSize: 13
anchors.verticalCenter: parent.verticalCenter
}
}
}
}
}
}
}
${lib.optionalString isMacbook ''
// Battery dropdown
BarDropdown {
id: batteryDropdown
fullWidth: batteryDropdownCol.width + 2 * Theme.panelGap
fullHeight: batteryDropdownCol.height + 2 * Theme.panelGap
Column {
id: batteryDropdownCol
anchors.centerIn: parent
width: 208
spacing: 8
// Battery status card
Card {
width: parent.width
Row {
width: parent.width
spacing: 8
SIcon {
text: batteryWidget.batteryIcon
color: Theme.base05
font.pixelSize: 22
anchors.verticalCenter: parent.verticalCenter
}
Column {
anchors.verticalCenter: parent.verticalCenter
SText {
text: batteryWidget.batteryLevel + "%" + (batteryWidget.charging ? " — Charging" : "")
color: Theme.base05
font.pixelSize: 13
font.weight: Font.Medium
}
SText {
text: batteryWidget.powerDraw.toFixed(1) + " W"
+ (batteryWidget.timeRemaining !== "" ? " • " + batteryWidget.timeRemaining + (batteryWidget.charging ? " to full" : " left") : "")
color: Theme.base04
font.pixelSize: 11
}
}
}
}
// Power profile card
Card {
width: parent.width
cardSpacing: 6
SText {
text: "Power Profile"
color: Theme.base04
font.pixelSize: 11
}
Item {
width: parent.width
height: 36
// Sliding selection pill — glides between
// profiles instead of each button flipping.
Rectangle {
id: profilePill
readonly property int selIdx:
batteryWidget.powerProfile === "power-saver" ? 0
: batteryWidget.powerProfile === "performance" ? 2
: 1
width: (parent.width - 8) / 3
height: 36
radius: Theme.radiusSmall
color: Theme.base02
border.width: 1
border.color: Theme.base03
x: selIdx * (width + 4)
Behavior on x {
NumberAnimation { duration: 250; easing.type: Easing.OutExpo }
}
}
Row {
anchors.fill: parent
spacing: 4
Repeater {
model: [
{ name: "power-saver", profile: PowerProfile.PowerSaver, label: "leaf", tip: "Saver" },
{ name: "balanced", profile: PowerProfile.Balanced, label: "scale", tip: "Balanced" },
{ name: "performance", profile: PowerProfile.Performance, label: "gauge", tip: "Performance" }
]
Rectangle {
required property var modelData
width: (parent.width - 8) / 3
height: 36
radius: Theme.radiusSmall
color: profMouse.containsMouse && batteryWidget.powerProfile !== modelData.name
? Theme.base02 : Theme.base02t
Behavior on color { ColorAnimation { duration: Theme.animFade } }
Column {
anchors.centerIn: parent
spacing: 1
SIcon {
anchors.horizontalCenter: parent.horizontalCenter
text: modelData.label
// Selected = bright, unselected = grey
color: batteryWidget.powerProfile === modelData.name
? Theme.base05 : Theme.base04
Behavior on color { ColorAnimation { duration: 200 } }
font.pixelSize: 17
}
SText {
anchors.horizontalCenter: parent.horizontalCenter
text: modelData.tip
color: batteryWidget.powerProfile === modelData.name
? Theme.base05 : Theme.base04
Behavior on color { ColorAnimation { duration: 200 } }
font.pixelSize: 9
}
}
MouseArea {
id: profMouse
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: PowerProfiles.profile = modelData.profile
}
}
}
}
}
}
// Brightness card — screen + keyboard backlight.
// Values are read on dropdown open (brightRead); writes
// are debounced latest-wins so a drag doesn't spawn a
// brightnessctl per pixel.
Card {
id: brightCard
width: parent.width
cardSpacing: 6
property real screenB: 0.5
property real kbdB: 0
SText { text: "Brightness"; color: Theme.base04; font.pixelSize: 11 }
Row {
width: parent.width
spacing: 8
// Glyph tracks the level instead of sitting on
// one static step.
SIcon { width: 18; anchors.verticalCenter: parent.verticalCenter; text: brightCard.screenB >= 0.66 ? "sun" : brightCard.screenB >= 0.33 ? "sun-medium" : "sun-dim"; font.pixelSize: 16 }
PillSlider {
width: parent.width - 26
anchors.verticalCenter: parent.verticalCenter
value: brightCard.screenB
onMoved: (v) => { brightCard.screenB = v; screenBTimer.restart(); }
}
}
Row {
width: parent.width
spacing: 8
SIcon { width: 18; anchors.verticalCenter: parent.verticalCenter; text: "keyboard"; font.pixelSize: 16 }
PillSlider {
width: parent.width - 26
anchors.verticalCenter: parent.verticalCenter
value: brightCard.kbdB
onMoved: (v) => { brightCard.kbdB = v; kbdBTimer.restart(); }
}
}
Timer { id: screenBTimer; interval: 80; onTriggered: screenBSet.running = true }
// floor 1%: `set 0%` turns the panel fully off
Process { id: screenBSet; command: ["brightnessctl", "set", Math.max(1, Math.round(brightCard.screenB * 100)) + "%"] }
Timer { id: kbdBTimer; interval: 80; onTriggered: kbdBSet.running = true }
Process { id: kbdBSet; command: ["brightnessctl", "-d", "smc::kbd_backlight", "set", Math.round(brightCard.kbdB * 100) + "%"] }
Process {
id: brightRead
command: ["sh", "-c", "brightnessctl -m; brightnessctl -m -d smc::kbd_backlight"]
stdout: StdioCollector {
// machine-readable: device,class,current,percent%,max
onStreamFinished: {
for (let l of text.trim().split("\n")) {
let f = l.split(",");
if (f.length < 5) continue;
let pct = parseInt(f[3]) / 100;
if (f[0].indexOf("kbd") !== -1) brightCard.kbdB = pct;
else brightCard.screenB = pct;
}
}
}
}
}
NightlightCard { width: parent.width }
}
}
''}
${lib.optionalString (!isMacbook) ''
// Quick settings dropdown (desktop) — just the night light.
BarDropdown {
id: qsDropdown
fullWidth: qsCol.width + 2 * Theme.panelGap
fullHeight: qsCol.height + 2 * Theme.panelGap
Column {
id: qsCol
anchors.centerIn: parent
width: 240
spacing: 8
NightlightCard { width: parent.width }
}
}
''}
// Calendar popup — GNOME-style two-pane panel.
// Left: navigable month calendar + 7-day weather strip.
// Right: MPRIS media controls + notification list.
BarDropdown {
id: calPopup
// ceil: Text metrics give fractional sizes; fractional rect
// edges render as soft 2px lines
fullWidth: Math.ceil(calRow.width) + 2 * Theme.panelGap
fullHeight: Math.ceil(calRow.height + 8 + notifCard.height) + 2 * Theme.panelGap
// Month being viewed; reset to today when the popup opens
// (via the setup function passed to bar.toggleDropdown).
property int viewYear: clockText.now.getFullYear()
property int viewMonth: clockText.now.getMonth()
function resetView() {
viewYear = clockText.now.getFullYear();
viewMonth = clockText.now.getMonth();
// Runs on every open: an on-screen toast is redundant
// once the notification list is visible.
if (toastItem.visible) toastItem.hideNow();
}
function shiftMonth(d) {
let m = viewMonth + d;
if (m < 0) { viewMonth = 11; viewYear--; }
else if (m > 11) { viewMonth = 0; viewYear++; }
else viewMonth = m;
}
// --- Weather: 7-day forecast, refreshed every 30 min ---
property var weatherDays: []
Process {
id: weatherProc
command: [Commands.weatherFetch]
stdout: StdioCollector {
onStreamFinished: {
try {
let j = JSON.parse(text);
let out = [];
for (let i = 0; i < j.daily.time.length && i < 7; i++) {
out.push({
day: new Date(j.daily.time[i] + "T12:00:00").toLocaleDateString(Qt.locale(), "ddd").slice(0, 2),
code: j.daily.weather_code[i],
max: Math.round(j.daily.temperature_2m_max[i]),
min: Math.round(j.daily.temperature_2m_min[i])
});
}
if (out.length > 0) calPopup.weatherDays = out;
// Feed today's real sunrise/sunset to the
// night-light schedule (shell.qml).
if (j.daily.sunrise && j.daily.sunset) {
let sr = new Date(j.daily.sunrise[0]);
let ss = new Date(j.daily.sunset[0]);
bar.shellRoot.sunriseMins = sr.getHours() * 60 + sr.getMinutes();
bar.shellRoot.sunsetMins = ss.getHours() * 60 + ss.getMinutes();
bar.shellRoot.applyNightlight();
}
} catch (e) { /* keep previous forecast */ }
}
}
}
Timer {
interval: 1800000
running: true
repeat: true
triggeredOnStart: true
onTriggered: weatherProc.running = true
}
// WMO weather codes → Lucide. Ranges per open-meteo: 0
// clear, 1-2 partly, 3 overcast, 45-48 fog, 51-67
// drizzle/rain, 71-77 snow, 80-82 rain showers, 85-86 snow
// showers, 95+ thunder.
function weatherGlyph(code) {
if (code === 0) return "sun";
if (code <= 2) return "cloud-sun";
if (code === 3) return "cloud";
if (code <= 48) return "cloud-fog";
if (code <= 67) return "cloud-rain";
if (code <= 77) return "cloud-snow";
if (code <= 82) return "cloud-rain";
if (code <= 86) return "cloud-snow";
return "cloud-lightning";
}
// --- Media: one card per MPRIS player so Spotify, a
// browser tab, etc. stay separate instead of collapsing
// into a single combined player. ---
property var players: Mpris.players.values.filter(
p => p.trackTitle || p.playbackState === MprisPlaybackState.Playing)
// Best-effort link from an MPRIS player to its Pipewire
// audio stream (matched by app name), so a card can carry a
// volume slider via the same per-app path as the volume
// widget. null when no stream matches.
function streamFor(player) {
if (!player) return null;
// Apps are inconsistent about which property carries their
// name — Spotify doesn't fill application.name the way
// browsers do — so try every property that plausibly
// holds it, against both MPRIS names. Candidates shorter
// than 3 chars are skipped: substring matching on those
// matches almost anything.
let want = [];
let add = s => {
s = (s || "").toLowerCase();
if (s.length >= 3) want.push(s);
};
add(player.identity);
add(player.desktopEntry);
let ns = Pipewire.nodes.values;
for (let i = 0; i < ns.length; i++) {
let n = ns[i];
if (!n.isStream || !n.audio) continue;
let p = n.properties;
let cands = [
p["application.name"],
p["node.name"],
p["application.process.binary"]
];
for (let c = 0; c < cands.length; c++) {
let an = (cands[c] || "").toLowerCase();
if (an.length < 3) continue;
for (let w = 0; w < want.length; w++) {
if (an === want[w] || an.includes(want[w]) || want[w].includes(an))
return n;
}
}
}
return null;
}
// Live spectrum for the media cards' rings. cava runs only
// while this popup is open AND something is playing, so it
// isn't capturing audio in the background. levels is a
// barCount-long array of 0-100 ints, one frame per tick.
readonly property int barCount: 24
property var levels: []
Process {
id: cavaProc
running: calPopup.open && calPopup.players.length > 0
command: [Commands.cava, "-p", Commands.cavaConfig]
stdout: SplitParser {
onRead: data => {
let parts = data.split(";");
let out = [];
for (let i = 0; i < parts.length; i++) {
if (parts[i] === "") continue;
out.push(parseInt(parts[i]) || 0);
}
if (out.length > 0) calPopup.levels = out;
}
}
}
// Bars decay to flat when cava stops, so a paused card
// doesn't keep the last frame frozen around the disc.
onOpenChanged: if (!open) levels = []
Row {
id: calRow
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
anchors.topMargin: 12
spacing: 16
opacity: calPopup.open ? 1.0 : 0.0
Behavior on opacity {
NumberAnimation { duration: 150; easing.type: Easing.OutCubic }
}
// ── Left pane: calendar card + weather card ──
Column {
id: calLeftCol
width: 7 * 32 + 16
spacing: 8
// Calendar card
Card {
width: parent.width
// Month header: ‹ [Month Year] › — label click jumps to today
Item {
width: parent.width
height: 28
HoverRow {
width: 28; height: 28; radius: Theme.radiusSmall
anchors.left: parent.left
onClicked: calPopup.shiftMonth(-1)
SIcon {
anchors.centerIn: parent
text: "chevron-left"
color: Theme.base05
font.pixelSize: 18
}
}
SText {
anchors.centerIn: parent
text: new Date(calPopup.viewYear, calPopup.viewMonth, 1).toLocaleDateString(Qt.locale(), "MMMM yyyy")
color: Theme.base05
font.pixelSize: 14
font.weight: Font.Medium
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: calPopup.resetView()
}
}
HoverRow {
width: 28; height: 28; radius: Theme.radiusSmall
anchors.right: parent.right
onClicked: calPopup.shiftMonth(1)
SIcon {
anchors.centerIn: parent
text: "chevron-right"
color: Theme.base05
font.pixelSize: 18
}
}
}
Row {
spacing: 0
Repeater {
model: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"]
SText {
required property var modelData
width: 32
horizontalAlignment: Text.AlignHCenter
text: modelData
color: Theme.base04
font.pixelSize: 13
}
}
}
Grid {
columns: 7
spacing: 0
Repeater {
model: 42
Rectangle {
required property int index
property int dayNum: {
let first = new Date(calPopup.viewYear, calPopup.viewMonth, 1);
let startDay = (first.getDay() + 6) % 7;
return index - startDay + 1;
}
property int daysInMonth: new Date(calPopup.viewYear, calPopup.viewMonth + 1, 0).getDate()
property bool isToday: dayNum === clockText.now.getDate()
&& calPopup.viewMonth === clockText.now.getMonth()
&& calPopup.viewYear === clockText.now.getFullYear()
width: 32
height: 26
radius: Theme.radiusTiny
color: isToday ? Theme.base03 : "transparent"
SText {
anchors.centerIn: parent
text: parent.dayNum >= 1 && parent.dayNum <= parent.daysInMonth ? parent.dayNum.toString() : ""
color: parent.isToday ? Theme.base05 : Theme.base04
font.pixelSize: 13
}
}
}
}
}
// Weather card
Rectangle {
width: parent.width
height: weatherRow.height + 16
radius: Theme.radiusCard
color: Theme.cardBg
visible: calPopup.weatherDays.length > 0
Row {
id: weatherRow
anchors.top: parent.top
anchors.topMargin: 8
anchors.horizontalCenter: parent.horizontalCenter
Repeater {
model: calPopup.weatherDays
Column {
required property var modelData
width: 32
spacing: 2
SText {
anchors.horizontalCenter: parent.horizontalCenter
text: modelData.day
color: Theme.base04
font.pixelSize: 10
}
SIcon {
anchors.horizontalCenter: parent.horizontalCenter
text: calPopup.weatherGlyph(modelData.code)
color: Theme.base0D
font.pixelSize: 16
}
SText {
anchors.horizontalCenter: parent.horizontalCenter
text: modelData.max + "°"
color: Theme.base05
font.pixelSize: 10
}
SText {
anchors.horizontalCenter: parent.horizontalCenter
text: modelData.min + "°"
color: Theme.base03
font.pixelSize: 10
}
}
}
}
}
}
// ── Right pane: media + notifications ──
Column {
id: calRightCol
width: 300
spacing: 8
// Media player cards — one per active MPRIS source,
// so Spotify and a browser tab stay separate.
Repeater {
model: calPopup.players
Rectangle {
id: mediaCard
required property var modelData
property var pwNode: calPopup.streamFor(modelData)
// xesam:url is the only field that says where
// the audio actually comes from; identity just
// names the browser.
readonly property string pageUrl: {
let md = modelData.metadata || ({});
return md["xesam:url"] || "";
}
property string faviconUrl: ""
function refreshFavicon() {
faviconUrl = "";
// Rewriting a live command truncates the
// read, so skip while one is in flight.
if (pageUrl !== "" && !faviconProc.running)
faviconProc.running = true;
}
onPageUrlChanged: refreshFavicon()
Component.onCompleted: refreshFavicon()
Process {
id: faviconProc
command: [Commands.faviconFetch, mediaCard.pageUrl]
stdout: StdioCollector {
onStreamFinished: mediaCard.faviconUrl = text.trim()
}
}
width: parent.width
height: mediaCol.height + 16
radius: Theme.radiusCard
color: Theme.cardBg
PwObjectTracker { objects: mediaCard.pwNode ? [mediaCard.pwNode] : [] }
Column {
id: mediaCol
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.margins: 8
spacing: 8
// Album art with title + artist to its
// right; controls and volume below.
Row {
width: parent.width
spacing: 12
// Vinyl: cover art is the disc label,
// spinning while playback runs, ringed
// by cava's spectrum. Kept at 128 so
// the row's text column is unaffected.
Item {
id: vinyl
width: 128; height: 128
anchors.verticalCenter: parent.verticalCenter
readonly property real discSize: 86
readonly property real ringR: 47
// Same expression the play/pause button
// uses, so the disc can never disagree
// with the glyph next to it.
readonly property bool spinning:
mediaCard.modelData.playbackState === MprisPlaybackState.Playing
// Spectrum ring. Each bar sits with
// its base on the ring and grows
// outward, then is rotated about the
// disc centre into its slot.
Repeater {
model: calPopup.barCount
Rectangle {
id: eqBar
required property int index
// cava hears the whole output mix,
// not this stream, so a paused
// card must flatten its own ring —
// otherwise every card dances to
// whatever else is playing.
readonly property real lvl:
(vinyl.spinning
&& index < calPopup.levels.length)
? calPopup.levels[index] / 100 : 0
width: 3
radius: 1.5
height: 3 + lvl * 13
color: Theme.base0D
opacity: 0.35 + lvl * 0.65
x: vinyl.width / 2 - width / 2
y: vinyl.height / 2 - vinyl.ringR - height
transform: Rotation {
origin.x: eqBar.width / 2
origin.y: vinyl.ringR + eqBar.height
angle: eqBar.index * (360 / calPopup.barCount)
}
Behavior on height {
NumberAnimation { duration: 90; easing.type: Easing.OutQuad }
}
}
}
ClippingRectangle {
id: disc
anchors.centerIn: parent
width: vinyl.discSize
height: vinyl.discSize
radius: width / 2
color: Theme.base01
// Art-less fallback: a dark record with
// faint grooves. Deliberately low
// contrast — this is a placeholder, it
// shouldn't out-shout the actual
// covers it stands in for. Grooves are
// eccentric by 1px so they visibly
// turn; concentric rings look static
// while spinning.
Item {
id: blankLabel
anchors.fill: parent
visible: albumArt.status !== Image.Ready
Repeater {
model: 4
Rectangle {
required property int index
anchors.centerIn: parent
anchors.horizontalCenterOffset: 3
width: vinyl.discSize - 8 - index * 11
height: width
radius: width / 2
color: "transparent"
border.width: 1
border.color: Theme.base03
opacity: 0.22
}
}
}
Image {
id: albumArt
anchors.fill: parent
fillMode: Image.PreserveAspectCrop
asynchronous: true
source: mediaCard.modelData.trackArtUrl
}
// paused (not stopped) so resuming
// picks up at the current angle
// instead of snapping back to 0.
NumberAnimation on rotation {
from: 0; to: 360
duration: 8000
loops: Animation.Infinite
running: true
paused: !vinyl.spinning
}
}
// Label content sits outside the rotating
// disc so the favicon stays upright —
// only the grooves turn. Doubles as the
// record's centre label, so no spindle
// hole is drawn over it.
Item {
anchors.centerIn: parent
width: 38; height: 38
visible: albumArt.status !== Image.Ready
Rectangle {
anchors.fill: parent
radius: width / 2
color: Theme.base02
}
// Circular crop: most favicons are a
// square plate on their own dark
// background, which fights the disc.
ClippingRectangle {
anchors.centerIn: parent
width: 24; height: 24
radius: width / 2
color: "transparent"
Image {
id: faviconImg
anchors.fill: parent
fillMode: Image.PreserveAspectCrop
asynchronous: true
smooth: true
mipmap: true
visible: status === Image.Ready
source: mediaCard.faviconUrl
}
}
SIcon {
anchors.centerIn: parent
visible: faviconImg.status !== Image.Ready
text: sourceBadge.glyph !== "" ? sourceBadge.glyph : "music"
color: Theme.base04
font.pixelSize: 15
}
}
// Spindle hole, only over real artwork —
// the blank label already owns the centre.
Rectangle {
anchors.centerIn: parent
visible: albumArt.status === Image.Ready
width: 14; height: 14
radius: 7
color: Theme.cardBg
border.width: 1
border.color: Theme.base03
}
// Source badge. MPRIS identity only ever
// names the browser, so the site comes
// from xesam:url in the raw metadata —
// the one field that actually says where
// the audio is from.
Rectangle {
id: sourceBadge
readonly property string glyph: {
let md = mediaCard.modelData.metadata || ({});
let u = (md["xesam:url"] || "").toLowerCase();
let ident = (mediaCard.modelData.identity || "").toLowerCase();
if (u.indexOf("youtube.com") >= 0 || u.indexOf("youtu.be") >= 0) return "youtube";
if (u.indexOf("twitch.tv") >= 0) return "twitch";
// Jellyfin: our own server, no
// public hostname to match on.
if (u.indexOf(":8096") >= 0 || u.indexOf("jellyfin") >= 0) return "clapperboard";
if (ident.indexOf("mpv") >= 0 || ident.indexOf("vlc") >= 0) return "film";
if (u.indexOf("file://") === 0) return "music";
return "";
}
visible: sourceBadge.glyph !== ""
width: 22; height: 22
radius: 11
color: Theme.cardBg
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.margins: 6
SIcon {
anchors.centerIn: parent
text: sourceBadge.glyph
color: Theme.base05
font.pixelSize: 14
}
}
}
Column {
width: parent.width - 128 - 12
anchors.verticalCenter: parent.verticalCenter
spacing: 2
SText {
width: parent.width
text: mediaCard.modelData.trackTitle
color: Theme.base05
font.pixelSize: 13
font.weight: Font.Medium
elide: Text.ElideRight
}
SText {
width: parent.width
text: mediaCard.modelData.trackArtist
color: Theme.base04
font.pixelSize: 11
elide: Text.ElideRight
}
}
}
// Transport controls, centered below.
Item {
width: parent.width
height: 36
Row {
anchors.centerIn: parent
spacing: 4
Repeater {
model: [
{ glyph: "skip-back", act: "prev" },
{ glyph: mediaCard.modelData.playbackState === MprisPlaybackState.Playing ? "pause" : "play", act: "toggle" },
{ glyph: "skip-forward", act: "next" }
]
HoverRow {
id: mediaBtn
required property var modelData
width: 36; height: 36; radius: 18
onClicked: {
let p = mediaCard.modelData;
if (!p) return;
if (mediaBtn.modelData.act === "prev") p.previous();
else if (mediaBtn.modelData.act === "next") p.next();
else p.togglePlaying();
}
SIcon {
anchors.centerIn: parent
text: mediaBtn.modelData.glyph
color: Theme.base05
font.pixelSize: 24
}
}
}
}
}
// Per-source volume — same per-app path
// as the volume widget. Shown when the
// player's Pipewire stream is matched.
Row {
width: parent.width
spacing: 8
visible: mediaCard.pwNode !== null && mediaCard.pwNode.audio !== null
VolIcon {
anchors.verticalCenter: parent.verticalCenter
width: 18
color: Theme.base04
font.pixelSize: 15
audioNode: mediaCard.pwNode ? mediaCard.pwNode.audio : null
}
PillSlider {
width: parent.width - 18 - mediaVolLabel.width - 16
anchors.verticalCenter: parent.verticalCenter
height: 16
trackH: 4
value: mediaCard.pwNode && mediaCard.pwNode.audio ? Math.min(1, mediaCard.pwNode.audio.volume) : 0
fillColor: mediaCard.pwNode && mediaCard.pwNode.audio && mediaCard.pwNode.audio.muted ? Theme.base03 : Theme.base0D
onMoved: (v) => { if (mediaCard.pwNode && mediaCard.pwNode.audio) mediaCard.pwNode.audio.volume = v; }
}
SText {
id: mediaVolLabel
width: 36
text: mediaCard.pwNode && mediaCard.pwNode.audio ? Math.round(mediaCard.pwNode.audio.volume * 100) + "%" : "0%"
color: Theme.base04
font.pixelSize: 10
horizontalAlignment: Text.AlignRight
anchors.verticalCenter: parent.verticalCenter
}
}
}
}
}
}
}
// ── Notifications: spans both columns, below the panes.
// Header + one Card per notification, matching the media
// cards instead of base02 blocks nested inside a big card.
Column {
id: notifCard
anchors.top: calRow.bottom
anchors.topMargin: 8
anchors.horizontalCenter: parent.horizontalCenter
width: calRow.width
opacity: calRow.opacity
spacing: 8
Item {
width: parent.width
height: 20
SText {
anchors.left: parent.left
anchors.leftMargin: Theme.cardPad
anchors.verticalCenter: parent.verticalCenter
text: "Notifications"
font.weight: Font.Medium
}
SText {
anchors.right: parent.right
anchors.rightMargin: Theme.cardPad
anchors.verticalCenter: parent.verticalCenter
text: bar.notifServer.trackedNotifications.values.length > 0 ? "Clear all" : ""
color: Theme.base04
font.pixelSize: 11
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
let notifs = bar.notifServer.trackedNotifications.values;
for (let i = notifs.length - 1; i >= 0; i--) {
notifs[i].dismiss();
}
}
}
}
}
SText {
visible: bar.notifServer.trackedNotifications.values.length === 0
text: "No notifications"
color: Theme.base03
font.pixelSize: 11
anchors.horizontalCenter: parent.horizontalCenter
}
Repeater {
model: bar.notifServer.trackedNotifications
Card {
id: notifItem
required property var modelData
readonly property string previewSource: bar.notifPreviewSource(notifItem.modelData)
width: parent.width
Item {
width: parent.width
height: Math.max(notifPreview.visible ? 48 : 0, ncBody.height)
// Image preview (album art, screenshot thumb…)
ClippingRectangle {
id: notifPreview
visible: notifItem.previewSource !== ""
anchors.left: parent.left
anchors.top: parent.top
width: 48; height: 48
radius: Theme.radiusTiny
color: Theme.base01
Image {
anchors.fill: parent
fillMode: Image.PreserveAspectCrop
source: notifItem.previewSource
}
}
NotifContent {
id: ncBody
notif: notifItem.modelData
anchors.left: notifPreview.visible ? notifPreview.right : parent.left
anchors.leftMargin: notifPreview.visible ? 8 : 0
anchors.right: dismissBtn.left
anchors.rightMargin: 8
anchors.top: parent.top
}
SIcon {
id: dismissBtn
anchors.right: parent.right
anchors.top: parent.top
text: "x"
color: dismissMa.containsMouse ? Theme.base05 : Theme.base03
font.pixelSize: 15
MouseArea {
id: dismissMa
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: notifItem.modelData.dismiss()
}
}
}
}
}
}
}
// ── OSD: volume / brightness level, shown inline in the bar's
// empty middle — the gap between the two clusters exists for
// this. Volume is reactive: Pipewire reports changes from any
// source (media keys, pavucontrol, a hardware mixer), so no IPC
// is needed. Brightness arrives via shellRoot's signal instead,
// because sysfs backlight notifies with POLLPRI, which inotify
// never sees. Focused monitor only.
Item {
id: osdItem
readonly property bool isFocused: Hyprland.focusedMonitor
&& Hyprland.focusedMonitor.name === bar.screen.name
// Every binding evaluates once at load; arm on a delay so
// a shell restart doesn't flash the slider on screen.
property bool armed: false
property bool shown: false
property string icon: "volume-2"
property real value: 0
property color fill: Theme.base0D
// Takes over the server glance's slot: fixed position, no
// dependence on how tall the workspace column has grown.
width: Theme.barWidth
height: 170
anchors.horizontalCenter: barBgRect.horizontalCenter
anchors.verticalCenter: srvWidget.verticalCenter
opacity: shown ? 1 : 0
visible: opacity > 0.01
Behavior on opacity {
NumberAnimation { duration: Theme.animContent; easing.type: Easing.OutCubic }
}
function show(ic, v, f) {
if (!armed || !isFocused) return;
icon = ic;
value = v;
fill = f;
shown = true;
osdTimer.restart();
}
Timer { id: osdTimer; interval: 1600; onTriggered: osdItem.shown = false }
Timer { id: osdArm; interval: 1500; running: true; onTriggered: osdItem.armed = true }
function showVolume() {
// The volume dropdown already shows the level live.
if (bar.activeDropdown === volDropdown) return;
show(volWidget.volIcon, volWidget.vol / 100,
volWidget.muted ? Theme.base03 : Theme.base0D);
}
Connections {
target: volWidget.sink && volWidget.sink.audio ? volWidget.sink.audio : null
// `volume` notifies through volumesChanged, not
// volumeChanged — it is a view over the per-channel
// volumes vector.
function onVolumesChanged() { osdItem.showVolume(); }
function onMutedChanged() { osdItem.showVolume(); }
}
Connections {
target: bar.shellRoot
function onOsdBrightness(icon, value) {
osdItem.show(icon, value, Theme.base0D);
}
}
// Card body so the OSD reads as a surface, not floating
// marks on the bar. Scales in from slightly small.
Rectangle {
anchors.centerIn: parent
width: 36
height: osdCol.height + 2 * Theme.cardPad
radius: Theme.radiusSmall
color: Theme.cardBg
scale: osdItem.shown ? 1 : 0.85
Behavior on scale {
NumberAnimation { duration: Theme.animMorph; easing.type: Easing.OutExpo }
}
Column {
id: osdCol
anchors.centerIn: parent
spacing: 6
SText {
anchors.horizontalCenter: parent.horizontalCenter
text: Math.round(Math.max(0, Math.min(1, osdItem.value)) * 100)
color: Theme.base04
font.pixelSize: 11
}
// Vertical track — fill grows upward from the bottom.
// PillSlider is horizontal-only, so this is its own
// rather than a rotated instance.
Rectangle {
anchors.horizontalCenter: parent.horizontalCenter
width: 12
height: 96
radius: 6
color: Theme.base02
Rectangle {
anchors.bottom: parent.bottom
width: parent.width
height: Math.max(parent.width,
parent.height * Math.max(0, Math.min(1, osdItem.value)))
radius: parent.radius
color: osdItem.fill
Behavior on height {
NumberAnimation { duration: 140; easing.type: Easing.OutCubic }
}
}
}
SIcon {
anchors.horizontalCenter: parent.horizontalCenter
text: osdItem.icon
color: Theme.base05
font.pixelSize: 16
}
}
}
}
// ── Notification Toast (only on primary screen) ──
Item {
id: toastItem
visible: false
property var currentNotif: null
property bool toastOpen: false
readonly property var mutedApps: ["discord", "Discord", "Vesktop", "vesktop", "Spotify", "spotify", "spotify_player", "spotify-player", "vlc", "mpv"]
readonly property bool isPrimary: bar.screen === Quickshell.screens[0]
x: Theme.barWidth
y: Theme.frameWidth + 8
width: _toastRect.width + 4
height: _toastRect.height + 16
Process {
id: notifSoundProc
command: [Commands.notifSound, "-i", "message"]
}
Connections {
target: bar.shellRoot
function onNotificationReceived() {
if (!toastItem.isPrimary) return;
let n = bar.shellRoot.latestNotification;
// Popup open: the notification list is already on
// screen — play the sound but skip the toast.
if (calPopup.visible) {
if (!toastItem.mutedApps.includes(n.appName)) {
notifSoundProc.running = true;
}
return;
}
toastItem.showToast(n);
}
}
function showToast(notification) {
currentNotif = notification;
visible = true;
toastOpen = true;
_toastTimer.restart();
if (!mutedApps.includes(notification.appName)) {
notifSoundProc.running = true;
}
}
function dismiss() {
toastOpen = false;
_toastCloseDelay.start();
}
// Instant hide, no close animation
function hideNow() {
_toastTimer.stop();
_toastCloseDelay.stop();
toastOpen = false;
visible = false;
}
Timer {
id: _toastTimer
interval: 5000
onTriggered: toastItem.dismiss()
}
Timer {
id: _toastCloseDelay
interval: 230
onTriggered: { toastItem.visible = false; toastItem.toastOpen = false; }
}
HoverHandler {
onHoveredChanged: {
if (hovered) _toastTimer.stop();
else _toastTimer.restart();
}
}
Item {
id: _toastRect
anchors.left: parent.left
anchors.top: parent.top
anchors.topMargin: 8
// Reveals rightward now, so width is the animated axis
// and the card inside keeps a fixed width (otherwise it
// would squash instead of being wiped in).
width: toastItem.toastOpen ? 320 : 0
height: toastCard.height + 2 * Theme.panelGap
clip: true
Behavior on width {
NumberAnimation { duration: Theme.animMorph; easing.type: Easing.OutExpo }
}
// Notification sits in a cardBg card like every other
// dropdown surface, inset panelGap from the melt panel.
Rectangle {
id: toastCard
anchors.top: parent.top
anchors.left: parent.left
anchors.margins: Theme.panelGap
width: 320 - 2 * Theme.panelGap
height: Math.max(toastPreview.visible ? 48 : 0, toastCol.height) + 16
radius: Theme.radiusCard
color: Theme.cardBg
property string previewSource: bar.notifPreviewSource(toastItem.currentNotif)
// Image preview (screenshot thumb, album art…)
ClippingRectangle {
id: toastPreview
visible: toastCard.previewSource !== ""
anchors.left: parent.left
anchors.top: parent.top
anchors.margins: 8
width: 48; height: 48
radius: Theme.radiusTiny
color: Theme.base01
Image {
anchors.fill: parent
fillMode: Image.PreserveAspectCrop
source: toastCard.previewSource
}
}
NotifContent {
id: toastCol
notif: toastItem.currentNotif
anchors.left: toastPreview.visible ? toastPreview.right : parent.left
anchors.right: toastDismiss.left
anchors.top: parent.top
anchors.margins: 8
onActionInvoked: toastItem.dismiss()
}
SIcon {
id: toastDismiss
anchors.right: parent.right
anchors.top: parent.top
anchors.margins: 8
text: "x"
color: toastDismissMa.containsMouse ? Theme.base05 : Theme.base03
font.pixelSize: 15
MouseArea {
id: toastDismissMa
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: { toastItem.currentNotif.dismiss(); toastItem.dismiss(); }
}
}
}
}
}
}
'';
};
};
};
};
}
Reference in a new issue View git blame Copy permalink