feat: click on friends

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

@@ -123,10 +123,14 @@ 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))
 					"
+				>
+					<RouterLink
+						:to="`/user/${encodeURIComponent(friend.username)}`"
+						class="grid min-w-0 grid-cols-[auto_1fr] items-center gap-2 text-inherit no-underline"
 					>
 						<div class="relative">
 							<Avatar
@@ -154,14 +158,11 @@ const messages = defineMessages({
 							</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) }}