UI: Change car icon to show bookmarked routes

[ugtthis]

I noticed that the car icon doesn't have much utility. I also noticed that although new-connect does show the # of user flags, we can make it clearer that a route has been bookmarked by showing a bookmark icon and making the CardHeader hierarchy clearer. I removed Avatar.tsx since it was only used to add the circle background behind the car icon.

A clearer hierarchy with a bookmark icon appearing on routes that have user flags helps with finding routes quicker while making use of a previous icon.

New Card Header UI w/bookmark

Comparing UI Video

comparing-card-header-ui.mp4

[github-actions]

deployed preview: https://98.connect-d5y.pages.dev

Welcome to new-connect! Make sure to:

• read the contributing guidelines
• mark your PR as a draft until it's ready to review
• post the preview on Discord; feedback from users will speedup the PR review

Mobile

Desktop

[incognitojam]

I feel like having a bookmark icon makes it seem like a button that you could press to bookmark routes from the web

[ugtthis]

TL;DR - It can appear clickable though the tradeoff could be worth it since it improves searching for clips for users today in a lean, minimal, familiar way

--

Main reason why I choose a bookmark, versus heart or star, etc. is because openpilot UI uses the same symbol when people are flagging things while driving. I thought it was consistent with what you’d expect when looking on connect and seeing a clip with the same icon that you pressed on your comma device while driving.

I guess if a “heart” feature is about to get implemented where you can favorite clips so they appear in a different folder(similar to the photo UX on iPhones) then I’d say the bookmark feature isn’t worth implementing right now.

The “heart” feature seems to be more complex than the bookmark feature so I thought the bookmark feature would be a good intermediary thing to have to improve the UX in searching for clips that users could use sooner vs waiting on the “heart” feature

[ugtthis]

Either way I’d still do a PR to remove the top left circle car icon on the card. It doesn’t help make searching for drives easier since it appears on all cars and is more stylistic(which is fine) but with the small space the card has, the icon ends up creating more noise. I think trip cards should only contain elements that help user find drives easier/faster which is important because currently most users go on connect to do one thing, which is look for past drives