xxx-sphere-old/xxxthegame/src/main/resources/static/js/social-sidebar.js

(function () {
    // Verhindert doppelte Ausführung (z.B. wenn sidebar.js nachladen UND direktes <script>-Tag vorhanden)
    if (document.querySelector('.social-sidebar')) return;

    const path = window.location.pathname;

    const links = [
        { href: '/feed.html',            icon: '📰', label: 'Feed',             badgeId: null,                  mobileBadgeId: null },
        { href: '/personen-suchen.html', icon: '⊕', label: 'Personen suchen', badgeId: null,                 mobileBadgeId: null },
        { href: '/freunde.html',         icon: '♡', label: 'Freunde',          badgeId: 'socialFriendsBadge',  mobileBadgeId: 'socialMobileFriendsBadge' },
        { href: '/nachrichten.html',     icon: '✉', label: 'Nachrichten',      badgeId: 'socialMsgBadge',      mobileBadgeId: 'socialMobileMsgBadge' },
        { href: '/gruppen.html',             icon: '👥', label: 'Gruppen',              badgeId: 'socialGruppenBadge',  mobileBadgeId: 'socialMobileGruppenBadge' },
        { href: '/einladungen.html',             icon: '✉', label: 'Einladungen',          badgeId: 'socialInvBadge',      mobileBadgeId: 'socialMobileInvBadge' },
    ];

    const profileActive = (path === '/benutzer.html' || path === '/profile.html') ? ' class="active"' : '';

    // ── Rechte Desktop-Sidebar (kein Titel) ──
    const desktopItems = links.map(({ href, icon, label, badgeId }) => {
        const cls = path === href ? ' class="active"' : '';
        const badge = badgeId ? `<span class="social-badge" id="${badgeId}" style="display:none;"></span>` : '';
        return `<li><a href="${href}"${cls}><span class="icon">${icon}</span> ${label}${badge}</a></li>`;
    }).join('');

    const aside = document.createElement('aside');
    aside.className = 'social-sidebar';
    aside.innerHTML = `
        <ul>
            <li id="socialProfileItem">
                <a href="/benutzer.html"${profileActive}>
                    <span class="icon" id="socialProfileIcon">◉</span>
                    <span id="socialProfileName">Profil</span>
                </a>
            </li>
            <li><hr style="border:none;border-top:1px solid var(--color-secondary);margin:0.4rem 1rem;"></li>
            ${desktopItems}
        </ul>`;

    const appWrapper = document.querySelector('.app-wrapper');
    if (appWrapper) appWrapper.appendChild(aside);

    // ── Mobile: Links + Profil ins Burger-Menü einhängen ──
    const sidebarUl = document.querySelector('.sidebar ul');
    if (sidebarUl) {
        const mobileLinks = links.map(({ href, icon, label, mobileBadgeId }) => {
            const cls = path === href ? ' class="active"' : '';
            const badge = mobileBadgeId
                ? `<span class="social-badge" id="${mobileBadgeId}" style="display:none;"></span>`
                : '';
            return `<li class="sidebar-mobile-only"><a href="${href}"${cls}><span class="icon">${icon}</span> ${label}${badge}</a></li>`;
        }).join('');

        const mobileProfileActive = profileActive;
        const mobileProfile = `
            <li class="sidebar-mobile-only" id="socialMobileProfileItem">
                <a href="/benutzer.html"${mobileProfileActive}>
                    <span class="icon" id="socialMobileProfileIcon">◉</span>
                    <span id="socialMobileProfileName">Profil</span>
                </a>
            </li>`;

        const sep = '<li class="sidebar-mobile-only"><hr style="border:none;border-top:1px solid var(--color-secondary);margin:0.4rem 1rem;"></li>';
        const logoutLi = sidebarUl.querySelector('a[href="/login/logout"]')?.closest('li');
        if (logoutLi) {
            logoutLi.insertAdjacentHTML('beforebegin', sep + mobileLinks + mobileProfile);
        } else {
            sidebarUl.insertAdjacentHTML('beforeend', sep + mobileLinks + mobileProfile);
        }
    }

    // ── Profil-Daten nachladen (Name + Avatar) ──
    fetch('/login/me')
        .then(r => r.ok ? r.json() : null)
        .then(user => {
            if (!user) return;

            function updateProfileEntry(nameId, iconId, itemId) {
                const nameEl = document.getElementById(nameId);
                if (nameEl) nameEl.textContent = user.name;

                const iconEl = document.getElementById(iconId);
                if (iconEl && user.profilePicture) {
                    iconEl.innerHTML = `<img src="data:image/png;base64,${user.profilePicture}" class="sidebar-profile-img" alt="">`;
                }
                const anchor = document.querySelector('#' + itemId + ' a');
                if (anchor) anchor.href = '/benutzer.html?userId=' + user.userId;
            }

            updateProfileEntry('socialProfileName',       'socialProfileIcon',       'socialProfileItem');
            updateProfileEntry('socialMobileProfileName', 'socialMobileProfileIcon', 'socialMobileProfileItem');
        })
        .catch(() => {});

    // ── Badge-Zähler ──
    function setBadge(ids, count) {
        ids.forEach(id => {
            if (!id) return;
            const el = document.getElementById(id);
            if (!el) return;
            el.textContent = count;
            el.style.display = count > 0 ? '' : 'none';
        });
    }

    fetch('/social/friends/pending/count')
        .then(r => r.ok ? r.json() : 0)
        .then(n => setBadge(['socialFriendsBadge', 'socialMobileFriendsBadge'], n))
        .catch(() => {});

    fetch('/social/messages/unread/count')
        .then(r => r.ok ? r.json() : 0)
        .then(n => setBadge(['socialMsgBadge', 'socialMobileMsgBadge'], n))
        .catch(() => {});

    Promise.all([
        fetch('/gruppen/requests/pending/count').then(r => r.ok ? r.json() : 0).catch(() => 0),
        fetch('/gruppen/reports/pending/count').then(r => r.ok ? r.json() : 0).catch(() => 0)
    ]).then(([joins, reports]) => setBadge(['socialGruppenBadge', 'socialMobileGruppenBadge'], joins + reports))
      .catch(() => {});

    Promise.all([
        fetch('/keyholder/invitations/mine').then(r => r.ok ? r.json() : []).catch(() => []),
        fetch('/lockee/invitations/mine').then(r => r.ok ? r.json() : []).catch(() => [])
    ]).then(([khInvs, lockeeInvs]) =>
        setBadge(['socialInvBadge', 'socialMobileInvBadge'], khInvs.length + lockeeInvs.length)
    ).catch(() => {});
})();