Friends frontend

apps/app-frontend/src/App.vue

@@ -55,6 +55,7 @@ import AppSettingsModal from '@/components/ui/modal/AppSettingsModal.vue'
 import dayjs from 'dayjs'
 import PromotionWrapper from '@/components/ui/PromotionWrapper.vue'
 import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
+import FriendsList from '@/components/ui/friends/FriendsList.vue'
 
 const themeStore = useTheming()
 
@@ -255,7 +256,7 @@ watch(
   hasPlus,
   () => {
     if (hasPlus.value) {
-      hide_ads_window()
+      hide_ads_window(true)
     } else {
       show_ads_window()
     }
@@ -428,13 +429,19 @@ async function checkUpdates() {
       >
         <ModrinthLoadingIndicator />
       </div>
-      <div v-if="themeStore.featureFlag_pagePath" class="absolute bottom-0 left-0 m-2 bg-tooltip-bg text-tooltip-text font-semibold rounded-full px-2 py-1 text-xs z-50">
+      <div
+        v-if="themeStore.featureFlag_pagePath"
+        class="absolute bottom-0 left-0 m-2 bg-tooltip-bg text-tooltip-text font-semibold rounded-full px-2 py-1 text-xs z-50"
+      >
         {{ route.fullPath }}
       </div>
       <div
-        id="background-teleport-target" class="absolute h-full -z-10 rounded-tl-[--radius-xl] overflow-hidden" :style="{
-        width: 'calc(100% - var(--right-bar-width))',
-      }"></div>
+        id="background-teleport-target"
+        class="absolute h-full -z-10 rounded-tl-[--radius-xl] overflow-hidden"
+        :style="{
+          width: 'calc(100% - var(--right-bar-width))',
+        }"
+      ></div>
       <RouterView v-slot="{ Component }">
         <template v-if="Component">
           <Suspense @pending="loading.startLoading()" @resolve="loading.stopLoading()">
@@ -460,12 +467,9 @@ async function checkUpdates() {
             </suspense>
           </div>
           <div class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid">
-            <h3 class="text-lg m-0">Friends</h3>
-            <p class="m-0">
-              You have no friends :c. <br />
-              <br />
-              <span>Sign in</span> to add friends!
-            </p>
+            <suspense>
+              <FriendsList :credentials="credentials" :sign-in="() => signIn()" />
+            </suspense>
           </div>
           <div class="pt-4 flex flex-col">
             <h3 class="px-4 text-lg m-0">News</h3>

apps/app-frontend/src/components/ui/InstanceIndicator.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { convertFileSrc } from '@tauri-apps/api/core'
+import { formatCategory } from '@modrinth/utils'
+import { GameIcon, LeftArrowIcon } from '@modrinth/assets'
+import { Avatar, ButtonStyled } from '@modrinth/ui'
+
+type Instance = {
+  game_version: string
+  loader: string
+  path: string
+  install_stage: string
+  icon_path?: string
+  name: string
+}
+
+defineProps<{
+  instance: Instance
+}>()
+</script>
+
+<template>
+  <div class="flex justify-between items-center border-0 border-b border-solid border-divider pb-4">
+    <router-link
+      :to="`/instance/${encodeURIComponent(instance.path)}`"
+      tabindex="-1"
+      class="flex flex-col gap-4 text-primary"
+    >
+      <span class="flex items-center gap-2">
+        <Avatar
+          :src="instance.icon_path ? convertFileSrc(instance.icon_path) : undefined"
+          :alt="instance.name"
+          size="48px"
+        />
+        <span class="flex flex-col gap-2">
+          <span class="font-extrabold bold text-contrast">
+            {{ instance.name }}
+          </span>
+          <span class="text-secondary flex items-center gap-2 font-semibold">
+            <GameIcon class="h-5 w-5 text-secondary" />
+            {{ formatCategory(instance.loader) }} {{ instance.game_version }}
+          </span>
+        </span>
+      </span>
+    </router-link>
+    <ButtonStyled>
+      <router-link :to="`/instance/${encodeURIComponent(instance.path)}`">
+        <LeftArrowIcon /> Back to instance
+      </router-link>
+    </ButtonStyled>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

apps/app-frontend/src/components/ui/NavTabs.vue

@@ -29,7 +29,7 @@
 
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
-import type { RouteLocationRaw } from 'vue-router';
+import type { RouteLocationRaw } from 'vue-router'
 import { useRoute, RouterLink } from 'vue-router'
 
 const route = useRoute()
@@ -69,13 +69,10 @@ function pickLink() {
   for (let i = filteredLinks.value.length - 1; i >= 0; i--) {
     const link = filteredLinks.value[i]
 
-
     if (route.path === (typeof link.href === 'string' ? link.href : link.href.path)) {
       index = i
       break
-    } else if (
-      (link.subpages && link.subpages.some((subpage) => route.path.includes(subpage)))
-    ) {
+    } else if (link.subpages && link.subpages.some((subpage) => route.path.includes(subpage))) {
       index = i
       subpageSelected.value = true
       break