Add /log page with paginated activity log and truncate overview activity to 4 items with blur overlay

Author: ddrayko

public/css/style.css

@@ -1559,6 +1559,48 @@ tbody tr:hover {
   font-size: 0.88rem;
 }
 
+.activity-list-truncated {
+  max-height: 340px;
+  overflow: hidden;
+  position: relative;
+}
+
+.activity-list-truncated::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100px;
+  background: linear-gradient(transparent, var(--bg-card));
+  pointer-events: none;
+}
+
+.activity-more-overlay {
+  text-align: center;
+  padding: 12px 0 4px;
+}
+
+/* ===== LOG PAGE ===== */
+.log-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 16px 0;
+}
+
+.log-pagination-info {
+  font-size: 0.82rem;
+  color: var(--text-muted);
+}
+
+.log-pagination .btn-ghost[disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 /* ===== SEARCH & FILTERS ===== */
 .servers-toolbar {
   display: flex;

public/js/app.js

@@ -428,6 +428,7 @@ async function renderDashboard() {
         <div class="page" id="page-pterodactyl"></div>
         <div class="page" id="page-account"></div>
         <div class="page" id="page-server-detail"></div>
+        <div class="page" id="page-log"></div>
       </main>
     </div>
 
@@ -499,6 +500,8 @@ function navigateTo(page) {
       else if (param === 'links') renderAccountLinks();
       else if (param === 'dangerous') renderDangerous();
       else renderAccount();
+    } else if (basePage === 'log') {
+      renderLog();
     }
   }
 
@@ -539,6 +542,8 @@ window.addEventListener('popstate', () => {
       else if (param === 'links') renderAccountLinks();
       else if (param === 'dangerous') renderDangerous();
       else renderAccount();
+    } else if (basePage === 'log') {
+      renderLog();
     }
   }
 });
@@ -697,6 +702,63 @@ function getActionLabel(action) {
   return labels[action] || action;
 }
 
+async function renderLog(pageNum) {
+  const el = $('#page-log');
+  pageNum = pageNum || 1;
+  const limit = 50;
+  const offset = (pageNum - 1) * limit;
+
+  el.innerHTML = html`
+    <div class="page-header">
+      <h1 class="page-title">Activity Log</h1>
+      <p class="page-subtitle">All account activity</p>
+    </div>
+    <div class="card" style="margin-bottom:20px">
+      <div id="log-list">
+        <div style="text-align:center;padding:24px;color:var(--text-secondary)"><span class="spinner"></span> Loading...</div>
+      </div>
+    </div>
+  `;
+
+  try {
+    const data = await api(`/activity?limit=${limit}&offset=${offset}`);
+    const list = $('#log-list');
+
+    if (data.activities.length === 0) {
+      list.innerHTML = '<div class="activity-empty">No activity found.</div>';
+      return;
+    }
+
+    const pageInfo = data.totalPages > 1 ? html`
+      <div class="log-pagination">
+        <button class="btn btn-ghost btn-sm" onclick="renderLog(${pageNum - 1})" ${pageNum <= 1 ? 'disabled' : ''}>Previous</button>
+        <span class="log-pagination-info">Page ${data.page} of ${data.totalPages} (${data.total} total)</span>
+        <button class="btn btn-ghost btn-sm" onclick="renderLog(${pageNum + 1})" ${pageNum >= data.totalPages ? 'disabled' : ''}>Next</button>
+      </div>
+    ` : '';
+
+    list.innerHTML = html`
+      ${pageInfo}
+      <div class="activity-list">
+        ${data.activities.map(a => html`
+          <div class="activity-item">
+            <div class="activity-icon activity-icon-${a.action}">${activityIcons[a.action] || ''}</div>
+            <div class="activity-content">
+              <div class="activity-action">${getActionLabel(a.action)}</div>
+              <div class="activity-details">${a.details || ''}</div>
+            </div>
+            <div class="activity-time">${formatRelativeTime(a.created_at)}</div>
+          </div>
+        `).join('')}
+      </div>
+      ${pageInfo}
+    `;
+  } catch (err) {
+    const list = $('#log-list');
+    if (list) list.innerHTML = '<div class="activity-empty">Could not load activity log.</div>';
+  }
+}
+
 async function renderActivity() {
   const el = $('#page-overview');
   let activitySection = $('#activity-section');
@@ -718,24 +780,36 @@ async function renderActivity() {
   }
 
   try {
-    const data = await api('/activity');
+    const data = await api('/activity?limit=5');
     const list = $('#activity-list');
 
     if (data.activities.length === 0) {
       list.innerHTML = '<div class="activity-empty">No activity yet. Create a server to get started.</div>';
       return;
     }
 
-    list.innerHTML = data.activities.slice(0, 10).map(a => html`
-      <div class="activity-item">
-        <div class="activity-icon activity-icon-${a.action}">${activityIcons[a.action] || ''}</div>
-        <div class="activity-content">
-          <div class="activity-action">${getActionLabel(a.action)}</div>
-          <div class="activity-details">${a.details || ''}</div>
-        </div>
-        <div class="activity-time">${formatRelativeTime(a.created_at)}</div>
+    const showCount = Math.min(4, data.activities.length);
+    const hasMore = data.total > 4;
+
+    list.innerHTML = html`
+      <div class="activity-list${hasMore ? ' activity-list-truncated' : ''}">
+        ${data.activities.slice(0, showCount).map(a => html`
+          <div class="activity-item">
+            <div class="activity-icon activity-icon-${a.action}">${activityIcons[a.action] || ''}</div>
+            <div class="activity-content">
+              <div class="activity-action">${getActionLabel(a.action)}</div>
+              <div class="activity-details">${a.details || ''}</div>
+            </div>
+            <div class="activity-time">${formatRelativeTime(a.created_at)}</div>
+          </div>
+        `).join('')}
       </div>
-    `).join('');
+      ${hasMore ? html`
+        <div class="activity-more-overlay">
+          <a class="btn btn-primary btn-sm" onclick="navigateTo('log')" style="margin-top:12px;width:auto">View all logs</a>
+        </div>
+      ` : ''}
+    `;
   } catch (err) {
     const list = $('#activity-list');
     if (list) list.innerHTML = '<div class="activity-empty">Could not load activity.</div>';

server.js

@@ -104,8 +104,16 @@ app.get('/api/activity', async (req, res) => {
     const decoded = jwt.verify(token, process.env.JWT_SECRET);
     const userId = decoded.userId;
 
-    const activities = await getRecentActivity(userId);
-    res.json({ activities });
+    const limit = Math.min(parseInt(req.query.limit) || 20, 50);
+    const offset = parseInt(req.query.offset) || 0;
+    const result = await getRecentActivity(userId, limit, offset);
+    res.json({
+      activities: result.activities,
+      total: result.total,
+      page: Math.floor(offset / limit) + 1,
+      totalPages: Math.ceil(result.total / limit),
+      limit,
+    });
   } catch (err) {
     if (err.name === 'JsonWebTokenError' || err.name === 'TokenExpiredError') {
       return res.status(401).json({ error: 'Invalid or expired token' });

services/activity.js

@@ -11,10 +11,14 @@ export async function logActivity(userId, action, details = '', serverId = null)
   }
 }
 
-export async function getRecentActivity(userId, limit = 20) {
+export async function getRecentActivity(userId, limit = 20, offset = 0) {
+  const [countResult] = await query(
+    'SELECT COUNT(*) as total FROM activity_log WHERE user_id = ?',
+    [userId]
+  );
   const rows = await query(
-    'SELECT * FROM activity_log WHERE user_id = ? ORDER BY created_at DESC LIMIT ?',
-    [userId, limit]
+    'SELECT * FROM activity_log WHERE user_id = ? ORDER BY created_at DESC LIMIT ? OFFSET ?',
+    [userId, limit, offset]
   );
-  return rows;
+  return { activities: rows, total: countResult.total };
 }