feat: list assets in inspect details

src/ModManUi/src/view/inspect_details/InspectDetails.vue

@@ -2,10 +2,11 @@
 import Skeleton from "primevue/skeleton";
 import { useAssetStore } from "@/stores/AssetStore";
 import { storeToRefs } from "pinia";
-import { watch } from "vue";
+import { ref, watch } from "vue";
 import InspectPreview from "./components/InspectPreview.vue";
 import InspectAssetDetails from "./components/InspectAssetDetails.vue";
 import InspectZoneAssets from "./components/InspectZoneAssets.vue";
+import type { AssetDto } from "@/native/AssetBinds.ts";
 
 const assetStore = useAssetStore();
 
@@ -15,6 +16,8 @@ const props = defineProps<{
   zoneName: string;
 }>();
 
+const selectedAsset = ref<AssetDto | null>(null);
+
 watch(
   () => props.zoneName,
   (newValue) => {
@@ -27,9 +30,13 @@ watch(
 <template>
   <div class="inspect-details">
     <template v-if="assetsOfZone">
-      <InspectPreview class="inspect-preview" />
+      <InspectPreview class="inspect-area-preview" />
-      <InspectAssetDetails class="inspect-details" />
+      <InspectAssetDetails :selected-asset="selectedAsset" class="inspect-area-details" />
-      <InspectZoneAssets :assets="assetsOfZone.assets" class="inspect-assets" />
+      <InspectZoneAssets
+        v-model:selected-asset="selectedAsset"
+        :assets="assetsOfZone.assets"
+        class="inspect-area-assets"
+      />
     </template>
     <template v-else>
       <div class="skeleton-wrapper">
@@ -60,15 +67,15 @@ watch(
   padding: 0.5rem;
 }
 
-.inspect-preview {
+.inspect-area-preview {
   grid-area: preview;
 }
 
-.inspect-details {
+.inspect-area-details {
   grid-area: details;
 }
 
-.inspect-assets {
+.inspect-area-assets {
   grid-area: assets;
 }
 

src/ModManUi/src/view/inspect_details/components/AssetListOption.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { AssetDto } from "@/native/AssetBinds.ts";
+import { getAssetTypeNameCapitalized } from "@/utils/AssetTypeName.ts";
+
+defineProps<{
+  asset: AssetDto;
+}>();
+</script>
+
+<template>
+  <div class="asset-option">
+    <span class="asset-type">{{ getAssetTypeNameCapitalized(asset.type) }}</span>
+    <span class="asset-name">{{ asset.name }}</span>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use "@style/colors";
+
+.asset-option {
+  font-size: 0.95rem;
+  max-width: 100%;
+  overflow-x: clip;
+  white-space: nowrap;
+  padding: 0 0.2em;
+}
+
+.asset-type {
+  display: inline-block;
+  color: colors.$color-text-muted;
+  min-width: 8em;
+}
+
+.asset-name {
+  margin-left: 0.5em;
+}
+</style>

src/ModManUi/src/view/inspect_details/components/InspectAssetDetails.vue

@@ -1,5 +1,39 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import type { AssetDto } from "@/native/AssetBinds.ts";
+import Tag from "primevue/tag";
+import { getAssetTypeNameCapitalized } from "@/utils/AssetTypeName.ts";
+import { computed } from "vue";
+
+const props = defineProps<{
+  selectedAsset: AssetDto | null;
+}>();
+
+const assetTypeName = computed(() =>
+  props.selectedAsset ? getAssetTypeNameCapitalized(props.selectedAsset.type) : "",
+);
+</script>
 
 <template>
-  <div>No details available</div>
+  <div v-if="selectedAsset">
+    <h2 class="asset-header">
+      <span>{{ selectedAsset.name }}</span>
+      <Tag class="asset-type" :value="assetTypeName" />
+    </h2>
+    <div>No details available</div>
+  </div>
+  <div v-else>
+    <div>No asset selected</div>
+  </div>
 </template>
+
+<style scoped lang="scss">
+.asset-header {
+  display: flex;
+  align-items: center;
+  margin: 0 0 0.5em 0;
+}
+
+.asset-type {
+  margin-left: 0.5em;
+}
+</style>

src/ModManUi/src/view/inspect_details/components/InspectZoneAssets.vue

@@ -1,9 +1,44 @@
 <script setup lang="ts">
 import Listbox from "primevue/listbox";
+import type { AssetDto } from "@/native/AssetBinds.ts";
+import AssetListOption from "@/view/inspect_details/components/AssetListOption.vue";
+
+const selectedAsset = defineModel<AssetDto | null>("selectedAsset");
+defineProps<{
+  assets: AssetDto[];
+}>();
 </script>
 
 <template>
-  <Listbox></Listbox>
+  <Listbox
+    v-model="selectedAsset"
+    class="asset-list"
+    :options="assets"
+    option-label="name"
+    scroll-height="100%"
+    :virtual-scroller-options="{ itemSize: 24 }"
+  >
+    <template #option="{ option }: { option: AssetDto }">
+      <AssetListOption :asset="option" />
+    </template>
+  </Listbox>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.asset-list {
+  --p-listbox-option-padding: 0;
+}
+
+:deep(.p-virtualscroller) {
+  overflow-x: hidden;
+  max-width: 100%;
+}
+
+:deep(.p-listbox-list) {
+  max-width: 100%;
+}
+
+:deep(.p-listbox-list-container) {
+  height: 100%;
+}
+</style>