style: 🎨 Format code with Biome

app/components/notes/reactions/picker/category-header.vue

@@ -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>
 

app/components/notes/reactions/picker/display.vue

@@ -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 }}

app/components/notes/reactions/picker/emoji.vue

@@ -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>

app/components/notes/reactions/picker/index.vue

@@ -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>

app/components/notes/reactions/picker/sidebar.vue

@@ -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>