Proof of concept: a button to restart sync process

web/components/AppDrawer.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { navigateTo, useClient, useNotebaseConfig, useUser } from '#imports'
+import { navigateTo, useClient, useNotebaseConfig, useToast, useUser } from '#imports'
 
 import { ref } from 'vue'
 
@@ -9,13 +9,19 @@ const open = ref(false)
 
 const pb = useClient()
 const user = useUser()
+const toast = useToast()
 
 const onLogout = async () => {
   await pb.clearAuth()
   user.value.isAuthenticated = false
   await navigateTo({ name: 'login' })
 }
 
+const restartSync = async () => {
+  await pb.restartSync()
+  toast.add({ title: 'Restart complete' })
+}
+
 const closeSlideover = () => {
   open.value = false
 }
@@ -88,6 +94,9 @@ const navigationItems = ref([
         <USeparator class="my-2" />
 
         <div class="flex flex-col gap-2 mt-auto">
+          <UButton @click="restartSync">
+            Restart sync
+          </UButton>
           <UCheckbox
             v-model="notebaseConfig.config.value.showExtra"
             label="Show extra"

web/modules/pocketbase/runtime/utils/pb.ts

@@ -32,6 +32,10 @@ export function createPocketBaseClient(url: string): BaseClient {
     await pb.collection('files').update(id, { content: data })
   }
 
+  const restartSync = async () => {
+    await pb.send('/sync/restart', {})
+  }
+
   return {
     isAuthenticated,
     clearAuth,
@@ -40,5 +44,6 @@ export function createPocketBaseClient(url: string): BaseClient {
     updateContent,
     getList,
     getItem,
+    restartSync,
   }
 }

web/modules/pocketbase/types/types.ts

@@ -46,6 +46,11 @@ export interface BaseClient {
    */
   updateContent: (id: string, data: string) => Promise<void>
 
+  /**
+  * Restarts the sync process also clearing the storage and rebuilding it
+   */
+  restartSync: () => Promise<void>
+
   /**
    * Checks if the current client has valid authentication
    * @returns Promise resolving to authentication status (true/false)