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

Improve discussion guide discoverability in Focus Group session

Browse source 
Add prominent "Edit Discussion Guide" button to header and enhance accordion
styling with amber color scheme, "Click to Edit" badge, and visual feedback
to help users discover the inline editing capability.

🤖 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:57:32 -06:00
parent 240a1c09f5
commit 8a9c7c3cb6
2 changed files with 28 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/components/focus-group-session/CollapsibleDiscussionGuide.tsx
View file

@ -9,6 +9,7 @@ import {
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import DiscussionGuideViewer from './DiscussionGuideViewer';
import { cn } from '@/lib/utils';
import { toast } from 'sonner';
@ -86,11 +87,23 @@ const CollapsibleDiscussionGuide: React.FC<CollapsibleDiscussionGuideProps> = ({
<div className={cn("w-full border-b bg-white shadow-sm", className)}>
<Collapsible open={isOpen} onOpenChange={onToggle}>
<CollapsibleTrigger asChild>
<div className="w-full px-4 py-3 flex items-center justify-between hover:bg-slate-50 transition-colors cursor-pointer">
<div className={cn(
"w-full px-4 py-3 flex items-center justify-between transition-all cursor-pointer",
isOpen
? "bg-amber-50 border-l-4 border-l-amber-400"
: "bg-slate-50 hover:bg-amber-50 border-l-4 border-l-transparent hover:border-l-amber-300"
)}>
<div className="flex items-center gap-3">
<ClipboardList className="h-5 w-5 text-slate-600" />
<ClipboardList className={cn("h-5 w-5", isOpen ? "text-amber-600" : "text-slate-600")} />
<div>
<h2 className="font-semibold text-slate-900">Discussion Guide</h2>
<div className="flex items-center gap-2">
<h2 className="font-semibold text-slate-900">Discussion Guide</h2>
{!isOpen && (
<Badge variant="secondary" className="text-xs bg-amber-100 text-amber-700">
Click to Edit
</Badge>
)}
</div>
{hasStructuredGuide && (
<p className="text-xs text-slate-500">
{discussionGuide.title} • {discussionGuide.total_duration} minutes
@ -117,7 +130,7 @@ const CollapsibleDiscussionGuide: React.FC<CollapsibleDiscussionGuideProps> = ({
)}
</Button>
{isOpen ? (
<ChevronUp className="h-4 w-4 text-slate-500" />
<ChevronUp className="h-4 w-4 text-amber-600" />
) : (
<ChevronDown className="h-4 w-4 text-slate-500" />
)}

13
src/pages/FocusGroupSession.tsx
View file

@ -1942,8 +1942,17 @@ const FocusGroupSession = () => {
</div>
<div className="flex items-center space-x-4 mt-4 sm:mt-0">
<Button
variant="outline"
<Button
variant="outline"
onClick={() => setIsDiscussionGuideOpen(true)}
className={isDiscussionGuideOpen ? 'bg-amber-50 text-amber-700 border-amber-200' : ''}
>
<ClipboardList className="mr-2 h-4 w-4" />
{isDiscussionGuideOpen ? 'Guide Open' : 'Edit Discussion Guide'}
</Button>
<Button
variant="outline"
onClick={() => setShowAutonomousDashboard(!showAutonomousDashboard)}
className={showAutonomousDashboard ? 'bg-blue-50 text-blue-600' : ''}
>