Implement auto-sync feature

web-app/package.json

@@ -22,37 +22,37 @@
     "@tiptap/extension-task-list": "^2.1.11",
     "@tiptap/starter-kit": "^2.1.11",
     "@tiptap/vue-3": "^2.1.11",
-    "@vueuse/core": "^10.5.0",
+    "@vueuse/core": "^10.7.2",
     "daisyui": "^3.9.2",
-    "fuse.js": "^6.6.2",
-    "nanoid": "^5.0.1",
-    "pinia": "^2.1.6",
+    "fuse.js": "^7.0.0",
+    "nanoid": "^5.0.5",
+    "pinia": "^2.1.7",
     "requestidlecallback-polyfill": "^1.0.2",
     "tailwindcss": "^3.3.3",
     "tailwindcss-animate": "^1.0.7",
-    "vue": "^3.3.4",
+    "vue": "^3.4.19",
     "vue-router": "^4.2.5",
-    "vue-tg": "^0.0.3",
+    "vue-tg": "^0.3.0",
     "vue3-touch-events": "^4.1.8"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.5.1",
     "@tsconfig/node18": "^18.2.2",
-    "@types/node": "^20.8.4",
-    "@vitejs/plugin-vue": "^4.4.0",
-    "@vue/eslint-config-prettier": "^8.0.0",
+    "@types/node": "^20.11.19",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
-    "@vue/tsconfig": "^0.4.0",
-    "autoprefixer": "^10.4.16",
-    "eslint": "^8.51.0",
-    "eslint-plugin-vue": "^9.17.0",
-    "npm-run-all2": "^6.1.1",
+    "@vue/tsconfig": "^0.5.1",
+    "autoprefixer": "^10.4.17",
+    "eslint": "^8.56.0",
+    "eslint-plugin-vue": "^9.21.1",
+    "npm-run-all2": "^6.1.2",
     "patch-package": "^8.0.0",
     "postcss": "^8.4.31",
-    "prettier": "^3.0.3",
-    "typescript": "~5.2.2",
-    "vite": "^4.4.11",
-    "vite-plugin-pwa": "^0.16.5",
-    "vue-tsc": "^1.8.18"
+    "prettier": "^3.2.5",
+    "typescript": "~5.3.3",
+    "vite": "^5.1.3",
+    "vite-plugin-pwa": "^0.19.0",
+    "vue-tsc": "^1.8.27"
   }
 }

web-app/src/main.ts

@@ -14,7 +14,8 @@ const app = createApp(App)
 
 app.use(createPinia())
 app.use(router)
-app.use(touchEvents)
+// TODO: remove temporary types fix
+app.use<[]>(touchEvents)
 
 const updateSW = registerSW({
   onNeedRefresh() {

web-app/src/router/index.ts

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import NotesView from '@/views/NotesView.vue'
 import NoteView from '@/views/NoteView.vue'
+import SettingsView from '@/views/SettingsView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -14,6 +15,11 @@ const router = createRouter({
       path: '/notes/:id',
       name: 'note',
       component: NoteView
+    },
+    {
+      path: '/settings',
+      name: 'settings',
+      component: SettingsView
     }
   ]
 })

web-app/src/stores/config.ts

@@ -14,13 +14,15 @@ if (!userId) {
 export type Config = {
   userId: number
   lastTelegramCloudSync: number
+  autoSyncWhenAppStarts: boolean
 }
 
 export const useConfigStore = defineStore('config', {
   state: () => ({
     config: useLocalStorage<Config>(getLocalStorageKeyForUser('config'), {
       userId,
-      lastTelegramCloudSync: 0
+      lastTelegramCloudSync: 0,
+      autoSyncWhenAppStarts: false
     })
   }),
 

web-app/src/stores/sync.ts

@@ -28,16 +28,19 @@ export const useSyncStore = defineStore('sync', {
   actions: {
     async checkTelegramCloudUpdates() {
       const { getStorageItem } = useWebAppCloudStorage()
+      const configStore = useConfigStore()
 
       try {
-        const remoteNoteValue = await getStorageItem(getConfigStorageKey())
+        const remoteConfigValue = await getStorageItem(getConfigStorageKey())
 
-        if (!remoteNoteValue) return
+        if (!remoteConfigValue) return
 
-        const remoteConfig = deserialize<Config>(remoteNoteValue)
+        const remoteConfig = deserialize<Config>(remoteConfigValue)
 
         this.isSyncOutdated =
           this.lastNotesTelegramCloudSyncTimestamp < remoteConfig.lastTelegramCloudSync
+
+        configStore.config.autoSyncWhenAppStarts = remoteConfig.autoSyncWhenAppStarts
       } catch (error) {
         console.error(error)
       }

web-app/src/views/NotesView.vue

@@ -69,13 +69,19 @@
       <note-list :notes="regularNotes" />
     </div>
   </div>
+  <settings-button @click="router.push('settings')" />
 </template>
 
 <script setup lang="ts">
 import { onMounted, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useRouter } from 'vue-router'
-import { useWebAppPopup, useWebAppTheme, useWebAppClosingConfirmation } from 'vue-tg'
+import {
+  useWebAppPopup,
+  useWebAppTheme,
+  useWebAppClosingConfirmation,
+  SettingsButton
+} from 'vue-tg'
 import NoteList from '@/components/notes/NoteList.vue'
 import NoteListSkeleton from '@/components/notes/NoteListSkeleton.vue'
 import IconPlus from '@/components/icons/IconPlus.vue'
@@ -107,7 +113,7 @@ const hashtagsStore = useHashtagsStore()
 const searchStore = useSearchStore()
 const syncStore = useSyncStore()
 
-const { isNotesLimitReached } = storeToRefs(configStore)
+const { isNotesLimitReached, config } = storeToRefs(configStore)
 const {
   regularNotes,
   pinnedNotes,
@@ -257,7 +263,9 @@ watch(
 
 onMounted(async () => {
   isOnline.value && (await syncStore.checkTelegramCloudUpdates())
-  isOnline.value && isNeverSynced.value && (await syncStore.syncNotesWithTelegramCloud())
+
+  const isSyncNeeded = isOnline.value && (isNeverSynced.value || config.value.autoSyncWhenAppStarts)
+  isSyncNeeded && (await syncStore.syncNotesWithTelegramCloud())
 
   if (
     isNeverSynced.value === false &&

web-app/src/views/SettingsView.vue

@@ -0,0 +1,35 @@
+<template>
+  <back-button @click="router.back()"></back-button>
+  <div class="flex flex-col px-6 pt-2">
+    <div class="form-control">
+      <label class="cursor-pointer label">
+        <span class="label-text text-base/loose">Sync automatically when app starts</span>
+        <input
+          v-model="config.autoSyncWhenAppStarts"
+          type="checkbox"
+          class="toggle"
+          :class="{ 'bg-tg-btn': config.autoSyncWhenAppStarts }"
+        />
+      </label>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { BackButton } from 'vue-tg'
+import { useRouter } from 'vue-router'
+import { useConfigStore } from '@/stores/config'
+import { storeToRefs } from 'pinia'
+import { onUnmounted } from 'vue'
+import { useSyncStore } from '@/stores/sync'
+
+const router = useRouter()
+const configStore = useConfigStore()
+const syncStore = useSyncStore()
+
+const { config } = storeToRefs(configStore)
+
+onUnmounted(async () => {
+  await syncStore.syncSettingsWithTelegramCloud()
+})
+</script>

web-app/vite.config.ts → web-app/vite.config.mts

@@ -7,11 +7,7 @@ import { VitePWA } from 'vite-plugin-pwa'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    vue({
-      script: {
-        defineModel: true
-      }
-    }),
+    vue(),
     VitePWA({
       // add this to cache all the imports
       workbox: {