Implement track status page

[Popoulosss]

• Implement track status page: https://polkadot.subsquare.io/referenda/tracks
• Implement the referenda stats, the panel's UI style refers to fellowship salary data panel
  • active(referenda)/total
  • preparing
  • queueing
  • deciding
  • confirming
• Implement the tracks status, here we need to show:
  • track index and name
  • queue in preparation(including preparing and queueing status)
  • queue in ongoing(including deciding and confirming status)

Figma link

Preview

---

• For the queue in preparation(including preparing and queueing status), its capacity is unlimited, however, in the panel, it is displayed only in the viewable area. If the amount exceeds the display area, the queue can be expanded

Figma link

Preview

---

• For the queue in ongoing(including deciding and confirming status), every track has its capacity, in the panel, each track displays 100 amount of capacity
  • For a track with a capacity less than 100, the extra part is disabled
  • For a track with a capacity more than 100, the extra part is hided(can be expanded)

Figma link

Preview

---

• When clicking on the subtitle of a track, link to the corresponding page

Preview

[Popoulosss]

Tooltip

• Show description of the preparing and ongoing

Preview

---

• Queue in preparation(including preparing and queueing status)
  • Show the amount of referenda
  • Show the referendum brief info, link to the referedum detail page by clicking the index

Preview

---

• Queue in ongoing(including deciding and confirming status)
  • Show the amount of referenda
  • Show the referendum brief info, link to the referedum detail page by clicking the index

Preview

[Popoulosss]

Entrance

• All referenda page

Figma link

Preview

---

• Track page

Figma link

Preview

[Popoulosss]

*Filter

• Support hiding idle tracks(no ongoing referenda)
• Support sorting by
  • track index(default)
  • most ongoing referenda

Figma link

Preview