@tanstack/hotkeys-devtools 0.7.4 → 0.8.0

package/src/components/HotkeyList.tsx

@@ -1,5 +1,6 @@
 import { For, Show, createEffect, createMemo, createSignal, on } from 'solid-js'
 import clsx from 'clsx'
+import { matchSorter } from 'match-sorter'
 import { formatForDisplay } from '@tanstack/hotkeys'
 import { useStyles } from '../styles/use-styles'
 import { useHotkeysDevtoolsState } from '../HotkeysContextProvider'
@@ -113,6 +114,17 @@ function findSequenceScopeConflicts(
   )
 }
 
+function buildRowTooltip(meta?: {
+  name?: string
+  description?: string
+}): string | undefined {
+  if (!meta) return undefined
+  const parts: Array<string> = []
+  if (meta.name) parts.push(meta.name)
+  if (meta.description) parts.push(meta.description)
+  return parts.length > 0 ? parts.join(' — ') : undefined
+}
+
 function SequenceListRow(props: {
   reg: SequenceRegistrationView
   getSequences: () => Array<SequenceRegistrationView>
@@ -195,32 +207,46 @@ function SequenceListRow(props: {
     }),
   )
 
+  const metaName = () => props.reg.options.meta?.name
+  const rowTooltip = () => buildRowTooltip(props.reg.options.meta)
+
   return (
     <div
       class={clsx(
         styles().hotkeyRow,
         props.selectedId() === props.reg.id && styles().hotkeyRowSelected,
         pulsing() && styles().hotkeyRowTriggered,
+        rowTooltip() && styles().tooltip,
       )}
       onClick={() => props.setSelectedId(props.reg.id)}
     >
+      <Show when={rowTooltip()}>
+        <span class={styles().rowTooltipText} data-tooltip>
+          {rowTooltip()}
+        </span>
+      </Show>
       <span class={styles().hotkeyLabel}>
-        <For each={liveSequenceReg().sequence}>
-          {(step, i) => (
-            <span>
-              <Show when={i() > 0}> </Show>
-              <span
-                class={
-                  i() < matchedSteps()
-                    ? styles().sequenceStepMatched
-                    : undefined
-                }
-              >
-                {formatForDisplay(step)}
+        <span class={styles().hotkeyLabelKeys}>
+          <For each={liveSequenceReg().sequence}>
+            {(step, i) => (
+              <span>
+                <Show when={i() > 0}> </Show>
+                <span
+                  class={
+                    i() < matchedSteps()
+                      ? styles().sequenceStepMatched
+                      : undefined
+                  }
+                >
+                  {formatForDisplay(step)}
+                </span>
               </span>
-            </span>
-          )}
-        </For>
+            )}
+          </For>
+        </span>
+        <Show when={metaName()}>
+          <span class={styles().hotkeyLabelName}>{metaName()}</span>
+        </Show>
       </span>
       <Show when={triggerCount() > 0}>
         <span class={styles().triggerCount}>x{triggerCount()}</span>
@@ -293,14 +319,62 @@ export function HotkeyList(props: HotkeyListProps) {
   const styles = useStyles()
   const state = useHotkeysDevtoolsState()
 
+  const [searchQuery, setSearchQuery] = createSignal('')
+
   const registrations = createMemo(() => state.registrations())
   const sequenceRegistrations = createMemo(() => state.sequenceRegistrations())
 
+  const filteredRegistrations = createMemo(() => {
+    const query = searchQuery().trim()
+    if (!query) return registrations()
+    return matchSorter(registrations(), query, {
+      keys: [
+        (r) => formatForDisplay(r.hotkey),
+        'hotkey',
+        'options.meta.name',
+        'options.meta.description',
+      ],
+    })
+  })
+
+  const filteredSequenceRegistrations = createMemo(() => {
+    const query = searchQuery().trim()
+    if (!query) return sequenceRegistrations()
+    return matchSorter(sequenceRegistrations(), query, {
+      keys: [
+        (r) => r.sequence.map((s) => formatForDisplay(s)).join(' '),
+        (r) => r.sequence.join(' '),
+        'options.meta.name',
+        'options.meta.description',
+      ],
+    })
+  })
+
   return (
     <>
-      <div class={styles().panelHeader}>Hotkeys ({registrations().length})</div>
+      <div class={styles().searchContainer}>
+        <input
+          type="text"
+          class={styles().searchInput}
+          placeholder="Search hotkeys..."
+          value={searchQuery()}
+          onInput={(e) => setSearchQuery(e.currentTarget.value)}
+        />
+        <Show when={searchQuery()}>
+          <button
+            class={styles().searchClear}
+            onClick={() => setSearchQuery('')}
+          >
+            &times;
+          </button>
+        </Show>
+      </div>
+
+      <div class={styles().panelHeader}>
+        Hotkeys ({filteredRegistrations().length})
+      </div>
       <div class={styles().hotkeyList}>
-        <For each={registrations()}>
+        <For each={filteredRegistrations()}>
           {(reg) => {
             const targetConflicts = () =>
               findTargetConflicts(reg, registrations())
@@ -365,17 +439,31 @@ export function HotkeyList(props: HotkeyListProps) {
               }),
             )
 
+            const metaName = () => reg.options.meta?.name
+            const rowTooltip = () => buildRowTooltip(reg.options.meta)
+
             return (
               <div
                 class={clsx(
                   styles().hotkeyRow,
                   props.selectedId() === reg.id && styles().hotkeyRowSelected,
                   pulsing() && styles().hotkeyRowTriggered,
+                  rowTooltip() && styles().tooltip,
                 )}
                 onClick={() => props.setSelectedId(reg.id)}
               >
+                <Show when={rowTooltip()}>
+                  <span class={styles().rowTooltipText} data-tooltip>
+                    {rowTooltip()}
+                  </span>
+                </Show>
                 <span class={styles().hotkeyLabel}>
-                  {formatForDisplay(reg.hotkey)}
+                  <span class={styles().hotkeyLabelKeys}>
+                    {formatForDisplay(reg.hotkey)}
+                  </span>
+                  <Show when={metaName()}>
+                    <span class={styles().hotkeyLabelName}>{metaName()}</span>
+                  </Show>
                 </span>
                 <Show when={triggerCount() > 0}>
                   <span class={styles().triggerCount}>x{triggerCount()}</span>
@@ -457,10 +545,10 @@ export function HotkeyList(props: HotkeyListProps) {
       </div>
 
       <div class={styles().panelHeader}>
-        Sequences ({sequenceRegistrations().length})
+        Sequences ({filteredSequenceRegistrations().length})
       </div>
       <div class={styles().hotkeyList}>
-        <For each={sequenceRegistrations()}>
+        <For each={filteredSequenceRegistrations()}>
           {(reg) => (
             <SequenceListRow
               reg={reg}

package/src/styles/use-styles.ts

@@ -173,6 +173,55 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       min-width: 0;
       overflow: hidden;
     `,
+    searchContainer: css`
+      position: relative;
+      padding: ${size[2]};
+      padding-bottom: 0;
+      flex-shrink: 0;
+    `,
+    searchInput: css`
+      width: 100%;
+      padding: ${size[1.5]} ${size[2]};
+      padding-right: ${size[7]};
+      font-size: ${fontSize.xs};
+      font-family: ${fontFamily.sans};
+      color: ${t(colors.gray[900], colors.gray[100])};
+      background: ${t(colors.gray[200], colors.darkGray[700])};
+      border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};
+      border-radius: ${border.radius.md};
+      outline: none;
+      box-sizing: border-box;
+
+      &::placeholder {
+        color: ${t(colors.gray[500], colors.gray[500])};
+      }
+
+      &:focus {
+        border-color: ${t(colors.blue[500], colors.blue[400])};
+        box-shadow: 0 0 0 1px
+          ${t(colors.blue[500] + alpha[30], colors.blue[400] + alpha[30])};
+      }
+    `,
+    searchClear: css`
+      position: absolute;
+      right: ${size[3]};
+      top: 50%;
+      transform: translateY(-50%);
+      background: none;
+      border: none;
+      color: ${t(colors.gray[500], colors.gray[400])};
+      font-size: ${fontSize.md};
+      cursor: pointer;
+      padding: ${size[1]};
+      line-height: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:hover {
+        color: ${t(colors.gray[700], colors.gray[200])};
+      }
+    `,
     panelHeader: css`
       font-size: ${fontSize.md};
       font-weight: ${font.weight.bold};
@@ -225,13 +274,28 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       }
     `,
     hotkeyLabel: css`
-      font-family: ${fontFamily.mono};
       font-size: ${fontSize.xs};
       color: ${t(colors.gray[900], colors.gray[100])};
       flex: 1;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+      display: flex;
+      align-items: center;
+      gap: ${size[1.5]};
+      min-width: 0;
+    `,
+    hotkeyLabelKeys: css`
+      font-family: ${fontFamily.mono};
+      flex-shrink: 0;
+    `,
+    hotkeyLabelName: css`
+      font-family: ${fontFamily.sans};
+      color: ${t(colors.gray[500], colors.gray[400])};
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      min-width: 0;
     `,
     sequenceStepMatched: css`
       font-weight: ${font.weight.bold};
@@ -580,6 +644,29 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       z-index: ${tokens.zIndices.tooltip};
       margin-top: ${size[1]};
     `,
+    rowTooltipText: css`
+      position: absolute;
+      bottom: 100%;
+      left: ${size[2]};
+      padding: ${size[1]} ${size[1.5]};
+      background: ${t(colors.gray[800], colors.darkGray[500])};
+      color: ${t(colors.white, colors.gray[100])};
+      font-size: ${fontSize['2xs']};
+      font-family: ${fontFamily.sans};
+      border-radius: ${border.radius.sm};
+      white-space: nowrap;
+      pointer-events: none;
+      opacity: 0;
+      visibility: hidden;
+      transition:
+        opacity 0.15s,
+        visibility 0.15s;
+      z-index: ${tokens.zIndices.tooltip};
+      margin-bottom: ${size[1]};
+      max-width: 300px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    `,
     triggerCount: css`
       font-family: ${fontFamily.mono};
       font-size: ${fontSize['2xs']};