From 8a9c7c3cb69f91269d21254f10da71de5a0a3e2f Mon Sep 17 00:00:00 2001
From: michael <michael@modernfreedom.com>
Date: Thu, 4 Dec 2025 09:57:32 -0600
Subject: [PATCH] Improve discussion guide discoverability in Focus Group
 session
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../CollapsibleDiscussionGuide.tsx            | 21 +++++++++++++++----
 src/pages/FocusGroupSession.tsx               | 13 ++++++++++--
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/components/focus-group-session/CollapsibleDiscussionGuide.tsx b/src/components/focus-group-session/CollapsibleDiscussionGuide.tsx
index 575616f7..42a0beba 100644
--- a/src/components/focus-group-session/CollapsibleDiscussionGuide.tsx
+++ b/src/components/focus-group-session/CollapsibleDiscussionGuide.tsx
@@ -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" />
               )}
diff --git a/src/pages/FocusGroupSession.tsx b/src/pages/FocusGroupSession.tsx
index 5f3c9f0e..a4064d61 100644
--- a/src/pages/FocusGroupSession.tsx
+++ b/src/pages/FocusGroupSession.tsx
@@ -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' : ''}
             >