Untitled

// Function to handle private message
function insertPrivate(userId) {
    // Get the user name from the clicked element
    const userName = document.querySelector(`.name[data-user="${userId}"]`).textContent;

    // Format the message with the user name
    const message = `<${userName}>`;

    // Set the message as the value in the .messages .text element
    const textElement = document.querySelector('.messages .text');
    textElement.value = message;

    // Focus on the text element
    textElement.focus();

    // Set the cursor at the end of the text
    textElement.selectionEnd = textElement.value.length;

    // Your additional implementation for handling private messages goes here
    console.log(`Setting private message to: ${message}`);
}

// Inline SVG source for the "info" icon
const infoSVG = `
<svg xmlns="http://www.w3.org/2000/svg" 
     width="14" 
     height="14" 
     viewBox="0 0 24 24" 
     fill="none" 
     stroke="lightgray" 
     stroke-width="2" 
     stroke-linecap="round" 
     stroke-linejoin="round" 
     class="feather feather-info">
    <circle cx="12" cy="12" r="10"></circle>
    <line x1="12" y1="16" x2="12" y2="12"></line>
    <line x1="12" y1="8" x2="12.01" y2="8"></line>
</svg>`;

// Inline SVG source for the "meh" icon
const mehSVG = `
<svg xmlns="http://www.w3.org/2000/svg" 
     width="24" 
     height="24" 
     viewBox="0 0 24 24" 
     fill="none" 
     stroke="lightgray" 
     stroke-width="2" 
     stroke-linecap="round" 
     stroke-linejoin="round" 
     class="feather feather-meh">
    <circle cx="12" cy="12" r="10"></circle>
    <line x1="8" y1="15" x2="16" y2="15"></line>
    <line x1="9" y1="9" x2="9.01" y2="9"></line>
    <line x1="15" y1="9" x2="15.01" y2="9"></line>
</svg>`;

// Get all user elements in the existing user list
const userElements = document.querySelectorAll('.userlist-content ins');

// Create a container for the new user list
const userListContainer = document.createElement('div');
userListContainer.classList.add('chat-user-list');
userListContainer.style.display = 'flex';
userListContainer.style.flexDirection = 'column';
userListContainer.style.position = 'fixed';
userListContainer.style.top = '100px';
userListContainer.style.backgroundColor = '#0c0c0c';

// Iterate over each user element
userElements.forEach(userElement => {
    // Get the name and info elements
    const nameElement = userElement.querySelector('.name');
    const infoElement = userElement.querySelector('.info');

    // Get the user ID from the data-user getAttribute
    const userId = nameElement.getAttribute('data-user');

    // Construct the big avatar URL using userId
    const bigAvatarUrl = `/storage/avatars/${userId}_big.png`;

    // Create a new user element for the big avatar
    const newUserElement = document.createElement('div');
    newUserElement.classList.add(`user${userId}`);
    newUserElement.style.display = 'inline-flex';
    newUserElement.style.margin = '2px 0';

    // Create a new avatar element with the big avatar URL
    const newAvatarElement = document.createElement('img');
    newAvatarElement.classList.add('avatar');
    newAvatarElement.src = bigAvatarUrl;
    newAvatarElement.style.width = '24px';
    newAvatarElement.style.height = '24px';
    newAvatarElement.style.display = 'inline-flex';

    // Add event listener to handle image load error
    newAvatarElement.addEventListener('error', function () {
        // Replace with meh SVG if there's an error
        this.src = `data:image/svg+xml;utf8,${encodeURIComponent(mehSVG)}`;
    });

    // Create a new name element
    const newNameElement = document.createElement('a');
    newNameElement.classList.add('name');
    newNameElement.title = 'Написать в приват';
    newNameElement.dataset.user = userId;
    newNameElement.textContent = nameElement.textContent;
    newNameElement.style.display = 'inline-flex';
    newNameElement.style.width = 'auto';
    newNameElement.style.height = '24px';
    newNameElement.style.lineHeight = '24px';
    newNameElement.style.textDecoration = 'none';
    newNameElement.style.padding = '0 8px';

    // Create a new profile element
    const newProfileElement = document.createElement('a');
    newProfileElement.classList.add('profile');
    newProfileElement.title = 'Профиль';
    newProfileElement.target = '_blank';
    newProfileElement.href = `/profile/${userId}/`;
    newProfileElement.style.display = 'inline-flex';
    newProfileElement.style.width = '24px';
    newProfileElement.style.height = '24px';
    newProfileElement.style.justifyContent = 'center';
    newProfileElement.style.alignItems = 'center';

    // Create a new profile image element with inline SVG source
    const newProfileImageElement = document.createElement('img');
    newProfileImageElement.src = `data:image/svg+xml;utf8,${encodeURIComponent(infoSVG)}`;

    // Add click event listener to handle private messages
    newNameElement.addEventListener('click', function () {
        insertPrivate(userId);
    });

    // Append the new avatar element to the new user element
    newUserElement.appendChild(newAvatarElement);

    // Append the new name element to the new user element
    newUserElement.appendChild(newNameElement);

    // Append the new profile image element to the new profile element
    newProfileElement.appendChild(newProfileImageElement);

    // Append the new profile element to the new user element
    newUserElement.appendChild(newProfileElement);

    // Append the new user element to the user list container
    userListContainer.appendChild(newUserElement);
});

// Append the new user list container to the body
document.body.appendChild(userListContainer);