feat: Revamp system monitor & app footer

[imtuyethan]

Related epics: Jan Server #1078 & Observability #1236
Related design ticket: #1838

---

Revamp system monitor

Problem: In Jan Server, app displays system informations in the footer bar, which send a lot of requests during app cycle. Should revamp the UI to have expand/collapse section so users can access from anywhere but still ensure the performance.

Design

Figma link: https://www.figma.com/file/ytn1nRZ17FUmJHTlhmZB9f/Jan-App?type=design&node-id=4427-325119&mode=design&t=LbqHwgt8zLarODK6-4

Note

• Remove system monitor page & item on the left ribbon
• Move system monitor on the footer
• Users can only see CPU, mem, GPU metrics when they expand the footer. Reason: to reduce the number of requests sent during app cycle in Jan Server.
• When system monitor is expanded -> update the metrics constantly

User flow

Users click on system monitor to view the metrics:

System monitor includes running models & activity metrics as below, and users can expand the panel or adjust the size of the panel:

Revamp app footer

https://www.figma.com/file/ytn1nRZ17FUmJHTlhmZB9f/Jan-App?type=design&node-id=1-22887&mode=design&t=LbqHwgt8zLarODK6-4

• Remove my models -> it's kinda redundant & has no purpose at the moment

[Van-QA]

1. Invisible text in dardmode @urmauur ❌
   
2. Overlapping Download button ❌

3. Running model should be in Bold

[Van-QA]

hi @urmauur
3. menu name is overlapped with System monitor ❌

[urmauur]

nice catch, will update this @Van-QA thank u

[Van-QA]

@urmauur please help us correct the UI accordingly, thank you 🙏

On the other hand, can you also help me correct this: