tweak(ui): improve the session list design - #5404
Conversation
Rebuild each session as a device row: a square icon tile, the device name with a badge for the current session, and the location, the last seen time and the IP address as compact chips. Long IPv6 addresses are shortened in the middle, show in full on hover and are copied to the clipboard when the chip is clicked. The terminate action uses the small button and moves under the details on narrow screens.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Team Run ID: 📒 Files selected for processing (1)
Included review availability: Your plan provides up to 2 included reviews per hour; 0 remain after this review. WalkthroughThe session item now displays browser, country, last-seen, and IP details with badges and icons. It supports IP copying with notifications and shows termination controls only for non-current sessions. ChangesSession item redesign
Estimated code review effort: 3 (Moderate) | ~20 minutes Merge Risk: ⚪ Minimal · up to The session list redesign adds clearer device details, IP copying, and responsive termination controls without any established merge-blocking risk. Sequence Diagram(s)sequenceDiagram
participant SessionItem
participant useSessionItem
participant Clipboard
participant SnackNotifications
SessionItem->>useSessionItem: handleCopyAddress()
useSessionItem->>Clipboard: copyToClipboard(session.ip)
Clipboard-->>useSessionItem: copy result
useSessionItem->>SnackNotifications: show success or mapped error
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
|
Tick the box to add this pull request to the merge queue (same as
|
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
ux-git
changed the title
Build the address chip from the shared button component instead of a styled box, and give it a label so screen readers announce that it copies the address.
|
1 participant
Each session is now a device row: a square icon tile, the device name with a badge for the current session, and the location, last seen time and IP address as compact chips.
Long IPv6 addresses are shortened in the middle, shown in full on hover, and copied to the clipboard when the chip is clicked. Terminate uses the small button and moves under the details on narrow screens.
Type of change