🐛 Fix safe area issue

src/components/NotificationList.vue

@@ -50,7 +50,7 @@ const loading = computed(() => notify.loading || submitting.value)
 
 async function markAsRead(item: any, idx: number) {
   submitting.value = true
-  const res = await request(`/api/notifications/${item.id}/read`, {
+  const res = await request("identity", `/api/notifications/${item.id}/read`, {
     method: "PUT",
     headers: { Authorization: `Bearer ${getAtk()}` },
   })

src/views/chat/page.vue

@@ -5,7 +5,12 @@
     </div>
   </v-container>
 
-  <v-footer app class="flex items-center border-opacity-15 min-h-[64px]" style="border-top-width: thin">
+  <v-footer
+    app
+    class="flex items-center border-opacity-15 min-h-[64px]"
+    style="border-top-width: thin"
+    :style="`padding-bottom: ${safeAreaBottom}`"
+  >
     <chat-editor class="flex-grow-1" @sent="scrollTop" />
   </v-footer>
 
@@ -16,14 +21,20 @@
 <script setup lang="ts">
 import { useChannels } from "@/stores/channels"
 import { request } from "@/scripts/request"
-import { reactive, ref, watch } from "vue"
+import { useUI } from "@/stores/ui"
+import { computed, reactive, ref, watch } from "vue"
 import { useRoute } from "vue-router"
 import ChatList from "@/components/chat/ChatList.vue"
 import ChatEditor from "@/components/chat/ChatEditor.vue"
 
+const ui = useUI()
 const route = useRoute()
 const channels = useChannels()
 
+const safeAreaBottom = computed(() => {
+  return `${ui.safeArea.bottom}px`
+})
+
 const chatList = ref<HTMLDivElement>()
 
 const error = ref<string | null>(null)