Merge pull request 'feat: option to restore settings via url' (#144) from Bnyro/Hyperpipe:settings-export into main

Reviewed-on: https://codeberg.org/Hyperpipe/Hyperpipe/pulls/144

src/App.vue

@@ -24,7 +24,10 @@ import Artist from '@/components/Artist.vue';
 const Genres = defineAsyncComponent(() => import('@/components/Genres.vue')),
   Charts = defineAsyncComponent(() => import('@/components/Charts.vue')),
   Library = defineAsyncComponent(() => import('@/components/Library.vue')),
-  Prefs = defineAsyncComponent(() => import('@/components/Prefs.vue'));
+  Prefs = defineAsyncComponent(() => import('@/components/Prefs.vue')),
+  RestorePrefs = defineAsyncComponent(() =>
+    import('@/components/RestorePrefs.vue'),
+  );
 
 /* Composables */
 import { useStore, useUnwrap } from '@/scripts/util.js';
@@ -87,6 +90,9 @@ function parseUrl() {
     case 'prefs':
       nav.state.page = 'prefs';
       break;
+    case 'restore':
+      nav.state.page = 'restore';
+      break;
     default:
       console.log(loc);
       break;
@@ -201,6 +207,8 @@ onMounted(() => {
       @open-playlist="results.getAlbum" />
 
     <Prefs v-if="nav.state.page == 'prefs'" />
+
+    <RestorePrefs v-if="nav.state.page == 'restore'" />
   </main>
 
   <Transition name="fade">

src/components/Prefs.vue

@@ -24,7 +24,8 @@ const { t, setupLocale } = useI18n(),
   next = ref(false),
   compact = ref(false),
   prm = ref(false),
-  cc = ref(false);
+  cc = ref(false),
+  restoreUrl = ref('');
 
 getJson('https://piped-instances.kavin.rocks')
   .then(i => i || getJson('https://instances.tokhmi.xyz'))
@@ -40,6 +41,16 @@ getJson('https://raw.codeberg.page/Hyperpipe/pages/api/backend.json').then(
   },
 );
 
+const getRestoreUrl = () => {
+  const params = new URLSearchParams();
+  Object.keys(window.localStorage).forEach(key => {
+    params.set(key, window.localStorage.getItem(key));
+  });
+  restoreUrl.value = window.location.origin + '/restore/?' + params;
+};
+
+getRestoreUrl();
+
 function getBool(val) {
   return 'bi ' + (val ? 'bi-check2' : 'bi-x-lg');
 }
@@ -366,6 +377,9 @@ onMounted(() => {
     </table>
   </div>
 
+  <h2>{{ t('title.restore_prefs') }}</h2>
+  <a :href="restoreUrl">{{ restoreUrl }}</a>
+
   <footer>
     {{ date }}
     <a

src/components/RestorePrefs.vue

@@ -0,0 +1,73 @@
+<script setup>
+import { useI18n } from '@/stores/misc.js';
+import { ref, onMounted } from 'vue';
+
+const { t } = useI18n();
+
+const urlParamKeys = ref([]),
+  urlParamValues = ref([]),
+  restorePrefs = () => {
+    for (let i = 0; i < urlParamKeys.value.length; i++) {
+      window.localStorage.setItem(
+        urlParamKeys.value[i],
+        urlParamValues.value[i],
+      );
+    }
+    window.location.href = '/';
+  };
+
+onMounted(() => {
+  const urlParams = new URLSearchParams(window.location.search);
+  urlParams.forEach((val, key) => {
+    urlParamKeys.value.push(key);
+    urlParamValues.value.push(val);
+  });
+});
+</script>
+
+<template>
+  <h2>{{ t('title.restore_prefs') }}</h2>
+
+  <div class="table">
+    <span v-for="(key, index) in urlParamKeys">
+      <div class="table-row">
+        <span>{{ key }}</span>
+        <hr />
+        <span>{{ urlParamValues[index] }}</span>
+      </div>
+      <hr />
+    </span>
+  </div>
+
+  <button @click="restorePrefs" class="input">
+    {{ t('title.restore_prefs') }}
+  </button>
+</template>
+
+<style>
+h2 {
+  text-align: center;
+}
+
+.table {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin: 2rem 0;
+}
+
+.table-row {
+  display: flex;
+  width: 100%;
+  padding: 0.5rem 0;
+}
+
+.table-row > span {
+  width: 50%;
+  padding-left: 0.5rem;
+}
+
+button {
+  cursor: pointer;
+}
+</style>

src/locales/en.json

@@ -17,7 +17,8 @@
     "remote": "Remote",
     "search": "Search",
     "feeds": "Feeds",
-    "offline": "Offline"
+    "offline": "Offline",
+    "restore_prefs": "Restore preferences"
   },
   "action": {
     "back": "Back",