From c29cae2955f6a52a24cdae30264dab672ba5b9a7 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Thu, 25 Apr 2024 20:10:44 -1000
Subject: [PATCH] build: :sparkles: Add explanations for which apps can be
 used, add link to registration page in sidebar

---
 components/sidebars/navigation.vue           | 11 ++-
 components/social-elements/users/Account.vue | 76 ++++++++++++--------
 layouts/app.vue                              |  4 +-
 pages/[username]/index.vue                   |  4 +-
 pages/about/apps.vue                         | 40 +++++++++++
 5 files changed, 98 insertions(+), 37 deletions(-)
 create mode 100644 pages/about/apps.vue

diff --git a/components/sidebars/navigation.vue b/components/sidebars/navigation.vue
index 3db4aa3..8f0aa78 100644
--- a/components/sidebars/navigation.vue
+++ b/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>
-                <ButtonsBase disabled
+            <NuxtLink href="/about/apps">
+                <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>
diff --git a/components/social-elements/users/Account.vue b/components/social-elements/users/Account.vue
index b5fa166..b2fc450 100644
--- a/components/social-elements/users/Account.vue
+++ b/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", {
-    month: "long",
-    year: "numeric",
-}).format(new Date(props.account?.created_at ?? 0)));
+const formattedJoin = computed(() =>
+    Intl.DateTimeFormat("en-US", {
+        month: "long",
+        year: "numeric",
+    }).format(new Date(props.account?.created_at ?? 0)),
+);
 
 const parsedNote = ref("");
-const parsedFields: Ref<{
-    name: string;
-    value: string;
-}[]> = ref([]);
+const parsedFields: Ref<
+    {
+        name: string;
+        value: string;
+    }[]
+> = ref([]);
 
-watch(skeleton, async () => {
-    if (skeleton.value) return;
-    parsedNote.value = (await useParsedContent(
-        props.account?.note ?? "",
-        props.account?.emojis ?? [],
-        [],
-    )).value;
-    parsedFields.value = await Promise.all(
-        props.account?.fields.map(async (field) => ({
-            name: await (await useParsedContent(
-                field.name,
+watch(
+    skeleton,
+    async () => {
+        if (skeleton.value) return;
+        parsedNote.value = (
+            await useParsedContent(
+                props.account?.note ?? "",
                 props.account?.emojis ?? [],
-                []
-            )).value,
-            value: await (await useParsedContent(
-                field.value,
-                props.account?.emojis ?? [],
-                []
-            )).value,
-        })) ?? [],
-    );
-}, {
-    immediate: true,
-});
+                [],
+            )
+        ).value;
+        parsedFields.value = await Promise.all(
+            props.account?.fields.map(async (field) => ({
+                name: await (
+                    await useParsedContent(
+                        field.name,
+                        props.account?.emojis ?? [],
+                        [],
+                    )
+                ).value,
+                value: await (
+                    await useParsedContent(
+                        field.value,
+                        props.account?.emojis ?? [],
+                        [],
+                    )
+                ).value,
+            })) ?? [],
+        );
+    },
+    {
+        immediate: true,
+    },
+);
 </script>
\ No newline at end of file
diff --git a/layouts/app.vue b/layouts/app.vue
index d4ad1e9..d4dbf2b 100644
--- a/layouts/app.vue
+++ b/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>
diff --git a/pages/[username]/index.vue b/pages/[username]/index.vue
index b88df52..e77af73 100644
--- a/pages/[username]/index.vue
+++ b/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,
diff --git a/pages/about/apps.vue b/pages/about/apps.vue
new file mode 100644
index 0000000..2d8a64c
--- /dev/null
+++ b/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>
\ No newline at end of file