From 5a1ef55126676d4de673fa8b4a3c5e616d3ed82e Mon Sep 17 00:00:00 2001
From: LittleSheep <littlesheep.code@hotmail.com>
Date: Sat, 30 Mar 2024 00:57:16 +0800
Subject: [PATCH] :bug: Bug fixes :sparkles: Collapsable sidebar

---
 package.json                           |  1 +
 src/components/publish/PostTools.vue   |  6 ++--
 src/components/publish/parts/Media.vue | 10 +++---
 src/layouts/master.vue                 | 44 ++++++++++++++++++--------
 vite.config.ts                         | 17 +++++++++-
 5 files changed, 54 insertions(+), 24 deletions(-)

diff --git a/package.json b/package.json
index b148700..817c96f 100644
--- a/package.json
+++ b/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"
   }
 }
diff --git a/src/components/publish/PostTools.vue b/src/components/publish/PostTools.vue
index 2c1f4ef..df1e582 100644
--- a/src/components/publish/PostTools.vue
+++ b/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>
diff --git a/src/components/publish/parts/Media.vue b/src/components/publish/parts/Media.vue
index 42a7cf7..c28ff3d 100644
--- a/src/components/publish/parts/Media.vue
+++ b/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", {
diff --git a/src/layouts/master.vue b/src/layouts/master.vue
index 1637493..1e93acf 100644
--- a/src/layouts/master.vue
+++ b/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>
diff --git a/vite.config.ts b/vite.config.ts
index ed08b91..194ab14 100644
--- a/vite.config.ts
+++ b/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))