janishutz/dotfiles
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

[AGS] GTK4 Migration: Partially complete

Browse Source
This commit is contained in:
Janis Hutz 2025-04-21 21:48:29 +02:00
parent 7380c75818
commit 8b70f80e60
8 changed files with 321 additions and 267 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
config/astal/app.ts
View File

@ -1,16 +1,16 @@
import { App } from "astal/gtk3"
import { App } from "astal/gtk4"
import style from "./style.scss"
import notifications from "./components/notifications/handler";
import Bar from "./components/bar/ui/Bar";
// import Bar from "./components/bar/ui/Bar";
App.start({
instanceName: "runner",
css: style,
main() {
notifications.startNotificationHandler( 0, App.get_monitors()[0] );
notifications.startNotificationHandler( App.get_monitors()[0] );
// TODO: Monitor handling
Bar.Bar( App.get_monitors()[0] );
// Bar.Bar( App.get_monitors()[0] );
},
requestHandler(request, res) {
const args = request.trimStart().split( ' ' );
@ -19,7 +19,7 @@ App.start({
if ( args[ 0 ] === 'notifier' ) {
res( notifications.cliHandler( args ) );
} else if ( args[ 0 ] === 'bar' ) {
res( Bar.cliHandler( args ) );
// res( Bar.cliHandler( args ) );
}
},
})

7
config/astal/components/bar/ui/modules/Hyprland.tsx
View File

@ -1,6 +1,7 @@
import AstalTray from "gi://AstalTray";
import { bind, Variable } from "astal";
import AstalHyprland from "gi://AstalHyprland";
import { Gtk } from "astal/gtk4";
const SysTray = () => {
const tray = AstalTray.get_default();
@ -48,12 +49,12 @@ const ActiveWindow = () => {
visible.set( !visible.get() );
}
return <box className={"HyprlandFocusedClients"} visible={focused.as(Boolean)}>
<button onClicked={toggleOverlay}>
return <box cssName={"HyprlandFocusedClients"} visible={focused.as(Boolean)}>
<Gtk.Button onClicked={toggleOverlay}>
{focused.as( client => (
client && <label label={bind( client, "title" ).as( String )} />
))}
</button>
</Gtk.Button>
<eventbox visible={bind(visible).as( v => v )} name="popover-container">
<label label="This is a test"></label>
</eventbox>

354
config/astal/components/notifications/handler.tsx
View File

@ -7,209 +7,267 @@
*
*/
import { Astal, Gtk, Gdk } from "astal/gtk3"
import { Astal, Gdk } from "astal/gtk4"
import Notifd from "gi://AstalNotifd";
import Notification from "./notifications";
import { type Subscribable } from "astal/binding";
import { Variable, bind, timeout } from "astal"
import { timeout, Variable } from "astal"
// ───────────────────────────────────────────────────────────────────
// Config
// ───────────────────────────────────────────────────────────────────
const TIMEOUT_DELAY = 5000;
let isRunning = false;
let notificationMenuOpen = false;
class Notifier implements Subscribable {
private display: Map<number, Gtk.Widget> = new Map();
private notifications: Map<number, Notifd.Notification> = new Map();
interface NotificationDetails {
notification: Notifd.Notification;
backendID: number;
notifdID: number;
}
// ───────────────────────────────────────────────────────────────────
// ╭───────────────────────────────────────────────╮
// │ Handler │
// ╰───────────────────────────────────────────────╯
// ───────────────────────────────────────────────────────────────────
let ShownNotifications: number[] = [];
const ShownNotificationsCount: Variable<number> = Variable( 0 );
let Notifications: NotificationDetails[] = [];
const notifd = Notifd.get_default();
notifd.ignoreTimeout = true;
private notifd: Notifd.Notifd;
private subscriberData: Variable<Gtk.Widget[]> = Variable( [] );
private instanceID: number;
private menuOpen: boolean;
/**
* Sets up the notifier
* Delete a notification by its internal ID
* @param index The notifd ID of the notification
*/
constructor( id: number ) {
this.instanceID = id;
this.menuOpen = false;
this.notifd = Notifd.get_default();
this.notifd.ignoreTimeout = true;
const deleteNotification = ( index: number ): void => {
hideNotification( index );
Notifications.splice( index, 1 );
}
this.notifd.connect( 'notified', ( _, id ) => {
this.add( id );
// ───────────────────────────────────────────────────────────────────
/**
* Delete a notification by notifd id
* @param id The notifd ID of the notification
*/
const deleteNotificationByNotificationID = ( id: number ): void => {
const index = findNotificationByNotificationID( id );
if ( index > -1 ) {
deleteNotification( index );
}
}
// ───────────────────────────────────────────────────────────────────
/**
* Find the internal ID from the notifd id for a notification (helper function)
* @param id The notifd ID of the notification
* @returns The internal ID or -1 if not found
*/
const findNotificationByNotificationID = ( id: number ): number => {
// Find index in Notifications array
for (let index = 0; index < Notifications.length; index++) {
if ( Notifications[ index ].notifdID === id ) {
return index;
}
}
return -1;
}
// ───────────────────────────────────────────────────────────────────
/**
* Add a notification to the notification handler
* @param id The notifd ID of the notification
*/
const addNotification = ( id: number ): void => {
print( '[ Notifications ] Notification with id ' + id + ' added.' );
const currIndex = Notifications.length;
Notifications.push( {
notifdID: id,
backendID: currIndex,
notification: notifd.get_notification( id )
} );
this.notifd.connect( 'resolved', ( _, id ) => {
this.delete( id );
showNotification( currIndex );
}
// ───────────────────────────────────────────────────────────────────
/**
* Start the notifd runner and handle notifications.
*/
const hookToNotificationDaemon = (): void => {
if ( isRunning ) {
printerr( '[ Notifications ] Error: Already running' );
return;
}
isRunning = true;
notifd.connect( 'notified', ( _, id ) => {
addNotification( id );
} );
notifd.connect( 'resolved', ( _, id ) => {
deleteNotificationByNotificationID( id );
} );
}
private notify () {
this.subscriberData.set( [ ...this.display.values() ].reverse() );
}
// ───────────────────────────────────────────────────────────────────
private add ( id: number ) {
this.notifications.set( id, this.notifd.get_notification( id )! );
this.show( id );
}
/**
* Show an element on screen
* @param id - The id of the element to be shown
* Show a notification. It will stay on screen (regardless of removeAgain passed in), if
* critical urgency
* @param id The internal id (index in Notifications array)
* @param removeAgain = true If to remove the notification from the screen again automatically
*/
private show ( id: number ) {
this.set( id, Notification( {
notification: this.notifications.get( id )!,
onHoverLost: () => {
if ( !this.menuOpen ) {
this.hide( id );
}
},
setup: () => timeout( TIMEOUT_DELAY, () => {
if ( !this.menuOpen ) {
this.hide( id );
}
} ),
id: id,
delete: deleteHelper,
instanceID: this.instanceID
} ) )
}
const showNotification = ( id: number, removeAgain: boolean = true ) => {
// Add notification to UI for display
ShownNotifications.reverse().push( id );
ShownNotifications.reverse();
ShownNotificationsCount.set( ShownNotifications.length );
/**
* Set a selected widget to be shown
* @param id - The id of the element to be referenced for later
* @param widget - A GTK widget instance
*/
private set ( id: number, widget: Gtk.Widget ) {
this.display.get( id )?.destroy();
this.display.set( id, widget );
this.notify();
}
/**
* Hide, not delete notification (= send to notification centre)
* @param id - The id of the notification to hide
*/
private hide ( id: number ) {
this.display.get( id )?.destroy();
this.display.delete( id );
this.notify();
}
/**
* Delete a notification (from notification centre too)
* @param id - The id of the notification to hide
*/
delete ( id: number ) {
this.hide( id );
this.notifications.get( id )?.dismiss();
this.notifications.delete( id );
if ( this.notifications.size == 0 ) {
this.menuOpen = false;
}
}
openNotificationMenu () {
// Show all notifications that have not been cleared
if ( this.notifications.size > 0 ) {
this.menuOpen = true;
this.notifications.forEach( ( _, id ) => {
this.show( id );
} )
}
}
hideNotifications () {
this.menuOpen = false;
this.notifications.forEach( ( _, id ) => {
this.hide( id );
// Set delay to remove the notification again
if ( removeAgain && Notifications[ id ].notification.get_urgency() !== Notifd.Urgency.CRITICAL ) {
timeout( TIMEOUT_DELAY, () => {
hideNotification( id );
} );
}
}
toggleNotificationMenu () {
if ( this.menuOpen ) {
this.hideNotifications();
// ───────────────────────────────────────────────────────────────────
/**
* Stop displaying notification
* @param id The internal id (index in the Notifications array)
*/
const hideNotification = ( id: number ) => {
if ( !notificationMenuOpen ) {
ShownNotifications.splice( ShownNotifications.indexOf( id ), 1 );
}
}
// ───────────────────────────────────────────────────────────────────
/**
* Open the notification menu. Called by toggleNotificationMenu too
*/
const openNotificationMenu = () => {
// Simply show all notifications
notificationMenuOpen = true;
const ShownNotifications = [];
for (let index = 0; index < Notifications.length; index++) {
ShownNotifications.push( index );
}
}
// ───────────────────────────────────────────────────────────────────
/**
* Close the notification menu. Called by toggleNotificationMenu too
*/
const closeNotificationMenu = () => {
// Hide all notifications
notificationMenuOpen = true;
ShownNotifications = [];
ShownNotificationsCount.set( 0 );
}
// ───────────────────────────────────────────────────────────────────
/**
* Toggle the notification menu (i.e. show all notifications)
*/
const toggleNotificationMenu = () => {
if ( notificationMenuOpen ) {
closeNotificationMenu();
} else {
this.openNotificationMenu();
openNotificationMenu();
}
}
clearAllNotifications () {
this.menuOpen = false;
this.notifications.forEach( ( _, id ) => {
this.delete( id );
} )
// ───────────────────────────────────────────────────────────────────
/**
* Delete all notifications
*/
const clearAllNotifications = () => {
Notifications = [];
ShownNotifications = [];
ShownNotificationsCount.set( 0 );
}
clearNewestNotification () {
this.delete( [ ...this.notifications.keys() ][0] );
// ───────────────────────────────────────────────────────────────────
/**
* Delete the newest notifications
*/
const clearNewestNotifications = () => {
ShownNotifications.splice( 0, 1 );
Notifications.splice( Notifications.length - 1, 1 );
}
subscribe(callback: (value: unknown) => void): () => void {
return this.subscriberData.subscribe( callback );
}
get() {
return this.subscriberData.get();
}
}
const notifiers: Map<number, Notifier> = new Map();
const deleteHelper = ( id: number, instanceID: number ) => {
notifiers.get( instanceID )?.delete( id );
}
const openNotificationMenu = ( id: number ) => {
notifiers.get( id )?.openNotificationMenu();
}
const closeNotificationMenu = ( id: number ) => {
notifiers.get( id )?.hideNotifications();
}
const toggleNotificationMenu = ( id: number ) => {
notifiers.get( id )?.toggleNotificationMenu();
}
const clearAllNotifications = ( id: number ) => {
notifiers.get( id )?.clearAllNotifications();
}
const clearNewestNotifications = ( id: number ) => {
notifiers.get( id )?.clearNewestNotification();
}
const startNotificationHandler = (id: number, gdkmonitor: Gdk.Monitor) => {
// ───────────────────────────────────────────────────────────────────
// ╭───────────────────────────────────────────────╮
// │ User Interface │
// ╰───────────────────────────────────────────────╯
// ───────────────────────────────────────────────────────────────────
const startNotificationHandler = (gdkmonitor: Gdk.Monitor) => {
const { TOP, RIGHT } = Astal.WindowAnchor
const notifier: Notifier = new Notifier( id );
notifiers.set( id, notifier );
hookToNotificationDaemon();
const range = (n: number) => [...Array(n).keys()];
return <window
className="NotificationHandler"
cssClasses={["NotificationHandler"]}
gdkmonitor={gdkmonitor}
exclusivity={Astal.Exclusivity.EXCLUSIVE}
anchor={TOP | RIGHT}>
<box vertical noImplicitDestroy>
{bind(notifier)}
{ShownNotificationsCount( n => range( n ).map( i => {
print( 'Rendering' );
// i is index in ShownNotifications array
return <Notification id={i} delete={deleteNotification} notification={Notifications[ i ].notification}></Notification>
} ) ) }
</box>
</window>
}
const cliHandler = ( args: string[] ): string => {
if ( args[ 1 ] == 'show' ) {
openNotificationMenu( 0 );
openNotificationMenu();
return 'Showing all open notifications';
} else if ( args[ 1 ] == 'hide' ) {
closeNotificationMenu( 0 );
closeNotificationMenu();
return 'Hid all notifications';
} else if ( args[ 1 ] == 'clear' ) {
clearAllNotifications( 0 );
clearAllNotifications();
return 'Cleared all notifications';
} else if ( args[ 1 ] == 'clear-newest' ) {
clearNewestNotifications( 0 );
clearNewestNotifications();
return 'Cleared newest notification';
} else if ( args[ 1 ] == 'toggle' ) {
toggleNotificationMenu( 0 );
toggleNotificationMenu();
return 'Toggled notifications';
} else {
return 'Unknown command!';

20
config/astal/components/notifications/notifications.scss
View File

@ -9,11 +9,17 @@ $fg-color: #{"@theme_fg_color"};
$bg-color: #{"@theme_bg_color"};
$error: red;
window.NotificationPopups {
window.NotificationHandler {
all: unset;
}
eventbox.Notification {
box.Notification {
min-width: 400px;
border-radius: 13px;
background-color: $bg-color;
margin: .5rem 1rem .5rem 1rem;
box-shadow: 2px 3px 8px 0 gtkalpha(black, .4);
border: 1pt solid gtkalpha($fg-color, .03);
&:first-child>box {
margin-top: 1rem;
@ -23,16 +29,6 @@ eventbox.Notification {
margin-bottom: 1rem;
}
// eventboxes can not take margins so we style its inner box instead
>box {
min-width: 400px;
border-radius: 13px;
background-color: $bg-color;
margin: .5rem 1rem .5rem 1rem;
box-shadow: 2px 3px 8px 0 gtkalpha(black, .4);
border: 1pt solid gtkalpha($fg-color, .03);
}
&.critical>box {
border: 1pt solid gtkalpha($error, .4);

77
config/astal/components/notifications/notifications.tsx
View File

@ -1,12 +1,9 @@
// From astal examples
import { GLib } from "astal"
import { Gtk, Astal } from "astal/gtk3"
import { type EventBox } from "astal/gtk3/widget"
import { Gtk } from "astal/gtk4"
import Notifd from "gi://AstalNotifd"
const isIcon = (icon: string) =>
!!Astal.Icon.lookup_icon(icon)
// import Pango from "gi://Pango?version=1.0"
const fileExists = (path: string) =>
GLib.file_test(path, GLib.FileTest.EXISTS)
@ -27,78 +24,73 @@ const urgency = (n: Notifd.Notification) => {
}
type Props = {
delete( id: number, instanceID: number ): void
setup(self: EventBox): void
onHoverLost(self: EventBox): void
delete( id: number ): void
notification: Notifd.Notification
id: number
instanceID: number
}
export default function Notification(props: Props) {
const { notification: n, onHoverLost, setup, id: id, delete: del, instanceID: instance } = props
const { notification: n, id: id, delete: del } = props
const { START, CENTER, END } = Gtk.Align
return <eventbox
className={`Notification ${urgency(n)}`}
setup={setup}
onHoverLost={onHoverLost}>
<box vertical>
<box className="header">
{(n.appIcon || n.desktopEntry) && <icon
className="app-icon"
return <box vertical
cssClasses={['Notification', urgency(n)]}>
<box cssName="header">
{(n.appIcon || n.desktopEntry) ? <Gtk.Image
cssName="app-icon"
visible={Boolean(n.appIcon || n.desktopEntry)}
icon={n.appIcon || n.desktopEntry}
/>}
iconName={n.appIcon || n.desktopEntry}
/> : <Gtk.Image iconName={'window-close-symbolic'}></Gtk.Image>}
<label
className="app-name"
cssName="app-name"
halign={START}
truncate
// ellipsize={Pango.EllipsizeMode.END}
label={n.appName || "Unknown"}
/>
<label
className="time"
cssName="time"
hexpand
halign={END}
label={time(n.time)}
/>
<button onClicked={() => del( id, instance )}>
<icon icon="window-close-symbolic" />
<button onClicked={() => del( id )}>
<Gtk.Image iconName="window-close-symbolic" />
</button>
</box>
<Gtk.Separator visible />
<box className="content">
{n.image && fileExists(n.image) && <box
<box cssName="content">
{n.image && fileExists(n.image) ? <box
valign={START}
className="image"
css={`background-image: url('${n.image}')`}
/>}
{n.image && isIcon(n.image) && <box
cssName="image">
<Gtk.Image file={n.image}></Gtk.Image>
</box>
: <box></box>}
{n.image ? <box
expand={false}
valign={START}
className="icon-image">
<icon icon={n.image} expand halign={CENTER} valign={CENTER} />
</box>}
<Gtk.Image iconName={n.image} expand halign={CENTER} valign={CENTER} />
</box>
: <box></box>}
<box vertical>
<label
className="summary"
<Gtk.Label
cssName="summary"
halign={START}
xalign={0}
label={n.summary}
truncate
// ellipsize={Pango.EllipsizeMode.END}
/>
{n.body && <label
className="body"
{n.body ? <label
cssName="body"
wrap
useMarkup
halign={START}
xalign={0}
justifyFill
label={n.body}
/>}
/> : <label></label>}
</box>
</box>
{n.get_actions().length > 0 && <box className="actions">
{n.get_actions().length > 0 ? <box cssName="actions">
{n.get_actions().map(({ label, id }) => (
<button
hexpand
@ -106,7 +98,6 @@ export default function Notification(props: Props) {
<label label={label} halign={CENTER} hexpand />
</button>
))}
</box>}
</box> : <box></box>}
</box>
</eventbox>
}

38
config/astal/style.scss
View File

@ -1,20 +1,22 @@
// 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"};
/* $fg-color: #{"@theme_fg_color"}; */
/* $bg-color: #{"@theme_bg_color"}; */
/**/
/* window.Bar { */
/* background: transparent; */
/* color: $fg-color; */
/* font-weight: bold; */
/**/
/* >centerbox { */
/* background: $bg-color; */
/* border-radius: 10px; */
/* margin: 8px; */
/* } */
/**/
/* button { */
/* border-radius: 8px; */
/* margin: 2px; */
/* } */
/* } */
window.Bar {
background: transparent;
color: $fg-color;
font-weight: bold;
>centerbox {
background: $bg-color;
border-radius: 10px;
margin: 8px;
}
button {
border-radius: 8px;
margin: 2px;
}
}
@use './components/notifications/notifications.scss'

2
config/astal/tsconfig.json
View File

@ -9,6 +9,6 @@
// "checkJs": true,
// "allowJs": true,
"jsx": "react-jsx",
"jsxImportSource": "astal/gtk3",
"jsxImportSource": "astal/gtk4",
}
}

12
notes.md
View File

@ -34,6 +34,8 @@
- [ ] Rofi
- [ ] Spotlight-Search (or replace with anyrun)
- [ ] Wallpaper selector (that automatically triggers the theming script)
- [ ] Kitty
- [ ] Configure colours
- [ ] Hyprland
- [ ] Keybinds: Resize window, move window, open calculator, plus more programs
- [ ] Read docs
@ -42,9 +44,12 @@
- [ ] New image viewer (eog)
- [ ] Other pdf reader (maybe -> zathura)
- [ ] Maybe TUI archive manager (felix-rs)
- [ ] Lazygit: Configure
- [x] Nvim (other repo)
- [ ] Lazygit
- [ ] Configure
- [ ] Nvim (other repo)
- [x] Replace notification handler (noice)
- [ ] Configure formatters (of Java, Cpp, TS/JS/Vue, Python)
- [ ] Maybe: Add extra configs to commentbox
- [ ] Yazi
- [ ] More keybinds
- [ ] Configure
@ -57,7 +62,8 @@
- [ ] Theming script
- [ ] Installer for configs
- [ ] Vivado cleanup (run after vivado and hope vivado is blocking (or simply execute vivado in /tmp))
- [ ] migrate to zoxide from autojump
- [x] migrate to zoxide from autojump
- [ ] properly swap escape and caps (at lowest level possible)
Using astal (https://aylur.github.io/astal, which is gjs based), write a component that takes as argument a UIComponent array (pre-defined interface) and depending on what subclass of that interface it is renders a different component for each element.