From 46b0e5ffae8558e3acbbf93ea6ed09058c527acb Mon Sep 17 00:00:00 2001
From: Alexandros SIDIRAS <alexandros.sidiras@laposte.net>
Date: Thu, 14 Mar 2024 11:45:35 +0100
Subject: [PATCH] changed public path

---
 .vscode/settings.json                    |   2 +-
 components/navigation/modeModal.vue      |  46 +--
 components/navigation/navbar.vue         |   4 +-
 components/navigation/pictalk-navbar.vue | 435 ++++++++---------------
 components/pictos/picto.vue              | 390 +++++++++-----------
 components/pictos/pictoBar.vue           | 131 +++----
 components/pictos/sidebar.vue            |  25 +-
 7 files changed, 385 insertions(+), 648 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index b4be94df..665e623e 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,7 +2,7 @@
     "editor.formatOnSave": true,
     "vetur.validation.template": false,
     "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": true
+      "source.fixAll.eslint": "explicit"
     },
     "editor.tabSize": 2,
     "editor.detectIndentation": false,
diff --git a/components/navigation/modeModal.vue b/components/navigation/modeModal.vue
index 293ff67d..13eb6d4a 100644
--- a/components/navigation/modeModal.vue
+++ b/components/navigation/modeModal.vue
@@ -3,45 +3,25 @@
     <section class="modal-card-body">
       <p class="subtitle centered">{{ $t("AnotherSpace") }}</p>
       <div class="option">
-        <b-button
-          style="background-color: hsl(0, 100%, 70%)"
-          class="fullWidth customButton"
-          :label="$t('MyHome')"
-          @click="GoToRoot()"
-          icon-left="home"
-        />
+        <b-button style="background-color: hsl(0, 100%, 70%)" class="fullWidth customButton" :label="$t('MyHome')"
+          @click="GoToRoot()" icon-left="home" />
       </div>
       <div class="option">
-        <b-button
-          style="background-color: hsl(154, 100%, 70%)"
-          :label="$t('PublicCollections')"
-          @click="goTo('/public/')"
-          icon-left="web"
-          class="fullWidth customButton"
-        />
+        <b-button style="background-color: hsl(154, 100%, 70%)" :label="$t('PublicCollections')" @click="goTo('/')"
+          icon-left="web" class="fullWidth customButton" />
       </div>
       <div class="option">
-        <b-button
-          style="background-color: hsl(210, 100%, 70%)"
-          :label="$t('MyShared')"
-          @click="goTo(sharedLink)"
-          icon-left="folder-account"
-          class="fullWidth customButton"
-        />
+        <b-button style="background-color: hsl(210, 100%, 70%)" :label="$t('MyShared')" @click="goTo(sharedLink)"
+          icon-left="folder-account" class="fullWidth customButton" />
       </div>
       <div class="option">
-        <b-button
-          style="background-color: hsl(45, 100%, 70%)"
-          :label="$t('MySidebar')"
-          @mousedown="goTo(sidebarLink)"
-          icon-left="page-layout-sidebar-right"
-          class="fullWidth customButton"
-        />
+        <b-button style="background-color: hsl(45, 100%, 70%)" :label="$t('MySidebar')" @mousedown="goTo(sidebarLink)"
+          icon-left="page-layout-sidebar-right" class="fullWidth customButton" />
       </div>
     </section>
   </div>
 </template>
-<script >
+<script>
 export default {
   methods: {
     GoToRoot() {
@@ -96,19 +76,23 @@ export default {
   transition: all 0.05s;
   margin: 0 2px;
 }
+
 .customButton:hover {
   box-shadow: 0px 0px 12px #00000090;
 }
+
 .buttonBorder {
   border: solid;
   border-width: 1px;
   border-color: #48c78e;
 }
+
 .option {
   display: flex;
   align-items: center;
   padding: 0.3em 0;
 }
+
 .small-card {
   position: fixed;
   left: 50%;
@@ -120,17 +104,21 @@ export default {
   min-height: 200px;
   border-radius: 12px;
 }
+
 .centered {
   text-align: center;
 }
+
 .fullWidth {
   width: 100%;
   justify-content: left;
 }
+
 .modeButton {
   color: white;
   border-color: transparent;
 }
+
 .modeButton:hover {
   color: #f1f1f1;
   filter: brightness(1.1);
diff --git a/components/navigation/navbar.vue b/components/navigation/navbar.vue
index 7c9eee46..b858ab96 100644
--- a/components/navigation/navbar.vue
+++ b/components/navigation/navbar.vue
@@ -33,7 +33,7 @@
               <b-button class="bolder" v-if="!isLogged" @click="openSignUpModal()" type="is-success" outlined>{{
           $t("SignUp") }}</b-button>
               <b-button v-else type="is-light" icon-right="logout" @click="onLogout" />
-              <b-button class="bolder" outlined v-if="!isLogged" tag="nuxt-link" to="/public/346" type="is-primary"
+              <b-button class="bolder" outlined v-if="!isLogged" tag="nuxt-link" to="/346" type="is-primary"
                 icon-right="arrow-right-box">{{ $t("TryPictalk") }}</b-button>
             </div>
           </b-navbar-item>
@@ -103,7 +103,7 @@ export default {
   methods: {
     searchPicto() {
       this.$router.push({
-        path: `/public/`,
+        path: `/`,
         query: { ...this.$route.query, search: this.search },
       });
     },
diff --git a/components/navigation/pictalk-navbar.vue b/components/navigation/pictalk-navbar.vue
index eeb9ee3f..178fb776 100644
--- a/components/navigation/pictalk-navbar.vue
+++ b/components/navigation/pictalk-navbar.vue
@@ -1,236 +1,99 @@
 <template>
   <b-navbar fixed-top>
     <template slot="brand">
-      <b-tooltip 
-        position="is-bottom"
-        multilined
-        size="is-small"
-        type="is-primary"
-        :label="$t('TooltipReturn')"
-        :delay="1000"
-        :triggers="['hover']"
-        style="margin-top: 3px"
-      >
-        <b-button
-            :disabled="parseInt($route.params.fatherCollectionId) == $store.getters.getUser.root"
-            class="customButton"
-            style="background-color: hsl(210, 100%, 60%); min-width: 80px"
-            @click="navigateToParentCollection()"
-            icon-right="arrow-left"
-        />
-        </b-tooltip>
-      <b-navbar-item
-        v-if="!$route.query.isAdmin"
-        class="logo"
-        tag="nuxt-link"
-        v-bind:to="$route.query.isAdmin ? '/': ''"
-        style="padding: 0%; padding-right: 1px; padding-left: 1vw;"
-      >
-        <img
-          v-if="fits"
-          src="~/assets/logo_compressed.png"
-          alt="Logo of a web app that help speach-disabled people"
-          height="44px"
-          style="aspect-ratio: 411 / 130; margin-right: 0.5em"
-        />
-        <img
-          style="aspect-ratio: 1 / 1; margin-right: 0.5em"
-          height="44px"
-          v-if="!fits"
-          src="~/assets/small_logo.png"
-          alt="Logo of a web app that help speach-disabled people"
-        />
+      <b-tooltip position="is-bottom" multilined size="is-small" type="is-primary" :label="$t('TooltipReturn')"
+        :delay="1000" :triggers="['hover']" style="margin-top: 3px">
+        <b-button :disabled="parseInt($route.params.fatherCollectionId) == $store.getters.getUser.root"
+          class="customButton" style="background-color: hsl(210, 100%, 60%); min-width: 80px"
+          @click="navigateToParentCollection()" icon-right="arrow-left" />
+      </b-tooltip>
+      <b-navbar-item v-if="!$route.query.isAdmin" class="logo" tag="nuxt-link"
+        v-bind:to="$route.query.isAdmin ? '/' : ''" style="padding: 0%; padding-right: 1px; padding-left: 1vw;">
+        <img v-if="fits" src="~/assets/logo_compressed.png" alt="Logo of a web app that help speach-disabled people"
+          height="44px" style="aspect-ratio: 411 / 130; margin-right: 0.5em" />
+        <img style="aspect-ratio: 1 / 1; margin-right: 0.5em" height="44px" v-if="!fits" src="~/assets/small_logo.png"
+          alt="Logo of a web app that help speach-disabled people" />
       </b-navbar-item>
-      <div
-        :style="this.$route.path.includes('pictalk') ? '' : 'display:none'"
-        class="columns is-mobile margins"
-      >
-        <div
-          v-if="$route.query.isAdmin && !checkCopyCollectionId"
-          class="column noPadding dropdown"
-        >
-          <b-dropdown
-            :disabled="!isEditorFatherId && !isToUserFatherId"
-            id="nav-create"
-            class="column"
-            :mobile-modal="false"
-            trap-focus
-            :triggers="['click', 'hover']"
-            aria-role="list"
-          >
+      <div :style="this.$route.path.includes('pictalk') ? '' : 'display:none'" class="columns is-mobile margins">
+        <div v-if="$route.query.isAdmin && !checkCopyCollectionId" class="column noPadding dropdown">
+          <b-dropdown :disabled="!isEditorFatherId && !isToUserFatherId" id="nav-create" class="column"
+            :mobile-modal="false" trap-focus :triggers="['click', 'hover']" aria-role="list">
             <template #trigger>
-              <b-button
-                :disabled="!isEditorFatherId && !isToUserFatherId"
-                style="background-color: hsl(154, 100%, 65%)"
-                data-cy="pictalk-navbar-create-button"      
-                icon-right="plus"
-                :label="$t('Create')"
-                class="customButton"
-              />
+              <b-button :disabled="!isEditorFatherId && !isToUserFatherId" style="background-color: hsl(154, 100%, 65%)"
+                data-cy="pictalk-navbar-create-button" icon-right="plus" :label="$t('Create')" class="customButton" />
             </template>
-            <b-dropdown-item
-              class="verticalPadding"
-              @click="addPicto(true)"
-              aria-role="listitem"
-              data-cy="pictalk-navbar-create-pictogram-button"
-              ><b>{{ $t("Pictogram") }}</b> <b-icon icon="image" />
+            <b-dropdown-item class="verticalPadding" @click="addPicto(true)" aria-role="listitem"
+              data-cy="pictalk-navbar-create-pictogram-button"><b>{{ $t("Pictogram") }}</b> <b-icon icon="image" />
             </b-dropdown-item>
-            <b-dropdown-item
-              class="verticalPadding"
-              @click="addPicto(false)"
-              aria-role="listitem"
-              data-cy="pictalk-navbar-create-collection-button"
-              ><b>{{ $t("Collection") }}</b> <b-icon icon="folder-table" />
+            <b-dropdown-item class="verticalPadding" @click="addPicto(false)" aria-role="listitem"
+              data-cy="pictalk-navbar-create-collection-button"><b>{{ $t("Collection") }}</b> <b-icon
+                icon="folder-table" />
             </b-dropdown-item>
           </b-dropdown>
         </div>
 
-        <div
-          v-if="checkCopyCollectionId && $route.query.isAdmin"
-          class="column noPadding"
-        >
-          <b-button
-            class="customButton"
-            style="background-color: hsl(210, 100%, 60%); min-width: 80px"
-            @click="copyCollection()"
-            icon-right="content-paste"
-          />
+        <div v-if="checkCopyCollectionId && $route.query.isAdmin" class="column noPadding">
+          <b-button class="customButton" style="background-color: hsl(210, 100%, 60%); min-width: 80px"
+            @click="copyCollection()" icon-right="content-paste" />
         </div>
-        <div
-          v-if="checkCopyCollectionId && $route.query.isAdmin"
-          class="column noPadding"
-        >
-          <b-button
-            class="customButton"
-            style="background-color: hsl(0, 0%, 96%); min-width: 80px"
-            @click="cancelCopy()"
-            icon-right="close"
-          />
+        <div v-if="checkCopyCollectionId && $route.query.isAdmin" class="column noPadding">
+          <b-button class="customButton" style="background-color: hsl(0, 0%, 96%); min-width: 80px"
+            @click="cancelCopy()" icon-right="close" />
         </div>
       </div>
     </template>
     <template slot="start">
       <b-navbar-dropdown data-cy="pictalk-navbar-dropdown" :label="$t('Menu')">
         <b-navbar-item tag="nuxt-link" to="/"> {{ $t("Home") }}</b-navbar-item>
-        <b-navbar-item tag="nuxt-link" to="/news"
-          >{{ $t("News") }} &#127881;</b-navbar-item
-        >
-        <b-navbar-item tag="nuxt-link" to="/informations"
-          >{{ $t("Informations") }} 👐</b-navbar-item
-        >
+        <b-navbar-item tag="nuxt-link" to="/news">{{ $t("News") }} &#127881;</b-navbar-item>
+        <b-navbar-item tag="nuxt-link" to="/informations">{{ $t("Informations") }} 👐</b-navbar-item>
       </b-navbar-dropdown>
-      <b-navbar-item tag="nuxt-link" to="/tutorials"
-        >{{ $t("Tutorial") }} 🚀</b-navbar-item
-      >
+      <b-navbar-item tag="nuxt-link" to="/tutorials">{{ $t("Tutorial") }} 🚀</b-navbar-item>
     </template>
     <template slot="end">
       <b-navbar-item tag="div">
         <div class="buttons b-tooltips">
-          <b-button
-            v-if="isAdministrator()"
-            type="is-success is-light"
-            icon-right="poll"
-            tag="nuxt-link"
-            to="/administration/"
-          />
-          <b-tooltip 
-          position="is-bottom"
-            multilined
-            size="is-small"
-            type="is-primary"
-            :label="$t('TooltipAdmin')"
-            :delay="1000"
-            :triggers="['hover']"
-            >
-          <div
-          v-if="!checkCopyCollectionId || !$route.query.isAdmin"
-          class="column noPadding"
-          >
-            <b-button
-              style="background-color: hsl(44, 100%, 65%)"
-              data-cy="pictalk-navbar-admin-button"
-              :icon-left="iconIsAdmin"
-              :label="$route.query.isAdmin ? $t('Viewer') : $t('Editor')"
-              @click="adminModeChoose()"
-              class="fullWidth customButton rotateArrow"
-            />
-          </div>
+          <b-button v-if="isAdministrator()" type="is-success is-light" icon-right="poll" tag="nuxt-link"
+            to="/administration/" />
+          <b-tooltip position="is-bottom" multilined size="is-small" type="is-primary" :label="$t('TooltipAdmin')"
+            :delay="1000" :triggers="['hover']">
+            <div v-if="!checkCopyCollectionId || !$route.query.isAdmin" class="column noPadding">
+              <b-button style="background-color: hsl(44, 100%, 65%)" data-cy="pictalk-navbar-admin-button"
+                :icon-left="iconIsAdmin" :label="$route.query.isAdmin ? $t('Viewer') : $t('Editor')"
+                @click="adminModeChoose()" class="fullWidth customButton rotateArrow" />
+            </div>
           </b-tooltip>
-          <b-tooltip
-            position="is-bottom"
-            multilined
-            size="is-small"
-            type="is-primary"
-            :label="$t('TooltipHome')"
-            :delay="1000"
-            :triggers="['hover']"
-          >
-            <b-button
-              @click="openModeModal()"
-              style="color: white"
-              icon-right="menu-down"
-              :icon-left="icon"
-              :class="'customButton ' + colorClass"
-            />
+          <b-tooltip position="is-bottom" multilined size="is-small" type="is-primary" :label="$t('TooltipHome')"
+            :delay="1000" :triggers="['hover']">
+            <b-button @click="openModeModal()" style="color: white" icon-right="menu-down" :icon-left="icon"
+              :class="'customButton ' + colorClass" />
           </b-tooltip>
 
-          <b-tooltip
-            v-if="getUserNotifications() && getUserNotifications().length != 0"
-            position="is-bottom"
-            multilined
-            size="is-small"
-            type="is-primary"
-            :label="$t('TooltipNotifications')"
-            :delay="1000"
-            :triggers="['hover']"
-          >
-            <b-dropdown
-              position="is-bottom-left"
-              aria-role="menu"
-              trap-focus
-              append-to-body
-              class="notificationsdrop"
-              ><template #trigger>
-                <b-button
-                  style="background-color: hsl(0, 100%, 100%); color: #ff5757"
-                  icon-right="bell-alert"
-                  class="customButton"
-                />
+          <b-tooltip v-if="getUserNotifications() && getUserNotifications().length != 0" position="is-bottom" multilined
+            size="is-small" type="is-primary" :label="$t('TooltipNotifications')" :delay="1000" :triggers="['hover']">
+            <b-dropdown position="is-bottom-left" aria-role="menu" trap-focus append-to-body
+              class="notificationsdrop"><template #trigger>
+                <b-button style="background-color: hsl(0, 100%, 100%); color: #ff5757" icon-right="bell-alert"
+                  class="customButton" />
               </template>
-              <b-dropdown-item
-                aria-role="menu-item"
-                :focusable="false"
-                custom
-                class="lessPadding limitHeight"
-              >
-                <div
-                  v-for="notification in getUserNotifications()"
-                  :key="notification.operation + Math.random()"
-                  class="card lessPadding notification"
-                >
+              <b-dropdown-item aria-role="menu-item" :focusable="false" custom class="lessPadding limitHeight">
+                <div v-for="notification in getUserNotifications()" :key="notification.operation + Math.random()"
+                  class="card lessPadding notification">
                   <div class="card-content noPadding">
                     <div class="media">
                       <div class="media-content noPadding centered">
                         <p class="title is-6 notifTitle">
-                          <a
-                            :href="'mailto:' + notification.username"
-                            class="subtitle is-6 mailto"
-                            >{{
-                              notification.username
-                                .split("@")[0]
-                                .replace(".", " ")
-                            }}</a
-                          >
+                          <a :href="'mailto:' + notification.username" class="subtitle is-6 mailto">{{
+        notification.username
+          .split("@")[0]
+          .replace(".", " ")
+      }}</a>
                           {{ notificationText(notification) }}
                         </p>
                         <figure class="image is-64x64">
-                          <img
-                            @click="
-                              notificationGoToCollectionOrReturn(notification)
-                            "
-                            :src="getNotificationImage(notification)"
-                            alt="Placeholder image"
-                          />
+                          <img @click="
+        notificationGoToCollectionOrReturn(notification)
+        " :src="getNotificationImage(notification)" alt="Placeholder image" />
                         </figure>
                         <p class="title is-6 notifTitle greyback">
                           <!--<b-icon
@@ -244,32 +107,15 @@
                     </div>
                   </div>
                 </div>
-                <b-button
-                  class="is-danger center"
-                  icon-left="delete"
-                  expanded
-                  @click="deleteUserNotifications()"
-                />
+                <b-button class="is-danger center" icon-left="delete" expanded @click="deleteUserNotifications()" />
               </b-dropdown-item>
             </b-dropdown>
           </b-tooltip>
 
-          <b-tooltip
-            v-if="this.$route.path.includes('pictalk')"
-            position="is-bottom"
-            multilined
-            size="is-small"
-            type="is-primary"
-            :label="$t('TooltipAcount')"
-            :delay="1000"
-            :triggers="['hover']"
-          >
-            <b-button
-              style="background-color: hsl(207, 100%, 65%)"
-              @click="goToAccount()"
-              icon-right="cog"
-              class="customButton"
-            />
+          <b-tooltip v-if="this.$route.path.includes('pictalk')" position="is-bottom" multilined size="is-small"
+            type="is-primary" :label="$t('TooltipAcount')" :delay="1000" :triggers="['hover']">
+            <b-button style="background-color: hsl(207, 100%, 65%)" @click="goToAccount()" icon-right="cog"
+              class="customButton" />
           </b-tooltip>
           <!--
           <b-tooltip
@@ -289,37 +135,15 @@
             />
           </b-tooltip>
           -->
-          <b-tooltip
-            position="is-bottom"
-            multilined
-            size="is-small"
-            type="is-primary"
-            :label="$t('TooltipFeedback')"
-            :delay="1000"
-            :triggers="['hover']"
-          >
-            <b-button
-              style="background-color: hsl(34, 100%, 55%)"
-              icon-right="bug"
-              class="customButton"
-              @click="openFeedbackModal()"
-            />
+          <b-tooltip position="is-bottom" multilined size="is-small" type="is-primary" :label="$t('TooltipFeedback')"
+            :delay="1000" :triggers="['hover']">
+            <b-button style="background-color: hsl(34, 100%, 55%)" icon-right="bug" class="customButton"
+              @click="openFeedbackModal()" />
           </b-tooltip>
-          <b-tooltip
-            position="is-bottom"
-            multilined
-            size="is-small"
-            type="is-primary"
-            :label="$t('TooltipLogout')"
-            :delay="1000"
-            :triggers="['hover']"
-          >
-            <b-button
-              style="background-color: hsl(0, 100%, 100%)"
-              icon-right="logout"
-              class="customButton"
-              @click="onLogout"
-            />
+          <b-tooltip position="is-bottom" multilined size="is-small" type="is-primary" :label="$t('TooltipLogout')"
+            :delay="1000" :triggers="['hover']">
+            <b-button style="background-color: hsl(0, 100%, 100%)" icon-right="logout" class="customButton"
+              @click="onLogout" />
           </b-tooltip>
         </div>
       </b-navbar-item>
@@ -341,51 +165,51 @@ export default {
   },
   async created() {
     if (process.client) {
-    if ('BroadcastChannel' in window) {
-      const bc = new BroadcastChannel("offline-ready");
-      bc.onmessage = (event) => {
-        if (event.isTrusted) {
-          this.offlineReadyTotal = event.data.total;
-          this.offlineReadyProgress = event.data.progress;
-        }
-      };
-      const bc1 = new BroadcastChannel("authenticated-webworker");
-      console.log("Posting message to webworker")
-      if (this.$store.getters.getJwtFromCookie && this.$store.getters.getJwtExpDateFromCookie) {
-        bc1.postMessage({jwt: this.$store.getters.getJwtFromCookie, expDate: this.$store.getters.getJwtExpDateFromCookie});
-      }
-      bc1.onmessage = (event) => {
-        console.log("Received authenticated event from webworker")
-        if (event.isTrusted) {
-          if (event.data === "authenticated") {
-            bc1.postMessage({jwt: this.$store.getters.getJwtFromCookie, expDate: this.$store.getters.getJwtExpDateFromCookie});
+      if ('BroadcastChannel' in window) {
+        const bc = new BroadcastChannel("offline-ready");
+        bc.onmessage = (event) => {
+          if (event.isTrusted) {
+            this.offlineReadyTotal = event.data.total;
+            this.offlineReadyProgress = event.data.progress;
           }
+        };
+        const bc1 = new BroadcastChannel("authenticated-webworker");
+        console.log("Posting message to webworker")
+        if (this.$store.getters.getJwtFromCookie && this.$store.getters.getJwtExpDateFromCookie) {
+          bc1.postMessage({ jwt: this.$store.getters.getJwtFromCookie, expDate: this.$store.getters.getJwtExpDateFromCookie });
         }
-      };
-    }
-    if (window.navigator.onLine) {
-      try {
-        await this.$store.dispatch("getNotifications");
-      } catch (err) {}
-    }
-    this.intervalId = setInterval(async () => {
+        bc1.onmessage = (event) => {
+          console.log("Received authenticated event from webworker")
+          if (event.isTrusted) {
+            if (event.data === "authenticated") {
+              bc1.postMessage({ jwt: this.$store.getters.getJwtFromCookie, expDate: this.$store.getters.getJwtExpDateFromCookie });
+            }
+          }
+        };
+      }
       if (window.navigator.onLine) {
         try {
-          let notifCount = this.$store.getters.getUser.notifications.length;
           await this.$store.dispatch("getNotifications");
-          if (notifCount < this.$store.getters.getUser.notifications.length) {
-            this.$buefy.notification.open({
-              message: this.$t("UnreadNotifications"),
-              type: "is-info",
-            });
+        } catch (err) { }
+      }
+      this.intervalId = setInterval(async () => {
+        if (window.navigator.onLine) {
+          try {
+            let notifCount = this.$store.getters.getUser.notifications.length;
+            await this.$store.dispatch("getNotifications");
+            if (notifCount < this.$store.getters.getUser.notifications.length) {
+              this.$buefy.notification.open({
+                message: this.$t("UnreadNotifications"),
+                type: "is-info",
+              });
+            }
+          } catch (err) {
+            console.log(err);
+            clearInterval(this.intervalId);
+            return [];
           }
-        } catch (err) {
-          console.log(err);
-          clearInterval(this.intervalId);
-          return [];
         }
-      }
-    }, 60000);
+      }, 60000);
     }
   },
   data() {
@@ -478,7 +302,7 @@ export default {
       return this.$route.path;
     },
     publicLink() {
-      return "/public" + this.admin;
+      return "/" + this.admin;
     },
     availableLocales() {
       return this.$i18n.locales.filter((i) => i.code !== this.$i18n.locale);
@@ -491,8 +315,8 @@ export default {
     },
     isEditorFatherId() {
       return this.getCollectionFromId(parseInt(this.$route.params.fatherCollectionId, 10))?.editors.find(
-          (editor) => editor == this.$store.getters.getUser.username
-        ) != undefined
+        (editor) => editor == this.$store.getters.getUser.username
+      ) != undefined
     },
     isToUserFatherId() {
       return this.getCollectionFromId(parseInt(this.$route.params.fatherCollectionId, 10))?.userId == this.$store.getters.getUser.id
@@ -504,7 +328,7 @@ export default {
       const speechCollectionArrayBeforePosition = speechCollectionArray.slice(0, speechCollectionArray.findIndex((picto) => picto.id == parseInt(this.$route.params.fatherCollectionId)));
       if (speechCollectionArrayBeforePosition.length < 1) {
         if (this.publicMode) {
-          this.$router.push("/public/346");
+          this.$router.push("/346");
         } else {
           if (this.$store.getters.getRootId) {
             this.$router.push({
@@ -521,7 +345,7 @@ export default {
       } else {
         this.$router.push({
           path:
-            (this.publicMode ? "/public/" : "/pictalk/") +
+            (this.publicMode ? "/" : "/pictalk/") +
             speechCollectionArrayBeforePosition[speechCollectionArrayBeforePosition.length - 1]?.id,
           query: { ...this.$route.query },
         });
@@ -791,6 +615,7 @@ export default {
   left: 50%;
   transform: translateX(-50%);
 }
+
 @media (min-width: 1216px) {
   .logo {
     left: 0;
@@ -798,30 +623,37 @@ export default {
     position: relative;
   }
 }
+
 .b-tooltips {
   .b-tooltip:not(:last-child) {
     margin-right: 0.5em;
   }
+
   .b-tooltip {
     margin-bottom: 0.5em;
   }
 }
+
 .notifTitle {
   margin-bottom: 0.5em;
 }
+
 .greyback {
   background-color: #f5f5f5;
   padding: 0.2em;
   border-radius: 2px;
 }
+
 .mailto {
   color: #ee0000 !important;
   text-decoration: underline;
 }
+
 .limitHeight {
   max-height: 600px;
   overflow-y: auto;
 }
+
 .lock {
   width: 90%;
   display: flex;
@@ -832,6 +664,7 @@ export default {
   margin-left: auto;
   margin-right: auto;
 }
+
 .addButton {
   border: solid;
   border-color: #4c4329;
@@ -839,6 +672,7 @@ export default {
   height: 100%;
   width: 95%;
 }
+
 .margins {
   margin-left: 20px;
   margin-right: 1vw;
@@ -846,12 +680,15 @@ export default {
   height: 44px;
   align-items: center;
 }
+
 .noPadding {
   padding: 0%;
 }
+
 .lessPadding {
   padding: 0.38rem;
 }
+
 .downloadDiv {
   border: solid;
   border-width: 1px;
@@ -866,9 +703,11 @@ export default {
   display: flex;
   font-size: 0.85em;
 }
+
 .notification {
   margin: 0.6rem;
 }
+
 .centered {
   align-items: center;
   display: flex;
@@ -880,16 +719,20 @@ export default {
   align-items: center;
   justify-content: center;
 }
+
 .dropdown-button {
   height: 44px;
 }
+
 .verticalPadding {
   padding-top: 0.75em;
   padding-bottom: 0.75em;
 }
+
 .rounded {
   border-radius: 24px;
 }
+
 .customButton {
   font-size: clamp(0.8em, 4vw, 1.15em);
   font-weight: 600;
@@ -898,16 +741,20 @@ export default {
   transition: all 0.05s;
   margin: 0 2px;
 }
+
 .customButton:hover {
   box-shadow: 0px 0px 12px #00000090;
 }
+
 .modeButton {
   color: white;
   border-color: transparent;
 }
+
 .modeButton:hover {
   color: #f1f1f1;
 }
+
 .version {
   display: flex;
   align-items: flex-end;
diff --git a/components/pictos/picto.vue b/components/pictos/picto.vue
index d4ad53e0..5a3e51ed 100644
--- a/components/pictos/picto.vue
+++ b/components/pictos/picto.vue
@@ -1,259 +1,140 @@
 <template>
-  <div
-    :data-cy="'cy-' + picto.id"
-    :class="{
-      pictowrapper: true,
-      bigger:
-        !dragndropId &&
-        !publicMode &&
-        !sidebarMode &&
-        $route.query.isAdmin &&
-        false,
-    }"
-    v-on="
-      picto.collection &&
+  <div :data-cy="'cy-' + picto.id" :class="{
+    pictowrapper: true,
+    bigger:
+      !dragndropId &&
+      !publicMode &&
+      !sidebarMode &&
+      $route.query.isAdmin &&
+      false,
+  }" v-on="picto.collection &&
       !publicMode &&
       !sidebarMode &&
       $route.query.isAdmin &&
       isDropZone
-        ? { dragover: onDragOver, dragleave: onDragLeave, drop: onDrop }
-        : {}
-    "
-  >
-    <div
-      :id="picto.id"
-      :collection="picto.collection"
-      :class="{
-        'has-background': picto.collection,
-        'drop-area': isDropZone,
-        'containing notification pictobackground pictogram': true,
-      }"
-    >
-      <div
-        id="pictogram-image-wrapper"
-        :style="`width:100%; background-color:${this.picto.color}; border-radius:6px`"
-      >
-        <div
-          v-if="$route.query.isAdmin && !publicMode && !sidebarMode"
-          class="actions container"
-          @click.self="addToSpeech()"
-        >
+      ? { dragover: onDragOver, dragleave: onDragLeave, drop: onDrop }
+      : {}
+    ">
+    <div :id="picto.id" :collection="picto.collection" :class="{
+    'has-background': picto.collection,
+    'drop-area': isDropZone,
+    'containing notification pictobackground pictogram': true,
+  }">
+      <div id="pictogram-image-wrapper" :style="`width:100%; background-color:${this.picto.color}; border-radius:6px`">
+        <div v-if="$route.query.isAdmin && !publicMode && !sidebarMode" class="actions container"
+          @click.self="addToSpeech()">
           <div class="offline subtitle" v-if="!isOnline">
             <b-icon icon="web-cancel" />
           </div>
-          <div
-            v-if="isOnline"
-            class="head-actions"
-            @click.self="addToSpeech()"
-            v-on="
-              picto.collection &&
-              !publicMode &&
-              !sidebarMode &&
-              $route.query.isAdmin &&
-              isDropZone
-                ? { dragover: onDragOver, dragleave: onDragLeave, drop: onDrop }
-                : {}
-            "
-          >
-            <div
-              v-if="!publicMode && !sidebarMode && $route.query.isAdmin"
-              :draggable="
-                !publicMode && !sidebarMode && $route.query.isAdmin
-                  ? true
-                  : false
-              "
-              @dragstart="onDragStart"
-              @dragend="onDragEnd"
-            >
-              <b-tooltip
-                :label="$t('DragAndDrop')"
-                :delay="500"
-                position="is-bottom"
-              >
+          <div v-if="isOnline" class="head-actions" @click.self="addToSpeech()" v-on="picto.collection &&
+      !publicMode &&
+      !sidebarMode &&
+      $route.query.isAdmin &&
+      isDropZone
+      ? { dragover: onDragOver, dragleave: onDragLeave, drop: onDrop }
+      : {}
+    ">
+            <div v-if="!publicMode && !sidebarMode && $route.query.isAdmin" :draggable="!publicMode && !sidebarMode && $route.query.isAdmin
+      ? true
+      : false
+    " @dragstart="onDragStart" @dragend="onDragEnd">
+              <b-tooltip :label="$t('DragAndDrop')" :delay="500" position="is-bottom">
                 <b-icon class="large-icon icon" icon="drag"></b-icon>
               </b-tooltip>
             </div>
             <div v-if="$route.query.isAdmin && !publicMode && !sidebarMode">
-              <div
-                data-cy="picto-action-dropdown"
-                v-if="!dragndropId"
-                @click="openActions()"
-              >
-                <b-tooltip
-                  :label="$t('Menu')"
-                  :delay="500"
-                  position="is-bottom"
-                >
+              <div data-cy="picto-action-dropdown" v-if="!dragndropId" @click="openActions()">
+                <b-tooltip :label="$t('Menu')" :delay="500" position="is-bottom">
                   <b-icon class="medium-icon icon" icon="dots-vertical" />
                 </b-tooltip>
               </div>
             </div>
           </div>
-          <div
-            v-if="!dragndropId && isOnline"
-            class="main-actions"
-            @click.self="addToSpeech()"
-          >
-            <div
-              v-on="
-                (isEditor || isToUser) && isOnline ? { click: editPicto } : {}
-              "
-            >
+          <div v-if="!dragndropId && isOnline" class="main-actions" @click.self="addToSpeech()">
+            <div v-on="(isEditor || isToUser) && isOnline ? { click: editPicto } : {}
+    ">
               <b-tooltip :label="$t('Edit')" :delay="500" position="is-bottom">
-                <b-icon
-                  class="medium-icon icon"
-                  v-bind:style="
-                    (isEditor || isToUser) && isOnline
-                      ? 'justify-self: end; color: hsl(210, 100%, 75%)'
-                      : 'justify-self: end; color: hsl(210, 100%, 75%); opacity: 0.5'
-                  "
-                  icon="pencil"
-                />
+                <b-icon class="medium-icon icon" v-bind:style="(isEditor || isToUser) && isOnline
+      ? 'justify-self: end; color: hsl(210, 100%, 75%)'
+      : 'justify-self: end; color: hsl(210, 100%, 75%); opacity: 0.5'
+    " icon="pencil" />
               </b-tooltip>
             </div>
-            <div
-              v-if="picto.collection"
-              v-on="
-                picto.collection && isOnline
-                  ? {
-                      click: () =>
-                        setCopyCollectionId(picto.id, !picto.collection),
-                    }
-                  : {}
-              "
-            >
-              <b-tooltip
-                :label="$t('CopyPicto')"
-                :delay="500"
-                position="is-bottom"
-              >
-                <b-icon
-                  class="medium-icon icon"
-                  v-bind:style="
-                    picto.collection && isOnline
-                      ? 'justify-self: end; color: hsl(45, 100%, 75%)'
-                      : 'justify-self: end; color: hsl(45, 100%, 75%); opacity: 0.5'
-                  "
-                  icon="vector-arrange-below"
-                />
+            <div v-if="picto.collection" v-on="picto.collection && isOnline
+      ? {
+        click: () =>
+          setCopyCollectionId(picto.id, !picto.collection),
+      }
+      : {}
+    ">
+              <b-tooltip :label="$t('CopyPicto')" :delay="500" position="is-bottom">
+                <b-icon class="medium-icon icon" v-bind:style="picto.collection && isOnline
+      ? 'justify-self: end; color: hsl(45, 100%, 75%)'
+      : 'justify-self: end; color: hsl(45, 100%, 75%); opacity: 0.5'
+    " icon="vector-arrange-below" />
               </b-tooltip>
             </div>
-            <div
-              v-if="picto.collection"
-              v-on="
-                (isEditor || isToUser || isViewer) &&
-                picto.collection &&
-                isOnline
-                  ? {
-                      click: () =>
-                        setShortcutCollectionId(picto.id, !picto.collection),
-                    }
-                  : {}
-              "
-            >
-              <b-tooltip
-                :label="$t('LinkPicto')"
-                :delay="500"
-                position="is-bottom"
-              >
-                <b-icon
-                  class="medium-icon icon"
-                  v-bind:style="
-                    (isEditor || isToUser || isViewer) &&
-                    picto.collection &&
-                    isOnline
-                      ? 'justify-self: start; color: hsl(140, 100%, 75%)'
-                      : 'justify-self: start; color: hsl(140, 100%, 75%); opacity: 0.5'
-                  "
-                  icon="vector-link"
-                />
+            <div v-if="picto.collection" v-on="(isEditor || isToUser || isViewer) &&
+      picto.collection &&
+      isOnline
+      ? {
+        click: () =>
+          setShortcutCollectionId(picto.id, !picto.collection),
+      }
+      : {}
+    ">
+              <b-tooltip :label="$t('LinkPicto')" :delay="500" position="is-bottom">
+                <b-icon class="medium-icon icon" v-bind:style="(isEditor || isToUser || isViewer) &&
+      picto.collection &&
+      isOnline
+      ? 'justify-self: start; color: hsl(140, 100%, 75%)'
+      : 'justify-self: start; color: hsl(140, 100%, 75%); opacity: 0.5'
+    " icon="vector-link" />
               </b-tooltip>
             </div>
             <div v-on="isOnline && canDelete ? { click: deletePicto } : {}">
-              <b-tooltip
-                :label="$t('DeletePicto')"
-                :delay="500"
-                position="is-bottom"
-              >
-                <b-icon
-                  class="medium-icon icon"
-                  v-bind:style="
-                    isOnline && canDelete
-                      ? 'justify-self: start; color: hsl(0, 100%, 75%)'
-                      : 'justify-self: start; color: hsl(0, 100%, 75%); opacity: 0.5'
-                  "
-                  icon="delete"
-                />
+              <b-tooltip :label="$t('DeletePicto')" :delay="500" position="is-bottom">
+                <b-icon class="medium-icon icon" v-bind:style="isOnline && canDelete
+      ? 'justify-self: start; color: hsl(0, 100%, 75%)'
+      : 'justify-self: start; color: hsl(0, 100%, 75%); opacity: 0.5'
+    " icon="delete" />
               </b-tooltip>
             </div>
           </div>
 
-          <div
-            v-if="!dragndropId & isOnline"
-            class="foot-actions"
-            @click.self="addToSpeech()"
-          >
-            <b-tooltip
-              :label="$t('Priority')"
-              :delay="500"
-              position="is-bottom"
-            >
-              <b-button
-                :disabled="!(isToUser || isEditor) || !isOnline"
-                :style="colorPriority"
-                @click="alternateStar(true, 2000)"
-                class="priority-button"
-              >
+          <div v-if="!dragndropId & isOnline" class="foot-actions" @click.self="addToSpeech()">
+            <b-tooltip :label="$t('Priority')" :delay="500" position="is-bottom">
+              <b-button :disabled="!(isToUser || isEditor) || !isOnline" :style="colorPriority"
+                @click="alternateStar(true, 2000)" class="priority-button">
                 <b>{{ showPriorityOrStarred }}</b>
               </b-button>
             </b-tooltip>
           </div>
         </div>
-        <img
-          draggable="false"
-          :class="{ image: true, nopointerevents: $route.query.isAdmin }"
-          :srcset="pictoOrUndefinedImage"
-          :alt="picto.meaning[getUserLang]"
-          @click.self="addToSpeech()"
-          width="100%"
-          crossorigin="anonymous"
-          v-bind:style="
-            this.picto.color != '#ffffff00'
-              ? `border: solid; border-color: ${this.picto.color}; border-width: 10px;`
-              : ''
-          "
-        />
+        <img draggable="false" :class="{ image: true, nopointerevents: $route.query.isAdmin }"
+          :srcset="pictoOrUndefinedImage" :alt="picto.meaning[getUserLang]" @click.self="addToSpeech()" width="100%"
+          crossorigin="anonymous" v-bind:style="this.picto.color != '#ffffff00'
+      ? `border: solid; border-color: ${this.picto.color}; border-width: 10px;`
+      : ''
+    " />
         <b-skeleton class="skeleton-wrapper" height="100%" :active="skeleton" />
       </div>
-      <div
-        class="meaning"
-        v-bind:style="
-          customFontSize ? 'font-size: 1rem;' : 'font-size: 0.6rem;'
-        "
-      >
+      <div class="meaning" v-bind:style="customFontSize ? 'font-size: 1rem;' : 'font-size: 0.6rem;'
+    ">
         {{ picto.meaning[getUserLang] }}
       </div>
-      <div
-        v-if="
-          publicMode && $store.getters.getUser && $store.getters.isAuthenticated
-        "
-        class="adminMenu adminoption columns smallMargin"
-      >
+      <div v-if="publicMode && $store.getters.getUser && $store.getters.isAuthenticated
+    " class="adminMenu adminoption columns smallMargin">
         <div class="column noMargin is-mobile">
-          <b-button
-            :disabled="!isOnline"
-            type="is-success"
-            icon-right="plus"
-            @click="
-              setShortcutCollectionIdDirectlyToRoot(picto.id, !picto.collection)
-            "
-          />
+          <b-button :disabled="!isOnline" type="is-success" icon-right="plus" @click="
+    setShortcutCollectionIdDirectlyToRoot(picto.id, !picto.collection)
+    " />
         </div>
       </div>
     </div>
   </div>
 </template>
-<script >
+<script>
 import lang from "@/mixins/lang";
 import deviceInfos from "@/mixins/deviceInfos";
 import PictoSteps from "@/components/pictos/pictoSteps";
@@ -395,7 +276,7 @@ export default {
       if (
         this.$store.getters.getDragndrop &&
         this.$store.getters.getDragndrop.fatherCollectionId !=
-          parseInt(this.$route.params.fatherCollectionId)
+        parseInt(this.$route.params.fatherCollectionId)
       ) {
         const dragndrop = this.$store.getters.getDragndrop;
         if (this.$store.getters.getDragndrop) {
@@ -476,7 +357,7 @@ export default {
     },
     pictoLink() {
       return this.publicMode
-        ? String("/public/" + this.picto.id)
+        ? String("/" + this.picto.id)
         : String("/pictalk/" + this.picto.id);
     },
   },
@@ -489,17 +370,20 @@ export default {
   font-weight: 600;
   color: hsl(0, 100%, 65%);
 }
+
 .button:focus:not(:active),
 .button.is-focused:not(:active) {
   box-shadow: none !important;
 }
 
-.priority-button > span > b {
+.priority-button>span>b {
   font-weight: 900 !important;
 }
+
 .priority-button:hover {
   filter: brightness(1.2);
 }
+
 .main-actions {
   color: white;
   display: grid;
@@ -512,30 +396,38 @@ export default {
   .nopointerevents {
     pointer-events: none;
   }
-  .actions > :is(.head-actions) {
+
+  .actions> :is(.head-actions) {
     opacity: 1;
   }
-  .actions > :is(.main-actions, .foot-actions) {
+
+  .actions> :is(.main-actions, .foot-actions) {
     display: none;
   }
+
   .actions:hover {
     background-color: rgba(0, 0, 0, 0);
   }
+
   .head-actions {
     padding: 0px;
     margin-top: -0.1rem;
   }
+
   .priority-button {
     font-size: 1.75em;
     height: 32px;
     width: 32px;
   }
+
   .large-icon {
     font-size: 2.5rem;
   }
+
   .medium-icon {
     font-size: 1.75rem;
   }
+
   .icon {
     text-shadow: 0px 0px 2px #000000d0;
     -webkit-text-stroke: 1.25px black;
@@ -543,14 +435,17 @@ export default {
     cursor: pointer;
   }
 }
+
 @media (pointer: fine) and (hover: hover) {
-  .actions > :is(.main-actions, .head-actions, .offline) {
+  .actions> :is(.main-actions, .head-actions, .offline) {
     opacity: 0;
   }
-  .actions:hover > :is(.main-actions, .head-actions, .offline) {
+
+  .actions:hover> :is(.main-actions, .head-actions, .offline) {
     opacity: 1;
   }
 }
+
 .head-actions {
   display: flex;
   flex-direction: row;
@@ -561,6 +456,7 @@ export default {
   align-self: baseline;
   padding: 6px;
 }
+
 .priority-button {
   background-color: #ffffff00;
   border: none;
@@ -572,18 +468,22 @@ export default {
   height: 40px;
   width: 40px;
 }
+
 .large-icon {
   font-size: 2.75rem;
 }
+
 .medium-icon {
   font-size: 1.75rem;
 }
+
 .icon {
   text-shadow: 0px 0px 4px #000000d0;
   -webkit-text-stroke: 0.5px black;
   transition: 0.075s;
   cursor: pointer;
 }
+
 .icon:hover {
   text-shadow: 0px 0px 8px #000000;
   filter: brightness(1.2);
@@ -603,6 +503,7 @@ export default {
 .actions:hover {
   background-color: rgba(0, 0, 0, 0.6);
 }
+
 .actions {
   border-radius: 6px;
   width: calc(100% - 1.2rem);
@@ -615,6 +516,7 @@ export default {
   align-items: center;
   transition: 0.075s ease-in-out;
 }
+
 .dragbutton {
   top: 0.6rem;
   left: 0.6rem;
@@ -626,37 +528,47 @@ export default {
   z-index: 1;
   aspect-ratio: 1 / 1;
 }
+
 .container {
   container-type: inline-size;
 }
+
 @container (max-width: 150px) {
   .nopointerevents {
     pointer-events: none;
   }
-  .actions > :is(.head-actions) {
+
+  .actions> :is(.head-actions) {
     opacity: 1;
   }
-  .actions > :is(.main-actions, .foot-actions) {
+
+  .actions> :is(.main-actions, .foot-actions) {
     display: none;
   }
+
   .actions:hover {
     background-color: rgba(0, 0, 0, 0);
   }
+
   .head-actions {
     padding: 0px;
     margin-top: -0.1rem;
   }
+
   .priority-button {
     font-size: 1.75em;
     height: 32px;
     width: 32px;
   }
+
   .large-icon {
     font-size: 2.5rem;
   }
+
   .medium-icon {
     font-size: 1.75rem;
   }
+
   .icon {
     text-shadow: 0px 0px 2px #000000d0;
     -webkit-text-stroke: 1.25px black;
@@ -664,53 +576,64 @@ export default {
     cursor: pointer;
   }
 }
+
 .has-background {
   box-shadow: 6px 6px 6px #00000060;
   border-color: #000000 !important;
   border-style: solid !important;
 }
+
 .containing {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
+
 .adminoption {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
 }
+
 .image {
   margin: auto;
   border-radius: 6px;
   aspect-ratio: 1/1;
   object-fit: contain;
 }
+
 .adminMenu {
   align-self: center;
   margin-top: auto;
   margin-left: 0%;
   margin-right: 0%;
 }
+
 .noMargin {
   padding: 0%;
 }
+
 .meaning {
   padding-bottom: 0.15rem;
   max-width: 100%;
   overflow-wrap: break-word;
 }
+
 .pictobackground {
   background-color: #ffffff00;
 }
+
 .notification {
   padding: 0.6rem;
   padding-bottom: 0.1rem;
 }
+
 .smallMargin {
   margin-bottom: 2px;
 }
+
 .pictogram {
   border-style: solid;
   border-width: 1px;
@@ -718,16 +641,19 @@ export default {
   border-color: #00000014;
   background-color: white;
 }
+
 .pictowrapper {
   padding: 3px;
   position: relative;
   transition: 0.075s ease-in-out;
   min-width: 180px;
 }
+
 .pictowrapper:hover {
   z-index: 3;
 }
-.pictowrapper:hover > .pictogram > #pictogram-image-wrapper > .actions {
+
+.pictowrapper:hover>.pictogram>#pictogram-image-wrapper>.actions {
   opacity: 1;
   pointer-events: all;
 }
@@ -735,20 +661,27 @@ export default {
 .drop-area {
   box-shadow: 0 0 3px 3px hsl(150, 90%, 45%);
 }
+
 .bigger {
-  transition: transform 0.2s; /* Animation */
+  transition: transform 0.2s;
+  /* Animation */
 }
 
 .dragOverZone {
-  transition: transform 0.2s; /* Animation */
+  transition: transform 0.2s;
+  /* Animation */
   transform: scale(1.05);
 }
+
 .dragOverElement {
-  transition: transform 0.2s; /* Animation */
+  transition: transform 0.2s;
+  /* Animation */
   transform: scale(0.9);
 }
+
 .grabbable {
-  cursor: move; /* fallback if grab cursor is unsupported */
+  cursor: move;
+  /* fallback if grab cursor is unsupported */
   cursor: grab;
   cursor: -moz-grab;
   cursor: -webkit-grab;
@@ -760,16 +693,19 @@ export default {
   cursor: -moz-grabbing;
   cursor: -webkit-grabbing;
 }
-#pictogram-image-wrapper > .b-skeleton.is-animated {
+
+#pictogram-image-wrapper>.b-skeleton.is-animated {
   width: calc(100% - 1.2rem);
   aspect-ratio: 1 / 1;
   position: absolute;
   top: 0.6rem;
 }
+
 .skeleton-wrapper {
   width: 100%;
   height: 100%;
 }
+
 @media screen and (max-width: 1023px) {
   .pictowrapper {
     min-width: 80px;
diff --git a/components/pictos/pictoBar.vue b/components/pictos/pictoBar.vue
index 856aaa42..ef4e85be 100644
--- a/components/pictos/pictoBar.vue
+++ b/components/pictos/pictoBar.vue
@@ -1,84 +1,46 @@
 <template>
   <div class="notification columns is-mobile nopadding" :style="cssVars">
     <div class="column is-narrow nopadding">
-      <b-button
-        style="background-color: hsl(0, 100%, 100%); color: #ff5757"
-        icon-right="delete"
-        :class="'customButton ' + buttonsShowSize"
-          @click="eraseSpeech()"
-      />
+      <b-button style="background-color: hsl(0, 100%, 100%); color: #ff5757" icon-right="delete"
+        :class="'customButton ' + buttonsShowSize" @click="eraseSpeech()" />
     </div>
     <div class="column is-narrow nopadding">
-      <b-button
-        style="background-color: hsl(0, 100%, 100%); color: #ff5757"
-        icon-right="backspace"
-        :class="'customButton ' + buttonsShowSize"
-          @click="removeSpeech(true)"
-      />
+      <b-button style="background-color: hsl(0, 100%, 100%); color: #ff5757" icon-right="backspace"
+        :class="'customButton ' + buttonsShowSize" @click="removeSpeech(true)" />
     </div>
     <div class="column" style="padding: 0%">
       <div id="bar" class="scrolling">
-        <miniPicto
-          v-for="(picto, index) in pictosWithoutSilent"
-          :key="index"
-          :image="picto.image"
-          :pictoCount="picto.count"
-        />
+        <miniPicto v-for="(picto, index) in pictosWithoutSilent" :key="index" :image="picto.image"
+          :pictoCount="picto.count" />
       </div>
     </div>
     <div class="column is-narrow nopadding">
-      <b-button
-        v-if="$store.getters.getTemporaryLanguage"
-        :class="'customButton ' + buttonsShowSize"
-        type="is-success"
-        icon-right="volume-high"
-        @click="pictalk(pictos)"
-        >{{ getEmoji($store.getters.getTemporaryLanguage) }}</b-button
-      >
-      <b-button
-      v-if="$store.getters.getTemporaryLanguage"
-        style="background-color: hsl(154, 70%, 55%)"
-        icon-right="volume-high"
-        :class="'customButton ' + buttonsShowSize"
-        @click="pictalk(pictos)"
-      >{{ getEmoji($store.getters.getTemporaryLanguage) }}</b-button>
-      <b-button
-      v-else
-        id="pictobar-speak"
-        style="background-color: hsl(154, 70%, 55%)"
-        icon-right="volume-high"
-        :class="'customButton ' + buttonsShowSize"
-        @click="pictalk(pictos)"
-      />
+      <b-button v-if="$store.getters.getTemporaryLanguage" :class="'customButton ' + buttonsShowSize" type="is-success"
+        icon-right="volume-high" @click="pictalk(pictos)">{{ getEmoji($store.getters.getTemporaryLanguage) }}</b-button>
+      <b-button v-if="$store.getters.getTemporaryLanguage" style="background-color: hsl(154, 70%, 55%)"
+        icon-right="volume-high" :class="'customButton ' + buttonsShowSize" @click="pictalk(pictos)">{{
+    getEmoji($store.getters.getTemporaryLanguage) }}</b-button>
+      <b-button v-else id="pictobar-speak" style="background-color: hsl(154, 70%, 55%)" icon-right="volume-high"
+        :class="'customButton ' + buttonsShowSize" @click="pictalk(pictos)" />
     </div>
     <div class="column is-narrow nopadding">
-      <b-button
-        style="background-color: hsl(210, 100%, 65%)"
-        icon-right="content-copy"
-        :class="'customButton ' + buttonsShowSize"
-        @click="copyPictosToClipboardBase(pictosWithoutSilent)"
-        id="pictobar-copy"
-      />
+      <b-button style="background-color: hsl(210, 100%, 65%)" icon-right="content-copy"
+        :class="'customButton ' + buttonsShowSize" @click="copyPictosToClipboardBase(pictosWithoutSilent)"
+        id="pictobar-copy" />
     </div>
     <div v-if="vocalize" class="onTop">
-      <b-button
-        icon-left="close"
-        @click="vocalize = false"
+      <b-button icon-left="close" @click="vocalize = false"
         style="margin-left: 2vmax; margin-top: 2vmax; background-color: hsl(0, 100%, 65%); color: white"
-        class="customButton"
-      />
-      
+        class="customButton" />
+
       <div class="columns is-multiline is-mobile topColumns">
-        <img
-          v-for="(picto, index) in pictosWithoutSilent"
-          :key="index"
-          :src="picto.image"
-          :class="(animation? (wordIndex >= index? pronounceShowSize+' animations': pronounceShowSize+' lowBrightness') : pronounceShowSize)"></img>
+        <img v-for="(picto, index) in pictosWithoutSilent" :key="index" :src="picto.image"
+          :class="(animation ? (wordIndex >= index ? pronounceShowSize + ' animations' : pronounceShowSize + ' lowBrightness') : pronounceShowSize)"></img>
       </div>
     </div>
   </div>
 </template>
-<script >
+<script>
 import miniPicto from "@/components/pictos/miniPicto";
 import mergeImages from "merge-images-horizontally-with-text";
 import tradLanguageListVue from "@/components/pictos/tradLanguageList.vue";
@@ -177,10 +139,10 @@ export default {
     },
     copyPictosToClipboardV2(pictos) {
       try {
-          const data = [new ClipboardItem({ [this.preGeneratedBlob.type]: this.preGeneratedBlob })];
-          navigator.clipboard.write(data);
-          SoundHelper.playSentenceCopy();
-          const notif = this.$buefy.toast.open({
+        const data = [new ClipboardItem({ [this.preGeneratedBlob.type]: this.preGeneratedBlob })];
+        navigator.clipboard.write(data);
+        SoundHelper.playSentenceCopy();
+        const notif = this.$buefy.toast.open({
           message: this.$t("CopySucces"),
           type: "is-success",
         });
@@ -190,17 +152,17 @@ export default {
           this.copyPictosToClipboardLegacy(pictos);
           SoundHelper.playSentenceCopy();
           const notif = this.$buefy.toast.open({
-          message: this.$t("CopySucces"),
-          type: "is-success",
+            message: this.$t("CopySucces"),
+            type: "is-success",
           });
-        } catch(e) {
+        } catch (e) {
           SoundHelper.playError()
           const notif = this.$buefy.toast.open({
-          message: this.$t("CopyError"),
-          type: "is-danger",
-        });
+            message: this.$t("CopyError"),
+            type: "is-danger",
+          });
         }
-        
+
       }
     },
     async pictalk(pictos) {
@@ -273,7 +235,7 @@ export default {
         } else {
           if (pictalkSpeech.length <= 1) {
             if (this.publicMode) {
-              this.$router.push("/public/346");
+              this.$router.push("/346");
             } else {
               if (this.$store.getters.getRootId) {
                 this.$router.push({
@@ -290,7 +252,7 @@ export default {
           } else {
             this.$router.push({
               path:
-                (this.publicMode ? "/public/" : "/pictalk/") +
+                (this.publicMode ? "/" : "/pictalk/") +
                 pictalkSpeech[pictalkSpeech.length - 2]?.id,
               query: { ...this.$route.query },
             });
@@ -307,13 +269,13 @@ export default {
       } catch (e) {
         console.log(e)
       }
-      
+
       this.$store.commit("removeSpeech");
     },
     eraseSpeech() {
       SoundHelper.playSentenceErase();
       if (this.publicMode) {
-        this.$router.push("/public/346");
+        this.$router.push("/346");
         this.$store.commit("eraseSpeech");
       } else {
         this.$store.commit("eraseSpeech");
@@ -461,14 +423,14 @@ export default {
     },
     pictos: {
       deep: true,
-      handler (value) {
+      handler(value) {
         setTimeout(() => {
           let element = document.getElementById("bar");
           element.scrollLeft = element.scrollWidth;
         }, 125);
-        if ((this.$store.getters.getUser.settings?.pronounceClick|| this.publicMode) && value.length >= this.pictoLength && value.length > 0 && value[value.length -1]?.speech != "" ) {
+        if ((this.$store.getters.getUser.settings?.pronounceClick || this.publicMode) && value.length >= this.pictoLength && value.length > 0 && value[value.length - 1]?.speech != "") {
           this.pronounce(
-            value[value.length -1].speech[this.getUserLang],
+            value[value.length - 1].speech[this.getUserLang],
             this.getUserLang,
             this.voiceURI,
             this.pitch,
@@ -508,14 +470,17 @@ export default {
   border: 2px solid #666;
   transition: all 0.05s;
 }
+
 .customButton:hover {
   box-shadow: 0px 0px 12px #00000090;
 }
+
 .content {
   display: flex;
   align-items: flex-start;
   justify-content: space-evenly;
 }
+
 .onTop {
   position: fixed;
   top: 52px;
@@ -525,6 +490,7 @@ export default {
   background-color: #000000df;
   z-index: 2;
 }
+
 .topColumns {
   margin-left: auto;
   width: 96vw;
@@ -537,12 +503,14 @@ export default {
   max-height: 70vh;
   overflow-y: auto;
 }
+
 .topImage {
   margin-bottom: 1vh;
   padding: 2px;
   aspect-ratio: 1/1;
   object-fit: contain;
 }
+
 .notification {
   background-color: var(--bg-color);
   position: relative;
@@ -551,11 +519,13 @@ export default {
   border-color: #4c4329;
   border-width: 2px;
 }
+
 .nopadding {
   padding: 0.25rem;
   padding-left: 0.1rem;
   padding-right: 0.1rem;
 }
+
 .scrolling {
   display: flex;
   flex-direction: row;
@@ -565,11 +535,13 @@ export default {
   scroll-behavior: smooth;
   overflow-y: hidden;
 }
+
 .buttonBorder {
   border: solid;
   border-color: #f14668;
   border-width: 1px;
 }
+
 .getsBiggerMin {
   width: 7vmin;
   height: 7vmin;
@@ -619,6 +591,7 @@ export default {
   min-width: 60px;
   max-width: 100px;
 }
+
 @media screen and (min-width: 768px) {
   .getsBiggerMax {
     width: 10vmin;
@@ -637,6 +610,7 @@ export default {
     -webkit-filter: brightness(0.6);
     transform: scale(0.9);
   }
+
   to {
     filter: brightness(1);
     -webkit-filter: brightness(1);
@@ -649,6 +623,7 @@ export default {
   animation-duration: 195ms;
   animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
+
 .lowBrightness {
   transform: scale(0.9);
   filter: brightness(0.6);
diff --git a/components/pictos/sidebar.vue b/components/pictos/sidebar.vue
index 0ef27ab4..86508fd8 100644
--- a/components/pictos/sidebar.vue
+++ b/components/pictos/sidebar.vue
@@ -1,15 +1,9 @@
 <template>
   <div class="vertical smallPadding">
-    <b-button
-      v-if="$route.query.sidebarPictoId != $store.getters.getSidebarId"
-      icon-left="close"
-      expanded
-      class="is-primary"
-      @click="returnWithoutDelete()"
-    />
+    <b-button v-if="$route.query.sidebarPictoId != $store.getters.getSidebarId" icon-left="close" expanded
+      class="is-primary" @click="returnWithoutDelete()" />
     <div class="columns is-multiline is-mobile" style="padding: 5%">
-      <picto
-        class="
+      <picto class="
           column
           is-full-mobile
           is-full-tablet
@@ -17,13 +11,8 @@
           is-half-widescreen
           is-half-fullhd
           centeredImage
-        "
-        v-for="(picto, index) in pictos"
-        :key="index"
-        :picto="picto"
-        :publicMode="publicMode"
-        :sidebarMode="true"
-      ></picto>
+        " v-for="(picto, index) in pictos" :key="index" :picto="picto" :publicMode="publicMode" :sidebarMode="true">
+      </picto>
       <div class="column is-full" style="padding: 2rem"></div>
     </div>
   </div>
@@ -63,7 +52,7 @@ export default {
         .findIndex((picto) => picto.collection);
       if (prevSidebarPictoIndex == -1) {
         if (this.publicMode) {
-          this.$router.push("/public/");
+          this.$router.push("/");
         } else {
           if (this.$store.getters.getSidebarId) {
             this.$router.push({
@@ -108,10 +97,12 @@ export default {
 .smallPadding {
   padding: 5%;
 }
+
 .centeredImage {
   align-items: center;
   justify-content: center;
 }
+
 .vertical {
   overflow-y: scroll;
   overflow-x: hidden;