💄 Optimized attachment viewer

🐛 Fix lightbox safe area issue

ios/.gitignore

@@ -11,3 +11,4 @@ capacitor-cordova-ios-plugins
 # Generated Config files
 App/App/capacitor.config.json
 App/App/config.xml
+App/App.xcarchive

src/components/posts/PostAttachment.vue

@@ -3,10 +3,11 @@
     Attached {{ props.attachments.length }} attachment(s)
   </v-chip>
 
-  <v-card v-else variant="outlined" class="max-w-[540px]">
-    <v-carousel hide-delimiters progress="primary" show-arrows="hover" height="100%">
+  <v-card v-else variant="outlined" class="max-w-[540px] max-h-[720px]">
+    <v-carousel hide-delimiter-background height="100%" :show-arrows="false">
       <v-carousel-item v-for="item in attachments">
-        <img v-if="item.type === 1" :src="getUrl(item)" class="cursor-zoom-in" @click="openLightbox" />
+        <img v-if="item.type === 1" :src="getUrl(item)" :alt="item.filename" class="cursor-zoom-in"
+             @click="openLightbox" />
         <video v-if="item.type === 2" controls class="w-full">
           <source :src="getUrl(item)" />
         </video>
@@ -18,7 +19,14 @@
 
     <vue-easy-lightbox teleport="#app" :visible="lightbox" :imgs="[getUrl(current)]" @hide="lightbox = false">
       <template v-slot:close-btn="{ close }">
-        <v-btn class="fixed left-2 top-2" icon="mdi-close" variant="text" color="white" @click="close" />
+        <v-btn
+          class="fixed left-2 top-2"
+          icon="mdi-close"
+          variant="text"
+          color="white"
+          :style="`margin-top: ${safeAreaTop}`"
+          @click="close"
+        />
       </template>
     </vue-easy-lightbox>
   </v-card>
@@ -27,16 +35,23 @@
 <script setup lang="ts">
 import { buildRequestUrl } from "@/scripts/request"
 import { computed, ref } from "vue"
+import { useUI } from "@/stores/ui"
 import VueEasyLightbox from "vue-easy-lightbox"
 
 const props = defineProps<{ attachments: any[]; overview?: boolean }>()
 
+const ui = useUI()
+
 const lightbox = ref(false)
 const focus = ref(0)
 
 const current = computed(() => props.attachments[focus.value])
 const canLightbox = computed(() => current.value.type === 1)
 
+const safeAreaTop = computed(() => {
+  return `${ui.safeArea.top}px`
+})
+
 function getUrl(item: any) {
   return item.external_url ? item.external_url : buildRequestUrl("interactive", `/api/attachments/o/${item.file_id}`)
 }