re-implement original method of hiding tags

wrap around the promise structure with non-promisey way of hiding values instead of mutating the entries

projects/frontend/src/views/shared/media-list.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, useTemplateRef, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import type {
   ConfigfulRouteDefinition,
   ListWithWarnings,
@@ -17,16 +17,10 @@ import ArticleTile from '../article/article-tile.vue'
 type MediaList =
   & ListWithWarnings<MediaEntry>
 
-/**
- * A wrapper around {@link ResolvedListEntries} for the app's use only which adds additional fields
- * in order for the app to effectively display the entries.
- */
-type DisplayedEntries = ResolvedListEntries<MediaEntry & {
-  /**
-   * specifies whether the entry is hidden by the tags selected by a visitor
-   */
-  isHidden?: boolean
-}>
+type DisplayedEntries = { [key: string]: {
+  entry: Promise<MediaEntry>
+  hiddenByTags?: boolean
+}}
 
 const ready = ref(false)
 const currentRoute = getCurrentRoute()
@@ -39,7 +33,6 @@ const viewPath = computed(() => `${currentRoute.path}/view`)
 
 const config = ref(null as MediaList | null)
 const entries = ref({} as DisplayedEntries)
-const entriesRefs = useTemplateRef('tiles' as any)
 const hasWarnings = ref(false)
 const hideWarnings = defineModel('hideWarnings', { type: Boolean })
 const template = ref(routeConfig.template)
@@ -61,20 +54,14 @@ const className = computed(() => {
  * @param tagsToggled the tags currently toggled in the filter panel
  */
  const onToggledTagsChanged = async (tagsToggled: string[]) => {
-  await Promise.all((entriesRefs as any).value.map(async (val: any) => {
-    const el = val.$el as HTMLElement
-    const entry = await entries.value[el.id]
+  await Promise.all(Object.keys(entries.value).map(async entryId => {
+    const entry = entries.value[entryId]
+    const entryVal = await entry.entry
 
     if (tagsToggled.length < 1) {
-      entry.isHidden = false
+      entry.hiddenByTags = false
     } else {
-      entry.isHidden = !entry.tags?.some(own => tagsToggled.includes(own))
-    }
-
-    if (entry?.isHidden) {
-      el.classList.add('hidden')
-    } else {
-      el.classList.remove('hidden')
+      entry.hiddenByTags = !entryVal.tags?.some(own => tagsToggled.includes(own))
     }
   }))
 }
@@ -93,7 +80,11 @@ onMounted(async () => {
   let listConfig = await fetchAndParseConfig<MediaList>(routeConfig.config)
   const list = await fetchConfigsFromList<MediaEntry>(listConfig)
   config.value = listConfig
-  entries.value = list.entries
+  Object.keys(list.entries).forEach(entryId => {
+    entries.value[entryId] = {
+      entry: list.entries[entryId],
+    }
+  })
   document.title = routeConfig.fullTitle
   ready.value = true
   hasWarnings.value = !!(await Promise.all(Object.values(list.entries))).find(other => !!other.warnings)
@@ -136,19 +127,17 @@ onMounted(async () => {
         v-for='(entry, id) in entries'
       )
         GalleryTile(
-          v-if='template === "gallery-list"'
-          ref='tiles'
-          :class='{ hidden: entry.isHidden && !config.removeFromView }'
+          v-if='template === "gallery-list" && (!entry.hiddenByTags)'
+          :class='{ hidden: entry.hiddenByTags && !config.removeFromView }'
           :hideWarnings='hideWarnings'
           :id='id'
           :viewPath='viewPath'
           :isInternal='true'
-          :entry='entry'
+          :entry='entry.entry'
         )
         ArticleTile(
-          v-else-if='template === "article-list"'
-          ref='tiles'
-          :class='{ hidden: entry.isHidden && !config.removeFromView }'
+          v-else-if='template === "article-list" && (!entry.hiddenByTags || !config.removeFromView)'
+          :class='{ hidden: entry.hiddenByTags && !config.removeFromView }'
           :hideWarnings='hideWarnings'
           :id='id'
           :viewPath='viewPath'