feat(annotations): Figma-style UI overhaul

- Redesign PinOverlay: teardrop pins with author initials, colors, numbers
- Split FeedbackPanel into modular components:
  - feedback/FeedbackPanel.tsx (orchestrator)
  - feedback/ThreadList.tsx (list view with filters)
  - feedback/ThreadListItem.tsx (individual thread row)
  - feedback/ThreadDetail.tsx (expanded thread with comments)
  - feedback/CommentItem.tsx (single comment)
  - feedback/CommentInput.tsx (reusable input with Enter/Shift+Enter)
  - feedback/feedbackStyles.ts (shared design tokens)
- Add status colors: red (open), green (resolved)
- Add relative timestamps (2h ago, 3d, etc.)
- Wire pin clicks to expand threads in panel
- Pins follow media transforms in real-time
- Add delete thread with inline confirmation
- Register review mode shortcut (. key)
- Better empty states and filter bar (Open/Resolved/All/Mine)
This commit is contained in:
Hiren Kangad
2026-03-11 01:08:05 +05:30
parent f24414e25c
commit ed8424d9a1
15 changed files with 1228 additions and 419 deletions
@@ -688,4 +688,14 @@ export const shortcuts: ShortcutDef[] = [
category: 'view', description: 'Show shortcuts help',
handler: (ctx) => ctx.toggleShowHelp(),
},
{
id: 'toggle-review',
keys: { key: '.' },
category: 'view',
description: 'Toggle review mode',
needsSelection: false,
handler: (ctx: ShortcutContext) => {
ctx.toggleReviewMode?.();
},
},
];