build: ✨ Add explanations for which apps can be used, add link to registration page in sidebar

components/sidebars/navigation.vue

@@ -21,13 +21,20 @@
         <div class="flex flex-col gap-3 mt-auto">
             <h3 class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
                 Account</h3>
-            <NuxtLink>
+            <NuxtLink href="/about/apps">
-                <ButtonsBase disabled
+                <ButtonsBase
                     class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 overflow-hidden h-12 w-full duration-200">
                     <Icon name="tabler:login" class="shrink-0 text-2xl" />
                     <span class="pr-28 line-clamp-1">Sign In</span>
                 </ButtonsBase>
             </NuxtLink>
+            <NuxtLink href="/register">
+                <ButtonsBase
+                    class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 overflow-hidden h-12 w-full duration-200">
+                    <Icon name="tabler:certificate" class="shrink-0 text-2xl" />
+                    <span class="pr-28 line-clamp-1">Register</span>
+                </ButtonsBase>
+            </NuxtLink>
         </div>
     </aside>
 </template>

components/social-elements/users/Account.vue

@@ -94,39 +94,53 @@ const props = defineProps<{
 
 const skeleton = computed(() => !props.account);
 
-const formattedJoin = computed(() => Intl.DateTimeFormat("en-US", {
+const formattedJoin = computed(() =>
+    Intl.DateTimeFormat("en-US", {
         month: "long",
         year: "numeric",
-}).format(new Date(props.account?.created_at ?? 0)));
+    }).format(new Date(props.account?.created_at ?? 0)),
+);
 
 const parsedNote = ref("");
-const parsedFields: Ref<{
+const parsedFields: Ref<
+    {
         name: string;
         value: string;
-}[]> = ref([]);
+    }[]
+> = ref([]);
 
-watch(skeleton, async () => {
+watch(
+    skeleton,
+    async () => {
         if (skeleton.value) return;
-    parsedNote.value = (await useParsedContent(
+        parsedNote.value = (
+            await useParsedContent(
                 props.account?.note ?? "",
                 props.account?.emojis ?? [],
                 [],
-    )).value;
+            )
+        ).value;
         parsedFields.value = await Promise.all(
             props.account?.fields.map(async (field) => ({
-            name: await (await useParsedContent(
+                name: await (
+                    await useParsedContent(
                         field.name,
                         props.account?.emojis ?? [],
-                []
+                        [],
-            )).value,
+                    )
-            value: await (await useParsedContent(
+                ).value,
+                value: await (
+                    await useParsedContent(
                         field.value,
                         props.account?.emojis ?? [],
-                []
+                        [],
-            )).value,
+                    )
+                ).value,
             })) ?? [],
         );
-}, {
+    },
+    {
         immediate: true,
-});
+    },
+);
 </script>

layouts/app.vue

@@ -30,9 +30,9 @@
                         </ButtonsSecondary>
                     </NuxtLink>
 
-                    <NuxtLink href="/about/apps" target="_blank">
+                    <NuxtLink href="/about/apps">
                         <ButtonsSecondary class="w-full">
-                            Mobile apps
+                            Mobile Apps
                         </ButtonsSecondary>
                     </NuxtLink>
                 </div>

pages/[username]/index.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script setup lang="ts">
-import type { Account } from '~/types/mastodon/account';
+import type { Account } from "~/types/mastodon/account";
 
 definePageMeta({
     layout: false,
@@ -56,7 +56,7 @@ onMounted(async () => {
             await loadNext();
         }
     });
-})
+});
 
 useServerSeoMeta({
     title: account.value?.display_name,

pages/about/apps.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="px-4 py-20 prose prose-invert mx-auto max-w-md">
+        <h2>Where is the mobile app?</h2>
+        <p>Lysand is compatible with the Mastodon API, meaning it can be used with any Mastodon-compatible client. This
+            includes the official Mastodon app, as well as many third-party clients.</p>
+        <h2>Recommended Clients</h2>
+        <ul class="w-full flex flex-col gap-3 mt-4 not-prose">
+            <li v-for="client of useConfig().RECOMMENDED_CLIENTS" :key="client.name" class="w-full">
+                <a :href="client.link" target="_blank"
+                    class="rounded-sm ring-2 ring-white/10 px-4 py-2 w-full flex flex-row gap-3 items-center">
+                    <img :src="client.icon" :alt="client.name" class="h-10 w-10" />
+                    <div class="flex flex-col justify-between items-start">
+                        <h2 class="text-gray-100 font-semibold">{{ client.name }}</h2>
+                        <span class="underline text-pink-700">{{ client.link }}</span>
+                    </div>
+                </a>
+            </li>
+        </ul>
+        <p>
+            Many other clients exist, but <strong class="font-bold">they have not been tested for
+                compatibility</strong>. Bug reports are nevertheless welcome.
+        </p>
+
+        <h2>Main Issues</h2>
+        <ul>
+            <li>File uploads are inconsistent and don't work a lot of the time</li>
+        </ul>
+
+        <p>
+            Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
+                target="_blank" class="underline text-pink-700">the issue tracker</a>.
+        </p>
+    </div>
+</template>
+
+<script lang="ts" setup>
+definePageMeta({
+    layout: "app",
+});
+</script>