fix: ensure selected show is stored per tab

The selected show was stored in the browser’s local storage. This was a
remnant of the time where the selected show was a global state on which
all pages operated.

The selected show is now only stored in the current tab/window state so
multiple dashboard tabs/windows should work without issue.

refs #309

src/stores/shows.ts

-import { StorageSerializers, useStorage } from '@vueuse/core'
 import {
   APICreate,
   APIListPaginated,
@@ -9,8 +8,8 @@ import {
   ExtendableAPI,
 } from '@rokoli/bnb/drf'
 import { defineStore } from 'pinia'
-import { computed, Ref, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { computed, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
 
 import { createSteeringURL } from '@/api'
 import { components } from '@/steering-types'
@@ -52,11 +51,11 @@ export function newShow(): NewShow {
 
 function useSelectedShowBehaviour(api: ExtendableAPI<Show>) {
   const authStore = useAuthStore()
+  const route = useRoute()
+
   const { retrieve } = APIRetrieve(api)
 
-  const selectedShowId = useStorage<number | null>('aura:selected-show', null, undefined, {
-    serializer: StorageSerializers.number,
-  })
+  const selectedShowId = ref<number | null>(null)
 
   const selectedShow = computed(() =>
     selectedShowId.value !== null ? api.itemMap.value.get(selectedShowId.value) ?? null : null,
@@ -75,29 +74,6 @@ function useSelectedShowBehaviour(api: ExtendableAPI<Show>) {
     selectedShowId.value = null
   })
 
-  return { selectedShowId, selectedShow }
-}
-
-function useRouteSyncBehaviour(
-  selectedShowId: Ref<Show['id'] | null>,
-  selectedShow: Ref<Show | null>,
-) {
-  const route = useRoute()
-  const router = useRouter()
-
-  // watch changes to the selected show and apply them to the current route
-  // so that fast context switches between multiple shows on show editor pages are possible
-  watch(selectedShow, (show, oldShow) => {
-    if (!oldShow) return
-    const newShowId = show?.id ?? null
-    const oldShowId = oldShow?.id ?? null
-    if (newShowId === oldShowId) return
-
-    if (show && route.name && route.params.showId) {
-      void router.replace({ name: route.name, params: { ...route.params, showId: newShowId } })
-    }
-  })
-
   // Change the selected show if the user accessed a route for a particular show.
   // This is made so the show selector and the current route don’t have mismatching shows, which may cause confusion.
   watch(
@@ -109,6 +85,8 @@ function useRouteSyncBehaviour(
     },
     { immediate: true },
   )
+
+  return { selectedShowId, selectedShow }
 }
 
 export const useShowStore = defineStore('shows', () => {
@@ -116,7 +94,6 @@ export const useShowStore = defineStore('shows', () => {
   const { api, base } = createExtendableAPI<Show>(endpoint, steeringAuthInit)
   const { selectedShow, selectedShowId } = useSelectedShowBehaviour(api)
   const listOperations = APIListPaginated(api)
-  useRouteSyncBehaviour(selectedShowId, selectedShow)
 
   return {
     ...base,