Oliver/semblance
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve draft focus group UX with clickable cards and Run Session button

Browse source 
- Make entire draft card clickable to enter setup mode
- Rename "Edit" button to "Continue Setup" for better clarity
- Add "Run Session" button for complete drafts (with discussion guide and participants)
- Prevent checkbox clicks from triggering card navigation

🤖 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:17:41 -06:00
parent 22b3ec19a5
commit afa7e43051
1 changed files with 85 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

148
src/pages/FocusGroups.tsx
View file

@ -378,18 +378,28 @@ const FocusGroups = () => {
) : filteredGroups.length > 0 ? (
<div className="space-y-4">
{filteredGroups.map((group) => (
<div
key={group.id}
className="glass-card rounded-xl overflow-hidden hover:shadow-md button-transition"
<div
key={group.id}
className={cn(
"glass-card rounded-xl overflow-hidden hover:shadow-md button-transition",
group.status === 'draft' && "cursor-pointer"
)}
onClick={() => {
if (group.status === 'draft') {
setDraftToEdit(group);
setMode('create');
}
}}
>
<div className="flex flex-col md:flex-row">
<div className="flex-1 p-6">
<div className="flex items-start justify-between">
<div className="flex items-start gap-3">
<Checkbox
<Checkbox
id={`select-${group.id || group._id}`}
checked={selectedGroups.includes(group.id || group._id || '')}
onCheckedChange={() => toggleGroupSelection(group.id || group._id || '')}
onClick={(e) => e.stopPropagation()}
className="mt-1"
/>
<div>
@ -461,68 +471,80 @@ const FocusGroups = () => {
</div>
<div className="bg-slate-50 p-6 flex flex-col justify-center items-center md:border-l border-slate-100">
<Button
variant={
(group.status === 'in-progress' || group.status === 'active' || group.status === 'ai_mode') ? 'default' :
group.status === 'new' ? 'outline' :
group.status === 'draft' ? 'outline' :
'default'
}
className={cn(
"w-full hover-transition",
group.status === 'new' ? 'bg-slate-200 text-slate-700 hover:bg-slate-300 border-slate-300' : '',
group.status === 'draft' ? 'bg-gray-200 text-gray-700 hover:bg-gray-300 border-gray-300' : ''
)}
onClick={() => {
if (group.status === 'draft') {
// Set the draft to edit and switch to create mode
setDraftToEdit(group);
setMode('create');
} else {
// Navigate to the focus group session with the correct ID
{group.status === 'draft' ? (
<div className="flex flex-col gap-2 w-full">
<Button
variant="outline"
className="w-full hover-transition bg-gray-200 text-gray-700 hover:bg-gray-300 border-gray-300"
onClick={(e) => {
e.stopPropagation();
setDraftToEdit(group);
setMode('create');
}}
>
Continue Setup
<ChevronRight className="ml-2 h-4 w-4" />
</Button>
{/* Show Run Session button only when draft is complete (has discussion guide and participants) */}
{group.discussionGuide && Array.isArray(group.participants) && group.participants.length > 0 && (
<Button
className="w-full hover-transition"
onClick={(e) => {
e.stopPropagation();
const focusGroupId = group.id || group._id;
navigate(`/focus-groups/${focusGroupId}`);
}}
>
<PlayCircle className="mr-2 h-4 w-4" />
Run Session
</Button>
)}
</div>
) : (
<Button
variant={
(group.status === 'in-progress' || group.status === 'active' || group.status === 'ai_mode') ? 'default' :
group.status === 'new' ? 'outline' :
'default'
}
className={cn(
"w-full hover-transition",
group.status === 'new' ? 'bg-slate-200 text-slate-700 hover:bg-slate-300 border-slate-300' : ''
)}
onClick={() => {
const focusGroupId = group.id || group._id;
console.log("Navigating to focus group:", focusGroupId);
navigate(`/focus-groups/${focusGroupId}`);
}
}}
>
{group.status === 'completed' ? (
<>
View Session
<ChevronRight className="ml-2 h-4 w-4" />
</>
) : group.status === 'in-progress' || group.status === 'active' || group.status === 'ai_mode' ? (
<>
Join Session
<ChevronRight className="ml-2 h-4 w-4" />
</>
) : group.status === 'paused' ? (
<>
Session Details
<ChevronRight className="ml-2 h-4 w-4" />
</>
) : group.status === 'scheduled' ? (
<>
View Details
<ChevronRight className="ml-2 h-4 w-4" />
</>
) : group.status === 'new' ? (
<>
View Session
<ChevronRight className="ml-2 h-4 w-4" />
</>
) : group.status === 'draft' ? (
<>
Edit
<ChevronRight className="ml-2 h-4 w-4" />
</>
) : (
<>
View Session
<ChevronRight className="ml-2 h-4 w-4" />
</>
)}
</Button>
}}
>
{group.status === 'completed' ? (
<>
View Session
<ChevronRight className="ml-2 h-4 w-4" />
</>
) : group.status === 'in-progress' || group.status === 'active' || group.status === 'ai_mode' ? (
<>
Join Session
<ChevronRight className="ml-2 h-4 w-4" />
</>
) : group.status === 'paused' ? (
<>
Session Details
<ChevronRight className="ml-2 h-4 w-4" />
</>
) : group.status === 'scheduled' ? (
<>
View Details
<ChevronRight className="ml-2 h-4 w-4" />
</>
) : (
<>
View Session
<ChevronRight className="ml-2 h-4 w-4" />
</>
)}
</Button>
)}
</div>
</div>
</div>