Submap Keybinding Overlay [eww]

[secrary]

TL;DR: I made a simple overlay using eww that displays all available keybindings for your active Hyprland submap. No more forgetting which keys do what!

o.mp4

When you enter a submap in Hyprland, this overlay appears showing all available keybindings for that submap. It's particularly useful for less frequently used submaps where you might forget the available options.

eww widget

(defvar submap_name "")
(defvar key_pairs '[
  {"key" "-", "value" "-"}
]')

(defwindow list_indicator
    :monitor 0 
    :geometry (geometry :x "50%" :y "10%" :width "30%" :anchor "bottom center")
    :stacking "overlay"
    :focusable false
    :namespace "list-hints"
    (box :class "list-popup" :orientation "vertical" :space-evenly false :spacing 15
        (label :class "title" :halign "center" :text submap_name)

        (box :class "list-container" :orientation "vertical" :spacing 8
            (for shortcut in key_pairs
                (box :orientation "horizontal" :space-evenly false
                    (box :class "key-box" :width 30
                        (label :class "key" :text "${shortcut.key}"))
                    (label :class "separator" :text "→ ")
                    (label :class "value" :text "${shortcut.value}"))))

        (label :halign "center" :class "exit-keys" :text "Esc - Exit")
    )
)

Add some CSS styling in ~/.config/eww/eww.scss

Configure Hyprland

exec-once = eww daemon
...
$exit_submap = hyprctl dispatch submap reset; eww close list_indicator
...
$apps_binds = ~/.config/hypr/scripts/submaps/apps.sh
bind = $mehMod, x, exec, $apps_binds
bind = $mehMod, x, submap, apps
submap = apps
bind = , x, exec, $exit_submap; $terminal    
bind = , b, exec, $exit_submap; $browser     
bind = , n, exec, $exit_submap; ~/.config/hypr/scripts/notes.sh
bind = , t, exec, $exit_submap; telegram-desktop 
bind = , c, exec, $exit_submap; $code
bind = , escape, exec, $exit_submap
bind = , return, exec, $exit_submap
bind = , escape, submap, reset
bind = , return, submap, reset
submap = reset

This script data manually needs to be updated with corresponding values, we can even embed them in hypr conf file but looks ugly

#!/bin/bash

source ~/.config/hypr/scripts/submaps/shared.sh

submap_name="Exec" 
key_pairs='[
    {"key":"x","value":"Terminal"},
    {"key":"b","value":"Browser"},
    {"key":"n","value":"Notes"},
    {"key":"t","value":"Telegram"},
    {"key":"c","value":"Code"}
]'

show_eww_indicator "$key_pairs" "$submap_name" 

This one shared (I have two monitor setup, you may not need specifying the monitor id)

#!/bin/bash

EWW_WIN_NAME="list_indicator"

show_eww_indicator() {
    local key_pairs="$1"
    local submap_name="$2"
    
    if eww active-windows | grep -q "${EWW_WIN_NAME}"; then
        eww close "${EWW_WIN_NAME}"
    else
        ACTIVE_MONITOR_ID=$(hyprctl monitors -j | jq '.[] | select(.focused == true) | .id')
        eww update key_pairs="${key_pairs}" submap_name="${submap_name}"
        eww open "${EWW_WIN_NAME}" --screen "${ACTIVE_MONITOR_ID}"
    fi
}

When you exit the submap or press submap key, it closes the overlay.

Enjoy never forgetting your keybindings again!