feat: share list

resources/ts/views/HomeView.vue

@@ -44,9 +44,9 @@ onBeforeRouteUpdate(updateTitle);
                 <dices-icon />
             </button>
         </div>
-        <div class="w-full px-4">
+        <div class="w-full">
             <router-link
-                class="btn btn-lg"
+                class="btn btn-lg px-4"
                 :class="listNameInput.trim().length === 0 ? 'btn-disabled' : ''"
                 :to="`/${listNameInput.trim()}`"
             >

resources/ts/views/ListView.vue

@@ -9,6 +9,7 @@ import {
     CircleCheckBigIcon,
     CheckCheckIcon,
     SearchIcon,
+    Share2Icon
 } from "@lucide/vue";
 const TaskItem = defineAsyncComponent(
     () => import("@/components/TaskItem.vue"),
@@ -19,6 +20,7 @@ import { booleanCookieRef, enumCookieRef } from "@/lib/cookies";
 import { useAlertStore } from "@/stores/alerts";
 import { useI18n } from "vue-i18n";
 import { onBeforeRouteUpdate, useRoute } from "vue-router";
+import { shareLink } from "@/lib/share";
 
 const route = useRoute();
 
@@ -125,6 +127,18 @@ function onChangeSortReverse() {
     reSortTasks();
 }
 
+function onShare() {
+    shareLink(`Tout Doux - ${list.value ?? ''}`, '', `${document.location.href.split('?')[0] ?? ''}?lang=${i18n.locale.value}`)
+        .then((viaShare) => {
+            if (!viaShare) {
+                alertSuccess(i18n.t("alerts.share_clipboard"));
+            }
+        })
+        .catch(() => {
+            alertError(i18n.t("alerts.share_error"))
+        });
+}
+
 function updateTitle() {
     if (list.value !== null) {
         document.title = `Tout Doux - ${list.value} (${completedCount.value.toFixed(0)}/${taskCount.value.toFixed(0)})`
@@ -227,6 +241,11 @@ onBeforeRouteUpdate((to) => {
             </ul>
         </div>
     </div>
+    <div>
+        <button class="btn btn-sm px-4" @click="onShare">
+            <share-2-icon class="inline" :size="16" /> {{ $t('share_button') }}
+        </button>
+    </div>
     <div class="collapse collapse-arrow font-light text-sm">
         <input id="options-dropdown" type="checkbox" />
         <div class="collapse-title">

resources/ts/views/NotFoundView.vue

@@ -15,7 +15,7 @@ onBeforeRouteUpdate(updateTitle);
     <div class="italic text-xl font-extralight mb-4">
         <circle-question-mark-icon class="inline" /> {{ $t('not_found') }}
     </div>
-    <div class="w-full px-4">
-        <router-link to="/" class="btn mb-4">{{ $t('not_found_button') }}</router-link>
+    <div class="w-full">
+        <router-link to="/" class="btn mb-4 px-4">{{ $t('not_found_button') }}</router-link>
     </div>
 </template>