Merge pull request #44 from ArnasDon/fix/dashboard-activity-feed-pagination

fix(dashboard): paginate recent activity feed with a size picker

src/app/(dashboard)/dashboard/page.tsx

@@ -84,7 +84,10 @@ export default function DashboardPage() {
       .catch((err) => console.error('[dashboard] response time failed:', err))
       .finally(() => setResponseTimeLoading(false))
 
-    void loadActivity(db, 20)
+    // Fetch up to 50 so the biggest page-size option in the feed
+    // (50 rows) is already in memory — switching sizes then becomes
+    // a pure client-side slice with no extra round trip.
+    void loadActivity(db, 50)
       .then((a) => setActivity(a))
       .catch((err) => console.error('[dashboard] activity failed:', err))
       .finally(() => setActivityLoading(false))

src/components/dashboard/activity-feed.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import Link from 'next/link'
+import { useState } from 'react'
 import {
   MessageSquare,
   UserPlus,
@@ -20,6 +21,9 @@ interface ActivityFeedProps {
   loading: boolean
 }
 
+const PAGE_SIZES = [5, 10, 20, 50] as const
+type PageSize = (typeof PAGE_SIZES)[number]
+
 interface KindTheme {
   icon: ComponentType<{ className?: string }>
   /** Tailwind classes for the round icon badge + label color. */
@@ -35,6 +39,20 @@ const KIND_THEME: Record<ActivityKind, KindTheme> = {
 }
 
 export function ActivityFeed({ items, loading }: ActivityFeedProps) {
+  // Start at 5 — a quick scan of the most recent events without
+  // dominating vertical real estate. User expands explicitly via the
+  // footer control when they want deeper history.
+  const [pageSize, setPageSize] = useState<PageSize>(5)
+
+  const totalLoaded = items?.length ?? 0
+  const visible = items?.slice(0, pageSize) ?? []
+  // A size option is "useful" if picking it would reveal rows the
+  // smaller option doesn't already show. With PAGE_SIZES=[5,10,20,50]:
+  // "10" is useful only once we've loaded ≥6 items, "20" once ≥11, etc.
+  // The smallest option is always enabled.
+  const isSizeUseful = (size: PageSize, i: number) =>
+    i === 0 || totalLoaded > PAGE_SIZES[i - 1]
+
   return (
     <section className="rounded-xl border border-slate-800 bg-slate-900">
       <header className="flex items-center justify-between border-b border-slate-800 px-5 py-4">
@@ -62,11 +80,12 @@ export function ActivityFeed({ items, loading }: ActivityFeedProps) {
           />
         </div>
       ) : (
+        <>
           <ul className="divide-y divide-slate-800">
-          {items.map((it, i) => {
+            {visible.map((it, i) => {
               const theme = KIND_THEME[it.kind]
               const Icon = theme.icon
-            // Alternating row background for light scanability — dark-theme
+              // Alternating row background for scanability — dark-theme
               // translation of the spec's white / #f9fafb stripes.
               const stripe = i % 2 === 0 ? 'bg-transparent' : 'bg-slate-900/40'
               const row = (
@@ -100,6 +119,36 @@ export function ActivityFeed({ items, loading }: ActivityFeedProps) {
               )
             })}
           </ul>
+          <footer className="flex items-center justify-between border-t border-slate-800 px-5 py-3 text-xs">
+            <span className="text-slate-500 tabular-nums">
+              Showing {visible.length} of {totalLoaded}
+              {totalLoaded === 50 ? '+' : ''}
+            </span>
+            <div className="flex items-center gap-1">
+              <span className="mr-1 text-slate-500">Show</span>
+              {PAGE_SIZES.map((size, i) => {
+                const disabled = !isSizeUseful(size, i)
+                return (
+                  <button
+                    key={size}
+                    type="button"
+                    onClick={() => setPageSize(size)}
+                    disabled={disabled}
+                    className={cn(
+                      'rounded-md px-2 py-1 font-medium tabular-nums transition-colors',
+                      pageSize === size
+                        ? 'bg-slate-700 text-white'
+                        : 'text-slate-400 hover:bg-slate-800 hover:text-white',
+                      disabled && 'cursor-not-allowed opacity-40 hover:bg-transparent hover:text-slate-400',
+                    )}
+                  >
+                    {size}
+                  </button>
+                )
+              })}
+            </div>
+          </footer>
+        </>
       )}
     </section>
   )