Fix changing LRCLIB instance URL

src-tauri/src/db.rs

@@ -216,9 +216,9 @@ pub fn get_config(db: &Connection) -> Result<PersistentConfig> {
   Ok(row)
 }
 
-pub fn set_config(skip_not_needed_tracks: bool, try_embed_lyrics: bool, theme_mode: &str, db: &Connection) -> Result<()> {
-  let mut statement = db.prepare("UPDATE config_data SET skip_not_needed_tracks = ?, try_embed_lyrics = ?, theme_mode = ? WHERE 1")?;
-  statement.execute((skip_not_needed_tracks, try_embed_lyrics, theme_mode))?;
+pub fn set_config(skip_not_needed_tracks: bool, try_embed_lyrics: bool, theme_mode: &str, lrclib_instance: &str, db: &Connection) -> Result<()> {
+  let mut statement = db.prepare("UPDATE config_data SET skip_not_needed_tracks = ?, try_embed_lyrics = ?, theme_mode = ?, lrclib_instance = ? WHERE 1")?;
+  statement.execute((skip_not_needed_tracks, try_embed_lyrics, theme_mode, lrclib_instance))?;
   Ok(())
 }
 

src-tauri/src/main.rs

@@ -76,10 +76,10 @@ async fn get_config(app_state: State<'_, AppState>) -> Result<PersistentConfig,
 }
 
 #[tauri::command]
-async fn set_config(skip_not_needed_tracks: bool, try_embed_lyrics: bool, theme_mode: &str, app_state: State<'_, AppState>) -> Result<(), String> {
+async fn set_config(skip_not_needed_tracks: bool, try_embed_lyrics: bool, theme_mode: &str, lrclib_instance: &str, app_state: State<'_, AppState>) -> Result<(), String> {
   let conn_guard = app_state.db.lock().unwrap();
   let conn = conn_guard.as_ref().unwrap();
-  db::set_config(skip_not_needed_tracks, try_embed_lyrics, theme_mode, conn).map_err(|err| err.to_string())?;
+  db::set_config(skip_not_needed_tracks, try_embed_lyrics, theme_mode, lrclib_instance, conn).map_err(|err| err.to_string())?;
 
   Ok(())
 }

src/App.vue

@@ -25,7 +25,7 @@ import { ModalsContainer } from 'vue-final-modal'
 import { useGlobalState } from './composables/global-state'
 import { useDownloader } from '@/composables/downloader.js'
 
-const { themeMode, setThemeMode } = useGlobalState()
+const { themeMode, setThemeMode, setLrclibInstance } = useGlobalState()
 const { downloadNext } = useDownloader()
 
 const loading = ref(true)
@@ -42,15 +42,20 @@ const uninitializeLibrary = async () => {
 onMounted(async () => {
   init.value = await invoke('get_init')
   loading.value = false
+  await loadGlobalState()
   darkModeHandle()
   downloadNext()
 })
 
-const darkModeHandle = async () => {
-  // check and insert the `dark` class to html tag
+const loadGlobalState = async () => {
   const config = await invoke('get_config')
   setThemeMode(config.theme_mode)
-  if (config.theme_mode === 'dark') {
+  setLrclibInstance(config.lrclib_instance)
+}
+
+const darkModeHandle = async () => {
+  // check and insert the `dark` class to html tag
+  if (themeMode.value === 'dark') {
     document.documentElement.classList.add('dark')
   } else {
     document.documentElement.classList.remove('dark')

src/components/library/Config.vue

@@ -94,7 +94,7 @@ import { useGlobalState } from '../../composables/global-state'
 import RadioButton from '@/components/common/RadioButton.vue'
 import CheckboxButton from '@/components/common/CheckboxButton.vue'
 
-const { setThemeMode } = useGlobalState()
+const { setThemeMode, setLrclibInstance } = useGlobalState()
 
 const emit = defineEmits(['close', 'refreshLibrary', 'uninitializeLibrary'])
 
@@ -111,6 +111,7 @@ const save = async () => {
     lrclibInstance: editingLrclibInstance.value
   })
   setThemeMode(editingThemeMode.value)
+  setLrclibInstance(editingLrclibInstance.value)
   emit('close')
 }
 

src/components/library/MyLrclib.vue

@@ -2,24 +2,27 @@
   <div class="flex flex-col justify-center gap-6 items-center w-full h-full p-4" v-show="props.isActive">
     <!--<img src="@/assets/lrclib.png" class="w-20 h-20" />-->
 
-    <div class="font-bold text-xs text-brave-30 dark:text-brave-95 select-none cursor-default">
+    <div class="font-bold text-xs text-brave-30 dark:text-brave-90 select-none cursor-default">
       Search with LRCLIB instance:
-      <span class="text-brave-30 dark:text-brave-95 rounded-full px-2 py-1 bg-brave-95 dark:bg-brave-10">https://lrclib.net</span>
+      <span class="text-brave-30 dark:text-brave-90 rounded-full px-2 py-1 bg-brave-95 dark:bg-brave-5"
+      >{{ lrclibInstance }}</span>
     </div>
 
-    <form class="flex items-center rounded-full w-full max-w-screen-sm h-auto overflow-hidden bg-brave-98 dark:bg-brave-10 transition"
+    <form class="flex items-center rounded-full w-full max-w-screen-sm h-auto overflow-hidden
+    bg-brave-98 dark:bg-brave-5 transition"
       :class="{ 'ring ring-brave-30/30': inputActive }" @submit.prevent="onSubmit">
       <input
         type="text"
         v-model="keyword"
-        class="outline-none grow h-12 px-6 bg-brave-98 dark:bg-brave-10 placeholder:text-brave-30/50 text-brave-20 dark:text-brave-95 dark:placeholder:text-brave-60/50"
+        class="outline-none grow h-12 px-6 bg-brave-98 dark:bg-brave-5 placeholder:text-brave-30/30
+         text-brave-20 dark:text-brave-95 dark:placeholder:text-brave-70/30"
         placeholder="Type a song title, album, or artist to find lyrics..."
         @focus="inputActive = true"
         @blur="inputActive = false"
         autofocus
       >
       <button
-        class="rounded-full bg-brave-30 hover:bg-brave-25 active:bg-brave-20 transition text-white text-lg h-12 w-12 flex justify-center items-center m-1">
+        class="rounded-full button button-normal h-12 w-12 m-1">
         <Magnify />
       </button>
     </form>
@@ -31,9 +34,13 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import { Magnify } from 'mdue'
 import SearchResult from './my-lrclib/SearchResult.vue'
+import { invoke } from '@tauri-apps/api/tauri'
+import { useGlobalState } from '../../composables/global-state'
+
+const { lrclibInstance } = useGlobalState()
 
 const props = defineProps({
   isActive: {

src/composables/global-state.js

@@ -2,6 +2,7 @@ import { ref, computed } from 'vue'
 
 const isHotkeyState = ref(true)
 const themeModeState = ref(true)
+const lrclibInstanceState = ref('')
 
 export function useGlobalState() {
   const disableHotkey = () => {
@@ -17,6 +18,11 @@ export function useGlobalState() {
   const setThemeMode = (mode) => {
     themeModeState.value = mode
   }
+  const setLrclibInstance = (instance) => {
+    lrclibInstanceState.value = instance
+  }
+
+  const lrclibInstance = computed(() => lrclibInstanceState.value)
 
   const themeMode = computed(() => themeModeState.value)
 
@@ -25,6 +31,8 @@ export function useGlobalState() {
     disableHotkey,
     enableHotkey,
     setThemeMode,
-    themeMode
+    themeMode,
+    setLrclibInstance,
+    lrclibInstance
   }
 }