vueuse for storing settings

Author: JanisV

frontend/package-lock.json

@@ -13,8 +13,7 @@
   },
   "dependencies": {
     "@mdi/font": "^7.4.47",
-    "pinia": "^3.0.4",
-    "pinia-plugin-persistedstate": "^4.7.1",
+    "@vueuse/core": "^14.1.0",
     "sql.js": "^1.13.0",
     "vue": "^3.5.25",
     "vue-i18n": "^11.2.8",

frontend/package.json

@@ -4,14 +4,14 @@ import {useRoute, useRouter} from 'vue-router'
 import {useTheme} from 'vuetify'
 import {useSQLite} from "@/composables/useSQLite.js";
 import {appTitle} from "@/composables/appTitle.js";
-import {useThemeStore} from '@/stores/theme'
 import FileUploaderView from '@/components/FileUploaderView.vue'
 import CoinListView from "@/components/CoinListView.vue";
 import SettingsView from "@/components/SettingsView.vue";
 import AboutView from "@/components/AboutView.vue";
 import CoinView from "@/components/CoinView.vue";
 import ImagesView from "@/components/ImagesView.vue";
 import i18n from './i18n'
+import { currentTheme } from "@/composables/useSettings";
 
 const {isLoading,
     error,
@@ -38,11 +38,10 @@ const coinListViewRef = ref(null)
 const router = useRouter()
 const route = useRoute()
 
-const themeStore = useThemeStore()
-const theme = useTheme()
+const appTheme = useTheme()
 
 onMounted(async () => {
-  theme.change(themeStore.currentTheme)
+  appTheme.change(currentTheme.value)
 
   await router.replace('/')
 })

frontend/src/App.vue

@@ -4,10 +4,9 @@ import {useRouter} from "vue-router";
 import {arrayBufferToBase64} from "@/utils/bytes2img.js"
 import StatusItem from "./StatusItem.vue"
 import {useSQLite} from "@/composables/useSQLite.js"
-import { useImageViewStore } from '@/stores/imageView'
+import { imagePresentation } from "@/composables/useSettings";
 
 const router = useRouter()
-const imageViewStore = useImageViewStore()
 
 const {isLoading,
     error,
@@ -62,12 +61,12 @@ const images = ref([])
 
 const loadImage = async (index, coinId) => {
   let sql
-  if (imageViewStore.currentImageView === 'obverse') {
+  if (imagePresentation.value === 'obverse') {
     sql = `SELECT obverseimg.image FROM coins
         LEFT JOIN photos AS obverseimg ON coins.obverseimg = obverseimg.id
         WHERE coins.id=?`
   }
-  else if (imageViewStore.currentImageView === 'reverse') {
+  else if (imagePresentation.value === 'reverse') {
     sql = `SELECT reverseimg.image FROM coins
         LEFT JOIN photos AS reverseimg ON coins.reverseimg = reverseimg.id
         WHERE coins.id=?`
@@ -81,7 +80,7 @@ const loadImage = async (index, coinId) => {
 
   const results = await executeQuery(sql, [coinId,])
   let img
-  if (imageViewStore.currentImageView === 'both') {
+  if (imagePresentation.value === 'both') {
     const maxHeight = 54*4 // Step-down scaling for better quality
     let aspectRatio
     let img1 = null, img2 = null
@@ -135,17 +134,18 @@ const loadImage = async (index, coinId) => {
         @click="router.push('/coin/' + coin[0])"
         class="pa-1"
       >
-        <template v-slot:prepend v-if="imageViewStore.currentImageView === 'obverse'">
+        <template v-slot:prepend v-if="imagePresentation === 'obverse'">
           <v-lazy :width="56">
             <v-img :src="images[index]" :width="56" max-height="56" :tmp="loadImage(index, coin[0])" />
           </v-lazy>
+          <p>11</p>
         </template>
-        <template v-slot:prepend v-else-if="imageViewStore.currentImageView === 'reverse'">
+        <template v-slot:prepend v-else-if="imagePresentation === 'reverse'">
           <v-lazy :width="56">
             <v-img :src="images[index]" :width="56" max-height="56" :tmp="loadImage(index, coin[0])" />
           </v-lazy>
         </template>
-        <template v-slot:prepend v-else-if="imageViewStore.currentImageView === 'both'">
+        <template v-slot:prepend v-else-if="imagePresentation === 'both'">
           <v-lazy :width="100">
             <v-img :src="images[index]" :width="100" max-height="56" :tmp="loadImage(index, coin[0])" />
           </v-lazy>