Update categories for asset backdrop & sound

spx-gui/src/components/asset/library/AssetAddModal.vue

@@ -40,6 +40,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import {
   UIForm,
   UIFormItem,
@@ -61,7 +62,7 @@ import type { PartialAssetData } from '@/models/common/asset'
 import { backdrop2Asset, sound2Asset, sprite2Asset } from '@/models/common/asset'
 import { useI18n } from '@/utils/i18n'
 import { isAddPublicLibraryEnabled } from '@/utils/utils'
-import { categories, categoryAll } from './category'
+import { categoryAll, getAssetCategories } from './category'
 import BackdropPreview from './BackdropPreview.vue'
 import SpritePreview from './SpritePreview.vue'
 import SoundPreview from './SoundPreview.vue'
@@ -81,6 +82,15 @@ const addPublicLibraryEnabled = isAddPublicLibraryEnabled()
 
 const { t } = useI18n()
 
+const assetType = computed(() => {
+  if (props.asset instanceof Backdrop) return AssetType.Backdrop
+  if (props.asset instanceof Sound) return AssetType.Sound
+  if (props.asset instanceof Sprite) return AssetType.Sprite
+  throw new Error(`unknown asset type ${props.asset}`)
+})
+
+const categories = computed(() => getAssetCategories(assetType.value))
+
 const form = useForm({
   name: [props.asset.name, validateName],
   category: [categoryAll.value],

spx-gui/src/components/asset/library/AssetLibraryModal.vue

@@ -1,6 +1,6 @@
 <template>
   <UISearchableModal
-    style="width: 1076px"
+    style="width: 1096px"
     :visible="props.visible"
     :title="$t({ en: `Choose a ${entityMessage.en}`, zh: `选择${entityMessage.zh}` })"
     @update:visible="emit('cancelled')"
@@ -84,13 +84,11 @@ import { useQuery } from '@/utils/query'
 import { type Project } from '@/models/project'
 import { asset2Backdrop, asset2Sound, asset2Sprite, type AssetModel } from '@/models/common/asset'
 import ListResultWrapper from '@/components/common/ListResultWrapper.vue'
-import { type Category, categories as categoriesWithoutAll, categoryAll } from './category'
+import { type Category, getAssetCategories, categoryAll } from './category'
 import SoundItem from './SoundItem.vue'
 import SpriteItem from './SpriteItem.vue'
 import BackdropItem from './BackdropItem.vue'
 
-const categories = [categoryAll, ...categoriesWithoutAll]
-
 const props = defineProps<{
   type: AssetType
   visible: boolean
@@ -102,6 +100,11 @@ const emit = defineEmits<{
   resolved: [AssetModel[]]
 }>()
 
+const categories = computed(() => {
+  const categoriesWithoutAll = getAssetCategories(props.type)
+  return [categoryAll, ...categoriesWithoutAll]
+})
+
 const ItemComponent = computed(
   () =>
     ({
@@ -233,7 +236,8 @@ async function handleAssetClick(asset: AssetData) {
   justify-content: stretch;
 }
 .sider {
-  flex: 0 0 148px;
+  flex: 0 0 168px;
+  min-width: 0;
   display: flex;
   flex-direction: column;
   padding: var(--ui-gap-middle);

spx-gui/src/components/asset/library/category.ts

@@ -1,15 +1,44 @@
 import type { LocaleMessage } from '@/utils/i18n'
+import { AssetType } from '@/apis/asset'
 
 export type Category = {
   value: string
   message: LocaleMessage
 }
 
-export const categories: Category[] = [
+export const spriteCategories: Category[] = [
   { value: 'People', message: { en: 'People', zh: '人物' } },
   { value: 'Animals', message: { en: 'Animals', zh: '动物' } },
+  { value: 'Daily', message: { en: 'Daily', zh: '日常' } },
+  { value: 'Fantasy', message: { en: 'Fantasy', zh: '幻想' } },
   { value: 'Nature', message: { en: 'Nature', zh: '自然' } },
   { value: 'UI', message: { en: 'UI', zh: '界面' } }
 ]
 
+export const backdropCategories: Category[] = [
+  { value: 'Daily', message: { en: 'Daily', zh: '日常' } },
+  { value: 'Fantasy', message: { en: 'Fantasy', zh: '幻想' } },
+  { value: 'Nature', message: { en: 'Nature', zh: '自然' } },
+  { value: 'UI', message: { en: 'UI', zh: '界面' } }
+]
+
+export const soundCategories: Category[] = [
+  // TODO: discussion needed
+  { value: 'Daily', message: { en: 'Daily', zh: '日常' } },
+  { value: 'Nature', message: { en: 'Nature', zh: '自然' } }
+]
+
+export function getAssetCategories(type: AssetType): Category[] {
+  switch (type) {
+    case AssetType.Sprite:
+      return spriteCategories
+    case AssetType.Backdrop:
+      return backdropCategories
+    case AssetType.Sound:
+      return soundCategories
+    default:
+      return []
+  }
+}
+
 export const categoryAll: Category = { value: '*', message: { en: 'All', zh: '所有' } }