From da22b6446d632d0055dab9ed6abaf4af706eb499 Mon Sep 17 00:00:00 2001 From: Tetardtek Date: Thu, 26 Mar 2026 08:58:33 +0100 Subject: [PATCH] =?UTF-8?q?fix(ags-v3):=20audit=20fixes=20=E2=80=94=20port?= =?UTF-8?q?able=20brain=20path,=20reactive=20volume,=20SCSS=20dedup?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - brain.ts: BRAIN_ROOT résolu via $BRAIN_ROOT env / ~/.config/brain-path / fallback ~/Dev/Brain - Volume.tsx: bindings volume + mute séparés et réactifs - style.scss: importe _bar.scss et _heartbeat.scss via @use, supprime 199 lignes dupliquées --- ags-v3/lib/brain.ts | 4 +- ags-v3/style.scss | 199 +------------------------------ ags-v3/styles/_bar.scss | 93 ++++++++++++--- ags-v3/widget/modules/Volume.tsx | 7 +- 4 files changed, 86 insertions(+), 217 deletions(-) diff --git a/ags-v3/lib/brain.ts b/ags-v3/lib/brain.ts index 54060aa..fcf0f1c 100644 --- a/ags-v3/lib/brain.ts +++ b/ags-v3/lib/brain.ts @@ -1,6 +1,8 @@ import GLib from "gi://GLib" -const BRAIN_ROOT = "/home/tetardtek/Dev/Cortex-Template" +const BRAIN_ROOT = GLib.getenv("BRAIN_ROOT") + || readFile(GLib.get_home_dir() + "/.config/brain-path")?.trim() + || GLib.get_home_dir() + "/Dev/Brain" export interface BrainState { focus: string diff --git a/ags-v3/style.scss b/ags-v3/style.scss index 31f59ff..6f603b7 100644 --- a/ags-v3/style.scss +++ b/ags-v3/style.scss @@ -1,4 +1,6 @@ @use "styles/palette" as *; +@use "styles/heartbeat"; +@use "styles/bar"; * { font-family: $font; @@ -6,203 +8,6 @@ font-weight: bold; } -// ── Layer 0 — Heartbeat ── -window.Heartbeat { - background: transparent; - - .heartbeat-line { - background: linear-gradient( - to right, - rgba(255, 77, 166, 0.0), - rgba(255, 77, 166, 0.6), - rgba(201, 160, 255, 0.8), - rgba(255, 77, 166, 0.6), - rgba(255, 77, 166, 0.0) - ); - min-height: 4px; - } -} - -// ── Layer 1 — Ghost Bar ── -window.Bar { - background: transparent; - - > centerbox { - background: rgba(38, 21, 55, 0.88); - border-radius: $radius; - border: 3px solid rgba(255, 77, 166, 0.60); - margin: 6px 8px; - padding: 0 8px; - min-height: 38px; - } - - .modules-left, - .modules-center, - .modules-right { - padding: 0 4px; - } - - .module { - padding: 0 8px; - color: $text; - } - - .prompt-name { - color: $magenta; - font-size: 14px; - padding: 0 0 0 10px; - } - - .prompt-cursor { - color: $lilac; - font-size: 14px; - font-weight: 900; - } - - .separator { - color: rgba(240, 234, 248, 0.12); - font-size: 11px; - padding: 0 4px; - font-weight: normal; - } - - // ── clock ── - .clock { - color: $magenta; - font-weight: 900; - font-size: 14px; - letter-spacing: 0.04em; - padding: 0 10px; - } - - .date { - color: $lavande; - font-size: 12px; - font-weight: normal; - padding: 0 10px 0 2px; - } - - // ── system stats ── - .cpu { - color: $lavande; - &.warning { color: $champagne; } - &.critical { color: $danger; } - } - - .ram { - color: $magenta; - &.warning { color: $champagne; } - &.critical { color: $danger; } - } - - // ── network ── - .network { - color: $lavande; - font-size: 12px; - padding: 0 8px; - &.disconnected { color: $danger; } - } - - // ── volume ── - .volume { - color: $magenta; - padding: 0 8px; - &.muted { color: rgba(255, 77, 166, 0.30); } - } - - // ── battery ── - .battery { - color: $magenta; - padding: 0 8px; - &.charging { color: $mitsuri; } - &.low { color: $danger; } - &.warning { color: $champagne; } - } - - // ── hover effects ── - .module:hover, - .cpu:hover, - .ram:hover, - .network:hover, - .battery:hover { - color: $lilac; - } - - // ── systray ── - .systray { - padding: 0 4px; - } - - .systray-item { - background: transparent; - border: none; - padding: 0 3px; - min-width: 0; - min-height: 0; - - &:hover { - background: rgba(201, 160, 255, 0.12); - border-radius: $radius-sm; - } - } - - // ── volume interactive ── - button.volume, - button.muted { - background: transparent; - border: none; - padding: 0 8px; - min-width: 0; - min-height: 0; - - label { color: $magenta; } - &.muted label { color: rgba(255, 77, 166, 0.30); } - &:hover label { color: $lilac; } - } - - // ── media ── - .media-module { - padding: 0 4px; - } - - .media { - padding: 0 4px; - } - - .media.paused { - .media-text { - color: rgba(201, 160, 255, 0.50); - font-style: italic; - } - } - - .media-text { - color: $lilac; - font-size: 12px; - font-weight: normal; - padding: 0 6px; - } - - .media-prev, - .media-play, - .media-next { - background: transparent; - border: none; - padding: 0 3px; - min-width: 0; - min-height: 0; - - label { - color: $lilac; - font-size: 13px; - } - - &:hover label { - color: $magenta; - } - } -} - // ── Layer 3 — Brain Power Panel ── window.BrainPower { background: transparent; diff --git a/ags-v3/styles/_bar.scss b/ags-v3/styles/_bar.scss index 7fd969a..f5f7802 100644 --- a/ags-v3/styles/_bar.scss +++ b/ags-v3/styles/_bar.scss @@ -1,7 +1,6 @@ @use "palette" as *; // Layer 1 — Ghost bar (hover reveal) -// GTK CSS alpha() must be unquoted strings to pass through SCSS compiler window.Bar { background: transparent; @@ -24,10 +23,18 @@ window.Bar { .module { padding: 0 8px; color: $text; + } - &:hover { - color: $lilac; - } + .prompt-name { + color: $magenta; + font-size: 14px; + padding: 0 0 0 10px; + } + + .prompt-cursor { + color: $lilac; + font-size: 14px; + font-weight: 900; } .separator { @@ -44,8 +51,6 @@ window.Bar { font-size: 14px; letter-spacing: 0.04em; padding: 0 10px; - - &:hover { color: $lilac; } } .date { @@ -55,7 +60,7 @@ window.Bar { padding: 0 10px 0 2px; } - // ── system ── + // ── system stats ── .cpu { color: $lavande; } .ram { color: $magenta; } .temp { @@ -73,39 +78,93 @@ window.Bar { .network { color: $lavande; font-size: 12px; + padding: 0 8px; &.disconnected { color: $danger; } } // ── volume ── - .volume { - color: $magenta; - &.muted { color: rgba(255, 77, 166, 0.30); } + button.volume, + button.muted { + background: transparent; + border: none; + padding: 0 8px; + min-width: 0; + min-height: 0; + + label { color: $magenta; } + &.muted label { color: rgba(255, 77, 166, 0.30); } + &:hover label { color: $lilac; } } // ── battery ── .battery { color: $magenta; + padding: 0 8px; &.charging { color: $mitsuri; } &.low { color: $danger; } &.warning { color: $champagne; } } // ── media ── - .media { - color: $lilac; - font-size: 12px; - font-weight: normal; - padding: 0 10px; + .media-module { + padding: 0 4px; + } - &.paused { + .media { + padding: 0 4px; + + &.paused .media-text { color: rgba(201, 160, 255, 0.50); // $lilac @ 0.50 font-style: italic; } } + .media-text { + color: $lilac; + font-size: 12px; + font-weight: normal; + padding: 0 6px; + } + + .media-prev, + .media-play, + .media-next { + background: transparent; + border: none; + padding: 0 3px; + min-width: 0; + min-height: 0; + + label { color: $lilac; font-size: 13px; } + &:hover label { color: $magenta; } + } + // ── systray ── .systray { - padding: 0 6px; + padding: 0 4px; + } + + .systray-item { + background: transparent; + border: none; + padding: 0 3px; + min-width: 0; + min-height: 0; + + &:hover { + background: rgba(201, 160, 255, 0.12); + border-radius: $radius-sm; + } + } + + // ── hover effects ── + .module:hover, + .clock:hover, + .cpu:hover, + .ram:hover, + .network:hover, + .battery:hover { + color: $lilac; } // ── workspaces ── diff --git a/ags-v3/widget/modules/Volume.tsx b/ags-v3/widget/modules/Volume.tsx index a7574cf..366fc58 100644 --- a/ags-v3/widget/modules/Volume.tsx +++ b/ags-v3/widget/modules/Volume.tsx @@ -4,7 +4,10 @@ import { createBinding } from "ags" export default function Volume() { const speaker = AstalWp.get_default()!.defaultSpeaker! - const text = createBinding(speaker, "volume")((v: number) => { + const volume = createBinding(speaker, "volume") + const mute = createBinding(speaker, "mute") + + const text = volume((v: number) => { const pct = Math.round(v * 100) const muted = speaker.mute let icon = "󰕾" @@ -16,7 +19,7 @@ export default function Volume() { return `${icon} ${pct}%` }) - const cls = createBinding(speaker, "mute")((m: boolean) => + const cls = mute((m: boolean) => m ? "volume muted" : "volume" )