User share page (#49)

* feat: user qrcode

* QRコードのデザイン改善

* グラデーション変更

* feat: follow-me

---------

Co-authored-by: Esurio <esurio@esurio1673.net>

packages/frontend/src/components/MkQrcode.vue

@@ -4,6 +4,20 @@
 		<div :class="$style.title">
 			<QRCodeVue3
 				:value="qrCode"
+				:qrOptions="{  errorCorrectionLevel: 'H' }"
+				:cornersSquareOptions="{ type: 'extra-rounded' }"
+				:cornersDotOptions="{ type: 'square' }"
+				:dotsOptions="{
+					type: 'rounded',
+					color: '#DEC5E3',
+					gradient: {
+						type: 'linear',
+						rotation: 160,
+						colorStops: [
+							{ offset: 0, color: '#02129B' },
+							{ offset: 1, color: '#9E1FFC' }
+						]
+					}, }"
 			/>
 		</div>
 		<div class="_flexList" style="gap: 0.6rem">

packages/frontend/src/pages/follow-me.vue

@@ -0,0 +1,65 @@
+<template>
+	<div class="follow-me"></div>
+</template>
+
+<script lang="ts" setup>
+import * as os from '@/os';
+import { host as hostRaw } from '@/config';
+import { $i } from '@/account.js';
+import { acct } from '@/filters/user.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
+import { i18n } from '@/i18n.js';
+import * as Misskey from 'cherrypick-js';
+
+const accountUri = new URL(location.href).searchParams.get("acct");
+if (accountUri == null) {
+	throw new Error("Account URI is not specified");
+}
+
+if ($i != null) {
+	const { canceled } = await os.confirm({
+		type: "question",
+		text: i18n.ts.followRequests,
+	});
+
+	if (!canceled) {
+		os.waiting();
+		window.location.href = `/authorize-follow?acct=${accountUri}`;
+	}
+}
+
+const remoteAccountId = await os.inputText({
+	title: i18n.ts.remote,
+});
+
+if (!remoteAccountId.result) {
+	os.waiting();
+	window.location.href = `/authorize-follow?acct=${accountUri}`;
+} else {
+	const remoteAccountInfo = Misskey.acct.parse(remoteAccountId.result);
+
+	if (remoteAccountInfo.host === hostRaw || remoteAccountInfo.host === null) {
+		os.waiting();
+		window.location.href = `/authorize-follow?acct=${remoteAccountInfo.acct}`;
+	} else {
+		os.waiting();
+		fetch(
+			`https://${remoteAccountInfo.host}/.well-known/webfinger?resource=${remoteAccountInfo.username}@${remoteAccountInfo.host}`,
+			{
+				method: "GET",
+			},
+		)
+		.then((responce) => responce.json())
+		.then((data) => {
+			const subscribeUri = data.links.find(
+				(link: { rel: string }) => link.rel === "http://ostatus.org/schema/1.0/subscribe",
+		).template;
+		window.location.href = subscribeUri.replace("{uri}", accountUri.includes("@") ? accountUri: `${accountUri}@${hostRaw}`,);
+		})
+		.catch((_) => {
+			window.location.href = `/@${accountUri}`;
+		});
+	}
+}
+
+</script>

packages/frontend/src/router/definition.ts

@@ -252,6 +252,9 @@ const routes: RouteDef[] = [{
 	path: '/authorize-follow',
 	component: page(() => import('@/pages/follow.vue')),
 	loginRequired: true,
+}, {
+	path: '/follow-me',
+	component: page(() => import('@/pages/follow-me.vue')),
 }, {
 	path: '/share',
 	component: page(() => import('@/pages/share.vue')),

packages/frontend/src/scripts/get-user-menu.ts

@@ -204,7 +204,7 @@ export function getUserMenu(user: Misskey.entities.UserDetailed, router: IRouter
 		icon: 'ti ti-qrcode',
 		text: i18n.ts.getQrCode,
 		action: () => {
-			os.displayQrCode(`https://${user.host ?? host}/@${user.username}`);
+			os.displayQrCode(`https://${host}/follow-me?acct=${user.username}`);
 		},
 	}, ...(user.host != null && user.url != null ? [{
 		icon: 'ti ti-external-link',