allow to refresh page, set back url

package.json

@@ -22,9 +22,9 @@
     "@googlemaps/js-api-loader": "^1.16.8",
     "@hangtime/grip-connect": "^0.5.10",
     "@mdi/js": "^7.4.47",
-    "@unhead/vue": "^1.11.14",
+    "@unhead/vue": "^1.11.15",
     "@vueuse/core": "^12.3.0",
-    "core-js": "^3.39.0",
+    "core-js": "^3.40.0",
     "firebase": "^11.1.0",
     "ircra": "^2.2.4",
     "js-video-url-parser": "^0.5.1",
@@ -62,12 +62,12 @@
     "jsdom": "^25.0.1",
     "npm-run-all2": "^7.0.2",
     "prettier": "^3.4.2",
-    "rollup-plugin-visualizer": "^5.13.1",
+    "rollup-plugin-visualizer": "^5.14.0",
     "sass": "^1.83.1",
-    "typescript": "^5.7.2",
+    "typescript": "^5.7.3",
     "vite": "^6.0.7",
     "vite-plugin-pwa": "^0.21.1",
-    "vite-plugin-vue-devtools": "^7.6.8",
+    "vite-plugin-vue-devtools": "^7.7.0",
     "vite-plugin-vuetify": "^2.0.4",
     "vitest": "^2.1.8",
     "vue-tsc": "^2.2.0"

src/components/organisms/AppContainer/AppContainer.vue

@@ -1,26 +1,36 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
 import { useAuthenticationStore } from '@/stores/authentication.store'
 
 const { t } = useI18n()
+const router = useRouter()
+
 const { user } = storeToRefs(useAuthenticationStore())
 
 const {
   extension = false,
-  prepend = false,
+  toolbarPrepend = false,
   hideFooter = false
 } = defineProps<{
   extension?: boolean
-  prepend?: boolean
+  toolbarPrepend?: boolean
+  toolbarPrependUrl?: string
   hideFooter?: boolean
 }>()
 </script>
 
 <template>
   <v-app-bar app>
-    <template v-if="prepend" #prepend>
-      <slot name="prepend"></slot>
+    <!--  toolbar prepend  -->
+    <template v-if="toolbarPrepend" #prepend>
+      <slot name="prepend">
+        <router-link v-if="toolbarPrependUrl" :to="toolbarPrependUrl" style="color: inherit">
+          <v-icon>$arrowLeft</v-icon>
+        </router-link>
+        <v-icon v-else @click="router.go(-1)">$arrowLeft</v-icon>
+      </slot>
     </template>
 
     <!--  toolbar titles  -->

src/stores/workouts.store.ts

@@ -124,7 +124,7 @@ export const useWorkoutsStore = defineStore('workouts', () => {
     await userWorkoutsDb.update(workout as IWorkout & { id: string })
   }
 
-  const getWorkoutById = computed(() => (id: string | string[]): Workout | undefined => {
+  const getWorkoutById = (id: string | string[]): Workout | undefined => {
     if (id === 'new') {
       const newWorkout = new Workout()
       newWorkout.addExercise()
@@ -138,7 +138,7 @@ export const useWorkoutsStore = defineStore('workouts', () => {
     if (workoutsCommunity.value.find((workout) => workout.id === id)) {
       return reactive(new Workout(workoutsCommunity.value.find((workout) => workout.id === id)))
     }
-  })
+  }
 
   /**
    * Get the Users hangboards of a certain hangboard / company.

src/views/account/AccountGeneralPage.vue

@@ -4,7 +4,6 @@ import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
 // import { useTheme } from 'vuetify'
 import { useHead } from '@unhead/vue'
-import { useRouter } from 'vue-router'
 import IRCRA from 'ircra'
 import AppContainer from '@/components/organisms/AppContainer/AppContainer.vue'
 import { useAuthenticationStore } from '@/stores/authentication.store'
@@ -26,8 +25,6 @@ const { updateUser } = useAuthenticationStore()
 
 // const theme = useTheme()
 
-const router = useRouter()
-
 const language = [
   {
     title: '简体中文',
@@ -127,11 +124,7 @@ useHead({
 </script>
 
 <template>
-  <app-container prepend>
-    <template #prepend>
-      <v-icon @click="router.go(-1)">$arrowLeft</v-icon>
-    </template>
-
+  <app-container toolbar-prepend toolbar-prepend-url="/account">
     <template #title>
       {{ t('General') }}
     </template>

src/views/account/AccountHangboardsPage.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue'
-import { useRouter } from 'vue-router'
 import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
 import AppContainer from '@/components/organisms/AppContainer/AppContainer.vue'
@@ -45,20 +44,14 @@ const removeHangboard = (index: number) => {
   }
 }
 
-const router = useRouter()
-
 useHead({
   title: 'Hangboards',
   meta: [{ name: 'description', content: '' }]
 })
 </script>
 
 <template>
-  <app-container prepend>
-    <template #prepend>
-      <v-icon @click="router.go(-1)">$arrowLeft</v-icon>
-    </template>
-
+  <app-container toolbar-prepend toolbar-prepend-url="/account">
     <template #title>
       {{ t('Hangboards') }}
     </template>

src/views/account/AccountHelpPage.vue

@@ -1,25 +1,18 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import { useHead } from '@unhead/vue'
-import { useRouter } from 'vue-router'
 import AppContainer from '@/components/organisms/AppContainer/AppContainer.vue'
 
 const { t } = useI18n()
 
-const router = useRouter()
-
 useHead({
   title: 'Help',
   meta: [{ name: 'description', content: '' }]
 })
 </script>
 
 <template>
-  <app-container prepend>
-    <template #prepend>
-      <v-icon @click="router.go(-1)">$arrowLeft</v-icon>
-    </template>
-
+  <app-container toolbar-prepend toolbar-prepend-url="/account">
     <template #title>
       {{ t('Help') }}
     </template>

src/views/account/AccountPrivacyPage.vue

@@ -1,26 +1,19 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue'
-import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 
 import AppContainer from '@/components/organisms/AppContainer/AppContainer.vue'
 
 const { t } = useI18n()
 
-const router = useRouter()
-
 useHead({
   title: 'Terms and Privacy Policy',
   meta: [{ name: 'description', content: '' }]
 })
 </script>
 
 <template>
-  <app-container prepend>
-    <template #prepend>
-      <v-icon @click="router.go(-1)">$arrowLeft</v-icon>
-    </template>
-
+  <app-container toolbar-prepend toolbar-prepend-url="/account">
     <template #title>
       {{ t('Terms and Privacy Policy') }}
     </template>

src/views/account/AccountProfilePage.vue

@@ -90,11 +90,7 @@ useHead({
 </script>
 
 <template>
-  <app-container prepend>
-    <template #prepend>
-      <v-icon @click="router.go(-1)">$arrowLeft</v-icon>
-    </template>
-
+  <app-container toolbar-prepend toolbar-prepend-url="/account">
     <template #title>
       {{ t('Profile') }}
     </template>

src/views/account/AccountSubscriptionPage.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useHead } from '@unhead/vue'
-import { useRouter } from 'vue-router'
 import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
 import { useAuthenticationStore } from '@/stores/authentication.store'
@@ -10,7 +9,6 @@ import { time } from '@/helpers'
 import { usePlayBilling } from '@/composables/usePlayBilling'
 
 const { t } = useI18n()
-const router = useRouter()
 const { user } = storeToRefs(useAuthenticationStore())
 
 const {
@@ -43,10 +41,7 @@ useHead({
 </script>
 
 <template>
-  <app-container prepend>
-    <template #prepend>
-      <v-icon @click="router.go(-1)">$arrowLeft</v-icon>
-    </template>
+  <app-container toolbar-prepend toolbar-prepend-url="/account">
     <template #title>
       {{ t('Subscription') }}
     </template>

src/views/account/AccountWorkoutsPage.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue'
-import { useRouter } from 'vue-router'
 import { onMounted, reactive, computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
@@ -70,20 +69,14 @@ function greet(item: SpeechSynthesisVoice | undefined) {
   }
 }
 
-const router = useRouter()
-
 useHead({
   title: 'Workouts',
   meta: [{ name: 'description', content: '' }]
 })
 </script>
 
 <template>
-  <app-container prepend>
-    <template #prepend>
-      <v-icon @click="router.go(-1)">$arrowLeft</v-icon>
-    </template>
-
+  <app-container toolbar-prepend toolbar-prepend-url="/account">
     <template #title>
       {{ t('Workouts') }}
     </template>

src/views/activity/ActivityNotificationsPage.vue

@@ -3,7 +3,6 @@ import { ref, Ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
 import { useHead } from '@unhead/vue'
-import { useRouter } from 'vue-router'
 
 import { getMessaging, getToken, deleteToken, onMessage, MessagePayload } from 'firebase/messaging'
 import firebaseApp from '@/plugins/firebase'
@@ -15,8 +14,6 @@ const { updateUser } = useAuthenticationStore()
 
 const { user } = storeToRefs(useAuthenticationStore())
 
-const router = useRouter()
-
 const { t } = useI18n()
 
 const currentToken = ref('')
@@ -200,11 +197,7 @@ useHead({
 </script>
 
 <template>
-  <app-container prepend>
-    <template #prepend>
-      <v-icon @click="router.go(-1)">$arrowLeft</v-icon>
-    </template>
-
+  <app-container toolbar-prepend toolbar-prepend-url="/account">
     <template #title>
       {{ t('Notifications') }}
     </template>

src/views/brands/BrandsDetailPage.vue

@@ -2,7 +2,7 @@
 import { computed, ref } from 'vue'
 import { useHead } from '@unhead/vue'
 import { storeToRefs } from 'pinia'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { useUserStore } from '@/stores/user.store'
 import { useRandomImage } from '@/helpers'
@@ -25,9 +25,8 @@ const { online } = storeToRefs(useAppStore())
 
 const { getCompanyByUrlKey, getHangboardByIds } = useUserStore()
 
-// router
+// route
 const route = useRoute()
-const router = useRouter()
 
 const getCompany = computed(() => getCompanyByUrlKey(route.params.id.toString()))
 
@@ -48,11 +47,7 @@ useHead({
 </script>
 
 <template>
-  <app-container prepend>
-    <template #prepend>
-      <v-icon @click="router.push('/brands')">$arrowLeft</v-icon>
-    </template>
-
+  <app-container toolbar-prepend toolbar-prepend-url="/brands">
     <template #title>
       {{
         `${

src/views/brands/BrandsPage.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue'
 import { useI18n } from 'vue-i18n'
-import { useRouter } from 'vue-router'
 import { useUserStore } from '@/stores/user.store'
 import countries from '@/helpers/countries'
 
@@ -12,26 +11,18 @@ const { t } = useI18n()
 
 const { getCompanies } = useUserStore()
 
-const router = useRouter()
-
 useHead({
   title: t('Supported Hangboards'),
   meta: [{ name: 'description', content: '' }]
 })
 </script>
 
 <template>
-  <app-container prepend>
-    <template #prepend>
-      <v-icon @click="router.go(-1)">$arrowLeft</v-icon>
-    </template>
-
+  <app-container toolbar-prepend toolbar-prepend-url="/">
     <template #title>
       {{ t('Supported Hangboards') }}
     </template>
 
-    <template #icons> </template>
-
     <template #default>
       <v-container>
         <v-row>