Added an error page and redirect page for the update

lang/en.json

@@ -419,5 +419,8 @@
   "clickHere": "click here",
   "Feedback2": "Your opinion matters ✊",
   "FeedbackSurvey2": "We are in 2024 and it's time your opinions count ✊! We've built Pictalk thanks to the feedbacks of the community and we need yours now. We are working hard on the next version of Pictalk and we want to make sure no user is left behind 👤. Please take 5 minutes to fill this survey, we count on you 🫵.",
-  "FeedbackSurvey2Link": "You can find the link to the survey in the orange button with a bug symbol in the menu bar."
+  "FeedbackSurvey2Link": "You can find the link to the survey in the orange button with a bug symbol in the menu bar.",
+  "ErrorTitle": "An error occurred",
+  "ErrorSubtitle": "Sometimes things don't go as planned and errors occur, especially after updates. Please note that bugs are automatically reported to us. If the issue persists, send us an email or reach us in Facebook or Instagram. Click the button below to try to fix the error.",
+  "ErrorButton": "Try to fix the error"
 }

layouts/error.vue

@@ -0,0 +1,32 @@
+<template>
+  <section class="section">
+    <div class="container">
+      <h1 class="title">{{ $t("ErrorTitle") }}</h1>
+      <p class="subtitle">{{ $t("ErrorSubtitle") }}</p>
+      <pre v-for="key of Object.keys(error).filter((err) => err != 'cause')" data-prefix=">"
+        class="text-error"><code>{{ key }} : {{ (error)[key] }}</code></pre>
+      <br>
+      <b-button class="is-primary" @click="emptyCache">{{ $t("ErrorButton") }}</b-button>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  props: ['error'],
+  methods: {
+    async emptyCache() {
+      if ('caches' in window) {
+        const names = await window.caches.keys();
+        await Promise.all(names.map(name => window.caches.delete(name)));
+      }
+      if ('localStorage' in window) {
+        window.localStorage.clear();
+      }
+      const dbNames = await window.indexedDB.databases();
+      await Promise.all(dbNames.map(db => window.indexedDB.deleteDatabase(db.name ?? '')));
+      window.location.href = '/';
+    }
+  }
+}
+</script>

pages/pictalk/_fatherCollectionId.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <p>Redirecting</p>
+  </div>
+</template>
+<script>
+export default {
+  mounted() {
+    this.$router.push("/pictalk");
+  }
+}
+</script>

pages/pictalk/index.vue

@@ -190,17 +190,16 @@ export default {
       await this.fetchCollection(
         parseInt(this.$route.query.fatherCollectionId, 10)
       );
+      this.pictos = await this.loadedPictos();
     }
-    this.pictos = await this.loadedPictos();
 
     if (this.$store.getters.getSidebarId) {
-      console.log("fetching sidebar");
-      console.log("sidebarId", this.$store.getters.getSidebarId);
       await this.fetchCollection(
         parseInt(this.$store.getters.getSidebarId, 10)
       );
+      this.sidebarPictos = await this.loadedSidebarPictos();
     }
-    this.sidebarPictos = await this.loadedSidebarPictos();
+
     console.log("sidebarPictos", this.sidebarPictos);
     const user = this.$store.getters.getUser;
     if (!user.username) {