feat(demo): group notes by channel into card layout

[m-kus]

TL;DR

Reorganized the notes display to group unspent notes by channel with pagination support and improved the visual layout with card-based design.

What changed?

• Replaced the flat notes table with a card-based layout that groups notes by channel key
• Added pagination to channel cards showing 10 notes per page with "Newer"/"Older" navigation
• Introduced ChannelGroup type to organize notes by sender, token, and channel key
• Reordered table columns in the channels section to show Channel Key before Next Note Index
• Added sorting logic to display channel groups and notes by most recent first
• Enhanced styling with new CSS classes for channel cards, pagination controls, and improved spacing

How to test?

1. Load the demo application with multiple notes across different channels
2. Verify that notes are grouped by channel key in separate cards
3. Test pagination controls when a channel has more than 10 notes
4. Confirm that channel groups are sorted by most recent activity
5. Check that the "self" and "open" chips display correctly within the card layout

Why make this change?

This change improves the user experience by organizing notes in a more logical and visually appealing way. Grouping by channels makes it easier to understand note relationships, while pagination prevents performance issues and UI clutter when dealing with large numbers of notes. The card-based design provides better visual separation and makes the interface more scannable.

---

This change is 

[m-kus]

• feat(demo): allow to edit class hash #583
• feat(demo): add subsystem health indicators to explorer #600
• feat(demo): group notes by channel into card layout #584 👈 (View in Graphite)
• feat(demo): transaction builder #580
• feat(demo): privacy pool deployment #568
• feat(demo): starknet integration demo explorer #556
• fix(e2e): add declare-class script and fix outgoing sync #555 : 1 other dependent PR (#533 )
• feat(sdk): proving service integration #538 : 2 other dependent PRs (#539 , #553 )
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[github-actions]

Deploy preview for starknet-privacy-demo ready!

✅ Preview
https://starknet-privacy-demo-ns26afxe4-keep-starknet-strange.vercel.app

Built with commit a7164a0.
This pull request is being automatically deployed with vercel-action