sounds, better files

src/components/Audio/Sfx.vue

@@ -0,0 +1,58 @@
+<template>
+  <AudioCard
+    :style="{
+      '--box-color': 'var(--color-fuchsia)'
+    }"
+    :supports="['stop']"
+    label="SFX"
+    :node="node"
+  >
+    <template #preview>
+      <div
+        v-for="sound in node.activeSounds"
+      >
+        {{ sound.name }}
+      </div>
+    </template>
+    <template #popover>
+      <div class="a-sfx__popover">
+        <SfxSound
+          v-for="[name, sounds] in grouppedSounds"
+          :key="name"
+          :sounds="sounds"
+          :name="name"
+        />
+      </div>
+    </template>
+  </AudioCard>
+</template>
+<script setup lang="ts">
+import {computed} from 'vue';
+import {SfxGroupNode} from '../../model/Audio/SfxGroupNode';
+import AudioCard from './AudioCard.vue';
+import {groupBy} from '../../utils/groupBy';
+import SfxSound from './SfxSound.vue';
+
+
+const props = defineProps<{
+  node: SfxGroupNode,
+}>();
+
+const grouppedSounds = computed(() => {
+  return groupBy(props.node.sounds(), (sound) => {
+    return sound.name.replace(/(\d+)$/, '').trim();
+  })
+});
+
+
+
+</script>
+<style>
+.a-sfx__popover {
+  --box-size: 160px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--box-size), 1fr));
+  gap: var(--s-5)
+}
+
+</style>