From e622c1625ff97996a864cec101d5fd3fb5ff9d6c Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Sat, 11 May 2024 22:37:57 -1000
Subject: [PATCH] fix: :bug: Bugixes, add automatic GitHub Actions deployment

---
 .github/workflows/deploy.yml                  |  43 ++++++
 app.vue                                       |   1 +
 components/loading.vue                        |  32 ++++
 components/sidebars/navigation.vue            | 138 +++++++++---------
 components/social-elements/notes/header.vue   |   2 +-
 components/social-elements/notes/mention.vue  |   4 +-
 components/social-elements/notes/note.vue     |   6 +-
 .../social-elements/notifications/notif.vue   |   2 +-
 .../social-elements/users/SmallCard.vue       |   2 +-
 layouts/app.vue                               |   2 +-
 10 files changed, 156 insertions(+), 76 deletions(-)
 create mode 100644 .github/workflows/deploy.yml
 create mode 100644 components/loading.vue

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
new file mode 100644
index 0000000..12ad4a4
--- /dev/null
+++ b/.github/workflows/deploy.yml
@@ -0,0 +1,43 @@
+name: Deploy to GitHub Pages
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: oven-sh/setup-bun@v1
+
+      - name: Install dependencies
+        run: bun install
+
+      - name: Build
+        run: bun nuxt build --preset github_pages
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./.output/public
+
+  # Deployment job
+  deploy:
+    # Add a dependency to the build job
+    needs: build
+    # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
+    permissions:
+      pages: write # to deploy to Pages
+      id-token: write # to verify the deployment originates from an appropriate source
+    # Deploy to the github_pages environment
+    environment:
+      name: github_pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    # Specify runner + deployment step
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/app.vue b/app.vue
index dbc85be..dc2fbaa 100644
--- a/app.vue
+++ b/app.vue
@@ -1,5 +1,6 @@
 <template>
     <NuxtPwaAssets />
+    <Loading />
     <NuxtLayout>
         <NuxtPage />
     </NuxtLayout>
diff --git a/components/loading.vue b/components/loading.vue
new file mode 100644
index 0000000..894468b
--- /dev/null
+++ b/components/loading.vue
@@ -0,0 +1,32 @@
+<template>
+    <div v-if="loading" class="fixed inset-0 bg-black z-[500] flex items-center justify-center">
+        <!-- Progress bar stuck to top -->
+        <div class="fixed top-0 left-0 right-0 h-1.5 bg-pink-500" :style="{ width: `${progress}%` }"></div>
+        <div class="flex flex-col items-center justify-center gap-8">
+            <img src="https://cdn.lysand.org/logo.webp" class="size-20 animate-pulse" />
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+const loading = ref(true);
+
+const estimatedProgress = (duration: number, elapsed: number) => (2 / Math.PI * 100) * Math.atan(elapsed / duration * 100 / 50);
+
+const progress = ref(0);
+const timeAtStart = performance.now();
+const app = useNuxtApp();
+
+const duration = 3000;
+
+useIntervalFn(() => {
+    const elapsed = performance.now() - timeAtStart;
+    progress.value = estimatedProgress(duration, elapsed);
+}, 1000 / 60);
+
+app.hook("page:finish", async () => {
+    // Wait until page has loaded for at least 1 second
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    loading.value = false;
+});
+</script>
\ No newline at end of file
diff --git a/components/sidebars/navigation.vue b/components/sidebars/navigation.vue
index 03e319e..2ff44aa 100644
--- a/components/sidebars/navigation.vue
+++ b/components/sidebars/navigation.vue
@@ -1,8 +1,9 @@
 <template>
     <aside
         class="fixed h-dvh z-20 md:flex hidden flex-col p-4 bg-dark-800 gap-10 max-w-20 hover:max-w-72 duration-200 group">
-        <NuxtLink class="rounded w-11 h-11 ring-1 ring-white/10 hover:scale-105 duration-200" href="/">
-            <img crossorigin="anonymous" src="https://cdn.lysand.org/logo.webp" alt="Lysand logo" />
+        <NuxtLink href="/">
+            <img crossorigin="anonymous" class="size-11 rounded ring-1 ring-white/10 hover:scale-105 duration-200"
+                src="https://cdn.lysand.org/logo.webp" alt="Lysand logo" />
         </NuxtLink>
 
         <div class="flex flex-col gap-3">
@@ -64,74 +65,77 @@
     <!-- Mobile bottom navbar -->
     <nav
         class="fixed bottom-0 left-0 right-0 z-20 md:hidden flex justify-around p-2 *:shadow-xl bg-dark-900 ring-1 ring-white/10 text-gray-200">
-        <DropdownsAdaptiveDropdown>
-            <template #button>
-                <HeadlessMenuButton class="flex flex-col items-center justify-center p-2 rounded">
-                    <Icon name="tabler:home" class="text-2xl" />
-                    <span class="text-xs">Timelines</span>
-                </HeadlessMenuButton>
-            </template>
+        <ClientOnly>
+            <DropdownsAdaptiveDropdown>
+                <template #button>
+                    <HeadlessMenuButton class="flex flex-col items-center justify-center p-2 rounded">
+                        <Icon name="tabler:home" class="text-2xl" />
+                        <span class="text-xs">Timelines</span>
+                    </HeadlessMenuButton>
+                </template>
 
-            <template #items>
-                <ClientOnly>
-                    <HeadlessMenuItem v-for="timeline in visibleTimelines" :key="timeline.href" :href="timeline.href">
-                        <NuxtLink>
-                            <ButtonsDropdownElement :icon="timeline.icon" class="w-full">
-                                {{ timeline.name }}
+                <template #items>
+                    <ClientOnly>
+                        <HeadlessMenuItem v-for="timeline in visibleTimelines" :key="timeline.href"
+                            :href="timeline.href">
+                            <NuxtLink>
+                                <ButtonsDropdownElement :icon="timeline.icon" class="w-full">
+                                    {{ timeline.name }}
+                                </ButtonsDropdownElement>
+                            </NuxtLink>
+                        </HeadlessMenuItem>
+                    </ClientOnly>
+                </template>
+            </DropdownsAdaptiveDropdown>
+            <NuxtLink href="/notifications" class="flex flex-col items-center justify-center p-2 rounded">
+                <Icon name="tabler:bell" class="text-2xl" />
+                <span class="text-xs">Notifications</span>
+            </NuxtLink>
+            <ClientOnly v-if="$pwa?.needRefresh">
+                <button class="flex flex-col items-center justify-center p-2 rounded ring-2 ring-pink-600"
+                    @click="$pwa?.updateServiceWorker(true)">
+                    <Icon name="tabler:refresh" class="text-2xl" />
+                    <span class="text-xs">Update</span>
+                </button>
+            </ClientOnly>
+            <DropdownsAdaptiveDropdown v-else>
+                <template #button>
+                    <HeadlessMenuButton class="flex flex-col items-center justify-center p-2 rounded">
+                        <Icon name="tabler:user" class="text-2xl" />
+                        <span class="text-xs">Account</span>
+                    </HeadlessMenuButton>
+                </template>
+
+                <template #items>
+                    <ClientOnly>
+                        <HeadlessMenuItem v-if="tokenData">
+                            <ButtonsDropdownElement icon="tabler:logout" class="w-full"
+                                @click="signOut().finally(() => loadingAuth = false)" :loading="loadingAuth">
+                                Sign Out
                             </ButtonsDropdownElement>
-                        </NuxtLink>
-                    </HeadlessMenuItem>
-                </ClientOnly>
-            </template>
-        </DropdownsAdaptiveDropdown>
-        <NuxtLink href="/notifications" class="flex flex-col items-center justify-center p-2 rounded">
-            <Icon name="tabler:bell" class="text-2xl" />
-            <span class="text-xs">Notifications</span>
-        </NuxtLink>
-        <ClientOnly v-if="$pwa?.needRefresh">
-            <button class="flex flex-col items-center justify-center p-2 rounded ring-2 ring-pink-600"
-                @click="$pwa?.updateServiceWorker(true)">
-                <Icon name="tabler:refresh" class="text-2xl" />
-                <span class="text-xs">Update</span>
+                        </HeadlessMenuItem>
+                        <HeadlessMenuItem v-if="!tokenData">
+                            <ButtonsDropdownElement icon="tabler:login" class="w-full"
+                                @click="signIn().finally(() => loadingAuth = false)" :loading="loadingAuth">
+                                Sign In
+                            </ButtonsDropdownElement>
+                        </HeadlessMenuItem>
+                        <HeadlessMenuItem v-if="!tokenData">
+                            <NuxtLink href="/register">
+                                <ButtonsDropdownElement icon="tabler:certificate" class="w-full">
+                                    Register
+                                </ButtonsDropdownElement>
+                            </NuxtLink>
+                        </HeadlessMenuItem>
+                    </ClientOnly>
+                </template>
+            </DropdownsAdaptiveDropdown>
+            <button @click="compose" v-if="tokenData"
+                class="flex flex-col items-center justify-center p-2 rounded bg-gradient-to-tr from-pink-300/70 via-purple-300/70 to-indigo-400/70">
+                <Icon name="tabler:writing" class="text-2xl" />
+                <span class="text-xs">Compose</span>
             </button>
         </ClientOnly>
-        <DropdownsAdaptiveDropdown v-else>
-            <template #button>
-                <HeadlessMenuButton class="flex flex-col items-center justify-center p-2 rounded">
-                    <Icon name="tabler:user" class="text-2xl" />
-                    <span class="text-xs">Account</span>
-                </HeadlessMenuButton>
-            </template>
-
-            <template #items>
-                <ClientOnly>
-                    <HeadlessMenuItem v-if="tokenData">
-                        <ButtonsDropdownElement icon="tabler:logout" class="w-full"
-                            @click="signOut().finally(() => loadingAuth = false)" :loading="loadingAuth">
-                            Sign Out
-                        </ButtonsDropdownElement>
-                    </HeadlessMenuItem>
-                    <HeadlessMenuItem v-if="!tokenData">
-                        <ButtonsDropdownElement icon="tabler:login" class="w-full"
-                            @click="signIn().finally(() => loadingAuth = false)" :loading="loadingAuth">
-                            Sign In
-                        </ButtonsDropdownElement>
-                    </HeadlessMenuItem>
-                    <HeadlessMenuItem v-if="!tokenData">
-                        <NuxtLink href="/register">
-                            <ButtonsDropdownElement icon="tabler:certificate" class="w-full">
-                                Register
-                            </ButtonsDropdownElement>
-                        </NuxtLink>
-                    </HeadlessMenuItem>
-                </ClientOnly>
-            </template>
-        </DropdownsAdaptiveDropdown>
-        <button @click="compose" v-if="tokenData"
-            class="flex flex-col items-center justify-center p-2 rounded bg-gradient-to-tr from-pink-300/70 via-purple-300/70 to-indigo-400/70">
-            <Icon name="tabler:writing" class="text-2xl" />
-            <span class="text-xs">Compose</span>
-        </button>
     </nav>
 </template>
 
@@ -227,7 +231,7 @@ const signOut = async () => {
             tokenData.value.access_token,
             tokenData.value.access_token,
         )
-        .catch(() => {});
+        .catch(() => { });
 
     tokenData.value = null;
     me.value = null;
diff --git a/components/social-elements/notes/header.vue b/components/social-elements/notes/header.vue
index 4a25c37..b399fc3 100644
--- a/components/social-elements/notes/header.vue
+++ b/components/social-elements/notes/header.vue
@@ -2,7 +2,7 @@
     <div v-if="small" class="flex flex-row">
         <NuxtLink :href="accountUrl" class="shrink-0">
             <AvatarsCentered :url="note?.account.avatar" :alt="`${note?.account.acct}'s avatar`"
-                class="h-6 w-6 rounded ring-1 ring-white/5" />
+                class="size-6 rounded ring-1 ring-white/5" />
         </NuxtLink>
         <div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden">
             <div class="flex flex-row text-sm items-center justify-between w-full">
diff --git a/components/social-elements/notes/mention.vue b/components/social-elements/notes/mention.vue
index ed0bf20..4133ec2 100644
--- a/components/social-elements/notes/mention.vue
+++ b/components/social-elements/notes/mention.vue
@@ -1,8 +1,8 @@
 <template>
     <a :href="`/@${account.acct}`"
         class="shrink break-all rounded bg-pink-700/80 text-pink-200 px-2 py-1 not-prose font-semibold cursor-pointer [&:not(:last-child)]:mr-1 duration-200 hover:bg-pink-600/30">
-        <img class="h-[1em] w-[1em] rounded ring-1 ring-white/5 inline align-middle mb-1 mr-1"
-            :src="account.avatar" :alt="`${account.acct}'s avatar'`" />
+        <img class="size-[1em] rounded ring-1 ring-white/5 !inline align-middle mb-1 mr-1" :src="account.avatar"
+            :alt="`${account.acct}'s avatar'`" />
         {{ account.display_name }}
     </a>
 </template>
diff --git a/components/social-elements/notes/note.vue b/components/social-elements/notes/note.vue
index 5337a9d..f0cd301 100644
--- a/components/social-elements/notes/note.vue
+++ b/components/social-elements/notes/note.vue
@@ -6,9 +6,9 @@
         </div>
         <div v-if="reblog" class="mb-4 flex flex-row gap-2 items-center text-pink-500">
             <Skeleton :enabled="!loaded" shape="rect" class="!h-6" :min-width="40" :max-width="100" width-unit="%">
-                <Icon name="tabler:repeat" class="h-6 w-6" aria-hidden="true" />
-                <img v-if="reblog.avatar" :src="reblog.avatar" :alt="`${reblog.acct}'s avatar'`"
-                    class="h-6 w-6 rounded shrink-0 ring-1 ring-white/10" />
+                <Icon name="tabler:repeat" class="size-6" aria-hidden="true" />
+                <AvatarsCentered v-if="reblog.avatar" :src="reblog.avatar" :alt="`${reblog.acct}'s avatar'`"
+                    class="size-6 rounded shrink-0 ring-1 ring-white/10" />
                 <span><strong v-html="reblogDisplayName"></strong> reblogged</span>
             </Skeleton>
         </div>
diff --git a/components/social-elements/notifications/notif.vue b/components/social-elements/notifications/notif.vue
index e60db4d..bdd8671 100644
--- a/components/social-elements/notifications/notif.vue
+++ b/components/social-elements/notifications/notif.vue
@@ -4,7 +4,7 @@
             <Skeleton :enabled="!notification" shape="rect" class="!h-6" :min-width="40" :max-width="100"
                 width-unit="%">
                 <Icon :name="icon" class="h-6 w-6 text-gray-200" aria-hidden="true" />
-                <img v-if="notification?.account?.avatar" :src="notification?.account.avatar"
+                <AvatarsCentered v-if="notification?.account?.avatar" :src="notification?.account.avatar"
                     :alt="`${notification?.account.acct}'s avatar'`"
                     class="h-6 w-6 shrink-0 rounded ring-1 ring-white/10" />
                 <span class="text-gray-200"><strong v-html="accountName"></strong> {{ text
diff --git a/components/social-elements/users/SmallCard.vue b/components/social-elements/users/SmallCard.vue
index 0cff66f..99f9a06 100644
--- a/components/social-elements/users/SmallCard.vue
+++ b/components/social-elements/users/SmallCard.vue
@@ -2,7 +2,7 @@
     <NuxtLink :href="accountUrl" class="flex flex-row">
         <Skeleton :enabled="!account" shape="rect" class="!h-12 w-12">
             <div class="shrink-0">
-                <img class="h-12 w-12 rounded ring-1 ring-white/5" :src="account?.avatar"
+                <AvatarsCentered class="h-12 w-12 rounded ring-1 ring-white/5" :src="account?.avatar"
                     :alt="`${account?.acct}'s avatar'`" />
             </div>
         </Skeleton>
diff --git a/layouts/app.vue b/layouts/app.vue
index 76db3ab..df0ccf3 100644
--- a/layouts/app.vue
+++ b/layouts/app.vue
@@ -9,7 +9,7 @@
                 <LazySidebarsCollapsibleAside v-if="width > 1280 && tokenData" direction="right"
                     class="max-w-md max-h-dvh overflow-y-auto w-full hidden absolute inset-y-0 xl:flex">
                     <LazyTimelinesTimelineScroller>
-                        <LazyTimelinesLocal />
+                        <LazyTimelinesNotifications />
                     </LazyTimelinesTimelineScroller>
                     <!-- <div class="mt-auto prose prose-invert prose-sm flex flex-col gap-4 px-10 pb-10" v-if="!tokenData">
                         <div class="text-center">