feat: share button

src/components/commons/ShareButton.vue

@@ -1,50 +1,86 @@
 <script setup>
     import { computed, ref } from 'vue';
 
-    const link = computed(() => {
-        return window.location.href;
-    });
-
-    const copied = ref(false);
-    function copy() {
-        navigator.clipboard.writeText(link.value);
-        copied.value = true;
-        setTimeout(() => {
-            copied.value = false;
-        }, 3000);
-    }
+    const isLinkCopied = ref(false);
+
+    /**
+     * Copy the current widget URL to the clipboard (or use native share on mobile)
+     * to share the current search state, which is fully encoded in the URL.
+     */
+    const shareSearch = async () => {
+        const url = window.location.href;
+
+        if (navigator.share) {
+            try {
+                await navigator.share({ url });
+            } catch (e) {
+                // user cancelled the native share sheet, do nothing
+            }
+            return;
+        }
+
+        try {
+            await navigator.clipboard.writeText(url);
+            isLinkCopied.value = true;
+            setTimeout(() => {
+                isLinkCopied.value = false;
+            }, 2000);
+        } catch (e) {
+            console.error('Failed to copy share link', e);
+        }
+    };
 </script>
 
 <template>
-    <div class="row justify-content-center p-3">
-        <div
-            class="col-12 col-lg-12 col-md-6 d-flex justify-content-center align-items-center"
-        >
-            <label for="shareButton" class="mb-0 me-2 fw-bold">{{
-                $t('shareDiscover')
-            }}</label>
-            <button
-                class="btn btn-outline-secondary"
-                id="shareButton"
-                @click="copy"
-                aria-label="Share button"
-            >
-                <div v-if="copied">
-                    <i class="bi bi-check2-circle"></i> {{ $t('copied') }}!
-                </div>
-                <div v-else>
-                    <i class="bi bi-link-45deg"></i> {{ $t('copy') }}
-                </div>
-            </button>
-        </div>
-    </div>
+    <button
+        class="share-button"
+        :class="{ copied: isLinkCopied }"
+        :aria-label="$t('share.share')"
+        @click.stop="shareSearch"
+    >
+        <i :class="isLinkCopied ? 'bi bi-check2' : 'bi bi-share'"></i>
+        <span class="share-label">
+            {{ isLinkCopied ? $t('copied') : $t('share') }}
+        </span>
+    </button>
+    <button
+        v-if="hasExpandableContent"
+        class="expand-toggle"
+        :class="{ rotated: isFooterExpanded }"
+    >
+        <i class="bi bi-chevron-up"></i>
+    </button>
 </template>
 
 <style>
-    #shareButton {
-        margin-left: 0.5em;
+    .share-button {
+        background: none;
+        border: 1px solid #bdc3c7;
+        border-radius: 10px;
+        color: inherit;
+        cursor: pointer;
+        padding: 4px 10px;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 0.85em;
+        flex-shrink: 0;
+        transition:
+            opacity 0.2s ease,
+            background 0.2s ease;
     }
-    .share_modal {
-        min-width: 400px !important;
+
+    .share-button:hover {
+        opacity: 0.7;
+    }
+
+    @media (max-width: 500px) {
+        .share-label {
+            display: none;
+        }
+
+        .share-button {
+            padding: 4px 8px;
+        }
     }
 </style>

src/components/core/taxonList/TaxonListFooter.vue

@@ -112,6 +112,8 @@
                             {{ connector.getSourceName() }}
                         </a>
                         <strong v-else>{{ connector.getSourceName() }}</strong>
+                        <span class="separator">•</span>
+                        <ShareButton />
                     </span>
                 </div>
                 <button