feat(editor): duplicate annotations

[kuishou68]

Summary

Closes #167

Adds a Duplicate button to the annotation settings panel, allowing users to quickly clone any selected annotation.

---

Changes

VideoEditor.tsx

• Added handleAnnotationDuplicate(id) handler that:
  • Finds the annotation by ID
  • Generates a new unique ID
  • Increments z-index by 1
  • Offsets position by { x: +4, y: +4 } so the duplicate is visually distinct
  • Deep-copies size, style, and figureData (if present)
  • Pushes the new annotation into annotationRegions via pushState
  • Selects the new annotation (clears zoom/trim selection)

SettingsPanel.tsx

• Added onAnnotationDuplicate?: (id: string) => void prop
• Passes onDuplicate handler down to AnnotationSettingsPanel when an annotation is selected

AnnotationSettingsPanel.tsx

• Added optional onDuplicate?: () => void prop
• Replaced the single delete button with a two-column grid layout:
  • Duplicate button (outline style, disabled when onDuplicate is absent)
  • Delete button (existing destructive style, unchanged)

---

Type of Change

• New feature (non-breaking change which adds functionality)

---

Screenshots

Duplicate button appears alongside the existing Delete button in the annotation settings panel.

---

Testing

1. Open the video editor and add an annotation
2. Select the annotation to open the settings panel
3. Click the Duplicate button
4. Verify a new annotation appears offset by 4px with identical style and content
5. Verify the duplicated annotation is immediately selected

---

Checklist

• My changes follow the existing code style
• I have tested the changes locally
• No unnecessary files are included

Summary by CodeRabbit

• New Features
  • Added annotation duplication functionality to the video editor. Users can now duplicate existing annotations using a new Duplicate button in the annotation settings panel, creating a copy of the selected annotation while maintaining its properties.

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

This PR implements annotation duplication functionality across three components. A new "Duplicate" button is added to the AnnotationSettingsPanel alongside the delete button. The feature threads an optional callback through SettingsPanel and implements duplication logic in VideoEditor that creates a new annotation with copied styling, incremented zIndex, and offset position.

Changes

Cohort / File(s)	Summary
UI Button Addition src/components/video-editor/AnnotationSettingsPanel.tsx	Added optional onDuplicate callback prop. Restructured bottom-right action area from single full-width delete button to 2-column grid with new outline "Duplicate" button (disabled when callback not provided) and existing delete button.
Prop Threading src/components/video-editor/SettingsPanel.tsx	Added optional onAnnotationDuplicate prop that gets plumbed through to AnnotationSettingsPanel as onDuplicate, conditionally invoking the callback with the selected annotation's ID.
Duplication Logic src/components/video-editor/VideoEditor.tsx	Implemented handleAnnotationDuplicate callback that creates new annotation region with fresh duplicateId, incremented zIndex, copied size/style, offset position by (+4, +4), deep-copied figureData, and updates selection to the new duplicate while clearing zoom/trim selections.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~15 minutes

Poem

🎯 a duplicate button shines so bright,
copy the style, the zindex height,
offset it slightly, position askew,
one annotation becomes two! 🎨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main feature: adding duplicate annotation functionality to the video editor.
Description check	✅ Passed	The PR description covers all template sections with clear summaries of changes, type of change, testing steps, and completed checklist items.
Linked Issues check	✅ Passed	The implementation fully satisfies issue #167 requirements: duplicate button added to annotation settings panel, style/location preserved, user can change text only.
Out of Scope Changes check	✅ Passed	All code changes directly support the duplicate annotation feature. Minor formatting/import fixes mentioned in comments are standard CI maintenance, not out-of-scope.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/video-editor/AnnotationSettingsPanel.tsx`:
- Around line 603-613: The "Duplicate" button in AnnotationSettingsPanel is
hardcoded and must be localized; replace the literal "Duplicate" string inside
the Button (the element with onClick={() => onDuplicate?.()} and className...)
with the component's i18n call (the same translation helper used elsewhere in
this file, e.g., t('...') or useTranslations('...')) using the appropriate
translation key (e.g., "duplicate" or "annotation.duplicate"), and add that key
to the project's locale files so the label is translated in non-English locales.

In `@src/components/video-editor/VideoEditor.tsx`:
- Around line 834-859: handleAnnotationDuplicate currently increments
nextAnnotationIdRef and nextAnnotationZIndexRef and sets selection even when the
source region isn't found, causing wasted IDs and invalid selection; modify the
flow so you first use pushState to find the source region and only
generate/consume the new duplicateId and duplicateZIndex after confirming the
source exists (or abort without mutating refs), returning the previous state
unchanged if source is missing, and only call
setSelectedAnnotationId(duplicateId) / setSelectedZoomId(null) /
setSelectedTrimId(null) when a duplicate was actually created; you can either
move the id/zIndex increments inside the pushState callback after the source
lookup or detect source absence and skip both state change and selection updates
to avoid no-op history entries and invalid selection.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f645b4f1-d924-463b-9d88-8ba84ead134b

📥 Commits

Reviewing files that changed from the base of the PR and between da16872 and 5426b62.

📒 Files selected for processing (3)

• src/components/video-editor/AnnotationSettingsPanel.tsx
• src/components/video-editor/SettingsPanel.tsx
• src/components/video-editor/VideoEditor.tsx

[siddharthvaddem]

@kuishou68 ci fixes 🙏

[kuishou68]

Hi @siddharthvaddem! Thanks for the review 🙏

Fixed both Biome lint errors:

1. AnnotationSettingsPanel.tsx — sorted lucide-react imports alphabetically (Bold before Copy)
2. SettingsPanel.tsx — wrapped the long onDuplicate prop across multiple lines to satisfy the formatter

Both fixes are in the latest two commits. Should be green now!

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@scripts/i18n-check.mjs`:
- Around line 36-41: The current compareLocales computed from filesystem entries
ignores the configured SUPPORTED_LOCALES, so missing locale folders can go
unnoticed; update the logic to iterate SUPPORTED_LOCALES (excluding
BASE_LOCALE), check that each locale has a corresponding directory under
LOCALES_DIR, collect missing dirs and non-configured extra dirs, and fail
(throw/exit non-zero) when any configured locale folder is missing; keep
compareLocales as the intersection of SUPPORTED_LOCALES and actual directories
for downstream comparisons and reference the existing symbols SUPPORTED_LOCALES,
BASE_LOCALE, LOCALES_DIR, and compareLocales when implementing these checks.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 3ff1dbbe-3a80-4b8f-a495-8500ba3d458a

📥 Commits

Reviewing files that changed from the base of the PR and between 64e011f and 501c4f2.

📒 Files selected for processing (1)

• scripts/i18n-check.mjs