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

Resolve #10183

CHANGELOG.md

@@ -10,6 +10,14 @@
 You should also include the user name that made the change.
 -->
 
+## 13.x.x (unreleased)
+
+### Improvements
+- クリップ、チャンネルページに共有ボタンを追加
+
+### Bugfixes
+-
+
 ## 13.9.1 (2023/03/03)
 
 ### Bugfixes

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,

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,