Feat/274 activity feed(#274)

[JohnOluB]

Summary

Closes #274

Users had no visibility into what others were doing on the platform.
This PR adds a real-time activity feed with filtering, grouping, and
notification integration.

Changes

src/lib/activity/activityTypes.ts (new)

Pure data model — no side effects, no imports. Defines ActivityEvent,
ActivityGroup (social / learning / financial / achievement),
ActivityEventType (10 types), and display helpers
(formatActivityLabel, GROUP_COLOR, EVENT_ICON_NAME, EVENT_GROUP).

src/lib/activity/activityService.ts (new)

API layer using the existing apiClient singleton. Normalises
snake_case wire responses to camelCase domain types. Falls back to
getMockActivityPage() while the backend endpoint is not yet wired up,
so the component works immediately in development.

src/hooks/useActivityFeed.ts (new)

State + real-time logic:

• Initial load on mount
• Incremental polling via setInterval using a since timestamp
  (only fetches events newer than the last seen — no wasted requests)
• Pagination via cursor with optimistic state merge
• Optimistic mark-read with rollback on failure
• Group filtering resets cursor and re-fetches cleanly

src/components/ActivityFeed.tsx (new)

Full-featured feed component:

• Group filter chips (all 4 groups, toggle individually, "All" resets)
• Live / offline indicator (Wifi / WifiOff from lucide-react)
• Skeleton loading state, empty state, error state
• Unread dot per item + unread count badge in header
• "Mark all read" (desktop inline, mobile below chips)
• "Refresh" button with spin animation while loading
• "Load more" pagination button
• All icons from lucide-react only

Usage

{/* Development — uses mock data automatically */}
<ActivityFeed />

{/* Production — polls every 30s */}
<ActivityFeed pollIntervalMs={30000} />

{/* Pre-filtered to learning only */}
<ActivityFeed initialGroups={['learning']} />

Acceptance criteria

• Real-time activity stream (incremental polling + live/offline indicator)
• Filtering by group (social, learning, financial, achievement)
• Notification integration via markAllRead / markRead
• All icons from lucide-react — no forbidden icon libraries
• Prettier-formatted — passes prettier --check
• Zero TypeScript errors in new files (tsc --noEmit)
• No console.log statements
• Responsive Tailwind (sm: breakpoints on layout-sensitive elements)
• 'use client' directive on both client files