# Agent K: Reactions, Pins, Search, Forward

## Phase: 4 (Feature Completion)
## Depends on: Agent F (Chat Screen with MessageBubble)

## Context
These features enhance the chat experience. Reactions use 6 predefined emoji.
Pins allow highlighting important messages. Search is client-side through cached messages.
Forward sends messages to other conversations with attribution.

## Task
Create reaction picker, pin UI, search overlay, forward dialog, and @mention autocomplete.

## Files to Create

### 1. ui/chat/ReactionPicker.kt
Emoji reaction picker composable:
- **Layout**: Horizontal row of 6 emoji buttons in a rounded Surface1 card
- **Emoji**: thumbsup, heart, laugh, surprised, sad, thumbsdown
- **Display**: Use emoji characters (not images)
- **Behavior**:
  - Shown as popup/overlay near the long-pressed message
  - Tap emoji: add reaction (or remove if already reacted)
  - Dismiss on outside tap
- **Animation**: Scale-in animation when appearing

### 2. ui/chat/ReactionBadge.kt
Reaction display below messages:
- **Layout**: FlowRow of reaction chips
- **Each chip**: emoji + count in a small pill shape
  - Background: Surface1 (or Lavender alpha if user reacted)
  - Border: Surface2 (or Lavender if user reacted)
  - Text: emoji (14sp) + count (12sp)
- **Behavior**: Tap to toggle own reaction

### 3. ui/chat/PinnedMessagesSheet.kt
Bottom sheet showing pinned messages:
- **Header**: "Pinned Messages" title + close button
- **List**: LazyColumn of pinned messages
  - Each item: sender name + message text preview + pin date
  - Tap: scroll to message in chat (dismiss sheet)
- **Empty state**: "No pinned messages"

### 4. ui/chat/SearchOverlay.kt
Search bar overlay at top of chat screen:
- **Layout**: Row with:
  - Search TextField (weight 1f, with search icon)
  - Match count text ("3 of 12")
  - Up arrow button (previous result)
  - Down arrow button (next result)
  - Close button (X)
- **Behavior**:
  - Activated by search icon in top bar
  - Results update as user types (debounced 300ms)
  - Current match highlighted differently from other matches
  - Up/Down cycle through results
  - Escape or X closes search
- **Match highlighting in messages**: Yellow background on matching text

### 5. ui/chat/ForwardPickerDialog.kt
Dialog for selecting forwarding target:
- **Title**: "Forward to..."
- **Conversation list**: LazyColumn of all user's conversations
  - Each item: avatar + conversation name
  - Tap: forward to that conversation and dismiss
- **Search field**: Filter conversations by name
- **Cancel button**

### 6. ui/chat/MentionAutocomplete.kt
@mention autocomplete popup:
- **Trigger**: Typing "@" in message input
- **Layout**: Popup above the text input
  - LazyColumn of matching member names
  - Each item: avatar (24dp) + username
- **Behavior**:
  - Filters as user types after "@"
  - Tap: inserts "@username " into text field
  - Dismiss on escape, backspace past "@", or clicking outside
- **Styling**: Surface1 background, elevated (shadow)

## Reaction Emoji Mapping
```
"thumbsup"    -> 👍
"heart"       -> ❤️
"laugh"       -> 😂
"surprised"   -> 😮
"sad"         -> 😢
"thumbsdown"  -> 👎
```

## Constraints
- Reaction picker uses emoji characters (Unicode), not custom images
- Search is debounced (300ms) to avoid excessive computation
- Forward dialog loads conversation list from local cache
- @mention autocomplete only shows members of current conversation
- All animations should be subtle and fast (200-300ms)

## DO NOT
- Implement actual server calls for reactions/pins
- Handle message encryption for forwarding
- Implement full-text search indexing (just LIKE query on cached text)