feat: click on friends

apps/app-frontend/src/components/ui/friends/FriendsSection.vue

@@ -123,45 +123,46 @@ const messages = defineMessages({
 				<div
 					v-for="friend in friends"
 					:key="friend.username"
-					class="group grid items-center grid-cols-[auto_1fr_auto] gap-2 hover:bg-button-bg transition-colors rounded-full mr-1"
+					class="group grid items-center grid-cols-[1fr_auto] gap-2 hover:bg-button-bg transition-colors rounded-full mr-1"
 					@contextmenu.prevent.stop="
 						(event) => friendOptions?.showMenu(event, friend, createContextMenuOptions(friend))
 					"
 				>
-					<div class="relative">
+					<RouterLink
-						<Avatar
+						:to="`/user/${encodeURIComponent(friend.username)}`"
-							:src="friend.avatar"
+						class="grid min-w-0 grid-cols-[auto_1fr] items-center gap-2 text-inherit no-underline"
-							:class="{ grayscale: !friend.online && friend.accepted }"
+					>
-							class="w-12 h-12 rounded-full"
+						<div class="relative">
-							size="32px"
+							<Avatar
-							circle
+								:src="friend.avatar"
-						/>
+								:class="{ grayscale: !friend.online && friend.accepted }"
-						<span
+								class="w-12 h-12 rounded-full"
-							v-if="friend.online"
+								size="32px"
-							aria-hidden="true"
+								circle
-							class="bottom-[2px] right-[-2px] absolute w-3 h-3 bg-brand border-2 border-black border-solid rounded-full"
+							/>
-						/>
+							<span
-					</div>
+								v-if="friend.online"
-					<div class="flex flex-col">
+								aria-hidden="true"
-						<span
+								class="bottom-[2px] right-[-2px] absolute w-3 h-3 bg-brand border-2 border-black border-solid rounded-full"
-							class="text-sm m-0"
+							/>
-							:class="friend.online || !friend.accepted ? 'text-contrast' : 'text-primary'"
+						</div>
-						>
+						<div class="flex flex-col">
-							{{ friend.username }}
+							<span
-						</span>
+								class="text-sm m-0"
-						<span v-if="!friend.accepted" class="m-0 text-xs">
+								:class="friend.online || !friend.accepted ? 'text-contrast' : 'text-primary'"
-							{{ formatMessage(messages.friendRequestSent) }}
+							>
-						</span>
+								{{ friend.username }}
-						<span v-else-if="friend.status" class="m-0 text-xs">{{ friend.status }}</span>
+							</span>
-					</div>
+							<span v-if="!friend.accepted" class="m-0 text-xs">
+								{{ formatMessage(messages.friendRequestSent) }}
+							</span>
+							<span v-else-if="friend.status" class="m-0 text-xs">{{ friend.status }}</span>
+						</div>
+					</RouterLink>
 					<ButtonStyled v-if="friend.accepted" circular type="transparent">
 						<OverflowMenu
 							class="opacity-0 group-hover:opacity-100 transition-opacity"
 							:options="[
-								{
-									id: 'view-profile',
-									action: () => openProfile(friend.username),
-								},
 								{
 									id: 'remove-friend',
 									action: () => removeFriend(friend),
@@ -170,10 +171,6 @@ const messages = defineMessages({
 							]"
 						>
 							<MoreVerticalIcon />
-							<template #view-profile>
-								<UserIcon />
-								{{ formatMessage(messages.viewProfile) }}
-							</template>
 							<template #remove-friend>
 								<TrashIcon />
 								{{ formatMessage(messages.removeFriend) }}