fix(ags-v3): audit fixes — portable brain path, reactive volume, SCSS dedup
- 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
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 ──
|
||||
|
||||
@@ -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"
|
||||
)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user