feat(frontend): add network strength indicator across client application

mondyagu abhilashrequested to merge
network into develop

Description:

Added a network strength indicator to the Corpus client application. The indicator uses the browser Network Information API to detect the current connection quality and displays a color-coded signal icon in the top-right corner of the application. The component updates automatically when network conditions change and is now visible across all key pages, including Home, Upload Selection, Upload Content (Image, Audio, Video, Document), Peer Review, and Tools. Also fixed layout issues such as overlap on the Home page and duplicate rendering on the Tools page.

Type of Change:

  • Bug Fix
  • Feature Development
  • Documentation

Testing:

  • Tested on desktop
  • Tested on mobile
  • Tested in different browsers

Screenshots (if applicable):

Screenshot_from_2026-05-12_11-41-21

Screenshot_from_2026-05-12_11-41-30

Screenshot_from_2026-05-12_11-41-38

image

image

image

image

Screenshot_from_2026-05-12_13-45-31Screenshot_from_2026-05-12_13-56-52Screenshot_from_2026-05-12_14-00-03

Video Demo

Add a link to the demo of the PR

If AI assistance was used, include a short video explaining:

How the useNetworkStrength hook works How the NetworkStrengthIndicator component is integrated How the feature was tested using browser network throttling

Link to code walkthrough

Checklist:

  • Code follows project style guidelines
  • Self-review completed
  • No console errors
  • TypeScript types are correct
Edited by mondyagu abhilash

Merge request reports