android/app/capacitor.build.gradle

@@ -9,7 +9,6 @@ android {
 
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
-    implementation project(':capacitor-local-notifications')
     implementation project(':capacitor-preferences')
 
 }

android/capacitor.settings.gradle

@@ -2,8 +2,5 @@
 include ':capacitor-android'
 project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')
 
-include ':capacitor-local-notifications'
-project(':capacitor-local-notifications').projectDir = new File('../node_modules/@capacitor/local-notifications/android')
-
 include ':capacitor-preferences'
 project(':capacitor-preferences').projectDir = new File('../node_modules/@capacitor/preferences/android')

ios/App/App.xcodeproj/project.pbxproj

@@ -27,7 +27,6 @@
 		504EC3111FED79650016851F /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/LaunchScreen.storyboard; sourceTree = "<group>"; };
 		504EC3131FED79650016851F /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
 		50B271D01FEDC1A000F3C39B /* public */ = {isa = PBXFileReference; lastKnownFileType = folder; path = public; sourceTree = "<group>"; };
-		730477372BB91A4200A78988 /* App.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; path = App.entitlements; sourceTree = "<group>"; };
 		AF277DCFFFF123FFC6DF26C7 /* Pods_App.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_App.framework; sourceTree = BUILT_PRODUCTS_DIR; };
 		AF51FD2D460BCFE21FA515B2 /* Pods-App.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-App.release.xcconfig"; path = "Pods/Target Support Files/Pods-App/Pods-App.release.xcconfig"; sourceTree = "<group>"; };
 		FC68EB0AF532CFC21C3344DD /* Pods-App.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-App.debug.xcconfig"; path = "Pods/Target Support Files/Pods-App/Pods-App.debug.xcconfig"; sourceTree = "<group>"; };
@@ -74,7 +73,6 @@
 		504EC3061FED79650016851F /* App */ = {
 			isa = PBXGroup;
 			children = (
-				730477372BB91A4200A78988 /* App.entitlements */,
 				50379B222058CBB4000EE86E /* capacitor.config.json */,
 				504EC3071FED79650016851F /* AppDelegate.swift */,
 				504EC30B1FED79650016851F /* Main.storyboard */,
@@ -347,7 +345,6 @@
 			baseConfigurationReference = FC68EB0AF532CFC21C3344DD /* Pods-App.debug.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
-				CODE_SIGN_ENTITLEMENTS = App/App.entitlements;
 				CODE_SIGN_STYLE = Automatic;
 				CURRENT_PROJECT_VERSION = 1;
 				DEVELOPMENT_TEAM = W7HPZ53V6B;
@@ -370,7 +367,6 @@
 			baseConfigurationReference = AF51FD2D460BCFE21FA515B2 /* Pods-App.release.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
-				CODE_SIGN_ENTITLEMENTS = App/App.entitlements;
 				CODE_SIGN_STYLE = Automatic;
 				CURRENT_PROJECT_VERSION = 1;
 				DEVELOPMENT_TEAM = W7HPZ53V6B;

ios/App/App/App.entitlements

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-<dict>
-	<key>aps-environment</key>
-	<string>development</string>
-	<key>com.apple.developer.associated-domains</key>
-	<array>
-		<string>webcredentials:solsynth.dev</string>
-	</array>
-</dict>
-</plist>

ios/App/App/Info.plist

@@ -20,21 +20,8 @@
 	<string>$(MARKETING_VERSION)</string>
 	<key>CFBundleVersion</key>
 	<string>$(CURRENT_PROJECT_VERSION)</string>
-	<key>LSApplicationCategoryType</key>
-	<string></string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
-	<key>NSCameraUsageDescription</key>
-	<string>Allow Solian use your camera so that you can take photo for your post.</string>
-	<key>NSPhotoLibraryAddUsageDescription</key>
-	<string>Allow Solian full access your photo library so that you can share photos more easily.</string>
-	<key>NSPhotoLibraryUsageDescription</key>
-	<string>Allow Solian access your photo library so that you can share photos.</string>
-	<key>UIBackgroundModes</key>
-	<array>
-		<string>fetch</string>
-		<string>remote-notification</string>
-	</array>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIMainStoryboardFile</key>
@@ -56,7 +43,15 @@
 		<string>UIInterfaceOrientationLandscapeLeft</string>
 		<string>UIInterfaceOrientationLandscapeRight</string>
 	</array>
+	<key>LSApplicationCategoryType</key>
+	<string></string>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
+	<key>NSPhotoLibraryAddUsageDescription</key>
+	<string>Allow Solian full access your photo library so that you can share photos more easily.</string>
+	<key>NSPhotoLibraryUsageDescription</key>
+	<string>Allow Solian access your photo library so that you can share photos.</string>
+	<key>NSCameraUsageDescription</key>
+	<string>Allow Solian use your camera so that you can take photo for your post.</string>
 </dict>
 </plist>

ios/App/Podfile

@@ -11,7 +11,6 @@ install! 'cocoapods', :disable_input_output_paths => true
 def capacitor_pods
   pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
-  pod 'CapacitorLocalNotifications', :path => '../../node_modules/@capacitor/local-notifications'
   pod 'CapacitorPreferences', :path => '../../node_modules/@capacitor/preferences'
 end
 

ios/App/Podfile.lock

@@ -2,15 +2,12 @@ PODS:
   - Capacitor (5.7.4):
     - CapacitorCordova
   - CapacitorCordova (5.7.4)
-  - CapacitorLocalNotifications (5.0.7):
-    - Capacitor
   - CapacitorPreferences (5.0.7):
     - Capacitor
 
 DEPENDENCIES:
   - "Capacitor (from `../../node_modules/@capacitor/ios`)"
   - "CapacitorCordova (from `../../node_modules/@capacitor/ios`)"
-  - "CapacitorLocalNotifications (from `../../node_modules/@capacitor/local-notifications`)"
   - "CapacitorPreferences (from `../../node_modules/@capacitor/preferences`)"
 
 EXTERNAL SOURCES:
@@ -18,17 +15,14 @@ EXTERNAL SOURCES:
     :path: "../../node_modules/@capacitor/ios"
   CapacitorCordova:
     :path: "../../node_modules/@capacitor/ios"
-  CapacitorLocalNotifications:
-    :path: "../../node_modules/@capacitor/local-notifications"
   CapacitorPreferences:
     :path: "../../node_modules/@capacitor/preferences"
 
 SPEC CHECKSUMS:
   Capacitor: 4fe9adf012caceb4c71ffea2f1f4d005cdcbeea7
   CapacitorCordova: a6e87fccc0307dee7aec1560ec9398485f2b0ce7
-  CapacitorLocalNotifications: c58afadd159f6bc540ef9b3cbdbc82510a2bf112
   CapacitorPreferences: 77ac427e98db83bace772455f8ba447430382c4c
 
-PODFILE CHECKSUM: 19c3106e1cb0c8c0ae26243bfb70b974f8cfaaf5
+PODFILE CHECKSUM: 769e120bf4dfe4ef1095b83775e36bafeeeb3cdd
 
 COCOAPODS: 1.15.1

package.json

@@ -16,7 +16,6 @@
     "@capacitor/android": "^5.7.4",
     "@capacitor/core": "^5.7.4",
     "@capacitor/ios": "^5.7.4",
-    "@capacitor/local-notifications": "^5.0.7",
     "@capacitor/preferences": "^5.0.7",
     "@fontsource/roboto": "^5.0.12",
     "@mdi/font": "^7.4.47",

src/components/NotificationList.vue

@@ -1,8 +1,8 @@
 <template>
   <v-menu eager :close-on-content-click="false">
     <template #activator="{ props }">
-      <v-btn v-bind="props" icon size="small" variant="text" :loading="loading">
-        <v-badge v-if="notify.total > 0" color="error" :content="notify.total">
+      <v-btn v-bind="props" icon rounded="circle" size="small" variant="text" :loading="loading">
+        <v-badge v-if="pagination.total > 0" color="error" :content="pagination.total">
           <v-icon icon="mdi-bell" />
         </v-badge>
 
@@ -10,19 +10,20 @@
       </v-btn>
     </template>
 
-    <v-list v-if="notify.notifications.length <= 0" class="w-[380px]" density="compact">
+    <v-list v-if="notifications.length <= 0" class="w-[380px]" density="compact">
       <v-list-item>
-        <v-alert class="text-sm" variant="tonal" type="info">You are done! There is no unread notifications for you.</v-alert>
+        <v-alert class="text-sm" variant="tonal" type="info">You are done! There is no unread notifications for
+          you.</v-alert>
       </v-list-item>
     </v-list>
 
     <v-list v-else class="w-[380px]" density="compact" lines="three">
-      <v-list-item v-for="(item, idx) in notify.notifications">
+      <v-list-item v-for="item in notifications">
         <template #title>{{ item.subject }}</template>
         <template #subtitle>{{ item.content }}</template>
 
         <template #append>
-          <v-btn icon="mdi-check" size="x-small" variant="text" :disabled="loading" @click="markAsRead(item, idx)" />
+          <v-btn icon="mdi-check" size="x-small" variant="text" :disabled="loading" @click="markAsRead(item)" />
         </template>
 
         <div class="flex text-xs gap-1">
@@ -39,32 +40,50 @@
 <script setup lang="ts">
 import { request } from "@/scripts/request"
 import { getAtk } from "@/stores/userinfo"
-import { computed, onMounted, onUnmounted, ref } from "vue";
-import { useNotifications } from "@/stores/notifications";
+import { reactive, ref } from "vue"
 
-const notify = useNotifications()
+const loading = ref(false)
 
 const error = ref<string | null>(null)
-const submitting = ref(false)
-const loading = computed(() => notify.loading || submitting.value)
 
-async function markAsRead(item: any, idx: number) {
-  submitting.value = true
+const notifications = ref<any[]>([])
+const pagination = reactive({ page: 1, pageSize: 25, total: 0 })
+
+async function readNotifications() {
+  loading.value = true
+  const res = await request(
+    "identity",
+    "/api/notifications?" +
+    new URLSearchParams({
+      take: pagination.pageSize.toString(),
+      offset: ((pagination.page - 1) * pagination.pageSize).toString()
+    }),
+    {
+      headers: { Authorization: `Bearer ${await getAtk()}` }
+    }
+  )
+  if (res.status === 200) {
+    const data = await res.json()
+    notifications.value = data["data"]
+    pagination.total = data["count"]
+  }
+  loading.value = false
+}
+
+readNotifications()
+
+async function markAsRead(item: any) {
+  loading.value = true
   const res = await request("identity", `/api/notifications/${item.id}/read`, {
     method: "PUT",
-    headers: { Authorization: `Bearer ${getAtk()}` },
+    headers: { Authorization: `Bearer ${await getAtk()}` }
   })
   if (res.status !== 200) {
     error.value = await res.text()
   } else {
-    notify.remove(idx)
+    await readNotifications()
     error.value = null
   }
-  submitting.value = false
+  loading.value = false
 }
-
-notify.list()
-
-onMounted(() => notify.connect())
-onUnmounted(() => notify.disconnect())
 </script>

src/components/posts/PostAttachment.vue

@@ -14,6 +14,7 @@
         <v-carousel-item v-for="(item, idx) in attachments">
           <img
             v-if="item.type === 1"
+            loading="lazy"
             decoding="async"
             class="cursor-zoom-in content-visibility-auto w-full h-full object-contain"
             :src="getUrl(item)"

src/stores/notifications.ts

@@ -1,81 +0,0 @@
-import { defineStore } from "pinia"
-import { ref } from "vue"
-import { checkLoggedIn, getAtk } from "@/stores/userinfo"
-import { buildRequestUrl, request } from "@/scripts/request"
-import { LocalNotifications } from "@capacitor/local-notifications"
-import { Capacitor } from "@capacitor/core"
-
-export const useNotifications = defineStore("notifications", () => {
-  let socket: WebSocket
-
-  const loading = ref(false)
-
-  const notifications = ref<any[]>([])
-  const total = ref(0)
-
-  async function list() {
-    loading.value = true
-    const res = await request(
-      "identity",
-      "/api/notifications?" +
-      new URLSearchParams({
-        take: (25).toString(),
-        offset: (0).toString()
-      }),
-      {
-        headers: { Authorization: `Bearer ${await getAtk()}` }
-      }
-    )
-    if (res.status === 200) {
-      const data = await res.json()
-      notifications.value = data["data"]
-      total.value = data["count"]
-    }
-    loading.value = false
-  }
-
-  function remove(idx: number) {
-    notifications.value.splice(idx, 1)
-    total.value--
-  }
-
-  async function connect() {
-    if (!(await checkLoggedIn())) return
-
-    const uri = buildRequestUrl("identity", "/api/notifications/listen").replace("http", "ws")
-
-    socket = new WebSocket(uri + `?tk=${await getAtk() as string}`)
-
-    socket.addEventListener("open", (event) => {
-      console.log("[NOTIFICATIONS] The listen websocket has been established... ", event.type)
-    })
-    socket.addEventListener("close", (event) => {
-      console.warn("[NOTIFICATIONS] The listen websocket is disconnected... ", event.reason, event.code)
-    })
-    socket.addEventListener("message", (event) => {
-      const data = JSON.parse(event.data)
-      notifications.value.push(data)
-      total.value++
-
-      if (Capacitor.getPlatform() === "web") {
-        new Notification(data["id"], {
-          body: data["subject"]
-        })
-      } else {
-        LocalNotifications.schedule({
-          notifications: [
-            { id: data["id"], title: data["subject"], body: data["subject"] }
-          ]
-        }).then((res) => console.log(res))
-      }
-    })
-
-    await Notification.requestPermission()
-  }
-
-  function disconnect() {
-    socket.close()
-  }
-
-  return { loading, notifications, total, list, remove, connect, disconnect }
-})

src/views/chat/page.vue

@@ -5,12 +5,7 @@
     </div>
   </v-container>
 
-  <v-footer
-    app
-    class="flex items-center border-opacity-15 min-h-[64px]"
-    style="border-top-width: thin"
-    :style="`padding-bottom: ${safeAreaBottom}`"
-  >
+  <v-footer app class="flex items-center border-opacity-15 min-h-[64px]" style="border-top-width: thin">
     <chat-editor class="flex-grow-1" @sent="scrollTop" />
   </v-footer>
 
@@ -21,20 +16,14 @@
 <script setup lang="ts">
 import { useChannels } from "@/stores/channels"
 import { request } from "@/scripts/request"
-import { useUI } from "@/stores/ui"
-import { computed, reactive, ref, watch } from "vue"
+import { 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)

src/views/explore.vue

@@ -4,7 +4,7 @@
       <post-list v-model:posts="posts" :loader="readMore" />
     </div>
 
-    <div class="aside w-full h-full md:min-w-[320px] md:max-w-[320px] max-md:order-first">
+    <div class="aside md:sticky top-0 w-full h-fit md:min-w-[280px] md:max-w-[320px] max-md:order-first">
       <v-card title="Categories">
         <v-list density="compact">
           <v-list-item title="All" prepend-icon="mdi-apps" active></v-list-item>
@@ -16,8 +16,8 @@
 
 <script setup lang="ts">
 import PostList from "@/components/posts/PostList.vue"
-import { request } from "@/scripts/request"
 import { reactive, ref } from "vue"
+import { request } from "@/scripts/request"
 
 const error = ref<string | null>(null)
 const pagination = reactive({ page: 1, pageSize: 10, total: 0 })

vite.config.ts

@@ -16,8 +16,9 @@ export default defineConfig({
       registerType: "autoUpdate",
       useCredentials: true,
       manifest: {
-        name: "Solian",
-        description: "The Solar Network Application",
+        name: "Solar Network",
+        short_name: "Solian",
+        description: "The Solar Network entrypoint.",
         theme_color: "#4b5094",
         display: "standalone",
         icons: [
@@ -26,13 +27,9 @@ export default defineConfig({
             sizes: "1024x1024",
             type: "image/png",
             purpose: "maskable"
-          }
+          },
         ]
       },
-      workbox: {
-        sourcemap: true,
-        cleanupOutdatedCaches: true
-      }
     })
   ],
   resolve: {