From 0f738f25aae717ea1dbc09854925526746e0b2ca Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Sun, 15 Mar 2026 22:10:43 +0900
Subject: [PATCH] refactor gallery

---
 .../MyAvatars/components/MyAvatarCard.vue     |   2 +-
 src/views/Tools/Gallery.vue                   | 912 ++++++++----------
 2 files changed, 429 insertions(+), 485 deletions(-)

diff --git a/src/views/MyAvatars/components/MyAvatarCard.vue b/src/views/MyAvatars/components/MyAvatarCard.vue
index 0b7ae9f1..949450b5 100644
--- a/src/views/MyAvatars/components/MyAvatarCard.vue
+++ b/src/views/MyAvatars/components/MyAvatarCard.vue
@@ -6,7 +6,7 @@
                     <div class="avatar-card-wrapper rounded-lg" @click="$emit('click')">
                         <Card
                             class="avatar-card x-hover-card flex flex-col gap-0 p-0 cursor-pointer overflow-hidden rounded-lg relative hover:bg-accent hover:shadow-sm"
-                            :class="isActive ? 'border-2 border-primary' : 'border border-border/50'">
+                            :class="isActive ? 'ring-[3px] ring-ring border-ring' : 'border border-border/50'">
                             <div class="w-full aspect-5/2 overflow-hidden bg-muted relative">
                                 <img
                                     v-if="avatar.thumbnailImageUrl && !imageLoadError"
diff --git a/src/views/Tools/Gallery.vue b/src/views/Tools/Gallery.vue
index 3e9c43a2..9efed88e 100644
--- a/src/views/Tools/Gallery.vue
+++ b/src/views/Tools/Gallery.vue
@@ -56,9 +56,6 @@
                         accept="image/*"
                         @change="onFileChangeGallery"
                         style="display: none" />
-                    <span>{{ t('dialog.gallery_icons.recommended_image_size') }}: 1200x900px (4:3)</span>
-                    <br />
-                    <br />
                     <ButtonGroup>
                         <Button variant="outline" size="sm" @click="refreshGalleryTable">
                             <RefreshCw />
@@ -81,42 +78,45 @@
                             {{ t('dialog.gallery_icons.clear') }}
                         </Button>
                     </ButtonGroup>
-                    <br />
-                    <div
-                        class="inline-block mt-2.5 w-auto cursor-default"
-                        v-for="image in galleryTable"
-                        :key="image.id">
-                        <template v-if="image.versions && image.versions.length > 0">
+                    <ItemGroup
+                        class="grid gap-3 mt-3"
+                        style="grid-template-columns: repeat(auto-fill, minmax(180px, 1fr))">
+                        <Item
+                            v-for="image in galleryTable"
+                            :key="image.id"
+                            variant="outline"
+                            size="sm"
+                            class="p-0 x-hover-card hover:bg-accent hover:shadow-sm"
+                            :class="compareCurrentProfilePic(image.id) ? 'ring-[3px] ring-ring border-ring' : ''"
+                            as-child>
                             <div
-                                class="h-[200px] w-[200px] rounded-[20px] overflow-hidden"
-                                v-if="image.versions[image.versions.length - 1].file.url"
-                                @click="setProfilePicOverride(image.id)"
-                                :class="compareCurrentProfilePic(image.id) ? 'cursor-default' : 'cursor-pointer'">
-                                <img
-                                    class="h-full w-full rounded-[15px] object-cover"
-                                    :src="image.versions[image.versions.length - 1].file.url"
-                                    loading="lazy" />
+                                v-if="image.versions && image.versions.length > 0 && image.versions[image.versions.length - 1].file.url"
+                                class="overflow-hidden rounded-[inherit]">
+                                <ItemHeader class="cursor-pointer" @click="showFullscreenImageDialog(image.versions[image.versions.length - 1].file.url)">
+                                    <img
+                                        :src="image.versions[image.versions.length - 1].file.url"
+                                        loading="lazy"
+                                        class="aspect-[4/3] w-full rounded-t-md object-cover" />
+                                </ItemHeader>
+                                <ItemFooter class="p-2 gap-1">
+                                    <Button
+                                        size="icon-sm"
+                                        variant="ghost"
+                                        class="rounded-full text-destructive"
+                                        @click="deleteGalleryImage(image.id)">
+                                        <Trash2 />
+                                    </Button>
+                                    <Button
+                                        size="icon-sm"
+                                        class="rounded-full"
+                                        :variant="compareCurrentProfilePic(image.id) ? 'default' : 'ghost'"
+                                        @click="setProfilePicOverride(image.id)">
+                                        <Check />
+                                    </Button>
+                                </ItemFooter>
                             </div>
-                            <div class="float-right" style="margin-top: 6px">
-                                <Button
-                                    class="rounded-full mr-2"
-                                    size="icon-sm"
-                                    variant="outline"
-                                    @click="
-                                        showFullscreenImageDialog(image.versions[image.versions.length - 1].file.url)
-                                    ">
-                                    <Maximize2 />
-                                </Button>
-                                <Button
-                                    class="rounded-full"
-                                    size="icon-sm"
-                                    variant="outline"
-                                    @click="deleteGalleryImage(image.id)">
-                                    <Trash2 />
-                                </Button>
-                            </div>
-                        </template>
-                    </div>
+                        </Item>
+                    </ItemGroup>
                 </div>
             </template>
 
@@ -128,9 +128,6 @@
                         accept="image/*"
                         @change="onFileChangeVRCPlusIcon"
                         style="display: none" />
-                    <span>{{ t('dialog.gallery_icons.recommended_image_size') }}: 2048x2048px (1:1)</span>
-                    <br />
-                    <br />
                     <ButtonGroup>
                         <Button variant="outline" size="sm" @click="refreshVRCPlusIconsTable">
                             <RefreshCw />
@@ -153,41 +150,45 @@
                             {{ t('dialog.gallery_icons.clear') }}
                         </Button>
                     </ButtonGroup>
-                    <br />
-                    <div
-                        class="inline-block mt-2.5 w-auto cursor-default"
-                        v-for="image in VRCPlusIconsTable"
-                        :key="image.id">
-                        <template v-if="image.versions && image.versions.length > 0"
-                            ><div
-                                class="h-[200px] w-[200px] rounded-[20px] overflow-hidden"
-                                v-if="image.versions[image.versions.length - 1].file.url"
-                                @click="setVRCPlusIcon(image.id)"
-                                :class="compareCurrentVRCPlusIcon(image.id) ? 'cursor-default' : 'cursor-pointer'">
-                                <img
-                                    class="h-full w-full rounded-[15px] object-cover"
-                                    :src="image.versions[image.versions.length - 1].file.url"
-                                    loading="lazy" />
+                    <ItemGroup
+                        class="grid gap-3 mt-3"
+                        style="grid-template-columns: repeat(auto-fill, minmax(160px, 1fr))">
+                        <Item
+                            v-for="image in VRCPlusIconsTable"
+                            :key="image.id"
+                            variant="outline"
+                            size="sm"
+                            class="p-0 x-hover-card hover:bg-accent hover:shadow-sm"
+                            :class="compareCurrentVRCPlusIcon(image.id) ? 'ring-[3px] ring-ring border-ring' : ''"
+                            as-child>
+                            <div
+                                v-if="image.versions && image.versions.length > 0 && image.versions[image.versions.length - 1].file.url"
+                                class="overflow-hidden rounded-[inherit]">
+                                <ItemHeader class="cursor-pointer" @click="showFullscreenImageDialog(image.versions[image.versions.length - 1].file.url)">
+                                    <img
+                                        :src="image.versions[image.versions.length - 1].file.url"
+                                        loading="lazy"
+                                        class="aspect-square w-full rounded-t-md object-cover" />
+                                </ItemHeader>
+                                <ItemFooter class="p-2 gap-1">
+                                    <Button
+                                        size="icon-sm"
+                                        variant="ghost"
+                                        class="rounded-full text-destructive"
+                                        @click="deleteVRCPlusIcon(image.id)">
+                                        <Trash2 />
+                                    </Button>
+                                    <Button
+                                        size="icon-sm"
+                                        class="rounded-full"
+                                        :variant="compareCurrentVRCPlusIcon(image.id) ? 'default' : 'ghost'"
+                                        @click="setVRCPlusIcon(image.id)">
+                                        <Check />
+                                    </Button>
+                                </ItemFooter>
                             </div>
-                            <div class="float-right" style="margin-top: 6px">
-                                <Button
-                                    class="rounded-full mr-2"
-                                    size="icon-sm"
-                                    variant="outline"
-                                    @click="
-                                        showFullscreenImageDialog(image.versions[image.versions.length - 1].file.url)
-                                    ">
-                                    <Maximize2 />
-                                </Button>
-                                <Button
-                                    class="rounded-full"
-                                    size="icon-sm"
-                                    variant="outline"
-                                    @click="deleteVRCPlusIcon(image.id)"
-                                    ><Trash2
-                                /></Button></div
-                        ></template>
-                    </div>
+                        </Item>
+                    </ItemGroup>
                 </div>
             </template>
 
@@ -199,11 +200,8 @@
                         accept="image/*"
                         @change="onFileChangeEmoji"
                         style="display: none" />
-                    <span>{{ t('dialog.gallery_icons.recommended_image_size') }}: 1024x1024px (1:1)</span>
-                    <br />
-                    <br />
-                    <div>
-                        <ButtonGroup style="margin-right: 8px">
+                    <div class="flex items-center gap-2">
+                        <ButtonGroup>
                             <Button variant="outline" size="sm" @click="refreshEmojiTable">
                                 <RefreshCw />
                                 {{ t('dialog.gallery_icons.refresh') }}
@@ -217,28 +215,28 @@
                                 {{ t('dialog.gallery_icons.upload') }}
                             </Button>
                         </ButtonGroup>
-                        <br />
-                        <br />
-                        <VirtualCombobox
-                            v-model="emojiAnimationStyle"
-                            :groups="emojiStylePickerGroups"
-                            :placeholder="t('dialog.gallery_icons.emoji_animation_styles')"
-                            :search-placeholder="t('dialog.gallery_icons.emoji_animation_styles')"
-                            :clearable="false"
-                            :close-on-select="true">
-                            <template #item="{ item, selected }">
-                                <div class="flex w-full items-center gap-2">
-                                    <div class="h-10 w-10 shrink-0 overflow-hidden rounded-sm bg-black/5">
-                                        <img
-                                            class="h-full w-full object-cover"
-                                            :src="`${emojiAnimationStyleUrl}${item.fileName}`"
-                                            loading="lazy" />
+                        <div class="flex-1 min-w-0 max-w-120">
+                            <VirtualCombobox
+                                v-model="emojiAnimationStyle"
+                                :groups="emojiStylePickerGroups"
+                                :placeholder="t('dialog.gallery_icons.emoji_animation_styles')"
+                                :search-placeholder="t('dialog.gallery_icons.emoji_animation_styles')"
+                                :clearable="false"
+                                :close-on-select="true">
+                                <template #item="{ item, selected }">
+                                    <div class="flex w-full items-center gap-2">
+                                        <div class="h-10 w-10 shrink-0 overflow-hidden rounded-sm bg-black/5">
+                                            <img
+                                                class="h-full w-full object-cover"
+                                                :src="`${emojiAnimationStyleUrl}${item.fileName}`"
+                                                loading="lazy" />
+                                        </div>
+                                        <span class="truncate text-sm" v-text="item.label"></span>
+                                        <span v-if="selected" class="ml-auto opacity-70">✓</span>
                                     </div>
-                                    <span class="truncate text-sm" v-text="item.label"></span>
-                                    <span v-if="selected" class="ml-auto opacity-70">✓</span>
-                                </div>
-                            </template>
-                        </VirtualCombobox>
+                                </template>
+                            </VirtualCombobox>
+                        </div>
                         <label class="inline-flex items-center gap-2">
                             <Checkbox v-model="emojiAnimType" />
                             <span>{{ t('dialog.gallery_icons.emoji_animation_type') }}</span>
@@ -247,25 +245,24 @@
                             <Button
                                 size="sm"
                                 variant="outline"
-                                class="mr-3"
                                 @click="openExternalLink('https://vrcemoji.com')">
                                 {{ t('dialog.gallery_icons.create_animated_emoji') }}
                             </Button>
-                            <span style="margin-right: 8px">{{ t('dialog.gallery_icons.emoji_animation_fps') }}</span>
+                            <span class="text-sm">{{ t('dialog.gallery_icons.emoji_animation_fps') }}</span>
                             <NumberField
                                 v-model="emojiAnimFps"
                                 :min="1"
                                 :max="64"
                                 :step="1"
                                 :format-options="{ maximumFractionDigits: 0 }"
-                                class="mr-2.5 w-28">
+                                class="w-28">
                                 <NumberFieldContent>
                                     <NumberFieldDecrement />
                                     <NumberFieldInput />
                                     <NumberFieldIncrement />
                                 </NumberFieldContent>
                             </NumberField>
-                            <span style="margin-right: 8px">{{
+                            <span class="text-sm">{{
                                 t('dialog.gallery_icons.emoji_animation_frame_count')
                             }}</span>
                             <NumberField
@@ -274,71 +271,63 @@
                                 :max="64"
                                 :step="1"
                                 :format-options="{ maximumFractionDigits: 0 }"
-                                class="mr-2.5 w-28">
+                                class="w-28">
                                 <NumberFieldContent>
                                     <NumberFieldDecrement />
                                     <NumberFieldInput />
                                     <NumberFieldIncrement />
                                 </NumberFieldContent>
                             </NumberField>
-                            <label class="inline-flex items-center gap-2" style="margin-left: 8px; margin-right: 8px">
+                            <label class="inline-flex items-center gap-2">
                                 <Checkbox v-model="emojiAnimLoopPingPong" />
                                 <span>{{ t('dialog.gallery_icons.emoji_loop_pingpong') }}</span>
                             </label>
-                            <br />
-                            <br />
-                            <span>{{ t('dialog.gallery_icons.flipbook_info') }}</span>
                         </template>
+                        <span v-if="emojiAnimType" class="basis-full text-sm text-muted-foreground">{{ t('dialog.gallery_icons.flipbook_info') }}</span>
                     </div>
-                    <br />
-                    <div class="inline-block mt-2.5 w-auto cursor-default" v-for="image in emojiTable" :key="image.id">
-                        <template v-if="image.versions && image.versions.length > 0">
+                    <ItemGroup
+                        class="grid gap-3 mt-3"
+                        style="grid-template-columns: repeat(auto-fill, minmax(160px, 1fr))">
+                        <Item
+                            v-for="image in emojiTable"
+                            :key="image.id"
+                            variant="outline"
+                            size="sm"
+                            class="p-0 x-hover-card hover:bg-accent hover:shadow-sm"
+                            as-child>
                             <div
-                                class="h-[200px] w-[200px] rounded-[20px] overflow-hidden cursor-pointer"
-                                v-if="image.versions[image.versions.length - 1].file.url"
-                                @click="
-                                    showFullscreenImageDialog(
-                                        image.versions[image.versions.length - 1].file.url,
-                                        getEmojiFileName(image)
-                                    )
-                                ">
-                                <Emoji
-                                    :imageUrl="image.versions[image.versions.length - 1].file.url"
-                                    :size="200"></Emoji>
+                                v-if="image.versions && image.versions.length > 0 && image.versions[image.versions.length - 1].file.url"
+                                class="overflow-hidden">
+                                <ItemHeader
+                                    class="cursor-pointer"
+                                    @click="showFullscreenImageDialog(image.versions[image.versions.length - 1].file.url, getEmojiFileName(image))">
+                                    <Emoji
+                                        :imageUrl="image.versions[image.versions.length - 1].file.url"
+                                        :size="200"
+                                        class="aspect-square w-full rounded-t-md" />
+                                </ItemHeader>
+                                <ItemContent class="min-w-0 px-2.5 pt-1.5 pb-0">
+                                    <ItemDescription class="text-xs flex items-center gap-1 flex-wrap">
+                                        <span v-if="image.loopStyle === 'pingpong'">
+                                            <RefreshCw class="size-3" />
+                                        </span>
+                                        <span>{{ image.animationStyle }}</span>
+                                        <span v-if="image.framesOverTime">{{ image.framesOverTime }}fps</span>
+                                        <span v-if="image.frames">{{ image.frames }}frames</span>
+                                    </ItemDescription>
+                                </ItemContent>
+                                <ItemFooter class="p-2 gap-1">
+                                    <Button
+                                        size="icon-sm"
+                                        variant="ghost"
+                                        class="rounded-full text-destructive"
+                                        @click="deleteEmoji(image.id)">
+                                        <Trash2 />
+                                    </Button>
+                                </ItemFooter>
                             </div>
-                            <div style="display: inline-block; margin: 6px">
-                                <span v-if="image.loopStyle === 'pingpong'">
-                                    <RefreshCw style="margin-right: 6px" />
-                                </span>
-                                <span style="margin-right: 6px">{{ image.animationStyle }}</span>
-                                <span v-if="image.framesOverTime" style="margin-right: 6px"
-                                    >{{ image.framesOverTime }}fps</span
-                                >
-                                <span v-if="image.frames" style="margin-right: 6px">{{ image.frames }}frames</span>
-                                <br />
-                            </div>
-                            <div class="float-right" style="margin-top: 6px">
-                                <Button
-                                    class="rounded-full mr-2"
-                                    size="icon-sm"
-                                    variant="outline"
-                                    @click="
-                                        showFullscreenImageDialog(
-                                            image.versions[image.versions.length - 1].file.url,
-                                            getEmojiFileName(image)
-                                        )
-                                    "
-                                    ><Maximize2
-                                /></Button>
-                                <Button
-                                    class="rounded-full mr-2"
-                                    size="icon-sm"
-                                    variant="outline"
-                                    @click="deleteEmoji(image.id)">
-                                    <Trash2
-                                /></Button></div
-                        ></template>
-                    </div>
+                        </Item>
+                    </ItemGroup>
                 </div>
             </template>
 
@@ -350,9 +339,6 @@
                         accept="image/*"
                         @change="onFileChangeSticker"
                         style="display: none" />
-                    <span>{{ t('dialog.gallery_icons.recommended_image_size') }}: 1024x1024px (1:1)</span>
-                    <br />
-                    <br />
                     <ButtonGroup>
                         <Button variant="outline" size="sm" @click="refreshStickerTable">
                             <RefreshCw />
@@ -367,40 +353,37 @@
                             {{ t('dialog.gallery_icons.upload') }}
                         </Button>
                     </ButtonGroup>
-                    <br />
-                    <div
-                        class="inline-block mt-2.5 w-auto cursor-default"
-                        v-for="image in stickerTable"
-                        :key="image.id">
-                        <template v-if="image.versions && image.versions.length > 0">
+                    <ItemGroup
+                        class="grid gap-3 mt-3"
+                        style="grid-template-columns: repeat(auto-fill, minmax(160px, 1fr))">
+                        <Item
+                            v-for="image in stickerTable"
+                            :key="image.id"
+                            variant="outline"
+                            size="sm"
+                            class="p-0 x-hover-card hover:bg-accent hover:shadow-sm"
+                            as-child>
                             <div
-                                class="h-[200px] w-[200px] rounded-[20px] overflow-hidden cursor-pointer"
-                                v-if="image.versions[image.versions.length - 1].file.url"
-                                @click="showFullscreenImageDialog(image.versions[image.versions.length - 1].file.url)">
-                                <img
-                                    class="h-full w-full rounded-[15px] object-cover"
-                                    :src="image.versions[image.versions.length - 1].file.url"
-                                    loading="lazy" />
+                                v-if="image.versions && image.versions.length > 0 && image.versions[image.versions.length - 1].file.url"
+                                class="overflow-hidden">
+                                <ItemHeader class="cursor-pointer" @click="showFullscreenImageDialog(image.versions[image.versions.length - 1].file.url)">
+                                    <img
+                                        :src="image.versions[image.versions.length - 1].file.url"
+                                        loading="lazy"
+                                        class="aspect-square w-full rounded-t-md object-cover" />
+                                </ItemHeader>
+                                <ItemFooter class="p-2 gap-1">
+                                    <Button
+                                        size="icon-sm"
+                                        variant="ghost"
+                                        class="rounded-full text-destructive"
+                                        @click="deleteSticker(image.id)">
+                                        <Trash2 />
+                                    </Button>
+                                </ItemFooter>
                             </div>
-                            <div class="float-right" style="margin-top: 6px">
-                                <Button
-                                    class="rounded-full mr-2"
-                                    size="icon-sm"
-                                    variant="outline"
-                                    @click="
-                                        showFullscreenImageDialog(image.versions[image.versions.length - 1].file.url)
-                                    "
-                                    ><Maximize2
-                                /></Button>
-                                <Button
-                                    class="rounded-full"
-                                    size="icon-sm"
-                                    variant="outline"
-                                    @click="deleteSticker(image.id)"
-                                    ><Trash2
-                                /></Button></div
-                        ></template>
-                    </div>
+                        </Item>
+                    </ItemGroup>
                 </div>
             </template>
 
@@ -412,9 +395,6 @@
                         accept="image/*"
                         @change="onFileChangePrint"
                         style="display: none" />
-                    <span>{{ t('dialog.gallery_icons.recommended_image_size') }}: 1920x1080px (16:9)</span>
-                    <br />
-                    <br />
                     <div style="display: flex; align-items: center">
                         <ButtonGroup>
                             <Button variant="outline" size="sm" @click="refreshPrintTable">
@@ -442,61 +422,63 @@
                             <span>{{ t('dialog.gallery_icons.crop_print_border') }}</span>
                         </label>
                     </div>
-                    <br />
-                    <div class="inline-block mt-2.5 w-auto cursor-default" v-for="image in printTable" :key="image.id">
-                        <div
-                            class="h-[200px] w-[200px] rounded-[20px] overflow-hidden cursor-pointer"
-                            @click="showFullscreenImageDialog(image.files.image, getPrintFileName(image))">
-                            <img
-                                class="h-full w-full rounded-[15px] object-cover"
-                                :src="image.files.image"
-                                loading="lazy" />
-                        </div>
-                        <div style="margin-top: 6px; width: 208px">
-                            <span class="block truncate" v-if="image.note" v-text="image.note"></span>
-                            <span v-else class="block">&nbsp;</span>
-                            <Location
-                                class="block truncate"
-                                v-if="image.worldId"
-                                :location="image.worldId"
-                                :hint="image.worldName" />
-                            <span v-else class="block">&nbsp;</span>
-                            <DisplayName
-                                class="block truncate font-mono"
-                                v-if="image.authorId"
-                                :userid="image.authorId"
-                                :hint="image.authorName" />
-                            <span v-else class="font-mono block">&nbsp;</span>
-                            <span v-if="image.createdAt" class="block truncate font-mono text-[11px]">
-                                {{ formatDateFilter(image.createdAt, 'long') }}
-                            </span>
-                            <span v-else class="block">&nbsp;</span>
-                        </div>
-                        <div class="float-right">
-                            <Button
-                                class="rounded-full mr-2"
-                                size="icon-sm"
-                                variant="outline"
-                                @click="showFullscreenImageDialog(image.files.image, getPrintFileName(image))">
-                                <Maximize2
-                            /></Button>
-                            <Button
-                                class="rounded-full"
-                                size="icon-sm"
-                                variant="outline"
-                                @click="deletePrint(image.id)">
-                                <Trash2
-                            /></Button>
-                        </div>
-                    </div>
+                    <ItemGroup
+                        class="grid gap-3 mt-3"
+                        style="grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))">
+                        <Item
+                            v-for="image in printTable"
+                            :key="image.id"
+                            variant="outline"
+                            size="sm"
+                            class="p-0 x-hover-card hover:bg-accent hover:shadow-sm"
+                            as-child>
+                            <div class="overflow-hidden">
+                                <ItemHeader class="cursor-pointer" @click="showFullscreenImageDialog(image.files.image, getPrintFileName(image))">
+                                    <img
+                                        :src="image.files.image"
+                                        loading="lazy"
+                                        class="aspect-[16/9] w-full rounded-t-md object-cover" />
+                                </ItemHeader>
+                                <ItemContent class="min-w-0 px-2.5 pt-1.5 pb-0">
+                                    <ItemTitle v-if="image.note" class="truncate text-sm">
+                                        {{ image.note }}
+                                    </ItemTitle>
+                                    <ItemDescription class="text-xs truncate">
+                                        <Location
+                                            v-if="image.worldId"
+                                            :location="image.worldId"
+                                            :hint="image.worldName" />
+                                        <span v-else>&nbsp;</span>
+                                    </ItemDescription>
+                                    <ItemDescription class="text-xs truncate font-mono">
+                                        <DisplayName
+                                            v-if="image.authorId"
+                                            :userid="image.authorId"
+                                            :hint="image.authorName" />
+                                        <span v-else>&nbsp;</span>
+                                    </ItemDescription>
+                                    <ItemDescription v-if="image.createdAt" class="text-[11px] truncate font-mono">
+                                        {{ formatDateFilter(image.createdAt, 'long') }}
+                                    </ItemDescription>
+                                </ItemContent>
+                                <ItemFooter class="p-2 gap-1">
+                                    <Button
+                                        size="icon-sm"
+                                        variant="ghost"
+                                        class="rounded-full text-destructive"
+                                        @click="deletePrint(image.id)">
+                                        <Trash2 />
+                                    </Button>
+                                </ItemFooter>
+                            </div>
+                        </Item>
+                    </ItemGroup>
                 </div>
             </template>
 
             <template #inventory>
                 <div>
-                    <br />
-                    <br />
-                    <div style="display: flex; align-items: center">
+                    <div class="flex items-center">
                         <ButtonGroup>
                             <Button variant="outline" size="sm" @click="getInventory">
                                 <RefreshCw />
@@ -508,40 +490,51 @@
                             </Button>
                         </ButtonGroup>
                     </div>
-                    <br />
-                    <div
-                        class="inline-block mt-2.5 w-auto cursor-default"
-                        v-for="item in inventoryTable"
-                        :key="item.id">
-                        <div class="h-[200px] w-[200px] rounded-[20px] overflow-hidden cursor-default">
-                            <img
-                                class="h-full w-full rounded-[15px] object-cover"
-                                :src="item.imageUrl"
-                                loading="lazy" />
-                        </div>
-                        <div style="margin-top: 6px; width: 208px">
-                            <span class="block truncate" v-text="item.name"></span>
-                            <span v-if="item.description" class="block truncate" v-text="item.description"></span>
-                            <span v-else class="block">&nbsp;</span>
-                            <span class="block truncate font-mono text-[11px]">
-                                {{ formatDateFilter(item.created_at, 'long') }}
-                            </span>
-                            <span v-if="item.itemType === 'prop'">{{ t('dialog.gallery_icons.item') }}</span>
-                            <span v-else-if="item.itemType === 'sticker'">{{ t('dialog.gallery_icons.sticker') }}</span>
-                            <span v-else-if="item.itemType === 'droneskin'">{{
-                                t('dialog.gallery_icons.drone_skin')
-                            }}</span>
-                            <span v-else-if="item.itemType === 'emoji'">{{ t('dialog.gallery_icons.emoji') }}</span>
-                            <span v-else v-text="item.itemTypeLabel"></span>
-                        </div>
-                        <Button
+                    <ItemGroup
+                        class="grid gap-3 mt-3"
+                        style="grid-template-columns: repeat(auto-fill, minmax(180px, 1fr))">
+                        <Item
+                            v-for="item in inventoryTable"
+                            :key="item.id"
+                            variant="outline"
                             size="sm"
-                            v-if="item.itemType === 'bundle'"
-                            @click="consumeInventoryBundle(item.id)"
-                            class="float-right">
-                            {{ t('dialog.gallery_icons.consume_bundle') }}
-                        </Button>
-                    </div>
+                            class="p-0 x-hover-card hover:bg-accent hover:shadow-sm"
+                            as-child>
+                            <div class="overflow-hidden">
+                                <ItemHeader class="cursor-pointer" @click="showFullscreenImageDialog(item.imageUrl)">
+                                    <img
+                                        :src="item.imageUrl"
+                                        loading="lazy"
+                                        class="aspect-square w-full rounded-t-md object-cover" />
+                                </ItemHeader>
+                                <ItemContent class="min-w-0 px-2.5 pt-1.5 pb-0">
+                                    <ItemTitle class="truncate text-sm">
+                                        {{ item.name }}
+                                    </ItemTitle>
+                                    <ItemDescription v-if="item.description" class="text-xs truncate">
+                                        {{ item.description }}
+                                    </ItemDescription>
+                                    <ItemDescription class="text-[11px] truncate font-mono">
+                                        {{ formatDateFilter(item.created_at, 'long') }}
+                                    </ItemDescription>
+                                    <ItemDescription class="text-xs">
+                                        <span v-if="item.itemType === 'prop'">{{ t('dialog.gallery_icons.item') }}</span>
+                                        <span v-else-if="item.itemType === 'sticker'">{{ t('dialog.gallery_icons.sticker') }}</span>
+                                        <span v-else-if="item.itemType === 'droneskin'">{{ t('dialog.gallery_icons.drone_skin') }}</span>
+                                        <span v-else-if="item.itemType === 'emoji'">{{ t('dialog.gallery_icons.emoji') }}</span>
+                                        <span v-else v-text="item.itemTypeLabel"></span>
+                                    </ItemDescription>
+                                </ItemContent>
+                                <ItemFooter v-if="item.itemType === 'bundle'" class="p-2">
+                                    <Button
+                                        size="sm"
+                                        @click="consumeInventoryBundle(item.id)">
+                                        {{ t('dialog.gallery_icons.consume_bundle') }}
+                                    </Button>
+                                </ItemFooter>
+                            </div>
+                        </Item>
+                    </ItemGroup>
                 </div>
             </template>
         </TabsUnderline>
@@ -557,7 +550,7 @@
 </template>
 
 <script setup>
-    import { ArrowLeft, Gift, Maximize2, RefreshCw, Trash2, Upload, X } from 'lucide-vue-next';
+    import { ArrowLeft, Check, Gift, RefreshCw, Trash2, Upload, X } from 'lucide-vue-next';
     import {
         NumberField,
         NumberFieldContent,
@@ -572,6 +565,7 @@
     import { InputGroupTextareaField } from '@/components/ui/input-group';
     import { TabsUnderline } from '@/components/ui/tabs';
     import { VirtualCombobox } from '@/components/ui/virtual-combobox';
+    import { Item, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemTitle } from '@/components/ui/item';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
@@ -696,6 +690,29 @@
         router.push({ name: 'tools' });
     }
 
+    /**
+     *
+     * @param {string} id
+     */
+    function triggerFileInput(id) {
+        document.getElementById(id)?.click();
+    }
+
+    /**
+     *
+     * @param {Array<{ id: string }>} array
+     * @param {string} itemId
+     */
+    function removeItemById(array, itemId) {
+        const { length } = array;
+        for (let i = 0; i < length; ++i) {
+            if (itemId === array[i].id) {
+                array.splice(i, 1);
+                break;
+            }
+        }
+    }
+
     /**
      *
      * @param file
@@ -731,31 +748,73 @@
 
     /**
      *
-     * @param e
+     * @param {string} fileId
+     * @param {Array<{ id: string }>} array
      */
-    function onFileChangeGallery(e) {
+    function deleteFileAndRemove(fileId, array) {
+        miscRequest.deleteFile(fileId).then((args) => {
+            removeItemById(array, args.fileId);
+            return args;
+        });
+    }
+
+    /**
+     *
+     * @param {string} currentUrl
+     * @param {string} fileId
+     * @returns {boolean}
+     */
+    function isCurrentFile(currentUrl, fileId) {
+        return fileId === extractFileId(currentUrl);
+    }
+
+    /**
+     *
+     * @param {Event} e
+     * @param {{
+     *   inputSelector: string,
+     *   aspectRatio: number,
+     *   beforeCrop?: (file: File) => void,
+     *   upload: (payload: { file: File, blob: Blob, base64Body: string }) => Promise<void>,
+     *   errorMessage?: string
+     * }} options
+     */
+    function openImageUploadFlow(
+        e,
+        {
+            inputSelector,
+            aspectRatio,
+            beforeCrop,
+            upload,
+            errorMessage = 'Failed to upload'
+        }
+    ) {
         const { file, clearInput } = handleImageUploadInput(e, {
-            inputSelector: '#GalleryUploadButton',
+            inputSelector,
             tooLargeMessage: () => t('message.file.too_large'),
             invalidTypeMessage: () => t('message.file.not_image')
         });
         if (!file) {
             return;
         }
+        beforeCrop?.(file);
         clearInput();
-        openCropDialog(file, t('dialog.change_content_image.upload'), 4 / 3, async (blob) => {
+        openCropDialog(file, t('dialog.change_content_image.upload'), aspectRatio, async (blob) => {
             startUpload();
             try {
                 await withUploadTimeout(
                     (async () => {
                         const base64Body = await readFileAsBase64(blob);
-                        const args = await vrcPlusImageRequest.uploadGalleryImage(base64Body);
-                        handleGalleryImageAdd(args);
+                        await upload({
+                            file,
+                            blob,
+                            base64Body
+                        });
                     })()
                 );
                 toast.success(t('message.upload.success'));
             } catch (error) {
-                console.error('Failed to upload', error);
+                console.error(errorMessage, error);
                 toast.error(t('message.upload.error'));
             } finally {
                 finishUpload();
@@ -763,11 +822,26 @@
         });
     }
 
+    /**
+     *
+     * @param e
+     */
+    function onFileChangeGallery(e) {
+        openImageUploadFlow(e, {
+            inputSelector: '#GalleryUploadButton',
+            aspectRatio: 4 / 3,
+            upload: async ({ base64Body }) => {
+                const args = await vrcPlusImageRequest.uploadGalleryImage(base64Body);
+                handleGalleryImageAdd(args);
+            }
+        });
+    }
+
     /**
      *
      */
     function displayGalleryUpload() {
-        document.getElementById('GalleryUploadButton').click();
+        triggerFileInput('GalleryUploadButton');
     }
 
     /**
@@ -801,11 +875,7 @@
      * @param fileId
      */
     function compareCurrentProfilePic(fileId) {
-        const currentProfilePicOverride = extractFileId(currentUser.value.profilePicOverride);
-        if (fileId === currentProfilePicOverride) {
-            return true;
-        }
-        return false;
+        return isCurrentFile(currentUser.value.profilePicOverride, fileId);
     }
 
     /**
@@ -813,18 +883,7 @@
      * @param fileId
      */
     function deleteGalleryImage(fileId) {
-        miscRequest.deleteFile(fileId).then((args) => {
-            const array = galleryTable.value;
-            const { length } = array;
-            for (let i = 0; i < length; ++i) {
-                if (args.fileId === array[i].id) {
-                    array.splice(i, 1);
-                    break;
-                }
-            }
-
-            return args;
-        });
+        deleteFileAndRemove(fileId, galleryTable.value);
     }
 
     /**
@@ -832,33 +891,15 @@
      * @param e
      */
     function onFileChangeVRCPlusIcon(e) {
-        const { file, clearInput } = handleImageUploadInput(e, {
+        openImageUploadFlow(e, {
             inputSelector: '#VRCPlusIconUploadButton',
-            tooLargeMessage: () => t('message.file.too_large'),
-            invalidTypeMessage: () => t('message.file.not_image')
-        });
-        if (!file) {
-            return;
-        }
-        clearInput();
-        openCropDialog(file, t('dialog.change_content_image.upload'), 1 / 1, async (blob) => {
-            startUpload();
-            try {
-                await withUploadTimeout(
-                    (async () => {
-                        const base64Body = await readFileAsBase64(blob);
-                        const args = await vrcPlusIconRequest.uploadVRCPlusIcon(base64Body);
-                        if (Object.keys(VRCPlusIconsTable.value).length !== 0) {
-                            VRCPlusIconsTable.value.unshift(args.json);
-                        }
-                    })()
-                );
-                toast.success(t('message.upload.success'));
-            } catch (error) {
-                console.error('Failed to upload VRC+ icon', error);
-                toast.error(t('message.upload.error'));
-            } finally {
-                finishUpload();
+            aspectRatio: 1 / 1,
+            errorMessage: 'Failed to upload VRC+ icon',
+            upload: async ({ base64Body }) => {
+                const args = await vrcPlusIconRequest.uploadVRCPlusIcon(base64Body);
+                if (VRCPlusIconsTable.value.length > 0) {
+                    VRCPlusIconsTable.value.unshift(args.json);
+                }
             }
         });
     }
@@ -867,7 +908,7 @@
      *
      */
     function displayVRCPlusIconUpload() {
-        document.getElementById('VRCPlusIconUploadButton').click();
+        triggerFileInput('VRCPlusIconUploadButton');
     }
 
     /**
@@ -901,11 +942,7 @@
      * @param userIcon
      */
     function compareCurrentVRCPlusIcon(userIcon) {
-        const currentUserIcon = extractFileId(currentUser.value.userIcon);
-        if (userIcon === currentUserIcon) {
-            return true;
-        }
-        return false;
+        return isCurrentFile(currentUser.value.userIcon, userIcon);
     }
 
     /**
@@ -913,17 +950,7 @@
      * @param fileId
      */
     function deleteVRCPlusIcon(fileId) {
-        miscRequest.deleteFile(fileId).then((args) => {
-            const array = VRCPlusIconsTable.value;
-            const { length } = array;
-            for (let i = 0; i < length; ++i) {
-                if (args.fileId === array[i].id) {
-                    array.splice(i, 1);
-                    break;
-                }
-            }
-            return args;
-        });
+        deleteFileAndRemove(fileId, VRCPlusIconsTable.value);
     }
 
     /**
@@ -958,47 +985,30 @@
      * @param e
      */
     function onFileChangeEmoji(e) {
-        const { file, clearInput } = handleImageUploadInput(e, {
+        openImageUploadFlow(e, {
             inputSelector: '#EmojiUploadButton',
-            tooLargeMessage: () => t('message.file.too_large'),
-            invalidTypeMessage: () => t('message.file.not_image')
-        });
-        if (!file) {
-            return;
-        }
-        // set Emoji settings from fileName
-        parseEmojiFileName(file.name);
-        clearInput();
-        openCropDialog(file, t('dialog.change_content_image.upload'), 1 / 1, async (blob) => {
-            startUpload();
-            try {
-                await withUploadTimeout(
-                    (async () => {
-                        const params = {
-                            tag: emojiAnimType.value ? 'emojianimated' : 'emoji',
-                            animationStyle: emojiAnimationStyle.value.toLowerCase(),
-                            maskTag: 'square'
-                        };
-                        if (emojiAnimType.value) {
-                            params.frames = emojiAnimFrameCount.value;
-                            params.framesOverTime = emojiAnimFps.value;
-                        }
-                        if (emojiAnimLoopPingPong.value) {
-                            params.loopStyle = 'pingpong';
-                        }
-                        const base64Body = await readFileAsBase64(blob);
-                        const args = await vrcPlusImageRequest.uploadEmoji(base64Body, params);
-                        if (Object.keys(emojiTable.value).length !== 0) {
-                            emojiTable.value.unshift(args.json);
-                        }
-                    })()
-                );
-                toast.success(t('message.upload.success'));
-            } catch (error) {
-                console.error('Failed to upload', error);
-                toast.error(t('message.upload.error'));
-            } finally {
-                finishUpload();
+            aspectRatio: 1 / 1,
+            beforeCrop: (file) => {
+                // set Emoji settings from fileName
+                parseEmojiFileName(file.name);
+            },
+            upload: async ({ base64Body }) => {
+                const params = {
+                    tag: emojiAnimType.value ? 'emojianimated' : 'emoji',
+                    animationStyle: emojiAnimationStyle.value.toLowerCase(),
+                    maskTag: 'square'
+                };
+                if (emojiAnimType.value) {
+                    params.frames = emojiAnimFrameCount.value;
+                    params.framesOverTime = emojiAnimFps.value;
+                }
+                if (emojiAnimLoopPingPong.value) {
+                    params.loopStyle = 'pingpong';
+                }
+                const args = await vrcPlusImageRequest.uploadEmoji(base64Body, params);
+                if (emojiTable.value.length > 0) {
+                    emojiTable.value.unshift(args.json);
+                }
             }
         });
     }
@@ -1007,7 +1017,7 @@
      *
      */
     function displayEmojiUpload() {
-        document.getElementById('EmojiUploadButton').click();
+        triggerFileInput('EmojiUploadButton');
     }
 
     /**
@@ -1015,17 +1025,7 @@
      * @param fileId
      */
     function deleteEmoji(fileId) {
-        miscRequest.deleteFile(fileId).then((args) => {
-            const array = emojiTable.value;
-            const { length } = array;
-            for (let i = 0; i < length; ++i) {
-                if (args.fileId === array[i].id) {
-                    array.splice(i, 1);
-                    break;
-                }
-            }
-            return args;
-        });
+        deleteFileAndRemove(fileId, emojiTable.value);
     }
 
     /**
@@ -1033,35 +1033,16 @@
      * @param e
      */
     function onFileChangeSticker(e) {
-        const { file, clearInput } = handleImageUploadInput(e, {
+        openImageUploadFlow(e, {
             inputSelector: '#StickerUploadButton',
-            tooLargeMessage: () => t('message.file.too_large'),
-            invalidTypeMessage: () => t('message.file.not_image')
-        });
-        if (!file) {
-            return;
-        }
-        clearInput();
-        openCropDialog(file, t('dialog.change_content_image.upload'), 1 / 1, async (blob) => {
-            startUpload();
-            try {
-                await withUploadTimeout(
-                    (async () => {
-                        const params = {
-                            tag: 'sticker',
-                            maskTag: 'square'
-                        };
-                        const base64Body = await readFileAsBase64(blob);
-                        const args = await vrcPlusImageRequest.uploadSticker(base64Body, params);
-                        handleStickerAdd(args);
-                    })()
-                );
-                toast.success(t('message.upload.success'));
-            } catch (error) {
-                console.error('Failed to upload', error);
-                toast.error(t('message.upload.error'));
-            } finally {
-                finishUpload();
+            aspectRatio: 1 / 1,
+            upload: async ({ base64Body }) => {
+                const params = {
+                    tag: 'sticker',
+                    maskTag: 'square'
+                };
+                const args = await vrcPlusImageRequest.uploadSticker(base64Body, params);
+                handleStickerAdd(args);
             }
         });
     }
@@ -1070,7 +1051,7 @@
      *
      */
     function displayStickerUpload() {
-        document.getElementById('StickerUploadButton').click();
+        triggerFileInput('StickerUploadButton');
     }
 
     /**
@@ -1078,18 +1059,7 @@
      * @param fileId
      */
     function deleteSticker(fileId) {
-        miscRequest.deleteFile(fileId).then((args) => {
-            const array = stickerTable.value;
-            const { length } = array;
-            for (let i = 0; i < length; ++i) {
-                if (args.fileId === array[i].id) {
-                    array.splice(i, 1);
-                    break;
-                }
-            }
-
-            return args;
-        });
+        deleteFileAndRemove(fileId, stickerTable.value);
     }
 
     /**
@@ -1097,43 +1067,24 @@
      * @param e
      */
     function onFileChangePrint(e) {
-        const { file, clearInput } = handleImageUploadInput(e, {
+        openImageUploadFlow(e, {
             inputSelector: '#PrintUploadButton',
-            tooLargeMessage: () => t('message.file.too_large'),
-            invalidTypeMessage: () => t('message.file.not_image')
-        });
-        if (!file) {
-            return;
-        }
-        clearInput();
-        openCropDialog(file, t('dialog.change_content_image.upload'), 16 / 9, async (blob) => {
-            startUpload();
-            try {
-                await withUploadTimeout(
-                    (async () => {
-                        const date = new Date();
-                        // why the fuck isn't this UTC
-                        date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
-                        const timestamp = date.toISOString().slice(0, 19);
-                        const params = {
-                            note: printUploadNote.value,
-                            // worldId: '',
-                            timestamp
-                        };
-                        const base64Body = await readFileAsBase64(blob);
-                        const cropWhiteBorder = printCropBorder.value;
-                        const args = await vrcPlusImageRequest.uploadPrint(base64Body, cropWhiteBorder, params);
-                        if (Object.keys(printTable.value).length !== 0) {
-                            printTable.value.unshift(args.json);
-                        }
-                    })()
-                );
-                toast.success(t('message.upload.success'));
-            } catch (error) {
-                console.error('Failed to upload', error);
-                toast.error(t('message.upload.error'));
-            } finally {
-                finishUpload();
+            aspectRatio: 16 / 9,
+            upload: async ({ base64Body }) => {
+                const date = new Date();
+                // why the fuck isn't this UTC
+                date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
+                const timestamp = date.toISOString().slice(0, 19);
+                const params = {
+                    note: printUploadNote.value,
+                    // worldId: '',
+                    timestamp
+                };
+                const cropWhiteBorder = printCropBorder.value;
+                const args = await vrcPlusImageRequest.uploadPrint(base64Body, cropWhiteBorder, params);
+                if (printTable.value.length > 0) {
+                    printTable.value.unshift(args.json);
+                }
             }
         });
     }
@@ -1142,7 +1093,7 @@
      *
      */
     function displayPrintUpload() {
-        document.getElementById('PrintUploadButton').click();
+        triggerFileInput('PrintUploadButton');
     }
 
     /**
@@ -1151,14 +1102,7 @@
      */
     function deletePrint(printId) {
         vrcPlusImageRequest.deletePrint(printId).then((args) => {
-            const array = printTable.value;
-            const { length } = array;
-            for (let i = 0; i < length; ++i) {
-                if (args.printId === array[i].id) {
-                    array.splice(i, 1);
-                    break;
-                }
-            }
+            removeItemById(printTable.value, args.printId);
         });
     }