💄 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

package.json

@@ -48,6 +48,7 @@
     "typescript": "~5.4.0",
     "unocss": "^0.58.7",
     "vite": "^5.1.6",
+    "vite-plugin-pwa": "^0.19.7",
     "vue-tsc": "^2.0.6"
   }
 }

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}`)
 }

src/components/publish/PostTools.vue

@@ -1,15 +1,15 @@
 <template>
-  <v-bottom-sheet v-model="editor.show.comment" eager>
+  <v-bottom-sheet class="max-w-[480px]" v-model="editor.show.comment" eager>
     <comment-editor />
   </v-bottom-sheet>
-  <v-bottom-sheet v-model="editor.show.moment" eager>
+  <v-bottom-sheet class="max-w-[480px]" v-model="editor.show.moment" eager>
     <moment-editor />
   </v-bottom-sheet>
   <v-bottom-sheet v-model="editor.show.article" eager>
     <article-editor />
   </v-bottom-sheet>
 
-  <v-bottom-sheet v-model="editor.show.delete" eager>
+  <v-bottom-sheet class="max-w-[480px]" v-model="editor.show.delete" eager>
     <post-deletion />
   </v-bottom-sheet>
 </template>

src/components/publish/parts/Media.vue

@@ -22,7 +22,7 @@
         <v-card variant="tonal">
           <v-list>
             <v-list-item v-for="(item, idx) in props.value" :title="getFileName(item)">
-              <template #subtitle> {{ getFileType(item) }} · {{ formatBytes(item.filesize) }} </template>
+              <template #subtitle> {{ getFileType(item) }} · {{ formatBytes(item.filesize) }}</template>
               <template #append>
                 <v-btn icon="mdi-delete" size="small" variant="text" color="error" @click="dispose(idx)" />
               </template>
@@ -54,13 +54,11 @@ async function upload(file?: any) {
 
   const data = new FormData()
   if (!file) {
-    if (!picked.value) return
-    data.set("attachment", picked.value[0])
-  } else {
-    data.set("attachment", file)
+    file = picked.value[0]
   }
 
-  data.set("hashcode", await calculateHashCode(picked.value[0]))
+  data.set("attachment", file)
+  data.set("hashcode", await calculateHashCode(file))
 
   emits("update:uploading", true)
   const res = await request("interactive", "/api/attachments", {

src/layouts/master.vue

@@ -1,10 +1,29 @@
 <template>
-  <v-navigation-drawer v-model="drawerOpen" color="grey-lighten-5" width="320" :order="0" floating>
+  <v-navigation-drawer
+    v-model="drawerOpen"
+    color="grey-lighten-5"
+    width="320"
+    :rail="drawerMini"
+    :rail-width="58"
+    :order="0"
+    @click="drawerMini = false"
+  >
     <div class="flex flex-col h-full">
-      <div class="flex items-center px-3 pb-2.5 border-opacity-15" style="border-bottom-width: thin"
-        :style="`padding-top: max(${safeAreaTop}, 16px)`">
-        <img src="/favicon.png" width="36" height="36" class="block" />
-        <div class="ms-6 font-medium">Solar Network</div>
+      <div class="flex items-center justify-between px-3 pb-2.5 border-opacity-15 min-h-[64px]"
+           style="border-bottom-width: thin"
+           :style="`padding-top: max(${safeAreaTop}, 10px)`">
+        <div class="flex items-center">
+          <img src="/favicon.png" alt="Logo" width="36" height="36" class="block" />
+          <div v-show="!drawerMini" class="ms-6 font-medium">Solar Network</div>
+        </div>
+
+        <v-btn
+          v-show="!drawerMini"
+          icon="mdi-arrow-collapse-left"
+          size="small"
+          variant="text"
+          @click.stop="drawerMini = true"
+        />
       </div>
 
       <div class="flex-grow-1">
@@ -13,7 +32,7 @@
 
       <!-- User info -->
       <v-list class="border-opacity-15 h-[64px]" style="border-top-width: thin"
-        :style="`margin-bottom: ${safeAreaBottom}`">
+              :style="`margin-bottom: ${safeAreaBottom}`">
         <v-list-item :subtitle="username" :title="nickname">
           <template #prepend>
             <v-avatar icon="mdi-account-circle" :image="id.userinfo.data?.picture" />
@@ -26,7 +45,7 @@
 
               <v-list density="compact">
                 <v-list-item title="Solarpass" prepend-icon="mdi-passport-biometric" target="_blank"
-                  :href="passportUrl" />
+                             :href="passportUrl" />
               </v-list>
             </v-menu>
 
@@ -39,7 +58,7 @@
 
   <v-app-bar height="64" color="primary" scroll-behavior="hide" :order="2" flat>
     <div class="max-md:px-5 md:px-12 flex flex-grow-1 items-center">
-      <v-app-bar-nav-icon variant="text" @click.stop="toggleDrawer" />
+      <v-app-bar-nav-icon variant="text" @click.stop="drawerOpen = !drawerOpen" />
 
       <router-link :to="{ name: 'explore' }">
         <h2 class="ml-2 text-lg font-500">Solian</h2>
@@ -58,10 +77,10 @@
   </v-main>
 
   <v-menu open-on-hover open-on-click :open-delay="0" :close-delay="0" location="top"
-    transition="scroll-y-reverse-transition">
+          transition="scroll-y-reverse-transition">
     <template v-slot:activator="{ props }">
       <v-fab v-bind="props" appear class="editor-fab" icon="mdi-pencil" color="primary" size="64"
-        :active="id.userinfo.isLoggedIn" />
+             :active="id.userinfo.isLoggedIn" />
     </template>
 
     <div class="flex flex-col items-center gap-4 mb-4">
@@ -124,10 +143,7 @@ const passportUrl = computed(() => {
 meta.readWellKnown()
 
 const drawerOpen = ref(true)
-
-function toggleDrawer() {
-  drawerOpen.value = !drawerOpen.value
-}
+const drawerMini = ref(false)
 </script>
 
 <style scoped>

vite.config.ts

@@ -1,13 +1,28 @@
 import { fileURLToPath, URL } from "node:url"
 
 import { defineConfig } from "vite"
+import { VitePWA as vitePWA } from "vite-plugin-pwa"
 import vue from "@vitejs/plugin-vue"
 import vueJsx from "@vitejs/plugin-vue-jsx"
 import unocss from "unocss/vite"
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), vueJsx(), unocss()],
+  plugins: [
+    vue(),
+    vueJsx(),
+    unocss(),
+    vitePWA({
+      registerType: "autoUpdate",
+      useCredentials: true,
+      manifest: {
+        name: "Solian",
+        short_name: "Solian",
+        description: "The Solar Network entrypoint.",
+        theme_color: "#4b5094",
+      },
+    })
+  ],
   resolve: {
     alias: {
       "@": fileURLToPath(new URL("./src", import.meta.url))