feat(activity): pagina /activity feed timeline team con paginazione e filtri tipo

leopu00 · claude · leopu00 · commit b4eace166c05 · 2026-04-04T06:10:27.000+02:00
Co-Authored-By: Claude Sonnet 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/web/app/activity/page.tsx b/web/app/activity/page.tsx
@@ -0,0 +1,142 @@
+'use client'
+
+import Link from 'next/link'
+import { useCallback, useEffect, useState } from 'react'
+
+type ActivityType = 'merge' | 'pr' | 'task' | 'test' | 'forum' | 'deploy'
+type ActivityItem = { id: string; type: ActivityType; title: string; description?: string; actor?: string; at: number }
+type ActivityRes  = { items: ActivityItem[]; total: number; page: number; pages: number }
+
+const TYPE_ICON: Record<ActivityType, string> = {
+  merge: '🔀', pr: '📬', task: '📋', test: '🧪', forum: '💬', deploy: '🚀',
+}
+const TYPE_COLOR: Record<ActivityType, string> = {
+  merge: 'var(--color-green)', pr: 'var(--color-yellow)', task: 'var(--color-muted)',
+  test: 'var(--color-green)', forum: 'var(--color-dim)', deploy: 'var(--color-orange)',
+}
+const TYPE_LABEL: Record<ActivityType, string> = {
+  merge: 'merge', pr: 'PR', task: 'task', test: 'test', forum: 'forum', deploy: 'deploy',
+}
+const FILTERS: Array<{ key: 'all' | ActivityType; label: string }> = [
+  { key: 'all', label: 'tutto' }, { key: 'merge', label: 'merge' }, { key: 'pr', label: 'PR' },
+  { key: 'task', label: 'task' }, { key: 'test', label: 'test' }, { key: 'forum', label: 'forum' },
+]
+
+function fmtTime(ms: number) {
+  const diff = Date.now() - ms
+  const m = Math.floor(diff / 60000)
+  if (m < 1) return 'adesso'
+  if (m < 60) return `${m}m fa`
+  const h = Math.floor(m / 60)
+  if (h < 24) return `${h}h fa`
+  return new Date(ms).toLocaleDateString('it-IT', { day: '2-digit', month: 'short' })
+}
+
+function TimelineDot({ type }: { type: ActivityType }) {
+  return (
+    <div className="flex flex-col items-center flex-shrink-0" style={{ width: 32 }}>
+      <div className="w-7 h-7 rounded-full flex items-center justify-center text-sm flex-shrink-0"
+        style={{ background: `${TYPE_COLOR[type]}18`, border: `1px solid ${TYPE_COLOR[type]}44` }}>
+        {TYPE_ICON[type]}
+      </div>
+    </div>
+  )
+}
+
+export default function ActivityPage() {
+  const [data, setData]     = useState<ActivityRes | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [filter, setFilter] = useState<'all' | ActivityType>('all')
+  const [page, setPage]     = useState(1)
+
+  const fetchData = useCallback(async () => {
+    setLoading(true)
+    const q = new URLSearchParams({ page: String(page), limit: '20', type: filter })
+    const res = await fetch(`/api/activity?${q}`).catch(() => null)
+    if (res?.ok) setData(await res.json())
+    setLoading(false)
+  }, [page, filter])
+
+  useEffect(() => { fetchData() }, [fetchData])
+
+  const onFilter = (f: typeof filter) => { setFilter(f); setPage(1) }
+
+  return (
+    <div style={{ animation: 'fade-in 0.35s ease both' }}>
+      <div className="mb-8 pb-6 border-b border-[var(--color-border)]">
+        <div className="flex items-center gap-2 mb-1">
+          <Link href="/dashboard" className="text-[10px] text-[var(--color-dim)] hover:text-[var(--color-muted)] no-underline transition-colors">Dashboard</Link>
+          <span className="text-[var(--color-border)]">/</span>
+          <span className="text-[10px] text-[var(--color-muted)]">Attività</span>
+        </div>
+        <div className="mt-3">
+          <h1 className="text-2xl font-bold tracking-tight text-[var(--color-white)]">Attività team</h1>
+          <p className="text-[var(--color-muted)] text-[11px] mt-1">{data ? `${data.total} eventi totali` : '…'}</p>
+        </div>
+        <div className="flex gap-1.5 flex-wrap mt-4">
+          {FILTERS.map(f => (
+            <button key={f.key} onClick={() => onFilter(f.key)}
+              className="px-3 py-1.5 rounded text-[10px] font-semibold cursor-pointer transition-all"
+              style={{ border: `1px solid ${filter === f.key ? 'var(--color-green)' : 'var(--color-border)'}`, color: filter === f.key ? 'var(--color-green)' : 'var(--color-dim)', background: filter === f.key ? 'rgba(0,232,122,0.08)' : 'transparent' }}>
+              {f.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {loading && <div className="flex justify-center py-16"><span className="text-[var(--color-dim)] text-[12px]">Caricamento…</span></div>}
+
+      {!loading && data && data.items.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-16 gap-3">
+          <span className="text-4xl">📭</span>
+          <p className="text-[12px] font-semibold text-[var(--color-muted)]">Nessuna attività</p>
+          <p className="text-[10px] text-[var(--color-dim)]">L&apos;attività del team apparirà qui.</p>
+        </div>
+      )}
+
+      {!loading && data && data.items.length > 0 && (
+        <div className="flex flex-col gap-0">
+          {data.items.map((item, i) => (
+            <div key={item.id} className="flex gap-3 group">
+              <div className="flex flex-col items-center">
+                <TimelineDot type={item.type} />
+                {i < data.items.length - 1 && <div className="w-px flex-1 mt-1" style={{ background: 'var(--color-border)', minHeight: 20 }} />}
+              </div>
+              <div className="flex-1 pb-5 pt-0.5">
+                <div className="flex items-start justify-between gap-3 flex-wrap">
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2 mb-0.5 flex-wrap">
+                      <span className="badge text-[9px]" style={{ color: TYPE_COLOR[item.type], background: `${TYPE_COLOR[item.type]}12`, border: `1px solid ${TYPE_COLOR[item.type]}33` }}>
+                        {TYPE_LABEL[item.type]}
+                      </span>
+                      {item.actor && <span className="text-[9px] text-[var(--color-dim)] font-mono">{item.actor}</span>}
+                    </div>
+                    <p className="text-[12px] text-[var(--color-bright)] leading-snug">{item.title}</p>
+                    {item.description && <p className="text-[10px] text-[var(--color-dim)] mt-0.5 truncate">{item.description}</p>}
+                  </div>
+                  <span className="text-[9px] text-[var(--color-dim)] flex-shrink-0 mt-0.5">{fmtTime(item.at)}</span>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {data && data.pages > 1 && (
+        <div className="flex items-center justify-between mt-6 pt-4 border-t border-[var(--color-border)]">
+          <button disabled={page <= 1} onClick={() => setPage(p => p - 1)}
+            className="px-4 py-2 rounded text-[10px] font-semibold transition-colors"
+            style={{ border: '1px solid var(--color-border)', color: page <= 1 ? 'var(--color-border)' : 'var(--color-muted)', cursor: page <= 1 ? 'default' : 'pointer', background: 'transparent' }}>
+            ← precedente
+          </button>
+          <span className="text-[10px] text-[var(--color-dim)]">pag. {page} / {data.pages}</span>
+          <button disabled={page >= data.pages} onClick={() => setPage(p => p + 1)}
+            className="px-4 py-2 rounded text-[10px] font-semibold transition-colors"
+            style={{ border: '1px solid var(--color-border)', color: page >= data.pages ? 'var(--color-border)' : 'var(--color-muted)', cursor: page >= data.pages ? 'default' : 'pointer', background: 'transparent' }}>
+            successiva →
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/web/app/api/activity/route.ts b/web/app/api/activity/route.ts
@@ -0,0 +1,108 @@
+import { NextRequest, NextResponse } from 'next/server'
+import * as fs from 'node:fs'
+import * as path from 'node:path'
+import * as os from 'node:os'
+
+export const dynamic = 'force-dynamic'
+
+const TASKS_DIR  = path.join(os.homedir(), '.jht-dev', 'tasks')
+const FORUM_LOG  = path.join(os.homedir(), '.jht', 'forum.log')
+
+export type ActivityType = 'merge' | 'pr' | 'task' | 'test' | 'forum' | 'deploy'
+
+export interface ActivityItem {
+  id: string
+  type: ActivityType
+  title: string
+  description?: string
+  actor?: string
+  at: number
+}
+
+/** Legge task YAML frontmatter senza dipendenze */
+function parseTaskFrontmatter(content: string): Record<string, string> {
+  const match = content.match(/^---\n([\s\S]*?)\n---/)
+  if (!match) return {}
+  const out: Record<string, string> = {}
+  for (const line of match[1]!.split('\n')) {
+    const sep = line.indexOf(':')
+    if (sep === -1) continue
+    out[line.slice(0, sep).trim()] = line.slice(sep + 1).trim().replace(/^"|"$/g, '')
+  }
+  return out
+}
+
+function taskToActivity(meta: Record<string, string>): ActivityItem | null {
+  const stato = meta['stato'] ?? ''
+  if (!['merged', 'pr-ready', 'in-progress'].includes(stato)) return null
+
+  const type: ActivityType = stato === 'merged' ? 'merge' : stato === 'pr-ready' ? 'pr' : 'task'
+  const id = meta['id'] ?? ''
+  const aggiornato = meta['aggiornato'] ?? ''
+  const at = aggiornato ? new Date(aggiornato.replace(' ', 'T')).getTime() : 0
+  if (!at || !id) return null
+
+  const assegnato = meta['assegnato_a']?.split('(')[0]?.trim() ?? '—'
+  const label: Record<string, string> = { merge: 'Mergiato', 'pr': 'PR pronta', task: 'In corso' }
+
+  return {
+    id: `task-${id}-${stato}`,
+    type,
+    title: `${label[type]}: ${id}`,
+    description: (meta['richiesta'] ?? '').slice(0, 80) + ((meta['richiesta'] ?? '').length > 80 ? '…' : ''),
+    actor: assegnato,
+    at,
+  }
+}
+
+/** Parsa forum.log — ultime N righe */
+function parseForumLog(limit: number): ActivityItem[] {
+  try {
+    const raw = fs.readFileSync(FORUM_LOG, 'utf-8')
+    const lines = raw.trim().split('\n').slice(-limit * 3)
+    const items: ActivityItem[] = []
+    for (const line of lines) {
+      const m = line.match(/^\[(\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2})\] \[(\w+)\] (.+)$/)
+      if (!m) continue
+      const [, ts, actor, msg] = m
+      const at = new Date(ts!.replace(' ', 'T')).getTime()
+      const type: ActivityType = /test|vitest/.test(msg!) ? 'test' : /deploy|build/.test(msg!) ? 'deploy' : 'forum'
+      items.push({ id: `forum-${at}-${actor}`, type, title: msg!.slice(0, 80) + (msg!.length > 80 ? '…' : ''), actor: actor!, at })
+    }
+    return items.slice(-limit)
+  } catch { return [] }
+}
+
+/** GET — activity feed paginato */
+export async function GET(req: NextRequest) {
+  const page  = Math.max(1, parseInt(req.nextUrl.searchParams.get('page')  ?? '1'))
+  const limit = Math.min(50, Math.max(5, parseInt(req.nextUrl.searchParams.get('limit') ?? '20')))
+  const type  = req.nextUrl.searchParams.get('type') ?? 'all'
+
+  const items: ActivityItem[] = []
+
+  // Task files
+  try {
+    const files = fs.readdirSync(TASKS_DIR).filter(f => f.endsWith('.md'))
+    for (const file of files) {
+      const content = fs.readFileSync(path.join(TASKS_DIR, file), 'utf-8')
+      const meta = parseTaskFrontmatter(content)
+      const item = taskToActivity(meta)
+      if (item) items.push(item)
+    }
+  } catch { /* dir non trovata */ }
+
+  // Forum log
+  items.push(...parseForumLog(60))
+
+  // Filtra per tipo
+  const filtered = type === 'all' ? items : items.filter(i => i.type === type)
+
+  // Sort desc e pagina
+  filtered.sort((a, b) => b.at - a.at)
+  const total = filtered.length
+  const start = (page - 1) * limit
+  const data  = filtered.slice(start, start + limit)
+
+  return NextResponse.json({ items: data, total, page, limit, pages: Math.ceil(total / limit) })
+}
