chore: improve ui

Author: webfansplz

plugins/assets/src/spa/app/components/AssetDetails.vue

@@ -27,12 +27,12 @@ const deleteOpen = ref(false)
 const renameOpen = ref(false)
 const newName = ref('')
 const busy = ref(false)
-const notice = ref<{ kind: 'success' | 'error', message: string } | null>(null)
+const errorNotice = ref<string | null>(null)
 
 watch(() => props.asset.path, (path) => {
   imageMeta.value = null
   textContent.value = null
-  notice.value = null
+  errorNotice.value = null
   const rpc = props.rpc
   if (!rpc)
     return
@@ -57,50 +57,50 @@ const aspectRatio = computed(() => {
 const snippets = computed(() => buildSnippets(props.asset, imageMeta.value))
 const supportsPreview = computed(() => SUPPORTS_PREVIEW.has(props.asset.type))
 
-async function withNotice(fn: () => Promise<void>, successMessage: string): Promise<void> {
+async function runAction(fn: () => Promise<void>): Promise<void> {
   if (!props.rpc)
     return
+  errorNotice.value = null
   busy.value = true
   try {
     await fn()
-    notice.value = { kind: 'success', message: successMessage }
   }
   catch (cause) {
-    notice.value = { kind: 'error', message: cause instanceof Error ? cause.message : String(cause) }
+    errorNotice.value = cause instanceof Error ? cause.message : String(cause)
   }
   finally {
     busy.value = false
   }
 }
 
 async function handleDelete(): Promise<void> {
-  await withNotice(async () => {
+  await runAction(async () => {
     await props.rpc!.call('devframes:plugin:assets:delete', { paths: [props.asset.path] })
     deleteOpen.value = false
     emit('changed')
     emit('close')
-  }, 'Deleted')
+  })
 }
 
 async function handleRename(): Promise<void> {
-  await withNotice(async () => {
+  await runAction(async () => {
     await props.rpc!.call('devframes:plugin:assets:rename', { path: props.asset.path, newName: newName.value })
     renameOpen.value = false
     emit('changed')
     emit('close')
-  }, 'Renamed')
+  })
 }
 
 async function handleOpenInEditor(): Promise<void> {
-  await withNotice(async () => {
+  await runAction(async () => {
     await props.rpc!.call('devframes:plugin:assets:open-in-editor', props.asset.path)
-  }, 'Opened in editor')
+  })
 }
 
 async function handleRevealInFolder(): Promise<void> {
-  await withNotice(async () => {
+  await runAction(async () => {
     await props.rpc!.call('devframes:plugin:assets:reveal-in-folder', props.asset.path)
-  }, 'Revealed in folder manager')
+  })
 }
 
 function openRenameDialog(): void {
@@ -206,8 +206,8 @@ function openInBrowser(): void {
       </ActionButton>
     </div>
 
-    <div v-if="notice" class="text-xs" :class="notice.kind === 'error' ? 'text-error' : 'text-success'">
-      {{ notice.message }}
+    <div v-if="errorNotice" class="text-xs text-error">
+      {{ errorNotice }}
     </div>
 
     <div class="flex-1" />

plugins/assets/src/spa/app/components/Toolbar.vue

@@ -47,6 +47,7 @@ const viewTabs = [
         v-model="search"
         icon="i-ph-magnifying-glass"
         placeholder="Search assets…"
+        size="sm"
         clearable
         class="max-w-80 w-full"
       />
@@ -55,7 +56,7 @@ const viewTabs = [
     <template #end>
       <template v-if="selectedCount > 0">
         <span class="whitespace-nowrap text-sm font-medium">{{ selectedCount }} selected</span>
-        <ActionButton class="text-error border-error/30!" icon="i-ph-trash-duotone" @click="emit('bulkDelete')">
+        <ActionButton size="sm" class="h-7! py-0! text-error border-error/30!" icon="i-ph-trash-duotone" @click="emit('bulkDelete')">
           Delete
         </ActionButton>
         <ActionButton variant="text" @click="emit('clearSelection')">