Merge pull request #15 from ValDesign22/master

🏗 Changed store to use pinia

package.json

@@ -27,9 +27,11 @@
     "clsx": "^2.1.1",
     "embla-carousel-vue": "8.2.1",
     "lucide-vue-next": "0.439.0",
+    "pinia": "^2.2.2",
     "radix-vue": "1.9.5",
     "tailwind-merge": "2.5.2",
     "tailwindcss-animate": "^1.0.7",
+    "tauri-plugin-pinia": "^0.4.2",
     "vee-validate": "^4.13.2",
     "vue": "3.5.4",
     "vue-i18n": "10",

src-tauri/Cargo.toml

@@ -21,6 +21,7 @@ serde_json = "1.0.128"
 tauri-plugin-http = { version = "2.0.0-rc.3", features = ["rustls-tls"] }
 tokio = "1.40.0"
 tauri-plugin-fs = "2.0.0-rc.3"
+tauri-plugin-pinia = { version = "0.4", features = ["async-pinia"] }
 tauri-plugin-store = "2.0.0-rc.3"
 tauri-plugin-notification = "2.0.0-rc.4"
 

src-tauri/capabilities/android.json

@@ -56,6 +56,7 @@
     "store:allow-get",
     "store:allow-set",
     "store:allow-save",
-    "store:allow-load"
+    "store:allow-load",
+    "pinia:default"
   ]
 }

src-tauri/capabilities/default.json

@@ -67,6 +67,7 @@
     "store:allow-load",
     "notification:default",
     "websocket:allow-connect",
-    "websocket:allow-send"
+    "websocket:allow-send",
+    "pinia:default"
   ]
 }

src-tauri/src/lib.rs

@@ -1,4 +1,4 @@
-use std::{fs::create_dir_all, path::Path};
+use std::{fs::create_dir_all, time::Duration, path::Path};
 
 use commands::config::{get_config, save_config};
 use commands::setup::setup;
@@ -13,10 +13,15 @@ pub mod utils;
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     let mut builder = tauri::Builder::default()
-        .plugin(tauri_plugin_store::Builder::new().build())
+        // .plugin(tauri_plugin_store::Builder::new().build())
         .plugin(tauri_plugin_fs::init())
         .plugin(tauri_plugin_http::init())
         .plugin(tauri_plugin_notification::init())
+        .plugin(
+            tauri_plugin_pinia::Builder::new()
+                .autosave(Duration::from_secs(5))
+                .build(),
+        )
         .invoke_handler(tauri::generate_handler![get_config, save_config, setup]);
 
     #[cfg(not(any(target_os = "android", target_os = "ios")))]

src/App.vue

@@ -1,14 +1,23 @@
 <script setup lang="ts">
-import { onBeforeMount } from "vue";
+import { onBeforeMount, onMounted } from "vue";
 import { invoke } from "@tauri-apps/api/core";
 import { check } from '@tauri-apps/plugin-updater';
 import { useRouter } from "vue-router";
 import { IConfig } from "@/utils/types";
-import { useStore } from "./lib/stores";
+import useStore from "./lib/stores";
+import { useI18n } from "vue-i18n";
+import { useColorMode } from "@vueuse/core";
 
 const router = useRouter();
-const store = useStore;
+const store = useStore();
+const i18n = useI18n();
+useColorMode();
 
+onMounted(() => {
+  void store.$tauri.start();
+  document.documentElement.classList.add(`theme-${store.theme}`);
+  i18n.locale.value = store.locale;
+});
 onBeforeMount(async () => {
   if (!import.meta.env.DEV) {
     const update = await check();
@@ -19,8 +28,6 @@ onBeforeMount(async () => {
   console.log("Checking if the app is registered");
   const config = await invoke<IConfig | null>("get_config");
   if (!config) return router.push({ path: "/register" });
-
-  document.documentElement.classList.add(`theme-${await store.getTheme()}`);
 });
 </script>
 

src/components/navbar/NavBar.vue

@@ -4,7 +4,7 @@ import { RouterLink, useRoute, useRouter } from 'vue-router';
 import { Input } from '@/components/ui/input';
 import { Settings, Search, Users } from 'lucide-vue-next';
 import { computed, HTMLAttributes, onMounted, onUnmounted, ref, watch } from 'vue';
-import { useStore } from '@/lib/stores';
+import useStore from '@/lib/stores';
 import { IProfile } from '@/utils/types';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
@@ -28,7 +28,7 @@ const props = defineProps<NavBarProps & { class?: HTMLAttributes['class'] }>();
 
 const router = useRouter();
 const route = useRoute();
-const store = useStore;
+const store = useStore();
 const { y } = useWindowScroll({ behavior: 'smooth' });
 const settingsOpened = ref(false);
 
@@ -64,7 +64,8 @@ watch(searchContent, () => {
 });
 
 onMounted(async () => {
-  user.value = await store.getProfile();
+  void store.$tauri.start();
+  user.value = store.profile;
   if (!user.value) return router.push({ path: '/' });
 });
 

src/components/settings/SettingsMenu.vue

@@ -6,11 +6,11 @@ import { VisuallyHidden } from 'radix-vue';
 import { onMounted, ref, watch } from 'vue';
 import { fetch } from '@tauri-apps/plugin-http';
 import { invoke } from '@tauri-apps/api/core';
-import { Color, colors, IConfig } from '@/utils/types';
+import { TColor, colors, IConfig } from '@/utils/types';
 import { X } from 'lucide-vue-next'
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { useI18n } from 'vue-i18n';
-import { useStore } from '@/lib/stores';
+import useStore from '@/lib/stores';
 import { getVersion } from '@tauri-apps/api/app';
 
 interface SettingsMenuProps {
@@ -21,9 +21,9 @@ interface SettingsMenuProps {
 const props = defineProps<SettingsMenuProps>();
 
 const i18n = useI18n();
-const store = useStore;
+const store = useStore();
 
-const theme = ref<Color>('slate');
+const theme = ref<TColor>('slate');
 
 const config = ref<IConfig | null>(null);
 
@@ -54,19 +54,18 @@ const updateServer = async () => {
   getServerVersion();
 };
 
-watch(i18n.locale, async (value) => {
-  await store.setLocale(value);
+watch(store.$state, async (value) => {
+  i18n.locale.value = value.locale;
+  store.setLocale(value.locale);
 });
 
 watch(theme, async (value) => {
-  if (value) {
-    document.documentElement.classList.remove(...colors.map((c) => `theme-${c}`));
-    document.documentElement.classList.add(`theme-${value}`);
-    return await store.setTheme(value);
-  };
+  console.log(value);
+  if (value) store.setTheme(value);
 });
 
 onMounted(async () => {
+  void store.$tauri.start();
   const configRes = await invoke<IConfig | null>("get_config");
   if (configRes) {
     config.value = configRes;
@@ -75,7 +74,7 @@ onMounted(async () => {
     await getServerVersion();
   }
 
-  theme.value = await store.getTheme();
+  theme.value = store.theme;
 });
 </script>
 
@@ -115,7 +114,7 @@ onMounted(async () => {
             <h2 class="text-xl font-bold">{{ $t('settings.appearance.title') }}</h2>
             <div class="flex items-center space-x-4">
               <span>{{ $t('settings.appearance.language') }}</span>
-              <Select :defaultValue="$i18n.locale" v-model="$i18n.locale">
+              <Select :defaultValue="store.locale" v-model="store.locale">
                 <SelectTrigger class="w-[180px]">
                   <SelectValue :placeholder="$t('settings.appearance.selectLanguage')" />
                 </SelectTrigger>