Function RegistrationsViewer

examples/solid/createHotkeySequences/src/index.tsx:348–443

()

// ---------------------------------------------------------------------------

function RegistrationsViewer() {
  const { hotkeys, sequences } = createHotkeyRegistrations()

  return (
    <section class="demo-section">
      <h2>Live Registrations (createHotkeyRegistrations)</h2>
      <p>
        This table is rendered from <code>createHotkeyRegistrations()</code> — a
        reactive view of all registered hotkeys and sequences. Trigger counts
        update in real-time.
      </p>

      <Show when={hotkeys().length > 0}>
        <h3>Hotkeys</h3>
        <table class="registrations-table">
          <thead>
            <tr>
              <th>Hotkey</th>
              <th>Name</th>
              <th>Description</th>
              <th>Triggers</th>
            </tr>
          </thead>
          <tbody>
            <For each={hotkeys()}>
              {(reg) => (
                <tr>
                  <td>
                    <kbd>{formatForDisplay(reg.hotkey)}</kbd>
                  </td>
                  <td>{reg.options.meta?.name ?? '\u2014'}</td>
                  <td class="description-cell">
                    {reg.options.meta?.description ?? '\u2014'}
                  </td>
                  <td class="trigger-count">{reg.triggerCount}</td>
                </tr>
              )}
            </For>
          </tbody>
        </table>
      </Show>

      <h3>Sequences ({sequences().length})</h3>
      <table class="registrations-table">
        <thead>
          <tr>
            <th>Sequence</th>
            <th>Name</th>
            <th>Description</th>
            <th>Enabled</th>
            <th>Triggers</th>
          </tr>
        </thead>
        <tbody>
          <For each={sequences()}>
            {(reg) => (
              <tr>
                <td>