feat: active instruments

Author: Saplyn

vibe/bun.lock

@@ -11,6 +11,7 @@
     "tauri": "tauri"
   },
   "dependencies": {
+    "@formkit/auto-animate": "^0.8.2",
     "@primeuix/themes": "^1.1.1",
     "@tailwindcss/vite": "^4.1.7",
     "@tauri-apps/api": "^2.5.0",

vibe/package.json

@@ -1,6 +1,7 @@
 <template>
   <div class="flex h-screen w-screen flex-col justify-between">
     <PlayControlBar />
+    <TracksBanner />
 
     <main class="grow overflow-auto">
       <RouterView />

vibe/src/App.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="border-surface h-16 max-h-16 min-h-16 border-b-4">
+    <div class="flex h-full items-center gap-2 px-4 py-2">
+      <div class="text-primary/80 text-xl">Currently Active:</div>
+      <div v-auto-animate="{ duration: 75 }" class="flex gap-2">
+        <div
+          v-for="item in activeItems"
+          :key="item"
+          class="bg-primary text-primary-contrast rounded-md p-2 font-mono font-bold"
+        >
+          {{ item }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from "vue";
+import { PatternState, TrackState } from "../App.vue";
+import { get } from "@vueuse/core";
+
+const { tracks } = inject<TrackState>("track-state")!;
+const { patterns } = inject<PatternState>("pattern-state")!;
+
+const activeItems = computed(() => {
+  let patternsInner = get(patterns) ?? {};
+  return Object.values(get(tracks) ?? {})
+    .filter((track) => track.active)
+    .map((track) => track.patterns)
+    .flat()
+    .map((patName) =>
+      [
+        patternsInner[patName].messages.map((msg) => msg.payload.path),
+        patternsInner[patName].midi_path,
+      ].flat(),
+    )
+    .flat()
+    .filter((path) => path != "/" && path != "")
+    .map((path) => path.split("/")[2])
+    .map((item) => {
+      switch (item) {
+        case "hihat":
+        case "kick":
+        case "snare":
+          return "drums";
+        default:
+          return item;
+      }
+    })
+    .filter((path, index, self) => self.indexOf(path) === index)
+    .sort();
+});
+</script>

vibe/src/components/TracksBanner.vue

@@ -6,6 +6,7 @@ import Aura from "@primeuix/themes/aura";
 import { definePreset } from "@primeuix/themes";
 import ToastService from "primevue/toastservice";
 import ConfirmationService from "primevue/confirmationservice";
+import { autoAnimatePlugin } from "@formkit/auto-animate/vue";
 
 import "./tailwind.css";
 import "primeicons/primeicons.css";
@@ -46,4 +47,5 @@ createApp(App)
   .use(router)
   .use(ToastService)
   .use(ConfirmationService)
+  .use(autoAnimatePlugin)
   .mount("#app");

vibe/src/main.ts

@@ -2,7 +2,7 @@
   <BlockUI class="flex h-full w-full" :blocked="!connected">
     <div class="flex h-full w-full flex-col justify-between">
       <!-- LYN: Add Slider -->
-      <div class="border-surface flex gap-2 border-t-4 border-dotted px-4 py-2">
+      <div class="border-surface flex gap-2 border-b-4 border-dotted px-4 py-2">
         <Button
           @click="addSliderWrapper()"
           label="Add New Slider"