mirror of
https://github.com/versia-pub/frontend.git
synced 2026-03-13 03:29:16 +01:00
feat: ✨ Make whole app client-only, add noscript fallback
This commit is contained in:
Jesse Wierzbinski
parent
961eccafa0
commit
2266dcd725
19 changed files with 597 additions and 604 deletions
23
components/errors/noscript.vue
Normal file
23
components/errors/noscript.vue
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<template>
|
||||
<div id="noscript-error"
|
||||
class="grid min-h-screen place-items-center px-6 py-24 sm:py-32 lg:px-8 fixed inset-0 z-[1000000] bg-dark-900">
|
||||
<GraphicsSquarePattern />
|
||||
<div class="prose prose-invert max-w-lg">
|
||||
<h1 class="mt-4 text-3xl font-bold tracking-tight text-gray-100 sm:text-5xl">JavaScript is disabled
|
||||
</h1>
|
||||
<p class="mt-6 text-base leading-7 text-gray-400">
|
||||
This website requires JavaScript to function properly. Please enable JavaScript in your browser
|
||||
settings.
|
||||
</p>
|
||||
<p class="mt-6 text-base leading-7 text-gray-400">
|
||||
If you are using a browser that does not support JavaScript, please consider using a modern browser
|
||||
like <a href="https://www.mozilla.org/firefox/new/" class="underline">Firefox</a> or <a
|
||||
href="https://www.google.com/chrome/" class="underline">Chrome</a>.
|
||||
</p>
|
||||
<p class="mt-6 text-base leading-7 text-gray-400">
|
||||
This application does not track you, collect user data, use cookies of any kind or send requests to
|
||||
servers outside of your account's instance.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
19
components/graphics/square-pattern.vue
Normal file
19
components/graphics/square-pattern.vue
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<template>
|
||||
<svg class="absolute inset-0 h-full w-full stroke-white/10 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]"
|
||||
aria-hidden="true">
|
||||
<defs>
|
||||
<pattern id="983e3e4c-de6d-4c3f-8d64-b9761d1534cc" width="200" height="200" x="50%" y="-1"
|
||||
patternUnits="userSpaceOnUse">
|
||||
<path d="M.5 200V.5H200" fill="none"></path>
|
||||
</pattern>
|
||||
</defs><svg x="50%" y="-1" class="overflow-visible fill-gray-800/20">
|
||||
<path d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
|
||||
stroke-width="0"></path>
|
||||
</svg>
|
||||
<rect width="100%" height="100%" stroke-width="0" fill="url(#983e3e4c-de6d-4c3f-8d64-b9761d1534cc)"></rect>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
</script>
|
||||
|
|
@ -1,26 +1,24 @@
|
|||
<template>
|
||||
<ClientOnly>
|
||||
<div v-if="identity" class="bg-dark-800 z-0 p-6 my-5 relative overflow-hidden rounded ring-1 ring-white/5">
|
||||
<div class="sm:flex sm:items-center sm:justify-between gap-3">
|
||||
<div class="sm:flex sm:space-x-5 grow">
|
||||
<AvatarsCentered :src="identity.account.avatar"
|
||||
class="mx-auto shrink-0 size-20 rounded overflow-hidden ring-1 ring-white/10"
|
||||
:alt="'Your avatar'" />
|
||||
<div
|
||||
class="mt-4 text-center flex flex-col justify-center sm:mt-0 sm:text-left bg-dark-800 py-2 px-4 rounded grow ring-1 ring-white/10">
|
||||
<p class="text-sm font-medium text-gray-300">Welcome back,</p>
|
||||
<p class="text-xl font-bold text-gray-50 sm:text-2xl line-clamp-1"
|
||||
v-html="useParsedContent(identity.account.display_name, []).value"></p>
|
||||
</div>
|
||||
<div v-if="identity" class="bg-dark-800 z-0 p-6 my-5 relative overflow-hidden rounded ring-1 ring-white/5">
|
||||
<div class="sm:flex sm:items-center sm:justify-between gap-3">
|
||||
<div class="sm:flex sm:space-x-5 grow">
|
||||
<AvatarsCentered :src="identity.account.avatar"
|
||||
class="mx-auto shrink-0 size-20 rounded overflow-hidden ring-1 ring-white/10"
|
||||
:alt="'Your avatar'" />
|
||||
<div
|
||||
class="mt-4 text-center flex flex-col justify-center sm:mt-0 sm:text-left bg-dark-800 py-2 px-4 rounded grow ring-1 ring-white/10">
|
||||
<p class="text-sm font-medium text-gray-300">Welcome back,</p>
|
||||
<p class="text-xl font-bold text-gray-50 sm:text-2xl line-clamp-1"
|
||||
v-html="useParsedContent(identity.account.display_name, []).value"></p>
|
||||
</div>
|
||||
<!-- <div class="mt-5 flex justify-center sm:mt-0">
|
||||
</div>
|
||||
<!-- <div class="mt-5 flex justify-center sm:mt-0">
|
||||
<ButtonsSecondary @click="useEvent('composer:open')">
|
||||
Compose
|
||||
</ButtonsSecondary>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<!-- 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="/logo.webp" class="size-20 animate-pulse" />
|
||||
<img src="/logo.webp" class="size-20 animate-pulse" role="presentation" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -4,104 +4,102 @@
|
|||
aria-label="Navigation" role="complementary">
|
||||
<NuxtLink href="/">
|
||||
<img crossorigin="anonymous" class="size-11 rounded ring-1 ring-white/10 hover:scale-105 duration-200"
|
||||
src="/logo.webp" alt="Lysand logo" />
|
||||
:src="instance?.thumbnail.url ?? '/logo.webp'" alt="Logo of your instance" />
|
||||
</NuxtLink>
|
||||
|
||||
<div class="flex flex-col gap-3">
|
||||
<h3 class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
|
||||
Timelines</h3>
|
||||
<ClientOnly>
|
||||
<NuxtLink v-for="timeline in visibleTimelines" :key="timeline.href" :to="timeline.href">
|
||||
<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">
|
||||
<iconify-icon :icon="timeline.icon" class="shrink-0 text-2xl" />
|
||||
<span class="pr-28 line-clamp-1">{{ timeline.name }}</span>
|
||||
</ButtonsBase>
|
||||
</NuxtLink>
|
||||
</ClientOnly>
|
||||
|
||||
<NuxtLink v-for="timeline in visibleTimelines" :key="timeline.href" :to="timeline.href">
|
||||
<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">
|
||||
<iconify-icon :icon="timeline.icon" class="shrink-0 text-2xl" />
|
||||
<span class="pr-28 line-clamp-1">{{ timeline.name }}</span>
|
||||
</ButtonsBase>
|
||||
</NuxtLink>
|
||||
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<ClientOnly>
|
||||
<SidebarsAccountPicker @sign-in="signIn().finally(() => loadingAuth = false)"
|
||||
@sign-out="id => signOut(id).finally(() => loadingAuth = false)" />
|
||||
<NuxtLink href="/register" v-if="!identity">
|
||||
<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">
|
||||
<iconify-icon icon="tabler:certificate" class="shrink-0 text-2xl" />
|
||||
<span class="pr-28 line-clamp-1">Register</span>
|
||||
</ButtonsBase>
|
||||
</NuxtLink>
|
||||
<h3 v-if="identity"
|
||||
class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
|
||||
Posts</h3>
|
||||
<ButtonsBase v-if="identity" @click="compose" title="Open composer (shortcut: n)"
|
||||
class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 bg-gradient-to-tr from-pink-300 via-purple-300 to-indigo-400 overflow-hidden h-12 w-full duration-200">
|
||||
<iconify-icon icon="tabler:writing" class="shrink-0 text-2xl" />
|
||||
<span class="pr-28 line-clamp-1">Compose</span>
|
||||
<kbd class="text-xs font-semibold rounded bg-dark-500 font-mono px-1 flex flex-row">
|
||||
<iconify-icon icon="tabler:keyboard" height="1rem" width="1rem" class="inline"
|
||||
aria-hidden="true" />
|
||||
<iconify-icon icon="tabler:letter-n-small" height="1rem" width="1rem" class="inline -mr-1"
|
||||
aria-hidden="true" />
|
||||
</kbd>
|
||||
|
||||
<SidebarsAccountPicker @sign-in="signIn().finally(() => loadingAuth = false)"
|
||||
@sign-out="id => signOut(id).finally(() => loadingAuth = false)" />
|
||||
<NuxtLink href="/register" v-if="!identity">
|
||||
<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">
|
||||
<iconify-icon icon="tabler:certificate" class="shrink-0 text-2xl" />
|
||||
<span class="pr-28 line-clamp-1">Register</span>
|
||||
</ButtonsBase>
|
||||
<ButtonsBase v-if="$pwa?.needRefresh" @click="$pwa?.updateServiceWorker()" title="Update service worker"
|
||||
class="flex flex-row text-left items-center justify-start gap-3 text-lg ring-2 ring-pink-600 overflow-hidden h-12 w-full duration-200">
|
||||
<iconify-icon icon="tabler:refresh" class="shrink-0 text-2xl" />
|
||||
<span class="pr-28 line-clamp-1">Update</span>
|
||||
</ButtonsBase>
|
||||
</ClientOnly>
|
||||
</NuxtLink>
|
||||
<h3 v-if="identity"
|
||||
class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
|
||||
Posts</h3>
|
||||
<ButtonsBase v-if="identity" @click="compose" title="Open composer (shortcut: n)"
|
||||
class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 bg-gradient-to-tr from-pink-300 via-purple-300 to-indigo-400 overflow-hidden h-12 w-full duration-200">
|
||||
<iconify-icon icon="tabler:writing" class="shrink-0 text-2xl" />
|
||||
<span class="pr-28 line-clamp-1">Compose</span>
|
||||
<kbd class="text-xs font-semibold rounded bg-dark-500 font-mono px-1 flex flex-row">
|
||||
<iconify-icon icon="tabler:keyboard" height="1rem" width="1rem" class="inline" aria-hidden="true" />
|
||||
<iconify-icon icon="tabler:letter-n-small" height="1rem" width="1rem" class="inline -mr-1"
|
||||
aria-hidden="true" />
|
||||
</kbd>
|
||||
</ButtonsBase>
|
||||
<ButtonsBase v-if="$pwa?.needRefresh" @click="$pwa?.updateServiceWorker()" title="Update service worker"
|
||||
class="flex flex-row text-left items-center justify-start gap-3 text-lg ring-2 ring-pink-600 overflow-hidden h-12 w-full duration-200">
|
||||
<iconify-icon icon="tabler:refresh" class="shrink-0 text-2xl" />
|
||||
<span class="pr-28 line-clamp-1">Update</span>
|
||||
</ButtonsBase>
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
<!-- 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">
|
||||
<ClientOnly>
|
||||
<DropdownsAdaptiveDropdown>
|
||||
<template #button>
|
||||
<button class="flex flex-col items-center justify-center p-2 rounded">
|
||||
<iconify-icon icon="tabler:home" class="text-2xl" />
|
||||
<span class="text-xs">Timelines</span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<template #items>
|
||||
<Menu.Item value="" v-for="timeline in visibleTimelines" :key="timeline.href">
|
||||
<NuxtLink :href="timeline.href">
|
||||
<ButtonsDropdownElement :icon="timeline.icon" class="w-full">
|
||||
{{ timeline.name }}
|
||||
</ButtonsDropdownElement>
|
||||
</NuxtLink>
|
||||
</Menu.Item>
|
||||
</template>
|
||||
</DropdownsAdaptiveDropdown>
|
||||
<NuxtLink href="/notifications" class="flex flex-col items-center justify-center p-2 rounded">
|
||||
<iconify-icon icon="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)">
|
||||
<iconify-icon icon="tabler:refresh" class="text-2xl" />
|
||||
<span class="text-xs">Update</span>
|
||||
</button>
|
||||
</ClientOnly>
|
||||
<SidebarsAccountPicker v-else @sign-in="signIn().finally(() => loadingAuth = false)"
|
||||
@sign-out="id => signOut(id).finally(() => loadingAuth = false)">
|
||||
<DropdownsAdaptiveDropdown>
|
||||
<template #button>
|
||||
<button class="flex flex-col items-center justify-center p-2 rounded">
|
||||
<iconify-icon icon="tabler:user" class="text-2xl" />
|
||||
<span class="text-xs">Account</span>
|
||||
<iconify-icon icon="tabler:home" class="text-2xl" />
|
||||
<span class="text-xs">Timelines</span>
|
||||
</button>
|
||||
</SidebarsAccountPicker>
|
||||
<button @click="compose" v-if="identity"
|
||||
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">
|
||||
<iconify-icon icon="tabler:writing" class="text-2xl" />
|
||||
<span class="text-xs">Compose</span>
|
||||
</template>
|
||||
|
||||
<template #items>
|
||||
<Menu.Item value="" v-for="timeline in visibleTimelines" :key="timeline.href">
|
||||
<NuxtLink :href="timeline.href">
|
||||
<ButtonsDropdownElement :icon="timeline.icon" class="w-full">
|
||||
{{ timeline.name }}
|
||||
</ButtonsDropdownElement>
|
||||
</NuxtLink>
|
||||
</Menu.Item>
|
||||
</template>
|
||||
</DropdownsAdaptiveDropdown>
|
||||
<NuxtLink href="/notifications" class="flex flex-col items-center justify-center p-2 rounded">
|
||||
<iconify-icon icon="tabler:bell" class="text-2xl" />
|
||||
<span class="text-xs">Notifications</span>
|
||||
</NuxtLink>
|
||||
<button v-if="$pwa?.needRefresh"
|
||||
class="flex flex-col items-center justify-center p-2 rounded ring-2 ring-pink-600"
|
||||
@click="$pwa?.updateServiceWorker(true)">
|
||||
<iconify-icon icon="tabler:refresh" class="text-2xl" />
|
||||
<span class="text-xs">Update</span>
|
||||
</button>
|
||||
|
||||
<SidebarsAccountPicker v-else @sign-in="signIn().finally(() => loadingAuth = false)"
|
||||
@sign-out="id => signOut(id).finally(() => loadingAuth = false)">
|
||||
<button class="flex flex-col items-center justify-center p-2 rounded">
|
||||
<iconify-icon icon="tabler:user" class="text-2xl" />
|
||||
<span class="text-xs">Account</span>
|
||||
</button>
|
||||
</ClientOnly>
|
||||
</SidebarsAccountPicker>
|
||||
<button @click="compose" v-if="identity"
|
||||
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">
|
||||
<iconify-icon icon="tabler:writing" class="text-2xl" />
|
||||
<span class="text-xs">Compose</span>
|
||||
</button>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
|
|
@ -145,6 +143,7 @@ const appData = useAppData();
|
|||
const identity = useCurrentIdentity();
|
||||
const identities = useIdentities();
|
||||
const client = useClient();
|
||||
const instance = useInstance();
|
||||
|
||||
const compose = () => {
|
||||
useEvent("composer:open");
|
||||
|
|
|
|||
|
|
@ -1,104 +1,100 @@
|
|||
<template>
|
||||
<ClientOnly>
|
||||
<div class="w-full ring-1 ring-inset ring-white/5 pb-10 bg-dark-800">
|
||||
<AvatarsCentered :src="account?.header" :alt="`${account?.acct}'s header image'`"
|
||||
class="w-full aspect-[8/3] border-b border-white/10 bg-dark-700 !rounded-none" />
|
||||
<div class="w-full ring-1 ring-inset ring-white/5 pb-10 bg-dark-800">
|
||||
<AvatarsCentered :src="account?.header" :alt="`${account?.acct}'s header image'`"
|
||||
class="w-full aspect-[8/3] border-b border-white/10 bg-dark-700 !rounded-none" />
|
||||
|
||||
<div class="flex items-start justify-between px-4 py-3">
|
||||
<AvatarsCentered :src="account?.avatar" :alt="`${account?.acct}'s avatar'`"
|
||||
class="h-32 w-32 -mt-[4.5rem] z-10 shrink-0 rounded ring-2 ring-dark-800" />
|
||||
<div class="flex items-start justify-between px-4 py-3">
|
||||
<AvatarsCentered :src="account?.avatar" :alt="`${account?.acct}'s avatar'`"
|
||||
class="h-32 w-32 -mt-[4.5rem] z-10 shrink-0 rounded ring-2 ring-dark-800" />
|
||||
|
||||
<ClientOnly>
|
||||
<ButtonsSecondary v-if="account && account?.id === identity?.account?.id">Edit Profile
|
||||
</ButtonsSecondary>
|
||||
<ButtonsSecondary :loading="isLoading" @click="follow()"
|
||||
v-if="account && account?.id !== identity?.account?.id && relationship && !relationship.following && !relationship.requested">
|
||||
<span>Follow</span>
|
||||
</ButtonsSecondary>
|
||||
<ButtonsSecondary :loading="isLoading" @click="unfollow()"
|
||||
v-if="account && account?.id !== identity?.account?.id && relationship && relationship.following">
|
||||
<span>Unfollow</span>
|
||||
</ButtonsSecondary>
|
||||
<ButtonsSecondary :loading="isLoading" :disabled="true"
|
||||
v-if="account && account?.id !== identity?.account?.id && relationship && !relationship.following && relationship.requested">
|
||||
<span>Requested</span>
|
||||
</ButtonsSecondary>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
<ButtonsSecondary v-if="account && account?.id === identity?.account?.id">Edit Profile
|
||||
</ButtonsSecondary>
|
||||
<ButtonsSecondary :loading="isLoading" @click="follow()"
|
||||
v-if="account && account?.id !== identity?.account?.id && relationship && !relationship.following && !relationship.requested">
|
||||
<span>Follow</span>
|
||||
</ButtonsSecondary>
|
||||
<ButtonsSecondary :loading="isLoading" @click="unfollow()"
|
||||
v-if="account && account?.id !== identity?.account?.id && relationship && relationship.following">
|
||||
<span>Unfollow</span>
|
||||
</ButtonsSecondary>
|
||||
<ButtonsSecondary :loading="isLoading" :disabled="true"
|
||||
v-if="account && account?.id !== identity?.account?.id && relationship && !relationship.following && relationship.requested">
|
||||
<span>Requested</span>
|
||||
</ButtonsSecondary>
|
||||
</div>
|
||||
|
||||
<div class="mt-2 px-4">
|
||||
<h2
|
||||
class="text-xl font-bold text-gray-100 tracking-tight bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">
|
||||
<Skeleton :enabled="skeleton" :min-width="200" :max-width="350" class="h-6">
|
||||
{{ account?.display_name }}
|
||||
<iconify-icon v-if="account?.locked" icon="tabler:lock" width="1.25rem" height="1.25rem"
|
||||
class="text-gray-400 cursor-pointer align-text-top"
|
||||
title="This account manually approves its followers" />
|
||||
</Skeleton>
|
||||
</h2>
|
||||
<span class="text-gray-300 block mt-2">
|
||||
<Skeleton :enabled="skeleton" :min-width="130" :max-width="250">@{{ account?.acct }}</Skeleton>
|
||||
</span>
|
||||
<div class="flex flex-row flex-wrap gap-4 mt-4" v-if="isDeveloper || visibleRoles.length > 0">
|
||||
<SocialElementsUsersBadge v-for="role of visibleRoles" :key="role.id" :name="role.name"
|
||||
:description="role.description" :img="role.icon" />
|
||||
<SocialElementsUsersBadge v-if="isDeveloper" name="Lysand Developer"
|
||||
description="This user is a Lysand developer." :verified="true" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 px-4">
|
||||
<Skeleton :enabled="true" v-if="skeleton" class="!h-6" :min-width="50" :max-width="100" width-unit="%"
|
||||
shape="rect" type="content">
|
||||
<div class="mt-2 px-4">
|
||||
<h2
|
||||
class="text-xl font-bold text-gray-100 tracking-tight bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">
|
||||
<Skeleton :enabled="skeleton" :min-width="200" :max-width="350" class="h-6">
|
||||
{{ account?.display_name }}
|
||||
<iconify-icon v-if="account?.locked" icon="tabler:lock" width="1.25rem" height="1.25rem"
|
||||
class="text-gray-400 cursor-pointer align-text-top"
|
||||
title="This account manually approves its followers" />
|
||||
</Skeleton>
|
||||
<div class="prose prose-invert" v-html="parsedNote" v-else></div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 flex items-center space-x-4 px-4">
|
||||
<div class="flex items-center space-x-1">
|
||||
<Skeleton :enabled="skeleton" :min-width="150" :max-width="150" shape="rect">
|
||||
<iconify-icon icon="tabler:calendar" width="1.25rem" height="1.25rem" class="text-gray-400" />
|
||||
<span class="text-gray-400">Created {{ formattedJoin }}</span>
|
||||
</Skeleton>
|
||||
</div>
|
||||
<div v-if="account?.bot" class="flex items-center space-x-1">
|
||||
<iconify-icon icon="tabler:robot" width="1.25rem" height="1.25rem" class="text-gray-400" />
|
||||
<span class="text-gray-400">Bot</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 flex items-center space-x-4 px-4">
|
||||
<div class="cursor-pointer hover:underline space-x-1">
|
||||
<Skeleton :enabled="skeleton" :min-width="100" :max-width="150" shape="rect">
|
||||
<span class="font-bold text-gray-200">{{ account?.statuses_count }}</span>
|
||||
<span class="text-gray-400">Posts</span>
|
||||
</Skeleton>
|
||||
</div>
|
||||
<div class="cursor-pointer hover:underline space-x-1">
|
||||
<Skeleton :enabled="skeleton" :min-width="100" :max-width="150" shape="rect">
|
||||
<span class="font-bold text-gray-200">{{ account?.following_count }}</span>
|
||||
<span class="text-gray-400">Following</span>
|
||||
</Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!skeleton && parsedFields.length > 0" class="mt-4 px-4 flex-col flex space-y-3">
|
||||
<div v-for="field of parsedFields" :key="field.name" class="flex flex-col gap-1">
|
||||
<span class="text-pink-500 font-semibold" v-html="field.name"></span>
|
||||
<span class="text-gray-200 prose prose-invert break-all" v-html="field.value"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="skeleton" class="mt-4 px-4 flex-col space-y-3">
|
||||
<div v-for="_ of 3" class="flex flex-col gap-1">
|
||||
<Skeleton :enabled="skeleton" :min-width="10" :max-width="100" width-unit="%" shape="rect">
|
||||
</Skeleton>
|
||||
<Skeleton :enabled="skeleton" :min-width="10" :max-width="100" width-unit="%" shape="rect">
|
||||
</Skeleton>
|
||||
</div>
|
||||
</h2>
|
||||
<span class="text-gray-300 block mt-2">
|
||||
<Skeleton :enabled="skeleton" :min-width="130" :max-width="250">@{{ account?.acct }}</Skeleton>
|
||||
</span>
|
||||
<div class="flex flex-row flex-wrap gap-4 mt-4" v-if="isDeveloper || visibleRoles.length > 0">
|
||||
<SocialElementsUsersBadge v-for="role of visibleRoles" :key="role.id" :name="role.name"
|
||||
:description="role.description" :img="role.icon" />
|
||||
<SocialElementsUsersBadge v-if="isDeveloper" name="Lysand Developer"
|
||||
description="This user is a Lysand developer." :verified="true" />
|
||||
</div>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
|
||||
<div class="mt-4 px-4">
|
||||
<Skeleton :enabled="true" v-if="skeleton" class="!h-6" :min-width="50" :max-width="100" width-unit="%"
|
||||
shape="rect" type="content">
|
||||
</Skeleton>
|
||||
<div class="prose prose-invert" v-html="parsedNote" v-else></div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 flex items-center space-x-4 px-4">
|
||||
<div class="flex items-center space-x-1">
|
||||
<Skeleton :enabled="skeleton" :min-width="150" :max-width="150" shape="rect">
|
||||
<iconify-icon icon="tabler:calendar" width="1.25rem" height="1.25rem" class="text-gray-400" />
|
||||
<span class="text-gray-400">Created {{ formattedJoin }}</span>
|
||||
</Skeleton>
|
||||
</div>
|
||||
<div v-if="account?.bot" class="flex items-center space-x-1">
|
||||
<iconify-icon icon="tabler:robot" width="1.25rem" height="1.25rem" class="text-gray-400" />
|
||||
<span class="text-gray-400">Bot</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 flex items-center space-x-4 px-4">
|
||||
<div class="cursor-pointer hover:underline space-x-1">
|
||||
<Skeleton :enabled="skeleton" :min-width="100" :max-width="150" shape="rect">
|
||||
<span class="font-bold text-gray-200">{{ account?.statuses_count }}</span>
|
||||
<span class="text-gray-400">Posts</span>
|
||||
</Skeleton>
|
||||
</div>
|
||||
<div class="cursor-pointer hover:underline space-x-1">
|
||||
<Skeleton :enabled="skeleton" :min-width="100" :max-width="150" shape="rect">
|
||||
<span class="font-bold text-gray-200">{{ account?.following_count }}</span>
|
||||
<span class="text-gray-400">Following</span>
|
||||
</Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!skeleton && parsedFields.length > 0" class="mt-4 px-4 flex-col flex space-y-3">
|
||||
<div v-for="field of parsedFields" :key="field.name" class="flex flex-col gap-1">
|
||||
<span class="text-pink-500 font-semibold" v-html="field.name"></span>
|
||||
<span class="text-gray-200 prose prose-invert break-all" v-html="field.value"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="skeleton" class="mt-4 px-4 flex-col space-y-3">
|
||||
<div v-for="_ of 3" class="flex flex-col gap-1">
|
||||
<Skeleton :enabled="skeleton" :min-width="10" :max-width="100" width-unit="%" shape="rect">
|
||||
</Skeleton>
|
||||
<Skeleton :enabled="skeleton" :min-width="10" :max-width="100" width-unit="%" shape="rect">
|
||||
</Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,12 @@
|
|||
<template>
|
||||
<ClientOnly>
|
||||
<SocialElementsNotificationsNotif v-for="notif of timeline" :key="notif.id" :notification="notif" />
|
||||
<span ref="skeleton"></span>
|
||||
<SocialElementsNotificationsNotif v-for="index of 5" v-if="!hasReachedEnd" :skeleton="true" />
|
||||
|
||||
<SocialElementsNotificationsNotif v-for="notif of timeline" :key="notif.id" :notification="notif" />
|
||||
<span ref="skeleton"></span>
|
||||
<SocialElementsNotificationsNotif v-for="index of 5" v-if="!hasReachedEnd" :skeleton="true" />
|
||||
|
||||
<div v-if="hasReachedEnd"
|
||||
class="text-center flex flex-row justify-center items-center py-10 text-gray-400 gap-3">
|
||||
<iconify-icon name="tabler:message-off" width="1.5rem" height="1.5rem" />
|
||||
<span>No more notifications, you've seen them all</span>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
<div v-if="hasReachedEnd" class="text-center flex flex-row justify-center items-center py-10 text-gray-400 gap-3">
|
||||
<iconify-icon name="tabler:message-off" width="1.5rem" height="1.5rem" />
|
||||
<span>No more notifications, you've seen them all</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -29,7 +25,7 @@ const skeleton = ref<HTMLSpanElement | null>(null);
|
|||
onMounted(() => {
|
||||
useIntersectionObserver(skeleton, async (entries) => {
|
||||
if (
|
||||
entries[0].isIntersecting &&
|
||||
entries[0]?.isIntersecting &&
|
||||
!hasReachedEnd.value &&
|
||||
!isLoading.value
|
||||
) {
|
||||
|
|
|
|||
|
|
@ -1,18 +1,15 @@
|
|||
<template>
|
||||
<ClientOnly>
|
||||
<TransitionGroup leave-active-class="ease-in duration-200" leave-from-class="scale-100 opacity-100"
|
||||
leave-to-class="opacity-0 scale-90">
|
||||
<SocialElementsNotesNote v-for="note of timeline" :key="note.id" :note="note" />
|
||||
</TransitionGroup>
|
||||
<span ref="skeleton"></span>
|
||||
<LazySocialElementsNotesNote v-for="index of 5" v-if="!hasReachedEnd" :skeleton="true" />
|
||||
<TransitionGroup leave-active-class="ease-in duration-200" leave-from-class="scale-100 opacity-100"
|
||||
leave-to-class="opacity-0 scale-90">
|
||||
<SocialElementsNotesNote v-for="note of timeline" :key="note.id" :note="note" />
|
||||
</TransitionGroup>
|
||||
<span ref="skeleton"></span>
|
||||
<LazySocialElementsNotesNote v-for="index of 5" v-if="!hasReachedEnd" :skeleton="true" />
|
||||
|
||||
<div v-if="hasReachedEnd"
|
||||
class="text-center flex flex-row justify-center items-center py-10 text-gray-400 gap-3">
|
||||
<iconify-icon icon="tabler:message-off" width="1.5rem" height="1.5rem" />
|
||||
<span>No more posts, you've seen them all</span>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
<div v-if="hasReachedEnd" class="text-center flex flex-row justify-center items-center py-10 text-gray-400 gap-3">
|
||||
<iconify-icon icon="tabler:message-off" width="1.5rem" height="1.5rem" />
|
||||
<span>No more posts, you've seen them all</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -32,7 +29,7 @@ const skeleton = ref<HTMLSpanElement | null>(null);
|
|||
onMounted(() => {
|
||||
useIntersectionObserver(skeleton, async (entries) => {
|
||||
if (
|
||||
entries[0].isIntersecting &&
|
||||
entries[0]?.isIntersecting &&
|
||||
!hasReachedEnd.value &&
|
||||
!isLoading.value
|
||||
) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue