Function openUserPanel

public/js/userPanel.js:70–578

()

}

export async function openUserPanel() {
  // 1) load data
  const { username = 'User', profile_picture = '', totp_enabled = false } = await fetchCurrentUser();
  const raw = profile_picture;
  const picUrl = normalizePicUrl(raw) || withBase('/assets/default-avatar.png');
  const hoverDelayMs = persistHoverPreviewDelayMs(readHoverPreviewDelayMs());

  // 2) dark‐mode helpers
  const isDark = document.body.classList.contains('dark-mode');
  const overlayBg = isDark ? 'rgba(0,0,0,0.7)' : 'rgba(0,0,0,0.3)';
  const contentStyle = `
    background: ${isDark ? '#2c2c2c' : '#fff'};
    color:      ${isDark ? '#e0e0e0' : '#000'};
    padding: 20px;
    max-width: 600px; width:90%;
    overflow-y: auto; height: 655px; max-height: 655px;
    display: flex; flex-direction: column; gap: 16px;
    margin: 0;
    scrollbar-gutter: stable both-edges;
    border: ${isDark ? '1px solid #444' : '1px solid #ccc'};
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
  `;

  // 3) create or reuse modal
  let modal = document.getElementById('userPanelModal');
  if (!modal) {
    // overlay
    modal = document.createElement('div');
    modal.id = 'userPanelModal';
    Object.assign(modal.style, {
      position: 'fixed',
      top: '0',
      left: '0',
      right: '0',
      bottom: '0',
      background: overlayBg,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      padding: '16px',
      boxSizing: 'border-box',
      overflow: 'hidden',
      zIndex: '1000',
    });

    // content container
    const content = document.createElement('div');
    content.className = 'modal-content';
    content.style.cssText = contentStyle;

    // close button
    const closeBtn = document.createElement('span');
    closeBtn.id = 'closeUserPanel';
    closeBtn.className = 'editor-close-btn';
    closeBtn.textContent = '×';
    closeBtn.addEventListener('click', () => modal.style.display = 'none');