💄 Optimized most of components for moblie

src/components/NotificationList.vue

@@ -12,9 +12,8 @@
 
     <v-list v-if="notifications.length <= 0" class="w-[380px]" density="compact">
       <v-list-item>
-        <v-alert class="text-sm" variant="tonal" type="info"
+        <v-alert class="text-sm" variant="tonal" type="info">You are done! There is no unread notifications for
-          >You are done! There is no unread notifications for you.</v-alert
+          you.</v-alert>
-        >
       </v-list-item>
     </v-list>
 
@@ -55,10 +54,10 @@ async function readNotifications() {
   const res = await request(
     "identity",
     "/api/notifications?" +
-      new URLSearchParams({
+    new URLSearchParams({
-        take: pagination.pageSize.toString(),
+      take: pagination.pageSize.toString(),
-        offset: ((pagination.page - 1) * pagination.pageSize).toString()
+      offset: ((pagination.page - 1) * pagination.pageSize).toString()
-      }),
+    }),
     {
       headers: { Authorization: `Bearer ${await getAtk()}` }
     }

src/components/publish/ArticleEditor.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card :rounded="false">
+  <v-card class="h-screen" :rounded="false">
     <v-form @submit.prevent="postArticle">
       <v-toolbar>
         <div class="article-toolbar">

src/components/publish/CommentEditor.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card title="Leave your comment" :loading="loading">
+  <v-card title="Leave your comment" class="min-h-[540px]" :loading="loading">
     <v-form @submit.prevent="postComment">
       <v-card-text>
         <v-alert v-if="editor.related.edit_to" class="mb-5" type="info" variant="tonal">

src/components/publish/MomentEditor.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card title="Record a moment" :loading="loading">
+  <v-card title="Record a moment" class="min-h-[540px]" :loading="loading">
     <v-form @submit.prevent="postMoment">
       <v-card-text>
         <v-alert v-if="editor.related.edit_to" class="mb-5" type="info" variant="tonal">

src/components/publish/PostTools.vue

@@ -1,18 +1,12 @@
 <template>
   <v-bottom-sheet v-model="editor.show.comment" eager>
-    <div class="h-[720px]">
+    <comment-editor />
-      <comment-editor />
-    </div>
   </v-bottom-sheet>
   <v-bottom-sheet v-model="editor.show.moment" eager>
-    <div class="h-[720px]">
+    <moment-editor />
-      <moment-editor />
-    </div>
   </v-bottom-sheet>
   <v-bottom-sheet v-model="editor.show.article" eager>
-    <div class="h-[720px]">
+    <article-editor />
-      <article-editor />
-    </div>
   </v-bottom-sheet>
 
   <v-bottom-sheet v-model="editor.show.delete" eager>

src/components/realms/RealmDeletion.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card title="Delete a realm" :loading="loading">
+  <v-card title="Delete a realm" class="min-h-[540px]" :loading="loading">
     <template #text>
       You are deleting a realm
       <b>{{ realms.related.delete_to?.name }}</b> <br />

src/components/realms/RealmEditor.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card title="Organize a realm" prepend-icon="mdi-account-multiple" :loading="loading">
+  <v-card title="Organize a realm" prepend-icon="mdi-account-multiple" class="min-h-[540px]" :loading="loading">
     <v-form @submit.prevent="submit">
       <v-card-text>
         <v-text-field label="Name" variant="outlined" density="comfortable" v-model="data.name" />

src/components/realms/RealmTools.vue

@@ -1,16 +1,16 @@
 <template>
-  <v-dialog v-model="realms.show.editor" class="max-w-[540px]">
+  <v-bottom-sheet v-model="realms.show.editor">
     <realm-editor @relist="realms.list" />
-  </v-dialog>
+  </v-bottom-sheet>
-  <v-dialog v-model="realms.show.delete" class="max-w-[540px]">
+  <v-bottom-sheet v-model="realms.show.delete">
     <realm-deletion @relist="realms.list" />
-  </v-dialog>
+  </v-bottom-sheet>
 </template>
 
 <script setup lang="ts">
 import { useRealms } from "@/stores/realms"
 import RealmEditor from "@/components/realms/RealmEditor.vue"
-import RealmDeletion from "./RealmDeletion.vue"
+import RealmDeletion from "@/components/realms/RealmDeletion.vue"
 
 const realms = useRealms()
 </script>

src/layouts/master.vue

@@ -57,11 +57,9 @@
 
       <v-spacer />
 
-      <v-tooltip v-for="item in navigationMenu" :text="item.name" location="bottom">
+      <div v-if="id.userinfo.isLoggedIn">
-        <template #activator="{ props }">
+          <notification-list />
-          <v-btn flat exact v-bind="props" :to="{ name: item.to }" size="small" :icon="item.icon" />
+      </div>
-        </template>
-      </v-tooltip>
     </div>
   </v-app-bar>
 
@@ -107,6 +105,7 @@ import { useWellKnown } from "@/stores/wellKnown"
 import PostTools from "@/components/publish/PostTools.vue"
 import RealmTools from "@/components/realms/RealmTools.vue"
 import RealmList from "@/components/realms/RealmList.vue"
+import NotificationList from "@/components/NotificationList.vue"
 
 const safeAreaTop = computed(() => {
   return getComputedStyle(document.documentElement).getPropertyValue("--safe-area-top")
@@ -118,7 +117,6 @@ const safeAreaBottom = computed(() => {
 
 const id = useUserinfo()
 const editor = useEditor()
-const navigationMenu = [{ name: "Explore", icon: "mdi-compass", to: "explore" }]
 
 const username = computed(() => {
   if (id.userinfo.isLoggedIn) {