feat(front): add showBackButton prop to BaseCard component and update usages in FileShareResult and TextShareResult for improved navigation

front/components/BaseCard.vue

@@ -1,12 +1,29 @@
 <script setup lang="ts">
 const props = defineProps<{
     title?: string
+    showBackButton?: boolean
 }>()
+const router = useRouter()
 </script>
 
 <template>
     <div class="rounded-xl p-5 bg-white/50 backdrop-blur-xl w-full lg:w-200">
-        <div v-if="title" class="text-xl font-normal">{{ title }}</div>
+        <div class="flex flex-row justify-between">
+            <h1 class="text-xl font-normal">{{ title }}</h1>
+            <Button
+                v-if="!!showBackButton"
+                variant="outline"
+                class="bg-white/70"
+                size="icon"
+                @click="
+                    () => {
+                        router.push('/')
+                    }
+                "
+            >
+                <LucideHome />
+            </Button>
+        </div>
         <slot />
     </div>
 </template>

front/components/Result/FileShareResult.vue

@@ -57,7 +57,7 @@ const { copy } = useClipboard()
 </script>
 
 <template>
-    <BaseCard class="flex flex-col gap-3" :title="t('page.result.file.title')">
+    <BaseCard class="flex flex-col gap-3" :title="t('page.result.file.title')" :showBackButton="true">
         <div class="flex flex-col gap-3 items-center">
             <div v-if="data?.length === 1" class="flex flex-col h-30 items-center">
                 <FilePreviewView :value="props?.data?.files?.[0]?.file as File" />
@@ -194,16 +194,6 @@ const { copy } = useClipboard()
                     </div>
                 </div>
             </div>
-            <Button
-                class="w-40 hover:bg-primary/90"
-                @click="
-                    () => {
-                        emit('change', 'input')
-                    }
-                "
-            >
-                {{ t('btn.backToHome') }}
-            </Button>
         </div>
     </BaseCard>
 </template>

front/components/Result/TextShareResult.vue

@@ -42,24 +42,7 @@ const { t } = useI18n()
 </script>
 
 <template>
-    <BaseCard class="flex flex-col gap-3" :title="t('page.result.text.title')">
-        <div class="flex flex-row gap-2">
-            <div class="flex flex-row justify-between w-full">
-                <h2 class="text-lg">{{ t('page.result.text.title') }}</h2>
-                <Button
-                    variant="outline"
-                    class="bg-white/70"
-                    size="icon"
-                    @click="
-                        () => {
-                            emit('change', 'input')
-                        }
-                    "
-                >
-                    <LucideHome />
-                </Button>
-            </div>
-        </div>
+    <BaseCard class="flex flex-col gap-3" :title="t('page.result.text.title')" :showBackButton="true">
         <div class="flex flex-col md:flex-row gap-5 rounded-md p-5 bg-white/20 backdrop-blur-xl w-full">
             <div class="flex flex-col gap-2 flex-1">
                 <div class="text-sm font-semibold">{{ t('page.result.text.info') }}</div>

front/pages/index.vue

@@ -11,7 +11,7 @@ import { isString } from 'lodash-es'
 const route = useRoute()
 const router = useRouter()
 const type = computed(() => route?.query?.type)
-onMounted(() => {
+watchEffect(() => {
     if (!isString(type.value) || type.value?.length === 0) {
         router.push({ query: { type: 'file' }, replace: true })
     }