From 06c41e8397087e1351ef9913d51897d81a6d80c8 Mon Sep 17 00:00:00 2001
From: Claude Code Assistant <claude@anthropic.com>
Date: Thu, 24 Jul 2025 10:34:58 +0100
Subject: [PATCH] Implement contact selection for group invitations
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added selection mode support to ContactListPage
- Added Select buttons for each contact when in selection mode
- Modified header and UI to show selection context
- Disabled normal contact click behavior in selection mode
- Implemented return navigation with selected contact data
- Fixed invite form button visibility issue with proper spacing

Flow: Group Invite → Select from Network → Contact List → Select Contact → Back to Group Invite (prefilled)

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/invite/InviteForm.tsx |   4 +-
 src/pages/ContactListPage.tsx        | 105 +++++++++++++++++++--------
 2 files changed, 76 insertions(+), 33 deletions(-)

diff --git a/src/components/invite/InviteForm.tsx b/src/components/invite/InviteForm.tsx
index 0d911a9..71e3b6d 100644
--- a/src/components/invite/InviteForm.tsx
+++ b/src/components/invite/InviteForm.tsx
@@ -141,9 +141,9 @@ const InviteForm: React.FC<InviteFormProps> = ({
         </Box>
       </DialogTitle>
       
-      <DialogContent sx={{ p: 3 }}>
+      <DialogContent sx={{ p: 3, pt: 2 }}>
         {/* Network Selection Option */}
-        <Box sx={{ mb: 3, textAlign: 'center' }}>
+        <Box sx={{ mb: 3, mt: 2, textAlign: 'center' }}>
           <Button
             variant="outlined"
             startIcon={<ContactPage />}
diff --git a/src/pages/ContactListPage.tsx b/src/pages/ContactListPage.tsx
index 486e717..2ef71a3 100644
--- a/src/pages/ContactListPage.tsx
+++ b/src/pages/ContactListPage.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import {
   Typography,
   Box,
@@ -42,6 +42,12 @@ const ContactListPage = () => {
   const [isLoading, setIsLoading] = useState(true);
   const theme = useTheme();
   const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  
+  // Check if we're in selection mode for group invitations
+  const isSelectionMode = searchParams.get('mode') === 'select';
+  const returnTo = searchParams.get('returnTo');
+  const groupId = searchParams.get('groupId');
 
   useEffect(() => {
     const loadContacts = async () => {
@@ -70,9 +76,20 @@ const ContactListPage = () => {
   }, [searchQuery, contacts]);
 
   const handleContactClick = (contactId: string) => {
+    if (isSelectionMode) {
+      // Don't navigate in selection mode, let the select button handle it
+      return;
+    }
     navigate(`/contacts/${contactId}`);
   };
 
+  const handleSelectContact = (contact: Contact) => {
+    if (returnTo === 'group-invite' && groupId) {
+      // Navigate back to group page with selected contact data
+      navigate(`/groups/${groupId}?selectedContactName=${encodeURIComponent(contact.name)}&selectedContactEmail=${encodeURIComponent(contact.email)}`);
+    }
+  };
+
   const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
     setTabValue(newValue);
   };
@@ -109,35 +126,42 @@ const ContactListPage = () => {
       <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
         <Box>
           <Typography variant="h4" component="h1" sx={{ fontWeight: 700, mb: 1 }}>
-            Contacts
+            {isSelectionMode ? 'Select Contact to Invite' : 'Contacts'}
           </Typography>
+          {isSelectionMode && (
+            <Typography variant="body2" color="text.secondary">
+              Choose a contact from your network to invite to the group
+            </Typography>
+          )}
         </Box>
-        <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
-          <Button
-            variant="outlined"
-            startIcon={<CloudDownload />}
-            onClick={() => navigate('/import')}
-            sx={{ borderRadius: 2 }}
-          >
-            Import
-          </Button>
-          <Button
-            variant="outlined"
-            startIcon={<QrCode />}
-            onClick={handleInvite}
-            sx={{ borderRadius: 2 }}
-          >
-            Invite
-          </Button>
-          <Button
-            variant="contained"
-            startIcon={<Add />}
-            onClick={handleAddContact}
-            sx={{ borderRadius: 2 }}
-          >
-            Add Contacts
-          </Button>
-        </Box>
+        {!isSelectionMode && (
+          <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
+            <Button
+              variant="outlined"
+              startIcon={<CloudDownload />}
+              onClick={() => navigate('/import')}
+              sx={{ borderRadius: 2 }}
+            >
+              Import
+            </Button>
+            <Button
+              variant="outlined"
+              startIcon={<QrCode />}
+              onClick={handleInvite}
+              sx={{ borderRadius: 2 }}
+            >
+              Invite
+            </Button>
+            <Button
+              variant="contained"
+              startIcon={<Add />}
+              onClick={handleAddContact}
+              sx={{ borderRadius: 2 }}
+            >
+              Add Contacts
+            </Button>
+          </Box>
+        )}
       </Box>
 
       <Card sx={{ mb: 3 }}>
@@ -209,15 +233,15 @@ const ContactListPage = () => {
                   <Card
                     onClick={() => handleContactClick(contact.id)}
                     sx={{
-                      cursor: 'pointer',
+                      cursor: isSelectionMode ? 'default' : 'pointer',
                       transition: 'all 0.2s ease-in-out',
                       border: 1,
                       borderColor: 'divider',
-                      '&:hover': {
+                      '&:hover': !isSelectionMode ? {
                         borderColor: 'primary.main',
                         boxShadow: theme.shadows[4],
                         transform: 'translateY(-2px)',
-                      },
+                      } : {},
                     }}
                   >
                     <CardContent sx={{ p: 3 }}>
@@ -336,6 +360,25 @@ const ContactListPage = () => {
                             Added {formatDate(contact.createdAt)}
                           </Typography>
                         </Box>
+                        
+                        {/* Select button for selection mode */}
+                        {isSelectionMode && (
+                          <Button
+                            variant="contained"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              handleSelectContact(contact);
+                            }}
+                            sx={{
+                              borderRadius: 2,
+                              textTransform: 'none',
+                              alignSelf: 'center',
+                              minWidth: 80
+                            }}
+                          >
+                            Select
+                          </Button>
+                        )}
                       </Box>
                     </CardContent>
                   </Card>