convo manager separation

static/css/member-management.css

@@ -0,0 +1,25 @@
+.member-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    object-fit: cover;
+    margin-right: 1rem;
+}
+
+.badge-creator {
+    background-color: #d1f2eb;
+    color: #117a65;
+    font-weight: 500;
+}
+
+.btn-remove-member {
+    background: #f8d7da;
+    color: #c82333;
+    border: none;
+    font-weight: 500;
+}
+
+.btn-remove-member:hover {
+    background: #f5c6cb;
+    color: #a71d2a;
+} 

static/js/create-conversation.js

@@ -0,0 +1,88 @@
+$(document).ready(function() {
+    $('.select2').select2({
+        theme: 'bootstrap-5',
+        width: '100%',
+        placeholder: 'Search for a user...',
+        allowClear: true
+    });
+
+    // Keep track of added members
+    var addedMembers = new Set();
+    var creatorId = document.querySelector('.member-row').dataset.userId;
+    addedMembers.add(creatorId);
+
+    // Function to show alert modal
+    function showAlert(message) {
+        $('#alertModalMessage').text(message);
+        var alertModal = new bootstrap.Modal(document.getElementById('alertModal'));
+        alertModal.show();
+    }
+
+    // Handle Add Member button click
+    $('#addMemberBtn').click(function() {
+        var selectedUserId = $('#user_id').val();
+        var selectedUserName = $('#user_id option:selected').text();
+        var selectedUserEmail = $('#user_id option:selected').data('email') || '';
+        var selectedUserAvatar = $('#user_id option:selected').data('avatar') || "/static/default-avatar.png";
+        
+        if (!selectedUserId) {
+            showAlert('Please select a user to add.');
+            return;
+        }
+
+        if (addedMembers.has(selectedUserId)) {
+            showAlert('This user has already been added.');
+            return;
+        }
+
+        // Add to the set of added members
+        addedMembers.add(selectedUserId);
+
+        // Disable the option in the dropdown
+        $('#user_id option[value="' + selectedUserId + '"]').prop('disabled', true);
+        $('#user_id').val(null).trigger('change');
+
+        // Create the member list item
+        var memberItem = $('<div class="list-group-item d-flex align-items-center member-row" data-user-id="' + selectedUserId + '">')
+            .append($('<img class="member-avatar">').attr('src', selectedUserAvatar))
+            .append($('<div class="flex-grow-1">')
+                .append($('<div class="fw-bold">').text(selectedUserName))
+                .append($('<div class="text-muted small">').text(selectedUserEmail))
+            )
+            .append($('<button type="button" class="btn btn-remove-member ms-2">')
+                .append($('<i class="fas fa-user-minus me-1"></i>'))
+                .append('Remove')
+                .click(function() {
+                    $(this).closest('.list-group-item').remove();
+                    addedMembers.delete(selectedUserId);
+                    // Re-enable the option in the dropdown
+                    $('#user_id option[value="' + selectedUserId + '"]').prop('disabled', false);
+                    $('#user_id').trigger('change');
+                    updateHiddenInputs();
+                })
+            );
+
+        // Add to the list
+        $('#selectedMembersList').append(memberItem);
+
+        // Update hidden inputs
+        updateHiddenInputs();
+    });
+
+    function updateHiddenInputs() {
+        // Remove any existing members inputs
+        $('#conversationForm input[name="members"]').remove();
+        
+        // Add new hidden inputs for each member
+        addedMembers.forEach(function(memberId) {
+            var input = $('<input>')
+                .attr('type', 'hidden')
+                .attr('name', 'members')
+                .val(memberId);
+            $('#conversationForm').append(input);
+        });
+    }
+
+    // Initialize hidden inputs
+    updateHiddenInputs();
+});