eS v1

app/store/ui.ts

@@ -0,0 +1,46 @@
+import { defineStore } from 'pinia'
+import { useDataStore } from '~/store/data'
+import type { Box } from '~/../types/types'
+
+export const useUiStore = defineStore('ui', {
+  state: () => ({
+    // UI-only state can live here later
+  }),
+
+  actions: {
+    selectBox(id: string) {
+      const dataStore = useDataStore()
+      dataStore.boxes.forEach((box) => {
+        box.state = box.id === id ? 'box-selected' : 'box-hidden'
+      })
+    },
+
+    closeBox() {
+      const selectedBox = this.getSelectedBox
+      const dataStore = useDataStore()
+      dataStore.boxes.forEach((box) => {
+        box.state = 'box-list'
+      })
+      // Scroll back to the unselected box in the list
+      if (selectedBox) this.scrollToBox(selectedBox)
+    },
+
+    scrollToBox(box: Box) {
+      if (box) {
+        const boxElement = document.getElementById(box.id)
+        if (boxElement) {
+          setTimeout(() => {
+            boxElement.scrollIntoView({ behavior: 'smooth' })
+          }, 333)
+        }
+      }
+    }
+  },
+
+  getters: {
+    getSelectedBox: () => {
+      const dataStore = useDataStore()
+      return (dataStore.boxes as Box[]).find((box) => box.state === 'box-selected') || null
+    }
+  }
+})