mirror of
https://github.com/versia-pub/frontend.git
synced 2026-03-13 03:29:16 +01:00
style: 🎨 Format code with Biome
This commit is contained in:
Jesse Wierzbinski
parent
7ff9d2302a
commit
3627ac0ef8
296 changed files with 3257 additions and 2808 deletions
|
|
@ -1,6 +1,12 @@
|
|||
<template>
|
||||
<div class="flex flex-row gap-2 flex-wrap">
|
||||
<Reaction v-for="reaction in reactions" :key="reaction.name" :reaction="reaction" :emoji="emojis.find(e => `:${e.shortcode}:` === reaction.name)" :status-id="statusId" />
|
||||
<Reaction
|
||||
v-for="reaction in reactions"
|
||||
:key="reaction.name"
|
||||
:reaction="reaction"
|
||||
:emoji="emojis.find(e => `:${e.shortcode}:` === reaction.name)"
|
||||
:status-id="statusId"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
<template>
|
||||
<div class="sticky top-2 z-10 flex items-center justify-center p-2">
|
||||
<Badge variant="secondary">
|
||||
{{ categoryName }}
|
||||
</Badge>
|
||||
<Badge variant="secondary">{{ categoryName }}</Badge>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,17 @@
|
|||
<template>
|
||||
<div class="p-2 text-sm font-semibold border-0 rounded-none text-center flex flex-row items-center gap-2 truncate">
|
||||
<img v-if="(emoji as InferredEmoji)?.url" :src="(emoji as InferredEmoji)?.url"
|
||||
:alt="(emoji as InferredEmoji)?.shortcode" class="h-8 align-middle inline not-prose" />
|
||||
<span v-else-if="(emoji as UnicodeEmoji)?.unicode" class="text-2xl align-middle inline not-prose">
|
||||
<div
|
||||
class="p-2 text-sm font-semibold border-0 rounded-none text-center flex flex-row items-center gap-2 truncate"
|
||||
>
|
||||
<img
|
||||
v-if="(emoji as InferredEmoji)?.url"
|
||||
:src="(emoji as InferredEmoji)?.url"
|
||||
:alt="(emoji as InferredEmoji)?.shortcode"
|
||||
class="h-8 align-middle inline not-prose"
|
||||
>
|
||||
<span
|
||||
v-else-if="(emoji as UnicodeEmoji)?.unicode"
|
||||
class="text-2xl align-middle inline not-prose"
|
||||
>
|
||||
{{ (emoji as UnicodeEmoji)?.unicode }}
|
||||
</span>
|
||||
{{ (emoji as InferredEmoji)?.shortcode || (emoji as UnicodeEmoji)?.shortcode }}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,22 @@
|
|||
<template>
|
||||
<Button @focus="() => emit('select', emoji)" @mouseenter="() => emit('select', emoji)" @click="() => emit('pick', emoji)" size="icon" variant="ghost"
|
||||
class="size-12">
|
||||
<img v-if="(emoji as InferredEmoji).url" :src="(emoji as InferredEmoji).url"
|
||||
:alt="(emoji as InferredEmoji).shortcode" class="h-8 align-middle inline not-prose" />
|
||||
<span v-else-if="(emoji as UnicodeEmoji).unicode" class="text-2xl align-middle inline not-prose">
|
||||
<Button
|
||||
@focus="() => emit('select', emoji)"
|
||||
@mouseenter="() => emit('select', emoji)"
|
||||
@click="() => emit('pick', emoji)"
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
class="size-12"
|
||||
>
|
||||
<img
|
||||
v-if="(emoji as InferredEmoji).url"
|
||||
:src="(emoji as InferredEmoji).url"
|
||||
:alt="(emoji as InferredEmoji).shortcode"
|
||||
class="h-8 align-middle inline not-prose"
|
||||
>
|
||||
<span
|
||||
v-else-if="(emoji as UnicodeEmoji).unicode"
|
||||
class="text-2xl align-middle inline not-prose"
|
||||
>
|
||||
{{ (emoji as UnicodeEmoji).unicode }}
|
||||
</span>
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -1,31 +1,57 @@
|
|||
<template>
|
||||
<Popover v-model:open="open">
|
||||
<PopoverTrigger as-child>
|
||||
<slot />
|
||||
<slot/>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="p-0 w-fit">
|
||||
<div class="grid-cols-[minmax(0,1fr)_auto] gap-0 grid divide-x *:h-112 *:overflow-y-auto"
|
||||
orientation="vertical">
|
||||
<div class="grid grid-rows-[auto_minmax(0,1fr)_auto] gap-0" ref="emojiContainer">
|
||||
<div
|
||||
class="grid-cols-[minmax(0,1fr)_auto] gap-0 grid divide-x *:h-112 *:overflow-y-auto"
|
||||
orientation="vertical"
|
||||
>
|
||||
<div
|
||||
class="grid grid-rows-[auto_minmax(0,1fr)_auto] gap-0"
|
||||
ref="emojiContainer"
|
||||
>
|
||||
<div class="p-2">
|
||||
<Input placeholder="Search" v-model="filter" />
|
||||
<Input placeholder="Search" v-model="filter"/>
|
||||
</div>
|
||||
<VList :data="virtualizedItems" #default="{ item }" class="relative" :style="{
|
||||
<VList
|
||||
:data="virtualizedItems"
|
||||
#default="{ item }"
|
||||
class="relative"
|
||||
:style="{
|
||||
width: `calc(var(--spacing) * ((12 * ${EMOJI_PER_ROW}) + (${EMOJI_PER_ROW} - 1)) + var(--spacing) * 4)`,
|
||||
}">
|
||||
<CategoryHeader :key="item.headerId" v-if="item.type === 'header'" :category-name="item.name" />
|
||||
<div v-else-if="item.type === 'emoji-row'" :key="item.rowId" class="flex gap-1 p-2">
|
||||
<Emoji v-for="emoji in item.emojis" :key="getEmojiKey(emoji)" :emoji="emoji"
|
||||
@select="(e) => selectedEmoji = e" @pick="e => {
|
||||
}"
|
||||
>
|
||||
<CategoryHeader
|
||||
:key="item.headerId"
|
||||
v-if="item.type === 'header'"
|
||||
:category-name="item.name"
|
||||
/>
|
||||
<div
|
||||
v-else-if="item.type === 'emoji-row'"
|
||||
:key="item.rowId"
|
||||
class="flex gap-1 p-2"
|
||||
>
|
||||
<Emoji
|
||||
v-for="emoji in item.emojis"
|
||||
:key="getEmojiKey(emoji)"
|
||||
:emoji="emoji"
|
||||
@select="(e) => selectedEmoji = e"
|
||||
@pick="e => {
|
||||
emit('pick', e); open = false;
|
||||
}" />
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</VList>
|
||||
<EmojiDisplay :emoji="selectedEmoji" :style="{
|
||||
<EmojiDisplay
|
||||
:emoji="selectedEmoji"
|
||||
:style="{
|
||||
width: `calc(var(--spacing) * ((12 * ${EMOJI_PER_ROW}) + (${EMOJI_PER_ROW} - 1)) + var(--spacing) * 4)`,
|
||||
}" />
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<Sidebar :categories="categories" @select="scrollToCategory" />
|
||||
<Sidebar :categories="categories" @select="scrollToCategory"/>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,23 @@
|
|||
<template>
|
||||
<div class="grid gap-1 bg-transparent p-2">
|
||||
<Button v-for="category in categories" :key="category.name" size="icon" variant="ghost" @click="() => emit('select', category)">
|
||||
<component v-if="category.groupId" :is="emojiGroupIconMap[category.groupId]" class="size-6 text-primary" />
|
||||
<img v-else-if="category.src" :src="category.src" class="size-6 align-middle inline not-prose" role="presentation" />
|
||||
<Button
|
||||
v-for="category in categories"
|
||||
:key="category.name"
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
@click="() => emit('select', category)"
|
||||
>
|
||||
<component
|
||||
v-if="category.groupId"
|
||||
:is="emojiGroupIconMap[category.groupId]"
|
||||
class="size-6 text-primary"
|
||||
/>
|
||||
<img
|
||||
v-else-if="category.src"
|
||||
:src="category.src"
|
||||
class="size-6 align-middle inline not-prose"
|
||||
role="presentation"
|
||||
>
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,38 @@
|
|||
<template>
|
||||
<HoverCard @update:open="(open) => open && accounts === null && refreshReactions()">
|
||||
<HoverCard
|
||||
@update:open="(open) => open && accounts === null && refreshReactions()"
|
||||
>
|
||||
<HoverCardTrigger as-child>
|
||||
<Button @click="reaction.me ? !reaction.remote && unreact() : !reaction.remote && react()" :variant="reaction.me ? 'secondary' : reaction.remote ? 'ghost' : 'outline'" size="sm" class="gap-2">
|
||||
<img v-if="emoji" :src="emoji.url" :alt="emoji.shortcode"
|
||||
class="h-[1lh] align-middle inline not-prose" />
|
||||
<span v-else>
|
||||
{{ reaction.name }}
|
||||
</span>
|
||||
<Button
|
||||
@click="reaction.me ? !reaction.remote && unreact() : !reaction.remote && react()"
|
||||
:variant="reaction.me ? 'secondary' : reaction.remote ? 'ghost' : 'outline'"
|
||||
size="sm"
|
||||
class="gap-2"
|
||||
>
|
||||
<img
|
||||
v-if="emoji"
|
||||
:src="emoji.url"
|
||||
:alt="emoji.shortcode"
|
||||
class="h-[1lh] align-middle inline not-prose"
|
||||
>
|
||||
<span v-else> {{ reaction.name }}</span>
|
||||
{{ formatNumber(reaction.count) }}
|
||||
</Button>
|
||||
</HoverCardTrigger>
|
||||
<HoverCardContent class="p-3">
|
||||
<Spinner v-if="accounts === null" class="border-0" />
|
||||
<Spinner v-if="accounts === null" class="border-0"/>
|
||||
<ul v-else class="flex flex-col gap-4">
|
||||
<li
|
||||
v-for="account in accounts">
|
||||
<NuxtLink :to="`/@${account.acct}`" class="flex items-center gap-2">
|
||||
<Avatar class="size-6" :key="account.id" :src="account.avatar"
|
||||
:name="account.display_name || account.username" />
|
||||
<li v-for="account in accounts">
|
||||
<NuxtLink
|
||||
:to="`/@${account.acct}`"
|
||||
class="flex items-center gap-2"
|
||||
>
|
||||
<Avatar
|
||||
class="size-6"
|
||||
:key="account.id"
|
||||
:src="account.avatar"
|
||||
:name="account.display_name || account.username"
|
||||
/>
|
||||
<span class="text-sm font-semibold line-clamp-1">
|
||||
{{ account.display_name || account.username }}
|
||||
</span>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue