fix: remove broken category nav strip from emoji picker

The row of group icons between the search bar and emoji grid looked like
selectable emoji but only scrolled to groups — confusing users who expected
clicking them to select an emoji. Remove the strip entirely so the picker
opens directly with search + categorized grid.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/EmojiPicker.tsx

@@ -1,5 +1,5 @@
 import { useState, useRef, useEffect, useCallback } from 'react'
-import { EMOJI_GROUPS, EMOJIS_BY_GROUP, GROUP_ICONS, GROUP_SHORT_LABELS, searchEmojis } from '../utils/emoji'
+import { EMOJI_GROUPS, EMOJIS_BY_GROUP, GROUP_SHORT_LABELS, searchEmojis } from '../utils/emoji'
 
 interface EmojiPickerProps {
   onSelect: (emoji: string) => void
@@ -11,7 +11,6 @@ export function EmojiPicker({ onSelect, onClose }: EmojiPickerProps) {
   const inputRef = useRef<HTMLInputElement>(null)
   const containerRef = useRef<HTMLDivElement>(null)
   const scrollRef = useRef<HTMLDivElement>(null)
-  const groupRefs = useRef<Map<string, HTMLDivElement>>(new Map())
 
   useEffect(() => {
     setTimeout(() => inputRef.current?.focus(), 50)
@@ -45,13 +44,6 @@ export function EmojiPicker({ onSelect, onClose }: EmojiPickerProps) {
     onClose()
   }, [onSelect, onClose])
 
-  const scrollToGroup = useCallback((group: string) => {
-    const el = groupRefs.current.get(group)
-    if (el && scrollRef.current) {
-      el.scrollIntoView({ behavior: 'smooth', block: 'start' })
-    }
-  }, [])
-
   const searchResults = search.trim() ? searchEmojis(search) : null
   const isSearching = searchResults !== null
 
@@ -73,20 +65,6 @@ export function EmojiPicker({ onSelect, onClose }: EmojiPickerProps) {
           data-testid="emoji-picker-search"
         />
       </div>
-      {!isSearching && (
-        <div className="flex gap-0.5 border-b border-border px-2 py-1.5 overflow-x-auto">
-          {EMOJI_GROUPS.map(group => (
-            <button
-              key={group}
-              className="shrink-0 rounded px-1.5 py-1 text-base transition-colors hover:bg-secondary"
-              onClick={() => scrollToGroup(group)}
-              title={GROUP_SHORT_LABELS[group]}
-            >
-              {GROUP_ICONS[group]}
-            </button>
-          ))}
-        </div>
-      )}
       <div ref={scrollRef} className="max-h-[300px] overflow-y-auto p-2" data-testid="emoji-picker-grid">
         {isSearching ? (
           searchResults.length > 0 ? (
@@ -113,10 +91,7 @@ export function EmojiPicker({ onSelect, onClose }: EmojiPickerProps) {
             const emojis = EMOJIS_BY_GROUP.get(group)
             if (!emojis?.length) return null
             return (
-              <div
-                key={group}
-                ref={el => { if (el) groupRefs.current.set(group, el) }}
-              >
+              <div key={group}>
                 <div className="sticky top-0 z-10 bg-popover px-1 pb-1 pt-2 text-[11px] font-medium text-muted-foreground">
                   {GROUP_SHORT_LABELS[group]}
                 </div>