style: 🎨 Format code with Biome

app/components/profiles/avatar.vue

@@ -1,9 +1,7 @@
 <template>
     <Avatar :class="['rounded-md bg-secondary']">
-        <AvatarFallback v-if="name">
-            {{ getInitials(name) }}
-        </AvatarFallback>
-        <AvatarImage v-if="src" :src="src" :alt="`${name}'s avatar`" />
+        <AvatarFallback v-if="name">{{ getInitials(name) }}</AvatarFallback>
+        <AvatarImage v-if="src" :src="src" :alt="`${name}'s avatar`"/>
     </Avatar>
 </template>
 

app/components/profiles/profile-actions.vue

@@ -1,60 +1,72 @@
 <template>
     <DropdownMenu>
         <DropdownMenuTrigger as-child>
-            <slot />
+            <slot/>
         </DropdownMenuTrigger>
         <DropdownMenuContent class="min-w-56">
             <DropdownMenuGroup>
-                <DropdownMenuItem as="button" @click="copyText(account.username)">
-                    <AtSign />
+                <DropdownMenuItem
+                    as="button"
+                    @click="copyText(account.username)"
+                >
+                    <AtSign/>
                     {{ m.cool_dark_tapir_belong() }}
                 </DropdownMenuItem>
-                <DropdownMenuItem as="button" @click="copyText(JSON.stringify(account, null, 4))">
-                    <Code />
+                <DropdownMenuItem
+                    as="button"
+                    @click="copyText(JSON.stringify(account, null, 4))"
+                >
+                    <Code/>
                     {{ m.yummy_moving_scallop_sail() }}
                 </DropdownMenuItem>
                 <DropdownMenuItem as="button" @click="copyText(account.id)">
-                    <Hash />
+                    <Hash/>
                     {{ m.sunny_zany_jellyfish_pop() }}
                 </DropdownMenuItem>
             </DropdownMenuGroup>
-            <DropdownMenuSeparator />
+            <DropdownMenuSeparator/>
             <DropdownMenuGroup>
                 <DropdownMenuItem as="button" @click="copyText(url)">
-                    <Link />
+                    <Link/>
                     {{ m.ago_new_pelican_drip() }}
                 </DropdownMenuItem>
                 <DropdownMenuItem as="button" @click="copyText(account.url)">
-                    <Link />
+                    <Link/>
                     {{ m.solid_witty_zebra_walk() }}
                 </DropdownMenuItem>
-                <DropdownMenuItem as="a" v-if="isRemote" target="_blank" rel="noopener noreferrer" :href="account.url">
-                    <ExternalLink />
+                <DropdownMenuItem
+                    as="a"
+                    v-if="isRemote"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    :href="account.url"
+                >
+                    <ExternalLink/>
                     {{ m.active_trite_lark_inspire() }}
                 </DropdownMenuItem>
             </DropdownMenuGroup>
-            <DropdownMenuSeparator v-if="authStore.isSignedIn && !isMe" />
+            <DropdownMenuSeparator v-if="authStore.isSignedIn && !isMe"/>
             <DropdownMenuGroup v-if="authStore.isSignedIn && !isMe">
                 <DropdownMenuItem as="button" @click="muteUser(account.id)">
-                    <VolumeX />
+                    <VolumeX/>
                     {{ m.spare_wild_mole_intend() }}
                 </DropdownMenuItem>
                 <DropdownMenuItem as="button" @click="blockUser(account.id)">
-                    <Ban />
+                    <Ban/>
                     {{ m.misty_soft_sparrow_vent() }}
                 </DropdownMenuItem>
             </DropdownMenuGroup>
-            <DropdownMenuSeparator v-if="isRemote" />
+            <DropdownMenuSeparator v-if="isRemote"/>
             <DropdownMenuGroup v-if="isRemote">
                 <DropdownMenuItem as="button" @click="refresh">
-                    <RefreshCw />
+                    <RefreshCw/>
                     {{ m.slow_chunky_chipmunk_hush() }}
                 </DropdownMenuItem>
             </DropdownMenuGroup>
-            <DropdownMenuSeparator v-if="authStore.isSignedIn && !isMe" />
+            <DropdownMenuSeparator v-if="authStore.isSignedIn && !isMe"/>
             <DropdownMenuGroup v-if="authStore.isSignedIn && !isMe">
                 <DropdownMenuItem as="button" :disabled="true">
-                    <Flag />
+                    <Flag/>
                     {{ m.great_few_jaguar_rise() }}
                 </DropdownMenuItem>
             </DropdownMenuGroup>

app/components/profiles/profile-badge.vue

@@ -2,8 +2,8 @@
     <Tooltip>
         <TooltipTrigger :as-child="true">
             <Badge variant="default" class="gap-1">
-                <BadgeCheck v-if="verified" />
-                <img v-else-if="icon" :src="icon" alt="" class="size-4 rounded" />
+                <BadgeCheck v-if="verified"/>
+                <img v-else-if="icon" :src="icon" alt="" class="size-4 rounded">
                 {{ name }}
             </Badge>
         </TooltipTrigger>

app/components/profiles/profile-badges.vue

@@ -1,5 +1,7 @@
 <template>
-    <Row class="gap-2" wrap
+    <Row
+        class="gap-2"
+        wrap
         v-if="isDeveloper || account.bot || roles.length > 0"
     >
         <ProfileBadge

app/components/profiles/profile-fields.vue

@@ -1,10 +1,16 @@
 <template>
-    <Col class="gap-y-4">
-        <Col v-for="field in fields" :key="field.name" class="gap-1 break-words">
-            <HeadingSmall v-render-emojis="emojis">{{ field.name }}</HeadingSmall>
-            <Html v-html="field.value" v-render-emojis="emojis" />
-        </Col>
-    </Col>
+    <Column class="gap-y-4">
+        <Column
+            v-for="field in fields"
+            :key="field.name"
+            class="gap-1 break-words"
+        >
+            <HeadingSmall v-render-emojis="emojis">
+                {{ field.name }}
+            </HeadingSmall>
+            <Html v-html="field.value" v-render-emojis="emojis"/>
+        </Column>
+    </Column>
 </template>
 
 <script lang="ts" setup>
@@ -12,7 +18,7 @@ import type { CustomEmoji, Field } from "@versia/client/schemas";
 import type { z } from "zod";
 import HeadingSmall from "~/components/typography/headings/small.vue";
 import Html from "../typography/html.vue";
-import Col from "../typography/layout/col.vue";
+import Column from "../typography/layout/col.vue";
 
 defineProps<{
     fields: z.infer<typeof Field>[];

app/components/profiles/profile-header.vue

@@ -6,7 +6,7 @@
                 :src="header"
                 alt=""
                 class="object-cover w-full h-full"
-            />
+            >
             <!-- Shadow overlay at the bottom -->
             <div
                 class="absolute bottom-0 w-full h-1/3 bg-gradient-to-b from-black/0 to-black/40"
@@ -15,11 +15,7 @@
         <div
             class="absolute bottom-0 translate-y-1/3 left-4 flex flex-row items-start gap-2"
         >
-            <Avatar
-                class="size-32 border"
-                :src="avatar"
-                :name="displayName"
-            />
+            <Avatar class="size-32 border" :src="avatar" :name="displayName"/>
         </div>
     </CardHeader>
 </template>

app/components/profiles/profile-relationship-actions.vue

@@ -1,7 +1,11 @@
 <template>
-    <Button variant="secondary" :disabled="isLoading || relationship?.requested" v-if="!isMe && authStore.isSignedIn"
-        @click="relationship?.following ? unfollow() : follow()">
-        <Loader v-if="isLoading" class="animate-spin" />
+    <Button
+        variant="secondary"
+        :disabled="isLoading || relationship?.requested"
+        v-if="!isMe && authStore.isSignedIn"
+        @click="relationship?.following ? unfollow() : follow()"
+    >
+        <Loader v-if="isLoading" class="animate-spin"/>
         <span v-else>
             {{
                 relationship?.following

app/components/profiles/profile-stats.vue

@@ -1,24 +1,24 @@
 <template>
     <Row class="gap-2 w-full justify-around">
-        <Col centered>
+        <Column centered>
             <Bold>{{ noteCount }}</Bold>
             <Small muted>{{ m.real_gray_stork_seek() }}</Small>
-        </Col>
-        <Col centered>
+        </Column>
+        <Column centered>
             <Bold>{{ followerCount }}</Bold>
             <Small muted>{{ m.teal_helpful_parakeet_hike() }}</Small>
-        </Col>
-        <Col centered>
+        </Column>
+        <Column centered>
             <Bold>{{ followingCount }}</Bold>
             <Small muted>{{ m.aloof_royal_samuel_startle() }}</Small>
-        </Col>
+        </Column>
     </Row>
 </template>
 
 <script lang="ts" setup>
 import * as m from "~~/paraglide/messages.js";
 import Bold from "../typography/bold.vue";
-import Col from "../typography/layout/col.vue";
+import Column from "../typography/layout/col.vue";
 import Row from "../typography/layout/row.vue";
 import Small from "../typography/small.vue";
 

app/components/profiles/profile.vue

@@ -1,33 +1,45 @@
 <template>
     <Card class="gap-4">
-        <ProfileHeader :header="account.header" :avatar="account.avatar" :display-name="account.display_name" />
+        <ProfileHeader
+            :header="account.header"
+            :avatar="account.avatar"
+            :display-name="account.display_name"
+        />
         <Row class="justify-end gap-2">
-            <ProfileRelationshipActions :account="account" />
+            <ProfileRelationshipActions :account="account"/>
             <ProfileActions :account="account">
                 <Button variant="secondary" size="icon">
-                    <Ellipsis />
+                    <Ellipsis/>
                 </Button>
             </ProfileActions>
         </Row>
-        <Col class="justify-center">
+        <Column class="justify-center">
             <Text class="font-bold" v-render-emojis="account.emojis">
                 {{ account.display_name }}
             </Text>
-            <Address :username="username" :domain="domain" />
-        </Col>
-        <ProfileBadges :account="account" />
-        <Html v-html="account.note" v-render-emojis="account.emojis" />
-        <Separator />
-        <ProfileFields v-if="account.fields.length > 0" :fields="account.fields" :emojis="account.emojis" />
-        <Separator v-if="account.fields.length > 0" />
+            <Address :username="username" :domain="domain"/>
+        </Column>
+        <ProfileBadges :account="account"/>
+        <Html v-html="account.note" v-render-emojis="account.emojis"/>
+        <Separator/>
+        <ProfileFields
+            v-if="account.fields.length > 0"
+            :fields="account.fields"
+            :emojis="account.emojis"
+        />
+        <Separator v-if="account.fields.length > 0"/>
         <Row>
             <HeadingSmall class="flex items-center gap-1">
-                <CalendarDays class="size-4" /> {{ formattedCreationDate }}
+                <CalendarDays class="size-4"/>
+                {{ formattedCreationDate }}
             </HeadingSmall>
         </Row>
-        <Separator />
-        <ProfileStats :follower-count="account.followers_count" :following-count="account.following_count"
-            :note-count="account.statuses_count" />
+        <Separator/>
+        <ProfileStats
+            :follower-count="account.followers_count"
+            :following-count="account.following_count"
+            :note-count="account.statuses_count"
+        />
     </Card>
 </template>
 
@@ -41,7 +53,7 @@ import { Separator } from "~/components/ui/separator";
 import { getLocale } from "~~/paraglide/runtime";
 import HeadingSmall from "../typography/headings/small.vue";
 import Html from "../typography/html.vue";
-import Col from "../typography/layout/col.vue";
+import Column from "../typography/layout/col.vue";
 import Row from "../typography/layout/row.vue";
 import Text from "../typography/text.vue";
 import Address from "./address.vue";

app/components/profiles/small-card.vue

@@ -5,7 +5,7 @@
                 :src="account.header"
                 alt=""
                 class="object-cover w-full h-full"
-            />
+            >
             <!-- Shadow overlay at the bottom -->
             <div
                 class="absolute bottom-0 w-full h-1/3 bg-gradient-to-b from-black/0 to-black/40"
@@ -26,14 +26,14 @@
         <Text class="font-bold" v-render-emojis="account.emojis">
             {{ account.display_name }}
         </Text>
-        <Address :username="username" :domain="domain" />
+        <Address :username="username" :domain="domain"/>
     </div>
     <Html
         v-html="account.note"
         v-render-emojis="account.emojis"
         class="mt-4 max-h-72 overflow-y-auto"
     />
-    <Separator v-if="account.fields.length > 0" class="mt-4" />
+    <Separator v-if="account.fields.length > 0" class="mt-4"/>
     <ProfileFields
         v-if="account.fields.length > 0"
         :fields="account.fields"

app/components/profiles/tiny-card.vue

@@ -3,12 +3,16 @@
         class="flex-row gap-2 p-2 truncate items-center"
         :class="naked ? 'p-0 bg-transparent ring-0 border-none shadow-none' : ''"
     >
-        <Avatar :src="account.avatar" :name="account.display_name" class="size-10" />
+        <Avatar
+            :src="account.avatar"
+            :name="account.display_name"
+            class="size-10"
+        />
         <CardContent class="leading-tight">
             <Text class="font-semibold" v-render-emojis="account.emojis">
                 {{ account.display_name }}
             </Text>
-            <Address :username="account.username" :domain="domain" />
+            <Address :username="account.username" :domain="domain"/>
         </CardContent>
     </Card>
 </template>