From a9ed0c180c5fba8aa20537b4b3b47bd01448f6b6 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Tue, 5 May 2026 04:17:17 +0800
Subject: [PATCH] fix(stage-ui): rollback to previous implementation of model
 selector

---
 .../live2d-report-modal.story.vue             | 197 +++++++
 .../dialogs/model-selector/model-selector.vue | 500 ++++--------------
 2 files changed, 308 insertions(+), 389 deletions(-)
 create mode 100644 packages/stage-ui/src/components/scenarios/dialogs/model-selector/live2d-report-modal.story.vue

diff --git a/packages/stage-ui/src/components/scenarios/dialogs/model-selector/live2d-report-modal.story.vue b/packages/stage-ui/src/components/scenarios/dialogs/model-selector/live2d-report-modal.story.vue
new file mode 100644
index 000000000..e6aea65eb
--- /dev/null
+++ b/packages/stage-ui/src/components/scenarios/dialogs/model-selector/live2d-report-modal.story.vue
@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import type { Live2DValidationReport } from '@proj-airi/stage-ui-live2d'
+
+import { Button } from '@proj-airi/ui'
+import { reactive } from 'vue'
+
+import Live2DReportModal from './Live2DReportModal.vue'
+
+interface ReportVariantState {
+  open: boolean
+  events: string[]
+}
+
+const validReport: Live2DValidationReport = {
+  fileName: 'hiyori-production.model.zip',
+  totalFiles: 42,
+  status: 'VALID',
+  entryPoint: 'Hiyori/Hiyori.model3.json',
+  structureType: 'Standard (model3.json)',
+  errors: [],
+  warnings: [],
+  checks: [
+    'Entry point identified: Hiyori/Hiyori.model3.json',
+    'MOC3 Header Valid (Sub-version: 5, Size: 8.74 MB)',
+  ],
+  mocInfo: {
+    header: 'MOC3',
+    ver: 5,
+    size: 9164554,
+  },
+}
+
+const warningReport: Live2DValidationReport = {
+  fileName: 'elena-concert-heavy.zip',
+  totalFiles: 186,
+  status: 'WARNING',
+  entryPoint: 'model/elena.model3.json',
+  structureType: 'Standard (model3.json)',
+  errors: [],
+  warnings: [
+    'HEAVY RESOURCE: MOC file is 45.28 MB. This may cause performance issues in web browsers.',
+    'Missing preview image. AIRI can still import this model, but the selector card will use a fallback preview.',
+  ],
+  checks: [
+    'Entry point identified: model/elena.model3.json',
+    'MOC3 Header Valid (Sub-version: 5, Size: 45.28 MB)',
+  ],
+  mocInfo: {
+    header: 'MOC3',
+    ver: 5,
+    size: 47479521,
+  },
+}
+
+const invalidReport: Live2DValidationReport = {
+  fileName: 'broken-archive.zip',
+  totalFiles: 17,
+  status: 'INVALID',
+  entryPoint: null,
+  structureType: 'Unknown',
+  errors: [
+    'Invalid Structure: No .model3.json found and 0 .moc3 files encountered.',
+    'Missing thumbnail referenced by model settings.',
+    'BASENAME COLLISION: Filename "texture_00.png" exists in multiple locations: model/textures/texture_00.png, model/expressions/texture_00.png. This causes data loss in AIRI\'s loader.',
+  ],
+  warnings: [
+    'Archive contains loose files at the root. Put the model files in one folder before zipping.',
+  ],
+  checks: [],
+}
+
+const validState = reactive<ReportVariantState>({ open: true, events: [] })
+const warningState = reactive<ReportVariantState>({ open: true, events: [] })
+const invalidState = reactive<ReportVariantState>({ open: true, events: [] })
+
+function recordEvent(state: ReportVariantState, event: string) {
+  state.events = [event, ...state.events].slice(0, 4)
+}
+</script>
+
+<template>
+  <Story
+    title="Dialogs / Live2D Report Modal"
+    group="dialogs"
+  >
+    <Variant
+      id="valid"
+      title="Valid Report"
+    >
+      <div
+        :class="[
+          'mx-auto max-w-xl p-4',
+          'flex flex-col gap-3',
+        ]"
+      >
+        <Button @click="validState.open = true">
+          Open Valid Report
+        </Button>
+        <div
+          v-if="validState.events.length > 0"
+          :class="[
+            'rounded-lg bg-neutral-100/70 p-3 text-xs text-neutral-600',
+            'dark:bg-neutral-900/70 dark:text-neutral-300',
+          ]"
+        >
+          <div
+            v-for="event in validState.events"
+            :key="event"
+          >
+            {{ event }}
+          </div>
+        </div>
+        <Live2DReportModal
+          v-model:open="validState.open"
+          :report="validReport"
+          @close="recordEvent(validState, 'close')"
+          @confirm="recordEvent(validState, 'confirm')"
+          @fix-error="error => recordEvent(validState, `fixError: ${error}`)"
+        />
+      </div>
+    </Variant>
+
+    <Variant
+      id="warning"
+      title="Warning Report"
+    >
+      <div
+        :class="[
+          'mx-auto max-w-xl p-4',
+          'flex flex-col gap-3',
+        ]"
+      >
+        <Button @click="warningState.open = true">
+          Open Warning Report
+        </Button>
+        <div
+          v-if="warningState.events.length > 0"
+          :class="[
+            'rounded-lg bg-neutral-100/70 p-3 text-xs text-neutral-600',
+            'dark:bg-neutral-900/70 dark:text-neutral-300',
+          ]"
+        >
+          <div
+            v-for="event in warningState.events"
+            :key="event"
+          >
+            {{ event }}
+          </div>
+        </div>
+        <Live2DReportModal
+          v-model:open="warningState.open"
+          :report="warningReport"
+          @close="recordEvent(warningState, 'close')"
+          @confirm="recordEvent(warningState, 'confirm')"
+          @fix-error="error => recordEvent(warningState, `fixError: ${error}`)"
+        />
+      </div>
+    </Variant>
+
+    <Variant
+      id="invalid"
+      title="Invalid Report"
+    >
+      <div
+        :class="[
+          'mx-auto max-w-xl p-4',
+          'flex flex-col gap-3',
+        ]"
+      >
+        <Button @click="invalidState.open = true">
+          Open Invalid Report
+        </Button>
+        <div
+          v-if="invalidState.events.length > 0"
+          :class="[
+            'rounded-lg bg-neutral-100/70 p-3 text-xs text-neutral-600',
+            'dark:bg-neutral-900/70 dark:text-neutral-300',
+          ]"
+        >
+          <div
+            v-for="event in invalidState.events"
+            :key="event"
+          >
+            {{ event }}
+          </div>
+        </div>
+        <Live2DReportModal
+          v-model:open="invalidState.open"
+          :report="invalidReport"
+          @close="recordEvent(invalidState, 'close')"
+          @confirm="recordEvent(invalidState, 'confirm')"
+          @fix-error="error => recordEvent(invalidState, `fixError: ${error}`)"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/packages/stage-ui/src/components/scenarios/dialogs/model-selector/model-selector.vue b/packages/stage-ui/src/components/scenarios/dialogs/model-selector/model-selector.vue
index d8d8d9acb..7f51aec6b 100644
--- a/packages/stage-ui/src/components/scenarios/dialogs/model-selector/model-selector.vue
+++ b/packages/stage-ui/src/components/scenarios/dialogs/model-selector/model-selector.vue
@@ -3,13 +3,12 @@ import type { Live2DValidationReport } from '@proj-airi/stage-ui-live2d'
 
 import type { DisplayModel } from '../../../../stores/display-models'
 
-import { vAutoAnimate } from '@formkit/auto-animate/vue'
 import { validateLive2DZip } from '@proj-airi/stage-ui-live2d'
 import { Button } from '@proj-airi/ui'
 import { useFileDialog } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
-import { DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuRoot, DropdownMenuTrigger } from 'reka-ui'
-import { computed, ref, watch } from 'vue'
+import { DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuRoot, DropdownMenuTrigger, EditableArea, EditableEditTrigger, EditableInput, EditablePreview, EditableRoot, EditableSubmitTrigger } from 'reka-ui'
+import { ref, watch } from 'vue'
 
 import Live2DReportModal from './Live2DReportModal.vue'
 
@@ -26,91 +25,19 @@ const emits = defineEmits<{
 const displayModelStore = useDisplayModelsStore()
 const { displayModelsFromIndexedDBLoading, displayModels } = storeToRefs(displayModelStore)
 
-// Redesign State
-const viewMode = ref<'grid' | 'compact'>('compact')
-const searchQuery = ref('')
-const formatFilter = ref<'all' | 'live2d' | 'vrm'>('all')
-const sortBy = ref<'name' | 'date'>('date')
-
-const showRenameDialog = ref(false)
-const modelToRename = ref<DisplayModel | null>(null)
-const tempRenameValue = ref('')
+function handleRemoveModel(model: DisplayModel) {
+  displayModelStore.removeDisplayModel(model.id)
+}
 
 const highlightDisplayModelCard = ref<string | undefined>(props.selectedModel?.id)
 const showReportModal = ref(false)
 const pendingFile = ref<File | null>(null)
 const validationReport = ref<Live2DValidationReport | null>(null)
 
-const currentTab = ref<'library' | 'explore'>('library')
-
-const marketplaces = [
-  { name: 'Booth', vrm: true, live2d: true, languages: ['jp', 'us'], origin: 'Japan', url: 'https://booth.pm/en/browse/VTuber' },
-  { name: 'VGen', vrm: true, live2d: true, languages: ['us'], origin: 'USA', url: 'https://vgen.co' },
-  { name: 'itch.io', vrm: true, live2d: true, languages: ['us'], origin: 'USA', url: 'https://itch.io/game-assets' },
-  { name: 'Gumroad', vrm: true, live2d: true, languages: ['us'], origin: 'USA', url: 'https://gumroad.com' },
-  { name: 'Ko-fi', vrm: true, live2d: true, languages: ['us'], origin: 'USA', url: 'https://ko-fi.com/shop' },
-  { name: 'VRoid Hub', vrm: true, live2d: false, languages: ['jp', 'us'], origin: 'Japan', url: 'https://hub.vroid.com' },
-  { name: 'Sketchfab', vrm: true, live2d: false, languages: ['us'], origin: 'USA', url: 'https://sketchfab.com' },
-  { name: 'CGTrader', vrm: true, live2d: false, languages: ['us'], origin: 'USA', url: 'https://cgtrader.com' },
-  { name: 'Nizima', vrm: false, live2d: true, languages: ['jp', 'us'], origin: 'Japan', url: 'https://nizima.com' },
-  { name: 'Avatar Atelier', vrm: false, live2d: true, languages: ['us'], origin: 'USA', url: 'https://avataratelier.com' },
-  { name: 'VTuberAvatars', vrm: false, live2d: true, languages: ['us'], origin: 'USA', url: 'https://vtuberavatars.com' },
-]
-
-// Filtering Logic
-const filteredModels = computed(() => {
-  let result = [...displayModels.value]
-
-  // Search
-  if (searchQuery.value.trim()) {
-    const q = searchQuery.value.toLowerCase()
-    result = result.filter(m => m.name.toLowerCase().includes(q))
-  }
-
-  // Format Filter
-  if (formatFilter.value !== 'all') {
-    result = result.filter((m) => {
-      if (formatFilter.value === 'live2d')
-        return m.format === DisplayModelFormat.Live2dZip || m.format === DisplayModelFormat.Live2dDirectory
-      if (formatFilter.value === 'vrm')
-        return m.format === DisplayModelFormat.VRM
-      return true
-    })
-  }
-
-  // Sort
-  result.sort((a, b) => {
-    if (sortBy.value === 'name')
-      return a.name.localeCompare(b.name)
-    if (sortBy.value === 'date')
-      return b.importedAt - a.importedAt
-    return 0
-  })
-
-  return result
-})
-
-function handleRemoveModel(model: DisplayModel) {
-  displayModelStore.removeDisplayModel(model.id)
-}
-
 watch(() => props.selectedModel?.id, (modelId) => {
   highlightDisplayModelCard.value = modelId
 }, { immediate: true })
 
-function openRenameDialog(model: DisplayModel) {
-  modelToRename.value = model
-  tempRenameValue.value = model.name
-  showRenameDialog.value = true
-}
-
-function confirmRename() {
-  if (modelToRename.value && tempRenameValue.value.trim()) {
-    displayModelStore.renameDisplayModel(modelToRename.value.id, tempRenameValue.value.trim())
-    showRenameDialog.value = false
-  }
-}
-
 async function handleAddLive2DModel(file: FileList | null) {
   if (file === null || file.length === 0)
     return
@@ -123,17 +50,22 @@ async function handleAddLive2DModel(file: FileList | null) {
 
   if (report.status === 'VALID' && report.errors.length === 0) {
     confirmImport()
+    return
   }
-  else {
-    showReportModal.value = true
-  }
+
+  showReportModal.value = true
 }
 
 function confirmImport() {
-  if (pendingFile.value) {
-    displayModelStore.addDisplayModel(DisplayModelFormat.Live2dZip, pendingFile.value)
-    pendingFile.value = null
-  }
+  if (pendingFile.value === null)
+    return
+
+  displayModelStore.addDisplayModel(DisplayModelFormat.Live2dZip, pendingFile.value)
+  pendingFile.value = null
+}
+
+function handleFixError(error: string) {
+  void error
 }
 
 function handlePick(m: DisplayModel) {
@@ -143,8 +75,7 @@ function handlePick(m: DisplayModel) {
 }
 
 function handleMobilePick() {
-  const model = displayModels.value.find(model => model.id === highlightDisplayModelCard.value)
-  emits('pick', model)
+  emits('pick', displayModels.value.find(model => model.id === highlightDisplayModelCard.value))
   emits('close', undefined)
 }
 
@@ -171,127 +102,38 @@ const vrmDialog = useFileDialog({ accept: '.vrm', multiple: false, reset: true }
 
 live2dDialog.onChange(handleAddLive2DModel)
 vrmDialog.onChange(handleAddVRMModel)
-
-function handleFixError(err: string) {
-  // eslint-disable-next-line no-console
-  console.log('[Model Selector] Fixing error:', err)
-  // Logic to fix common errors (e.g. missing preview)
-  // For now, we provide guidance or mark as ignorable in the future
-  if (err.toLowerCase().includes('preview') || err.toLowerCase().includes('thumbnail') || err.toLowerCase().includes('icon')) {
-    // If it's a missing preview, we could generate a placeholder
-    // For this PR feedback, we just acknowledged the "Quick Fix" button existence
-  }
-}
 </script>
 
 <template>
-  <div :class="['pt-4 sm:pt-0', 'gap-4 sm:gap-6', 'h-full flex flex-col']">
-    <div class="flex items-center">
-      <Live2DReportModal
-        v-model:open="showReportModal"
-        :report="validationReport"
-        @confirm="confirmImport"
-        @fix-error="handleFixError"
-      />
+  <div pt="4 sm:0" gap="4 sm:6" h-full flex flex-col>
+    <Live2DReportModal
+      v-model:open="showReportModal"
+      :report="validationReport"
+      @confirm="confirmImport"
+      @fix-error="handleFixError"
+    />
 
-      <!-- Rename Dialog -->
-      <DialogRoot v-model:open="showRenameDialog">
-        <DialogPortal>
-          <DialogOverlay class="fixed inset-0 z-[10001] bg-black/50 backdrop-blur-sm" />
-          <DialogContent class="fixed left-1/2 top-1/2 z-[10001] max-w-md w-[90dvw] translate-x-[-50%] translate-y-[-50%] rounded-xl bg-white p-6 text-neutral-900 shadow-xl dark:bg-neutral-900 dark:text-neutral-100">
-            <DialogTitle class="text-lg font-bold">
-              Rename Model
-            </DialogTitle>
-            <div :class="['mt-4 flex flex-col gap-4', 'split-button-container']">
-              <input
-                v-model="tempRenameValue"
-                type="text"
-                class="w-full border border-neutral-200 rounded-lg bg-neutral-100 px-3 py-2 outline-none dark:border-neutral-800 dark:bg-neutral-800"
-                placeholder="Model Name"
-                @keyup.enter="confirmRename"
-              >
-              <div class="flex justify-end gap-2">
-                <Button variant="secondary" @click="showRenameDialog = false">
-                  Cancel
-                </Button>
-                <Button @click="confirmRename">
-                  Rename
-                </Button>
-              </div>
-            </div>
-          </DialogContent>
-        </DialogPortal>
-      </DialogRoot>
-    </div>
-
-    <div class="flex items-center justify-between">
-      <div class="flex items-center gap-4">
-        <div class="text-xl font-bold">
-          Model Selector
-        </div>
-        <!-- Tab Navigation -->
-        <div class="flex rounded-lg bg-neutral-100 p-1 dark:bg-neutral-800">
-          <button
-            :class="[
-              currentTab === 'library' ? 'bg-white dark:bg-neutral-700 shadow-sm' : 'opacity-50 hover:opacity-100',
-              'px-3 py-1 rounded-md transition-all text-sm font-bold flex items-center gap-1',
-            ]"
-            @click="currentTab = 'library'"
-          >
-            <div class="i-solar:library-bold-duotone" />
-            Library
-          </button>
-          <button
-            :class="[
-              currentTab === 'explore' ? 'bg-white dark:bg-neutral-700 shadow-sm' : 'opacity-50 hover:opacity-100',
-              'px-3 py-1 rounded-md transition-all text-sm font-bold flex items-center gap-1',
-            ]"
-            @click="currentTab = 'explore'"
-          >
-            <div class="i-solar:compass-bold-duotone" />
-            Explore
-          </button>
-        </div>
+    <div flex items-center>
+      <div w-full flex-1 text-xl>
+        Model Selector
       </div>
-
-      <div class="flex items-center gap-2">
-        <!-- View Mode Toggle (Only for Library) -->
-        <div v-if="currentTab === 'library'" class="mr-2 flex rounded-lg bg-neutral-100 p-1 dark:bg-neutral-800">
-          <button
-            :class="[
-              viewMode === 'grid' ? 'bg-white dark:bg-neutral-700 shadow-sm' : 'hover:bg-black/5 dark:hover:bg-white/5 opacity-50',
-              'p-1.5 rounded-md transition-all',
-            ]"
-            aria-label="Grid View"
-            @click="viewMode = 'grid'"
-          >
-            <div class="i-solar:widget-2-bold-duotone" />
-          </button>
-          <button
-            :class="[
-              viewMode === 'compact' ? 'bg-white dark:bg-neutral-700 shadow-sm' : 'hover:bg-black/5 dark:hover:bg-white/5 opacity-50',
-              'p-1.5 rounded-md transition-all',
-            ]"
-            aria-label="Compact Grid View"
-            @click="viewMode = 'compact'"
-          >
-            <div class="i-solar:list-bold-duotone" />
-          </button>
-        </div>
-
-        <DropdownMenuRoot v-if="currentTab === 'library'">
+      <div>
+        <DropdownMenuRoot>
           <DropdownMenuTrigger
-            class="flex items-center justify-center gap-2 rounded-lg bg-neutral-400/20 px-3 py-1.5 backdrop-blur-sm transition-colors duration-200 ease-in-out active:bg-neutral-400/60 dark:bg-neutral-700/50 hover:bg-neutral-400/45 active:dark:bg-neutral-700/90 hover:dark:bg-neutral-700/65"
+            bg="neutral-400/20 hover:neutral-400/45 active:neutral-400/60 dark:neutral-700/50 hover:dark:neutral-700/65 active:dark:neutral-700/90"
+            flex items-center justify-center gap-1 rounded-lg px-2 py-1 backdrop-blur-sm
+            transition="colors duration-200 ease-in-out"
             aria-label="Options for Display Models"
           >
-            <div class="i-solar:add-circle-bold" />
-            <div class="font-bold">
-              Add Local
-            </div>
+            <div i-solar:add-circle-bold />
+            <div>Add</div>
           </DropdownMenuTrigger>
           <DropdownMenuPortal>
             <DropdownMenuContent
-              class="will-change-[opacity,transform] z-10000 max-w-45 border border-neutral-200 rounded-lg bg-neutral-100 p-0.5 text-neutral-900 shadow-md outline-none backdrop-blur-sm data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-100"
+              class="will-change-[opacity,transform] z-10000 max-w-45 rounded-lg p-0.5 shadow-md outline-none data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade"
+              bg="neutral-100/50 dark:neutral-950/50"
+              transition="colors duration-200 ease-in-out"
+              backdrop-blur-sm
               align="end"
               side="bottom"
               :side-offset="8"
@@ -306,7 +148,7 @@ function handleFixError(err: string) {
                 transition="colors duration-200 ease-in-out"
                 @click="live2dDialog.open()"
               >
-                Live2D (.zip)
+                Live2D
               </DropdownMenuItem>
               <DropdownMenuItem
                 :class="[
@@ -317,99 +159,45 @@ function handleFixError(err: string) {
                 ]"
                 transition="colors duration-200 ease-in-out" @click="vrmDialog.open()"
               >
-                VRM (.vrm)
+                VRM
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenuPortal>
         </DropdownMenuRoot>
       </div>
     </div>
-
-    <!-- Library Tab Content -->
-    <template v-if="currentTab === 'library'">
-      <!-- Search & Filter Bar -->
-      <div class="flex flex-wrap items-center gap-2">
-        <div class="relative min-w-40 flex-1">
-          <div class="i-solar:magnifer-linear absolute left-3 top-1/2 translate-y-[-50%] opacity-50" />
-          <input
-            v-model="searchQuery"
-            type="text"
-            placeholder="Search models..."
-            class="w-full border border-transparent rounded-lg bg-neutral-100 py-1.5 pl-9 pr-3 outline-none transition-all focus:border-primary-400 dark:bg-neutral-800"
-          >
-        </div>
-
-        <!-- Format Filter -->
-        <select
-          v-model="formatFilter"
-          class="cursor-pointer border border-transparent rounded-lg bg-neutral-100 px-3 py-1.5 text-sm font-medium outline-none transition-all dark:bg-neutral-800 hover:bg-neutral-200 dark:hover:bg-neutral-700"
-        >
-          <option value="all">
-            All Formats
-          </option>
-          <option value="live2d">
-            Live2D
-          </option>
-          <option value="vrm">
-            VRM
-          </option>
-        </select>
-
-        <!-- Sort -->
-        <select
-          v-model="sortBy"
-          class="cursor-pointer border border-transparent rounded-lg bg-neutral-100 px-3 py-1.5 text-sm font-medium outline-none transition-all dark:bg-neutral-800 hover:bg-neutral-200 dark:hover:bg-neutral-700"
-        >
-          <option value="name">
-            Name (A-Z)
-          </option>
-          <option value="date">
-            Last Added
-          </option>
-        </select>
-      </div>
-
-      <div v-if="displayModelsFromIndexedDBLoading">
-        Loading display models...
-      </div>
-
-      <div
-        class="w-full lg:max-h-80dvh"
-        :class="[
-          viewMode === 'grid' ? 'flex flex-col gap-2 md:grid lg:grid-cols-2 md:grid-cols-1' : 'grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2',
-        ]"
-      >
-        <!-- (Rest of Library Model Grid) -->
+    <div v-if="displayModelsFromIndexedDBLoading">
+      Loading display models...
+    </div>
+    <div class="flex-1 overflow-x-auto overflow-y-hidden md:flex-none sm:overflow-x-hidden sm:overflow-y-scroll" h-full w-full>
+      <div class="w-full flex gap-2 md:grid lg:grid-cols-2 md:grid-cols-1 lg:max-h-80dvh">
         <div
-          v-for="(model) of filteredModels"
+          v-for="(model) of displayModels"
           :key="model.id"
-          class="group relative transition-all duration-200"
-          :class="[
-            viewMode === 'grid' ? 'block h-full w-full md:flex md:flex-row gap-2' : 'flex flex-col',
-            highlightDisplayModelCard === model.id ? 'z-10' : 'z-0',
-          ]"
+          v-auto-animate
+          relative gap-2
+          class="block h-full w-full md:flex md:flex-row"
           @click="() => highlightDisplayModelCard = model.id"
         >
-          <!-- Options Menu -->
-          <div class="absolute right-2 top-2 z-10">
+          <div absolute left-3 top-4 z-1>
             <DropdownMenuRoot>
               <DropdownMenuTrigger
                 :class="[
-                  'bg-neutral-900/40 group-hover:bg-neutral-900/60 dark:bg-neutral-950/40 group-hover:dark:bg-neutral-900/80',
-                  viewMode === 'compact' ? 'h-5 w-5' : 'h-7 w-7',
-                  'text-white flex items-center justify-center rounded-lg backdrop-blur-md transition-all duration-200 ease-in-out shadow-sm',
+                  'bg-neutral-900/20 hover:bg-neutral-900/45 active:bg-neutral-900/60 dark:bg-neutral-950/50 hover:dark:bg-neutral-900/65 active:dark:bg-neutral-900/90',
                 ]"
+                text="white"
+                h-7 w-7 flex items-center justify-center rounded-lg backdrop-blur-sm
+                transition="colors duration-200 ease-in-out"
                 aria-label="Options for Display Models"
-                @click.stop
               >
-                <div :class="['i-solar:menu-dots-bold', viewMode === 'compact' ? 'text-xs' : 'text-base']" />
+                <div i-solar:menu-dots-bold />
               </DropdownMenuTrigger>
               <DropdownMenuPortal>
                 <DropdownMenuContent
                   :class="[
-                    'will-change-[opacity,transform] z-10000 max-w-45 rounded-xl p-1 text-white shadow-2xl outline-none data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade dark:text-black',
-                    'bg-neutral-900/90 dark:bg-neutral-100/90',
-                    'backdrop-blur-xl border border-white/10 dark:border-black/10',
+                    'will-change-[opacity,transform] z-10000 max-w-45 rounded-lg p-0.5 text-white shadow-md outline-none data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade dark:text-black',
+                    'bg-neutral-900/30 dark:bg-neutral-950/50',
+                    'backdrop-blur-sm',
                   ]"
                   transition="colors duration-200 ease-in-out"
                   align="start"
@@ -417,151 +205,85 @@ function handleFixError(err: string) {
                   :side-offset="4"
                 >
                   <DropdownMenuItem
-                    class="relative flex cursor-pointer select-none items-center rounded-lg px-3 py-2 text-base leading-none outline-none data-[highlighted]:bg-white/10 sm:text-sm dark:data-[highlighted]:bg-black/10"
-                    @click="openRenameDialog(model)"
+                    :class="[
+                      'relative flex cursor-pointer select-none items-center rounded-md px-3 py-2 text-base leading-none outline-none data-[disabled]:pointer-events-none sm:text-sm',
+                      'data-[highlighted]:bg-red-900/20 dark:data-[highlighted]:bg-red-100/20',
+                      'text-white dark:text-white data-[highlighted]:text-red-200 dark:data-[highlighted]:text-red-200',
+                    ]"
+                    transition="colors duration-200 ease-in-out"
                   >
-                    <div class="flex items-center gap-2">
-                      <div class="i-solar:pen-bold" />
-                      <div>Rename</div>
-                    </div>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem
-                    class="relative flex cursor-pointer select-none items-center rounded-lg px-3 py-2 text-base text-red-400 font-semibold leading-none outline-none data-[highlighted]:bg-red-500/20 sm:text-sm"
-                    @click="handleRemoveModel(model)"
-                  >
-                    <div class="flex items-center gap-2">
-                      <div class="i-solar:trash-bin-minimalistic-bold-duotone" />
+                    <button flex items-center gap-1 outline-none @click="handleRemoveModel(model)">
+                      <div i-solar:trash-bin-minimalistic-bold-duotone />
                       <div>Remove</div>
-                    </div>
+                    </button>
                   </DropdownMenuItem>
                 </DropdownMenuContent>
               </DropdownMenuPortal>
             </DropdownMenuRoot>
           </div>
-
-          <!-- Preview Image Area -->
           <div
-            class="relative cursor-pointer overflow-hidden transition-all duration-300"
-            :class="[
-              viewMode === 'grid' ? 'h-50 md:h-60 w-full md:w-45 lg:w-50 shrink-0' : 'aspect-[3/4] w-full',
-            ]"
-            @click="handlePick(model)"
+            class="h-full min-w-80 w-full lg:min-h-60 md:min-w-70 sm:min-w-65"
+            aspect="12/16"
+            px-1 py-2
           >
             <img
               v-if="model.previewImage"
               :src="model.previewImage"
-              h-full w-full rounded-xl object-cover
-              loading="lazy"
               :class="[
-                highlightDisplayModelCard === model.id ? 'ring-3 ring-primary-500 shadow-lg' : 'ring-1 ring-white/10 dark:ring-black/10',
-                'group-hover:scale-105 transition-transform duration-500',
+                'h-full w-full rounded-xl object-cover',
+                'transition-all duration-200 ease-in-out',
+                highlightDisplayModelCard && highlightDisplayModelCard === model.id ? 'ring-3 ring-primary-400' : 'ring-0 ring-transparent',
               ]"
             >
-            <div
-              v-else
-              :class="['h-full w-full flex flex-col items-center justify-center gap-2 rounded-xl bg-neutral-200 dark:bg-neutral-800', highlightDisplayModelCard === model.id ? 'ring-3 ring-primary-500 shadow-lg' : 'ring-1 ring-white/10 dark:ring-black/10']"
-            >
-              <div class="i-solar:question-square-bold-duotone text-4xl opacity-30" />
-            </div>
-
-            <!-- Hover Effects Overlay -->
-            <div
-              class="pointer-events-none absolute inset-0 flex items-end justify-center rounded-xl from-black/60 to-transparent bg-gradient-to-t p-3 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
-            >
-              <div :class="['text-white text-xs font-bold flex items-center gap-1', 'translate-y-2 group-hover:translate-y-0 transition-transform duration-300']">
-                <div class="i-solar:map-arrow-up-bold" />
-                Pick Model
+            <div v-else bg="neutral-100 dark:neutral-900" relative h-full w-full flex flex-col items-center justify-center gap-2 overflow-hidden rounded-xl :class="[highlightDisplayModelCard && highlightDisplayModelCard === model.id ? 'ring-3 ring-primary-400' : 'ring-0 ring-transparent']" transition="all duration-200 ease-in-out">
+              <div i-solar:question-square-bold-duotone text-4xl opacity-75 />
+              <div translate-y="100%" absolute top-0 flex flex-col translate-x--7 rotate-45 scale-250 gap-0 opacity-5>
+                <div text="sm sm:sm" translate-x-7 translate-y--2 text-nowrap>
+                  unavailable Preview unavailable Preview
+                </div>
+                <div text="sm sm:sm" translate-x-0 translate-y--0 text-nowrap>
+                  Preview unavailable Preview unavailable
+                </div>
+                <div text="sm sm:sm" translate-x--7 translate-y-2 text-nowrap>
+                  unavailable Preview unavailable Preview
+                </div>
               </div>
             </div>
           </div>
-
-          <!-- Labels Area -->
-          <div
-            class="flex flex-1 flex-col"
-            :class="[viewMode === 'grid' ? 'justify-between p-2' : 'p-1.5']"
-          >
-            <div class="w-full">
-              <div
-                class="font-bold transition-colors"
-                :class="[
-                  viewMode === 'grid' ? 'text-lg line-clamp-2 leading-tight' : 'text-sm line-clamp-1',
-                  highlightDisplayModelCard === model.id ? 'text-primary-500' : '',
-                ]"
+          <div w-full flex flex-col>
+            <div w-full flex-1 px-2 py-4>
+              <EditableRoot
+                v-slot="{ isEditing }"
+                :default-value="model.name"
+                placeholder="Model Name..."
+                class="flex gap-2"
+                auto-resize
               >
-                {{ model.name }}
-              </div>
-              <div
-                class="mt-1 flex items-center gap-1 opacity-60"
-                :class="[viewMode === 'grid' ? 'text-sm' : 'text-xs']"
-              >
-                <div v-if="model.format === DisplayModelFormat.VRM" class="i-solar:box-bold" />
-                <div v-else class="i-solar:mask-hachi-bold" />
+                <EditableArea class="w-[calc(100%-8px-1rem)] dark:text-white">
+                  <EditablePreview class="line-clamp-1 w-[calc(100%-8px)] overflow-hidden text-ellipsis" />
+                  <EditableInput class="w-[calc(100%-8px)]! placeholder:text-neutral-700 dark:placeholder:text-neutral-600" />
+                </EditableArea>
+                <EditableEditTrigger v-if="!isEditing">
+                  <div i-solar:pen-2-line-duotone opacity-50 />
+                </EditableEditTrigger>
+                <div v-else class="flex gap-2">
+                  <EditableSubmitTrigger>
+                    <div i-solar:check-read-line-duotone opacity-50 />
+                  </EditableSubmitTrigger>
+                </div>
+              </EditableRoot>
+              <div flex items-center gap-1 text="neutral-400 dark:neutral-600">
+                <div i-solar:tag-horizontal-bold />
                 <div>{{ mapFormatRenderer[model.format] }}</div>
               </div>
             </div>
-
-            <!-- Pick toggle button for Standard View only -->
-            <Button
-              v-if="viewMode === 'grid'"
-              variant="secondary"
-              class="mt-2 w-full !rounded-lg !py-1.5"
-              @click="handlePick(model)"
-            >
+            <Button class="hidden md:block" variant="secondary" @click="handlePick(model)">
               Pick
             </Button>
           </div>
         </div>
       </div>
-    </template>
-
-    <!-- Explore Tab Content -->
-    <template v-else-if="currentTab === 'explore'">
-      <div class="flex-1 overflow-y-auto pb-4 pr-2">
-        <div v-auto-animate class="grid grid-cols-1 gap-4 lg:grid-cols-3 md:grid-cols-2">
-          <a
-            v-for="site in marketplaces"
-            :key="site.name"
-            :href="site.url"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="group flex flex-col gap-3 border border-transparent rounded-xl bg-neutral-100 p-4 shadow-sm transition-all duration-300 hover:border-primary-500/50 dark:bg-neutral-800/50 hover:bg-white hover:shadow-md dark:hover:bg-neutral-800"
-          >
-            <div class="flex items-start justify-between">
-              <div class="text-lg font-bold transition-colors group-hover:text-primary-500">{{ site.name }}</div>
-              <div class="i-solar:share-circle-bold-duotone text-primary-500 opacity-0 transition-opacity group-hover:opacity-100" />
-            </div>
-
-            <div class="flex flex-wrap gap-2">
-              <div v-if="site.vrm" class="border border-blue-500/20 rounded bg-blue-500/10 px-2 py-0.5 text-[10px] text-blue-500 font-bold">VRM</div>
-              <div v-if="site.live2d" class="border border-green-500/20 rounded bg-green-500/10 px-2 py-0.5 text-[10px] text-green-500 font-bold">LIVE2D</div>
-            </div>
-
-            <div class="mt-auto flex items-center justify-between border-t border-neutral-200 pt-2 dark:border-neutral-700">
-              <div class="flex items-center gap-1 text-xs opacity-50">
-                <div class="i-solar:globus-linear" />
-                {{ site.origin }}
-              </div>
-              <div class="flex gap-1">
-                <span v-for="lang in site.languages" :key="lang" class="text-xs">
-                  {{ lang === 'jp' ? '日本語' : 'English' }}
-                </span>
-              </div>
-            </div>
-          </a>
-        </div>
-
-        <div class="mt-8 flex flex-col items-center gap-2 border border-primary-500/10 rounded-2xl bg-primary-500/5 p-6 text-center">
-          <div class="i-solar:info-circle-bold-duotone text-3xl text-primary-500" />
-          <div class="text-lg font-bold">
-            Know more resources?
-          </div>
-          <div class="max-w-sm text-sm opacity-70">
-            Help the community by suggesting more marketplaces for VRM and Live2D models!
-          </div>
-          <a href="https://github.com/moeru-ai/airi/issues" target="_blank" class="mt-2 rounded-lg bg-primary-500 px-4 py-2 text-white font-bold transition-colors hover:bg-primary-600">Suggest a Site</a>
-        </div>
-      </div>
-    </template>
+    </div>
     <Button class="block md:hidden" @click="handleMobilePick()">
       Confirm
     </Button>