Linux Custom Desktop Shell

Linux Custom Desktop Shell Used AI

25 devlogs
83h 19m
•  Ship certified
Created by Stef

Made completely by myself with TSX, AGS & Astal libraries

This desktop shell includes:
- A top bar for my desktop as a replacement for "waybar"
- A custom notification daemon using AGS and Astal as a replacement for "swaync"
- A launcher (apps & calculator)
- An OSD (On Screen Display for speaker, microphone and screen brightness)
- A session menu (lock, sleep, logout, task manager, hibernate, shutdown, reboot, reboot in UEFI/BIOS)
using Astal & AGS v3 features

used copilot autocomplete suggestions

Timeline

Fixed an issue where tray's popovers would have no padding or border-radius (i think it's an AGS issue since just removing the class property and using popover instead of .tray-popover works fine)

Update attachment

Ship 2

0 payouts of shell 0 shells

Stef

3 days ago

Stef Covers 2 devlogs and 7h 52m
Stef
Stef
2h 20m 3 days ago

In the last 6 commits:
- Fixed an issue that would cause the bar to error and not display if Spotify was not running when it started
- Updated the getMainInterface() function to get the correct main network interface
- Increased bar height delay from 500ms to 5 seconds as before it was too quick and sometimes was set too soom, causing the notification panel and other UIs to go partially under the bar
- Updated README to add few required details in the How to Run section
- Fixed an error in the URL RegExp that would cause some notifications to appear as blank because of markup issues
- Fixed an error in the URL RegExp that would cause discord formatted urls ([example](<https://example.com>)) to return the url as https://example.com&gt;
- Fixed an error in the italic RegExp that would cause it o return blank text or * because it would match the * from bold or _ from underline

Update attachment
Youssef Youssef 3 days ago
lets goo

Fixed an issue where fetch would not be sending headers
Removed Math.min and Math.max from volume handlers as the lib already handles it
Right clicking media module now copies the track ID (needed for the lyrics through local file)
add a config file in ~/.config/stef-shell/config.json that allows you to configure some parts of the desktop shell
lyrics can now be imported from a local file as long as it's a file matching this name .lrc and is inside the lyrics folder (configurable)

Update attachment

Ship 1

1 payout of shell 1344.0 shells

Stef

about 1 month ago

Stef Covers 22 devlogs and 75h 6m

Fixed notification overflowing when too long and now the notification center closes on middle and right click too

Update attachment

Styled scrolledwindow's scrollbar
Added pointer cursor to all the buttons and DND switch
added pointer cursor to each app launcher's app along with a 1px border on hover
added transition for button background color which changes on hover

Update attachment

fixed an issue where lyrics click/middle click would error with file already exists
fixed notifications having a wrong input region cuz of the animation
made a few changes to the readme
- added a preview/showcase video
- added required libraries to run it and how to run it

Update attachment

Added more keybinds for the app launcher
- Tab & Arrow Down: focus next app
- Shift + Tab & Arrow Up: focus previous app
- Backspace (when not focused): fucus text input & run backspace
- Cancel/Delete (when not focused): focus text input & run cancel/delete
- Any other (non-special) key: focus text input & type the key using String.fromCharCode()

those following ones already existed but i'll list them so people know they exist
- Alt + 0-9: open app at position (0 = 10)
- Enter: open focused app
- Esc: close app launcher

Update attachment

Added animations:
- launcher toggles with a fade in/out animation
- OSD toggles with a fade in/out animation
- notification center toggles with a slide left/right animation
- noitification popup toggles with a slide left/right animation
- popovers open with a fade in animation (i can't handle close cuz it's closed by GTK4, not code managed by me)
- session menu toggles with a fade in/out animation

Fixed an issue where pressing enter in the app launcher would not reset the app list but only the entry (literally 1 line)

Update attachment

Now OSD and notification popup are hidden when session menu is open

Update attachment
Youssef Youssef about 1 month ago
nice, will it work with nixos ?

Sorted imports cuz yes.
formatted code with biomejs
fixed 2 bugs in the launcher
- every typed character would bring the cursor to the start of the entry (so if you were to type OBS it would've written SBO)
- when closed it would not clear the search apps (so if search for prism, then close and reopen the entry would be empty but the apps would still be filtered for prism)
better handling of the opening of any window from a source that is not ags request

Update attachment
  • added a session menu (same as the bar button but full screen)
  • improved apps tray styling
  • notifications now have a pointer cursor when they have a default action
  • switched non layered stuff to Gtk.Window instead of window
  • updated README.md
Update attachment

Added click handlers for the media buttons:
- left click on the song's cover art opens it in your default file viewer
- middle click on the song's cover art saves it in $HOME/Music/spotifyData/.png
- middle click on the song artist & title raises spotify as a ctive window
- left click on the lyrics opens the lyrics in your default editor
- middle click on the lyrics saves the lyrics in $HOME/Music/spotifyData/.lrc.

Also calculator launcher now clears the last result on close and added the pointer cursor to tray items and media modules

Update attachment

I modified the bar modules ordering and added 2 new modules, power (lock, sleep, hybernate, shutdown, reboot, reboot to BIOS/UEFI, task manager, logout) and system tray integration.
Also modified the icons so instead of nerd font icons it uses adwaita icons (just for mic, speaker, wifi & battery) and material symbols (for everything else).
Also slightly modified lyrics so it shouldn't update the current lyrics with the previous fetch if you switch too fast (hopefully, not tested)
I also probably optimized it a bit while changing the icons, now the icons will only re-render if they change rather than re-render even on volume change, same for labels & tooltips of most bar modules

Update attachment

moved all the data for config inside the constants folder and handle invalid inputs for the calculator launcher

Update attachment

Renamed the AppLauncher to just Launcher because now it can serve multiple purposes:
- Normal app launcher as it was before
- Calculator (using qalc)
- Clipboard (disabled until i find a way to get the clipboard from cliphist without errors caused by raw binary image data)

Also notification popup now stays hidden when DND is enabled

Update attachment

Now notification support markup (parsing MD to Pango markup), also now the clicks on the OSD pass through it as an intentional feature

and just formatted code with biomejs so it looks better

Update attachment

Added a OSD (On Screen Display) for microphone (default mic of the system), speaker (default speaker of the system) and screen brightness.
Also styled the calendar opened by right-clicking the time on the top bar to match more the bar styling.

still has some issues like OSD displays on startup and you can click through OSD except the startup run which blocks all the inputs in the middle of the screen, i'll try to fix those

This video shows how it all looks together

i created an application launcher which can be opened with ags request toggle-applauncher, it displays all the app with their icon, name and description (if avaible) and they can also be filtered with a fuzzy search thanks to AstalApps library

next i'll start working on the OSD

Update attachment

Fixed notifications taking more space than needed (using input area, ty mabi19 on discord for the help).
Fixed an issue where the current playing media would show null - null when spotify is closed.
Added a notification center (can be toggled with ags request toggle-notif or by pressing the notification icon on the top bar) to view all notifications (sorted by date), they're grouped by app with a button to close/dismiss all notifs by that app, and also a button to dismiss all notifications by all apps.

Update attachment

I improved the notification popup, now it has a custom progress bar to show when it expires, it correctly follows the timeout set by the app but that can be paused on hover
now it also handles the default action as notification left click instead of displaying a button

also fixed an issue where if a notification timeout expired and later it was replaced, it wouldn't be displayed and issue where transient notification would be stored anyways instead of being dismissed right away

Update attachment

Continued implementing the notification daemon, now the notifications received by it are displayed on the top right corner of the screen, they support image, icon, body, summary and actions like all notification daemons (still gotta fix some stuff like the overlay of the notifs either takes too much un-needed space or doesn't take enough space, i want it to take only the required space, eventually growing on new notifs and start to scroll only at around half screen).

Next I'll do a notification center to watch all received notifs and once i finish that i'll make an app launcher, after that i'll make a OSD (on screen display, the thing that appears when you change the volume/brightness etc.)

Update attachment

Finally finished the bar (well technically still missing the notification list but for that i'll have to first a notif view and notif popup with the astal notif daemon)

styled the bar and moved its tsx file along with its modules in the bar/ folder, so it'll be more ordered and clean.
ordered imports by length cuz yes.

Update attachment

I managed to fix the lyrics issue by subscribing just to the notify::metadata event instead of notify::position, notify::trackid and notify::volume

also added the catpuccin macchiato colors in the styles.scss file and constants/colors.ts which will be used for styling

Update attachment

This widget is still very work in progress, i still haven't styled it, just added some of the modules (CPU, RAM, Disk, Battery. Clock, Speaker, Microphone, Network, Media), later i'll add other modules (just notifications for now and maybe hyprland workspaces).

Currently I'm tryna fix an issue where the media module shows the correct lyrics and metadata (artist, track etc.) for the first song but for the next ones shows correct metadata but the lyrics of the previous song (if anyone wanna help, the fetching is handled in utils/lyrics.ts)

(in the picture the red line is to be ignored cuz it's waybar, and the main modules are the unstyled stuff in the blue rectangle, other stuff is debug/test)

Update attachment