feat: cleanup

src/app/decks/inbox/components/InboxCardDeclamationsSide.vue

@@ -22,7 +22,7 @@ import { Declamation, Synonym } from '@akdasa-studios/shlokas-core'
 import { onMounted, ref, watch, shallowRef, computed, onBeforeUnmount } from 'vue'
 import { CircleProgress, useAudio } from '@/app/decks/inbox'
 import { VerseSynonyms } from '@/app/library'
-import { useDownloadService, useEnv } from '@/app/shared'
+import { useDownloader, useEnv } from '@/app/shared'
 import { TutorialSteps, useTutorialStore } from '@/app/tutorial'
 
 /* -------------------------------------------------------------------------- */
@@ -45,7 +45,7 @@ defineExpose({
 
 const audio = useAudio()
 const env = useEnv()
-const downloader = useDownloadService()
+const downloader = useDownloader()
 const tutorial = useTutorialStore()
 
 

src/app/decks/inbox/components/InboxFlipCard.vue

@@ -43,7 +43,7 @@ import { Declamation, InboxCard, InboxCardType, Verse, VerseImage } from '@akdas
 import { toRefs } from 'vue'
 import { InboxCardDeclamationsSide, InboxCardSynonymsSide, InboxCardTranslationSide, InboxCardVerseTextSide } from '@/app/decks/inbox'
 import FlipCard from '@/app/decks/shared/components/FlipCard.vue'
-import { testId } from '@/app/TestId'
+import { testId } from '@/app/shared'
 
 
 /* -------------------------------------------------------------------------- */

src/app/decks/inbox/pages/InboxDeckPage.vue

@@ -53,11 +53,10 @@
 import { InboxCard, InboxCardMemorized, UpdateVerseStatus, Verse, VerseId } from '@akdasa-studios/shlokas-core'
 import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, onIonViewWillEnter, onIonViewDidLeave } from '@ionic/vue'
 import { computed, ref, reactive, watch } from 'vue'
-import { testId } from '@/app/TestId'
+import { testId , useApplication } from '@/app/shared'
 import { InboxFlipCard, InboxCardSwipeOverlay, InboxDeckEmpty } from '@/app/decks/inbox'
 import { useLibraryCache, useIndexedList, StackedFlipCardsDeck } from '@/app/decks/shared'
 import { useTutorialStore, TutorialSteps } from '@/app/tutorial'
-import { useApplication } from '@/app/shared'
 
 
 /* -------------------------------------------------------------------------- */

src/app/decks/review/components/ReviewFlipCard.vue

@@ -34,8 +34,7 @@
 
 <script lang="ts" setup>
 import { ReviewCard, Verse } from '@akdasa-studios/shlokas-core'
-
-import { testId } from '@/app/TestId'
+import { testId } from '@/app/shared'
 import { ReviewCardTextSide, ReviewCardTranslationSide, ReviewCardVerseNumberSide } from '@/app/decks/review'
 import FlipCard from '@/app/decks/shared/components/FlipCard.vue'
 

src/app/decks/review/pages/ReviewDeckPage.vue

@@ -109,7 +109,7 @@ const cardsToShow = ref<CardState[]>([])
 const swipePopup = reactive<SwipePopup>({ show: false, status: 'none', interval: 0 })
 const isEmpty = computed(() => cardsToShow.value.length === 0)
 const topCard = useArrayFind(cardsToShow, x => x.index === 0)
-const showGradeButtons = computed(() => topCard.value?.flipped && settings.appearanceSettings.gradeButtons)
+const showGradeButtons = computed(() => topCard.value?.flipped && settings.appearance.gradeButtons)
 const { currentStep } = storeToRefs(tutorial)
 
 let reviewCards: readonly ReviewCard[] = []

src/app/decks/shared/components/FlipCard.vue

@@ -73,7 +73,7 @@ const colorHueRotate = computed(() => getHueRotate())
 /* -------------------------------------------------------------------------- */
 
 function getHueRotate() {
-  if (!settings.appearanceSettings.colorfulCards) { return 0 }
+  if (!settings.appearance.colorfulCards) { return 0 }
   return hasher.hash(props.hueColorHash) % 360
 }
 </script>

src/app/decks/shared/components/VerseTextLines.vue

@@ -21,7 +21,7 @@
 import { onMounted, ref } from 'vue'
 import { SVGTextLines } from '@akdasa-studios/shlokas-uikit'
 import { usePreferredDark } from '@vueuse/core'
-import { DarkImage, useDownloadService, useEnv } from '@/app/shared'
+import { DarkImage, useDownloader, useEnv } from '@/app/shared'
 
 /* -------------------------------------------------------------------------- */
 /*                                  Interface                                 */
@@ -37,7 +37,7 @@ const props = defineProps<{
 /*                                Dependencies                                */
 /* -------------------------------------------------------------------------- */
 
-const downloadService = useDownloadService()
+const downloadService = useDownloader()
 const isDark = usePreferredDark()
 const env = useEnv()
 

src/app/home/components/HomePage.vue

@@ -83,15 +83,15 @@ import {
 import { storeToRefs } from 'pinia'
 import { useStatisticsStore } from '@/app/statistics'
 import { TutorialPlayer, useTutorialStore } from '@/app/tutorial'
-import { useSyncTask } from '@/app/shared'
+import { useSync } from '@/app/shared'
 
 /* -------------------------------------------------------------------------- */
 /*                                Dependencies                                */
 /* -------------------------------------------------------------------------- */
 
 const statisticsStore = useStatisticsStore()
 const tutorialStore = useTutorialStore()
-const syncTask = useSyncTask()
+const syncTask = useSync()
 
 /* -------------------------------------------------------------------------- */
 /*                                    State                                   */

src/app/library/components/VersesListItem.vue

@@ -34,8 +34,7 @@ import { Decks, Verse, VerseStatus } from '@akdasa-studios/shlokas-core'
 import { IonItem, IonLabel, IonIcon } from '@ionic/vue'
 import { computed } from 'vue'
 import { enter, albums } from 'ionicons/icons'
-import { go } from '@/app/shared'
-import { testId } from '@/app/TestId'
+import { go, testId } from '@/app/shared'
 
 /* -------------------------------------------------------------------------- */
 /*                                  Interface                                 */

src/app/library/pages/LibraryPage.vue

@@ -70,7 +70,7 @@ const tutorial = useTutorialStore()
 const searchQuery = ref('')
 const filteredVerses = shallowRef<Verse[]>([])
 const verseStatuses = shallowRef<{ [verseId: string]: VerseStatus}>({})
-const { localeSettings } = storeToRefs(settings)
+const { locale } = storeToRefs(settings)
 
 
 /* -------------------------------------------------------------------------- */
@@ -101,7 +101,7 @@ async function onSearchQueryChanged(value: string) {
   const app = application.instance()
 
   // NOTE: assign filteredVerses AFTER verseStatuses are fetched
-  const languageCode = localeSettings.value.language
+  const languageCode = locale.value.language
   const verses = await app.library.findByContent(new Language(languageCode, languageCode), value)
   verseStatuses.value = await app.library.getStatuses(verses.map(x => x.id))
   filteredVerses.value = Array.from(verses).sort((a, b) => compareVerseNumber(a.number.value, b.number.value))

src/app/settings/index.ts

@@ -6,5 +6,9 @@ export { default as AccountSettingsPage } from './pages/AccountPage.vue'
 export { default as SettingsPage } from './pages/SettingsPage.vue'
 export { default as AppInfoPage } from './pages/AppInfoPage.vue'
 
+// tasks:
+export * from './tasks/runSettingsPersistenceTask'
+export * from './tasks/runSettingsRestoreTask'
+
 // routes:
 export * from './routes/settings'

src/app/settings/pages/AccountPage.vue

@@ -84,20 +84,19 @@ import {
   IonHeader, IonPage, IonTitle, IonToolbar, IonLoading, IonIcon, useIonRouter, alertController
 } from '@ionic/vue'
 import { mail, logoApple, logoGoogle } from 'ionicons/icons'
-import { computed, inject } from 'vue'
-import { EventEmitter2 } from 'eventemitter2'
-import { go, useAuthentication, useSyncTask } from '@/app/shared'
+import { computed } from 'vue'
+import { go, useAuthentication, useEmitter, useSync } from '@/app/shared'
 import { useSettingsStore } from '@/app/settings'
 
 /* -------------------------------------------------------------------------- */
 /*                                Dependencies                                */
 /* -------------------------------------------------------------------------- */
 
-const emitter = inject('emitter') as EventEmitter2
+const emitter = useEmitter()
 const settings = useSettingsStore()
 const auth = useAuthentication()
 const router = useIonRouter()
-const syncTask = useSyncTask()
+const syncTask = useSync()
 
 
 /* -------------------------------------------------------------------------- */

src/app/settings/pages/SettingsPage.vue

@@ -21,7 +21,7 @@
 
         <ion-item>
           <ion-select
-            v-model="settings.localeSettings.language"
+            v-model="settings.locale.language"
             interface="action-sheet"
             placeholder="Language"
             data-testid="language"
@@ -40,15 +40,15 @@
 
         <ion-item>
           <ion-toggle
-            v-model="settings.appearanceSettings.gradeButtons"
+            v-model="settings.appearance.gradeButtons"
           >
             {{ $t('settings.gradeButtons') }}
           </ion-toggle>
         </ion-item>
 
         <ion-item>
           <ion-toggle
-            v-model="settings.appearanceSettings.colorfulCards"
+            v-model="settings.appearance.colorfulCards"
           >
             {{ $t('settings.colorfulCards') }}
           </ion-toggle>

src/app/settings/stores/useSettingsStore.ts

@@ -1,6 +1,5 @@
 import { defineStore } from 'pinia'
-import { ref, watch } from 'vue'
-import { useDeviceStore } from '@/app/shared'
+import { ref } from 'vue'
 
 
 interface LocaleSettings {
@@ -31,17 +30,15 @@ interface AuthSettings {
 
 
 export const useSettingsStore = defineStore('settings', () => {
-  const storage = useDeviceStore()
-
   /* -------------------------------------------------------------------------- */
   /*                                    State                                   */
   /* -------------------------------------------------------------------------- */
 
-  const localeSettings = ref<LocaleSettings>({
+  const locale = ref<LocaleSettings>({
     language: 'en'
   })
 
-  const appearanceSettings = ref<AppearanceSettings>({
+  const appearance = ref<AppearanceSettings>({
     gradeButtons: true,
     colorfulCards: true
   })
@@ -63,67 +60,9 @@ export const useSettingsStore = defineStore('settings', () => {
     expiresAt: 0
   })
 
-
-  watch([
-    localeSettings.value,
-    appearanceSettings.value,
-    library.value,
-    welcome.value,
-    auth.value
-  ], () => onSettingsChanged())
-
-
-  /* -------------------------------------------------------------------------- */
-  /*                                   Actions                                  */
-  /* -------------------------------------------------------------------------- */
-
-  async function load() {
-    const loadedLocale     = JSON.parse(await storage.get('locale'))
-    const loadedAppearance = JSON.parse(await storage.get('appearance'))
-    const loadedLibrary    = JSON.parse(await storage.get('library'))
-    const loadedWelcome    = JSON.parse(await storage.get('welcome'))
-    const loadedAuth       = JSON.parse(await storage.get('auth'))
-
-    if (loadedLocale) {
-      localeSettings.value.language = loadedLocale.language
-    }
-    if (loadedAppearance) {
-      appearanceSettings.value.gradeButtons  = loadedAppearance.gradeButtons
-      appearanceSettings.value.colorfulCards = loadedAppearance.colorfulCards
-    }
-    if (loadedLibrary) {
-      library.value.lastSyncDate = loadedLibrary.lastSyncDate
-    }
-    if (loadedWelcome) {
-      welcome.value.done = loadedWelcome.done
-    }
-    if (loadedAuth) {
-      auth.value.collectionId = loadedAuth.collectionId
-      auth.value.token = loadedAuth.token
-      auth.value.sessionId = loadedAuth.sessionId
-      auth.value.strategy = loadedAuth.strategy
-      auth.value.refreshedAt = loadedAuth.refreshedAt
-      auth.value.expiresAt = loadedAuth.expiresAt
-    }
-  }
-
-
-  /* -------------------------------------------------------------------------- */
-  /*                                  Handlers                                  */
-  /* -------------------------------------------------------------------------- */
-
-  async function onSettingsChanged() {
-    await storage.set('locale',     JSON.stringify(localeSettings.value))
-    await storage.set('appearance', JSON.stringify(appearanceSettings.value))
-    await storage.set('library',    JSON.stringify(library.value))
-    await storage.set('welcome',    JSON.stringify(welcome.value))
-    await storage.set('auth',       JSON.stringify(auth.value))
-  }
-
-
   /* -------------------------------------------------------------------------- */
   /*                                  Interface                                 */
   /* -------------------------------------------------------------------------- */
 
-  return { localeSettings, appearanceSettings, library, welcome, load, auth }
+  return { locale, appearance, library, welcome, auth }
 })

src/app/settings/tasks/runSettingsPersistenceTask.ts

@@ -0,0 +1,54 @@
+import { storeToRefs } from 'pinia'
+import { watch } from 'vue'
+import { useDeviceStore, useLogger } from '@/app/shared'
+import { useSettingsStore } from '@/app/settings'
+
+
+/**
+ * Saves settings state to device storage.
+ */
+export function runSettingsPersistenceTask() {
+
+  /* -------------------------------------------------------------------------- */
+  /*                                Dependencies                                */
+  /* -------------------------------------------------------------------------- */
+
+  const logger        = useLogger('settings:persistence')
+  const settingsStore = useSettingsStore()
+  const deviceStore   = useDeviceStore()
+
+  /* -------------------------------------------------------------------------- */
+  /*                                    State                                   */
+  /* -------------------------------------------------------------------------- */
+
+  const {
+    locale, appearance, library, welcome, auth
+  } = storeToRefs(settingsStore)
+
+
+  /* -------------------------------------------------------------------------- */
+  /*                                  Triggers                                  */
+  /* -------------------------------------------------------------------------- */
+
+  watch([
+    locale.value,
+    appearance.value,
+    library.value,
+    welcome.value,
+    auth.value
+  ], onSettingsChanged)
+
+
+  /* -------------------------------------------------------------------------- */
+  /*                                  Handlers                                  */
+  /* -------------------------------------------------------------------------- */
+
+  async function onSettingsChanged() {
+    logger.debug('Saving settings state')
+    await deviceStore.set('locale',     JSON.stringify(locale.value))
+    await deviceStore.set('appearance', JSON.stringify(appearance.value))
+    await deviceStore.set('library',    JSON.stringify(library.value))
+    await deviceStore.set('welcome',    JSON.stringify(welcome.value))
+    await deviceStore.set('auth',       JSON.stringify(auth.value))
+  }
+}