dodep-simulator/templates/_activity_sidebar.html

<style>
.activity-sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; width: 240px;
    background: var(--bg-card); border-right: 1px solid var(--border);
    z-index: 40; display: flex; flex-direction: column; overflow: hidden;
    padding-top: 56px; transform: translateX(0);
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.activity-sidebar.closed { transform: translateX(-100%); }
.activity-sidebar-header {
    padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;
}
.activity-sidebar-list { flex: 1; overflow-y: auto; padding: 0.35rem; }
.activity-sidebar-list::-webkit-scrollbar { width: 3px; }
.activity-sidebar-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.activity-sidebar-item {
    display: flex; gap: 0.4rem; padding: 0.35rem 0.5rem; border-radius: 6px;
    margin-bottom: 0.1rem; cursor: pointer; transition: background 0.15s;
    animation: fadeInItem 0.3s ease;
}
.activity-sidebar-item:hover { background: var(--bg-hover); }
.activity-sidebar-item .asi-icon { font-size: 0.8rem; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; background: var(--bg-dark); border-radius: 4px; flex-shrink: 0; }
.activity-sidebar-item .asi-content { flex: 1; min-width: 0; font-size: 0.68rem; line-height: 1.25; }
.activity-sidebar-item .asi-content .asi-username { color: var(--primary); font-weight: 500; }
.activity-sidebar-item .asi-content .asi-time { font-size: 0.55rem; color: var(--text-dim); margin-top: 0.05rem; }
.activity-sidebar-item .asi-item-preview { width: 26px; height: 20px; object-fit: contain; border-radius: 3px; flex-shrink: 0; }
.activity-toggle-btn {
    position: fixed; left: 0; top: 50%; transform: translateY(-50%);
    background: var(--bg-card); border: 1px solid var(--border); border-left: none;
    border-radius: 0 8px 8px 0; padding: 0.5rem 0.2rem; cursor: pointer;
    z-index: 39; font-size: 0.75rem; color: var(--text-dim);
    writing-mode: vertical-rl; letter-spacing: 0.04em;
    display: none; user-select: none;
}
.activity-toggle-btn:hover { color: var(--primary); border-color: var(--primary); }
.activity-toggle-btn.visible { display: flex; align-items: center; gap: 0.2rem; }
@keyframes fadeInItem { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
.has-activity-sidebar { padding-left: 240px; transition: padding-left 0.3s cubic-bezier(0.4,0,0.2,1); }
.has-activity-sidebar.sidebar-closed { padding-left: 0; }
@media (max-width:900px) {
    .activity-sidebar { display: none; } .activity-toggle-btn { display: none !important; } .has-activity-sidebar { padding-left: 0; }
}
</style>

<div class="activity-sidebar" id="activitySidebar">
    <div class="activity-sidebar-header">
        <span class="flex gap-1 items-center" style="font-size:0.75rem;font-weight:600;font-family:var(--font-display);">
            <span style="width:5px;height:5px;border-radius:50%;background:#22c55e;display:inline-block;animation:pulse 1.5s ease infinite;"></span>
            Лента
        </span>
        <span class="flex gap-1 items-center text-xs text-dim">
            <span id="onlineCount">0</span> 👤
        </span>
        <button class="activity-sidebar-close" onclick="toggleActivitySidebar()" style="background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:0.85rem;padding:0.1rem;line-height:1;">✕</button>
    </div>
    <div class="activity-sidebar-list" id="activitySidebarList">
        <div style="text-align:center;padding:2rem;color:var(--text-dim);font-size:0.78rem;">Загрузка...</div>
    </div>
</div>

<button class="activity-toggle-btn" id="activityToggleBtn" onclick="toggleActivitySidebar()" title="Показать ленту">📰 Лента</button>

<script>
document.addEventListener('DOMContentLoaded', async () => {
    const list = document.getElementById('activitySidebarList');
    const sidebar = document.getElementById('activitySidebar');
    document.body.classList.add('has-activity-sidebar');
    if (localStorage.getItem('sidebar_closed') === 'true') {
        sidebar.classList.add('closed');
        document.body.classList.add('sidebar-closed');
        document.getElementById('activityToggleBtn').classList.add('visible');
    }
    WS.on('online_count', (data) => {
        document.getElementById('onlineCount').textContent = data.online || 0;
    });
    try {
        const res = await fetch('/web/api/activity?limit=10');
        const data = await res.json();
        if (data.success && data.activities) renderActivities(data.activities);
    } catch (e) {
        if (list) list.innerHTML = '<div style="text-align:center;padding:2rem;color:var(--text-dim);font-size:0.78rem;">Не удалось загрузить</div>';
    }
    WS.on('activity', (data) => {
        const act = data.activity;
        if (!act || !list) return;
        const empty = list.querySelector('div[style*="text-align:center"]');
        if (empty) empty.remove();
        const item = createActivityItem(act);
        list.insertBefore(item, list.firstChild);
        if (act.activity_type === 'achievement') SoundManager.achievement();
        while (list.children.length > 15) list.removeChild(list.lastChild);
    });
});

const RARITY_COLORS = {
    'consumer-grade': '#b0b0b0', 'industrial-grade': '#5e98d9',
    'mil-spec': '#4b69ff', 'mil-spec-grade': '#4b69ff',
    'restricted': '#8847ff', 'classified': '#d32ce6',
    'covert': '#eb4b4b', 'rare-special-item': '#ffd700',
    'rare-special': '#ffd700', 'extraordinary': '#ffd700', 'contraband': '#ffaa00'
};

function createActivityItem(act) {
    const iconMap = { 'case_open': '📦', 'contract': '🔄', 'upgrade': '🆙', 'achievement': '🏆', 'crash': '💥' };
    const item = document.createElement('div');
    item.className = 'activity-sidebar-item';
    const raritySlug = (act.data && act.data.rarity || '').toLowerCase().replace(/ /g, '-').replace(/_/g, '-').replace(/™/g, '');
    const rarityColor = RARITY_COLORS[raritySlug] || '';
    if (rarityColor) { const v = parseInt(rarityColor.replace('#',''),16); item.style.background = `rgba(${(v>>16)},${(v>>8)&255},${v&255},0.08)`; }
    item.addEventListener('click', () => window.location.href = `/profiles/${act.user_id}`);
    const icon = iconMap[act.activity_type] || '📌';
    const imgHtml = (act.data && act.data.item_image) ? `<img class="asi-item-preview" src="${act.data.item_image}" onerror="this.style.display='none'">` : '';
    const timeStr = act.created_at ? new Date(act.created_at).toLocaleTimeString('ru-RU',{hour:'2-digit',minute:'2-digit'}) : '';
    item.innerHTML = `<div class="asi-icon">${icon}</div><div class="asi-content"><span class="asi-username">${escapeHtml(act.username)}</span> ${escapeHtml(act.message)}<div class="asi-time">${timeStr}</div></div>${imgHtml}`;
    return item;
}

function renderActivities(activities) {
    const list = document.getElementById('activitySidebarList');
    if (!list) return;
    if (!activities || activities.length === 0) { list.innerHTML = '<div style="text-align:center;padding:2rem;color:var(--text-dim);font-size:0.78rem;">Пока нет активностей</div>'; return; }
    list.innerHTML = '';
    activities.forEach(a => list.appendChild(createActivityItem(a)));
}

function toggleActivitySidebar() {
    const s = document.getElementById('activitySidebar');
    const btn = document.getElementById('activityToggleBtn');
    if (!s) return;
    const isOpen = !s.classList.contains('closed');
    s.classList.toggle('closed', isOpen);
    document.body.classList.toggle('sidebar-closed', isOpen);
    btn.classList.toggle('visible', isOpen);
    localStorage.setItem('sidebar_closed', isOpen ? 'true' : 'false');
}
</script>