[WIP] Add activity feed timeline to display recent events

[Copilot]

• Add getActivityFeed API function to frontend/src/services/api.ts
• Create useActivityFeed hook in frontend/src/hooks/useActivityFeed.ts (polling, loading/error/empty states, filter support)
• Create ActivityFeedItem sub-component in frontend/src/components/activity/ActivityFeedItem.tsx (icons, badges, compact/expanded)
• Create ActivityFeed component in frontend/src/components/activity/ActivityFeed.tsx (filter bar, loading skeletons, ARIA feed role, real-time)
• Create Activity page in frontend/src/pages/Activity.tsx
• Add /activity route in frontend/src/App.tsx
• Add Activity to desktop nav items in frontend/src/components/MobileNav/navigation.ts
• Type-check with npx tsc --noEmit
• Take screenshot of the UI

Original prompt

Add Activity Feed Timeline

Show a timeline of recent bridge, asset, and alert activity with clear ordering and detail states.

Requirements

• Chronological ordering — display events sorted by most recent first, with timestamps
• Event type icons — distinct icons for bridge events, asset events, and alerts
• Filter by source — allow users to filter the timeline by event source/type (bridge, asset, alert)
• Compact and expanded modes — toggle between a condensed list view and a detailed expanded view per item
• Real-time updates — poll or subscribe to new events and prepend them to the timeline without full page reload
• Loading skeletons — show skeleton placeholder UI while events are being fetched
• Responsive scrolling — virtualized or paginated scrollable list that works on mobile and desktop
• Accessible semantics — use appropriate ARIA roles (role="feed", role="article", aria-label, aria-live for real-time updates, etc.)

Implementation Plan

1. Create ActivityFeed component (place it in the existing components directory following project conventions)

   • Renders a chronologically ordered list of activity events
   • Each event item shows: icon (by type), title/description, timestamp, source label
   • Toggle between compact (icon + title + time) and expanded (full detail) mode per item or globally
   • "Load more" / infinite scroll or pagination support

2. Create ActivityFeedItem sub-component

   • Accepts event type, timestamp, title, detail, and source as props
   • Renders the correct icon per event type (bridge / asset / alert)
   • Highlights the event type with color or badge

3. Add useActivityFeed hook

   • Fetches timeline events from the backend (Rust API)
   • Supports real-time polling (e.g. every 15–30 seconds) using setInterval or WebSocket if available
   • Manages loading, error, and empty states
   • Prepends new events to the list without losing scroll position

4. Filter by source

   • Filter bar or dropdown to select: All / Bridges / Assets / Alerts
   • Filter applied client-side on cached results; re-fetch if needed

5. Loading skeletons

   • Show 3–5 animated skeleton rows while the initial fetch is in progress
   • Match the height/layout of real feed items

6. Integrate into the UI

   • Add the ActivityFeed component to the dashboard or a dedicated Activity page
   • Ensure it fits existing layout, routing, and styling conventions

7. Document behavior

   • Inline comments for polling logic, ARIA usage, and filter implementation

Notes

• The repo uses Rust (66.6%) and TypeScript (33.1%). Explore the project structure before placing files to match existing conventions.
• Reuse existing design tokens, icons, CSS classes, or component primitives wherever possible.
• This feature is in addition to the Search Autocomplete PR already in progress — do not conflict with those changes.

The following is the prior conversation context from the user's chat exploration (may be truncated):

User: ```
Add Search Autocomplete
Repo Avatar
biokes/Bridge-Watch
Description
Provide intelligent autocomplete for assets, bridges, and pages to speed up navigation and lookup.

Requirements and context

• Debounced queries
  Recent search suggestions

Keyboard navigation

Highlighted matches

Empty and loading states

Mobile support

Accessible combobox pattern

Search result grouping

Suggested execution
Fork the repo and create a branch

git checkout -b feature/search-autocomplete
Implement changes

Create autocomplete component
Add search suggestion service hook

Integrate into navbar search

Persist recent queries

Document search behavior

Assistant: We're waiting for your response to the confirmation dialog to proceed with creating the pull request.

User: @Copilot Accepted Confirmation: Confirm agent session

Assistant: Copilot is on it! You can track the progress of this task below:

````list type="task"
data:
    - title: 'Add Search Autocomplete'
      repository: Biokes/Bridge-Watch
      url: https://github.com/copilot/tasks/pull/PR_kwDORyupys7WFW1m?session_id=008eb35d-de41-4af4-9679-c5def626117d
      state: queued

The agent will:

1. Explore the existing project structure to match conventions
2. Build the autocomplete component with debouncing, ARIA combobox pattern, grouped results, and match highlighting
3. Add a useSearchSuggestions hook with loading/empty states and recent query persistence via localStorage
4. Integrate it into the navbar search
5. Open a PR once the implementation is ready for review

User: ```
Show a timeline of recent bridge, asset, and alert activity with clear ordering and detail states.

Requirements and context

• Chronological ordering
  Event type icons

Filter by source

Compact and expanded modes

Real-time updates

Loading skeletons

Responsive scrolling

Accessible semantics

Suggested execut...

This pull request was created from Copilot chat.

[Copilot]

Copilot wasn't able to review any files in this pull request.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.