refactor: extract usekeyboardactivation hook

[mkczarkowski]

Summary

• add a reusable useKeyboardActivation hook to normalize keyboard-initiated activation
• update rule builder and collection UI elements to rely on the shared handler for Enter/Space support
• add Vitest coverage for the shared hook to verify default/callback activation behavior

Testing
npm run lint:check
npm run test

[github-actions]

✅ All checks have passed successfully!

• Lint: ✅
• Unit Tests: ✅
• E2E Tests: ✅

Coverage reports have been uploaded as artifacts.

[claude]

Claude finished @mkczarkowski's task —— View job

---

Code Review Complete

Tasks

• Examine PR diff and understand all changes
• Review the useKeyboardActivation hook implementation
• Review test coverage for the hook
• Review updated components using the hook
• Check for code quality and best practices
• Provide inline comments and summary

---

Summary

This PR appears to be out of sync with the master branch. The hook implementation described in the PR description (useKeyboardActivation) was already merged to master in commit 600ebe8. The current PR only adds a blank line between imports in RuleCollectionListEntry.tsx.

Current PR Change

• Only change: Adds a blank line between DeletionDialog and SaveRuleCollectionDialog imports
• This is a trivial formatting change that doesn't require review

Review of the Hook Implementation (Already in Master)

Since the PR description discusses the hook refactoring, I reviewed the actual implementation that's already in master:

✅ Strengths

1. Excellent abstraction: Centralizes keyboard activation logic across components
2. Good test coverage: 101 lines of comprehensive tests covering default keys, custom keys, preventDefault, and stopPropagation
3. Type safety: Well-typed with TypeScript generics
4. Accessibility: Properly implements Enter/Space keyboard support per ARIA best practices
5. Flexible API: Configurable keys, preventDefault, and stopPropagation options

⚠️ Issues Found (Already in Master)

1. Performance Issue: Inline Handler Creation

In src/components/rule-builder/LibraryItem.tsx:32 and src/components/rule-builder/SelectedRules.tsx:41, handlers are created inline within JSX/loops:

// ❌ Bad: Creates new function every render
onKeyDown={createKeyboardActivationHandler(() => onToggle(library))}

This defeats memoization. Compare with the correct pattern in SearchInput.tsx:36-40 and RuleCollectionListEntry.tsx:87-97:

// ✅ Good: Memoized handler
const handleKeyDown = useMemo(
  () => createKeyboardActivationHandler(handleClear),
  [createKeyboardActivationHandler, handleClear]
);

Impact: Unnecessary re-renders and function allocations on every render cycle.

2. Minor Optimization in Hook

In src/hooks/useKeyboardActivation.ts:29, the keysSignature computation is unnecessary:

// Current (unnecessary string join)
const keysSignature = useMemo(() => keys.join(','), [keys]);
const keySet = useMemo(() => new Set(keys), [keysSignature]);

// Better (direct dependency)
const keySet = useMemo(() => new Set(keys), [keys]);

React's dependency comparison works correctly with array references.

Recommendations

1. This PR: Since this PR only adds a whitespace change and the hook work is already merged, consider closing this PR as the work is complete.

2. Follow-up: Create a new PR to fix the performance issues in LibraryItem.tsx and SelectedRules.tsx by memoizing keyboard handlers properly.

3. Optional optimization: Remove the keysSignature intermediate value in the hook.

Overall Assessment

The hook implementation itself is very good - it's well-tested, type-safe, and provides excellent accessibility support. The main issues are in how it's being consumed in a couple of components, not in the hook itself.

---

[github-actions]

✅ All checks have passed successfully!

• Lint: ✅
• Unit Tests: ✅
• E2E Tests: ✅

Coverage reports have been uploaded as artifacts.