Feat: QRCode Note Sharing (#45)

* feat: Get Note QRCode

* fix: ボタンの間隔がないのを修正

---------

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

locales/en-US.yml

@@ -1358,6 +1358,7 @@ additionalPermissionsForFlash: "Allow to add permission to Play"
 thisFlashRequiresTheFollowingPermissions: "This Play requires the following permissions"
 doYouWantToAllowThisPlayToAccessYourAccount: "Do you want to allow this Play to access your account?"
 translateProfile: "Translate profile"
+getQrCode: "Get QR code"
 _nsfwOpenBehavior:
   click: "Click to open"
   doubleClick: "Double click to open"

locales/index.d.ts

@@ -4776,7 +4776,7 @@ export interface Locale extends ILocale {
      */
     "events": string;
     /**
-     * 倒叙
+     * 終了済み
      */
     "reverseChronological": string;
     /**
@@ -5448,7 +5448,7 @@ export interface Locale extends ILocale {
      */
     "showUnreadNotificationsCount": string;
     /**
-     * キャット付きのみ
+     * ネコミミ付きのみ
      */
     "showCatOnly": string;
     /**
@@ -5467,6 +5467,10 @@ export interface Locale extends ILocale {
      * プロフィールを翻訳する
      */
     "translateProfile": string;
+    /**
+     * QRコードを取得
+     */
+    "getQrCode": string;
     "_nsfwOpenBehavior": {
         /**
          * タップして開く
@@ -6252,7 +6256,7 @@ export interface Locale extends ILocale {
          */
         "price": string;
         /**
-         * 可用性
+         * 予約可能
          */
         "availability": string;
         /**
@@ -6264,11 +6268,11 @@ export interface Locale extends ILocale {
          */
         "until": string;
         /**
-         * アベイラビリティ開始
+         * 予約開始
          */
         "availabilityStart": string;
         /**
-         * アベイラビリティ終了
+         * 予約終了
          */
         "availabilityEnd": string;
         /**
@@ -7142,7 +7146,7 @@ export interface Locale extends ILocale {
                  */
                 "title": string;
                 /**
-                 *  名前を 幼女 に設定した
+                 * 名前を 幼女 に設定した
                  */
                 "description": string;
                 /**
@@ -7296,7 +7300,7 @@ export interface Locale extends ILocale {
                  */
                 "title": string;
                 /**
-                 * おはようようじょー！と7回投稿した
+                 * おはようようじょー！と7日投稿した
                  */
                 "description": string;
                 /**
@@ -7306,11 +7310,11 @@ export interface Locale extends ILocale {
             };
             "_ohayoujo30": {
                 /**
-                 * 元気いっぱい
+                 * 笑顔満点
                  */
                 "title": string;
                 /**
-                 * おはようようじょー！と30回投稿した
+                 * おはようようじょー！と30日投稿した
                  */
                 "description": string;
                 /**
@@ -7324,7 +7328,7 @@ export interface Locale extends ILocale {
                  */
                 "title": string;
                 /**
-                 * おはようようじょー！と365回投稿した
+                 * おはようようじょー！と365日投稿した
                  */
                 "description": string;
                 /**
@@ -7524,10 +7528,10 @@ export interface Locale extends ILocale {
              * ドライブ容量
              */
             "driveCapacity": string;
-						/**
-						 * ファイルサイズ上限
-						 */
-						"fileSizeLimit": string;
+            /**
+             * ファイルサイズ上限
+             */
+            "fileSizeLimit": string;
             /**
              * ファイルにNSFWを常に付与
              */
@@ -7580,6 +7584,10 @@ export interface Locale extends ILocale {
              * ノート検索の利用
              */
             "canSearchNotes": string;
+            /**
+             * 高度な検索の利用
+             */
+            "canAdvancedSearchNotes": string;
             /**
              * 翻訳機能の利用
              */
@@ -8158,7 +8166,7 @@ export interface Locale extends ILocale {
          */
         "blockCode": string;
         /**
-         * 複数行のプログラムなどのコードをブロックでシンタックスハイライトします。
+         * 複数行のプログラムなどのコードをブロックでシンタックスハイライトします。いくつかの言語を指定するとその言語に合わせたシンタックスハイライトになります。
          */
         "blockCodeDescription": string;
         /**

locales/ja-JP.yml

@@ -1361,6 +1361,7 @@ additionalPermissionsForFlash: "Playへの追加許可"
 thisFlashRequiresTheFollowingPermissions: "このPlayは以下の権限を要求しています"
 doYouWantToAllowThisPlayToAccessYourAccount: "このPlayによるアカウントへのアクセスを許可しますか？"
 translateProfile: "プロフィールを翻訳する"
+getQrCode: "QRコードを取得"
 
 _nsfwOpenBehavior:
   click: "タップして開く"

packages/frontend/package.json

@@ -59,6 +59,8 @@
 		"photoswipe": "5.4.3",
 		"prismjs": "1.29.0",
 		"punycode": "2.3.1",
+		"qrcode": "1.5.3",
+		"qrcode-vue3": "^1.6.8",
 		"rollup": "4.17.2",
 		"sanitize-html": "2.13.0",
 		"sass": "1.76.0",
@@ -110,6 +112,7 @@
 		"@types/node": "20.12.7",
 		"@types/prismjs": "^1.26.0",
 		"@types/punycode": "2.1.4",
+		"@types/qrcode": "1.5.5",
 		"@types/sanitize-html": "2.11.0",
 		"@types/seedrandom": "3.0.8",
 		"@types/throttle-debounce": "5.0.2",

packages/frontend/src/components/MkQrcode.vue

@@ -0,0 +1,88 @@
+<template>
+<MkModal ref="modal" :zPriority="'middle'" @closed="$emit('closed')">
+	<div :class="$style.root">
+		<div :class="$style.title">
+			<QRCodeVue3
+				:value="qrCode"
+			/>
+		</div>
+		<div class="_flexList" style="gap: 0.6rem">
+			<MkButton :class="$style.gotIt" primary full @click="gotIt()">
+				{{
+					i18n.ts.gotIt
+				}}
+			</MkButton>
+			<MkButton :class="$style.copyLink" full @click="copyLink()">
+				{{
+					i18n.ts.copyLink
+				}}
+			</MkButton>
+		</div>
+	</div>
+</MkModal>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef } from 'vue';
+import QRCodeVue3 from 'qrcode-vue3';
+import MkModal from '@/components/MkModal.vue';
+import MkButton from '@/components/MkButton.vue';
+import { i18n } from '@/i18n';
+import * as os from '@/os';
+import copyToClipboard from '@/scripts/copy-to-clipboard';
+
+const props = defineProps<{
+	qrCode: string;
+}>();
+
+const modal = shallowRef<InstanceType<typeof MkModal>>();
+
+const gotIt = () => {
+	modal.value.close();
+};
+
+const copyLink = () => {
+	copyToClipboard(props.qrCode);
+	os.success();
+};
+</script>
+
+<style lang="scss" module>
+.root {
+	margin: auto;
+	position: relative;
+	padding: 32px;
+	min-width: 320px;
+	max-width: 480px;
+	box-sizing: border-box;
+	text-align: center;
+	background: var(--panel);
+	border-radius: var(--radius);
+
+	> img {
+		border-radius: 10px;
+		max-height: 100%;
+		max-width: 100%;
+	}
+}
+
+.title {
+	font-weight: bold;
+
+	> p {
+		margin: 0;
+	}
+}
+
+.time {
+	font-size: 0.8rem;
+}
+
+.gotIt {
+	margin: 8px 0 0 0;
+}
+
+.copyLink {
+	margin: 8px 0 0 0;
+}
+</style>

packages/frontend/src/os.ts

@@ -22,6 +22,7 @@ import MkPasswordDialog from '@/components/MkPasswordDialog.vue';
 import MkEmojiPickerDialog from '@/components/MkEmojiPickerDialog.vue';
 import MkPopupMenu from '@/components/MkPopupMenu.vue';
 import MkContextMenu from '@/components/MkContextMenu.vue';
+import MkQrcode from '@/components/MkQrcode.vue';
 import { MenuItem } from '@/types/menu.js';
 import copyToClipboard from '@/scripts/copy-to-clipboard.js';
 import { showMovedDialog } from '@/scripts/show-moved-dialog.js';
@@ -692,3 +693,22 @@ export function checkExistence(fileData: ArrayBuffer): Promise<any> {
 		});
 	});
 }*/
+
+export async function displayQrCode(qrCode: string) {
+	(
+		await new Promise<(() => void ) | undefined>((resolve) => {
+			let dispose: (() => void ) | undefined;
+			popup(
+				MkQrcode,
+				{ qrCode },
+				{
+					closed: () => {
+						resolve(dispose);
+					},
+				},
+			).then((res) =>{
+				dispose = res.dispose;
+			});
+		})
+	)?.();
+}

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

@@ -434,6 +434,13 @@ export function getNoteMenu(props: {
 				text: i18n.ts.pin,
 				action: () => togglePin(true),
 			} : undefined,
+			{
+				icon: 'ti ti-qrcode',
+				text: i18n.ts.getQrCode,
+				action: () => {
+					os.displayQrCode(`${url}/notes/${appearNote.id}`);
+				}
+			},
 			{
 				type: 'parent' as const,
 				icon: 'ti ti-note',