feat: browser native post share (#714)

components/status/StatusActionsMore.vue

@@ -38,11 +38,27 @@ const toggleTranslation = async () => {
 }
 
 const masto = useMasto()
-const copyLink = async (status: Status) => {
+
+const getPermalinkUrl = (status: Status) => {
   const url = getStatusPermalinkRoute(status)
   if (url)
-    await clipboard.copy(`${location.origin}/${url}`)
+    return `${location.origin}/${url}`
+  return null
 }
+
+const copyLink = async (status: Status) => {
+  const url = getPermalinkUrl(status)
+  if (url)
+    await clipboard.copy(url)
+}
+
+const { share, isSupported: isShareSupported } = useShare()
+const shareLink = async (status: Status) => {
+  const url = getPermalinkUrl(status)
+  if (url)
+    await share({ url })
+}
+
 const deleteStatus = async () => {
   // TODO confirm to delete
   if (process.dev) {
@@ -153,6 +169,14 @@ async function editStatus() {
           @click="copyLink(status)"
         />
 
+        <CommonDropdownItem
+          v-if="isShareSupported"
+          :text="$t('menu.share_post')"
+          icon="i-ri:share-line"
+          :command="command"
+          @click="shareLink(status)"
+        />
+
         <CommonDropdownItem
           v-if="currentUser && (status.account.id === currentUser.account.id || status.mentions.some(m => m.id === currentUser!.account.id))"
           :text="status.muted ? $t('menu.unmute_conversation') : $t('menu.mute_conversation')"

locales/en-GB.json

@@ -119,6 +119,7 @@
     "mute_conversation": "Mute this post",
     "open_in_original_site": "Open in original site",
     "pin_on_profile": "Pin on profile",
+    "share_post": "Share this post",
     "show_untranslated": "Show untranslated",
     "toggle_theme": {
       "dark": "Toggle dark mode",

locales/en-US.json

@@ -122,6 +122,7 @@
     "mute_conversation": "Mute this post",
     "open_in_original_site": "Open in original site",
     "pin_on_profile": "Pin on profile",
+    "share_post": "Share this post",
     "show_untranslated": "Show untranslated",
     "toggle_theme": {
       "dark": "Toggle dark mode",