GKaszewski/thoughts
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Frutiger Aero redesign — glass panels, Aero shimmer, interaction moments

Browse Source
This commit is contained in:
Gabriel Kaszewski
2026-05-16 14:55:51 +02:00
parent a0aa3f381e
commit b02f3c73e3
17 changed files with 549 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
thoughts-frontend/components/top-friends.tsx
View File

@@ -17,12 +17,13 @@ export async function TopFriends({ username }: TopFriendsProps) {
return (
<Card id="top-friends" className="p-4">
<CardHeader id="top-friends__header" className="p-0 pb-2">
<CardTitle id="top-friends__title" className="text-lg text-shadow-md">
<CardHeader id="top-friends__header" className="p-0 pb-3">
<CardTitle id="top-friends__title" className="text-lg flex items-center gap-2">
<span className="widget-icon widget-icon-green">👥</span>
Top Friends
</CardTitle>
</CardHeader>
<CardContent id="top-friends__content" className="p-0">
<CardContent id="top-friends__content" className="p-0 space-y-1">
{friends.map((friend) => (
<Link
id={`top-friends__link-${friend.id}`}
@@ -30,12 +31,17 @@ export async function TopFriends({ username }: TopFriendsProps) {
key={friend.id}
className="flex items-center gap-3 py-2 px-2 -mx-2 rounded-lg hover:bg-accent/50 transition-colors"
>
<UserAvatar src={friend.avatarUrl} alt={friend.username} />
<span
id={`top-friends__name-${friend.id}`}
className="text-xs truncate w-full font-medium text-shadow-sm"
>
{friend.displayName || friend.username}
<UserAvatar src={friend.avatarUrl} alt={friend.displayName || friend.username} />
<div className="flex flex-col min-w-0">
<span className="text-xs font-semibold truncate text-shadow-sm">
{friend.displayName || friend.username}
</span>
<span className="text-[10px] text-muted-foreground truncate">
@{friend.username}
</span>
</div>
<span className="ml-auto shrink-0 text-[10px] font-semibold px-2 py-0.5 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-600">
following
</span>
</Link>
))}