feat: share list

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">