Some work on the popup

Some more work on the modal

Some more work done

Some initial work on adding the QR code

Some more changes

Done

locales/en-US.yml

@@ -1139,6 +1139,7 @@ confirm: "Confirm"
 importZip: "Import ZIP"
 exportZip: "Export ZIP"
 emojiPackCreator: "Emoji pack creator"
+getQrCode: "Get QR code"
 
 _sensitiveMediaDetection:
   description: "Reduces the effort of server moderation through automatically recognizing

locales/fr-FR.yml

@@ -932,6 +932,8 @@ colored: "Coloré"
 label: "Étiquette"
 localOnly: "Local seulement"
 account: "Comptes"
+getQrCode: "Obtenir le code QR"
+
 _emailUnavailable:
   used: "Non disponible"
   format: "Le format de cette adresse de courriel est invalide"

packages/client/package.json

@@ -25,6 +25,7 @@
 		"@types/katex": "0.16.2",
 		"@types/matter-js": "0.19.0",
 		"@types/punycode": "2.1.0",
+		"@types/qrcode": "1.5.1",
 		"@types/seedrandom": "3.0.5",
 		"@types/throttle-debounce": "5.0.0",
 		"@types/tinycolor2": "1.4.3",
@@ -61,14 +62,18 @@
 		"insert-text-at-cursor": "0.3.0",
 		"json5": "2.2.3",
 		"katex": "0.16.8",
+		"long": "^5.2.3",
 		"matter-js": "0.19.0",
 		"mfm-js": "0.23.3",
+		"multer": "1.4.4-lts.1",
 		"paralint": "^1.2.1",
 		"photoswipe": "5.3.8",
 		"prettier": "3.0.2",
 		"prettier-plugin-vue": "1.1.6",
 		"prismjs": "1.29.0",
 		"punycode": "2.3.0",
+		"qrcode": "1.5.3",
+		"qrcode-vue3": "^1.6.8",
 		"rndstr": "1.0.0",
 		"rollup": "3.28.0",
 		"s-age": "1.1.2",

packages/client/src/components/FfQrCode.vue

@@ -0,0 +1,70 @@
+<template>
+	<MkModal ref="modal" :z-priority="'middle'" @closed="$emit('closed')">
+		<div :class="$style.root">
+			<div :class="$style.title">
+				<QRCodeVue3
+          :value="qrCode"
+        />
+			</div>
+			<MkButton :class="$style.gotIt" primary full @click="gotIt()">{{
+				i18n.ts.gotIt
+			}}</MkButton>
+		</div>
+	</MkModal>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef } from "vue";
+import MkModal from "@/components/MkModal.vue";
+import MkButton from "@/components/MkButton.vue";
+import { i18n } from "@/i18n";
+import QRCodeVue3 from "qrcode-vue3";
+
+// const profileUrl = window.location.href;
+
+const props = defineProps<{
+	qrCode: string
+}>();
+
+const modal = shallowRef<InstanceType<typeof MkModal>>();
+
+const gotIt = () => {
+	modal.value.close();
+};
+</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;
+}
+</style>

packages/client/src/os.ts

@@ -9,6 +9,7 @@ import MkPostFormDialog from "@/components/MkPostFormDialog.vue";
 import MkWaitingDialog from "@/components/MkWaitingDialog.vue";
 import MkToast from "@/components/MkToast.vue";
 import MkDialog from "@/components/MkDialog.vue";
+import FfQrCode from "@/components/FfQrCode.vue";
 import { MenuItem } from "@/types/menu";
 import { $i } from "@/account";
 import { i18n } from "./i18n";
@@ -926,6 +927,19 @@ export function post(props: Record<string, any> = {}) {
 	});
 }
 
+export async function displayQrCode(qrCode: string) {
+	(await new Promise<(() => void) | undefined>((resolve) => {
+		let dispose: (() => void) | undefined;
+		popup(FfQrCode, { qrCode }, {
+			closed: () => {
+				resolve(dispose);
+			}
+		}).then((res) => {
+			dispose = res.dispose
+		})
+	}))?.();
+}
+
 export const deckGlobalEvents = new EventEmitter();
 
 /*

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

@@ -280,6 +280,13 @@ export function getUserMenu(user, router: Router = mainRouter) {
 				os.post({ specified: user });
 			},
 		},
+		{
+			icon: "ph-qr-code ph-bold ph-lg",
+			text: i18n.ts.getQrCode,
+			action: () => {
+				os.displayQrCode(window.location.href)
+			}
+		},
 		meId !== user.id
 			? {
 					type: "link",