in ♥️ with linux

As a former mac user, I also liked the dock. Since I am now back at niri, I wanted to have not only a statusbar (with waybar), but also a kind of dock again.

As I now had a lot of experience with customising the waybar, it made sense to convert it into a kind of dock.

One quickly reaches the limitations of waybar, but with 1-2 tricks I can be quite satisfied (at the moment).

DotFiles:

You can find the whole setup in my dotfiles on codeberg: https://codeberg.org/Nasendackel/dotfiles

Step 1: A “Start” Menu

You need to create a custom module that accesses an XML file. The commands are specified in the config of waybar and the XML provides the menu structure in GTK.

waybar conf:

"custom/startmenu": {
    "format" : " ",
    "tooltip": false,
    "menu": "on-click",
    "menu-file": "~/.config/waybar/startmenu.xml",
    "menu-actions": {
		"about": "~/.config/niri/bin/about.sh",
		"info": "resources",
        	"shutdown": "systemctl poweroff",
        	"reboot": "systemctl reboot",
		"suspend": "systemctl suspend",
		"lock": "swaylock -f",
    },
},

startmenu.xml:

<?xml version="1.0" encoding="UTF-8"?>
<interface>
<object class="GtkMenu" id="menu">
 	<child>
		<object class="GtkMenuItem" id="about">
			<property name="label"> About</property>
    		</object>
	</child>
	<child>
		<object class="GtkMenuItem" id="info">
			<property name="label"> Ressources</property>
    		</object>
	</child>
	<child>
      		<object class="GtkSeparatorMenuItem" id="delimiter1"/>
    	</child>
    	<child>
		<object class="GtkMenuItem" id="lock">
			<property name="label"> Lock Screen</property>
        	</object>
	</child>
	<child>
        	<object class="GtkMenuItem" id="suspend">
			<property name="label"> Suspend</property>
        	</object>
	</child>
   	<child>
        	<object class="GtkMenuItem" id="reboot">
			<property name="label">󰑓 Reboot</property>
        	</object>
    	</child>
  	<child>
        	<object class="GtkMenuItem" id="shutdown">
			<property name="label">  Shutdown</property>
        	</object>
	</child>
</object>
</interface>

Step 2: Taskbar Module

The taskbar module lists all open apps. Unfortunately, you can only create shortcuts or list open apps with the Waybar. A classic dock is not possible. However, since I have assigned all important apps to shortcuts, only the display of open apps is sufficient for me.

It is important to set ‘sort-by-app-id’ to true so that the apps are grouped and sorted accordingly (see Step 4).

waybar conf:

"wlr/taskbar": {
	"format": "{icon}",
	"icon-theme": "Papirus",
	"icon-size": 32,
	"on-click": "minimize-raise",
	"active-first": false,
	"sort-by-app-id": true,
	"app_ids-mapping": {
		"kitty": "10_kitty",
		"librewolf": "20_librewolf",
		"firefox": "21_firefox",
		"chromium-browser": "23_chromium",
		"thunderbird-esr": "30_thunderbird",
		"dev.geopjr.Tuba": "31_tuba",
		"org.gnome.Fractal": "32_fractal",
		"signal": "33_signal",
	},
},

Step 3: Style

CSS is great because I understand it. The waybar and its modules can be customised easily.

waybar style.css:

#custom-startmenu {
  font-size: 24px;
  background-position: 6px center;
  background-repeat: no-repeat;
  background-size: 38px;
  border-style: hidden;
  padding:6px 20px 4px 20px;
  border-radius:1rem;
  background-image: url('niri-icon2.svg');
  background-color: @accent;
  margin:0 0 0 4px;
  border-bottom: 2px solid transparent;
}

#custom-startmenu:hover {
  background-image: url('niri-icon0.svg');
}

#taskbar {
  margin:0;
}

#taskbar button {
  font-size: 24px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 32px;
  border-style: hidden;
  padding:6px 8px 4px 8px;
  margin:0 0 0 12px;
  background-color: @theme_base_color;
  border-radius: 1rem;
  border-bottom: 2px solid transparent;
}

#taskbar button.active {
  border-bottom: 2px solid @accent;
}

#taskbar button:hover {
  border-bottom: 2px solid @accent;
}

Step 4: Sorting icons

Now it's getting dirty. Sorting / grouping by app-id has the disadvantage that waybar here goes bluntly by alphabet. But I would like to sort by the workspaces ... is not possible!

So a little trick ... Rename the app-id with a numbering. I follow the assignment in config.kdl in niri. Terminal is always on workspace 1, browser on 2 and everything with communication on workspace 3. (See step 2).

But now there is another problem. By renaming the app, the waybar can no longer find the icon.

This means that .local/share/applications according .desktop files with the same name must be created.

Example 10_kitty.desktop:

[Desktop Entry]
Version=1.0
Type=Application
Name=kitty
Icon=utilities-x-terminal
NoDisplay=true

NoDisplay=true is important to not display it in dmenu (like rofi).