From f0133650f673f598fe7c0d4ba4a63fc394b3e1fb Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Sat, 7 Mar 2026 13:34:02 +0100
Subject: [PATCH] Replace icons with text links; add video and images modal on
 pieces page

---
 pages/pieces.vue | 43 +++++++++++++++++++++++++++++++++----------
 1 file changed, 33 insertions(+), 10 deletions(-)

diff --git a/pages/pieces.vue b/pages/pieces.vue
index d469626..7482e31 100644
--- a/pages/pieces.vue
+++ b/pages/pieces.vue
@@ -6,25 +6,33 @@
         
         <div v-for="item in works" :key="item.year" class="mb-8">
           <p class="text-sm text-gray-500 mb-3">{{ item.year }}</p>
-          <div v-for="work in item.works" :key="work.title" class="mb-4">
-            <div class="flex items-start gap-2">
+          <div v-for="work in item.works" :key="work.title" class="mb-4 ml-4">
+            <div>
               <NuxtLink 
                 v-if="hasItems(work)" 
                 :to="'/works/' + slugify(work.title)" 
-                class="italic hover:underline"
+                class="text-lg italic hover:underline"
               >
                 <span v-html="work.title"></span>
               </NuxtLink>
-              <span v-else class="italic">
+              <span v-else class="text-lg italic">
                 <span v-html="work.title"></span>
               </span>
+            </div>
 
-              <div class="flex gap-1">
-                <IconButton v-if="work.score" type="score" :work="work" :link="work.score" :visible="true"></IconButton>
-                <IconButton v-if="work.soundcloud_trackid" type="audio" :work="work" :visible="true"></IconButton>
-                <IconButton v-if="work.vimeo_trackid" type="video" :work="work" :visible="true"></IconButton>
-                <IconButton v-if="work.gallery" type="image" :work="work" :visible="true"></IconButton>
-              </div>
+            <div v-if="hasContent(work)" class="flex gap-4 text-sm text-gray-500 mt-0.5">
+              <button v-if="work.soundcloud_trackid" @click="audioPlayerStore.setSoundCloudTrackID(work.soundcloud_trackid)" class="hover:underline">
+                audio
+              </button>
+              <button v-if="work.vimeo_trackid" @click="openVideoModal(work.vimeo_trackid)" class="hover:underline">
+                video
+              </button>
+              <button v-if="work.gallery" @click="openImageModal(work)" class="hover:underline">
+                images
+              </button>
+              <a v-if="work.score" :href="work.score" target="_blank" class="hover:underline">
+                score
+              </a>
             </div>
           </div>
         </div>
@@ -55,8 +63,10 @@
 
 <script setup>
 import { useModalStore } from "@/stores/ModalStore"
+import { useAudioPlayerStore } from "@/stores/AudioPlayerStore"
 
 const modalStore = useModalStore()
+const audioPlayerStore = useAudioPlayerStore()
 const route = useRoute()
 
 const slugify = (title) => {
@@ -70,6 +80,19 @@ const hasItems = (work) => {
   return work.vimeo_trackid || (work.images && work.images.length) || work.score
 }
 
+const hasContent = (work) => {
+  return work.soundcloud_trackid || work.vimeo_trackid || (work.images && work.images.length) || work.score
+}
+
+const openVideoModal = (vimeoId) => {
+  modalStore.setModalProps('video', 'aspect-video', true, '', '', vimeoId)
+}
+
+const openImageModal = (work) => {
+  const gallery = work.images.map(img => ({ image: img.filename }))
+  modalStore.setModalProps('image', 'aspect-auto', true, 'images', gallery, '')
+}
+
 const worksWithImages = computed(() => {
   if (!works.value) return []
   const allWorks = works.value.flatMap(group => group.works)