Module: Protege::Components::HotkeysHelper

Included in:
ComponentsHelper
Defined in:
app/helpers/protege/components/hotkeys_helper.rb

Overview

Rendering for the keyboard-shortcuts overlay (see shared/_hotkeys and keys.js): the header "?" button that opens it, plus the section dividers, rows, and key caps its static, hand-authored template is composed from. keys.js stays purely behavioral — it only toggles the dialog and activates [data-hotkey] elements — so the overlay's content is built here from plain markup.

Instance Method Summary collapse

Instance Method Details

#hotkey_cap(key) ⇒ ActiveSupport::SafeBuffer

Render a single keycap (++), styled to match the header's "?" button.

Parameters:

  • key (String) —

    the key label

Returns:

  • (ActiveSupport::SafeBuffer) —

    the keycap markup



54
55
56
57
 
# File 'app/helpers/protege/components/hotkeys_helper.rb', line 54

def hotkey_cap(key)
  tag.kbd(key, class: 'rounded px-1.5 py-0.5 text-xs font-mono',
               style: 'background: var(--surface-subtle); border: 1px solid var(--border)')
end

#hotkey_help_button ⇒ ActiveSupport::SafeBuffer

Render the keycap-styled "?" button that opens the overlay. Looks like a key (matching the caps below) and calls toggleHotkeyHelp() (exposed by keys.js) — the same open/close path as "?".

Returns:

  • (ActiveSupport::SafeBuffer) —

    the button markup



14
15
16
17
18
19
20
21
22
23
24
 
# File 'app/helpers/protege/components/hotkeys_helper.rb', line 14

def hotkey_help_button
  cap_style = 'background: var(--surface-subtle); border: 1px solid var(--border); color: var(--text-muted)'
  tag.button('?',
             type:         'button',
             'aria-label': 'Keyboard shortcuts',
             title:        'Keyboard shortcuts',
             class:        'inline-flex px-1 h-5 w-5 items-center justify-center rounded text-xs font-mono ' \
                           'cursor-pointer transition-colors',
             style:        cap_style,
             onclick:      'toggleHotkeyHelp()')
end

#hotkey_row(label, *keys) ⇒ ActiveSupport::SafeBuffer

Render one shortcut row: a label on the left, its key caps on the right.

Parameters:

  • label (String) —

    the shortcut's description

  • keys (Array<String>) —

    the keys to show as caps, in order (e.g. "g", "1")

Returns:

  • (ActiveSupport::SafeBuffer) —

    the row markup



43
44
45
46
47
48
 
# File 'app/helpers/protege/components/hotkeys_helper.rb', line 43

def hotkey_row(label, *keys)
  tag.div(class: 'flex items-center justify-between gap-6 py-1') do
    tag.span(label) +
      tag.span(class: 'flex items-center gap-1') { safe_join(keys.map { |key| hotkey_cap(key) }) }
  end
end

#hotkey_section(title) ⇒ ActiveSupport::SafeBuffer

Render a titled section divider — the label followed by a rule filling the rest of the row ("Go to ————").

Parameters:

  • title (String) —

    the section label

Returns:

  • (ActiveSupport::SafeBuffer) —

    the divider markup



31
32
33
34
35
36
 
# File 'app/helpers/protege/components/hotkeys_helper.rb', line 31

def hotkey_section(title)
  tag.div(class: 'flex items-center gap-2 pt-3 first:pt-0 text-xs font-semibold uppercase tracking-wider',
          style: 'color: var(--text-faint)') do
    tag.span(title) + tag.span('', class: 'flex-1', style: 'border-top: 1px solid var(--border)')
  end
end