feat: show post tags in a bottom sheet

components/layout/navigation/BottomSheetWrapper.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+  const isOpen = defineModel<boolean>()
+</script>
+
+<template>
+  <div>
+    <HeadlessTransitionRoot
+      :show="isOpen"
+      as="template"
+    >
+      <HeadlessDialog
+        as="div"
+        class="relative z-20"
+        @close="isOpen = false"
+      >
+        <!-- Background -->
+        <HeadlessTransitionChild
+          as="template"
+          enter="transition-opacity ease-linear duration-300"
+          enter-from="opacity-0"
+          enter-to="opacity-100"
+          leave="transition-opacity ease-linear duration-300"
+          leave-from="opacity-100"
+          leave-to="opacity-0"
+        >
+          <div class="fixed inset-0 bg-base-1000/80 backdrop-blur" />
+        </HeadlessTransitionChild>
+
+        <div class="fixed inset-0 flex">
+          <!-- Dialog -->
+          <HeadlessTransitionChild
+            as="template"
+            enter="transition ease-in-out duration-300 transform"
+            enter-from="translate-y-full"
+            enter-to="translate-y-0"
+            leave="transition ease-in-out duration-300 transform"
+            leave-from="translate-y-0"
+            leave-to="translate-y-full"
+          >
+            <HeadlessDialogPanel class="relative mx-auto flex max-h-[80vh] w-full max-w-2xl flex-1 self-end px-4">
+              <!-- Sidebar -->
+              <div class="flex grow flex-col overflow-y-auto rounded-t-md bg-base-1000 px-4 py-4 ring-1 ring-base-0/10">
+                <slot />
+              </div>
+            </HeadlessDialogPanel>
+          </HeadlessTransitionChild>
+        </div>
+      </HeadlessDialog>
+    </HeadlessTransitionRoot>
+  </div>
+</template>

components/pages/posts/post/Post.vue

@@ -25,13 +25,15 @@
 
   const userSettings = useUserSettings()
 
+  const areTagsOpen = ref(false)
+
   const mediaFile = computed(() => {
     const data = {
       file: null,
       width: null,
       height: null,
       posterFile: null,
-      alt: 'Post with tags: ' + tagsAsSingleArray.value.map((tag) => tag.name).join(', ')
+      alt: 'Post #' + props.post.id
     }
 
     switch (props.post.media_type) {
@@ -69,21 +71,9 @@
     return data
   })
 
-  /**
-   * Take in an object of tags like { character: ['tag1', 'tag2'], artist: ['tag3', 'tag4'] }
-   * and return an array of tags like [{ name: 'tag1', type: 'character' }, { name: 'tag2', type: 'character' }, { name: 'tag3', type: 'artist' }, { name: 'tag4', type: 'artist' }]
-   * @returns {Array<{ name: string, type: string }>}
-   */
-  const tagsAsSingleArray = computed(() => {
-    const tags = []
-
-    for (const [type, tagsArray] of Object.entries(props.post.tags)) {
-      for (const tag of tagsArray) {
-        tags.push({ name: tag, type })
-      }
-    }
-
-    return tags
+  // Only tagtypes that have at least one tag
+  const tagTypesWithTags = computed(() => {
+    return Object.keys(props.post.tags).filter((tagType) => props.post.tags[tagType].length > 0)
   })
 </script>
 
@@ -98,10 +88,7 @@
       :mediaType="post.media_type"
     />
 
-    <HeadlessDisclosure
-      v-slot="{ open }"
-      as="figcaption"
-    >
+    <figcaption>
       <!-- Actions -->
       <div class="flex items-center p-2">
         <PostSave
@@ -121,40 +108,59 @@
           :post-sources="post.sources"
         />
 
-        <HeadlessDisclosureButton
+        <button
           class="hover:hover-bg-util focus-visible:focus-outline-util group ml-auto flex items-center gap-1 rounded-md px-1.5 py-1"
           type="button"
+          @click="areTagsOpen = !areTagsOpen"
         >
           <span class="group-hover:hover-text-util text-sm text-base-content"> Tags </span>
 
           <ChevronDownIcon
             :class="{
-              'rotate-180 transform': open,
-              'rotate-0 transform': !open
+              'rotate-180 transform': areTagsOpen,
+              'rotate-0 transform': !areTagsOpen
             }"
             class="group-hover:hover-text-util h-5 w-5 text-base-content"
           />
-        </HeadlessDisclosureButton>
+        </button>
       </div>
 
       <!-- Tags -->
-      <HeadlessDisclosurePanel
-        as="ol"
-        class="flex flex-wrap gap-2 p-2"
-      >
-        <li
-          v-for="tag in tagsAsSingleArray"
-          :key="tag.name"
-        >
-          <PostTag
-            :selectedTags="selectedTags"
-            :tag="tag"
-            @addTag="emit('addTag', $event)"
-            @openTagInNewTab="emit('openTagInNewTab', $event)"
-            @setTag="emit('setTag', $event)"
-          />
-        </li>
-      </HeadlessDisclosurePanel>
-    </HeadlessDisclosure>
+      <BottomSheetWrapper v-model="areTagsOpen">
+        <!--  -->
+
+        <div class="space-y-2">
+          <!--  -->
+
+          <template v-for="tagType of tagTypesWithTags">
+            <!--  -->
+
+            <div>
+              <h3 class="text-lg font-bold leading-7 tracking-tight text-base-content-highlight">
+                {{ tagType.charAt(0).toUpperCase() + tagType.slice(1) }}
+              </h3>
+
+              <ol
+                as="ol"
+                class="flex flex-wrap gap-2 p-2"
+              >
+                <li
+                  v-for="tag in post.tags[tagType]"
+                  :key="tag"
+                >
+                  <PostTag
+                    :selectedTags="selectedTags"
+                    :tag="{ name: tag, type: tagType }"
+                    @addTag="emit('addTag', $event)"
+                    @openTagInNewTab="emit('openTagInNewTab', $event)"
+                    @setTag="emit('setTag', $event)"
+                  />
+                </li>
+              </ol>
+            </div>
+          </template>
+        </div>
+      </BottomSheetWrapper>
+    </figcaption>
   </figure>
 </template>

components/pages/posts/post/PostTag.vue

@@ -40,6 +40,7 @@
       leave-from="transform opacity-100 scale-100"
       leave-to="transform opacity-0 scale-95"
       placement="bottom-start"
+      flip
       portal
       tailwindcss-origin-class
     >