✨ Pull to refresh

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>