speakmore-2.0/templates/sidebar.html

<script src="{{ url_for('static', filename='js/online_detection.js') }}"></script>
<div class="sidebar w-fit bg-transparent text-white flex flex-col items-center">
    <div class="sidebar-content h-full w-60 p-5 rounded-t-lg">
        <h4 class="flex flex-row items-center">
            <i class="fa-solid fa-table-columns text-slate-900 dark:!text-slate-200"></i> 
            <a class="text-slate-900 dark:!text-slate-100 pl-2" href="/dashboard">Dashboard</a>
        </h4>
        <h4 class="flex flex-row items-center">
            <i class="fa-solid fa-comment text-slate-900 dark:!text-slate-200"></i> 
            <div class="text-slate-900 dark:!text-slate-100 pl-2">Direct Messages</div>
        </h4>
        <ul id="friends-list">
            {% for friend in friends %}
            <li data-id="{{ friend.id }}" data-username="{{ friend.username }}">
                <span class="status-indicator {{ 'online' if friend.online else 'offline' }}" data-username="{{ friend.username }}"></span>
                <a class="dark:!text-slate-400 text-slate-900 hover:!text-slate-400 hover:dark:!text-slate-200" href="/chat/{{ friend.id }}">{{ friend.username }}</a>
            </li>
            {% endfor %}
        </ul>
        <h4 class="flex flex-row items-center">
            <i class="fa-solid fa-comments text-slate-900 dark:!text-slate-200"></i>
            <div class="text-slate-900 dark:!text-slate-100 pl-2">Groups</div>
        </h4>
        <ul id="groups-list">
            {% for group in groups %}
            <li>
                <a class="dark:!text-slate-400 text-slate-900 hover:!text-slate-400 hover:dark:!text-slate-200" href="/group_chat/{{ group.id }}">{{ group.name }}</a>
            </li>
            {% endfor %}
        </ul>
    </div>
</div>

<div id="context-menu2" class="custom-context-menu">
    <ul>
        <li id="copy-uid">Copy User ID</li>
        <li id="rm-friend">Remove Friend</li>
    </ul>
</div>

<div id="message" class="mt-3"></div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const contextMenu = document.getElementById('context-menu2');
        const friendsList = document.getElementById('friends-list');
        let selectedFriend = null;

        if (friendsList) {
            friendsList.addEventListener('contextmenu', function(event) {
                event.preventDefault();
                const friendElement = event.target.closest('li');
                if (friendElement) {
                    selectedFriend = friendElement;
                    if (contextMenu) {
                        contextMenu.style.top = `${event.clientY}px`;
                        contextMenu.style.left = `${event.clientX}px`;
                        contextMenu.style.display = 'block';
                    }
                }
            });
        }

        document.addEventListener('click', function() {
            if (contextMenu) {
                contextMenu.style.display = 'none';
            }
        });

        const copyUidButton = document.getElementById('copy-uid');
        const removeFriendButton = document.getElementById('rm-friend');

        if (copyUidButton) {
            copyUidButton.addEventListener('click', function() {
                if (selectedFriend) {
                    const friendId = selectedFriend.getAttribute('data-id');
                    navigator.clipboard.writeText(friendId).then(() => {
                        alert('User ID copied to clipboard');
                    });
                }
            });
        }

        if (removeFriendButton) {
            removeFriendButton.addEventListener('click', function() {
                if (selectedFriend) {
                    const friendId = selectedFriend.getAttribute('data-id');
                    fetch(`/remove_friend/${friendId}`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    }).then(response => response.json())
                    .then(data => {
                        const messageDiv = document.getElementById('message'); // Add a div with id 'message' to display messages
                        if (data.status === 'success') {
                            selectedFriend.remove();
                            if (messageDiv) {
                                messageDiv.innerHTML = '<div class="alert alert-success">Friend removed successfully</div>';
                            }
                        } else {
                            if (messageDiv) {
                                messageDiv.innerHTML = `<div class="alert alert-danger">Error removing friend: ${data.message}</div>`;
                            }
                        }
                    }).catch(error => {
                        console.error('Error removing friend:', error);
                        const messageDiv = document.getElementById('message');
                        if (messageDiv) {
                            messageDiv.innerHTML = '<div class="alert alert-danger">Error removing friend</div>';
                        }
                    });
                }
            });
        }
    });
</script>