versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2025-12-06 16:38:20 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: ⚡ Ditch nuxt-icon in favour of iconify's native WebComponent

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-05-11 23:04:00 -10:00
parent e622c1625f
commit 52c1f1c57f
No known key found for this signature in database
20 changed files with 146 additions and 136 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app.vue
View file

@ -8,6 +8,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { convert } from "html-to-text"; import { convert } from "html-to-text";
import "iconify-icon";
// Use SSR-safe IDs for Headless UI // Use SSR-safe IDs for Headless UI
provideHeadlessUseId(() => useId()); provideHeadlessUseId(() => useId());

BIN
bun.lockb
View file

Binary file not shown.

4
components/buttons/DropdownElement.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<ButtonsBase <ButtonsBase
class="bg-white/10 hover:bg-white/20 !text-left flex flex-row gap-x-3 !rounded-none !ring-0 !p-4 sm:!p-3"> class="bg-white/10 hover:bg-white/20 !text-left flex flex-row gap-x-3 !rounded-none !ring-0 !p-4 sm:!p-3">
<Icon :name="icon" class="h-5 w-5 text-gray-200" aria-hidden="true" /> <iconify-icon :icon="icon" width="1.25rem" height="1.25rem" class="text-gray-200" aria-hidden="true" />
<slot /> <slot />
</ButtonsBase> </ButtonsBase>
</template> </template>
@ -9,7 +9,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { ButtonHTMLAttributes } from "vue"; import type { ButtonHTMLAttributes } from "vue";
interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {} interface Props extends /* @vue-ignore */ ButtonHTMLAttributes { }
defineProps< defineProps<
Props & { Props & {

4
components/buttons/base.vue
View file

@ -2,7 +2,7 @@
<button v-bind="$props" type="button" :disabled="loading" <button v-bind="$props" type="button" :disabled="loading"
:class="['rounded-md duration-200 relative hover:shadow disabled:opacity-70 content-none disabled:cursor-not-allowed px-3 py-2 text-sm font-semibold text-white shadow-sm', loading && '[&>*]:invisible']"> :class="['rounded-md duration-200 relative hover:shadow disabled:opacity-70 content-none disabled:cursor-not-allowed px-3 py-2 text-sm font-semibold text-white shadow-sm', loading && '[&>*]:invisible']">
<div v-if="loading" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 !visible"> <div v-if="loading" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 !visible">
<Icon name="tabler:loader-2" class="animate-spin w-5 h-5" /> <iconify-icon icon="tabler:loader-2" height="1.25rem" width="1.25rem" class="animate-spin" />
</div> </div>
<slot /> <slot />
</button> </button>
@ -11,7 +11,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { ButtonHTMLAttributes } from "vue"; import type { ButtonHTMLAttributes } from "vue";
interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {} interface Props extends /* @vue-ignore */ ButtonHTMLAttributes { }
defineProps< defineProps<
Props & { Props & {

19
components/composer/composer.vue
View file

@ -3,11 +3,13 @@
<div class="py-2 relative"> <div class="py-2 relative">
<div v-if="respondingTo" class="mb-4"> <div v-if="respondingTo" class="mb-4">
<span v-if="respondingType === 'reply'" class="text-gray-400 uppercase text-xs font-semibold"> <span v-if="respondingType === 'reply'" class="text-gray-400 uppercase text-xs font-semibold">
<Icon name="tabler:arrow-back-up" class="h-4 w-4 text-gray-400 mb-0.5" aria-hidden="true" /> <iconify-icon width="1rem" height="1rem" icon="tabler:arrow-back-up" class="text-gray-400 mb-0.5"
aria-hidden="true" />
Replying to Replying to
</span> </span>
<span v-else-if="respondingType === 'quote'" class="text-gray-400 uppercase text-xs font-semibold"> <span v-else-if="respondingType === 'quote'" class="text-gray-400 uppercase text-xs font-semibold">
<Icon name="tabler:quote" class="h-4 w-4 text-gray-400" aria-hidden="true" /> <iconify-icon width="1rem" height="1rem" icon="tabler:quote" class="text-gray-400"
aria-hidden="true" />
Quoting Quoting
</span> </span>
<OverlayScrollbarsComponent :defer="true" class="mt-2 max-h-72 overflow-y-auto"> <OverlayScrollbarsComponent :defer="true" class="mt-2 max-h-72 overflow-y-auto">
@ -28,22 +30,23 @@
</div> </div>
<div class="flex flex-row gap-1 border-white/20"> <div class="flex flex-row gap-1 border-white/20">
<ComposerButton title="Mention someone"> <ComposerButton title="Mention someone">
<Icon name="tabler:at" class="size-6" aria-hidden="true" /> <iconify-icon height="1.5rem" width="1.5rem" icon="tabler:at" aria-hidden="true" />
</ComposerButton> </ComposerButton>
<ComposerButton title="Toggle Markdown" @click="markdown = !markdown" :toggled="markdown"> <ComposerButton title="Toggle Markdown" @click="markdown = !markdown" :toggled="markdown">
<Icon :name="markdown ? 'tabler:markdown' : 'tabler:markdown-off'" class="size-6" aria-hidden="true" /> <iconify-icon width="1.25rem" height="1.25rem"
:icon="markdown ? 'tabler:markdown' : 'tabler:markdown-off'" aria-hidden="true" />
</ComposerButton> </ComposerButton>
<ComposerButton title="Use a custom emoji"> <ComposerButton title="Use a custom emoji">
<Icon name="tabler:mood-smile" class="size-6" aria-hidden="true" /> <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:mood-smile" aria-hidden="true" />
</ComposerButton> </ComposerButton>
<ComposerButton title="Add media"> <ComposerButton title="Add media">
<Icon name="tabler:photo-up" class="size-6" aria-hidden="true" /> <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:photo-up" aria-hidden="true" />
</ComposerButton> </ComposerButton>
<ComposerButton title="Add a file"> <ComposerButton title="Add a file">
<Icon name="tabler:file-upload" class="size-6" aria-hidden="true" /> <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:file-upload" aria-hidden="true" />
</ComposerButton> </ComposerButton>
<ComposerButton title="Add content warning" @click="cw = cw === null ? '' : null" :toggled="cw !== null"> <ComposerButton title="Add content warning" @click="cw = cw === null ? '' : null" :toggled="cw !== null">
<Icon name="tabler:rating-18-plus" class="size-6" aria-hidden="true" /> <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:rating-18-plus" aria-hidden="true" />
</ComposerButton> </ComposerButton>
<ButtonsPrimary :loading="submitting" @click="send" class="ml-auto rounded-full"> <ButtonsPrimary :loading="submitting" @click="send" class="ml-auto rounded-full">
<span>Send!</span> <span>Send!</span>

4
components/headers/navbar.vue
View file

@ -23,7 +23,7 @@
class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-200" class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-200"
@click="mobileMenuOpen = true"> @click="mobileMenuOpen = true">
<span class="sr-only">Open main menu</span> <span class="sr-only">Open main menu</span>
<Icon name="tabler:menu-2" class="h-6 w-6" aria-hidden="true" /> <iconify-icon icon="tabler:menu-2" width="1.5rem" height="1.5rem" aria-hidden="true" />
</button> </button>
</div> </div>
<div class="hidden lg:flex lg:gap-x-12"> <div class="hidden lg:flex lg:gap-x-12">
@ -45,7 +45,7 @@
</NuxtLink> </NuxtLink>
<button type="button" class="-m-2.5 rounded-md p-2.5 text-gray-200" @click="mobileMenuOpen = false"> <button type="button" class="-m-2.5 rounded-md p-2.5 text-gray-200" @click="mobileMenuOpen = false">
<span class="sr-only">Close menu</span> <span class="sr-only">Close menu</span>
<Icon name="tabler:x" class="h-6 w-6" aria-hidden="true" /> <iconify-icon icon="tabler:x" width="1.5rem" height="1.5rem" aria-hidden="true" />
</button> </button>
</div> </div>
<div class="mt-6 flow-root"> <div class="mt-6 flow-root">

2
components/sidebars/collapsible-aside.vue
View file

@ -7,7 +7,7 @@
</OverlayScrollbarsComponent> </OverlayScrollbarsComponent>
<button @click="open = !open" <button @click="open = !open"
class="h-full bg-dark-700 hover:bg-dark-400 hover:cursor-pointer duration-200 py-4 px-0.5 flex items-center justify-center w-4 shrink-0"> class="h-full bg-dark-700 hover:bg-dark-400 hover:cursor-pointer duration-200 py-4 px-0.5 flex items-center justify-center w-4 shrink-0">
<Icon name="tabler:chevron-right" <iconify-icon icon="tabler:chevron-right"
:class="['text-gray-200 duration-200', direction === 'left' ? open ? 'rotate-180' : 'rotate-0' : open ? 'rotate-0' : 'rotate-180']" :class="['text-gray-200 duration-200', direction === 'left' ? open ? 'rotate-180' : 'rotate-0' : open ? 'rotate-0' : 'rotate-180']"
aria-hidden="true" /> aria-hidden="true" />
</button> </button>

28
components/sidebars/navigation.vue
View file

@ -13,7 +13,7 @@
<NuxtLink v-for="timeline in visibleTimelines" :key="timeline.href" :to="timeline.href"> <NuxtLink v-for="timeline in visibleTimelines" :key="timeline.href" :to="timeline.href">
<ButtonsBase <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"> 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="timeline.icon" class="shrink-0 text-2xl" /> <iconify-icon :icon="timeline.icon" class="shrink-0 text-2xl" />
<span class="pr-28 line-clamp-1">{{ timeline.name }}</span> <span class="pr-28 line-clamp-1">{{ timeline.name }}</span>
</ButtonsBase> </ButtonsBase>
</NuxtLink> </NuxtLink>
@ -27,18 +27,18 @@
<ButtonsBase v-if="tokenData" @click="signOut().finally(() => loadingAuth = false)" <ButtonsBase v-if="tokenData" @click="signOut().finally(() => loadingAuth = false)"
:loading="loadingAuth" :loading="loadingAuth"
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"> 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:logout" class="shrink-0 text-2xl" /> <iconify-icon icon="tabler:logout" class="shrink-0 text-2xl" />
<span class="pr-28 line-clamp-1">Sign Out</span> <span class="pr-28 line-clamp-1">Sign Out</span>
</ButtonsBase> </ButtonsBase>
<ButtonsBase v-else @click="signIn().finally(() => loadingAuth = false)" :loading="loadingAuth" <ButtonsBase v-else @click="signIn().finally(() => loadingAuth = false)" :loading="loadingAuth"
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"> 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" /> <iconify-icon icon="tabler:login" class="shrink-0 text-2xl" />
<span class="pr-28 line-clamp-1">Sign In</span> <span class="pr-28 line-clamp-1">Sign In</span>
</ButtonsBase> </ButtonsBase>
<NuxtLink href="/register" v-if="!tokenData"> <NuxtLink href="/register" v-if="!tokenData">
<ButtonsBase <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"> 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" /> <iconify-icon icon="tabler:certificate" class="shrink-0 text-2xl" />
<span class="pr-28 line-clamp-1">Register</span> <span class="pr-28 line-clamp-1">Register</span>
</ButtonsBase> </ButtonsBase>
</NuxtLink> </NuxtLink>
@ -47,16 +47,18 @@
Posts</h3> Posts</h3>
<ButtonsBase v-if="tokenData" @click="compose" title="Open composer (shortcut: n)" <ButtonsBase v-if="tokenData" @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"> 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">
<Icon name="tabler:writing" class="shrink-0 text-2xl" /> <iconify-icon icon="tabler:writing" class="shrink-0 text-2xl" />
<span class="pr-28 line-clamp-1">Compose</span> <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"> <kbd class="text-xs font-semibold rounded bg-dark-500 font-mono px-1 flex flex-row">
<Icon name="tabler:keyboard" class="size-4 inline" aria-hidden="true" /> <iconify-icon icon="tabler:keyboard" height="1rem" width="1rem" class="inline"
<Icon name="tabler:letter-n-small" class="size-4 inline -mr-1" aria-hidden="true" /> aria-hidden="true" />
<iconify-icon icon="tabler:letter-n-small" height="1rem" width="1rem" class="inline -mr-1"
aria-hidden="true" />
</kbd> </kbd>
</ButtonsBase> </ButtonsBase>
<ButtonsBase v-if="$pwa?.needRefresh" @click="$pwa?.updateServiceWorker()" title="Update service worker" <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"> 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">
<Icon name="tabler:refresh" class="shrink-0 text-2xl" /> <iconify-icon icon="tabler:refresh" class="shrink-0 text-2xl" />
<span class="pr-28 line-clamp-1">Update</span> <span class="pr-28 line-clamp-1">Update</span>
</ButtonsBase> </ButtonsBase>
</ClientOnly> </ClientOnly>
@ -69,7 +71,7 @@
<DropdownsAdaptiveDropdown> <DropdownsAdaptiveDropdown>
<template #button> <template #button>
<HeadlessMenuButton class="flex flex-col items-center justify-center p-2 rounded"> <HeadlessMenuButton class="flex flex-col items-center justify-center p-2 rounded">
<Icon name="tabler:home" class="text-2xl" /> <iconify-icon icon="tabler:home" class="text-2xl" />
<span class="text-xs">Timelines</span> <span class="text-xs">Timelines</span>
</HeadlessMenuButton> </HeadlessMenuButton>
</template> </template>
@ -88,20 +90,20 @@
</template> </template>
</DropdownsAdaptiveDropdown> </DropdownsAdaptiveDropdown>
<NuxtLink href="/notifications" class="flex flex-col items-center justify-center p-2 rounded"> <NuxtLink href="/notifications" class="flex flex-col items-center justify-center p-2 rounded">
<Icon name="tabler:bell" class="text-2xl" /> <iconify-icon icon="tabler:bell" class="text-2xl" />
<span class="text-xs">Notifications</span> <span class="text-xs">Notifications</span>
</NuxtLink> </NuxtLink>
<ClientOnly v-if="$pwa?.needRefresh"> <ClientOnly v-if="$pwa?.needRefresh">
<button class="flex flex-col items-center justify-center p-2 rounded ring-2 ring-pink-600" <button class="flex flex-col items-center justify-center p-2 rounded ring-2 ring-pink-600"
@click="$pwa?.updateServiceWorker(true)"> @click="$pwa?.updateServiceWorker(true)">
<Icon name="tabler:refresh" class="text-2xl" /> <iconify-icon icon="tabler:refresh" class="text-2xl" />
<span class="text-xs">Update</span> <span class="text-xs">Update</span>
</button> </button>
</ClientOnly> </ClientOnly>
<DropdownsAdaptiveDropdown v-else> <DropdownsAdaptiveDropdown v-else>
<template #button> <template #button>
<HeadlessMenuButton class="flex flex-col items-center justify-center p-2 rounded"> <HeadlessMenuButton class="flex flex-col items-center justify-center p-2 rounded">
<Icon name="tabler:user" class="text-2xl" /> <iconify-icon icon="tabler:user" class="text-2xl" />
<span class="text-xs">Account</span> <span class="text-xs">Account</span>
</HeadlessMenuButton> </HeadlessMenuButton>
</template> </template>
@ -132,7 +134,7 @@
</DropdownsAdaptiveDropdown> </DropdownsAdaptiveDropdown>
<button @click="compose" v-if="tokenData" <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"> 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" /> <iconify-icon icon="tabler:writing" class="text-2xl" />
<span class="text-xs">Compose</span> <span class="text-xs">Compose</span>
</button> </button>
</ClientOnly> </ClientOnly>

6
components/social-elements/notes/attachment.vue
View file

@ -21,11 +21,11 @@
@click="lightbox = false"> @click="lightbox = false">
<div class="w-full absolute inset-x-0 top-0 p-10 shrink text-gray-400 flex flex-row gap-3"> <div class="w-full absolute inset-x-0 top-0 p-10 shrink text-gray-400 flex flex-row gap-3">
<a @click.stop :href="attachment.url" target="_blank" download class="ml-auto"> <a @click.stop :href="attachment.url" target="_blank" download class="ml-auto">
<Icon name="tabler:download" class="w-6 h-6" /> <iconify-icon icon="tabler:download" width="1.5rem" height="1.5rem" />
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
</a> </a>
<button @click.stop="lightbox = false" class=""> <button @click.stop="lightbox = false">
<Icon name="tabler:x" class="w-6 h-6" /> <iconify-icon icon="tabler:x" width="1.5rem" height="1.5rem" />
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
</button> </button>
</div> </div>

6
components/social-elements/notes/header.vue
View file

@ -48,11 +48,13 @@
}}</span> }}</span>
<span @click="copyAccount" v-if="!hasCopied" <span @click="copyAccount" v-if="!hasCopied"
class="hidden select-none group-hover:flex cursor-pointer items-center gap-x-1"> class="hidden select-none group-hover:flex cursor-pointer items-center gap-x-1">
<Icon name="tabler:clipboard" class="h-4 w-4 text-gray-200" aria-hidden="true" /> <iconify-icon icon="tabler:clipboard" height="1rem" width="1rem" class="text-gray-200"
aria-hidden="true" />
Click to copy Click to copy
</span> </span>
<span v-else class="hidden group-hover:flex select-none items-center gap-x-1"> <span v-else class="hidden group-hover:flex select-none items-center gap-x-1">
<Icon name="tabler:check" class="h-4 w-4 text-green-500" aria-hidden="true" /> <iconify-icon icon="tabler:check" height="1rem" width="1rem" class="text-green-500"
aria-hidden="true" />
Copied! Copied!
</span> </span>
</Skeleton> </Skeleton>

11
components/social-elements/notes/note-content.vue
View file

@ -1,21 +1,18 @@
<template> <template>
<div v-if="!collapsed"> <div v-if="!collapsed" class="mt-6">
<div class="mt-6 block relative">
<Skeleton :enabled="!props.note || !loaded" :min-width="50" :max-width="100" width-unit="%" shape="rect" <Skeleton :enabled="!props.note || !loaded" :min-width="50" :max-width="100" width-unit="%" shape="rect"
type="content"> type="content">
<div v-if="content" <div v-if="content"
:class="['prose prose-invert duration-200 !max-w-full break-words prose-a:no-underline', $style.content]" :class="['prose block relative prose-invert duration-200 !max-w-full break-words prose-a:no-underline', $style.content]"
v-html="content"> v-html="content">
</div> </div>
</Skeleton> </Skeleton>
</div>
<div v-if="note && note.media_attachments.length > 0" class="[&:not(:first-child)]:mt-6"> <div v-if="note && note.media_attachments.length > 0" class="[&:not(:first-child)]:mt-6">
<SocialElementsNotesAttachment v-for="attachment of note.media_attachments" :key="attachment.id" <SocialElementsNotesAttachment v-for="attachment of note.media_attachments" :key="attachment.id"
:attachment="attachment" /> :attachment="attachment" />
</div> </div>
<div v-if="isQuote && note?.reblog" class="mt-4"> <LazySocialElementsNotesNote v-if="isQuote && note?.reblog" :note="note?.reblog" :small="true"
<LazySocialElementsNotesNote :note="note?.reblog" :small="true" /> class="mt-4 !rounded" />
</div>
</div> </div>
<div v-else <div v-else
class="rounded text-center ring-1 !max-w-full ring-white/10 h-52 mt-6 prose prose-invert p-4 flex flex-col justify-center items-center"> class="rounded text-center ring-1 !max-w-full ring-white/10 h-52 mt-6 prose prose-invert p-4 flex flex-col justify-center items-center">

29
components/social-elements/notes/note.vue
View file

@ -6,7 +6,7 @@
</div> </div>
<div v-if="reblog" class="mb-4 flex flex-row gap-2 items-center text-pink-500"> <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="%"> <Skeleton :enabled="!loaded" shape="rect" class="!h-6" :min-width="40" :max-width="100" width-unit="%">
<Icon name="tabler:repeat" class="size-6" aria-hidden="true" /> <iconify-icon width="1.5rem" height="1.5rem" icon="tabler:repeat" class="size-6" aria-hidden="true" />
<AvatarsCentered v-if="reblog.avatar" :src="reblog.avatar" :alt="`${reblog.acct}'s avatar'`" <AvatarsCentered v-if="reblog.avatar" :src="reblog.avatar" :alt="`${reblog.acct}'s avatar'`"
class="size-6 rounded shrink-0 ring-1 ring-white/10" /> class="size-6 rounded shrink-0 ring-1 ring-white/10" />
<span><strong v-html="reblogDisplayName"></strong> reblogged</span> <span><strong v-html="reblogDisplayName"></strong> reblogged</span>
@ -20,33 +20,34 @@
<div v-if="showInteractions" <div v-if="showInteractions"
class="mt-6 flex flex-row items-stretch disabled:*:opacity-70 [&>button]:max-w-28 disabled:*:cursor-not-allowed relative justify-around text-sm h-10 hover:enabled:[&>button]:bg-dark-800 [&>button]:duration-200 [&>button]:rounded [&>button]:flex [&>button]:flex-1 [&>button]:flex-row [&>button]:items-center [&>button]:justify-center"> class="mt-6 flex flex-row items-stretch disabled:*:opacity-70 [&>button]:max-w-28 disabled:*:cursor-not-allowed relative justify-around text-sm h-10 hover:enabled:[&>button]:bg-dark-800 [&>button]:duration-200 [&>button]:rounded [&>button]:flex [&>button]:flex-1 [&>button]:flex-row [&>button]:items-center [&>button]:justify-center">
<button class="group" @click="note && useEvent('note:reply', note)" :disabled="!isSignedIn"> <button class="group" @click="note && useEvent('note:reply', note)" :disabled="!isSignedIn">
<Icon name="tabler:arrow-back-up" <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:arrow-back-up"
class="h-5 w-5 text-gray-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" /> class="text-gray-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note?.replies_count) }}</span> <span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note?.replies_count) }}</span>
</button> </button>
<button class="group" :disabled="!isSignedIn"> <button class="group" :disabled="!isSignedIn">
<Icon name="tabler:heart" v-if="!note?.favourited" <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:heart" v-if="!note?.favourited"
class="h-5 w-5 text-gray-200 group-hover:group-enabled:text-pink-600" aria-hidden="true" /> class="size-5 text-gray-200 group-hover:group-enabled:text-pink-600" aria-hidden="true" />
<Icon name="tabler:heart-filled" v-else <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:heart-filled" v-else
class="h-5 w-5 text-pink-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" /> class="size-5 text-pink-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" />
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note?.favourites_count) }}</span> <span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note?.favourites_count) }}</span>
</button> </button>
<button class="group" :disabled="!isSignedIn"> <button class="group" :disabled="!isSignedIn">
<Icon name="tabler:repeat" v-if="!note?.reblogged" <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:repeat" v-if="!note?.reblogged"
class="h-5 w-5 text-gray-200 group-hover:group-enabled:text-green-600" aria-hidden="true" /> class="size-5 text-gray-200 group-hover:group-enabled:text-green-600" aria-hidden="true" />
<Icon name="tabler:repeat-off" v-else <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:repeat-off" v-else
class="h-5 w-5 text-green-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" /> class="size-5 text-green-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" />
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note?.reblogs_count) }}</span> <span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note?.reblogs_count) }}</span>
</button> </button>
<button class="group" @click="note && useEvent('note:quote', note)" :disabled="!isSignedIn"> <button class="group" @click="note && useEvent('note:quote', note)" :disabled="!isSignedIn">
<Icon name="tabler:quote" class="h-5 w-5 text-gray-200 group-hover:group-enabled:text-blue-600" <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:quote"
aria-hidden="true" /> class="size-5 text-gray-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(0) }}</span> <span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(0) }}</span>
</button> </button>
<DropdownsAdaptiveDropdown> <DropdownsAdaptiveDropdown>
<template #button> <template #button>
<HeadlessMenuButton> <HeadlessMenuButton>
<Icon name="tabler:dots" class="h-5 w-5 text-gray-200" aria-hidden="true" /> <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:dots"
class="size-5 text-gray-200" aria-hidden="true" />
<span class="sr-only">Open menu</span> <span class="sr-only">Open menu</span>
</HeadlessMenuButton> </HeadlessMenuButton>
</template> </template>

2
components/social-elements/notes/reply-header.vue
View file

@ -2,7 +2,7 @@
<NuxtLink :href="`/@${account?.acct}`" <NuxtLink :href="`/@${account?.acct}`"
class="mb-4 flex flex-row gap-2 items-center text-gray-300 opacity-70 line-clamp-1"> class="mb-4 flex flex-row gap-2 items-center text-gray-300 opacity-70 line-clamp-1">
<Skeleton :enabled="!account" shape="rect" class="!h-6" :min-width="40" :max-width="100" width-unit="%"> <Skeleton :enabled="!account" shape="rect" class="!h-6" :min-width="40" :max-width="100" width-unit="%">
<Icon name="tabler:arrow-back-up" class="size-6" aria-hidden="true" /> <iconify-icon icon="tabler:arrow-back-up" width="1.5rem" height="1.5rem" aria-hidden="true" />
<span class="flex flex-row items-center gap-2 overflow-hidden flex-wrap break-all"> <span class="flex flex-row items-center gap-2 overflow-hidden flex-wrap break-all">
Replying to Replying to
<AvatarsCentered v-if="account?.avatar" :url="account?.avatar" :alt="`${account?.acct}'s avatar'`" <AvatarsCentered v-if="account?.avatar" :url="account?.avatar" :alt="`${account?.acct}'s avatar'`"

2
components/social-elements/notifications/notif.vue
View file

@ -3,7 +3,7 @@
<div class="px-4 pt-2 pb-3 flex flex-row gap-2 items-center"> <div class="px-4 pt-2 pb-3 flex flex-row gap-2 items-center">
<Skeleton :enabled="!notification" shape="rect" class="!h-6" :min-width="40" :max-width="100" <Skeleton :enabled="!notification" shape="rect" class="!h-6" :min-width="40" :max-width="100"
width-unit="%"> width-unit="%">
<Icon :name="icon" class="h-6 w-6 text-gray-200" aria-hidden="true" /> <iconify-icon :icon="icon" width="1.5rem" height="1.5rem" class="text-gray-200" aria-hidden="true" />
<AvatarsCentered 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'`" :alt="`${notification?.account.acct}'s avatar'`"
class="h-6 w-6 shrink-0 rounded ring-1 ring-white/10" /> class="h-6 w-6 shrink-0 rounded ring-1 ring-white/10" />

8
components/social-elements/users/Account.vue
View file

@ -31,8 +31,8 @@
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"> 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"> <Skeleton :enabled="skeleton" :min-width="200" :max-width="350" class="h-6">
{{ account?.display_name }} {{ account?.display_name }}
<Icon v-if="account?.locked" name="tabler:lock" <iconify-icon v-if="account?.locked" icon="tabler:lock" width="1.25rem" height="1.25rem"
class="w-5 h-5 mb-0.5 text-gray-400 cursor-pointer" class="text-gray-400 cursor-pointer align-text-top"
title="This account manually approves its followers" /> title="This account manually approves its followers" />
</Skeleton> </Skeleton>
</h2> </h2>
@ -51,12 +51,12 @@
<div class="mt-3 flex items-center space-x-4 px-4"> <div class="mt-3 flex items-center space-x-4 px-4">
<div class="flex items-center space-x-1"> <div class="flex items-center space-x-1">
<Skeleton :enabled="skeleton" :min-width="150" :max-width="150" shape="rect"> <Skeleton :enabled="skeleton" :min-width="150" :max-width="150" shape="rect">
<Icon name="tabler:calendar" class="w-5 h-5 text-gray-400" /> <iconify-icon icon="tabler:calendar" width="1.25rem" height="1.25rem" class="text-gray-400" />
<span class="text-gray-400">Created {{ formattedJoin }}</span> <span class="text-gray-400">Created {{ formattedJoin }}</span>
</Skeleton> </Skeleton>
</div> </div>
<div v-if="account?.bot" class="flex items-center space-x-1"> <div v-if="account?.bot" class="flex items-center space-x-1">
<Icon name="tabler:robot" class="w-5 h-5 text-gray-400" /> <iconify-icon icon="tabler:robot" width="1.25rem" height="1.25rem" class="text-gray-400" />
<span class="text-gray-400">Bot</span> <span class="text-gray-400">Bot</span>
</div> </div>
</div> </div>

2
components/timelines/Notifications.vue
View file

@ -7,7 +7,7 @@
<div v-if="hasReachedEnd" <div v-if="hasReachedEnd"
class="text-center flex flex-row justify-center items-center py-10 text-gray-400 gap-3"> class="text-center flex flex-row justify-center items-center py-10 text-gray-400 gap-3">
<Icon name="tabler:message-off" class="h-6 w-6" /> <iconify-icon name="tabler:message-off" width="1.5rem" height="1.5rem" />
<span>No more notifications, you've seen them all</span> <span>No more notifications, you've seen them all</span>
</div> </div>
</ClientOnly> </ClientOnly>

2
components/timelines/timeline.vue
View file

@ -9,7 +9,7 @@
<div v-if="hasReachedEnd" <div v-if="hasReachedEnd"
class="text-center flex flex-row justify-center items-center py-10 text-gray-400 gap-3"> class="text-center flex flex-row justify-center items-center py-10 text-gray-400 gap-3">
<Icon name="tabler:message-off" class="h-6 w-6" /> <iconify-icon icon="tabler:message-off" width="1.5rem" height="1.5rem" />
<span>No more posts, you've seen them all</span> <span>No more posts, you've seen them all</span>
</div> </div>
</ClientOnly> </ClientOnly>

6
nuxt.config.ts
View file

@ -6,12 +6,16 @@ export default defineNuxtConfig({
"@vueuse/nuxt", "@vueuse/nuxt",
"nuxt-headlessui", "nuxt-headlessui",
"@nuxt/fonts", "@nuxt/fonts",
"nuxt-icon",
//"nuxt-shiki", //"nuxt-shiki",
"@vee-validate/nuxt", "@vee-validate/nuxt",
"nuxt-security", "nuxt-security",
"@vite-pwa/nuxt", "@vite-pwa/nuxt",
], ],
vue: {
compilerOptions: {
isCustomElement: (tag) => tag === "iconify-icon",
},
},
pwa: { pwa: {
manifest: { manifest: {
name: "Lysand", name: "Lysand",

2
package.json
View file

@ -34,11 +34,11 @@
"@vite-pwa/nuxt": "^0.7.0", "@vite-pwa/nuxt": "^0.7.0",
"c12": "^1.10.0", "c12": "^1.10.0",
"html-to-text": "^9.0.5", "html-to-text": "^9.0.5",
"iconify-icon": "^2.1.0",
"megalodon": "^10.0.0", "megalodon": "^10.0.0",
"mitt": "^3.0.1", "mitt": "^3.0.1",
"nuxt": "^3.11.2", "nuxt": "^3.11.2",
"nuxt-headlessui": "^1.2.0", "nuxt-headlessui": "^1.2.0",
"nuxt-icon": "^0.6.10",
"nuxt-security": "^2.0.0-beta.0", "nuxt-security": "^2.0.0-beta.0",
"nuxt-shiki": "^0.3.0", "nuxt-shiki": "^0.3.0",
"overlayscrollbars": "^2.8.0", "overlayscrollbars": "^2.8.0",

2
pages/notifications.vue
View file

@ -4,7 +4,7 @@
<div class="shrink-0 p-10 h-dvh" v-if="!tokenData"> <div class="shrink-0 p-10 h-dvh" v-if="!tokenData">
<button type="button" <button type="button"
class="relative block h-full w-full rounded-lg border-2 border-dashed border-dark-300 p-12 text-center"> class="relative block h-full w-full rounded-lg border-2 border-dashed border-dark-300 p-12 text-center">
<Icon name="tabler:notification" class="mx-auto h-12 w-12 text-gray-400" /> <iconify-icon name="tabler:notification" width="3rem" height="3rem" class="mx-auto text-gray-400" />
<span class="mt-3 block text-sm font-semibold text-gray-200 max-w-56 mx-auto">Notifications <span class="mt-3 block text-sm font-semibold text-gray-200 max-w-56 mx-auto">Notifications
will will
appear here appear here