chore: add base layout for inspect details

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

@@ -1,9 +1,80 @@
 <script setup lang="ts">
-defineProps<{
+import Skeleton from "primevue/skeleton";
+import { useAssetStore } from "@/stores/AssetStore";
+import { storeToRefs } from "pinia";
+import { watch } from "vue";
+import InspectPreview from "./components/InspectPreview.vue";
+import InspectAssetDetails from "./components/InspectAssetDetails.vue";
+import InspectZoneAssets from "./components/InspectZoneAssets.vue";
+
+const assetStore = useAssetStore();
+
+const { assetsOfZone } = storeToRefs(assetStore);
+
+const props = defineProps<{
   zoneName: string;
 }>();
+
+watch(
+  () => props.zoneName,
+  (newValue) => {
+    assetStore.loadAssetsForZone(newValue);
+  },
+  { immediate: true },
+);
 </script>
 
 <template>
-  <div class="inspect-details"></div>
+  <div class="inspect-details">
+    <template v-if="assetsOfZone">
+      <InspectPreview class="inspect-preview" />
+      <InspectAssetDetails class="inspect-details" />
+      <InspectZoneAssets :assets="assetsOfZone.assets" class="inspect-assets" />
+    </template>
+    <template v-else>
+      <div class="skeleton-wrapper">
+        <Skeleton class="count-skeleton" width="100%" height="100%" />
+      </div>
+      <div class="skeleton-wrapper">
+        <Skeleton class="count-skeleton" width="100%" height="100%" />
+      </div>
+      <div class="skeleton-wrapper list">
+        <Skeleton v-for="i in 3" :key="i" class="count-skeleton" width="80%" height="1em" />
+      </div>
+    </template>
+  </div>
 </template>
+
+<style lang="scss" scoped>
+.inspect-details {
+  width: 100%;
+  height: 100%;
+
+  display: grid;
+  grid-template-columns: 30% 1fr;
+  grid-template-rows: 30% 1fr;
+  grid-template-areas:
+    "preview details"
+    "assets details";
+  gap: 0.5rem;
+  padding: 0.5rem;
+}
+
+.inspect-preview {
+  grid-area: preview;
+}
+
+.inspect-details {
+  grid-area: details;
+}
+
+.inspect-assets {
+  grid-area: assets;
+}
+
+.skeleton-wrapper {
+  &.list > *:not(:first-child) {
+    margin-top: calc(1lh - 1em);
+  }
+}
+</style>

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

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>No details available</div>
+</template>

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

@@ -0,0 +1,23 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="preview">
+    <span>No preview available</span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@use "@style/colors";
+@use "@style/variables";
+
+.preview {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  background-color: colors.$COLOR_CONTENT_HOVER_BACKGROUND;
+  border-radius: variables.$BORDER_RADIUS_MD;
+}
+</style>

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

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import Listbox from "primevue/listbox";
+</script>
+
+<template>
+  <Listbox></Listbox>
+</template>
+
+<style scoped lang="scss"></style>