feat(platform): extract ReorderList and LocaleTabs components

[yannickmonney]

Extract inline reorder and locale tab UI from conversation-starters into general-purpose components with Storybook stories.

ReorderList: uses useDragControls for smoother drag, larger arrow buttons (IconButton size-7), readonlyOrder prop, and generic render prop API.

LocaleTabs: underline-style locale switcher with default/untranslated badges and actions slot.

Fix conversation starters locale sync: override locales now pad/trim slots to match default locale count, preserving index alignment. Structure controls (add/remove/reorder) are hidden on override locales.

Summary by CodeRabbit

Release Notes

• New Features
  • Added draggable reorderable list component enabling users to arrange items with move up/down buttons and remove actions.
  • Added locale tab navigation component with translation status indicators, custom action button support, and disabled state handling.
  • Enhanced conversation starter management interface with improved multi-language override handling and better synchronization of locale-specific content.

[greptile-apps]

Your free trial has ended. If you'd like to continue receiving code reviews, you can add a payment method here.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR introduces two new UI components—ReorderList (with drag-and-drop reordering and item action controls) and LocaleTabs (with horizontal locale selection)—along with comprehensive Storybook stories for each. The conversation-starters page is then refactored to replace inline locale-tab rendering and framer-motion reorder logic with these new components, while adjusting override-slot handling to maintain positional consistency across locales.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

The review requires understanding two new generic component APIs and their integration points, verifying Storybook story completeness, and validating the refactoring of conversation-starters to correctly wire state and callbacks through the new components, including the override-slot padding/trimming logic.

Possibly related PRs

• feat(platform): add i18n support for agent config fields #943 — Directly modifies services/platform/app/routes/dashboard/$id/agents/$agentId/conversation-starters.tsx to introduce LocaleTabs and ReorderList components, creating a direct code-level dependency.

🚥 Pre-merge checks | ✅ 2 | ❌ 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 (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: extracting two new components (ReorderList and LocaleTabs) from existing code into reusable, general-purpose components with Storybook stories.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/reorder-list-locale-tabs-components

---

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: 3

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

services/platform/app/routes/dashboard/$id/agents/$agentId/conversation-starters.tsx (1)

187-190: ⚠️ Potential issue | 🔴 Critical

Fix return type to resolve typecheck failure.

hasLocaleContent returns boolean | undefined when starters is undefined, but LocaleTabs.hasContent expects (locale: string) => boolean. This causes the pipeline failure at line 244.

🐛 Proposed fix

   function hasLocaleContent(locale: string) {
     const starters = config.i18n?.[locale]?.conversationStarters;
-    return starters && starters.length > 0;
+    return Boolean(starters && starters.length > 0);
   }

🤖 Prompt for AI Agents

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

In
`@services/platform/app/routes/dashboard/`$id/agents/$agentId/conversation-starters.tsx
around lines 187 - 190, The function hasLocaleContent currently can return
undefined; change it to always return a boolean so it matches
LocaleTabs.hasContent: inside hasLocaleContent (referencing config.i18n and
conversationStarters) coerce the result to a boolean (e.g., check
starters?.length and return a boolean expression such as (starters?.length ?? 0)
> 0 or use !! to cast) so the function signature effectively becomes (locale:
string) => boolean and the typecheck will pass.

🤖 Prompt for all review comments with AI agents

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

Inline comments:
In `@services/platform/app/components/ui/forms/reorder-list.tsx`:
- Around line 38-52: Remove the unnecessary React reserved "key" property from
the ReorderListRowProps<T extends ReorderItem> interface: delete the key?:
string declaration in ReorderListRowProps, and update any code that attempted to
pass or type-check a "key" through this interface (e.g., places using
ReorderListRowProps or components that accept those props); rely on React's
external key handling when rendering list items and keep the rest of the props
(item, index, total, readonlyOrder, onMoveUp, onMoveDown, onRemove, renderItem,
moveUpLabel, moveDownLabel, dragHandleLabel, removeLabel) unchanged.
- Around line 63-66: The default aria-label strings (moveUpLabel, moveDownLabel,
dragHandleLabel, removeLabel) in the ReorderList component are hardcoded
English; remove those literal defaults from the parameter destructuring in the
ReorderList function, update the ReorderListProps type to make these four props
required (non-optional), and fix all call sites to pass translated labels (or
alternatively move to use the app's translation hook inside ReorderList to
derive fallback values); ensure references to moveUpLabel, moveDownLabel,
dragHandleLabel, and removeLabel are only used from props and that TS types
reflect they must be provided.

In `@services/platform/app/components/ui/navigation/locale-tabs.tsx`:
- Around line 45-81: The tab UI rendered in tabs.map should expose ARIA roles:
add role="tablist" to the container element that wraps the mapped buttons, and
add role="tab" plus aria-selected={active} on each button returned by the map
(the button that uses onLocaleChange and checks active via
activeLocale/isDefault). Also ensure the button remains focusable and that any
visual active state (the active span) corresponds to aria-selected for the
button; optionally keep disabled handling as-is (disabled buttons should not
have aria-selected=true).

---

Outside diff comments:
In
`@services/platform/app/routes/dashboard/`$id/agents/$agentId/conversation-starters.tsx:
- Around line 187-190: The function hasLocaleContent currently can return
undefined; change it to always return a boolean so it matches
LocaleTabs.hasContent: inside hasLocaleContent (referencing config.i18n and
conversationStarters) coerce the result to a boolean (e.g., check
starters?.length and return a boolean expression such as (starters?.length ?? 0)
> 0 or use !! to cast) so the function signature effectively becomes (locale:
string) => boolean and the typecheck will pass.

🪄 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: ASSERTIVE

Plan: Pro

Run ID: e0916da2-b0c0-46b8-8a09-bb3cda75e47d

📥 Commits

Reviewing files that changed from the base of the PR and between 93f9fe6 and 067b55b.

📒 Files selected for processing (5)

• services/platform/app/components/ui/forms/reorder-list.stories.tsx
• services/platform/app/components/ui/forms/reorder-list.tsx
• services/platform/app/components/ui/navigation/locale-tabs.stories.tsx
• services/platform/app/components/ui/navigation/locale-tabs.tsx
• services/platform/app/routes/dashboard/$id/agents/$agentId/conversation-starters.tsx