enhance(client): add share button to clip and channel page

Resolve #10183

2 files changed, 23 insertions, 1 deletions

diff --git a/packages/frontend/src/pages/channel.vue b/packages/frontend/src/pages/channel.vue
index 6b4fcb32f8..7e9cebbd4d 100644
--- a/packages/frontend/src/pages/channel.vue
+++ b/packages/frontend/src/pages/channel.vue
@@ -47,6 +47,7 @@ import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { deviceKind } from '@/scripts/device-kind';
 import MkNotes from '@/components/MkNotes.vue';
+import { url } from '@/config';
 
 const router = useRouter();
 
@@ -77,6 +78,16 @@ function edit() {
 }
 
 const headerActions = $computed(() => channel && channel.userId ? [{
+	icon: 'ti ti-share',
+	text: i18n.ts.share,
+	handler: async (): Promise<void> => {
+		navigator.share({
+			title: channel.name,
+			text: channel.description,
+			url: `${url}/channels/${channel.id}`,
+		});
+	},
+}, {
 	icon: 'ti ti-settings',
 	text: i18n.ts.edit,
 	handler: edit,
diff --git a/packages/frontend/src/pages/clip.vue b/packages/frontend/src/pages/clip.vue
index d4e8f27005..d66088d33a 100644
--- a/packages/frontend/src/pages/clip.vue
+++ b/packages/frontend/src/pages/clip.vue
@@ -26,6 +26,7 @@ import { $i } from '@/account';
 import { i18n } from '@/i18n';
 import * as os from '@/os';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import { url } from '@/config';
 
 const props = defineProps<{
 	clipId: string,
@@ -82,7 +83,17 @@ const headerActions = $computed(() => clip && isOwned ? [{
 			...result,
 		});
 	},
-}, {
+}, ...(clip.isPublic ? [{
+	icon: 'ti ti-share',
+	text: i18n.ts.share,
+	handler: async (): Promise<void> => {
+		navigator.share({
+			title: clip.name,
+			text: clip.description,
+			url: `${url}/clips/${clip.id}`,
+		});
+	},
+}] : []), {
 	icon: 'ti ti-trash',
 	text: i18n.ts.delete,
 	danger: true,