Improve Focus Group workflow UX

- Rename "Copy Discussion Guide" button to "Import Discussion Guide from Other Project"
- Reorder tabs from Setup → Review & Edit → Participants to Setup → Participant Selection → Review & Edit
- Rename "Participants" tab to "Participant Selection" for clarity

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
michael 2025-12-04 09:30:57 -06:00
parent 08dbd5f5a2
commit 28c7bbc055
3 changed files with 38 additions and 37 deletions

View file

@ -497,8 +497,8 @@ export default function FocusGroupModerator({
<Tabs value={activeTab} onValueChange={setActiveTab}>
<TabsList className="grid w-full grid-cols-3 mb-6">
<TabsTrigger value="setup">Setup</TabsTrigger>
<TabsTrigger value="participants">Participant Selection</TabsTrigger>
<TabsTrigger value="review">Review & Edit</TabsTrigger>
<TabsTrigger value="participants">Participants</TabsTrigger>
</TabsList>
<TabsContent value="setup">
@ -513,22 +513,6 @@ export default function FocusGroupModerator({
/>
</TabsContent>
<TabsContent value="review">
<ReviewTab
discussionGuide={guideGeneration.discussionGuide}
backendAssets={backendAssets}
draftFocusGroupId={draftFocusGroupId}
onSaveGuide={guideGeneration.handleSaveDiscussionGuide}
onDownloadGuide={guideGeneration.handleDownloadDiscussionGuide}
isDownloading={guideGeneration.isDownloadingGuide}
guideGenerationState={guideGeneration.guideGenerationState}
onEditingChange={guideGeneration.handleEditingStateChange}
onNavigateToSetup={() => setActiveTab('setup')}
onNavigateToParticipants={() => setActiveTab('participants')}
isJsonFormat={guideGeneration.isJsonFormat}
/>
</TabsContent>
<TabsContent value="participants">
<ParticipantsTab
personas={personas}
@ -566,25 +550,42 @@ export default function FocusGroupModerator({
canStart={selectedParticipants.length >= 1 && !!guideGeneration.discussionGuide}
/>
{/* Filter Dialog */}
<PersonaFilterDialog
open={filtering.isFilterOpen}
onOpenChange={(open) => {
if (open) {
filtering.openFilterDialog();
} else {
filtering.setIsFilterOpen(false);
}
}}
workingFilters={filtering.workingFilters}
personas={personas}
getFilterOptions={filtering.getFilterOptions}
getFilteredOptions={filtering.getFilteredOptions}
onToggleFilter={filtering.toggleFilter}
onApply={filtering.applyFilters}
onReset={filtering.resetFilters}
</TabsContent>
<TabsContent value="review">
<ReviewTab
discussionGuide={guideGeneration.discussionGuide}
backendAssets={backendAssets}
draftFocusGroupId={draftFocusGroupId}
onSaveGuide={guideGeneration.handleSaveDiscussionGuide}
onDownloadGuide={guideGeneration.handleDownloadDiscussionGuide}
isDownloading={guideGeneration.isDownloadingGuide}
guideGenerationState={guideGeneration.guideGenerationState}
onEditingChange={guideGeneration.handleEditingStateChange}
onNavigateToSetup={() => setActiveTab('setup')}
onNavigateToParticipants={() => setActiveTab('participants')}
isJsonFormat={guideGeneration.isJsonFormat}
/>
</TabsContent>
{/* Filter Dialog */}
<PersonaFilterDialog
open={filtering.isFilterOpen}
onOpenChange={(open) => {
if (open) {
filtering.openFilterDialog();
} else {
filtering.setIsFilterOpen(false);
}
}}
workingFilters={filtering.workingFilters}
personas={personas}
getFilterOptions={filtering.getFilterOptions}
getFilteredOptions={filtering.getFilteredOptions}
onToggleFilter={filtering.toggleFilter}
onApply={filtering.applyFilters}
onReset={filtering.resetFilters}
/>
</Tabs>
{/* Copy Guide Dialog */}

View file

@ -79,9 +79,9 @@ export function CopyGuideDialog({
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
<DialogHeader>
<DialogTitle>Copy Discussion Guide</DialogTitle>
<DialogTitle>Import Discussion Guide from Other Project</DialogTitle>
<DialogDescription>
Select a focus group to copy its discussion guide from. Only focus groups with existing discussion guides are shown.
Select a focus group to import its discussion guide from. Only focus groups with existing discussion guides are shown.
</DialogDescription>
</DialogHeader>

View file

@ -276,7 +276,7 @@ export function SetupTab({
className="min-w-32"
>
<Copy className="mr-2 h-4 w-4" />
Copy Discussion Guide
Import Discussion Guide from Other Project
</Button>
<Button
type="button"