kalle
/
dotfiles
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

New bars

main
kalle 2025-03-29 12:56:38 +01:00
parent 4ecf1e471f
commit 9b2b73e865
23 changed files with 252 additions and 633 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
hosts/kalle-pc/default.nix
View File

@ -22,6 +22,7 @@
../../modules/zen-browser.nix
../../modules/steam.nix
../../modules/nvim
../../modules/ags
../../modules/grayjay.nix
../../modules/signal.nix
];
@ -87,7 +88,7 @@
];
autoStart = [
"${pkgs.ags}/bin/ags"
"uwsm-app -- ags run"
(mkUwsmApp inputs.zen-browser.packages.x86_64-linux.default "zen")
(mkUwsmApp pkgs.discord "discord")
];

7
modules/ags/config/app.ts
View File

@ -1,10 +1,15 @@
import { App } from "astal/gtk3"
import style from "./style.scss"
import LeftBar from "./widget/LeftBar"
import RightBar from "./widget/RightBar"
const LEFT_DISPLAY = "HF237"
const RIGHT_DISPLAY = "LCDTV16"
App.start({
css: style,
main() {
App.get_monitors().map(LeftBar)
LeftBar(App.get_monitors().find(it => it.get_model() == LEFT_DISPLAY)!);
RightBar(App.get_monitors().find(it => it.get_model() == RIGHT_DISPLAY)!);
},
})

95
modules/ags/config/style.scss
View File

@ -1,18 +1,97 @@
// https://gitlab.gnome.org/GNOME/gtk/-/blob/gtk-3-24/gtk/theme/Adwaita/_colors-public.scss
$fg-color: #{"@theme_fg_color"};
$bg-color: #{"@theme_bg_color"};
@use 'sass:color';
@import "themes/catpuccin.scss";
window.Bar {
background: transparent;
color: $fg-color;
color: $ctp-text;
>centerbox {
background: $bg-color;
background: $ctp-base;
border-radius: 5px;
margin: 8px;
>box {
margin: 4px;
}
padding: 8px;
}
}
.Time {
background: $ctp-surface-0;
border-radius: 5px;
>.icon {
background: $ctp-red;
color: $ctp-surface-0;
padding: 6px 8px;
font-size: 18px;
}
&.icon-left>.icon {
border-radius: 5px 0 0 5px;
}
&.icon-right>.icon {
border-radius: 0 5px 5px 0;
}
>.label {
padding: 0 8px;
font-size: 16px;
}
}
.Workspaces {
background: $ctp-surface-0;
border-radius: 5px;
>.icon {
background: $ctp-blue;
color: $ctp-surface-0;
padding: 6px 8px;
font-size: 18px;
}
&.icon-left>.icon {
border-radius: 5px 0 0 5px;
}
&.icon-right>.icon {
border-radius: 0 5px 5px 0;
}
>.labels {
padding: 0 8px;
font-size: 16px;
button {
all: unset;
&.add {
font-size: 12px;
margin-left: 4px;
}
}
}
}
.Systray {
background: $ctp-surface-0;
border-radius: 5px;
>.icon {
background: $ctp-green;
color: $ctp-surface-0;
padding: 4px 8px 0 8px;
font-size: 20px;
border-radius: 5px 0 0 5px;
}
&.icon-left>.icon {
border-radius: 5px 0 0 5px;
}
&.icon-right>.icon {
border-radius: 0 5px 5px 0;
}
>.item {
all: unset;
padding: 8px 8px;
}
}

27
modules/ags/config/themes/catpuccin.scss Normal file
View File

@ -0,0 +1,27 @@
$ctp-rosewater: #f5e0dc;
$ctp-flamingo: #f2cdcd;
$ctp-pink: #f5c2e7;
$ctp-mauve: #cba6f7;
$ctp-red: #f38ba8;
$ctp-maroon: #eba0ac;
$ctp-peach: #fab387;
$ctp-yellow: #f9e2af;
$ctp-green: #a6e3a1;
$ctp-teal: #94e2d5;
$ctp-sky: #89dceb;
$ctp-sapphire: #74c7ec;
$ctp-blue: #89b4fa;
$ctp-lavender: #b4befe;
$ctp-text: #cdd6f4;
$ctp-subtext-1: #bac2de;
$ctp-subtext-0: #a6adc8;
$ctp-overlay-2: #9399b2;
$ctp-overlay-1: #7f849c;
$ctp-overlay-0: #6c7086;
$ctp-surface-2: #585b70;
$ctp-surface-1: #45475a;
$ctp-surface-0: #313244;
$ctp-base: #1e1e2e;
$ctp-mantle: #181825;
$ctp-crust: #11111b;

18
modules/ags/config/widget/Clock.tsx Normal file
View File

@ -0,0 +1,18 @@
import { GLib, Variable } from "astal"
const TIME_FORMAT = "%H:%M"
export default function Clock(props: { iconSide: "left" | "right" }) {
const time = Variable<string>("").poll(1000, () =>
GLib.DateTime.new_now_local().format(TIME_FORMAT)!)
return <box className={`Time icon-${props.iconSide}`}>
{props.iconSide == "left" && <label className="icon" label="" />}
<label
className="label"
onDestroy={() => time.drop()}
label={time()}
/>
{props.iconSide == "right" && <label className="icon" label="" />}
</box>
}

30
modules/ags/config/widget/LeftBar.tsx
View File

@ -1,5 +1,6 @@
import { App, Astal, Gdk, Gtk } from "astal/gtk3";
import Systray from "./Systray";
import Clock from "./Clock";
import Workspaces from "./Workspaces";
export default function LeftBar(gdkmonitor: Gdk.Monitor) {
const { TOP, LEFT, RIGHT } = Astal.WindowAnchor;
@ -11,25 +12,14 @@ export default function LeftBar(gdkmonitor: Gdk.Monitor) {
anchor={TOP | LEFT | RIGHT}
application={App}>
<centerbox>
<Left />
<Center />
<Right />
<box halign={Gtk.Align.START}>
</box>
<box halign={Gtk.Align.CENTER}>
<Workspaces monitor="HDMI-A-2" iconSide="right" />
</box>
<box halign={Gtk.Align.END}>
<Clock iconSide="right" />
</box>
</centerbox>
</window>
}
function Left() {
return <box halign={Gtk.Align.START}>
</box>
}
function Center() {
return <box halign={Gtk.Align.CENTER}>
</box>
}
function Right() {
return <box halign={Gtk.Align.END}>
<Systray />
</box>
}

27
modules/ags/config/widget/RightBar.tsx Normal file
View File

@ -0,0 +1,27 @@
import { App, Astal, Gdk, Gtk } from "astal/gtk3";
import Clock from "./Clock";
import Workspaces from "./Workspaces";
import Systray from "./Systray";
export default function RightBar(gdkmonitor: Gdk.Monitor) {
const { TOP, LEFT, RIGHT } = Astal.WindowAnchor;
return <window
className="RightBar Bar"
gdkmonitor={gdkmonitor}
exclusivity={Astal.Exclusivity.EXCLUSIVE}
anchor={TOP | LEFT | RIGHT}
application={App}>
<centerbox>
<box halign={Gtk.Align.START}>
<Clock iconSide="left" />
</box>
<box halign={Gtk.Align.CENTER}>
<Workspaces monitor="HDMI-A-1" iconSide="left" />
</box>
<box halign={Gtk.Align.END}>
<Systray iconSide="left" />
</box>
</centerbox>
</window>
}

26
modules/ags/config/widget/Systray.tsx
View File

@ -1,23 +1,23 @@
import { bind } from "astal"
import { Button, Icon } from "astal/gtk3/widget"
import Tray from "gi://AstalTray"
const tray = Tray.get_default()
export default function Systray() {
for (const item of tray.get_items()) {
print(item.title)
}
return <box>
{tray.get_items().map(item => <SystrayItem item={item} />)}
export default function Systray(props: { iconSide: "left" | "right" }) {
return <box className={`Systray icon-${props.iconSide}`}>
{props.iconSide == "left" && <label className="icon" label="󱊔" />}
{bind(tray, "items").as(items => items.map(item => <SystrayItem item={item} />))}
{props.iconSide == "right" && <label className="icon" label="󱊔" />}
</box>
}
function SystrayItem({ item }: { item: Tray.TrayItem }) {
return <Button
onClick={() => item.activate(0, 0) /* NOTE: Figure out what these numbers do */}
tooltipMarkup={bind(item, "tooltip_markup")}
>
<Icon gicon={bind(item, "gicon")} />
</Button>
return <menubutton
className="item"
tooltipMarkup={bind(item, "tooltipMarkup")}
usePopover={false}
actionGroup={bind(item, "actionGroup").as(ag => ["dbusmenu", ag])}
menuModel={bind(item, "menuModel")}>
<icon gicon={bind(item, "gicon")} />
</menubutton>
}

55
modules/ags/config/widget/Workspaces.tsx Normal file
View File

@ -0,0 +1,55 @@
import { bind } from "astal"
import Hyprland from "gi://AstalHyprland"
export default function Workspaces(props: { monitor: string, iconSide: "left" | "right" }) {
const hyprland = Hyprland.get_default();
return <box className={`Workspaces icon-${props.iconSide}`}>
{props.iconSide == "left" && <label className="icon" label="󱗼" />}
<box className="labels">
{bind(hyprland, "workspaces").as(wss => wss
.filter(it => it && it.get_monitor && it.get_monitor().name == props.monitor)
.sort((a, b) => a.get_id() - b.get_id())
.map(workspace => <Workspace workspace={workspace} />)
)}
<button
className="add"
onClick={() => {
hyprland.dispatch("workspace", "emptynm");
}}
>
<label label="" />
</button>
</box>
{props.iconSide == "right" && <label className="icon" label="󱗼" />}
</box>
}
function Workspace(props: { workspace: Hyprland.Workspace }) {
const hyprland = Hyprland.get_default();
return <box>
{bind(props.workspace.get_monitor(), "activeWorkspace").as(ws => {
if (ws == props.workspace) {
return <label
label=""
/>
} else {
return <button
onClick={() => {
const name = props.workspace.name
if (name) {
hyprland.dispatch("workspace", `name:${name}`);
} else {
hyprland.dispatch("workspace", `id:${props.workspace.get_id()}`);
}
}}
>
<label
label=""
/>
</button>
}
})}
</box>
}

46
modules/ags/config_old/bar/Bar.js
View File

@ -1,46 +0,0 @@
import { GTK_ALIGN_CENTER, GTK_ALIGN_END, GTK_ALIGN_START } from "../constants.js"
import { Clock } from "./Clock.js"
import { SysTray } from "./Systray.js"
function BarStart() {
return Widget.Box({
halign: GTK_ALIGN_START,
children: [
Widget.Label({ label: "Start" }),
Widget.Button({ label: "Button", onClicked: () => App.ToggleWindow("media2") }),
],
})
}
function BarCenter() {
return Widget.Box({
halign: GTK_ALIGN_CENTER,
children: [
Clock(),
],
})
}
function BarEnd() {
return Widget.Box({
halign: GTK_ALIGN_END,
children: [
SysTray(),
],
})
}
export function Bar(monitor = 0) {
return Widget.Window({
monitor,
exclusivity: "exclusive",
className: "bar",
margins: [5, 5, 0, 5],
name: `bar${monitor}`,
anchor: ["left", "top", "right"],
child: Widget.CenterBox({
vertical: false,
startWidget: BarStart(),
centerWidget: BarCenter(),
endWidget: BarEnd(),
})
})
}

24
modules/ags/config_old/bar/Clock.js
View File

@ -1,24 +0,0 @@
const time = Variable("", {
poll: [1000, 'date "+%H:%M"'],
})
const date = Variable("", {
poll: [1000, 'date "+%Y-%m-%d"'],
})
export function Clock() {
return Widget.Box({
className: "clock",
vertical: true,
children: [
Widget.Label({
className: "time",
label: time.bind(),
}),
Widget.Label({
className: "date",
label: date.bind(),
}),
],
})
}

16
modules/ags/config_old/bar/Systray.js
View File

@ -1,16 +0,0 @@
const systemtray = await Service.import("systemtray")
export function SysTray() {
const items = systemtray.bind("items")
.as(items => items.map(item => Widget.Button({
child: Widget.Icon({ icon: item.bind("icon") }),
on_primary_click: (_, event) => item.activate(event),
on_secondary_click: (_, event) => item.openMenu(event),
tooltip_markup: item.bind("tooltip_markup"),
})))
return Widget.Box({
className: "systray",
children: items,
})
}

35
modules/ags/config_old/colors.css
View File

@ -1,35 +0,0 @@
@define-color ctp-rosewater #f5e0dc;
@define-color ctp-flamingo #f2cdcd;
@define-color ctp-pink #f5c2e7;
@define-color ctp-mauve #cba6f7;
@define-color ctp-red #f38ba8;
@define-color ctp-maroon #eba0ac;
@define-color ctp-peach #fab387;
@define-color ctp-yellow #f9e2af;
@define-color ctp-green #a6e3a1;
@define-color ctp-teal #94e2d5;
@define-color ctp-sky #89dceb;
@define-color ctp-sapphire #74c7ec;
@define-color ctp-blue #89b4fa;
@define-color ctp-lavender #b4befe;
@define-color ctp-text #cdd6f4;
@define-color ctp-subtext1 #bac2de;
@define-color ctp-subtext0 #a6adc8;
@define-color ctp-overlay2 #9399b2;
@define-color ctp-overlay1 #7f849c;
@define-color ctp-overlay0 #6c7086;
@define-color ctp-surface2 #585b70;
@define-color ctp-surface1 #45475a;
@define-color ctp-surface0 #313244;
@define-color ctp-base #1e1e2e;
@define-color ctp-mantle #181825;
@define-color ctp-crust #11111b;
button {
background: @ctp-surface0;
border: none;
}
button:active, button:hover, button:focus {
background: @ctp-surface1;
}

14
modules/ags/config_old/config.js
View File

@ -1,14 +0,0 @@
import { Media } from "./media/Media.js";
import { Bar } from "./bar/Bar.js";
import { Notifications } from "./notifications/Notifications.js";
App.config({
style: "./style.css",
windows: [
Bar(2),
Media(2),
Notifications(2),
]
})

5
modules/ags/config_old/constants.js
View File

@ -1,5 +0,0 @@
export const GTK_ALIGN_FILL = 0;
export const GTK_ALIGN_START = 1;
export const GTK_ALIGN_END = 2;
export const GTK_ALIGN_CENTER = 3;
export const GTK_ALIGN_BASELINE = 4;

160
modules/ags/config_old/media/Media.js
View File

@ -1,160 +0,0 @@
import { GTK_ALIGN_CENTER, GTK_ALIGN_FILL } from '../constants.js'
const mpris = await Service.import("mpris")
const players = mpris.bind("players")
const FALLBACK_ICON = "audio-x-generic-symbolic"
const PLAY_ICON = "media-playback-start-symbolic"
const PAUSE_ICON = "media-playback-pause-symbolic"
const PREV_ICON = "media-skip-backward-symbolic"
const NEXT_ICON = "media-skip-forward-symbolic"
/** @param {number} length */
function lengthStr(length) {
const min = Math.floor(length / 60)
const sec = Math.floor(length % 60)
const sec0 = sec < 10 ? "0" : ""
return `${min}:${sec0}${sec}`
}
/** @param {import('types/service/mpris').MprisPlayer} player */
function Player(player) {
const artists = player.bind("track_artists").transform(a => a.join(", "))
const playPause = Widget.Button({
className: "play-pause",
onClicked: () => player.playPause(),
visible: player.bind("can_play"),
child: Widget.Icon({
icon: player.bind("play_back_status").transform(s => {
switch (s) {
case "Playing": return PAUSE_ICON
case "Paused":
case "Stopped": return PLAY_ICON
}
}),
}),
})
const prev = Widget.Button({
onClicked: () => player.previous(),
visible: player.bind("can_go_prev"),
child: Widget.Icon(PREV_ICON),
})
const next = Widget.Button({
onClicked: () => player.next(),
visible: player.bind("can_go_next"),
child: Widget.Icon(NEXT_ICON),
})
const positionSlider = Widget.Slider({
className: "position",
drawValue: false,
onChange: ({ value }) => player.position = value * player.length,
visible: player.bind("length").as(l => l > 0),
setup: self => {
function update() {
const value = player.position / player.length
self.value = value > 0 ? value : 0
}
self.hook(player, update)
self.hook(player, update, "position")
self.poll(1000, update)
},
})
const positionLabel = Widget.Label({
className: "position",
hpack: "start",
setup: self => {
const update = (_, time) => {
self.label = lengthStr(time || player.position)
self.visible = player.length > 0
}
self.hook(player, update, "position")
self.poll(1000, update)
},
})
const lengthLabel = Widget.Label({
className: "length",
hpack: "end",
visible: player.bind("length").transform(l => l > 0),
label: player.bind("length").transform(lengthStr),
})
return Widget.Overlay({
className: "player",
child: Widget.Box({
className: "bg-img",
vpack: "start",
css: player.bind("cover_path").transform(p => `background-image: url('${p}');`),
}),
overlays: [
Widget.Box({
className: "bg-cover"
}),
Widget.Box({
className: "overlay",
vertical: true,
halign: GTK_ALIGN_CENTER,
children: [
Widget.Box({
className: "info",
vertical: true,
children: [
Widget.Label({ className: "title", label: player.bind("track_title") }),
Widget.Label({ className: "album", label: player.bind("track_album") }),
Widget.Label({ className: "artist", label: artists }),
],
}),
Widget.Box({
vexpand: true,
}),
Widget.CenterBox({
className: "controls",
startWidget: positionLabel,
centerWidget: Widget.Box({
halign: GTK_ALIGN_CENTER,
spacing: 20,
children: [
prev,
playPause,
next,
],
}),
endWidget: lengthLabel,
}),
positionSlider,
],
})
],
})
}
function MediaContent() {
const currentIdx = Variable(0);
const currentPlayer = Utils.merge([currentIdx.bind(), players], (currentIdx, players) => {
const idx = Math.min(currentIdx, players.length - 1);
return players[idx];
})
return Widget.Box({
children: currentPlayer.as(p => [Player(p)]),
})
}
export function Media(monitor = 0) {
return Widget.Window({
monitor,
visible: false,
exclusivity: "normal",
className: "media",
margins: [10, 10, 0, 10],
name: `media${monitor}`,
anchor: ["left", "top"],
child: MediaContent(),
})
}

59
modules/ags/config_old/media/style.css
View File

@ -1,59 +0,0 @@
.media > box {
border-radius: 5px;
background-color: transparent;
color: @ctp-text;
}
.media .player .bg-img {
border-radius: 5px;
min-width: 400px;
min-height: 200px;
background-size: cover;
}
.media .player .bg-cover {
background: linear-gradient(alpha(@ctp-base, 0.5), @ctp-base);
}
.media .player .overlay {
border-radius: 5px;
min-width: 400px;
}
.media .player .info {
padding: 10px;
}
.media .player .controls {
padding: 10px;
}
.media .player .info .title {
font-size: 1.2em;
font-weight: bold;
}
.media .player scale.position {
padding: 0;
border-radius: 0;
border: none;
}
.media .player scale.position trough {
min-height: 4px;
border-radius: 0;
border: none;
background-color: @ctp-overlay0;
}
.media .player scale.position highlight {
border-radius: 0;
border: none;
background-color: @ctp-lavender;
}
.media .player scale.position slider {
all: unset;
}

129
modules/ags/config_old/notifications/Notifications.js
View File

@ -1,129 +0,0 @@
const notifications = await Service.import("notifications")
/** @param {import('resource:///com/github/Aylur/ags/service/notifications.js').Notification} n */
function NotificationIcon({ app_entry, app_icon, image }) {
if (image) {
return Widget.Box({
css: `background-image: url("${image}");`
+ "background-size: contain;"
+ "background-repeat: no-repeat;"
+ "background-position: center;",
})
}
let icon = "dialog-information-symbolic"
if (Utils.lookUpIcon(app_icon))
icon = app_icon
if (app_entry && Utils.lookUpIcon(app_entry))
icon = app_entry
return Widget.Box({
child: Widget.Icon(icon),
})
}
/** @param {import('resource:///com/github/Aylur/ags/service/notifications.js').Notification} n */
function Notification(n) {
const icon = Widget.Box({
vpack: "start",
class_name: "icon",
child: NotificationIcon(n),
})
const title = Widget.Label({
class_name: "title",
xalign: 0,
justification: "left",
hexpand: true,
max_width_chars: 24,
label: n.summary,
use_markup: true,
})
const body = Widget.Label({
class_name: "body",
hexpand: true,
use_markup: true,
xalign: 0,
justification: "left",
label: n.body,
wrap: true,
})
const content = Widget.Box({
className: "content",
children: [
icon,
Widget.Box({
vertical: true,
children: [
title,
body,
]
}),
],
})
const actions = Widget.Box({
className: "actions",
children: n.actions.map(({ id, label }) => Widget.Button({
className: "action",
on_clicked: () => {
n.invoke(id)
n.dismiss()
},
hexpand: true,
child: Widget.Label(label),
})),
})
return Widget.EventBox({
attribute: { id: n.id },
onPrimaryClick: n.dismiss,
child: Widget.Box({
classNames: ["notification", n.urgency],
vertical: true,
children: [
content,
actions,
],
}),
})
}
function NotificationList() {
const list = Widget.Box({
css: "min-width: 2px; min-height: 2px;",
vertical: true,
spacing: 10,
children: notifications.popups.map(Notification),
})
function onNotified(_, /** @type {number} */ id) {
const n = notifications.getNotification(id)
if (n)
list.children = [Notification(n), ...list.children]
}
function onDismissed(_, /** @type {number} */ id) {
list.children.find(n => n.attribute.id === id)?.destroy()
}
list.hook(notifications, onNotified, "notified")
.hook(notifications, onDismissed, "dismissed")
return list
}
export function Notifications(monitor = 0) {
return Widget.Window({
monitor,
exclusivity: "normal",
className: "notifications",
margins: [10, 10, 10, 10],
name: `notifications${monitor}`,
anchor: ["left", "top"],
child: NotificationList(),
})
}

59
modules/ags/config_old/notifications/style.css
View File

@ -1,59 +0,0 @@
.notification {
min-width: 300px;
padding: 10px;
background-color: alpha(@ctp-base, 0.7);
border-radius: 5px;
border: 1px solid;
border-left: 5px solid;
border-color: @ctp-overlay1;
}
.notification.low {
border-color: @ctp-base;
}
.notification.critical {
border-color: @ctp-red;
}
.notification .icon {
min-width: 68px;
min-height: 68px;
margin-right: 1em;
}
.notification .icon image {
font-size: 58px;
/* to center the icon */
margin: 5px;
color: @ctp-text;
}
.notification .icon box {
min-width: 68px;
min-height: 68px;
border-radius: 7px;
}
.notification .actions .action {
margin: 0 .4em;
margin-top: .8em;
}
.notification .actions .action:first-child {
margin-left: 0;
}
.notification .actions .action:last-child {
margin-right: 0;
}
.notification .title {
color: @ctp-text;
font-size: 1.4em;
}
.notification .body {
color: @ctp-subtext0;
}

22
modules/ags/config_old/style.css
View File

@ -1,22 +0,0 @@
@import url("colors.css");
@import url("notifications/style.css");
@import url("media/style.css");
.bar > box {
padding: 10px;
border-radius: 5px;
background-color: alpha(@ctp-base, 0.95);
color: @ctp-text;
}
.clock .time {
font-weight: bold;
font-size: 1em;
}
.clock .date {
font-size: 0.8em;
}

18
modules/ags/config_old/tsconfig.json
View File

@ -1,18 +0,0 @@
{
"compilerOptions": {
"target": "ES2022",
"module": "ES2022",
"lib": [
"ES2022"
],
"allowJs": true,
"checkJs": true,
"strict": true,
"noImplicitAny": false,
"baseUrl": ".",
"typeRoots": [
"./types"
],
"skipLibCheck": true
}
}

1
modules/ags/config_old/types
View File

@ -1 +0,0 @@
/home/kalle/.local/share/com.github.Aylur.ags/types

9
modules/ags/default.nix
View File

@ -1,15 +1,20 @@
{
inputs,
pkgs,
...
}:
{
home-manager.users.kalle = {
imports = [ inputs.ags.homeManagerModules.default ];
programs.ags = {
enable = true;
configDir = ./config;
extraPackages = with inputs.ags.packages.${pkgs.system}; [
tray
hyprland
mpris
wireplumber
];
};
};
}