version 0.0.24

frontend/src/components/GroupInfoModal.jsx

@@ -71,6 +71,15 @@ export default function GroupInfoModal({ group, onClose, onUpdated }) {
     } catch (e) { toast(e.message, 'error'); }
   };
 
+  const handleRemove = async (member) => {
+    if (!confirm(`Remove ${member.display_name || member.name} from this group?`)) return;
+    try {
+      await api.removeMember(group.id, member.id);
+      toast(`${member.display_name || member.name} removed`, 'success');
+      setMembers(prev => prev.filter(m => m.id !== member.id));
+    } catch (e) { toast(e.message, 'error'); }
+  };
+
   const handleDelete = async () => {
     if (!confirm('Delete this group? This cannot be undone.')) return;
     try {
@@ -125,10 +134,28 @@ export default function GroupInfoModal({ group, onClose, onUpdated }) {
             </div>
             <div style={{ maxHeight: 180, overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 4 }}>
               {members.map(m => (
-                <div key={m.id} className="flex items-center gap-2" style={{ gap: 10, padding: '6px 0' }}>
+                <div key={m.id} className="flex items-center" style={{ gap: 10, padding: '6px 0' }}>
                   <Avatar user={m} size="sm" />
                   <span className="flex-1 text-sm">{m.display_name || m.name}</span>
                   {m.id === group.owner_id && <span className="text-xs" style={{ color: 'var(--text-tertiary)' }}>Owner</span>}
+                  {canManage && m.id !== group.owner_id && (
+                    <button
+                      onClick={() => handleRemove(m)}
+                      title="Remove from group"
+                      style={{
+                        background: 'none', border: 'none', cursor: 'pointer',
+                        color: 'var(--text-tertiary)', padding: '2px 4px', borderRadius: 4,
+                        lineHeight: 1, fontSize: 16,
+                        transition: 'color var(--transition)',
+                      }}
+                      onMouseEnter={e => e.currentTarget.style.color = 'var(--error)'}
+                      onMouseLeave={e => e.currentTarget.style.color = 'var(--text-tertiary)'}
+                    >
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                        <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+                      </svg>
+                    </button>
+                  )}
                 </div>
               ))}
             </div>