From afa7e43051734ce547db60607a45cf6f0165df8a Mon Sep 17 00:00:00 2001
From: michael <michael@modernfreedom.com>
Date: Thu, 4 Dec 2025 09:17:41 -0600
Subject: [PATCH] Improve draft focus group UX with clickable cards and Run
 Session button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 src/pages/FocusGroups.tsx | 148 ++++++++++++++++++++++----------------
 1 file changed, 85 insertions(+), 63 deletions(-)

diff --git a/src/pages/FocusGroups.tsx b/src/pages/FocusGroups.tsx
index 980271d5..5922b6b1 100644
--- a/src/pages/FocusGroups.tsx
+++ b/src/pages/FocusGroups.tsx
@@ -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>