Using nwg-wrapper for a HUD of help for sway modes

As a geriatric user of sway, I don't always remember the keystrokes in the more esoteric corners of my configuration. I find that my script sway-menu helps with the bulk of the uncommon key bindings. But when I drop into a 'mode' (eg "move" mode) I don't always remember all the clever things I programed into it. nwg-wrapper to the rescue - it can display a HUD (Heads-Up-Display) of the keybindings of the mode until I exit it.

Obviously, nwg-wrapper must be installed. Your config file also needs to be changed as described in the help file.

Here's the help:

Usage: sway-mode [-c,--config config-file] [-C,--css css-file] mode
Puts sway into mode 'mode' and displays some help by extracting a
section from the config file.

Options:

-c,--config config_file    location of your config file (/home/bhepple/.config/sway/config)
-C,--css css_file          location of your css file (/home/bhepple/.config/nwg-wrapper/mode-help.css)

Requires nwg-wrapper https://github.com/nwg-piotr/nwg-wrapper

Assumes modes are defined in the config file like this:

mode "foobar" {
...
}

To use this, reassign the bindkey command for the mode like this:

    bindsym  $mod+s  exec sway-mode "swap"

and in the mode definition, change the mode ending keys to

    # back to default mode
    bindsym q      exec pkill nwg-wrapper; mode "default"
    bindsym Return exec pkill nwg-wrapper; mode "default"
    bindsym Escape exec pkill nwg-wrapper; mode "default"

Here's a sample CSS file:

    window {
        font-family: "Monospace";
        color: rgba (255, 255, 255, 1.0);
        background-color: rgba (255, 255, 255, 0.1);
    }

    #box-inner {
        background-color: rgba (23, 53, 63, 0.7);
        border-radius: 5px;
        border-style: dotted;
        border-width: 1px;
        border-color: rgba (156, 142, 122, 0.7);
        padding: 10px;
    }