Modular Waybar config

[gldtn]

I was trying to make my Waybar a little more modular and thought maybe Omarchy can benefit from a more modular config than how it's setup currently. It would be easier for updates and to share modules here on the community!

Having all the config/modules in one file, kind of makes it tuff specially for updates. So I thought, why not have a structure short of like this:

~/.config/waybar <-- will hold the config and css
~/.config/waybar/config.jsonc <-- would be nice to append the file type to the name for proper highlights/formatting
~/.config/waybar/style.css <-- main stylesheet
~/.config/waybar/extra.css <-- encourage omarchy users to override and style their custom module here
~/.config/waybar/modules <-- all user custom modules will go here

Currently this is how I have my config:

{
  "include": [
    "~/.config/waybar/settings.jsonc", // Bar properties (e.g., layer, position)
    "~/.config/waybar/layout.jsonc", // Module ordering (left/center/right)
    "~/.config/waybar/modules/*.jsonc" // All module definitions
  ]
}

Maybe it would be a good idea to include all the default modules in the include section separately to make it easier on removal and override with the users custom modules:

{
  "include": [
	"~/.local/share/omarchy/default/waybar/modules/hyprland-workspaces.config.jsonc"
	"~/.local/share/omarchy/default/waybar/modules/pulseaudio.jsonc"
	// "~/.local/share/omarchy/default/waybar/modules/battery.jsonc <-- also easy to comment out
    "~/.config/waybar/modules/*.jsonc"
  ],

This is how my current css stylesheet looks like:

@import "../omarchy/current/theme/waybar.css";
@import "../waybar/extra.css";

This is how I currently have it setup and seems to be working very well, what do you guys think about this setup? Maybe we can make even better without complicating it too much?

Here is my setup:
https://github.com/gldtn/arch-dots/tree/master/waybar
https://github.com/gldtn/arch-dots/tree/master/waybar/modules