feat: add friend count to buttons on friend page

components/Me/FriendsList.vue

@@ -1,11 +1,11 @@
 <template>
 	<input id="search-friend-bar" placeholder="search"/>
 
-	<!-- we aren't checking for the #all hash, since this is the default and fallback one -->
+	<!-- we aren't checking for the "all" variant, since this is the default and fallback one -->
 
 	<p v-if="props.variant === 'online'" style="text-align: left;">Online – 0</p>
 	<p v-else-if="props.variant === 'pending'" style="text-align: left;">Friend Requests – 0</p>
-	<p v-else style="text-align: left;">Friends – {{ friends?.length || 0 }} (N/A Online)</p>
+	<p v-else style="text-align: left;">Friends – {{ friends?.length || 0 }}</p>
 
 	<div id="friends-list">
 		<div v-if="props.variant === 'online'">

pages/me/friends.vue

@@ -3,7 +3,10 @@
 	<DirectMessagesSidebar />
 	<div :id="$style['page-content']">
 		<div :id="$style['navigation-bar']">
-			<Button v-for="button of buttons" :text="button.label" variant="normal" :callback="button.updateFilter" />
+			<Button :text="`All Friends – ${friends?.length}`" variant="neutral" :callback="() => updateFilter('all')" />
+			<Button :text="`Online – ${0}`" variant="neutral" :callback="() => updateFilter('online')" />
+			<Button :text="`Pending – ${0}`" variant="neutral" :callback="() => updateFilter('pending')" />
+			<Button text="Add Friend" variant="normal" :callback="() => updateFilter('add')" />
 		</div>
 		
 		<div>
@@ -16,20 +19,17 @@
 </template>
 
 <script lang="ts" setup>
-import AddFriend from '~/components/Me/AddFriend.vue';
 import DirectMessagesSidebar from '~/components/Me/DirectMessagesSidebar.vue';
-import FriendsList from '~/components/Me/FriendsList.vue';
 import Button from '~/components/UserInterface/Button.vue';
+import AddFriend from '~/components/Me/AddFriend.vue';
+import FriendsList from '~/components/Me/FriendsList.vue';
 
-const buttons = [
+const { fetchFriends } = useApi();
-	{ label: "All Friends", updateFilter: () => updateFilter('all'), variant: "neutral" },
-	{ label: "Online", updateFilter: () => updateFilter('online'), variant: "neutral" },
-	{ label: "Pending", updateFilter: () => updateFilter('pending'), variant: "neutral" },
-	{ label: "Add Friend", updateFilter: () => updateFilter('add'), variant: "primary" },
-]
 
 let filter = ref("all");
 
+const friends = await fetchFriends()
+
 function updateFilter(newFilter: string) {
 	filter.value = newFilter;
 }