@tanstack/hotkeys-devtools 0.1.3 → 0.3.0

package/src/components/HotkeyList.tsx

@@ -1,9 +1,17 @@
 import { For, Show, createEffect, createMemo, createSignal, on } from 'solid-js'
 import clsx from 'clsx'
-import { formatForDisplay } from '@tanstack/hotkeys'
+import { formatForDisplay, formatHotkeySequence } from '@tanstack/hotkeys'
 import { useStyles } from '../styles/use-styles'
 import { useHotkeysDevtoolsState } from '../HotkeysContextProvider'
-import type { ConflictBehavior, HotkeyRegistration } from '@tanstack/hotkeys'
+import type {
+  ConflictBehavior,
+  HotkeyRegistration,
+  SequenceRegistrationView,
+} from '@tanstack/hotkeys'
+
+function sequenceKey(sequence: Array<string>): string {
+  return sequence.join('|')
+}
 
 type HotkeyListProps = {
   selectedId: () => string | null
@@ -78,11 +86,38 @@ function findScopeConflicts(
   )
 }
 
+function findSequenceTargetConflicts(
+  registration: SequenceRegistrationView,
+  all: Array<SequenceRegistrationView>,
+): Array<SequenceRegistrationView> {
+  return all.filter(
+    (other) =>
+      other.id !== registration.id &&
+      sequenceKey(other.sequence) === sequenceKey(registration.sequence) &&
+      other.options.eventType === registration.options.eventType &&
+      other.target === registration.target,
+  )
+}
+
+function findSequenceScopeConflicts(
+  registration: SequenceRegistrationView,
+  all: Array<SequenceRegistrationView>,
+): Array<SequenceRegistrationView> {
+  return all.filter(
+    (other) =>
+      other.id !== registration.id &&
+      sequenceKey(other.sequence) === sequenceKey(registration.sequence) &&
+      other.options.eventType === registration.options.eventType &&
+      other.target !== registration.target,
+  )
+}
+
 export function HotkeyList(props: HotkeyListProps) {
   const styles = useStyles()
   const state = useHotkeysDevtoolsState()
 
   const registrations = createMemo(() => state.registrations())
+  const sequenceRegistrations = createMemo(() => state.sequenceRegistrations())
 
   return (
     <>
@@ -243,6 +278,164 @@ export function HotkeyList(props: HotkeyListProps) {
           }}
         </For>
       </div>
+
+      <div class={styles().panelHeader}>
+        Sequences ({sequenceRegistrations().length})
+      </div>
+      <div class={styles().hotkeyList}>
+        <For each={sequenceRegistrations()}>
+          {(reg) => {
+            const targetConflicts = () =>
+              findSequenceTargetConflicts(reg, sequenceRegistrations())
+            const scopeConflicts = () =>
+              findSequenceScopeConflicts(reg, sequenceRegistrations())
+
+            const hasTargetConflict = () => targetConflicts().length > 0
+            const hasScopeConflict = () => scopeConflicts().length > 0
+
+            const conflictBehavior = (): ConflictBehavior =>
+              reg.options.conflictBehavior ?? 'warn'
+
+            const targetConflictBadge = () => {
+              const behavior = conflictBehavior()
+              const c = targetConflicts()
+              if (behavior === 'allow') {
+                return {
+                  style: 'badgeAllow' as const,
+                  label: '~',
+                  tooltip: `Allowed: ${c.length} other binding${c.length > 1 ? 's' : ''} on same sequence and target (conflictBehavior: allow)`,
+                }
+              }
+              if (behavior === 'error') {
+                return {
+                  style: 'badgeError' as const,
+                  label: '!',
+                  tooltip: `Error: ${c.length} conflicting binding${c.length > 1 ? 's' : ''} on same sequence and target (conflictBehavior: error)`,
+                }
+              }
+              return {
+                style: 'badgeConflict' as const,
+                label: '!',
+                tooltip: `Warning: ${c.length} other binding${c.length > 1 ? 's' : ''} on same sequence and target`,
+              }
+            }
+
+            const scopeConflictTooltip = () => {
+              const c = scopeConflicts()
+              return `Info: ${c.length} binding${c.length > 1 ? 's' : ''} with same sequence on different target${c.length > 1 ? 's' : ''}`
+            }
+
+            const enabled = () => reg.options.enabled !== false
+
+            const triggerCount = () =>
+              sequenceRegistrations().find((r) => r.id === reg.id)
+                ?.triggerCount ?? reg.triggerCount
+
+            const [prevCount, setPrevCount] = createSignal(reg.triggerCount)
+            const [pulsing, setPulsing] = createSignal(false)
+
+            createEffect(
+              on(triggerCount, (current) => {
+                if (current > prevCount()) {
+                  setPulsing(true)
+                  setTimeout(() => setPulsing(false), 600)
+                }
+                setPrevCount(current)
+              }),
+            )
+
+            return (
+              <div
+                class={clsx(
+                  styles().hotkeyRow,
+                  props.selectedId() === reg.id && styles().hotkeyRowSelected,
+                  pulsing() && styles().hotkeyRowTriggered,
+                )}
+                onClick={() => props.setSelectedId(reg.id)}
+              >
+                <span class={styles().hotkeyLabel}>
+                  {formatHotkeySequence(reg.sequence)}
+                </span>
+                <Show when={triggerCount() > 0}>
+                  <span class={styles().triggerCount}>x{triggerCount()}</span>
+                </Show>
+                <div class={styles().hotkeyBadges}>
+                  {hasTargetConflict() && (
+                    <span
+                      class={clsx(
+                        styles().badge,
+                        styles()[targetConflictBadge().style],
+                        styles().tooltip,
+                      )}
+                    >
+                      {targetConflictBadge().label}
+                      <span class={styles().tooltipText} data-tooltip>
+                        {targetConflictBadge().tooltip}
+                      </span>
+                    </span>
+                  )}
+                  {hasScopeConflict() && (
+                    <span
+                      class={clsx(
+                        styles().badge,
+                        styles().badgeInfo,
+                        styles().tooltip,
+                      )}
+                    >
+                      i
+                      <span class={styles().tooltipText} data-tooltip>
+                        {scopeConflictTooltip()}
+                      </span>
+                    </span>
+                  )}
+                  <span
+                    class={clsx(
+                      styles().badge,
+                      enabled()
+                        ? styles().badgeEnabled
+                        : styles().badgeDisabled,
+                      styles().tooltip,
+                    )}
+                  >
+                    {enabled() ? 'on' : 'off'}
+                    <span class={styles().tooltipText} data-tooltip>
+                      {enabled()
+                        ? 'Sequence is enabled'
+                        : 'Sequence is disabled'}
+                    </span>
+                  </span>
+                  <span
+                    class={clsx(
+                      styles().badge,
+                      (reg.options.eventType ?? 'keydown') === 'keydown'
+                        ? styles().badgeKeydown
+                        : styles().badgeKeyup,
+                      styles().tooltip,
+                    )}
+                  >
+                    {reg.options.eventType ?? 'keydown'}
+                    <span class={styles().tooltipText} data-tooltip>
+                      Fires on {reg.options.eventType ?? 'keydown'} event
+                    </span>
+                  </span>
+                  <span
+                    class={clsx(
+                      styles().badge,
+                      styles().badgeTarget,
+                      styles().tooltip,
+                    )}
+                  >
+                    {getTargetLabel(reg.target)}
+                    <span class={styles().tooltipText} data-tooltip>
+                      {getTargetTooltip(reg.target)}
+                    </span>
+                  </span>
+                </div>
+              </div>
+            )
+          }}
+        </For>
+      </div>
     </>
   )
 }

package/src/components/Shell.tsx

@@ -16,7 +16,10 @@ export function Shell() {
   const selectedRegistration = createMemo(() => {
     const id = selectedId()
     if (!id) return null
-    return state.registrations().find((r) => r.id === id) ?? null
+    const hotkey = state.registrations().find((r) => r.id === id)
+    if (hotkey) return hotkey
+    const sequence = state.sequenceRegistrations().find((r) => r.id === id)
+    return sequence ?? null
   })
 
   let dragStartX = 0