✨ Pull to refresh

package.json

@@ -39,6 +39,7 @@
     "@types/dompurify": "^3.0.5",
     "@types/node": "^20.11.28",
     "@types/nprogress": "^0.2.3",
+    "@types/pulltorefreshjs": "^0.1.7",
     "@unocss/reset": "^0.58.7",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
@@ -49,6 +50,7 @@
     "eslint-plugin-vue": "^9.17.0",
     "npm-run-all2": "^6.1.2",
     "prettier": "^3.0.3",
+    "pulltorefreshjs": "^0.1.22",
     "typescript": "~5.4.0",
     "unocss": "^0.58.7",
     "vite": "^5.1.6",

src/components/chat/channels/ChannelList.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-list-group value="channels">
+  <v-list-group class="channels-list" value="channels">
     <template #activator="{ props }">
       <v-list-item
         v-bind="props"
@@ -28,7 +28,6 @@
 
 <script setup lang="ts">
 import { useUserinfo } from "@/stores/userinfo"
-import { useRealms } from "@/stores/realms"
 import { useChannels } from "@/stores/channels"
 
 const id = useUserinfo()

src/components/realms/RealmList.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-list-group value="realms">
+  <v-list-group class="realms-list" value="realms">
     <template #activator="{ props }">
       <v-list-item
         v-bind="props"

src/layouts/master.vue

@@ -35,8 +35,12 @@
       </v-toolbar>
 
       <div class="flex-grow-1">
-        <v-list density="compact" :opened="drawerMini ? [] : expanded"
-                @update:opened="(val) => expanded = val">
+        <v-list
+          class="resources-list"
+          density="compact"
+          :opened="drawerMini ? [] : expanded"
+          @update:opened="(val) => expanded = val"
+        >
           <channel-list />
           <v-divider class="border-opacity-75 my-2" />
           <realm-list />
@@ -83,14 +87,17 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue"
-import { useUserinfo, signout as signoutAccount } from "@/stores/userinfo"
+import { computed, onMounted, ref } from "vue"
+import { useUserinfo } from "@/stores/userinfo"
 import { useWellKnown } from "@/stores/wellKnown"
 import { useUI } from "@/stores/ui"
+import { useRealms } from "@/stores/realms"
+import { useChannels } from "@/stores/channels"
 import RealmList from "@/components/realms/RealmList.vue"
 import NotificationList from "@/components/users/NotificationList.vue"
 import ChannelList from "@/components/chat/channels/ChannelList.vue"
 import UserMenu from "@/components/users/UserMenu.vue"
+import PullToRefresh from "pulltorefreshjs"
 
 const ui = useUI()
 const expanded = ref<string[]>(["channels"])
@@ -126,5 +133,18 @@ useWellKnown().readWellKnown()
 
 const drawerOpen = ref(true)
 const drawerMini = ref(false)
+
+onMounted(() => {
+  PullToRefresh.init({
+    mainElement: ".resources-list",
+    triggerElement: ".resources-list",
+    onRefresh() {
+      return Promise.all([
+        useRealms().list(),
+        useChannels().list()
+      ])
+    }
+  })
+})
 </script>
 

src/stores/notifications.ts

@@ -62,8 +62,10 @@ export const useNotifications = defineStore("notifications", () => {
     })
     socket.addEventListener("message", (event) => {
       const data = JSON.parse(event.data)
+      if (!data.is_realtime) {
         notifications.value.push(data)
         total.value++
+      }
 
       if (Capacitor.getPlatform() === "web") {
         new Notification(data["subject"], {

src/views/explore.vue

@@ -16,9 +16,10 @@
 
 <script setup lang="ts">
 import PostList from "@/components/posts/PostList.vue"
+import { onMounted, onUnmounted, reactive, ref } from "vue"
 import { request } from "@/scripts/request"
-import { reactive, ref } from "vue"
 import { useUI } from "@/stores/ui"
+import PullToRefresh, { type PullToRefreshInstance } from "pulltorefreshjs"
 
 const pagination = reactive({ page: 1, pageSize: 10, total: 0 })
 
@@ -63,6 +64,21 @@ async function readMore({ done }: any) {
 }
 
 readPosts()
+
+let refresher: PullToRefreshInstance
+
+onMounted(() => {
+  refresher = PullToRefresh.init({
+      mainElement: ".wrapper",
+      triggerElement: ".wrapper",
+      onRefresh() {
+        posts.value = []
+        pagination.page = 0
+        return readPosts()
+      }
+    })
+})
+onUnmounted(() => refresher.destory())
 </script>
 
 <style scoped>

src/views/realms/page.vue

@@ -32,7 +32,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, watch } from "vue"
+import { onMounted, onUnmounted, reactive, ref, watch } from "vue"
 import { request } from "@/scripts/request"
 import { useRealms } from "@/stores/realms"
 import { useRoute } from "vue-router"
@@ -41,6 +41,7 @@ import dompurify from "dompurify"
 import PostList from "@/components/posts/PostList.vue"
 import RealmAction from "@/components/realms/RealmAction.vue"
 import RealmMembers from "@/components/realms/RealmMembers.vue"
+import PullToRefresh, { type PullToRefreshInstance } from "pulltorefreshjs"
 
 const route = useRoute()
 const realms = useRealms()
@@ -122,6 +123,21 @@ watch(realms, (val) => {
 function parseContent(src: string): string {
   return dompurify().sanitize(parse(src) as string)
 }
+
+let refresher: PullToRefreshInstance
+
+onMounted(() => {
+  refresher = PullToRefresh.init({
+    mainElement: ".wrapper",
+    triggerElement: ".wrapper",
+    onRefresh() {
+      posts.value = []
+      pagination.page = 0
+      return readPosts()
+    }
+  })
+})
+onUnmounted(() => refresher.destory())
 </script>
 
 <style scoped>