From 32b21b1186fad6489d832ed1721cde7685c04fa5 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 25 Aug 2025 07:23:43 +0900
Subject: [PATCH 01/85] wip (qr.show.vue)

---
 locales/index.d.ts                            |  14 ++
 locales/ja-JP.yml                             |   5 +
 packages/frontend/package.json                |   1 +
 .../directives/flip-on-device-orientation.ts  |  44 +++++
 packages/frontend/src/directives/index.ts     |   2 +
 packages/frontend/src/pages/qr.read.vue       |  21 ++
 packages/frontend/src/pages/qr.show.vue       | 179 ++++++++++++++++++
 packages/frontend/src/pages/qr.vue            |  44 +++++
 packages/frontend/src/router.definition.ts    |   4 +
 pnpm-lock.yaml                                |  16 ++
 10 files changed, 330 insertions(+)
 create mode 100644 packages/frontend/src/directives/flip-on-device-orientation.ts
 create mode 100644 packages/frontend/src/pages/qr.read.vue
 create mode 100644 packages/frontend/src/pages/qr.show.vue
 create mode 100644 packages/frontend/src/pages/qr.vue

diff --git a/locales/index.d.ts b/locales/index.d.ts
index c31a3f4e83..2040d55628 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -12548,6 +12548,20 @@ export interface Locale extends ILocale {
          */
         "listDrafts": string;
     };
+    /**
+     * 二次元コード
+     */
+    "qr": string;
+    "_qr": {
+        /**
+         * 表示
+         */
+        "showTabTitle": string;
+        /**
+         * 読み取る
+         */
+        "readTabTitle": string;
+    };
 }
 declare const locales: {
     [lang: string]: Locale;
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 522f53ce4d..cf26446a4d 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -3359,3 +3359,8 @@ _drafts:
   restoreFromDraft: "下書きから復元"
   restore: "復元"
   listDrafts: "下書き一覧"
+
+qr: 二次元コード
+_qr:
+  showTabTitle: "表示"
+  readTabTitle: "読み取る"
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 952af75d97..682429baad 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -63,6 +63,7 @@
 		"misskey-reversi": "workspace:*",
 		"photoswipe": "5.4.4",
 		"punycode.js": "2.3.1",
+		"qr-code-styling": "1.9.2",
 		"rollup": "4.48.0",
 		"sanitize-html": "2.17.0",
 		"sass": "1.90.0",
diff --git a/packages/frontend/src/directives/flip-on-device-orientation.ts b/packages/frontend/src/directives/flip-on-device-orientation.ts
new file mode 100644
index 0000000000..767d42a480
--- /dev/null
+++ b/packages/frontend/src/directives/flip-on-device-orientation.ts
@@ -0,0 +1,44 @@
+import type { Directive } from 'vue';
+
+let initialized = false;
+let styleEl: HTMLStyleElement | null = null;
+const elements = new Set<HTMLElement>();
+const className = '_flipOnDeviceOrientation';
+const variableName = `--flip_on_device_orientation_transform`;
+
+function handleOrientationChange() {
+	const isUpsideDown = window.screen.orientation.type === 'landscape-secondary';
+	const transform = isUpsideDown ? 'scale(-1, -1)' : '';
+	window.document.body.style.setProperty(variableName, transform);
+}
+
+function registerListener() {
+	if (!initialized) {
+		screen.orientation.addEventListener('change', handleOrientationChange);
+		if (!styleEl) {
+			styleEl = window.document.createElement('style');
+			styleEl.textContent = `.${className} { transform: var(${variableName}); }`;
+			window.document.head.appendChild(styleEl);
+		}
+		initialized = true;
+	} else if (window.document.getElementsByClassName(className).length === 0) {
+		screen.orientation.removeEventListener('change', handleOrientationChange);
+		if (styleEl) {
+			window.document.head.removeChild(styleEl);
+			styleEl = null;
+		}
+		initialized = false;
+	}
+}
+
+export default {
+	mounted(el) {
+		registerListener();
+		el.classList.add(className);
+		handleOrientationChange();
+	},
+	unmounted(el) {
+		el.classList.remove(className);
+		registerListener();
+	},
+} as Directive;
diff --git a/packages/frontend/src/directives/index.ts b/packages/frontend/src/directives/index.ts
index 9555045afe..c6948d8c06 100644
--- a/packages/frontend/src/directives/index.ts
+++ b/packages/frontend/src/directives/index.ts
@@ -16,6 +16,7 @@ import clickAnime from './click-anime.js';
 import panel from './panel.js';
 import adaptiveBorder from './adaptive-border.js';
 import adaptiveBg from './adaptive-bg.js';
+import flipOnDeviceOrientation from './flip-on-device-orientation.js';
 
 export default function(app: App) {
 	for (const [key, value] of Object.entries(directives)) {
@@ -36,4 +37,5 @@ export const directives = {
 	'panel': panel,
 	'adaptive-border': adaptiveBorder,
 	'adaptive-bg': adaptiveBg,
+	'flip-on-device-orientation': flipOnDeviceOrientation,
 };
diff --git a/packages/frontend/src/pages/qr.read.vue b/packages/frontend/src/pages/qr.read.vue
new file mode 100644
index 0000000000..5cf8c6dee1
--- /dev/null
+++ b/packages/frontend/src/pages/qr.read.vue
@@ -0,0 +1,21 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div :class="$style.root">
+	TODO
+</div>
+</template>
+
+<script lang="ts" setup>
+import { ensureSignin } from '@/i';
+
+const $i = ensureSignin();
+</script>
+
+<style lang="scss" module>
+.root {
+}
+</style>
diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
new file mode 100644
index 0000000000..75544c0ce1
--- /dev/null
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -0,0 +1,179 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div :class="$style.root" :style="{ backgroundColor: bgColor }">
+	<div :class="$style.content" class="_spacer" :style="{ '--MI_SPACER-w': '512px' }">
+		<div :class="$style.qrOuter">
+			<div v-flip-on-device-orientation ref="qrCodeEl" :class="$style.qrInner"></div>
+		</div>
+		<div :class="$style.user">
+			<MkAvatar v-flip-on-device-orientation :class="$style.avatar" :user="$i" :indicator="false"/>
+			<div :class="$style.names">
+				<div v-flip-on-device-orientation :class="$style.username"><MkCondensedLine :minScale="2 / 3">@{{ $i.username }}@{{ host }}</MkCondensedLine></div>
+				<div v-flip-on-device-orientation :class="$style.name"><MkCondensedLine :minScale="2 / 3">{{ userName($i) }}</MkCondensedLine></div>
+			</div>
+		</div>
+		<img v-flip-on-device-orientation :class="$style.logo" :src="misskeysvg" alt="Misskey Logo"/>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { extractAvgColorFromBlurhash } from '@@/js/extract-avg-color-from-blurhash';
+import tinycolor from 'tinycolor2';
+import QRCodeStyling from 'qr-code-styling';
+import { computed, ref, watch } from 'vue';
+import { host } from '@@/js/config.js';
+import { instance } from '@/instance';
+import { ensureSignin } from '@/i';
+import { userPage, userName } from '@/filters/user';
+import misskeysvg from '/client-assets/misskey.svg';
+
+const $i = ensureSignin();
+
+const qrCodeEl = ref<HTMLDivElement | null>(null);
+
+const avatarColor = computed(() => tinycolor(
+	$i.avatarBlurhash ?
+		extractAvgColorFromBlurhash($i.avatarBlurhash)
+		: instance.themeColor
+		?? '#86b300',
+));
+const avatarHsl = computed(() => avatarColor.value.toHsl());
+const bgColor = tinycolor(`hsl(${avatarHsl.value.h}, 60, 46)`).toRgbString();
+
+watch([qrCodeEl, avatarHsl], () => {
+	const qrCodeInstance = new QRCodeStyling({
+		width: 512,
+		height: 512,
+		margin: 40,
+		type: 'canvas',
+		data: userPage($i, undefined, true),
+		image: instance.iconUrl ?? '/favicon.ico',
+		qrOptions: {
+			typeNumber: 0,
+			mode: 'Byte',
+			errorCorrectionLevel: 'H',
+		},
+		imageOptions: {
+			hideBackgroundDots: true,
+			imageSize: 0.3,
+			margin: 8,
+			crossOrigin: 'anonymous',
+		},
+		dotsOptions: {
+			color: tinycolor(`hsl(${avatarHsl.value.h}, 100, 18)`).toRgbString(),
+			gradient: {
+				type: 'linear',
+				rotation: 1, // radian
+				colorStops: [
+					{ offset: 0, color: tinycolor(`hsl(${avatarHsl.value.h}, 100, 6)`).toRgbString() },
+					{ offset: 0.5, color: tinycolor(`hsl(${avatarHsl.value.h}, 100, 18)`).toRgbString() },
+					{ offset: 1, color: tinycolor(`hsl(${avatarHsl.value.h}, 100, 25)`).toRgbString() },
+				],
+			},
+			type: 'classy-rounded',
+		},
+		backgroundOptions: {
+			color: tinycolor(`hsl(${avatarHsl.value.h}, 100, 97)`).toRgbString(),
+		},
+	});
+
+	if (qrCodeEl.value != null) {
+		qrCodeInstance.append(qrCodeEl.value);
+	}
+}, { immediate: true });
+
+</script>
+
+<style lang="scss" module>
+.root {
+	margin-top: calc( -1 * var(--MI-stickyTop) );
+  padding-top: var(--MI-stickyTop);
+	height: calc( 100dvh - var(--MI-stickyTop) - var(--MI-stickyBottom) );
+}
+
+.content {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	margin: 0 auto;
+}
+
+.qrOuter {
+	display: flex;
+}
+
+.qrInner {
+	width: 100%;
+	max-height: 40dvh;
+	margin: 5dvh auto 2dvh;
+
+	> svg,
+	> canvas {
+		max-width: 100%;
+		max-height: 100%;
+	}
+}
+
+$avatarSize: 58px;
+
+.user {
+	display: flex;
+	margin: 2dvh auto;
+	justify-content: center;
+	align-items: center;
+	overflow: clip;
+	width: fit-content;
+	max-width: 100%;
+}
+
+.avatar {
+	width: $avatarSize;
+	height: $avatarSize;
+	margin-right: 8px;
+}
+
+.names {
+	display: flex;
+	font-weight: bold;
+	flex-direction: column;
+	justify-content: center;
+	align-items: start;
+	margin-top: -4px;
+	max-width: 100%;
+	overflow: hidden;
+}
+
+.name {
+	display: inline-block;
+	color: #fff;
+	font-size: 20px;
+	line-height: 24px;
+	width: fit-content;
+	max-width: calc(100% - 16px);
+	overflow: hidden;
+	padding-right: 16px;
+	mask-image: linear-gradient(90deg,#000,#000 calc(100% - 16px),#0000);
+}
+
+.username {
+	display: inline-block;
+	color: rgba(255, 255, 255, 0.7);
+	font-size: 14px;
+	line-height: 16px;
+	width: fit-content;
+	max-width: calc(100% - 16px);
+	overflow: hidden;
+	padding-right: 16px;
+	mask-image: linear-gradient(90deg,#000,#000 calc(100% - 16px),#0000);
+}
+
+.logo {
+	width: 30%;
+	margin: 2dvh auto 0;
+}
+</style>
diff --git a/packages/frontend/src/pages/qr.vue b/packages/frontend/src/pages/qr.vue
new file mode 100644
index 0000000000..123534ac2b
--- /dev/null
+++ b/packages/frontend/src/pages/qr.vue
@@ -0,0 +1,44 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<PageWithHeader v-model:tab="tab" :tabs="headerTabs" :swipable="true" :style="{ overflow: tab === 'show' ? 'clip' : undefined }">
+	<MkQrShow v-if="tab === 'show'"/>
+	<MkQrRead v-else-if="tab === 'read'"/>
+	<MkError v-else-if="error" :error="error"/>
+	<MkLoading v-else/>
+</PageWithHeader>
+</template>
+
+<script lang="ts" setup>
+import { defineAsyncComponent, ref, shallowRef } from 'vue';
+import { definePage } from '@/page.js';
+import { i18n } from '@/i18n.js';
+import { ensureSignin } from '@/i';
+
+// router definitionでloginRequiredが設定されているためエラーハンドリングしない
+const $i = ensureSignin();
+
+const tab = ref<'read' | 'show'>('show');
+const error = ref<any>(null);
+
+const MkQrShow = defineAsyncComponent(() => import('./qr.show.vue'));
+const MkQrRead = defineAsyncComponent(() => import('./qr.read.vue'));
+
+const headerTabs = [{
+	key: 'show',
+	title: i18n.ts._qr.showTabTitle,
+	icon: 'ti ti-qrcode',
+}, {
+	key: 'read',
+	title: i18n.ts._qr.readTabTitle,
+	icon: 'ti ti-scan',
+}];
+
+definePage(() => ({
+	title: i18n.ts.qr,
+	icon: 'ti ti-qrcode',
+}));
+</script>
diff --git a/packages/frontend/src/router.definition.ts b/packages/frontend/src/router.definition.ts
index e25e0fe161..d59c9d1c6f 100644
--- a/packages/frontend/src/router.definition.ts
+++ b/packages/frontend/src/router.definition.ts
@@ -590,6 +590,10 @@ export const ROUTE_DEF = [{
 	path: '/reversi/g/:gameId',
 	component: page(() => import('@/pages/reversi/game.vue')),
 	loginRequired: false,
+}, {
+	path: '/qr',
+	component: page(() => import('@/pages/qr.vue')),
+	loginRequired: true,
 }, {
 	path: '/debug',
 	component: page(() => import('@/pages/debug.vue')),
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 66f42b70e3..40c660ce0a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -844,6 +844,9 @@ importers:
       punycode.js:
         specifier: 2.3.1
         version: 2.3.1
+      qr-code-styling:
+        specifier: 1.9.2
+        version: 1.9.2
       rollup:
         specifier: 4.48.0
         version: 4.48.0
@@ -9508,6 +9511,13 @@ packages:
     resolution: {integrity: sha512-pMpnA0qRdFp32b1sJl1wOJNxZLQ2cbQx+k6tjNtZ8CpvVhNqEPRgivZ2WOUev2YMajecdH7ctUPDvEe87nariQ==}
     engines: {node: '>=6.0.0'}
 
+  qr-code-styling@1.9.2:
+    resolution: {integrity: sha512-RgJaZJ1/RrXJ6N0j7a+pdw3zMBmzZU4VN2dtAZf8ZggCfRB5stEQ3IoDNGaNhYY3nnZKYlYSLl5YkfWN5dPutg==}
+    engines: {node: '>=18.18.0'}
+
+  qrcode-generator@1.5.2:
+    resolution: {integrity: sha512-pItrW0Z9HnDBnFmgiNrY1uxRdri32Uh9EjNYLPVC2zZ3ZRIIEqBoDgm4DkvDwNNDHTK7FNkmr8zAa77BYc9xNw==}
+
   qrcode@1.5.4:
     resolution: {integrity: sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==}
     engines: {node: '>=10.13.0'}
@@ -21080,6 +21090,12 @@ snapshots:
 
   pvutils@1.1.3: {}
 
+  qr-code-styling@1.9.2:
+    dependencies:
+      qrcode-generator: 1.5.2
+
+  qrcode-generator@1.5.2: {}
+
   qrcode@1.5.4:
     dependencies:
       dijkstrajs: 1.0.2

From 926cd832c6de92f45c58b18b4695d9ae6b70c40d Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 25 Aug 2025 07:28:02 +0900
Subject: [PATCH 02/85] added to navbar

---
 packages/frontend/src/navbar.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/frontend/src/navbar.ts b/packages/frontend/src/navbar.ts
index c0fe0f2b85..1cd7f0a3e0 100644
--- a/packages/frontend/src/navbar.ts
+++ b/packages/frontend/src/navbar.ts
@@ -15,6 +15,12 @@ import { i18n } from '@/i18n.js';
 import { unisonReload } from '@/utility/unison-reload.js';
 
 export const navbarItemDef = reactive({
+	qr: {
+		title: i18n.ts.qr,
+		icon: 'ti ti-qrcode',
+		show: computed(() => $i != null),
+		to: '/qr',
+	},
 	notifications: {
 		title: i18n.ts.notifications,
 		icon: 'ti ti-bell',

From 9c9e6c9ca9090cf8461b0e1320074115d751e5ed Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 25 Aug 2025 08:09:08 +0900
Subject: [PATCH 03/85] qr.show.vue

---
 locales/index.d.ts                      |  8 +++
 locales/ja-JP.yml                       |  2 +
 packages/frontend/src/pages/qr.read.vue |  1 +
 packages/frontend/src/pages/qr.show.vue | 71 ++++++++++++++++++-------
 4 files changed, 63 insertions(+), 19 deletions(-)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 2040d55628..20735c9e66 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -12561,6 +12561,14 @@ export interface Locale extends ILocale {
          * 読み取る
          */
         "readTabTitle": string;
+        /**
+         * {name} {acct}
+         */
+        "shareTitle": ParameterizedString<"name" | "acct">;
+        /**
+         * Fediverseで私をフォローしてください！
+         */
+        "shareText": string;
     };
 }
 declare const locales: {
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index cf26446a4d..6b591227f0 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -3364,3 +3364,5 @@ qr: 二次元コード
 _qr:
   showTabTitle: "表示"
   readTabTitle: "読み取る"
+  shareTitle: "{name} {acct}"
+  shareText: "Fediverseで私をフォローしてください！"
diff --git a/packages/frontend/src/pages/qr.read.vue b/packages/frontend/src/pages/qr.read.vue
index 5cf8c6dee1..a4b8aaad1c 100644
--- a/packages/frontend/src/pages/qr.read.vue
+++ b/packages/frontend/src/pages/qr.read.vue
@@ -17,5 +17,6 @@ const $i = ensureSignin();
 
 <style lang="scss" module>
 .root {
+	padding: 16px;
 }
 </style>
diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index 75544c0ce1..94874717d9 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -5,35 +5,51 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div :class="$style.root" :style="{ backgroundColor: bgColor }">
-	<div :class="$style.content" class="_spacer" :style="{ '--MI_SPACER-w': '512px' }">
-		<div :class="$style.qrOuter">
-			<div v-flip-on-device-orientation ref="qrCodeEl" :class="$style.qrInner"></div>
-		</div>
-		<div :class="$style.user">
-			<MkAvatar v-flip-on-device-orientation :class="$style.avatar" :user="$i" :indicator="false"/>
-			<div :class="$style.names">
-				<div v-flip-on-device-orientation :class="$style.username"><MkCondensedLine :minScale="2 / 3">@{{ $i.username }}@{{ host }}</MkCondensedLine></div>
-				<div v-flip-on-device-orientation :class="$style.name"><MkCondensedLine :minScale="2 / 3">{{ userName($i) }}</MkCondensedLine></div>
+	<MkAnimBg style="position: absolute; top: 0;" :scale="1.5" />
+	<div :class="$style.fg">
+		<div
+			:class="$style.content" class="_spacer"
+			@click="share"
+			:style="{
+				'--MI_SPACER-w': '512px',
+				'cursor': canShare ? 'pointer' : 'default',
+			}"
+		>
+			<div :class="$style.qrOuter">
+				<div v-flip-on-device-orientation ref="qrCodeEl" :class="$style.qrInner"></div>
 			</div>
+			<div :class="$style.user">
+				<MkAvatar v-flip-on-device-orientation :class="$style.avatar" :user="$i" :indicator="false"/>
+				<div :class="$style.names">
+					<div v-flip-on-device-orientation :class="$style.username"><MkCondensedLine :minScale="2 / 3">{{ acct }}</MkCondensedLine></div>
+					<div v-flip-on-device-orientation :class="$style.name"><MkCondensedLine :minScale="2 / 3">{{ userName($i) }}</MkCondensedLine></div>
+				</div>
+			</div>
+			<img v-flip-on-device-orientation :class="$style.logo" :src="misskeysvg" alt="Misskey Logo"/>
 		</div>
-		<img v-flip-on-device-orientation :class="$style.logo" :src="misskeysvg" alt="Misskey Logo"/>
 	</div>
 </div>
 </template>
 
 <script lang="ts" setup>
-import { extractAvgColorFromBlurhash } from '@@/js/extract-avg-color-from-blurhash';
+import { extractAvgColorFromBlurhash } from '@@/js/extract-avg-color-from-blurhash.js';
 import tinycolor from 'tinycolor2';
 import QRCodeStyling from 'qr-code-styling';
-import { computed, ref, watch } from 'vue';
+import { computed, ref, watch, onMounted } from 'vue';
 import { host } from '@@/js/config.js';
-import { instance } from '@/instance';
-import { ensureSignin } from '@/i';
-import { userPage, userName } from '@/filters/user';
+import { instance } from '@/instance.js';
+import { ensureSignin } from '@/i.js';
+import { userPage, userName } from '@/filters/user.js';
 import misskeysvg from '/client-assets/misskey.svg';
+import MkAnimBg from '@/components/MkAnimBg.vue';
 
 const $i = ensureSignin();
 
+const acct = computed(() => `@${$i.username}@${host}`);
+const url = computed(() => userPage($i, undefined, true));
+
+const canShare = computed(() => navigator.canShare && navigator.canShare({ url: url.value }));
+
 const qrCodeEl = ref<HTMLDivElement | null>(null);
 
 const avatarColor = computed(() => tinycolor(
@@ -45,13 +61,21 @@ const avatarColor = computed(() => tinycolor(
 const avatarHsl = computed(() => avatarColor.value.toHsl());
 const bgColor = tinycolor(`hsl(${avatarHsl.value.h}, 60, 46)`).toRgbString();
 
-watch([qrCodeEl, avatarHsl], () => {
+function share() {
+	return navigator.share?.({
+		title: i18n.tsx._qr.shareTitle({ name: userName($i), acct: acct.value }),
+		text: i18n.tsx._qr.shareText({ name: userName($i), acct: acct.value }),
+		url: url.value,
+	});
+}
+
+watch([qrCodeEl, avatarHsl, url], () => {
 	const qrCodeInstance = new QRCodeStyling({
 		width: 512,
 		height: 512,
 		margin: 40,
 		type: 'canvas',
-		data: userPage($i, undefined, true),
+		data: url.value,
 		image: instance.iconUrl ?? '/favicon.ico',
 		qrOptions: {
 			typeNumber: 0,
@@ -91,11 +115,19 @@ watch([qrCodeEl, avatarHsl], () => {
 
 <style lang="scss" module>
 .root {
+	position: relative;
 	margin-top: calc( -1 * var(--MI-stickyTop) );
   padding-top: var(--MI-stickyTop);
 	height: calc( 100dvh - var(--MI-stickyTop) - var(--MI-stickyBottom) );
 }
 
+.fg {
+	position: absolute;
+	top: var(--MI-stickyTop);
+	width: 100%;
+	height: 100%;
+}
+
 .content {
 	display: flex;
 	flex-direction: column;
@@ -114,8 +146,9 @@ watch([qrCodeEl, avatarHsl], () => {
 
 	> svg,
 	> canvas {
-		max-width: 100%;
-		max-height: 100%;
+		width: 100%;
+		height: 100%;
+		object-fit: contain;
 	}
 }
 

From 18bc7f61244d1bb2ca89c8670fa725786a41646b Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 25 Aug 2025 08:47:42 +0900
Subject: [PATCH 04/85] fix

---
 .../directives/flip-on-device-orientation.ts  | 15 ++++++------
 packages/frontend/src/pages/qr.show.vue       | 24 ++++++++++++-------
 packages/frontend/src/pages/qr.vue            |  2 +-
 3 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/packages/frontend/src/directives/flip-on-device-orientation.ts b/packages/frontend/src/directives/flip-on-device-orientation.ts
index 767d42a480..234ba93c1d 100644
--- a/packages/frontend/src/directives/flip-on-device-orientation.ts
+++ b/packages/frontend/src/directives/flip-on-device-orientation.ts
@@ -2,19 +2,21 @@ import type { Directive } from 'vue';
 
 let initialized = false;
 let styleEl: HTMLStyleElement | null = null;
-const elements = new Set<HTMLElement>();
+const canUseDeviceOrientation = !window.DeviceOrientationEvent;
 const className = '_flipOnDeviceOrientation';
-const variableName = `--flip_on_device_orientation_transform`;
+const variableName = `--MI-flip_on_device_orientation_transform`;
 
-function handleOrientationChange() {
-	const isUpsideDown = window.screen.orientation.type === 'landscape-secondary';
+function handleOrientationChange(event: DeviceOrientationEvent) {
+	const isUpsideDown = event.beta ? event.beta < -15 : false;
 	const transform = isUpsideDown ? 'scale(-1, -1)' : '';
 	window.document.body.style.setProperty(variableName, transform);
 }
 
 function registerListener() {
+	if (!canUseDeviceOrientation) return;
+
 	if (!initialized) {
-		screen.orientation.addEventListener('change', handleOrientationChange);
+		window.addEventListener('deviceorientation', handleOrientationChange);
 		if (!styleEl) {
 			styleEl = window.document.createElement('style');
 			styleEl.textContent = `.${className} { transform: var(${variableName}); }`;
@@ -22,7 +24,7 @@ function registerListener() {
 		}
 		initialized = true;
 	} else if (window.document.getElementsByClassName(className).length === 0) {
-		screen.orientation.removeEventListener('change', handleOrientationChange);
+		window.removeEventListener('deviceorientation', handleOrientationChange);
 		if (styleEl) {
 			window.document.head.removeChild(styleEl);
 			styleEl = null;
@@ -35,7 +37,6 @@ export default {
 	mounted(el) {
 		registerListener();
 		el.classList.add(className);
-		handleOrientationChange();
 	},
 	unmounted(el) {
 		el.classList.remove(className);
diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index 94874717d9..26e0b71b15 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -42,6 +42,8 @@ import { ensureSignin } from '@/i.js';
 import { userPage, userName } from '@/filters/user.js';
 import misskeysvg from '/client-assets/misskey.svg';
 import MkAnimBg from '@/components/MkAnimBg.vue';
+import { getStaticImageUrl } from '@/utility/media-proxy.js';
+import { i18n } from '@/i18n.js';
 
 const $i = ensureSignin();
 
@@ -62,7 +64,8 @@ const avatarHsl = computed(() => avatarColor.value.toHsl());
 const bgColor = tinycolor(`hsl(${avatarHsl.value.h}, 60, 46)`).toRgbString();
 
 function share() {
-	return navigator.share?.({
+	if (!canShare.value) return;
+	return navigator.share({
 		title: i18n.tsx._qr.shareTitle({ name: userName($i), acct: acct.value }),
 		text: i18n.tsx._qr.shareText({ name: userName($i), acct: acct.value }),
 		url: url.value,
@@ -76,7 +79,7 @@ watch([qrCodeEl, avatarHsl, url], () => {
 		margin: 40,
 		type: 'canvas',
 		data: url.value,
-		image: instance.iconUrl ?? '/favicon.ico',
+		image: instance.iconUrl ? getStaticImageUrl(instance.iconUrl) : '/favicon.ico',
 		qrOptions: {
 			typeNumber: 0,
 			mode: 'Byte',
@@ -142,7 +145,7 @@ watch([qrCodeEl, avatarHsl, url], () => {
 .qrInner {
 	width: 100%;
 	max-height: 40dvh;
-	margin: 5dvh auto 2dvh;
+	margin: 58px auto 32px;
 
 	> svg,
 	> canvas {
@@ -156,10 +159,10 @@ $avatarSize: 58px;
 
 .user {
 	display: flex;
-	margin: 2dvh auto;
+	margin: 32px auto;
 	justify-content: center;
 	align-items: center;
-	overflow: clip;
+	overflow: visible;
 	width: fit-content;
 	max-width: 100%;
 }
@@ -178,7 +181,8 @@ $avatarSize: 58px;
 	align-items: start;
 	margin-top: -4px;
 	max-width: 100%;
-	overflow: hidden;
+	overflow-x: hidden;
+	overflow-y: visible;
 }
 
 .name {
@@ -188,7 +192,8 @@ $avatarSize: 58px;
 	line-height: 24px;
 	width: fit-content;
 	max-width: calc(100% - 16px);
-	overflow: hidden;
+	overflow-x: hidden;
+	overflow-y: visible;
 	padding-right: 16px;
 	mask-image: linear-gradient(90deg,#000,#000 calc(100% - 16px),#0000);
 }
@@ -200,13 +205,14 @@ $avatarSize: 58px;
 	line-height: 16px;
 	width: fit-content;
 	max-width: calc(100% - 16px);
-	overflow: hidden;
+	overflow-x: hidden;
+	overflow-y: visible;
 	padding-right: 16px;
 	mask-image: linear-gradient(90deg,#000,#000 calc(100% - 16px),#0000);
 }
 
 .logo {
 	width: 30%;
-	margin: 2dvh auto 0;
+	margin: 32px auto 0;
 }
 </style>
diff --git a/packages/frontend/src/pages/qr.vue b/packages/frontend/src/pages/qr.vue
index 123534ac2b..3db767f494 100644
--- a/packages/frontend/src/pages/qr.vue
+++ b/packages/frontend/src/pages/qr.vue
@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<PageWithHeader v-model:tab="tab" :tabs="headerTabs" :swipable="true" :style="{ overflow: tab === 'show' ? 'clip' : undefined }">
+<PageWithHeader v-model:tab="tab" :tabs="headerTabs" :swipable="true" :style="{ overflowY: tab === 'show' ? 'clip' : undefined }">
 	<MkQrShow v-if="tab === 'show'"/>
 	<MkQrRead v-else-if="tab === 'read'"/>
 	<MkError v-else-if="error" :error="error"/>

From 75ab688a36b3d939fae708f2d450b555516a7e60 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 25 Aug 2025 09:50:47 +0900
Subject: [PATCH 05/85] added to navbar

---
 .../directives/flip-on-device-orientation.ts  |  6 +++---
 packages/frontend/src/pages/qr.show.vue       | 19 +++++++------------
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/packages/frontend/src/directives/flip-on-device-orientation.ts b/packages/frontend/src/directives/flip-on-device-orientation.ts
index 234ba93c1d..134482c1c2 100644
--- a/packages/frontend/src/directives/flip-on-device-orientation.ts
+++ b/packages/frontend/src/directives/flip-on-device-orientation.ts
@@ -2,14 +2,14 @@ import type { Directive } from 'vue';
 
 let initialized = false;
 let styleEl: HTMLStyleElement | null = null;
-const canUseDeviceOrientation = !window.DeviceOrientationEvent;
+const canUseDeviceOrientation = !!window.DeviceOrientationEvent;
 const className = '_flipOnDeviceOrientation';
 const variableName = `--MI-flip_on_device_orientation_transform`;
 
 function handleOrientationChange(event: DeviceOrientationEvent) {
-	const isUpsideDown = event.beta ? event.beta < -15 : false;
+	const isUpsideDown = event.beta ? event.beta < 5 : false;
 	const transform = isUpsideDown ? 'scale(-1, -1)' : '';
-	window.document.body.style.setProperty(variableName, transform);
+	window.document.documentElement.style.setProperty(variableName, transform);
 }
 
 function registerListener() {
diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index 26e0b71b15..5e8063fa1a 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -170,7 +170,6 @@ $avatarSize: 58px;
 .avatar {
 	width: $avatarSize;
 	height: $avatarSize;
-	margin-right: 8px;
 }
 
 .names {
@@ -179,10 +178,12 @@ $avatarSize: 58px;
 	flex-direction: column;
 	justify-content: center;
 	align-items: start;
-	margin-top: -4px;
+	margin: -4px -2px 0 8px;
+	padding-right: 16px;
 	max-width: 100%;
 	overflow-x: hidden;
 	overflow-y: visible;
+	mask-image: linear-gradient(90deg,#000,#000 calc(100% - 16px),#0000);
 }
 
 .name {
@@ -191,11 +192,8 @@ $avatarSize: 58px;
 	font-size: 20px;
 	line-height: 24px;
 	width: fit-content;
-	max-width: calc(100% - 16px);
-	overflow-x: hidden;
-	overflow-y: visible;
-	padding-right: 16px;
-	mask-image: linear-gradient(90deg,#000,#000 calc(100% - 16px),#0000);
+	max-width: 100%;
+	overflow: visible;
 }
 
 .username {
@@ -204,11 +202,8 @@ $avatarSize: 58px;
 	font-size: 14px;
 	line-height: 16px;
 	width: fit-content;
-	max-width: calc(100% - 16px);
-	overflow-x: hidden;
-	overflow-y: visible;
-	padding-right: 16px;
-	mask-image: linear-gradient(90deg,#000,#000 calc(100% - 16px),#0000);
+	max-width: 100%;
+	overflow: visible;
 }
 
 .logo {

From f1d27dcd6c61a092ddfddfcfd4ae93d3e433b936 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 25 Aug 2025 10:05:44 +0900
Subject: [PATCH 06/85] fix size

---
 packages/frontend/src/pages/qr.show.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index 5e8063fa1a..ed8d33bc3c 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -178,7 +178,7 @@ $avatarSize: 58px;
 	flex-direction: column;
 	justify-content: center;
 	align-items: start;
-	margin: -4px -2px 0 8px;
+	margin: -4px -2px 0 ($avatarSize / 4);
 	padding-right: 16px;
 	max-width: 100%;
 	overflow-x: hidden;

From bb09f08f8465fa2e54ebdfa084c685f54237a24d Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 25 Aug 2025 14:39:45 +0900
Subject: [PATCH 07/85] :art:

---
 .../directives/flip-on-device-orientation.ts  |  45 -------
 packages/frontend/src/directives/index.ts     |   2 -
 packages/frontend/src/pages/qr.show.vue       | 123 +++++++++++++++---
 packages/frontend/src/pages/qr.vue            |   8 +-
 4 files changed, 113 insertions(+), 65 deletions(-)
 delete mode 100644 packages/frontend/src/directives/flip-on-device-orientation.ts

diff --git a/packages/frontend/src/directives/flip-on-device-orientation.ts b/packages/frontend/src/directives/flip-on-device-orientation.ts
deleted file mode 100644
index 134482c1c2..0000000000
--- a/packages/frontend/src/directives/flip-on-device-orientation.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import type { Directive } from 'vue';
-
-let initialized = false;
-let styleEl: HTMLStyleElement | null = null;
-const canUseDeviceOrientation = !!window.DeviceOrientationEvent;
-const className = '_flipOnDeviceOrientation';
-const variableName = `--MI-flip_on_device_orientation_transform`;
-
-function handleOrientationChange(event: DeviceOrientationEvent) {
-	const isUpsideDown = event.beta ? event.beta < 5 : false;
-	const transform = isUpsideDown ? 'scale(-1, -1)' : '';
-	window.document.documentElement.style.setProperty(variableName, transform);
-}
-
-function registerListener() {
-	if (!canUseDeviceOrientation) return;
-
-	if (!initialized) {
-		window.addEventListener('deviceorientation', handleOrientationChange);
-		if (!styleEl) {
-			styleEl = window.document.createElement('style');
-			styleEl.textContent = `.${className} { transform: var(${variableName}); }`;
-			window.document.head.appendChild(styleEl);
-		}
-		initialized = true;
-	} else if (window.document.getElementsByClassName(className).length === 0) {
-		window.removeEventListener('deviceorientation', handleOrientationChange);
-		if (styleEl) {
-			window.document.head.removeChild(styleEl);
-			styleEl = null;
-		}
-		initialized = false;
-	}
-}
-
-export default {
-	mounted(el) {
-		registerListener();
-		el.classList.add(className);
-	},
-	unmounted(el) {
-		el.classList.remove(className);
-		registerListener();
-	},
-} as Directive;
diff --git a/packages/frontend/src/directives/index.ts b/packages/frontend/src/directives/index.ts
index c6948d8c06..9555045afe 100644
--- a/packages/frontend/src/directives/index.ts
+++ b/packages/frontend/src/directives/index.ts
@@ -16,7 +16,6 @@ import clickAnime from './click-anime.js';
 import panel from './panel.js';
 import adaptiveBorder from './adaptive-border.js';
 import adaptiveBg from './adaptive-bg.js';
-import flipOnDeviceOrientation from './flip-on-device-orientation.js';
 
 export default function(app: App) {
 	for (const [key, value] of Object.entries(directives)) {
@@ -37,5 +36,4 @@ export const directives = {
 	'panel': panel,
 	'adaptive-border': adaptiveBorder,
 	'adaptive-bg': adaptiveBg,
-	'flip-on-device-orientation': flipOnDeviceOrientation,
 };
diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index ed8d33bc3c..3642579c46 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -4,7 +4,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div :class="$style.root" :style="{ backgroundColor: bgColor }">
+<div ref="rootEl" :class="$style.root" :style="{
+	backgroundColor: bgColor,
+	minHeight: container ?
+		`calc( ${scrollHeight}px - var(--MI-stickyTop) - var(--MI-stickyBottom) )`
+		: `calc( 100dvh - var(--MI-stickyTop) - var(--MI-stickyBottom) )`,
+}">
 	<MkAnimBg style="position: absolute; top: 0;" :scale="1.5" />
 	<div :class="$style.fg">
 		<div
@@ -12,20 +17,26 @@ SPDX-License-Identifier: AGPL-3.0-only
 			@click="share"
 			:style="{
 				'--MI_SPACER-w': '512px',
+				'--MI_SPACER-max': '16px',
 				'cursor': canShare ? 'pointer' : 'default',
 			}"
 		>
-			<div :class="$style.qrOuter">
-				<div v-flip-on-device-orientation ref="qrCodeEl" :class="$style.qrInner"></div>
+			<div
+				:class="$style.qrOuter"
+				:style="{
+					maxHeight: container ? `max(256px, ${scrollHeight * 0.5}px)` : `max(256px, 50dvh)`,
+				}"
+			>
+				<div v-flip ref="qrCodeEl" :class="$style.qrInner"></div>
 			</div>
 			<div :class="$style.user">
-				<MkAvatar v-flip-on-device-orientation :class="$style.avatar" :user="$i" :indicator="false"/>
+				<MkAvatar v-flip :class="$style.avatar" :user="$i" :indicator="false"/>
 				<div :class="$style.names">
-					<div v-flip-on-device-orientation :class="$style.username"><MkCondensedLine :minScale="2 / 3">{{ acct }}</MkCondensedLine></div>
-					<div v-flip-on-device-orientation :class="$style.name"><MkCondensedLine :minScale="2 / 3">{{ userName($i) }}</MkCondensedLine></div>
+					<div v-flip :class="$style.username"><MkCondensedLine :minScale="2 / 3">{{ acct }}</MkCondensedLine></div>
+					<div v-flip :class="$style.name"><MkCondensedLine :minScale="2 / 3">{{ userName($i) }}</MkCondensedLine></div>
 				</div>
 			</div>
-			<img v-flip-on-device-orientation :class="$style.logo" :src="misskeysvg" alt="Misskey Logo"/>
+			<img v-flip :class="$style.logo" :src="misskeysvg" alt="Misskey Logo"/>
 		</div>
 	</div>
 </div>
@@ -35,7 +46,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { extractAvgColorFromBlurhash } from '@@/js/extract-avg-color-from-blurhash.js';
 import tinycolor from 'tinycolor2';
 import QRCodeStyling from 'qr-code-styling';
-import { computed, ref, watch, onMounted } from 'vue';
+import { computed, ref, watch, onMounted, type Directive, useCssModule, onUnmounted, type ComponentPublicInstance, nextTick } from 'vue';
 import { host } from '@@/js/config.js';
 import { instance } from '@/instance.js';
 import { ensureSignin } from '@/i.js';
@@ -44,9 +55,16 @@ import misskeysvg from '/client-assets/misskey.svg';
 import MkAnimBg from '@/components/MkAnimBg.vue';
 import { getStaticImageUrl } from '@/utility/media-proxy.js';
 import { i18n } from '@/i18n.js';
+import { getScrollContainer } from '@@/js/scroll';
+
+const $style = useCssModule();
 
 const $i = ensureSignin();
 
+const container = ref<HTMLElement | null>(null);
+const rootEl = ref<HTMLDivElement | null>(null);
+const scrollHeight = ref(window.innerHeight);
+
 const acct = computed(() => `@${$i.username}@${host}`);
 const url = computed(() => userPage($i, undefined, true));
 
@@ -67,7 +85,7 @@ function share() {
 	if (!canShare.value) return;
 	return navigator.share({
 		title: i18n.tsx._qr.shareTitle({ name: userName($i), acct: acct.value }),
-		text: i18n.tsx._qr.shareText({ name: userName($i), acct: acct.value }),
+		text: i18n.ts._qr.shareText,
 		url: url.value,
 	});
 }
@@ -114,18 +132,80 @@ watch([qrCodeEl, avatarHsl, url], () => {
 	}
 }, { immediate: true });
 
+//#region scroll height
+function checkScrollHeight() {
+	scrollHeight.value = container.value ? container.value.clientHeight : window.innerHeight;
+}
+
+let ro: ResizeObserver | undefined;
+
+onMounted(() => {
+	container.value = getScrollContainer(rootEl.value);
+	checkScrollHeight();
+
+	if (container.value) {
+		ro = new ResizeObserver(checkScrollHeight);
+		ro.observe(container.value);
+	}
+});
+
+onUnmounted(() => {
+	ro?.disconnect();
+});
+//#endregion
+
+//#region flip
+const flipEls: Set<Element> = new Set();
+const flip = ref(false);
+
+function handleOrientationChange(event: DeviceOrientationEvent) {
+	const isUpsideDown = event.beta ? event.beta < 5 : false;
+	flip.value = isUpsideDown;
+}
+
+watch(flip, (newState) => {
+	flipEls.forEach(el => {
+		el.classList.toggle($style.fliped, newState);
+	});
+});
+
+onMounted(() => {
+	window.addEventListener('deviceorientation', handleOrientationChange);
+});
+
+onUnmounted(() => {
+	window.removeEventListener('deviceorientation', handleOrientationChange);
+});
+
+const vFlip = {
+	mounted(el: Element) {
+		flipEls.add(el);
+		el.classList.add($style.flip);
+	},
+	unmounted(el: Element) {
+		el.classList.remove($style.flip);
+		flipEls.delete(el);
+	}
+} as Directive;
+//#endregion
 </script>
 
 <style lang="scss" module>
+$s1: 16px;
+$s2: 24px;
+$s3: 32px;
+
 .root {
 	position: relative;
 	margin-top: calc( -1 * var(--MI-stickyTop) );
+	margin-bottom: calc( -1 * var(--MI-stickyBottom) );
   padding-top: var(--MI-stickyTop);
-	height: calc( 100dvh - var(--MI-stickyTop) - var(--MI-stickyBottom) );
+	padding-bottom: var(--MI-stickyBottom);
+	height: 100%;
 }
 
 .fg {
-	position: absolute;
+	position: sticky;
 	top: var(--MI-stickyTop);
 	width: 100%;
 	height: 100%;
@@ -138,14 +218,23 @@ watch([qrCodeEl, avatarHsl, url], () => {
 	margin: 0 auto;
 }
 
+.flip {
+	transition: scale rotate 0.3s ease-in;
+}
+
+.fliped {
+	rotate: x 1;
+	scale: y -1;
+}
+
 .qrOuter {
 	display: flex;
+	width: 100%;
+	padding: $s3 0;
 }
 
 .qrInner {
-	width: 100%;
-	max-height: 40dvh;
-	margin: 58px auto 32px;
+	margin: 0;
 
 	> svg,
 	> canvas {
@@ -159,7 +248,7 @@ $avatarSize: 58px;
 
 .user {
 	display: flex;
-	margin: 32px auto;
+	margin: $s3 auto;
 	justify-content: center;
 	align-items: center;
 	overflow: visible;
@@ -207,7 +296,7 @@ $avatarSize: 58px;
 }
 
 .logo {
-	width: 30%;
-	margin: 32px auto 0;
+	width: 25%;
+	margin: $s3 auto 0;
 }
 </style>
diff --git a/packages/frontend/src/pages/qr.vue b/packages/frontend/src/pages/qr.vue
index 3db767f494..558f25a761 100644
--- a/packages/frontend/src/pages/qr.vue
+++ b/packages/frontend/src/pages/qr.vue
@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<PageWithHeader v-model:tab="tab" :tabs="headerTabs" :swipable="true" :style="{ overflowY: tab === 'show' ? 'clip' : undefined }">
+<PageWithHeader :class="$style.root" v-model:tab="tab" :tabs="headerTabs" :swipable="true">
 	<MkQrShow v-if="tab === 'show'"/>
 	<MkQrRead v-else-if="tab === 'read'"/>
 	<MkError v-else-if="error" :error="error"/>
@@ -42,3 +42,9 @@ definePage(() => ({
 	icon: 'ti ti-qrcode',
 }));
 </script>
+
+<style lang="scss" module>
+.root {
+	height: 100%;
+}
+</style>

From 2ceb4a4cdc2a26feb85d6c96d53973f5f302e7bb Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 25 Aug 2025 14:45:52 +0900
Subject: [PATCH 08/85] :art:

---
 packages/frontend/src/pages/qr.show.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index 3642579c46..57731dbd3f 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -106,7 +106,7 @@ watch([qrCodeEl, avatarHsl, url], () => {
 		imageOptions: {
 			hideBackgroundDots: true,
 			imageSize: 0.3,
-			margin: 8,
+			margin: 12,
 			crossOrigin: 'anonymous',
 		},
 		dotsOptions: {

From 8576006aaf91f999a45e7b1d9fe0519da4f2a45c Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 25 Aug 2025 14:47:53 +0900
Subject: [PATCH 09/85] fix div warn

---
 packages/frontend/src/pages/qr.show.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index 57731dbd3f..ae62ef802a 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -267,7 +267,7 @@ $avatarSize: 58px;
 	flex-direction: column;
 	justify-content: center;
 	align-items: start;
-	margin: -4px -2px 0 ($avatarSize / 4);
+	margin: -4px -2px 0 calc($avatarSize / 4);
 	padding-right: 16px;
 	max-width: 100%;
 	overflow-x: hidden;

From b17dc7c6d58a7e963ce25c57690ca6c8169c9265 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 25 Aug 2025 14:59:24 +0900
Subject: [PATCH 10/85] fix

---
 packages/frontend/src/pages/qr.show.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index ae62ef802a..60fbdd2116 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -115,9 +115,9 @@ watch([qrCodeEl, avatarHsl, url], () => {
 				type: 'linear',
 				rotation: 1, // radian
 				colorStops: [
-					{ offset: 0, color: tinycolor(`hsl(${avatarHsl.value.h}, 100, 6)`).toRgbString() },
+					{ offset: 0, color: tinycolor(`hsl(${avatarHsl.value.h}, 100, 25)`).toRgbString() },
 					{ offset: 0.5, color: tinycolor(`hsl(${avatarHsl.value.h}, 100, 18)`).toRgbString() },
-					{ offset: 1, color: tinycolor(`hsl(${avatarHsl.value.h}, 100, 25)`).toRgbString() },
+					{ offset: 1, color: tinycolor(`hsl(${avatarHsl.value.h}, 100, 6)`).toRgbString() },
 				],
 			},
 			type: 'classy-rounded',

From 7520099fee5ff4548de01a99ce854c0b815e6cb9 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 25 Aug 2025 15:04:24 +0900
Subject: [PATCH 11/85] use * 0.25

---
 packages/frontend/src/pages/qr.show.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index 60fbdd2116..40376bef7d 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -267,7 +267,7 @@ $avatarSize: 58px;
 	flex-direction: column;
 	justify-content: center;
 	align-items: start;
-	margin: -4px -2px 0 calc($avatarSize / 4);
+	margin: -4px -2px 0 ($avatarSize * 0.25);
 	padding-right: 16px;
 	max-width: 100%;
 	overflow-x: hidden;

From 183be7655ac8e7349f44bbd759f2b14a865c1cb0 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 25 Aug 2025 15:13:11 +0900
Subject: [PATCH 12/85] fix??

---
 packages/frontend/src/pages/qr.show.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index 40376bef7d..03931dcffb 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<MkAnimBg style="position: absolute; top: 0;" :scale="1.5" />
 	<div :class="$style.fg">
 		<div
-			:class="$style.content" class="_spacer"
+			:class="[$style.content, '_spacer']"
 			@click="share"
 			:style="{
 				'--MI_SPACER-w': '512px',

From 42a52f13b989ad5a7589a77d62250f9f4e59b46f Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 25 Aug 2025 15:27:38 +0900
Subject: [PATCH 13/85] fix lint

---
 packages/frontend/src/pages/qr.show.vue | 7 ++++---
 packages/frontend/src/pages/qr.vue      | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index 03931dcffb..6effd1bd27 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -14,12 +14,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div :class="$style.fg">
 		<div
 			:class="[$style.content, '_spacer']"
-			@click="share"
 			:style="{
 				'--MI_SPACER-w': '512px',
 				'--MI_SPACER-max': '16px',
 				'cursor': canShare ? 'pointer' : 'default',
 			}"
+			@click="share"
 		>
 			<div
 				:class="$style.qrOuter"
@@ -27,7 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					maxHeight: container ? `max(256px, ${scrollHeight * 0.5}px)` : `max(256px, 50dvh)`,
 				}"
 			>
-				<div v-flip ref="qrCodeEl" :class="$style.qrInner"></div>
+				<div ref="qrCodeEl" v-flip :class="$style.qrInner"></div>
 			</div>
 			<div :class="$style.user">
 				<MkAvatar v-flip :class="$style.avatar" :user="$i" :indicator="false"/>
@@ -46,7 +46,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { extractAvgColorFromBlurhash } from '@@/js/extract-avg-color-from-blurhash.js';
 import tinycolor from 'tinycolor2';
 import QRCodeStyling from 'qr-code-styling';
-import { computed, ref, watch, onMounted, type Directive, useCssModule, onUnmounted, type ComponentPublicInstance, nextTick } from 'vue';
+import type { Directive } from 'vue';
+import { computed, ref, watch, onMounted, useCssModule, onUnmounted, type ComponentPublicInstance, nextTick } from 'vue';
 import { host } from '@@/js/config.js';
 import { instance } from '@/instance.js';
 import { ensureSignin } from '@/i.js';
diff --git a/packages/frontend/src/pages/qr.vue b/packages/frontend/src/pages/qr.vue
index 558f25a761..9812466c85 100644
--- a/packages/frontend/src/pages/qr.vue
+++ b/packages/frontend/src/pages/qr.vue
@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<PageWithHeader :class="$style.root" v-model:tab="tab" :tabs="headerTabs" :swipable="true">
+<PageWithHeader v-model:tab="tab" :class="$style.root" :tabs="headerTabs" :swipable="true">
 	<MkQrShow v-if="tab === 'show'"/>
 	<MkQrRead v-else-if="tab === 'read'"/>
 	<MkError v-else-if="error" :error="error"/>

From 60fecdc358420be7b4ad5753c3e55cb2b42609d6 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 25 Aug 2025 19:37:21 +0900
Subject: [PATCH 14/85] clean up

---
 packages/frontend/src/pages/qr.show.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index 6effd1bd27..40f82f1b3b 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -47,7 +47,7 @@ import { extractAvgColorFromBlurhash } from '@@/js/extract-avg-color-from-blurha
 import tinycolor from 'tinycolor2';
 import QRCodeStyling from 'qr-code-styling';
 import type { Directive } from 'vue';
-import { computed, ref, watch, onMounted, useCssModule, onUnmounted, type ComponentPublicInstance, nextTick } from 'vue';
+import { computed, ref, watch, onMounted, useCssModule, onUnmounted } from 'vue';
 import { host } from '@@/js/config.js';
 import { instance } from '@/instance.js';
 import { ensureSignin } from '@/i.js';

From 2c7480d0ead5f89d33371787aced6723d435bb16 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 25 Aug 2025 20:09:21 +0900
Subject: [PATCH 15/85] ???

---
 packages/frontend/src/pages/qr.show.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index 40f82f1b3b..8709084555 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -36,7 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<div v-flip :class="$style.name"><MkCondensedLine :minScale="2 / 3">{{ userName($i) }}</MkCondensedLine></div>
 				</div>
 			</div>
-			<img v-flip :class="$style.logo" :src="misskeysvg" alt="Misskey Logo"/>
+			<img :class="$style.logo" :src="misskeysvg" alt="Misskey Logo"/>
 		</div>
 	</div>
 </div>

From e08032d00f3c383433042c815e06da63b1b69d62 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 25 Aug 2025 20:09:28 +0900
Subject: [PATCH 16/85] ?

---
 packages/frontend/src/pages/qr.show.vue | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index 8709084555..ed1585317f 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -36,7 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<div v-flip :class="$style.name"><MkCondensedLine :minScale="2 / 3">{{ userName($i) }}</MkCondensedLine></div>
 				</div>
 			</div>
-			<img :class="$style.logo" :src="misskeysvg" alt="Misskey Logo"/>
+			<img v-flip :class="$style.logo" :src="misskeysvg" alt="Misskey Logo"/>
 		</div>
 	</div>
 </div>
@@ -91,7 +91,7 @@ function share() {
 	});
 }
 
-watch([qrCodeEl, avatarHsl, url], () => {
+onMounted(() => {
 	const qrCodeInstance = new QRCodeStyling({
 		width: 512,
 		height: 512,
@@ -117,7 +117,7 @@ watch([qrCodeEl, avatarHsl, url], () => {
 				rotation: 1, // radian
 				colorStops: [
 					{ offset: 0, color: tinycolor(`hsl(${avatarHsl.value.h}, 100, 25)`).toRgbString() },
-					{ offset: 0.5, color: tinycolor(`hsl(${avatarHsl.value.h}, 100, 18)`).toRgbString() },
+					{ offset: 0.5, color: tinycolor(`hsl(${avatarHsl.value.h}, 100, 20)`).toRgbString() },
 					{ offset: 1, color: tinycolor(`hsl(${avatarHsl.value.h}, 100, 6)`).toRgbString() },
 				],
 			},
@@ -131,7 +131,7 @@ watch([qrCodeEl, avatarHsl, url], () => {
 	if (qrCodeEl.value != null) {
 		qrCodeInstance.append(qrCodeEl.value);
 	}
-}, { immediate: true });
+});
 
 //#region scroll height
 function checkScrollHeight() {
@@ -195,6 +195,7 @@ const vFlip = {
 $s1: 16px;
 $s2: 24px;
 $s3: 32px;
+$avatarSize: 58px;
 
 .root {
 	position: relative;
@@ -245,8 +246,6 @@ $s3: 32px;
 	}
 }
 
-$avatarSize: 58px;
-
 .user {
 	display: flex;
 	margin: $s3 auto;

From cacb9083b92f1c1649ca068092d187264bd245bd Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 25 Aug 2025 20:27:18 +0900
Subject: [PATCH 17/85] fix

---
 packages/frontend/src/pages/qr.show.vue | 34 ++++++++++++++-----------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index ed1585317f..6392135a1f 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -47,7 +47,7 @@ import { extractAvgColorFromBlurhash } from '@@/js/extract-avg-color-from-blurha
 import tinycolor from 'tinycolor2';
 import QRCodeStyling from 'qr-code-styling';
 import type { Directive } from 'vue';
-import { computed, ref, watch, onMounted, useCssModule, onUnmounted } from 'vue';
+import { computed, ref, watch, onMounted, onUnmounted } from 'vue';
 import { host } from '@@/js/config.js';
 import { instance } from '@/instance.js';
 import { ensureSignin } from '@/i.js';
@@ -58,8 +58,6 @@ import { getStaticImageUrl } from '@/utility/media-proxy.js';
 import { i18n } from '@/i18n.js';
 import { getScrollContainer } from '@@/js/scroll';
 
-const $style = useCssModule();
-
 const $i = ensureSignin();
 
 const container = ref<HTMLElement | null>(null);
@@ -166,7 +164,7 @@ function handleOrientationChange(event: DeviceOrientationEvent) {
 
 watch(flip, (newState) => {
 	flipEls.forEach(el => {
-		el.classList.toggle($style.fliped, newState);
+		el.classList.toggle('_qrShowFlipFliped', newState);
 	});
 });
 
@@ -181,10 +179,10 @@ onUnmounted(() => {
 const vFlip = {
 	mounted(el: Element) {
 		flipEls.add(el);
-		el.classList.add($style.flip);
+		el.classList.add('_qrShowFlip');
 	},
 	unmounted(el: Element) {
-		el.classList.remove($style.flip);
+		el.classList.remove('_qrShowFlip');
 		flipEls.delete(el);
 	}
 } as Directive;
@@ -220,15 +218,6 @@ $avatarSize: 58px;
 	margin: 0 auto;
 }
 
-.flip {
-	transition: scale rotate 0.3s ease-in;
-}
-
-.fliped {
-	rotate: x 1;
-	scale: y -1;
-}
-
 .qrOuter {
 	display: flex;
 	width: 100%;
@@ -300,3 +289,18 @@ $avatarSize: 58px;
 	margin: $s3 auto 0;
 }
 </style>
+
+<style lang="scss">
+/*
+ * useCssModuleで$styleを読み込みたかったが、rollupでのunwindが壊れてしまうらしく失敗。
+ * グローバルにクラスを定義することでお茶を濁す。
+ */
+._qrShowFlip {
+	transition: scale rotate 0.3s ease-in;
+}
+
+._qrShowFlipFliped {
+	rotate: x 1;
+	scale: y -1;
+}
+</style>

From c21fc29cd96841b2eeed386abe94530771a06f8e Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 25 Aug 2025 21:02:25 +0900
Subject: [PATCH 18/85] :art:

---
 packages/frontend/src/pages/qr.show.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index 6392135a1f..a9ed47c052 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -296,11 +296,11 @@ $avatarSize: 58px;
  * グローバルにクラスを定義することでお茶を濁す。
  */
 ._qrShowFlip {
-	transition: scale rotate 0.3s ease-in;
+	transition: rotate .3s linear, scale .3s .15s step-start;
 }
 
 ._qrShowFlipFliped {
-	rotate: x 1;
-	scale: y -1;
+	scale: -1 1;
+  rotate: x 180deg;
 }
 </style>

From 1dbc5fac8446df34e12651abdf2143f5a772db89 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 25 Aug 2025 21:03:10 +0900
Subject: [PATCH 19/85] :art:

---
 packages/frontend/src/pages/qr.show.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index a9ed47c052..958eca3ccb 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -256,7 +256,7 @@ $avatarSize: 58px;
 	flex-direction: column;
 	justify-content: center;
 	align-items: start;
-	margin: -4px -2px 0 ($avatarSize * 0.25);
+	margin: -4px -2px 0 ($avatarSize * 0.3);
 	padding-right: 16px;
 	max-width: 100%;
 	overflow-x: hidden;

From 079f0dfd706817e24563dc40c66aaaa882c246bf Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 25 Aug 2025 21:09:40 +0900
Subject: [PATCH 20/85] refactor

---
 packages/frontend/src/pages/qr.show.vue | 70 ++++++++++++-------------
 1 file changed, 35 insertions(+), 35 deletions(-)

diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index 958eca3ccb..a2824f5b8a 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -89,43 +89,43 @@ function share() {
 	});
 }
 
-onMounted(() => {
-	const qrCodeInstance = new QRCodeStyling({
-		width: 512,
-		height: 512,
-		margin: 40,
-		type: 'canvas',
-		data: url.value,
-		image: instance.iconUrl ? getStaticImageUrl(instance.iconUrl) : '/favicon.ico',
-		qrOptions: {
-			typeNumber: 0,
-			mode: 'Byte',
-			errorCorrectionLevel: 'H',
+const qrCodeInstance = new QRCodeStyling({
+	width: 512,
+	height: 512,
+	margin: 40,
+	type: 'canvas',
+	data: url.value,
+	image: instance.iconUrl ? getStaticImageUrl(instance.iconUrl) : '/favicon.ico',
+	qrOptions: {
+		typeNumber: 0,
+		mode: 'Byte',
+		errorCorrectionLevel: 'H',
+	},
+	imageOptions: {
+		hideBackgroundDots: true,
+		imageSize: 0.3,
+		margin: 12,
+		crossOrigin: 'anonymous',
+	},
+	dotsOptions: {
+		color: tinycolor(`hsl(${avatarHsl.value.h}, 100, 18)`).toRgbString(),
+		gradient: {
+			type: 'linear',
+			rotation: 1, // radian
+			colorStops: [
+				{ offset: 0, color: tinycolor(`hsl(${avatarHsl.value.h}, 100, 25)`).toRgbString() },
+				{ offset: 0.5, color: tinycolor(`hsl(${avatarHsl.value.h}, 100, 20)`).toRgbString() },
+				{ offset: 1, color: tinycolor(`hsl(${avatarHsl.value.h}, 100, 6)`).toRgbString() },
+			],
 		},
-		imageOptions: {
-			hideBackgroundDots: true,
-			imageSize: 0.3,
-			margin: 12,
-			crossOrigin: 'anonymous',
-		},
-		dotsOptions: {
-			color: tinycolor(`hsl(${avatarHsl.value.h}, 100, 18)`).toRgbString(),
-			gradient: {
-				type: 'linear',
-				rotation: 1, // radian
-				colorStops: [
-					{ offset: 0, color: tinycolor(`hsl(${avatarHsl.value.h}, 100, 25)`).toRgbString() },
-					{ offset: 0.5, color: tinycolor(`hsl(${avatarHsl.value.h}, 100, 20)`).toRgbString() },
-					{ offset: 1, color: tinycolor(`hsl(${avatarHsl.value.h}, 100, 6)`).toRgbString() },
-				],
-			},
-			type: 'classy-rounded',
-		},
-		backgroundOptions: {
-			color: tinycolor(`hsl(${avatarHsl.value.h}, 100, 97)`).toRgbString(),
-		},
-	});
+		type: 'classy-rounded',
+	},
+	backgroundOptions: {
+		color: tinycolor(`hsl(${avatarHsl.value.h}, 100, 97)`).toRgbString(),
+	},
+});
 
+onMounted(() => {
 	if (qrCodeEl.value != null) {
 		qrCodeInstance.append(qrCodeEl.value);
 	}

From 8d24927a97cdd3dd4f2db9aac9e76b9e557dee65 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 25 Aug 2025 21:21:44 +0900
Subject: [PATCH 21/85] :art:

---
 packages/frontend/src/pages/qr.show.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index a2824f5b8a..c0ea8f95da 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -190,9 +190,9 @@ const vFlip = {
 </script>
 
 <style lang="scss" module>
-$s1: 16px;
-$s2: 24px;
-$s3: 32px;
+$s1: 14px;
+$s2: 21px;
+$s3: 28px;
 $avatarSize: 58px;
 
 .root {
@@ -267,8 +267,8 @@ $avatarSize: 58px;
 .name {
 	display: inline-block;
 	color: #fff;
-	font-size: 20px;
-	line-height: 24px;
+	font-size: 18px;
+	line-height: 21px;
 	width: fit-content;
 	max-width: 100%;
 	overflow: visible;
@@ -277,8 +277,8 @@ $avatarSize: 58px;
 .username {
 	display: inline-block;
 	color: rgba(255, 255, 255, 0.7);
-	font-size: 14px;
-	line-height: 16px;
+	font-size: 13px;
+	line-height: 15px;
 	width: fit-content;
 	max-width: 100%;
 	overflow: visible;

From a3f0765ba083810642f7b9403317169c52013e9c Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 25 Aug 2025 21:36:59 +0900
Subject: [PATCH 22/85] :art:

---
 packages/frontend/src/pages/qr.show.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index c0ea8f95da..b4ab0aa249 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			:class="[$style.content, '_spacer']"
 			:style="{
 				'--MI_SPACER-w': '512px',
-				'--MI_SPACER-max': '16px',
+				'--MI_SPACER-max': '14px',
 				'cursor': canShare ? 'pointer' : 'default',
 			}"
 			@click="share"
@@ -24,7 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div
 				:class="$style.qrOuter"
 				:style="{
-					maxHeight: container ? `max(256px, ${scrollHeight * 0.5}px)` : `max(256px, 50dvh)`,
+					maxHeight: container ? `max(256px, ${scrollHeight * 0.45}px)` : `max(256px, 45dvh)`,
 				}"
 			>
 				<div ref="qrCodeEl" v-flip :class="$style.qrInner"></div>
@@ -221,7 +221,7 @@ $avatarSize: 58px;
 .qrOuter {
 	display: flex;
 	width: 100%;
-	padding: $s3 0;
+	padding: $s1 0 $s3;
 }
 
 .qrInner {

From 27eadb49e40ece5150fd215862c050554c6bc0c3 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 25 Aug 2025 22:20:52 +0900
Subject: [PATCH 23/85] :ar:t

---
 packages/frontend/src/pages/qr.show.vue | 30 ++++++++++++-------------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index b4ab0aa249..a12c2a6fc3 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -6,9 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div ref="rootEl" :class="$style.root" :style="{
 	backgroundColor: bgColor,
-	minHeight: container ?
-		`calc( ${scrollHeight}px - var(--MI-stickyTop) - var(--MI-stickyBottom) )`
-		: `calc( 100dvh - var(--MI-stickyTop) - var(--MI-stickyBottom) )`,
+	'--MI-QrShowMinHeight': scrollContainer ? `${scrollHeight}px` : `calc( 100dvh - var(--MI-minBottomSpacing) )`,
 }">
 	<MkAnimBg style="position: absolute; top: 0;" :scale="1.5" />
 	<div :class="$style.fg">
@@ -23,9 +21,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 		>
 			<div
 				:class="$style.qrOuter"
-				:style="{
-					maxHeight: container ? `max(256px, ${scrollHeight * 0.45}px)` : `max(256px, 45dvh)`,
-				}"
 			>
 				<div ref="qrCodeEl" v-flip :class="$style.qrInner"></div>
 			</div>
@@ -47,7 +42,7 @@ import { extractAvgColorFromBlurhash } from '@@/js/extract-avg-color-from-blurha
 import tinycolor from 'tinycolor2';
 import QRCodeStyling from 'qr-code-styling';
 import type { Directive } from 'vue';
-import { computed, ref, watch, onMounted, onUnmounted } from 'vue';
+import { computed, ref, shallowRef, watch, onMounted, onUnmounted } from 'vue';
 import { host } from '@@/js/config.js';
 import { instance } from '@/instance.js';
 import { ensureSignin } from '@/i.js';
@@ -60,7 +55,7 @@ import { getScrollContainer } from '@@/js/scroll';
 
 const $i = ensureSignin();
 
-const container = ref<HTMLElement | null>(null);
+const scrollContainer = shallowRef<HTMLElement | null>(null);
 const rootEl = ref<HTMLDivElement | null>(null);
 const scrollHeight = ref(window.innerHeight);
 
@@ -133,18 +128,18 @@ onMounted(() => {
 
 //#region scroll height
 function checkScrollHeight() {
-	scrollHeight.value = container.value ? container.value.clientHeight : window.innerHeight;
+	scrollHeight.value = scrollContainer.value ? scrollContainer.value.clientHeight : window.innerHeight;
 }
 
 let ro: ResizeObserver | undefined;
 
 onMounted(() => {
-	container.value = getScrollContainer(rootEl.value);
+	scrollContainer.value = getScrollContainer(rootEl.value);
 	checkScrollHeight();
 
-	if (container.value) {
+	if (scrollContainer.value) {
 		ro = new ResizeObserver(checkScrollHeight);
-		ro.observe(container.value);
+		ro.observe(scrollContainer.value);
 	}
 });
 
@@ -197,16 +192,17 @@ $avatarSize: 58px;
 
 .root {
 	position: relative;
+	box-sizing: border-box;
 	margin-top: calc( -1 * var(--MI-stickyTop) );
 	margin-bottom: calc( -1 * var(--MI-stickyBottom) );
-  padding-top: var(--MI-stickyTop);
-	padding-bottom: var(--MI-stickyBottom);
 	height: 100%;
+	min-height: var(--MI-QrShowMinHeight);
 }
 
 .fg {
 	position: sticky;
-	top: var(--MI-stickyTop);
+  padding-top: var(--MI-stickyTop);
+	padding-bottom: var(--MI-stickyBottom);
 	width: 100%;
 	height: 100%;
 }
@@ -216,12 +212,14 @@ $avatarSize: 58px;
 	flex-direction: column;
 	align-items: center;
 	margin: 0 auto;
+	padding-top: $s1;
 }
 
 .qrOuter {
 	display: flex;
 	width: 100%;
-	padding: $s1 0 $s3;
+	padding: 0 0 $s3;
+	max-height: max(256px, calc((var(--MI-QrShowMinHeight) - var(--MI-stickyTop) - var(--MI-stickyBottom)) * 0.55));
 }
 
 .qrInner {

From b5d7ded9e62ec74a3ee11e56fe43ac96238a16c4 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 25 Aug 2025 22:31:16 +0900
Subject: [PATCH 24/85] :art:

---
 packages/frontend/src/pages/qr.show.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index a12c2a6fc3..5b89b1841c 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -149,11 +149,12 @@ onUnmounted(() => {
 //#endregion
 
 //#region flip
+const THRESHOLD = -3;
 const flipEls: Set<Element> = new Set();
 const flip = ref(false);
 
 function handleOrientationChange(event: DeviceOrientationEvent) {
-	const isUpsideDown = event.beta ? event.beta < 5 : false;
+	const isUpsideDown = event.beta ? event.beta < THRESHOLD : false;
 	flip.value = isUpsideDown;
 }
 

From 530ffb3ede8bf627d17d475fead57f9d753242c2 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 25 Aug 2025 22:55:56 +0900
Subject: [PATCH 25/85] iphone flip

---
 packages/frontend/src/pages/qr.show.vue | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index 5b89b1841c..f6f014df28 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -17,10 +17,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 				'--MI_SPACER-max': '14px',
 				'cursor': canShare ? 'pointer' : 'default',
 			}"
-			@click="share"
 		>
 			<div
 				:class="$style.qrOuter"
+				@click="share"
 			>
 				<div ref="qrCodeEl" v-flip :class="$style.qrInner"></div>
 			</div>
@@ -31,7 +31,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<div v-flip :class="$style.name"><MkCondensedLine :minScale="2 / 3">{{ userName($i) }}</MkCondensedLine></div>
 				</div>
 			</div>
-			<img v-flip :class="$style.logo" :src="misskeysvg" alt="Misskey Logo"/>
+			<img v-if="deviceMotionPermissionNeeded" v-flip :class="$style.logo" :src="misskeysvg" alt="Misskey Logo" @click="requestDeviceMotion" />
+			<img v-else v-flip :class="$style.logo" :src="misskeysvg" alt="Misskey Logo" />
 		</div>
 	</div>
 </div>
@@ -150,6 +151,8 @@ onUnmounted(() => {
 
 //#region flip
 const THRESHOLD = -3;
+// @ts-ignore
+const deviceMotionPermissionNeeded = window.DeviceMotionEvent && typeof window.DeviceMotionEvent.requestPermission === 'function';
 const flipEls: Set<Element> = new Set();
 const flip = ref(false);
 
@@ -164,6 +167,18 @@ watch(flip, (newState) => {
 	});
 });
 
+function requestDeviceMotion() {
+	if (!deviceMotionPermissionNeeded) return;
+	// @ts-ignore
+	window.DeviceMotionEvent.requestPermission()
+		.then((response: string) => {
+			if (response === 'granted') {
+				window.addEventListener('deviceorientation', handleOrientationChange);
+			}
+		})
+		.catch(console.error);
+}
+
 onMounted(() => {
 	window.addEventListener('deviceorientation', handleOrientationChange);
 });

From 37c665b53dd9985add6726d76cc08489aeeee0e3 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 25 Aug 2025 23:04:58 +0900
Subject: [PATCH 26/85] no lazy import

---
 packages/frontend/src/pages/qr.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/pages/qr.vue b/packages/frontend/src/pages/qr.vue
index 9812466c85..4f106c2a89 100644
--- a/packages/frontend/src/pages/qr.vue
+++ b/packages/frontend/src/pages/qr.vue
@@ -17,6 +17,7 @@ import { defineAsyncComponent, ref, shallowRef } from 'vue';
 import { definePage } from '@/page.js';
 import { i18n } from '@/i18n.js';
 import { ensureSignin } from '@/i';
+import MkQrShow from './qr.show.vue';
 
 // router definitionでloginRequiredが設定されているためエラーハンドリングしない
 const $i = ensureSignin();
@@ -24,7 +25,6 @@ const $i = ensureSignin();
 const tab = ref<'read' | 'show'>('show');
 const error = ref<any>(null);
 
-const MkQrShow = defineAsyncComponent(() => import('./qr.show.vue'));
 const MkQrRead = defineAsyncComponent(() => import('./qr.read.vue'));
 
 const headerTabs = [{

From 1ee5c7283d9805a17e8f405240095f093d0be01b Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 25 Aug 2025 23:09:10 +0900
Subject: [PATCH 27/85] :art:

---
 packages/frontend/src/pages/qr.show.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index f6f014df28..565fd7a676 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -15,11 +15,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 			:style="{
 				'--MI_SPACER-w': '512px',
 				'--MI_SPACER-max': '14px',
-				'cursor': canShare ? 'pointer' : 'default',
 			}"
 		>
 			<div
 				:class="$style.qrOuter"
+				:style="{
+					'cursor': canShare ? 'pointer' : 'default',
+				}"
 				@click="share"
 			>
 				<div ref="qrCodeEl" v-flip :class="$style.qrInner"></div>

From b42e078016f5fbe4d28f716c645d224982a70ae2 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Tue, 26 Aug 2025 00:34:27 +0900
Subject: [PATCH 28/85] :art:

---
 packages/frontend/src/pages/qr.show.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index 565fd7a676..67a98a4157 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -88,9 +88,9 @@ function share() {
 }
 
 const qrCodeInstance = new QRCodeStyling({
-	width: 512,
-	height: 512,
-	margin: 40,
+	width: 600,
+	height: 600,
+	margin: 36,
 	type: 'canvas',
 	data: url.value,
 	image: instance.iconUrl ? getStaticImageUrl(instance.iconUrl) : '/favicon.ico',
@@ -102,7 +102,7 @@ const qrCodeInstance = new QRCodeStyling({
 	imageOptions: {
 		hideBackgroundDots: true,
 		imageSize: 0.3,
-		margin: 12,
+		margin: 16,
 		crossOrigin: 'anonymous',
 	},
 	dotsOptions: {
@@ -272,7 +272,7 @@ $avatarSize: 58px;
 	flex-direction: column;
 	justify-content: center;
 	align-items: start;
-	margin: -4px -2px 0 ($avatarSize * 0.3);
+	margin: -2px -2px 0 ($avatarSize * 0.3);
 	padding-right: 16px;
 	max-width: 100%;
 	overflow-x: hidden;

From 8b7d00c9a396dd3989e8e200c4e8a40586339387 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Tue, 26 Aug 2025 00:41:42 +0900
Subject: [PATCH 29/85] :art:

---
 packages/frontend/src/pages/qr.show.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index 67a98a4157..7b3b5ee8d1 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -213,7 +213,7 @@ $avatarSize: 58px;
 	box-sizing: border-box;
 	margin-top: calc( -1 * var(--MI-stickyTop) );
 	margin-bottom: calc( -1 * var(--MI-stickyBottom) );
-	height: 100%;
+	height: fit-content;
 	min-height: var(--MI-QrShowMinHeight);
 }
 

From 6c67d79f0c95d44f61e715df209aaba038169a03 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Tue, 26 Aug 2025 00:55:41 +0900
Subject: [PATCH 30/85] =?UTF-8?q?=E3=83=A6=E3=83=BC=E3=82=B6=E3=83=BC?=
 =?UTF-8?q?=E5=85=A8=E9=83=A8flip=E3=81=A7=E3=81=84=E3=81=84=E3=82=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/pages/qr.show.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index 7b3b5ee8d1..e3b1f1312f 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -26,11 +26,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 			>
 				<div ref="qrCodeEl" v-flip :class="$style.qrInner"></div>
 			</div>
-			<div :class="$style.user">
-				<MkAvatar v-flip :class="$style.avatar" :user="$i" :indicator="false"/>
+			<div v-flip :class="$style.user">
+				<MkAvatar :class="$style.avatar" :user="$i" :indicator="false"/>
 				<div :class="$style.names">
-					<div v-flip :class="$style.username"><MkCondensedLine :minScale="2 / 3">{{ acct }}</MkCondensedLine></div>
-					<div v-flip :class="$style.name"><MkCondensedLine :minScale="2 / 3">{{ userName($i) }}</MkCondensedLine></div>
+					<div :class="$style.name"><MkCondensedLine :minScale="2 / 3">{{ userName($i) }}</MkCondensedLine></div>
+					<div :class="$style.username"><MkCondensedLine :minScale="2 / 3">{{ acct }}</MkCondensedLine></div>
 				</div>
 			</div>
 			<img v-if="deviceMotionPermissionNeeded" v-flip :class="$style.logo" :src="misskeysvg" alt="Misskey Logo" @click="requestDeviceMotion" />
@@ -272,7 +272,7 @@ $avatarSize: 58px;
 	flex-direction: column;
 	justify-content: center;
 	align-items: start;
-	margin: -2px -2px 0 ($avatarSize * 0.3);
+	margin: -2px -2px 0 ($avatarSize * 0.25);
 	padding-right: 16px;
 	max-width: 100%;
 	overflow-x: hidden;

From f04d6f7a76b6ad232b31e7bf7a8e9443a508d97d Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Tue, 26 Aug 2025 03:09:53 +0900
Subject: [PATCH 31/85] :v:

---
 packages/frontend/package.json          |   1 +
 packages/frontend/src/pages/qr.read.vue | 186 +++++++++++++++++++++++-
 packages/frontend/src/pages/qr.show.vue |   6 +-
 pnpm-lock.yaml                          |  10 ++
 4 files changed, 195 insertions(+), 8 deletions(-)

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 682429baad..e78f85b34f 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -64,6 +64,7 @@
 		"photoswipe": "5.4.4",
 		"punycode.js": "2.3.1",
 		"qr-code-styling": "1.9.2",
+		"qr-scanner": "1.4.2",
 		"rollup": "4.48.0",
 		"sanitize-html": "2.17.0",
 		"sass": "1.90.0",
diff --git a/packages/frontend/src/pages/qr.read.vue b/packages/frontend/src/pages/qr.read.vue
index a4b8aaad1c..fca6ee2daa 100644
--- a/packages/frontend/src/pages/qr.read.vue
+++ b/packages/frontend/src/pages/qr.read.vue
@@ -4,19 +4,195 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div :class="$style.root">
-	TODO
+<div ref="rootEl" :class="$style.root" :style="{
+	'--MI-QrReadScrollHeight': scrollContainer ? `${scrollHeight}px` : `calc( 100dvh - var(--MI-minBottomSpacing) )`,
+	'--MI-QrReadViewHeight': 'calc(var(--MI-QrReadScrollHeight) - var(--MI-stickyTop, 0px) - var(--MI-stickyBottom, 0px))',
+	'--MI-QrReadVideoHeight': 'min(calc(var(--MI-QrReadViewHeight) * 0.3), 512px)',
+}">
+	<video ref="videoEl" :class="$style.video" autoplay muted playsinline></video>
+	<div class="_spacer" :style="{
+		'--MI-stickyTop': 'calc(var(--MI-stickyTop, 0px) + var(--MI-QrReadVideoHeight, 0px))',
+	}">
+		<div :class="$style.listBig">
+			<MkUserInfo v-for="user in users.slice(0, 5)" :key="user.id" :user="user"/>
+		</div>
+		<div :class="$style.listMini">
+			<MkA v-for="user in users.slice(5)" :key="user.id" :to="userPage(user)">
+				<MkUserCardMini :user="user" />
+			</MkA>
+		</div>
+	</div>
 </div>
 </template>
 
 <script lang="ts" setup>
-import { ensureSignin } from '@/i';
+import QrScanner from 'qr-scanner';
+import { onMounted, onUnmounted, ref, shallowRef, watch } from 'vue';
+import * as misskey from 'misskey-js';
+import * as os from '@/os.js';
+import { i18n } from '@/i18n.js';
+import MkUserInfo from '@/components/MkUserInfo.vue';
+import MkUserCardMini from '@/components/MkUserCardMini.vue';
+import { misskeyApi } from '@/utility/misskey-api.js';
+import { userPage } from '@/filters/user.js';
+import { getScrollContainer } from '@@/js/scroll.js';
 
-const $i = ensureSignin();
+const scrollContainer = shallowRef<HTMLElement | null>(null);
+const rootEl = ref<HTMLDivElement | null>(null);
+const scrollHeight = ref(window.innerHeight);
+
+const scannerInstance = shallowRef<QrScanner | null>(null);
+const uris = ref<string[]>([]);
+const usersSource = new Map<string, misskey.entities.UserDetailed | null>();
+const users = ref<(misskey.entities.UserDetailed)[]>([]);
+
+let timer = ref<ReturnType<typeof setTimeout> | null>(null);
+
+function updateUsers() {
+	users.value = uris.value.map(uri => usersSource.get(uri)).filter(u => u) as misskey.entities.UserDetailed[];
+}
+
+watch([uris, timer], () => {
+	if (timer.value) {
+		console.log('Skip updateUsers because of timer');
+		return;
+	}
+
+	updateUsers();
+
+	timer.value = setTimeout(() => {
+		console.log('Update users after 3 seconds');
+		timer.value = null;
+	}, 3000);
+});
+
+async function processResult(result: QrScanner.ScanResult) {
+	if (!result) return;
+	const uri = result.data.trim();
+	try {
+		new URL(uri);
+	} catch {
+		return;
+	}
+
+	if (uris.value[0] !== uri) {
+		// 並べ替え
+		uris.value = [uri, ...uris.value.slice(0, 29).filter(u => u !== uri)];
+	}
+
+	if (usersSource.has(uri)) return;
+	// Start fetching user info
+	usersSource.set(uri, null);
+	
+	await misskeyApi('ap/show', { uri })
+		.then(data => {
+			if (data.type === 'User') {
+				usersSource.set(uri, data.object);
+				updateUsers();
+			}
+		});
+}
+
+const alertLock = ref(false);
+
+onMounted(() => {
+	const videoEl = document.querySelector('video');
+
+	if (!videoEl) {
+		os.alert({
+			type: 'error',
+			text: i18n.ts.somethingHappened,
+		});
+		return;
+	}
+
+	scannerInstance.value = new QrScanner(
+		videoEl,
+		processResult,
+		{
+			onDecodeError(err) {
+				if (err === 'No QR code found') return;
+				if (alertLock.value) return;
+				alertLock.value = true;
+				os.alert({
+					type: 'error',
+					text: err.toString(),
+				}).finally(() => {
+					alertLock.value = false;
+				});
+			},
+		},
+	);
+
+	scannerInstance.value.start();
+});
+
+onUnmounted(() => {
+	if (timer.value) {
+		clearTimeout(timer.value);
+		timer.value = null;
+	}
+
+	scannerInstance.value?.destroy();
+});
+
+//#region scroll height
+function checkScrollHeight() {
+	scrollHeight.value = scrollContainer.value ? scrollContainer.value.clientHeight : window.innerHeight;
+}
+
+let ro: ResizeObserver | undefined;
+
+onMounted(() => {
+	scrollContainer.value = getScrollContainer(rootEl.value);
+	checkScrollHeight();
+
+	if (scrollContainer.value) {
+		ro = new ResizeObserver(checkScrollHeight);
+		ro.observe(scrollContainer.value);
+	}
+});
+
+onUnmounted(() => {
+	ro?.disconnect();
+});
+//#endregion
 </script>
 
 <style lang="scss" module>
 .root {
-	padding: 16px;
+	position: relative;
+}
+
+.video {
+	position: sticky;
+	background: var(--MI_THEME-bg);
+	background-size: 16px 16px;
+	width: 100%;
+	height: var(--MI-QrReadVideoHeight);
+	object-fit: contain;
+}
+
+html[data-color-scheme=dark] .video {
+	--c: rgb(255 255 255 / 2%);
+	background-image: linear-gradient(45deg, var(--c) 16.67%, var(--MI_THEME-bg) 16.67%, var(--MI_THEME-bg) 50%, var(--c) 50%, var(--c) 66.67%, var(--MI_THEME-bg) 66.67%, var(--MI_THEME-bg) 100%);
+}
+
+html[data-color-scheme=light] .video {
+	--c: rgb(0 0 0 / 2%);
+	background-image: linear-gradient(45deg, var(--c) 16.67%, var(--MI_THEME-bg) 16.67%, var(--MI_THEME-bg) 50%, var(--c) 50%, var(--c) 66.67%, var(--MI_THEME-bg) 66.67%, var(--MI_THEME-bg) 100%);
+}
+
+.listBig {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(405px, 1fr));
+	grid-gap: var(--MI-margin);
+}
+
+.listMini {
+	width: 100%;
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
+	grid-gap: 12px;
 }
 </style>
diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index e3b1f1312f..a081a323ce 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div ref="rootEl" :class="$style.root" :style="{
 	backgroundColor: bgColor,
-	'--MI-QrShowMinHeight': scrollContainer ? `${scrollHeight}px` : `calc( 100dvh - var(--MI-minBottomSpacing) )`,
+	'--MI-QrShowScrollHeight': scrollContainer ? `${scrollHeight}px` : `calc( 100dvh - var(--MI-minBottomSpacing, 0px) )`,
 }">
 	<MkAnimBg style="position: absolute; top: 0;" :scale="1.5" />
 	<div :class="$style.fg">
@@ -214,7 +214,7 @@ $avatarSize: 58px;
 	margin-top: calc( -1 * var(--MI-stickyTop) );
 	margin-bottom: calc( -1 * var(--MI-stickyBottom) );
 	height: fit-content;
-	min-height: var(--MI-QrShowMinHeight);
+	min-height: var(--MI-QrShowScrollHeight);
 }
 
 .fg {
@@ -237,7 +237,7 @@ $avatarSize: 58px;
 	display: flex;
 	width: 100%;
 	padding: 0 0 $s3;
-	max-height: max(256px, calc((var(--MI-QrShowMinHeight) - var(--MI-stickyTop) - var(--MI-stickyBottom)) * 0.55));
+	max-height: max(256px, calc((var(--MI-QrShowScrollHeight) - var(--MI-stickyTop, 0px) - var(--MI-stickyBottom, 0px)) * 0.55));
 }
 
 .qrInner {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 40c660ce0a..ecea89d164 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -847,6 +847,9 @@ importers:
       qr-code-styling:
         specifier: 1.9.2
         version: 1.9.2
+      qr-scanner:
+        specifier: 1.4.2
+        version: 1.4.2
       rollup:
         specifier: 4.48.0
         version: 4.48.0
@@ -9515,6 +9518,9 @@ packages:
     resolution: {integrity: sha512-RgJaZJ1/RrXJ6N0j7a+pdw3zMBmzZU4VN2dtAZf8ZggCfRB5stEQ3IoDNGaNhYY3nnZKYlYSLl5YkfWN5dPutg==}
     engines: {node: '>=18.18.0'}
 
+  qr-scanner@1.4.2:
+    resolution: {integrity: sha512-kV1yQUe2FENvn59tMZW6mOVfpq9mGxGf8l6+EGaXUOd4RBOLg7tRC83OrirM5AtDvZRpdjdlXURsHreAOSPOUw==}
+
   qrcode-generator@1.5.2:
     resolution: {integrity: sha512-pItrW0Z9HnDBnFmgiNrY1uxRdri32Uh9EjNYLPVC2zZ3ZRIIEqBoDgm4DkvDwNNDHTK7FNkmr8zAa77BYc9xNw==}
 
@@ -21094,6 +21100,10 @@ snapshots:
     dependencies:
       qrcode-generator: 1.5.2
 
+  qr-scanner@1.4.2:
+    dependencies:
+      '@types/offscreencanvas': 2019.7.0
+
   qrcode-generator@1.5.2: {}
 
   qrcode@1.5.4:

From 7bbbc8718f10f105a6e884e8bd65bd062ae364f9 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Tue, 26 Aug 2025 03:14:12 +0900
Subject: [PATCH 32/85] fix

---
 packages/frontend/src/pages/qr.read.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/pages/qr.read.vue b/packages/frontend/src/pages/qr.read.vue
index fca6ee2daa..36c833f7b2 100644
--- a/packages/frontend/src/pages/qr.read.vue
+++ b/packages/frontend/src/pages/qr.read.vue
@@ -111,7 +111,7 @@ onMounted(() => {
 		processResult,
 		{
 			onDecodeError(err) {
-				if (err === 'No QR code found') return;
+				if (err.toString().includes('No QR code found')) return;
 				if (alertLock.value) return;
 				alertLock.value = true;
 				os.alert({

From 0410fa20ad4fb35f26e47c546ef0aa2cca3412f9 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Tue, 26 Aug 2025 03:26:25 +0900
Subject: [PATCH 33/85] fix

---
 packages/frontend/src/pages/qr.read.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/pages/qr.read.vue b/packages/frontend/src/pages/qr.read.vue
index 36c833f7b2..b3cd18399a 100644
--- a/packages/frontend/src/pages/qr.read.vue
+++ b/packages/frontend/src/pages/qr.read.vue
@@ -46,15 +46,18 @@ const uris = ref<string[]>([]);
 const usersSource = new Map<string, misskey.entities.UserDetailed | null>();
 const users = ref<(misskey.entities.UserDetailed)[]>([]);
 
-let timer = ref<ReturnType<typeof setTimeout> | null>(null);
+const timer = ref<ReturnType<typeof setTimeout> | null>(null);
 
 function updateUsers() {
 	users.value = uris.value.map(uri => usersSource.get(uri)).filter(u => u) as misskey.entities.UserDetailed[];
+	updateRequired.value = false;
 }
 
-watch([uris, timer], () => {
+const updateRequired = ref(false);
+
+watch(uris, () => {
 	if (timer.value) {
-		console.log('Skip updateUsers because of timer');
+		updateRequired.value = true;
 		return;
 	}
 
@@ -63,6 +66,9 @@ watch([uris, timer], () => {
 	timer.value = setTimeout(() => {
 		console.log('Update users after 3 seconds');
 		timer.value = null;
+		if (updateRequired.value) {
+			updateUsers();
+		}
 	}, 3000);
 });
 

From 1631ae29858a99861820ef5301a6c0f9c87e47bd Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Tue, 26 Aug 2025 03:36:39 +0900
Subject: [PATCH 34/85] fix lint

---
 packages/frontend/src/pages/qr.read.vue | 8 ++++----
 packages/frontend/src/pages/qr.show.vue | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/pages/qr.read.vue b/packages/frontend/src/pages/qr.read.vue
index b3cd18399a..d9d48d9e45 100644
--- a/packages/frontend/src/pages/qr.read.vue
+++ b/packages/frontend/src/pages/qr.read.vue
@@ -46,7 +46,7 @@ const uris = ref<string[]>([]);
 const usersSource = new Map<string, misskey.entities.UserDetailed | null>();
 const users = ref<(misskey.entities.UserDetailed)[]>([]);
 
-const timer = ref<ReturnType<typeof setTimeout> | null>(null);
+const timer = ref<ReturnType<typeof window.setTimeout> | null>(null);
 
 function updateUsers() {
 	users.value = uris.value.map(uri => usersSource.get(uri)).filter(u => u) as misskey.entities.UserDetailed[];
@@ -63,7 +63,7 @@ watch(uris, () => {
 
 	updateUsers();
 
-	timer.value = setTimeout(() => {
+	timer.value = window.setTimeout(() => {
 		console.log('Update users after 3 seconds');
 		timer.value = null;
 		if (updateRequired.value) {
@@ -102,7 +102,7 @@ async function processResult(result: QrScanner.ScanResult) {
 const alertLock = ref(false);
 
 onMounted(() => {
-	const videoEl = document.querySelector('video');
+	const videoEl = window.document.querySelector('video');
 
 	if (!videoEl) {
 		os.alert({
@@ -135,7 +135,7 @@ onMounted(() => {
 
 onUnmounted(() => {
 	if (timer.value) {
-		clearTimeout(timer.value);
+		window.clearTimeout(timer.value);
 		timer.value = null;
 	}
 
diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index a081a323ce..5cb4770506 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -153,7 +153,7 @@ onUnmounted(() => {
 
 //#region flip
 const THRESHOLD = -3;
-// @ts-ignore
+// @ts-expect-error TS(2339)
 const deviceMotionPermissionNeeded = window.DeviceMotionEvent && typeof window.DeviceMotionEvent.requestPermission === 'function';
 const flipEls: Set<Element> = new Set();
 const flip = ref(false);
@@ -171,7 +171,7 @@ watch(flip, (newState) => {
 
 function requestDeviceMotion() {
 	if (!deviceMotionPermissionNeeded) return;
-	// @ts-ignore
+	// @ts-expect-error TS(2339)
 	window.DeviceMotionEvent.requestPermission()
 		.then((response: string) => {
 			if (response === 'granted') {

From 5a26f58d80a2f1dca91a97681052796894903c23 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Tue, 26 Aug 2025 03:57:59 +0900
Subject: [PATCH 35/85] :art:

---
 packages/frontend/src/pages/qr.read.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/pages/qr.read.vue b/packages/frontend/src/pages/qr.read.vue
index d9d48d9e45..a99c478ffe 100644
--- a/packages/frontend/src/pages/qr.read.vue
+++ b/packages/frontend/src/pages/qr.read.vue
@@ -13,10 +13,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div class="_spacer" :style="{
 		'--MI-stickyTop': 'calc(var(--MI-stickyTop, 0px) + var(--MI-QrReadVideoHeight, 0px))',
 	}">
-		<div :class="$style.listBig">
+		<div class="_gaps" style="padding-bottom: var(--MI-margin);">
 			<MkUserInfo v-for="user in users.slice(0, 5)" :key="user.id" :user="user"/>
 		</div>
-		<div :class="$style.listMini">
+		<div class="_gaps_s">
 			<MkA v-for="user in users.slice(5)" :key="user.id" :to="userPage(user)">
 				<MkUserCardMini :user="user" />
 			</MkA>

From 05f884ed7f351db5f81151a2d68a552022f10e0f Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Tue, 26 Aug 2025 05:01:49 +0900
Subject: [PATCH 36/85] fix type

---
 packages/frontend/src/pages/qr.read.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/pages/qr.read.vue b/packages/frontend/src/pages/qr.read.vue
index a99c478ffe..228f897abc 100644
--- a/packages/frontend/src/pages/qr.read.vue
+++ b/packages/frontend/src/pages/qr.read.vue
@@ -46,7 +46,7 @@ const uris = ref<string[]>([]);
 const usersSource = new Map<string, misskey.entities.UserDetailed | null>();
 const users = ref<(misskey.entities.UserDetailed)[]>([]);
 
-const timer = ref<ReturnType<typeof window.setTimeout> | null>(null);
+const timer = ref<number | null>(null);
 
 function updateUsers() {
 	users.value = uris.value.map(uri => usersSource.get(uri)).filter(u => u) as misskey.entities.UserDetailed[];
@@ -69,7 +69,7 @@ watch(uris, () => {
 		if (updateRequired.value) {
 			updateUsers();
 		}
-	}, 3000);
+	}, 3000) as number;
 });
 
 async function processResult(result: QrScanner.ScanResult) {

From e00e6c5eb43535240b0e99902be477ed9a09e56e Mon Sep 17 00:00:00 2001
From: anatawa12 <anatawa12@icloud.com>
Date: Sat, 30 Aug 2025 23:15:36 +0900
Subject: [PATCH 37/85] fix: local user profile url cannot be resolved with
 ap/show

---
 .../src/server/api/endpoints/ap/show.ts       | 33 ++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/packages/backend/src/server/api/endpoints/ap/show.ts b/packages/backend/src/server/api/endpoints/ap/show.ts
index 4afed7dc5c..46df43325d 100644
--- a/packages/backend/src/server/api/endpoints/ap/show.ts
+++ b/packages/backend/src/server/api/endpoints/ap/show.ts
@@ -21,6 +21,10 @@ import { bindThis } from '@/decorators.js';
 import { ApiError } from '../../error.js';
 import { IdentifiableError } from '@/misc/identifiable-error.js';
 import { FetchAllowSoftFailMask } from '@/core/activitypub/misc/check-against-url.js';
+import * as Acct from '@/misc/acct.js';
+import { IsNull } from 'typeorm';
+import { DI } from '@/di-symbols.js';
+import type { NotesRepository, UsersRepository } from '@/models/_.js';
 
 export const meta = {
 	tags: ['federation'],
@@ -116,6 +120,9 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 		private apDbResolverService: ApDbResolverService,
 		private apPersonService: ApPersonService,
 		private apNoteService: ApNoteService,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
 	) {
 		super(meta, paramDef, async (ps, me) => {
 			const object = await this.fetchAny(ps.uri, me);
@@ -137,7 +144,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 		}
 
 		let local = await this.mergePack(me, ...await Promise.all([
-			this.apDbResolverService.getUserFromApId(uri),
+			this.apDbResolverService.getUserFromApId(uri).then(async x => x ?? await this.getUserFromProfileUrl(uri)),
 			this.apDbResolverService.getNoteFromApId(uri),
 		]));
 		if (local != null) return local;
@@ -200,6 +207,30 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 		);
 	}
 
+	// To keep consistency with ap/show from external server,
+	// this function will handle `https://local.instance/@user`
+	// profile url to resolve user.
+	@bindThis
+	private async getUserFromProfileUrl(url: string): Promise<MiUser | null | undefined> {
+		if (!this.utilityService.isUriLocal(url)) {
+			return null;
+		}
+
+		const uri = new URL(url);
+		const pathComponents = uri.pathname.split('/').filter(Boolean);
+		if (pathComponents.length === 1 && pathComponents[0].startsWith('@')) {
+			const acct = Acct.parse(pathComponents[0]);
+
+			return await this.usersRepository.findOneBy({
+				usernameLower: acct.username.toLowerCase(),
+				host: acct.host ?? IsNull(),
+				isSuspended: false,
+			});
+		}
+
+		return null;
+	}
+
 	@bindThis
 	private async mergePack(me: MiLocalUser | null | undefined, user: MiUser | null | undefined, note: MiNote | null | undefined): Promise<SchemaType<typeof meta.res> | null> {
 		if (user != null) {

From 32eaa31d426a537c2d1ed176ad14d8591b3ef483 Mon Sep 17 00:00:00 2001
From: anatawa12 <anatawa12@icloud.com>
Date: Sat, 30 Aug 2025 23:46:34 +0900
Subject: [PATCH 38/85] fix: local user url with hostname could not be resolved

---
 packages/backend/src/server/api/endpoints/ap/show.ts | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/backend/src/server/api/endpoints/ap/show.ts b/packages/backend/src/server/api/endpoints/ap/show.ts
index 46df43325d..b367de7800 100644
--- a/packages/backend/src/server/api/endpoints/ap/show.ts
+++ b/packages/backend/src/server/api/endpoints/ap/show.ts
@@ -18,6 +18,7 @@ import { UserEntityService } from '@/core/entities/UserEntityService.js';
 import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
 import { UtilityService } from '@/core/UtilityService.js';
 import { bindThis } from '@/decorators.js';
+import type { Config } from '@/config.js';
 import { ApiError } from '../../error.js';
 import { IdentifiableError } from '@/misc/identifiable-error.js';
 import { FetchAllowSoftFailMask } from '@/core/activitypub/misc/check-against-url.js';
@@ -113,6 +114,12 @@ export const paramDef = {
 @Injectable()
 export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-disable-line import/no-default-export
 	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
 		private utilityService: UtilityService,
 		private userEntityService: UserEntityService,
 		private noteEntityService: NoteEntityService,
@@ -120,9 +127,6 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 		private apDbResolverService: ApDbResolverService,
 		private apPersonService: ApPersonService,
 		private apNoteService: ApNoteService,
-
-		@Inject(DI.usersRepository)
-		private usersRepository: UsersRepository,
 	) {
 		super(meta, paramDef, async (ps, me) => {
 			const object = await this.fetchAny(ps.uri, me);
@@ -220,6 +224,8 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 		const pathComponents = uri.pathname.split('/').filter(Boolean);
 		if (pathComponents.length === 1 && pathComponents[0].startsWith('@')) {
 			const acct = Acct.parse(pathComponents[0]);
+			// normalize acct host
+			if (acct.host != null && this.utilityService.toPuny(acct.host) === this.utilityService.toPuny(this.config.host)) acct.host = null;
 
 			return await this.usersRepository.findOneBy({
 				usernameLower: acct.username.toLowerCase(),

From a5727cb72a3be5ea6f27507242c8e5296505fd8a Mon Sep 17 00:00:00 2001
From: anatawa12 <anatawa12@icloud.com>
Date: Sun, 31 Aug 2025 00:01:02 +0900
Subject: [PATCH 39/85] chore: use common utility for checking self host

---
 packages/backend/src/server/api/endpoints/ap/show.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/backend/src/server/api/endpoints/ap/show.ts b/packages/backend/src/server/api/endpoints/ap/show.ts
index b367de7800..1fd5d0c0fb 100644
--- a/packages/backend/src/server/api/endpoints/ap/show.ts
+++ b/packages/backend/src/server/api/endpoints/ap/show.ts
@@ -18,7 +18,6 @@ import { UserEntityService } from '@/core/entities/UserEntityService.js';
 import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
 import { UtilityService } from '@/core/UtilityService.js';
 import { bindThis } from '@/decorators.js';
-import type { Config } from '@/config.js';
 import { ApiError } from '../../error.js';
 import { IdentifiableError } from '@/misc/identifiable-error.js';
 import { FetchAllowSoftFailMask } from '@/core/activitypub/misc/check-against-url.js';
@@ -114,9 +113,6 @@ export const paramDef = {
 @Injectable()
 export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-disable-line import/no-default-export
 	constructor(
-		@Inject(DI.config)
-		private config: Config,
-
 		@Inject(DI.usersRepository)
 		private usersRepository: UsersRepository,
 
@@ -225,7 +221,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 		if (pathComponents.length === 1 && pathComponents[0].startsWith('@')) {
 			const acct = Acct.parse(pathComponents[0]);
 			// normalize acct host
-			if (acct.host != null && this.utilityService.toPuny(acct.host) === this.utilityService.toPuny(this.config.host)) acct.host = null;
+			if (this.utilityService.isSelfHost(acct.host)) acct.host = null;
 
 			return await this.usersRepository.findOneBy({
 				usernameLower: acct.username.toLowerCase(),

From 96dc01770ea5d4f314d89cfc6050eb68e414e693 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 31 Aug 2025 00:32:00 +0900
Subject: [PATCH 40/85] wip

---
 packages/frontend/src/pages/qr.read.vue | 80 +++++++++++++++++--------
 1 file changed, 56 insertions(+), 24 deletions(-)

diff --git a/packages/frontend/src/pages/qr.read.vue b/packages/frontend/src/pages/qr.read.vue
index 228f897abc..8e9b3d3f2b 100644
--- a/packages/frontend/src/pages/qr.read.vue
+++ b/packages/frontend/src/pages/qr.read.vue
@@ -4,22 +4,28 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div ref="rootEl" :class="$style.root" :style="{
-	'--MI-QrReadScrollHeight': scrollContainer ? `${scrollHeight}px` : `calc( 100dvh - var(--MI-minBottomSpacing) )`,
-	'--MI-QrReadViewHeight': 'calc(var(--MI-QrReadScrollHeight) - var(--MI-stickyTop, 0px) - var(--MI-stickyBottom, 0px))',
-	'--MI-QrReadVideoHeight': 'min(calc(var(--MI-QrReadViewHeight) * 0.3), 512px)',
-}">
+<div
+	ref="rootEl" :class="$style.root" :style="{
+		'--MI-QrReadScrollHeight': scrollContainer ? `${scrollHeight}px` : `calc( 100dvh - var(--MI-minBottomSpacing) )`,
+		'--MI-QrReadViewHeight': 'calc(var(--MI-QrReadScrollHeight) - var(--MI-stickyTop, 0px) - var(--MI-stickyBottom, 0px))',
+		'--MI-QrReadVideoHeight': 'min(calc(var(--MI-QrReadViewHeight) * 0.3), 512px)',
+	}"
+>
 	<video ref="videoEl" :class="$style.video" autoplay muted playsinline></video>
-	<div class="_spacer" :style="{
-		'--MI-stickyTop': 'calc(var(--MI-stickyTop, 0px) + var(--MI-QrReadVideoHeight, 0px))',
-	}">
-		<div class="_gaps" style="padding-bottom: var(--MI-margin);">
-			<MkUserInfo v-for="user in users.slice(0, 5)" :key="user.id" :user="user"/>
+	<div
+		class="_spacer" :style="{
+			'--MI-stickyTop': 'calc(var(--MI-stickyTop, 0px) + var(--MI-QrReadVideoHeight, 0px))',
+		}"
+	>
+		<MkTab v-model="tab" :class="$style.tab">
+			<option value="users">{{ i18n.ts.users }} ({{ users.length }})</option>
+			<option value="notes">{{ i18n.ts.notes }} ({{ notes.length }})</option>
+		</MkTab>
+		<div v-if="tab === 'users'" class="_gaps" style="padding-bottom: var(--MI-margin);">
+			<MkUserInfo v-for="user in users" :key="user.id" :user="user"/>
 		</div>
-		<div class="_gaps_s">
-			<MkA v-for="user in users.slice(5)" :key="user.id" :to="userPage(user)">
-				<MkUserCardMini :user="user" />
-			</MkA>
+		<div v-else-if="tab === 'notes'" class="_gaps" style="padding-bottom: var(--MI-margin);">
+			<MkNote v-for="note in notes" :key="note.id" :note="note"/>
 		</div>
 	</div>
 </div>
@@ -29,27 +35,36 @@ SPDX-License-Identifier: AGPL-3.0-only
 import QrScanner from 'qr-scanner';
 import { onMounted, onUnmounted, ref, shallowRef, watch } from 'vue';
 import * as misskey from 'misskey-js';
+import { getScrollContainer } from '@@/js/scroll.js';
+import type { ApShowResponse } from 'misskey-js/entities.js';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import MkUserInfo from '@/components/MkUserInfo.vue';
-import MkUserCardMini from '@/components/MkUserCardMini.vue';
 import { misskeyApi } from '@/utility/misskey-api.js';
-import { userPage } from '@/filters/user.js';
-import { getScrollContainer } from '@@/js/scroll.js';
+
+const LIST_RERENDER_INTERVAL = 1500;
 
 const scrollContainer = shallowRef<HTMLElement | null>(null);
 const rootEl = ref<HTMLDivElement | null>(null);
 const scrollHeight = ref(window.innerHeight);
 
+const tab = ref<'users' | 'notes'>('users');
+
 const scannerInstance = shallowRef<QrScanner | null>(null);
+
 const uris = ref<string[]>([]);
+const sources = new Map<string, ApShowResponse | null>();
 const usersSource = new Map<string, misskey.entities.UserDetailed | null>();
+const notesSource = new Map<string, misskey.entities.Note | null>();
 const users = ref<(misskey.entities.UserDetailed)[]>([]);
+const notes = ref<misskey.entities.Note[]>([]);
 
 const timer = ref<number | null>(null);
 
-function updateUsers() {
-	users.value = uris.value.map(uri => usersSource.get(uri)).filter(u => u) as misskey.entities.UserDetailed[];
+function updateLists() {
+	const results = uris.value.map(uri => sources.get(uri)).filter((r): r is ApShowResponse => !!r);
+	users.value = results.filter(r => r.type === 'User').map(r => r.object).filter((u): u is misskey.entities.UserDetailed => !!u);
+	notes.value = results.filter(r => r.type === 'Note').map(r => r.object).filter((n): n is misskey.entities.Note => !!n);
 	updateRequired.value = false;
 }
 
@@ -61,15 +76,22 @@ watch(uris, () => {
 		return;
 	}
 
-	updateUsers();
+	updateLists();
 
 	timer.value = window.setTimeout(() => {
 		console.log('Update users after 3 seconds');
 		timer.value = null;
 		if (updateRequired.value) {
-			updateUsers();
+			updateLists();
 		}
-	}, 3000) as number;
+	}, LIST_RERENDER_INTERVAL) as number;
+});
+
+watch(tab, () => {
+	if (timer.value) {
+		window.clearTimeout(timer.value);
+		timer.value = null;
+	}
 });
 
 async function processResult(result: QrScanner.ScanResult) {
@@ -89,13 +111,21 @@ async function processResult(result: QrScanner.ScanResult) {
 	if (usersSource.has(uri)) return;
 	// Start fetching user info
 	usersSource.set(uri, null);
-	
+	notesSource.set(uri, null);
+
 	await misskeyApi('ap/show', { uri })
 		.then(data => {
 			if (data.type === 'User') {
 				usersSource.set(uri, data.object);
-				updateUsers();
+				tab.value = 'users';
+			} else if (data.type === 'Note') {
+				notesSource.set(uri, data.object);
+				tab.value = 'notes';
 			}
+			updateLists();
+		})
+		.catch(err => {
+			console.error(err);
 		});
 }
 
@@ -172,6 +202,8 @@ onUnmounted(() => {
 
 .video {
 	position: sticky;
+	top: var(--MI-stickyTop, 0);
+	z-index: 1;
 	background: var(--MI_THEME-bg);
 	background-size: 16px 16px;
 	width: 100%;

From b160c9428a3bccb46a1402a783d2caa7ad596610 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 31 Aug 2025 00:35:36 +0900
Subject: [PATCH 41/85] :art:

---
 packages/frontend/src/pages/qr.read.vue | 17 +++++------------
 1 file changed, 5 insertions(+), 12 deletions(-)

diff --git a/packages/frontend/src/pages/qr.read.vue b/packages/frontend/src/pages/qr.read.vue
index 8e9b3d3f2b..f90819e8c1 100644
--- a/packages/frontend/src/pages/qr.read.vue
+++ b/packages/frontend/src/pages/qr.read.vue
@@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 >
 	<video ref="videoEl" :class="$style.video" autoplay muted playsinline></video>
 	<div
-		class="_spacer" :style="{
+		:style="{
 			'--MI-stickyTop': 'calc(var(--MI-stickyTop, 0px) + var(--MI-QrReadVideoHeight, 0px))',
 		}"
 	>
@@ -21,10 +21,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<option value="users">{{ i18n.ts.users }} ({{ users.length }})</option>
 			<option value="notes">{{ i18n.ts.notes }} ({{ notes.length }})</option>
 		</MkTab>
-		<div v-if="tab === 'users'" class="_gaps" style="padding-bottom: var(--MI-margin);">
+		<div v-if="tab === 'users'" :class="['_spacer', '_gaps', $style.users]" style="padding-bottom: var(--MI-margin);">
 			<MkUserInfo v-for="user in users" :key="user.id" :user="user"/>
 		</div>
-		<div v-else-if="tab === 'notes'" class="_gaps" style="padding-bottom: var(--MI-margin);">
+		<div v-else-if="tab === 'notes'" class="_spacer _gaps" style="padding-bottom: var(--MI-margin);">
 			<MkNote v-for="note in notes" :key="note.id" :note="note"/>
 		</div>
 	</div>
@@ -221,16 +221,9 @@ html[data-color-scheme=light] .video {
 	background-image: linear-gradient(45deg, var(--c) 16.67%, var(--MI_THEME-bg) 16.67%, var(--MI_THEME-bg) 50%, var(--c) 50%, var(--c) 66.67%, var(--MI_THEME-bg) 66.67%, var(--MI_THEME-bg) 100%);
 }
 
-.listBig {
+.users {
 	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(405px, 1fr));
+	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
 	grid-gap: var(--MI-margin);
 }
-
-.listMini {
-	width: 100%;
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
-	grid-gap: 12px;
-}
 </style>

From 27493babd9ca186e1768fc6437510ab253fb7ac2 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 31 Aug 2025 00:36:30 +0900
Subject: [PATCH 42/85] :art:

---
 packages/frontend/src/pages/qr.read.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/pages/qr.read.vue b/packages/frontend/src/pages/qr.read.vue
index f90819e8c1..980107461c 100644
--- a/packages/frontend/src/pages/qr.read.vue
+++ b/packages/frontend/src/pages/qr.read.vue
@@ -13,6 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 >
 	<video ref="videoEl" :class="$style.video" autoplay muted playsinline></video>
 	<div
+		class="_spacer"
 		:style="{
 			'--MI-stickyTop': 'calc(var(--MI-stickyTop, 0px) + var(--MI-QrReadVideoHeight, 0px))',
 		}"
@@ -21,10 +22,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<option value="users">{{ i18n.ts.users }} ({{ users.length }})</option>
 			<option value="notes">{{ i18n.ts.notes }} ({{ notes.length }})</option>
 		</MkTab>
-		<div v-if="tab === 'users'" :class="['_spacer', '_gaps', $style.users]" style="padding-bottom: var(--MI-margin);">
+		<div v-if="tab === 'users'" :class="['_gaps', $style.users]" style="padding-bottom: var(--MI-margin);">
 			<MkUserInfo v-for="user in users" :key="user.id" :user="user"/>
 		</div>
-		<div v-else-if="tab === 'notes'" class="_spacer _gaps" style="padding-bottom: var(--MI-margin);">
+		<div v-else-if="tab === 'notes'" class="_gaps" style="padding-bottom: var(--MI-margin);">
 			<MkNote v-for="note in notes" :key="note.id" :note="note"/>
 		</div>
 	</div>

From b8ea8538a1e74ec83dfe988b208fc4469128f494 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 31 Aug 2025 00:40:05 +0900
Subject: [PATCH 43/85] fix imports

---
 packages/frontend/src/pages/qr.read.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/frontend/src/pages/qr.read.vue b/packages/frontend/src/pages/qr.read.vue
index 980107461c..3fa449e60f 100644
--- a/packages/frontend/src/pages/qr.read.vue
+++ b/packages/frontend/src/pages/qr.read.vue
@@ -42,6 +42,8 @@ import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import MkUserInfo from '@/components/MkUserInfo.vue';
 import { misskeyApi } from '@/utility/misskey-api.js';
+import MkNote from '@/components/MkNote.vue';
+import MkTab from '@/components/MkTab.vue';
 
 const LIST_RERENDER_INTERVAL = 1500;
 

From b1b9965878b25ca3ab82f114567dd5662adb9ecf Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 31 Aug 2025 00:44:43 +0900
Subject: [PATCH 44/85] fix

---
 packages/frontend/src/pages/qr.read.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/pages/qr.read.vue b/packages/frontend/src/pages/qr.read.vue
index 3fa449e60f..5019235a79 100644
--- a/packages/frontend/src/pages/qr.read.vue
+++ b/packages/frontend/src/pages/qr.read.vue
@@ -82,7 +82,6 @@ watch(uris, () => {
 	updateLists();
 
 	timer.value = window.setTimeout(() => {
-		console.log('Update users after 3 seconds');
 		timer.value = null;
 		if (updateRequired.value) {
 			updateLists();
@@ -95,6 +94,7 @@ watch(tab, () => {
 		window.clearTimeout(timer.value);
 		timer.value = null;
 	}
+	updateLists();
 });
 
 async function processResult(result: QrScanner.ScanResult) {

From 23618d4731c76b9959aeccd9e668aaa8836976d0 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 31 Aug 2025 00:47:50 +0900
Subject: [PATCH 45/85] fix

---
 packages/frontend/src/pages/qr.read.vue | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/frontend/src/pages/qr.read.vue b/packages/frontend/src/pages/qr.read.vue
index 5019235a79..858e3b6cfc 100644
--- a/packages/frontend/src/pages/qr.read.vue
+++ b/packages/frontend/src/pages/qr.read.vue
@@ -57,8 +57,6 @@ const scannerInstance = shallowRef<QrScanner | null>(null);
 
 const uris = ref<string[]>([]);
 const sources = new Map<string, ApShowResponse | null>();
-const usersSource = new Map<string, misskey.entities.UserDetailed | null>();
-const notesSource = new Map<string, misskey.entities.Note | null>();
 const users = ref<(misskey.entities.UserDetailed)[]>([]);
 const notes = ref<misskey.entities.Note[]>([]);
 
@@ -111,18 +109,17 @@ async function processResult(result: QrScanner.ScanResult) {
 		uris.value = [uri, ...uris.value.slice(0, 29).filter(u => u !== uri)];
 	}
 
-	if (usersSource.has(uri)) return;
+	if (sources.has(uri)) return;
 	// Start fetching user info
-	usersSource.set(uri, null);
-	notesSource.set(uri, null);
+	sources.set(uri, null);
 
 	await misskeyApi('ap/show', { uri })
 		.then(data => {
 			if (data.type === 'User') {
-				usersSource.set(uri, data.object);
+				sources.set(uri, data.object);
 				tab.value = 'users';
 			} else if (data.type === 'Note') {
-				notesSource.set(uri, data.object);
+				sources.set(uri, data.object);
 				tab.value = 'notes';
 			}
 			updateLists();

From e81a7ac0d1fbc218732acb408a9d9ab96322d918 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 31 Aug 2025 00:48:00 +0900
Subject: [PATCH 46/85] fix

---
 packages/frontend/src/pages/qr.read.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/pages/qr.read.vue b/packages/frontend/src/pages/qr.read.vue
index 858e3b6cfc..904aa923fa 100644
--- a/packages/frontend/src/pages/qr.read.vue
+++ b/packages/frontend/src/pages/qr.read.vue
@@ -116,10 +116,10 @@ async function processResult(result: QrScanner.ScanResult) {
 	await misskeyApi('ap/show', { uri })
 		.then(data => {
 			if (data.type === 'User') {
-				sources.set(uri, data.object);
+				sources.set(uri, data);
 				tab.value = 'users';
 			} else if (data.type === 'Note') {
-				sources.set(uri, data.object);
+				sources.set(uri, data);
 				tab.value = 'notes';
 			}
 			updateLists();

From a0234eecdadd3d35479b1e12e0a834b1d532a714 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 31 Aug 2025 00:55:37 +0900
Subject: [PATCH 47/85] :art:

---
 packages/frontend/src/pages/qr.read.vue | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/src/pages/qr.read.vue b/packages/frontend/src/pages/qr.read.vue
index 904aa923fa..c6139ccf00 100644
--- a/packages/frontend/src/pages/qr.read.vue
+++ b/packages/frontend/src/pages/qr.read.vue
@@ -19,14 +19,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 		}"
 	>
 		<MkTab v-model="tab" :class="$style.tab">
-			<option value="users">{{ i18n.ts.users }} ({{ users.length }})</option>
-			<option value="notes">{{ i18n.ts.notes }} ({{ notes.length }})</option>
+			<option value="users">{{ i18n.ts.users }} ({{ usersCount }})</option>
+			<option value="notes">{{ i18n.ts.notes }} ({{ notesCount }})</option>
 		</MkTab>
-		<div v-if="tab === 'users'" :class="['_gaps', $style.users]" style="padding-bottom: var(--MI-margin);">
+		<div v-if="tab === 'users'" :class="[$style.users, '_margin']" style="padding-bottom: var(--MI-margin);">
 			<MkUserInfo v-for="user in users" :key="user.id" :user="user"/>
 		</div>
-		<div v-else-if="tab === 'notes'" class="_gaps" style="padding-bottom: var(--MI-margin);">
-			<MkNote v-for="note in notes" :key="note.id" :note="note"/>
+		<div v-else-if="tab === 'notes'" class="_margin _gaps" style="padding-bottom: var(--MI-margin);">
+			<MkNote v-for="note in notes" :key="note.id" :note="note" :class="$style.note"/>
 		</div>
 	</div>
 </div>
@@ -58,14 +58,18 @@ const scannerInstance = shallowRef<QrScanner | null>(null);
 const uris = ref<string[]>([]);
 const sources = new Map<string, ApShowResponse | null>();
 const users = ref<(misskey.entities.UserDetailed)[]>([]);
+const usersCount = ref(0);
 const notes = ref<misskey.entities.Note[]>([]);
+const notesCount = ref(0);
 
 const timer = ref<number | null>(null);
 
 function updateLists() {
 	const results = uris.value.map(uri => sources.get(uri)).filter((r): r is ApShowResponse => !!r);
 	users.value = results.filter(r => r.type === 'User').map(r => r.object).filter((u): u is misskey.entities.UserDetailed => !!u);
+	usersCount.value = users.value.length;
 	notes.value = results.filter(r => r.type === 'Note').map(r => r.object).filter((n): n is misskey.entities.Note => !!n);
+	notesCount.value = notes.value.length;
 	updateRequired.value = false;
 }
 
@@ -226,4 +230,9 @@ html[data-color-scheme=light] .video {
 	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
 	grid-gap: var(--MI-margin);
 }
+
+.note {
+	background: var(--MI_THEME-panel);
+	border-radius: var(--MI-radius);
+}
 </style>

From 72ae525622ea29252cf747adfa8b78a7cefb972f Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 31 Aug 2025 01:02:16 +0900
Subject: [PATCH 48/85] fix...

---
 packages/frontend/src/pages/qr.read.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/pages/qr.read.vue b/packages/frontend/src/pages/qr.read.vue
index c6139ccf00..31844c07a4 100644
--- a/packages/frontend/src/pages/qr.read.vue
+++ b/packages/frontend/src/pages/qr.read.vue
@@ -19,8 +19,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 		}"
 	>
 		<MkTab v-model="tab" :class="$style.tab">
-			<option value="users">{{ i18n.ts.users }} ({{ usersCount }})</option>
-			<option value="notes">{{ i18n.ts.notes }} ({{ notesCount }})</option>
+			<option value="users">{{ i18n.ts.users }}</option>
+			<option value="notes">{{ i18n.ts.notes }}</option>
 		</MkTab>
 		<div v-if="tab === 'users'" :class="[$style.users, '_margin']" style="padding-bottom: var(--MI-margin);">
 			<MkUserInfo v-for="user in users" :key="user.id" :user="user"/>

From 0812c52f145c71b4d418592234d998816caa18b9 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 31 Aug 2025 01:04:23 +0900
Subject: [PATCH 49/85] set spacer-w

---
 packages/frontend/src/pages/qr.read.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/frontend/src/pages/qr.read.vue b/packages/frontend/src/pages/qr.read.vue
index 31844c07a4..9e713a329e 100644
--- a/packages/frontend/src/pages/qr.read.vue
+++ b/packages/frontend/src/pages/qr.read.vue
@@ -16,6 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		class="_spacer"
 		:style="{
 			'--MI-stickyTop': 'calc(var(--MI-stickyTop, 0px) + var(--MI-QrReadVideoHeight, 0px))',
+			'--MI_SPACER-w': '800px'
 		}"
 	>
 		<MkTab v-model="tab" :class="$style.tab">

From 7ddb01226055fd82eecceaa49f8fedbdd14c2e78 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 31 Aug 2025 03:02:50 +0900
Subject: [PATCH 50/85] :v:

---
 locales/index.d.ts                      |  24 ++++
 locales/ja-JP.yml                       |   6 +
 packages/frontend/src/pages/qr.read.vue | 156 +++++++++++++++++++-----
 3 files changed, 158 insertions(+), 28 deletions(-)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 2b910df793..28d843535e 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -12569,6 +12569,30 @@ export interface Locale extends ILocale {
          * Fediverseで私をフォローしてください！
          */
         "shareText": string;
+        /**
+         * カメラを選択
+         */
+        "chooseCamera": string;
+        /**
+         * ライト選択不可
+         */
+        "cannotToggleFlash": string;
+        /**
+         * ライトをオンにする
+         */
+        "turnOnFlash": string;
+        /**
+         * ライトをオフにする
+         */
+        "turnOffFlash": string;
+        /**
+         * コードリーダーを再開
+         */
+        "startQr": string;
+        /**
+         * コードリーダーを停止
+         */
+        "stopQr": string;
     };
 }
 declare const locales: {
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 3de5ea60df..a80d4a0b7a 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -3366,3 +3366,9 @@ _qr:
   readTabTitle: "読み取る"
   shareTitle: "{name} {acct}"
   shareText: "Fediverseで私をフォローしてください！"
+  chooseCamera: "カメラを選択"
+  cannotToggleFlash: "ライト選択不可"
+  turnOnFlash: "ライトをオンにする"
+  turnOffFlash: "ライトをオフにする"
+  startQr: "コードリーダーを再開"
+  stopQr: "コードリーダーを停止"
diff --git a/packages/frontend/src/pages/qr.read.vue b/packages/frontend/src/pages/qr.read.vue
index 9e713a329e..d808cd8d82 100644
--- a/packages/frontend/src/pages/qr.read.vue
+++ b/packages/frontend/src/pages/qr.read.vue
@@ -11,26 +11,39 @@ SPDX-License-Identifier: AGPL-3.0-only
 		'--MI-QrReadVideoHeight': 'min(calc(var(--MI-QrReadViewHeight) * 0.3), 512px)',
 	}"
 >
-	<video ref="videoEl" :class="$style.video" autoplay muted playsinline></video>
-	<div
-		class="_spacer"
-		:style="{
-			'--MI-stickyTop': 'calc(var(--MI-stickyTop, 0px) + var(--MI-QrReadVideoHeight, 0px))',
-			'--MI_SPACER-w': '800px'
-		}"
-	>
-		<MkTab v-model="tab" :class="$style.tab">
-			<option value="users">{{ i18n.ts.users }}</option>
-			<option value="notes">{{ i18n.ts.notes }}</option>
-		</MkTab>
-		<div v-if="tab === 'users'" :class="[$style.users, '_margin']" style="padding-bottom: var(--MI-margin);">
-			<MkUserInfo v-for="user in users" :key="user.id" :user="user"/>
-		</div>
-		<div v-else-if="tab === 'notes'" class="_margin _gaps" style="padding-bottom: var(--MI-margin);">
-			<MkNote v-for="note in notes" :key="note.id" :note="note" :class="$style.note"/>
+	<div :class="$style.view">
+		<video ref="videoEl" :class="$style.video" autoplay muted playsinline></video>
+		<div ref="overlayEl" :class="$style.overlay"></div>
+		<div v-if="scannerInstance" :class="$style.controls">
+			<MkButton v-if="qrStarted" v-tooltip="i18n.ts._qr.stopQr" iconOnly @click="stopQr"><i class="ti ti-player-play"></i></MkButton>
+			<MkButton v-else v-tooltip="i18n.ts._qr.startQr" iconOnly danger @click="startQr"><i class="ti ti-player-pause"></i></MkButton>
+
+			<MkButton v-tooltip="i18n.ts._qr.chooseCamera" iconOnly @click="chooseCamera"><i class="ti ti-camera-rotate"></i></MkButton>
+
+			<MkButton v-if="!flashCanToggle" v-tooltip="i18n.ts._qr.cannotToggleFlash" iconOnly disabled><i class="ti ti-bolt"></i></MkButton>
+			<MkButton v-else-if="!flash" v-tooltip="i18n.ts._qr.turnOnFlash" iconOnly @click="toggleFlash(true)"><i class="ti ti-bolt-off"></i></MkButton>
+			<MkButton v-else v-tooltip="i18n.ts._qr.turnOffFlash" iconOnly @click="toggleFlash(false)"><i class="ti ti-bolt-filled"></i></MkButton>
 		</div>
 	</div>
 </div>
+<div
+	class="_spacer"
+	:style="{
+		'--MI-stickyTop': 'calc(var(--MI-stickyTop, 0px) + var(--MI-QrReadVideoHeight, 0px))',
+		'--MI_SPACER-w': '800px'
+	}"
+>
+	<MkTab v-model="tab" :class="$style.tab">
+		<option value="users">{{ i18n.ts.users }}</option>
+		<option value="notes">{{ i18n.ts.notes }}</option>
+	</MkTab>
+	<div v-if="tab === 'users'" :class="[$style.users, '_margin']" style="padding-bottom: var(--MI-margin);">
+		<MkUserInfo v-for="user in users" :key="user.id" :user="user"/>
+	</div>
+	<div v-else-if="tab === 'notes'" class="_margin _gaps" style="padding-bottom: var(--MI-margin);">
+		<MkNote v-for="note in notes" :key="note.id" :note="note" :class="$style.note"/>
+	</div>
+</div>
 </template>
 
 <script lang="ts" setup>
@@ -45,17 +58,21 @@ import MkUserInfo from '@/components/MkUserInfo.vue';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import MkNote from '@/components/MkNote.vue';
 import MkTab from '@/components/MkTab.vue';
+import MkButton from '@/components/MkButton.vue';
 
 const LIST_RERENDER_INTERVAL = 1500;
 
-const scrollContainer = shallowRef<HTMLElement | null>(null);
 const rootEl = ref<HTMLDivElement | null>(null);
+const videoEl = ref<HTMLVideoElement | null>(null);
+const overlayEl = ref<HTMLDivElement | null>(null);
+
+const scrollContainer = shallowRef<HTMLElement | null>(null);
 const scrollHeight = ref(window.innerHeight);
 
-const tab = ref<'users' | 'notes'>('users');
-
 const scannerInstance = shallowRef<QrScanner | null>(null);
 
+const tab = ref<'users' | 'notes'>('users');
+
 const uris = ref<string[]>([]);
 const sources = new Map<string, ApShowResponse | null>();
 const users = ref<(misskey.entities.UserDetailed)[]>([]);
@@ -134,12 +151,62 @@ async function processResult(result: QrScanner.ScanResult) {
 		});
 }
 
+const qrStarted = ref(true);
+const flashCanToggle = ref(false);
+const flash = ref(false);
+
+async function chooseCamera() {
+	if (!scannerInstance.value) return;
+	const cameras = await QrScanner.listCameras(true);
+	if (cameras.length === 0) {
+		os.alert({
+			type: 'error',
+		});
+		return;
+	}
+
+	const select = await os.select({
+		title: i18n.ts._qr.chooseCamera,
+		items: cameras.map(camera => ({
+			text: camera.label,
+			value: camera.id,
+		})),
+	});
+	if (select.canceled) return;
+	if (select.result == null) return;
+
+	await scannerInstance.value.setCamera(select.result);
+	flashCanToggle.value = await scannerInstance.value.hasFlash();
+	flash.value = scannerInstance.value.isFlashOn();
+}
+
+async function toggleFlash(to = false) {
+	if (!scannerInstance.value) return;
+
+	flash.value = to;
+	if (flash.value) {
+		await scannerInstance.value.turnFlashOn();
+	} else {
+		await scannerInstance.value.turnFlashOff();
+	}
+}
+
+async function startQr() {
+	if (!scannerInstance.value) return;
+	await scannerInstance.value.start();
+	qrStarted.value = true;
+}
+
+async function stopQr() {
+	if (!scannerInstance.value) return;
+	await scannerInstance.value.stop();
+	qrStarted.value = false;
+}
+
 const alertLock = ref(false);
 
 onMounted(() => {
-	const videoEl = window.document.querySelector('video');
-
-	if (!videoEl) {
+	if (!videoEl.value || !overlayEl.value) {
 		os.alert({
 			type: 'error',
 			text: i18n.ts.somethingHappened,
@@ -148,9 +215,12 @@ onMounted(() => {
 	}
 
 	scannerInstance.value = new QrScanner(
-		videoEl,
+		videoEl.value,
 		processResult,
 		{
+			highlightScanRegion: true,
+			highlightCodeOutline: true,
+			overlay: overlayEl.value,
 			onDecodeError(err) {
 				if (err.toString().includes('No QR code found')) return;
 				if (alertLock.value) return;
@@ -165,7 +235,21 @@ onMounted(() => {
 		},
 	);
 
-	scannerInstance.value.start();
+	scannerInstance.value.start()
+		.then(async () => {
+			qrStarted.value = true;
+			if (!scannerInstance.value) return;
+			flashCanToggle.value = await scannerInstance.value.hasFlash();
+			flash.value = scannerInstance.value.isFlashOn();
+		})
+		.catch(err => {
+			qrStarted.value = false;
+			os.alert({
+				type: 'error',
+				text: err.toString(),
+			});
+			console.error(err);
+		});
 });
 
 onUnmounted(() => {
@@ -205,7 +289,7 @@ onUnmounted(() => {
 	position: relative;
 }
 
-.video {
+.view {
 	position: sticky;
 	top: var(--MI-stickyTop, 0);
 	z-index: 1;
@@ -213,15 +297,31 @@ onUnmounted(() => {
 	background-size: 16px 16px;
 	width: 100%;
 	height: var(--MI-QrReadVideoHeight);
+}
+
+.video {
+	width: 100%;
+	height: 100%;
 	object-fit: contain;
 }
 
-html[data-color-scheme=dark] .video {
+.controls {
+	width: 100%;
+	position: absolute;
+	left: 0;
+	bottom: 10px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 10px;
+}
+
+html[data-color-scheme=dark] .view {
 	--c: rgb(255 255 255 / 2%);
 	background-image: linear-gradient(45deg, var(--c) 16.67%, var(--MI_THEME-bg) 16.67%, var(--MI_THEME-bg) 50%, var(--c) 50%, var(--c) 66.67%, var(--MI_THEME-bg) 66.67%, var(--MI_THEME-bg) 100%);
 }
 
-html[data-color-scheme=light] .video {
+html[data-color-scheme=light] .view {
 	--c: rgb(0 0 0 / 2%);
 	background-image: linear-gradient(45deg, var(--c) 16.67%, var(--MI_THEME-bg) 16.67%, var(--MI_THEME-bg) 50%, var(--c) 50%, var(--c) 66.67%, var(--MI_THEME-bg) 66.67%, var(--MI_THEME-bg) 100%);
 }

From 14e353a6de8366728f1c708f271c5eb2075d4690 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 31 Aug 2025 03:27:26 +0900
Subject: [PATCH 51/85] =?UTF-8?q?=E5=85=A8=E7=94=BB=E9=9D=A2=E3=81=A7QR?=
 =?UTF-8?q?=E3=82=92=E8=AA=AD=E3=82=80=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/pages/qr.read.vue | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/frontend/src/pages/qr.read.vue b/packages/frontend/src/pages/qr.read.vue
index d808cd8d82..ed3d5d5e9b 100644
--- a/packages/frontend/src/pages/qr.read.vue
+++ b/packages/frontend/src/pages/qr.read.vue
@@ -221,6 +221,18 @@ onMounted(() => {
 			highlightScanRegion: true,
 			highlightCodeOutline: true,
 			overlay: overlayEl.value,
+			calculateScanRegion(video: HTMLVideoElement): QrScanner.ScanRegion {
+				const aspectRatio = video.videoWidth / video.videoHeight;
+				const SHORT_SIDE_SIZE_DOWNSCALED = 360;
+				return {
+					x: 0,
+					y: 0,
+					width: video.videoWidth,
+					height: video.videoHeight,
+					downScaledWidth: aspectRatio > 1 ? Math.round(SHORT_SIDE_SIZE_DOWNSCALED * aspectRatio) : SHORT_SIDE_SIZE_DOWNSCALED,
+					downScaledHeight: aspectRatio > 1 ? SHORT_SIDE_SIZE_DOWNSCALED : Math.round(SHORT_SIDE_SIZE_DOWNSCALED / aspectRatio),
+				};
+			},
 			onDecodeError(err) {
 				if (err.toString().includes('No QR code found')) return;
 				if (alertLock.value) return;

From 24338f247350cb3bd17b3b938f3fc647f956aafa Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 31 Aug 2025 03:36:39 +0900
Subject: [PATCH 52/85] fix

---
 packages/frontend/src/pages/qr.read.vue | 38 +++++++++++++------------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/packages/frontend/src/pages/qr.read.vue b/packages/frontend/src/pages/qr.read.vue
index ed3d5d5e9b..2dbf54c2e8 100644
--- a/packages/frontend/src/pages/qr.read.vue
+++ b/packages/frontend/src/pages/qr.read.vue
@@ -5,7 +5,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div
-	ref="rootEl" :class="$style.root" :style="{
+	ref="rootEl"
+	:class="$style.root"
+	:style="{
 		'--MI-QrReadScrollHeight': scrollContainer ? `${scrollHeight}px` : `calc( 100dvh - var(--MI-minBottomSpacing) )`,
 		'--MI-QrReadViewHeight': 'calc(var(--MI-QrReadScrollHeight) - var(--MI-stickyTop, 0px) - var(--MI-stickyBottom, 0px))',
 		'--MI-QrReadVideoHeight': 'min(calc(var(--MI-QrReadViewHeight) * 0.3), 512px)',
@@ -25,23 +27,23 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkButton v-else v-tooltip="i18n.ts._qr.turnOffFlash" iconOnly @click="toggleFlash(false)"><i class="ti ti-bolt-filled"></i></MkButton>
 		</div>
 	</div>
-</div>
-<div
-	class="_spacer"
-	:style="{
-		'--MI-stickyTop': 'calc(var(--MI-stickyTop, 0px) + var(--MI-QrReadVideoHeight, 0px))',
-		'--MI_SPACER-w': '800px'
-	}"
->
-	<MkTab v-model="tab" :class="$style.tab">
-		<option value="users">{{ i18n.ts.users }}</option>
-		<option value="notes">{{ i18n.ts.notes }}</option>
-	</MkTab>
-	<div v-if="tab === 'users'" :class="[$style.users, '_margin']" style="padding-bottom: var(--MI-margin);">
-		<MkUserInfo v-for="user in users" :key="user.id" :user="user"/>
-	</div>
-	<div v-else-if="tab === 'notes'" class="_margin _gaps" style="padding-bottom: var(--MI-margin);">
-		<MkNote v-for="note in notes" :key="note.id" :note="note" :class="$style.note"/>
+	<div
+		class="_spacer"
+		:style="{
+			'--MI-stickyTop': 'calc(var(--MI-stickyTop, 0px) + var(--MI-QrReadVideoHeight, 0px))',
+			'--MI_SPACER-w': '800px'
+		}"
+	>
+		<MkTab v-model="tab" :class="$style.tab">
+			<option value="users">{{ i18n.ts.users }}</option>
+			<option value="notes">{{ i18n.ts.notes }}</option>
+		</MkTab>
+		<div v-if="tab === 'users'" :class="[$style.users, '_margin']" style="padding-bottom: var(--MI-margin);">
+			<MkUserInfo v-for="user in users" :key="user.id" :user="user"/>
+		</div>
+		<div v-else-if="tab === 'notes'" class="_margin _gaps" style="padding-bottom: var(--MI-margin);">
+			<MkNote v-for="note in notes" :key="note.id" :note="note" :class="$style.note"/>
+		</div>
 	</div>
 </div>
 </template>

From ad3c22de5e14c8feb4e2475232dfd8a130a894cb Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 31 Aug 2025 03:51:17 +0900
Subject: [PATCH 53/85] :art:

---
 packages/frontend/src/pages/qr.read.vue | 74 +++++++++++++++----------
 1 file changed, 45 insertions(+), 29 deletions(-)

diff --git a/packages/frontend/src/pages/qr.read.vue b/packages/frontend/src/pages/qr.read.vue
index 2dbf54c2e8..91ea8c147b 100644
--- a/packages/frontend/src/pages/qr.read.vue
+++ b/packages/frontend/src/pages/qr.read.vue
@@ -13,38 +13,45 @@ SPDX-License-Identifier: AGPL-3.0-only
 		'--MI-QrReadVideoHeight': 'min(calc(var(--MI-QrReadViewHeight) * 0.3), 512px)',
 	}"
 >
-	<div :class="$style.view">
-		<video ref="videoEl" :class="$style.video" autoplay muted playsinline></video>
-		<div ref="overlayEl" :class="$style.overlay"></div>
-		<div v-if="scannerInstance" :class="$style.controls">
-			<MkButton v-if="qrStarted" v-tooltip="i18n.ts._qr.stopQr" iconOnly @click="stopQr"><i class="ti ti-player-play"></i></MkButton>
-			<MkButton v-else v-tooltip="i18n.ts._qr.startQr" iconOnly danger @click="startQr"><i class="ti ti-player-pause"></i></MkButton>
+	<MkStickyContainer>
+		<template #header>
+			<div :class="$style.view">
+				<video ref="videoEl" :class="$style.video" autoplay muted playsinline></video>
+				<div ref="overlayEl" :class="$style.overlay"></div>
+				<div v-if="scannerInstance" :class="$style.controls">
+					<MkButton v-if="qrStarted" v-tooltip="i18n.ts._qr.stopQr" iconOnly @click="stopQr"><i class="ti ti-player-play"></i></MkButton>
+					<MkButton v-else v-tooltip="i18n.ts._qr.startQr" iconOnly danger @click="startQr"><i class="ti ti-player-pause"></i></MkButton>
 
-			<MkButton v-tooltip="i18n.ts._qr.chooseCamera" iconOnly @click="chooseCamera"><i class="ti ti-camera-rotate"></i></MkButton>
+					<MkButton v-tooltip="i18n.ts._qr.chooseCamera" iconOnly @click="chooseCamera"><i class="ti ti-camera-rotate"></i></MkButton>
 
-			<MkButton v-if="!flashCanToggle" v-tooltip="i18n.ts._qr.cannotToggleFlash" iconOnly disabled><i class="ti ti-bolt"></i></MkButton>
-			<MkButton v-else-if="!flash" v-tooltip="i18n.ts._qr.turnOnFlash" iconOnly @click="toggleFlash(true)"><i class="ti ti-bolt-off"></i></MkButton>
-			<MkButton v-else v-tooltip="i18n.ts._qr.turnOffFlash" iconOnly @click="toggleFlash(false)"><i class="ti ti-bolt-filled"></i></MkButton>
+					<MkButton v-if="!flashCanToggle" v-tooltip="i18n.ts._qr.cannotToggleFlash" iconOnly disabled><i class="ti ti-bolt"></i></MkButton>
+					<MkButton v-else-if="!flash" v-tooltip="i18n.ts._qr.turnOnFlash" iconOnly @click="toggleFlash(true)"><i class="ti ti-bolt-off"></i></MkButton>
+					<MkButton v-else v-tooltip="i18n.ts._qr.turnOffFlash" iconOnly @click="toggleFlash(false)"><i class="ti ti-bolt-filled"></i></MkButton>
+				</div>
+			</div>
+		</template>
+		<div
+			:class="['_spacer', $style.contents]"
+			:style="{
+				'--MI_SPACER-w': '800px'
+			}"
+		>
+			<MkStickyContainer>
+				<template #header>
+					<MkTab v-model="tab" :class="$style.tab">
+						<option value="users">{{ i18n.ts.users }}</option>
+						<option value="notes">{{ i18n.ts.notes }}</option>
+					</MkTab>
+				</template>
+				<div v-if="tab === 'users'" :class="[$style.users, '_margin']" style="padding-bottom: var(--MI-margin);">
+					<MkUserInfo v-for="user in users" :key="user.id" :user="user"/>
+				</div>
+				<div v-else-if="tab === 'notes'" class="_margin _gaps" style="padding-bottom: var(--MI-margin);">
+					<MkNote v-for="note in notes" :key="note.id" :note="note" :class="$style.note"/>
+				</div>
+			</MkStickyContainer>
 		</div>
-	</div>
-	<div
-		class="_spacer"
-		:style="{
-			'--MI-stickyTop': 'calc(var(--MI-stickyTop, 0px) + var(--MI-QrReadVideoHeight, 0px))',
-			'--MI_SPACER-w': '800px'
-		}"
-	>
-		<MkTab v-model="tab" :class="$style.tab">
-			<option value="users">{{ i18n.ts.users }}</option>
-			<option value="notes">{{ i18n.ts.notes }}</option>
-		</MkTab>
-		<div v-if="tab === 'users'" :class="[$style.users, '_margin']" style="padding-bottom: var(--MI-margin);">
-			<MkUserInfo v-for="user in users" :key="user.id" :user="user"/>
-		</div>
-		<div v-else-if="tab === 'notes'" class="_margin _gaps" style="padding-bottom: var(--MI-margin);">
-			<MkNote v-for="note in notes" :key="note.id" :note="note" :class="$style.note"/>
-		</div>
-	</div>
+	</MkStickyContainer>
 </div>
 </template>
 
@@ -340,6 +347,15 @@ html[data-color-scheme=light] .view {
 	background-image: linear-gradient(45deg, var(--c) 16.67%, var(--MI_THEME-bg) 16.67%, var(--MI_THEME-bg) 50%, var(--c) 50%, var(--c) 66.67%, var(--MI_THEME-bg) 66.67%, var(--MI_THEME-bg) 100%);
 }
 
+.contents {
+	padding-top: calc(var(--MI-margin) / 2);
+}
+
+.tab {
+	padding: calc(var(--MI-margin) / 2) 0;
+	background: var(--MI_THEME-bg);
+}
+
 .users {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));

From 78570ffaffa167c33ed5bdbd6fc357241bf8f6df Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 31 Aug 2025 09:30:58 +0900
Subject: [PATCH 54/85] modify navbar.ts

---
 packages/frontend/src/navbar.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/navbar.ts b/packages/frontend/src/navbar.ts
index 1cd7f0a3e0..7e9ef86e2c 100644
--- a/packages/frontend/src/navbar.ts
+++ b/packages/frontend/src/navbar.ts
@@ -15,12 +15,6 @@ import { i18n } from '@/i18n.js';
 import { unisonReload } from '@/utility/unison-reload.js';
 
 export const navbarItemDef = reactive({
-	qr: {
-		title: i18n.ts.qr,
-		icon: 'ti ti-qrcode',
-		show: computed(() => $i != null),
-		to: '/qr',
-	},
 	notifications: {
 		title: i18n.ts.notifications,
 		icon: 'ti ti-bell',
@@ -72,6 +66,12 @@ export const navbarItemDef = reactive({
 			lookup();
 		},
 	},
+	qr: {
+		title: i18n.ts.qr,
+		icon: 'ti ti-qrcode',
+		show: computed(() => $i != null),
+		to: '/qr',
+	},
 	lists: {
 		title: i18n.ts.lists,
 		icon: 'ti ti-list',

From 83016acd3e0ab54eefe41a0fa99afedd8ba2798b Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 31 Aug 2025 17:21:48 +0900
Subject: [PATCH 55/85] start/stop on vue activation

---
 packages/frontend/src/pages/qr.read.vue | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/pages/qr.read.vue b/packages/frontend/src/pages/qr.read.vue
index 91ea8c147b..3ff63016a2 100644
--- a/packages/frontend/src/pages/qr.read.vue
+++ b/packages/frontend/src/pages/qr.read.vue
@@ -57,7 +57,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import QrScanner from 'qr-scanner';
-import { onMounted, onUnmounted, ref, shallowRef, watch } from 'vue';
+import { onActivated, onDeactivated, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue';
 import * as misskey from 'misskey-js';
 import { getScrollContainer } from '@@/js/scroll.js';
 import type { ApShowResponse } from 'misskey-js/entities.js';
@@ -206,12 +206,20 @@ async function startQr() {
 	qrStarted.value = true;
 }
 
-async function stopQr() {
+function stopQr() {
 	if (!scannerInstance.value) return;
-	await scannerInstance.value.stop();
+	scannerInstance.value.stop();
 	qrStarted.value = false;
 }
 
+onActivated(() => {
+	startQr;
+});
+
+onDeactivated(() => {
+	stopQr;
+});
+
 const alertLock = ref(false);
 
 onMounted(() => {

From f72e3f61e913c07593565a6a3d6a1101be2098ab Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 31 Aug 2025 20:00:48 +0900
Subject: [PATCH 56/85] display raw content read from qr

---
 .../frontend/src/pages/qr.read.raw-viewer.vue | 43 +++++++++++++++++++
 packages/frontend/src/pages/qr.read.vue       | 43 +++++++++++++------
 2 files changed, 73 insertions(+), 13 deletions(-)
 create mode 100644 packages/frontend/src/pages/qr.read.raw-viewer.vue

diff --git a/packages/frontend/src/pages/qr.read.raw-viewer.vue b/packages/frontend/src/pages/qr.read.raw-viewer.vue
new file mode 100644
index 0000000000..5e8a32c17a
--- /dev/null
+++ b/packages/frontend/src/pages/qr.read.raw-viewer.vue
@@ -0,0 +1,43 @@
+<template>
+<MkFolder defaultOpen :withSpacer="false">
+	<template #label>{{ data.split('\n')[0] }}</template>
+	<template #header>
+		<MkTabs
+			v-model:tab="tab"
+			:tabs="[{
+				key: 'raw',
+				title: 'Raw',
+			}, {
+				key: 'mfm',
+				title: 'MFM',
+			}]"
+		/>
+	</template>
+
+	<div v-show="tab === 'raw'" class="_spacer" style="--MI_SPACER-min: 14px; --MI_SPACER-max: 22px;">
+		<MkCode :code="data" lang="text"/>
+	</div>
+	<div v-show="tab === 'mfm'" class="_gaps _spacer">
+		<Mfm :text="data" :nyaize="false"/>
+		<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false"/>
+	</div>
+</MkFolder>
+</template>
+
+<script lang="ts" setup>
+import { defineProps, ref, computed } from 'vue';
+import * as mfm from 'mfm-js';
+import MkFolder from '@/components/MkFolder.vue';
+import MkTabs from '@/components/MkTabs.vue';
+import { extractUrlFromMfm } from '@/utility/extract-url-from-mfm';
+import MkCode from '@/components/MkCode.vue';
+import MkUrlPreview from '@/components/MkUrlPreview.vue';
+
+const props = defineProps<{
+	data: string;
+}>();
+
+const tab = ref<'mfm' | 'raw'>('raw');
+const parsed = computed(() => mfm.parse(props.data));
+const urls = computed(() => extractUrlFromMfm(parsed.value));
+</script>
diff --git a/packages/frontend/src/pages/qr.read.vue b/packages/frontend/src/pages/qr.read.vue
index 3ff63016a2..a9130f01d1 100644
--- a/packages/frontend/src/pages/qr.read.vue
+++ b/packages/frontend/src/pages/qr.read.vue
@@ -41,6 +41,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<MkTab v-model="tab" :class="$style.tab">
 						<option value="users">{{ i18n.ts.users }}</option>
 						<option value="notes">{{ i18n.ts.notes }}</option>
+						<option value="all">{{ i18n.ts.all }}</option>
 					</MkTab>
 				</template>
 				<div v-if="tab === 'users'" :class="[$style.users, '_margin']" style="padding-bottom: var(--MI-margin);">
@@ -49,6 +50,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<div v-else-if="tab === 'notes'" class="_margin _gaps" style="padding-bottom: var(--MI-margin);">
 					<MkNote v-for="note in notes" :key="note.id" :note="note" :class="$style.note"/>
 				</div>
+				<div v-else-if="tab === 'all'" class="_margin _gaps" style="padding-bottom: var(--MI-margin);">
+					<MkQrReadRawViewer v-for="result in Array.from(results).reverse()" :key="result" :data="result"/>
+				</div>
 			</MkStickyContainer>
 		</div>
 	</MkStickyContainer>
@@ -68,6 +72,7 @@ import { misskeyApi } from '@/utility/misskey-api.js';
 import MkNote from '@/components/MkNote.vue';
 import MkTab from '@/components/MkTab.vue';
 import MkButton from '@/components/MkButton.vue';
+import MkQrReadRawViewer from '@/pages/qr.read.raw-viewer.vue';
 
 const LIST_RERENDER_INTERVAL = 1500;
 
@@ -80,8 +85,11 @@ const scrollHeight = ref(window.innerHeight);
 
 const scannerInstance = shallowRef<QrScanner | null>(null);
 
-const tab = ref<'users' | 'notes'>('users');
+const tab = ref<'users' | 'notes' | 'all'>('users');
 
+// higher is recent
+const results = ref(new Set<string>());
+// lower is recent
 const uris = ref<string[]>([]);
 const sources = new Map<string, ApShowResponse | null>();
 const users = ref<(misskey.entities.UserDetailed)[]>([]);
@@ -92,10 +100,10 @@ const notesCount = ref(0);
 const timer = ref<number | null>(null);
 
 function updateLists() {
-	const results = uris.value.map(uri => sources.get(uri)).filter((r): r is ApShowResponse => !!r);
-	users.value = results.filter(r => r.type === 'User').map(r => r.object).filter((u): u is misskey.entities.UserDetailed => !!u);
+	const responses = uris.value.map(uri => sources.get(uri)).filter((r): r is ApShowResponse => !!r);
+	users.value = responses.filter(r => r.type === 'User').map(r => r.object).filter((u): u is misskey.entities.UserDetailed => !!u);
 	usersCount.value = users.value.length;
-	notes.value = results.filter(r => r.type === 'Note').map(r => r.object).filter((n): n is misskey.entities.Note => !!n);
+	notes.value = responses.filter(r => r.type === 'Note').map(r => r.object).filter((n): n is misskey.entities.Note => !!n);
 	notesCount.value = notes.value.length;
 	updateRequired.value = false;
 }
@@ -128,29 +136,38 @@ watch(tab, () => {
 
 async function processResult(result: QrScanner.ScanResult) {
 	if (!result) return;
-	const uri = result.data.trim();
+	const trimmed = result.data.trim();
+
+	if (!trimmed) return;
+
+	const haveExisted = results.value.has(trimmed);
+	results.value.add(trimmed);
+
 	try {
-		new URL(uri);
+		new URL(trimmed);
 	} catch {
+		if (!haveExisted) {
+			tab.value = 'all';
+		}
 		return;
 	}
 
-	if (uris.value[0] !== uri) {
+	if (uris.value[0] !== trimmed) {
 		// 並べ替え
-		uris.value = [uri, ...uris.value.slice(0, 29).filter(u => u !== uri)];
+		uris.value = [trimmed, ...uris.value.slice(0, 29).filter(u => u !== trimmed)];
 	}
 
-	if (sources.has(uri)) return;
+	if (sources.has(trimmed)) return;
 	// Start fetching user info
-	sources.set(uri, null);
+	sources.set(trimmed, null);
 
-	await misskeyApi('ap/show', { uri })
+	await misskeyApi('ap/show', { uri: trimmed })
 		.then(data => {
 			if (data.type === 'User') {
-				sources.set(uri, data);
+				sources.set(trimmed, data);
 				tab.value = 'users';
 			} else if (data.type === 'Note') {
-				sources.set(uri, data);
+				sources.set(trimmed, data);
 				tab.value = 'notes';
 			}
 			updateLists();

From a3b869e8069d4889ed554d0d48bf4914f648363e Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 31 Aug 2025 20:21:19 +0900
Subject: [PATCH 57/85] =?UTF-8?q?=E7=AB=AF=E6=9C=AB=E3=81=AEQR=E3=82=92?=
 =?UTF-8?q?=E3=82=B9=E3=82=AD=E3=83=A3=E3=83=B3=E3=81=99=E3=82=8B=E3=83=9C?=
 =?UTF-8?q?=E3=82=BF=E3=83=B3=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/index.d.ts                      |  8 +++++++
 locales/ja-JP.yml                       |  2 ++
 packages/frontend/src/pages/qr.read.vue | 32 +++++++++++++++++++++++--
 3 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 28d843535e..4b38d9a515 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -12593,6 +12593,14 @@ export interface Locale extends ILocale {
          * コードリーダーを停止
          */
         "stopQr": string;
+        /**
+         * QRコードが見つかりません
+         */
+        "noQrCodeFound": string;
+        /**
+         * 端末の画像をスキャン
+         */
+        "scanFile": string;
     };
 }
 declare const locales: {
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index a80d4a0b7a..88b8e6a6a3 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -3372,3 +3372,5 @@ _qr:
   turnOffFlash: "ライトをオフにする"
   startQr: "コードリーダーを再開"
   stopQr: "コードリーダーを停止"
+  noQrCodeFound: "QRコードが見つかりません"
+  scanFile: "端末の画像をスキャン"
diff --git a/packages/frontend/src/pages/qr.read.vue b/packages/frontend/src/pages/qr.read.vue
index a9130f01d1..20f9e82c93 100644
--- a/packages/frontend/src/pages/qr.read.vue
+++ b/packages/frontend/src/pages/qr.read.vue
@@ -18,7 +18,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div :class="$style.view">
 				<video ref="videoEl" :class="$style.video" autoplay muted playsinline></video>
 				<div ref="overlayEl" :class="$style.overlay"></div>
-				<div v-if="scannerInstance" :class="$style.controls">
+				<div :class="$style.controls">
+					<MkButton v-tooltip="i18n.ts._qr.scanFile" iconOnly @click="upload"><i class="ti ti-photo-plus"></i></MkButton>
+
 					<MkButton v-if="qrStarted" v-tooltip="i18n.ts._qr.stopQr" iconOnly @click="stopQr"><i class="ti ti-player-play"></i></MkButton>
 					<MkButton v-else v-tooltip="i18n.ts._qr.startQr" iconOnly danger @click="startQr"><i class="ti ti-player-pause"></i></MkButton>
 
@@ -173,7 +175,7 @@ async function processResult(result: QrScanner.ScanResult) {
 			updateLists();
 		})
 		.catch(err => {
-			console.error(err);
+			return err;
 		});
 }
 
@@ -181,6 +183,32 @@ const qrStarted = ref(true);
 const flashCanToggle = ref(false);
 const flash = ref(false);
 
+async function upload() {
+	os.chooseFileFromPc({ multiple: true }).then(files => {
+		if (files.length === 0) return;
+		for (const file of files) {
+			QrScanner.scanImage(file, { returnDetailedScanResult: true })
+				.then(result => {
+					processResult(result);
+				})
+				.catch(err => {
+					if (err.toString().includes('No QR code found')) {
+						os.alert({
+							type: 'info',
+							text: i18n.ts._qr.noQrCodeFound,
+						});
+					} else {
+						os.alert({
+							type: 'error',
+							text: err.toString(),
+						});
+						console.error(err);
+					}
+				});
+		}
+	});
+}
+
 async function chooseCamera() {
 	if (!scannerInstance.value) return;
 	const cameras = await QrScanner.listCameras(true);

From 9cac5aa88438979994e94daabc9e543bbb7ee0d9 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 31 Aug 2025 20:38:22 +0900
Subject: [PATCH 58/85] chore

---
 .../frontend/src/pages/qr.read.raw-viewer.vue | 29 ++++++++++++-------
 packages/frontend/src/pages/qr.read.vue       |  3 +-
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/packages/frontend/src/pages/qr.read.raw-viewer.vue b/packages/frontend/src/pages/qr.read.raw-viewer.vue
index 5e8a32c17a..58fb460a16 100644
--- a/packages/frontend/src/pages/qr.read.raw-viewer.vue
+++ b/packages/frontend/src/pages/qr.read.raw-viewer.vue
@@ -4,22 +4,31 @@
 	<template #header>
 		<MkTabs
 			v-model:tab="tab"
-			:tabs="[{
-				key: 'raw',
-				title: 'Raw',
-			}, {
-				key: 'mfm',
-				title: 'MFM',
-			}]"
+			:tabs="[
+				...(urls.length > 0 ? [{
+					key: 'urls',
+					title: 'URLs',
+				}] : []),
+				{
+					key: 'raw',
+					title: 'Raw',
+				},
+				{
+					key: 'mfm',
+					title: 'MFM',
+				},
+			]"
 		/>
 	</template>
 
+	<div v-show="tab === 'urls'" class="_spacer _gaps">
+		<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false"/>
+	</div>
 	<div v-show="tab === 'raw'" class="_spacer" style="--MI_SPACER-min: 14px; --MI_SPACER-max: 22px;">
 		<MkCode :code="data" lang="text"/>
 	</div>
-	<div v-show="tab === 'mfm'" class="_gaps _spacer">
+	<div v-show="tab === 'mfm'" class="_spacer">
 		<Mfm :text="data" :nyaize="false"/>
-		<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false"/>
 	</div>
 </MkFolder>
 </template>
@@ -37,7 +46,7 @@ const props = defineProps<{
 	data: string;
 }>();
 
-const tab = ref<'mfm' | 'raw'>('raw');
 const parsed = computed(() => mfm.parse(props.data));
 const urls = computed(() => extractUrlFromMfm(parsed.value));
+const tab = ref<'urls' | 'mfm' | 'raw'>(urls.value.length > 0 ? 'urls' : 'mfm');
 </script>
diff --git a/packages/frontend/src/pages/qr.read.vue b/packages/frontend/src/pages/qr.read.vue
index 20f9e82c93..3a2e00d63a 100644
--- a/packages/frontend/src/pages/qr.read.vue
+++ b/packages/frontend/src/pages/qr.read.vue
@@ -175,7 +175,8 @@ async function processResult(result: QrScanner.ScanResult) {
 			updateLists();
 		})
 		.catch(err => {
-			return err;
+			tab.value = 'all';
+			throw err;
 		});
 }
 

From 7650310fb1a4b8165158cecd740afede4c62fa22 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 31 Aug 2025 20:50:26 +0900
Subject: [PATCH 59/85] =?UTF-8?q?=E3=82=84=E3=81=A3=E3=81=B1=E3=82=8Amfm?=
 =?UTF-8?q?=E3=82=92=E5=85=88=E3=81=AB=E8=A1=A8=E7=A4=BA=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/ja-JP.yml                             |  3 +++
 .../frontend/src/pages/qr.read.raw-viewer.vue | 22 ++++++++-----------
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 88b8e6a6a3..aef53448c0 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -3374,3 +3374,6 @@ _qr:
   stopQr: "コードリーダーを停止"
   noQrCodeFound: "QRコードが見つかりません"
   scanFile: "端末の画像をスキャン"
+  urls: "URL"
+  raw: "生データ"
+  mfm: "MFM"
diff --git a/packages/frontend/src/pages/qr.read.raw-viewer.vue b/packages/frontend/src/pages/qr.read.raw-viewer.vue
index 58fb460a16..3628092db4 100644
--- a/packages/frontend/src/pages/qr.read.raw-viewer.vue
+++ b/packages/frontend/src/pages/qr.read.raw-viewer.vue
@@ -5,31 +5,27 @@
 		<MkTabs
 			v-model:tab="tab"
 			:tabs="[
-				...(urls.length > 0 ? [{
-					key: 'urls',
-					title: 'URLs',
-				}] : []),
-				{
-					key: 'raw',
-					title: 'Raw',
-				},
 				{
 					key: 'mfm',
 					title: 'MFM',
+					icon: 'ti ti-align-left',
+				},
+				{
+					key: 'raw',
+					title: 'Raw',
+					icon: 'ti ti-code',
 				},
 			]"
 		/>
 	</template>
 
-	<div v-show="tab === 'urls'" class="_spacer _gaps">
+	<div v-show="tab === 'mfm'" class="_spacer">
+		<Mfm :text="data" :nyaize="false"/>
 		<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false"/>
 	</div>
 	<div v-show="tab === 'raw'" class="_spacer" style="--MI_SPACER-min: 14px; --MI_SPACER-max: 22px;">
 		<MkCode :code="data" lang="text"/>
 	</div>
-	<div v-show="tab === 'mfm'" class="_spacer">
-		<Mfm :text="data" :nyaize="false"/>
-	</div>
 </MkFolder>
 </template>
 
@@ -48,5 +44,5 @@ const props = defineProps<{
 
 const parsed = computed(() => mfm.parse(props.data));
 const urls = computed(() => extractUrlFromMfm(parsed.value));
-const tab = ref<'urls' | 'mfm' | 'raw'>(urls.value.length > 0 ? 'urls' : 'mfm');
+const tab = ref<'mfm' | 'raw'>('mfm');
 </script>

From 09d39d1fcffe545755d0d03aabf711f1fd366ff8 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 31 Aug 2025 21:00:21 +0900
Subject: [PATCH 60/85] :art:

---
 packages/frontend/src/pages/qr.read.raw-viewer.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/pages/qr.read.raw-viewer.vue b/packages/frontend/src/pages/qr.read.raw-viewer.vue
index 3628092db4..551c9bbc74 100644
--- a/packages/frontend/src/pages/qr.read.raw-viewer.vue
+++ b/packages/frontend/src/pages/qr.read.raw-viewer.vue
@@ -19,11 +19,11 @@
 		/>
 	</template>
 
-	<div v-show="tab === 'mfm'" class="_spacer">
+	<div v-show="tab === 'mfm'" class="_spacer _gaps">
 		<Mfm :text="data" :nyaize="false"/>
 		<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false"/>
 	</div>
-	<div v-show="tab === 'raw'" class="_spacer" style="--MI_SPACER-min: 14px; --MI_SPACER-max: 22px;">
+	<div v-show="tab === 'raw'" class="_spacer" style="--MI_SPACER-min: 10px; --MI_SPACER-max: 16px;">
 		<MkCode :code="data" lang="text"/>
 	</div>
 </MkFolder>

From bcb36d8b6fcbdfeb8a1cd19031df9cbd2c9537f9 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 31 Aug 2025 21:52:17 +0900
Subject: [PATCH 61/85] fix 18n

---
 locales/index.d.ts                                 | 8 ++++++++
 locales/ja-JP.yml                                  | 3 +--
 packages/frontend/src/pages/qr.read.raw-viewer.vue | 5 +++--
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 4b38d9a515..9ca156c9de 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -12601,6 +12601,14 @@ export interface Locale extends ILocale {
          * 端末の画像をスキャン
          */
         "scanFile": string;
+        /**
+         * テキスト
+         */
+        "raw": string;
+        /**
+         * MFM
+         */
+        "mfm": string;
     };
 }
 declare const locales: {
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index aef53448c0..9a26206947 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -3374,6 +3374,5 @@ _qr:
   stopQr: "コードリーダーを停止"
   noQrCodeFound: "QRコードが見つかりません"
   scanFile: "端末の画像をスキャン"
-  urls: "URL"
-  raw: "生データ"
+  raw: "テキスト"
   mfm: "MFM"
diff --git a/packages/frontend/src/pages/qr.read.raw-viewer.vue b/packages/frontend/src/pages/qr.read.raw-viewer.vue
index 551c9bbc74..f8b9cfeeff 100644
--- a/packages/frontend/src/pages/qr.read.raw-viewer.vue
+++ b/packages/frontend/src/pages/qr.read.raw-viewer.vue
@@ -7,12 +7,12 @@
 			:tabs="[
 				{
 					key: 'mfm',
-					title: 'MFM',
+					title: i18n.ts._qr.mfm,
 					icon: 'ti ti-align-left',
 				},
 				{
 					key: 'raw',
-					title: 'Raw',
+					title: i18n.ts._qr.raw,
 					icon: 'ti ti-code',
 				},
 			]"
@@ -37,6 +37,7 @@ import MkTabs from '@/components/MkTabs.vue';
 import { extractUrlFromMfm } from '@/utility/extract-url-from-mfm';
 import MkCode from '@/components/MkCode.vue';
 import MkUrlPreview from '@/components/MkUrlPreview.vue';
+import { i18n } from '@/i18n.js';
 
 const props = defineProps<{
 	data: string;

From 21f4dd1d7a7b53548e8cc222e57aeeae9122e35f Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Wed, 3 Sep 2025 00:52:15 +0900
Subject: [PATCH 62/85] =?UTF-8?q?QR=E3=81=AE=E5=86=85=E5=AE=B9=E3=81=AF/us?=
 =?UTF-8?q?ers/:userId=E3=81=AB=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/pages/qr.show.vue | 42 +++++++++++++------------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index 5cb4770506..de3e94b80d 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -4,11 +4,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div ref="rootEl" :class="$style.root" :style="{
-	backgroundColor: bgColor,
-	'--MI-QrShowScrollHeight': scrollContainer ? `${scrollHeight}px` : `calc( 100dvh - var(--MI-minBottomSpacing, 0px) )`,
-}">
-	<MkAnimBg style="position: absolute; top: 0;" :scale="1.5" />
+<div
+	ref="rootEl" :class="$style.root" :style="{
+		backgroundColor: bgColor,
+		'--MI-QrShowScrollHeight': scrollContainer ? `${scrollHeight}px` : `calc( 100dvh - var(--MI-minBottomSpacing, 0px) )`,
+	}"
+>
+	<MkAnimBg style="position: absolute; top: 0;" :scale="1.5"/>
 	<div :class="$style.fg">
 		<div
 			:class="[$style.content, '_spacer']"
@@ -33,8 +35,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<div :class="$style.username"><MkCondensedLine :minScale="2 / 3">{{ acct }}</MkCondensedLine></div>
 				</div>
 			</div>
-			<img v-if="deviceMotionPermissionNeeded" v-flip :class="$style.logo" :src="misskeysvg" alt="Misskey Logo" @click="requestDeviceMotion" />
-			<img v-else v-flip :class="$style.logo" :src="misskeysvg" alt="Misskey Logo" />
+			<img v-if="deviceMotionPermissionNeeded" v-flip :class="$style.logo" :src="misskeysvg" alt="Misskey Logo" @click="requestDeviceMotion"/>
+			<img v-else v-flip :class="$style.logo" :src="misskeysvg" alt="Misskey Logo"/>
 		</div>
 	</div>
 </div>
@@ -44,9 +46,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { extractAvgColorFromBlurhash } from '@@/js/extract-avg-color-from-blurhash.js';
 import tinycolor from 'tinycolor2';
 import QRCodeStyling from 'qr-code-styling';
-import type { Directive } from 'vue';
 import { computed, ref, shallowRef, watch, onMounted, onUnmounted } from 'vue';
-import { host } from '@@/js/config.js';
+import { url, host } from '@@/js/config.js';
+import { getScrollContainer } from '@@/js/scroll';
+import type { Directive } from 'vue';
 import { instance } from '@/instance.js';
 import { ensureSignin } from '@/i.js';
 import { userPage, userName } from '@/filters/user.js';
@@ -54,7 +57,6 @@ import misskeysvg from '/client-assets/misskey.svg';
 import MkAnimBg from '@/components/MkAnimBg.vue';
 import { getStaticImageUrl } from '@/utility/media-proxy.js';
 import { i18n } from '@/i18n.js';
-import { getScrollContainer } from '@@/js/scroll';
 
 const $i = ensureSignin();
 
@@ -63,9 +65,13 @@ const rootEl = ref<HTMLDivElement | null>(null);
 const scrollHeight = ref(window.innerHeight);
 
 const acct = computed(() => `@${$i.username}@${host}`);
-const url = computed(() => userPage($i, undefined, true));
-
-const canShare = computed(() => navigator.canShare && navigator.canShare({ url: url.value }));
+const userProfileUrl = computed(() => userPage($i, undefined, true));
+const shareData = computed(() => ({
+	title: i18n.tsx._qr.shareTitle({ name: userName($i), acct: acct.value }),
+	text: i18n.ts._qr.shareText,
+	url: userProfileUrl.value,
+}));
+const canShare = computed(() => navigator.canShare && navigator.canShare(shareData.value));
 
 const qrCodeEl = ref<HTMLDivElement | null>(null);
 
@@ -80,11 +86,7 @@ const bgColor = tinycolor(`hsl(${avatarHsl.value.h}, 60, 46)`).toRgbString();
 
 function share() {
 	if (!canShare.value) return;
-	return navigator.share({
-		title: i18n.tsx._qr.shareTitle({ name: userName($i), acct: acct.value }),
-		text: i18n.ts._qr.shareText,
-		url: url.value,
-	});
+	return navigator.share(shareData.value);
 }
 
 const qrCodeInstance = new QRCodeStyling({
@@ -92,7 +94,7 @@ const qrCodeInstance = new QRCodeStyling({
 	height: 600,
 	margin: 36,
 	type: 'canvas',
-	data: url.value,
+	data: `${url}/users/${$i.id}`,
 	image: instance.iconUrl ? getStaticImageUrl(instance.iconUrl) : '/favicon.ico',
 	qrOptions: {
 		typeNumber: 0,
@@ -197,7 +199,7 @@ const vFlip = {
 	unmounted(el: Element) {
 		el.classList.remove('_qrShowFlip');
 		flipEls.delete(el);
-	}
+	},
 } as Directive;
 //#endregion
 </script>

From 91245d146da209d67dfbb5173ee655ac32860ea8 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Wed, 3 Sep 2025 01:06:56 +0900
Subject: [PATCH 63/85] add spdx

---
 packages/frontend/src/pages/qr.read.raw-viewer.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/frontend/src/pages/qr.read.raw-viewer.vue b/packages/frontend/src/pages/qr.read.raw-viewer.vue
index f8b9cfeeff..48e225abd3 100644
--- a/packages/frontend/src/pages/qr.read.raw-viewer.vue
+++ b/packages/frontend/src/pages/qr.read.raw-viewer.vue
@@ -1,3 +1,8 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
 <template>
 <MkFolder defaultOpen :withSpacer="false">
 	<template #label>{{ data.split('\n')[0] }}</template>

From 73853b08f583043ba05c9bf44f0a6ee4ec4d1df4 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 8 Sep 2025 22:53:17 +0900
Subject: [PATCH 64/85] use cqh

---
 packages/frontend/src/pages/qr.read.vue | 28 +------------------------
 packages/frontend/src/pages/qr.show.vue | 28 ++-----------------------
 2 files changed, 3 insertions(+), 53 deletions(-)

diff --git a/packages/frontend/src/pages/qr.read.vue b/packages/frontend/src/pages/qr.read.vue
index 3a2e00d63a..028248d4ff 100644
--- a/packages/frontend/src/pages/qr.read.vue
+++ b/packages/frontend/src/pages/qr.read.vue
@@ -8,8 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	ref="rootEl"
 	:class="$style.root"
 	:style="{
-		'--MI-QrReadScrollHeight': scrollContainer ? `${scrollHeight}px` : `calc( 100dvh - var(--MI-minBottomSpacing) )`,
-		'--MI-QrReadViewHeight': 'calc(var(--MI-QrReadScrollHeight) - var(--MI-stickyTop, 0px) - var(--MI-stickyBottom, 0px))',
+		'--MI-QrReadViewHeight': 'calc(100cqh - var(--MI-stickyTop, 0px) - var(--MI-stickyBottom, 0px))',
 		'--MI-QrReadVideoHeight': 'min(calc(var(--MI-QrReadViewHeight) * 0.3), 512px)',
 	}"
 >
@@ -82,9 +81,6 @@ const rootEl = ref<HTMLDivElement | null>(null);
 const videoEl = ref<HTMLVideoElement | null>(null);
 const overlayEl = ref<HTMLDivElement | null>(null);
 
-const scrollContainer = shallowRef<HTMLElement | null>(null);
-const scrollHeight = ref(window.innerHeight);
-
 const scannerInstance = shallowRef<QrScanner | null>(null);
 
 const tab = ref<'users' | 'notes' | 'all'>('users');
@@ -335,28 +331,6 @@ onUnmounted(() => {
 
 	scannerInstance.value?.destroy();
 });
-
-//#region scroll height
-function checkScrollHeight() {
-	scrollHeight.value = scrollContainer.value ? scrollContainer.value.clientHeight : window.innerHeight;
-}
-
-let ro: ResizeObserver | undefined;
-
-onMounted(() => {
-	scrollContainer.value = getScrollContainer(rootEl.value);
-	checkScrollHeight();
-
-	if (scrollContainer.value) {
-		ro = new ResizeObserver(checkScrollHeight);
-		ro.observe(scrollContainer.value);
-	}
-});
-
-onUnmounted(() => {
-	ro?.disconnect();
-});
-//#endregion
 </script>
 
 <style lang="scss" module>
diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index de3e94b80d..c403cab4f1 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -7,7 +7,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 <div
 	ref="rootEl" :class="$style.root" :style="{
 		backgroundColor: bgColor,
-		'--MI-QrShowScrollHeight': scrollContainer ? `${scrollHeight}px` : `calc( 100dvh - var(--MI-minBottomSpacing, 0px) )`,
 	}"
 >
 	<MkAnimBg style="position: absolute; top: 0;" :scale="1.5"/>
@@ -62,7 +61,6 @@ const $i = ensureSignin();
 
 const scrollContainer = shallowRef<HTMLElement | null>(null);
 const rootEl = ref<HTMLDivElement | null>(null);
-const scrollHeight = ref(window.innerHeight);
 
 const acct = computed(() => `@${$i.username}@${host}`);
 const userProfileUrl = computed(() => userPage($i, undefined, true));
@@ -131,28 +129,6 @@ onMounted(() => {
 	}
 });
 
-//#region scroll height
-function checkScrollHeight() {
-	scrollHeight.value = scrollContainer.value ? scrollContainer.value.clientHeight : window.innerHeight;
-}
-
-let ro: ResizeObserver | undefined;
-
-onMounted(() => {
-	scrollContainer.value = getScrollContainer(rootEl.value);
-	checkScrollHeight();
-
-	if (scrollContainer.value) {
-		ro = new ResizeObserver(checkScrollHeight);
-		ro.observe(scrollContainer.value);
-	}
-});
-
-onUnmounted(() => {
-	ro?.disconnect();
-});
-//#endregion
-
 //#region flip
 const THRESHOLD = -3;
 // @ts-expect-error TS(2339)
@@ -216,7 +192,7 @@ $avatarSize: 58px;
 	margin-top: calc( -1 * var(--MI-stickyTop) );
 	margin-bottom: calc( -1 * var(--MI-stickyBottom) );
 	height: fit-content;
-	min-height: var(--MI-QrShowScrollHeight);
+	min-height: 100cqh;
 }
 
 .fg {
@@ -239,7 +215,7 @@ $avatarSize: 58px;
 	display: flex;
 	width: 100%;
 	padding: 0 0 $s3;
-	max-height: max(256px, calc((var(--MI-QrShowScrollHeight) - var(--MI-stickyTop, 0px) - var(--MI-stickyBottom, 0px)) * 0.55));
+	max-height: max(256px, calc((100cqh - var(--MI-stickyTop, 0px) - var(--MI-stickyBottom, 0px)) * 0.55));
 }
 
 .qrInner {

From 19f54b1bcbb61dcef1a57fd6c685426aa314e405 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 8 Sep 2025 22:53:41 +0900
Subject: [PATCH 65/85] `defineProps` is a compiler macro and no longer needs
 to be imported.

---
 packages/frontend/src/pages/qr.read.raw-viewer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/pages/qr.read.raw-viewer.vue b/packages/frontend/src/pages/qr.read.raw-viewer.vue
index 48e225abd3..5a23e2322d 100644
--- a/packages/frontend/src/pages/qr.read.raw-viewer.vue
+++ b/packages/frontend/src/pages/qr.read.raw-viewer.vue
@@ -35,7 +35,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { defineProps, ref, computed } from 'vue';
+import { ref, computed } from 'vue';
 import * as mfm from 'mfm-js';
 import MkFolder from '@/components/MkFolder.vue';
 import MkTabs from '@/components/MkTabs.vue';

From 84dad9433cf9fcff184157b0fc387cebe7fb0b04 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Wed, 10 Sep 2025 22:35:52 +0900
Subject: [PATCH 66/85] use MkUserName

---
 packages/frontend/src/pages/qr.show.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index c403cab4f1..2256af6068 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div v-flip :class="$style.user">
 				<MkAvatar :class="$style.avatar" :user="$i" :indicator="false"/>
 				<div :class="$style.names">
-					<div :class="$style.name"><MkCondensedLine :minScale="2 / 3">{{ userName($i) }}</MkCondensedLine></div>
+					<div :class="$style.name"><MkCondensedLine :minScale="2 / 3"><MkUserName :user="$i" :nowrap="true"/></MkCondensedLine></div>
 					<div :class="$style.username"><MkCondensedLine :minScale="2 / 3">{{ acct }}</MkCondensedLine></div>
 				</div>
 			</div>

From 268b303e0c5281c95ebf0a0a153311d1bc091d4f Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sun, 14 Sep 2025 21:02:27 +0900
Subject: [PATCH 67/85] =?UTF-8?q?=F0=9F=8E=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/src/components/MkPolkadots.vue   |  15 +-
 packages/frontend/src/pages/chat/home.vue     |   2 +-
 packages/frontend/src/pages/qr.show.vue       | 128 +++++-------------
 packages/frontend/src/pages/qr.vue            |  37 +++--
 4 files changed, 63 insertions(+), 119 deletions(-)

diff --git a/packages/frontend/src/components/MkPolkadots.vue b/packages/frontend/src/components/MkPolkadots.vue
index 285c4d0b79..4f1346b685 100644
--- a/packages/frontend/src/components/MkPolkadots.vue
+++ b/packages/frontend/src/components/MkPolkadots.vue
@@ -4,14 +4,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div :class="[$style.root, accented ? $style.accented : null]"></div>
+<div :class="[$style.root, accented ? $style.accented : null, revered ? $style.revered : null]"/>
 </template>
 
 <script lang="ts" setup>
 const props = withDefaults(defineProps<{
 	accented?: boolean;
+	revered?: boolean;
+	height?: number;
 }>(), {
 	accented: false,
+	revered: false,
+	height: 200,
 });
 </script>
 
@@ -27,14 +31,17 @@ const props = withDefaults(defineProps<{
 	--dot-size: 2px;
 	--gap-size: 40px;
 	--offset: calc(var(--gap-size) / 2);
+	--height: v-bind('props.height + "px"');
 
-	height: 200px;
-	margin-bottom: -200px;
-
+	height: var(--height);
 	background-image: linear-gradient(transparent 60%, transparent 100%), radial-gradient(var(--c) var(--dot-size), transparent var(--dot-size)), radial-gradient(var(--c) var(--dot-size), transparent var(--dot-size));
 	background-position: 0 0, 0 0, var(--offset) var(--offset);
 	background-size: 100% 100%, var(--gap-size) var(--gap-size), var(--gap-size) var(--gap-size);
 	mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
 	pointer-events: none;
+
+	&.revered {
+		mask-image: linear-gradient(to top, black 0%, transparent 100%);
+	}
 }
 </style>
diff --git a/packages/frontend/src/pages/chat/home.vue b/packages/frontend/src/pages/chat/home.vue
index 652ab04be6..bbf93a2f49 100644
--- a/packages/frontend/src/pages/chat/home.vue
+++ b/packages/frontend/src/pages/chat/home.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :swipable="true">
-	<MkPolkadots v-if="tab === 'home'" accented/>
+	<MkPolkadots v-if="tab === 'home'" accented :height="200" style="margin-bottom: -200px;"/>
 	<div class="_spacer" style="--MI_SPACER-w: 700px;">
 		<XHome v-if="tab === 'home'"/>
 		<XInvitations v-else-if="tab === 'invitations'"/>
diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index 2256af6068..bb9d58ad67 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -4,39 +4,23 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div
-	ref="rootEl" :class="$style.root" :style="{
-		backgroundColor: bgColor,
-	}"
->
-	<MkAnimBg style="position: absolute; top: 0;" :scale="1.5"/>
-	<div :class="$style.fg">
+<div ref="rootEl" :class="$style.root">
+	<div :class="[$style.content]">
 		<div
-			:class="[$style.content, '_spacer']"
-			:style="{
-				'--MI_SPACER-w': '512px',
-				'--MI_SPACER-max': '14px',
+			ref="qrCodeEl" v-flip :style="{
+				'cursor': canShare ? 'pointer' : 'default',
 			}"
-		>
-			<div
-				:class="$style.qrOuter"
-				:style="{
-					'cursor': canShare ? 'pointer' : 'default',
-				}"
-				@click="share"
-			>
-				<div ref="qrCodeEl" v-flip :class="$style.qrInner"></div>
+			:class="$style.qr" @click="share"
+		></div>
+		<div v-flip :class="$style.user">
+			<MkAvatar :class="$style.avatar" :user="$i" :indicator="false"/>
+			<div :class="$style.names">
+				<div :class="$style.name"><MkCondensedLine :minScale="2 / 3"><MkUserName :user="$i" :nowrap="true"/></MkCondensedLine></div>
+				<div :class="$style.username"><MkCondensedLine :minScale="2 / 3">{{ acct }}</MkCondensedLine></div>
 			</div>
-			<div v-flip :class="$style.user">
-				<MkAvatar :class="$style.avatar" :user="$i" :indicator="false"/>
-				<div :class="$style.names">
-					<div :class="$style.name"><MkCondensedLine :minScale="2 / 3"><MkUserName :user="$i" :nowrap="true"/></MkCondensedLine></div>
-					<div :class="$style.username"><MkCondensedLine :minScale="2 / 3">{{ acct }}</MkCondensedLine></div>
-				</div>
-			</div>
-			<img v-if="deviceMotionPermissionNeeded" v-flip :class="$style.logo" :src="misskeysvg" alt="Misskey Logo" @click="requestDeviceMotion"/>
-			<img v-else v-flip :class="$style.logo" :src="misskeysvg" alt="Misskey Logo"/>
 		</div>
+		<img v-if="deviceMotionPermissionNeeded" v-flip :class="$style.logo" :src="misskeysvg" alt="Misskey Logo" @click="requestDeviceMotion"/>
+		<img v-else v-flip :class="$style.logo" :src="misskeysvg" alt="Misskey Logo"/>
 	</div>
 </div>
 </template>
@@ -73,12 +57,7 @@ const canShare = computed(() => navigator.canShare && navigator.canShare(shareDa
 
 const qrCodeEl = ref<HTMLDivElement | null>(null);
 
-const avatarColor = computed(() => tinycolor(
-	$i.avatarBlurhash ?
-		extractAvgColorFromBlurhash($i.avatarBlurhash)
-		: instance.themeColor
-		?? '#86b300',
-));
+const avatarColor = computed(() => tinycolor(instance.themeColor ?? '#86b300'));
 const avatarHsl = computed(() => avatarColor.value.toHsl());
 const bgColor = tinycolor(`hsl(${avatarHsl.value.h}, 60, 46)`).toRgbString();
 
@@ -90,7 +69,7 @@ function share() {
 const qrCodeInstance = new QRCodeStyling({
 	width: 600,
 	height: 600,
-	margin: 36,
+	margin: 42,
 	type: 'canvas',
 	data: `${url}/users/${$i.id}`,
 	image: instance.iconUrl ? getStaticImageUrl(instance.iconUrl) : '/favicon.ico',
@@ -107,16 +86,6 @@ const qrCodeInstance = new QRCodeStyling({
 	},
 	dotsOptions: {
 		color: tinycolor(`hsl(${avatarHsl.value.h}, 100, 18)`).toRgbString(),
-		gradient: {
-			type: 'linear',
-			rotation: 1, // radian
-			colorStops: [
-				{ offset: 0, color: tinycolor(`hsl(${avatarHsl.value.h}, 100, 25)`).toRgbString() },
-				{ offset: 0.5, color: tinycolor(`hsl(${avatarHsl.value.h}, 100, 20)`).toRgbString() },
-				{ offset: 1, color: tinycolor(`hsl(${avatarHsl.value.h}, 100, 6)`).toRgbString() },
-			],
-		},
-		type: 'classy-rounded',
 	},
 	backgroundOptions: {
 		color: tinycolor(`hsl(${avatarHsl.value.h}, 100, 97)`).toRgbString(),
@@ -188,19 +157,7 @@ $avatarSize: 58px;
 
 .root {
 	position: relative;
-	box-sizing: border-box;
-	margin-top: calc( -1 * var(--MI-stickyTop) );
-	margin-bottom: calc( -1 * var(--MI-stickyBottom) );
-	height: fit-content;
-	min-height: 100cqh;
-}
-
-.fg {
-	position: sticky;
-  padding-top: var(--MI-stickyTop);
-	padding-bottom: var(--MI-stickyBottom);
-	width: 100%;
-	height: 100%;
+	padding-top: 16px;
 }
 
 .content {
@@ -208,32 +165,34 @@ $avatarSize: 58px;
 	flex-direction: column;
 	align-items: center;
 	margin: 0 auto;
-	padding-top: $s1;
 }
 
-.qrOuter {
-	display: flex;
+.qr {
+	position: relative;
+	margin: 0 auto;
 	width: 100%;
-	padding: 0 0 $s3;
-	max-height: max(256px, calc((100cqh - var(--MI-stickyTop, 0px) - var(--MI-stickyBottom, 0px)) * 0.55));
-}
-
-.qrInner {
-	margin: 0;
+	max-width: 250px;
+	border-radius: 8px;
+	overflow: clip;
+	aspect-ratio: 1;
 
 	> svg,
 	> canvas {
+		position: absolute;
+		top: 0;
+		left: 0;
 		width: 100%;
 		height: 100%;
-		object-fit: contain;
 	}
 }
 
 .user {
 	display: flex;
+	flex-direction: column;
 	margin: $s3 auto;
 	justify-content: center;
 	align-items: center;
+	text-align: center;
 	overflow: visible;
 	width: fit-content;
 	max-width: 100%;
@@ -242,44 +201,23 @@ $avatarSize: 58px;
 .avatar {
 	width: $avatarSize;
 	height: $avatarSize;
+	margin-bottom: 16px;
 }
 
 .names {
-	display: flex;
-	font-weight: bold;
-	flex-direction: column;
-	justify-content: center;
-	align-items: start;
-	margin: -2px -2px 0 ($avatarSize * 0.25);
-	padding-right: 16px;
-	max-width: 100%;
-	overflow-x: hidden;
-	overflow-y: visible;
-	mask-image: linear-gradient(90deg,#000,#000 calc(100% - 16px),#0000);
+
 }
 
 .name {
-	display: inline-block;
-	color: #fff;
-	font-size: 18px;
-	line-height: 21px;
-	width: fit-content;
-	max-width: 100%;
-	overflow: visible;
+	font-weight: bold;
 }
 
 .username {
-	display: inline-block;
-	color: rgba(255, 255, 255, 0.7);
-	font-size: 13px;
-	line-height: 15px;
-	width: fit-content;
-	max-width: 100%;
-	overflow: visible;
+
 }
 
 .logo {
-	width: 25%;
+	width: 100px;
 	margin: $s3 auto 0;
 }
 </style>
diff --git a/packages/frontend/src/pages/qr.vue b/packages/frontend/src/pages/qr.vue
index 4f106c2a89..2dd1769263 100644
--- a/packages/frontend/src/pages/qr.vue
+++ b/packages/frontend/src/pages/qr.vue
@@ -4,39 +4,34 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<PageWithHeader v-model:tab="tab" :class="$style.root" :tabs="headerTabs" :swipable="true">
-	<MkQrShow v-if="tab === 'show'"/>
-	<MkQrRead v-else-if="tab === 'read'"/>
-	<MkError v-else-if="error" :error="error"/>
-	<MkLoading v-else/>
-</PageWithHeader>
+<div :class="$style.root" class="_pageScrollable">
+	<div class="_spacer" style="min-height: 100%;">
+		<MkButton v-if="read" :class="$style.button" rounded @click="read = false"><i class="ti ti-qrcode"></i> {{ i18n.ts._qr.showTabTitle }}</MkButton>
+		<MkButton v-else :class="$style.button" rounded @click="read = true"><i class="ti ti-scan"></i> {{ i18n.ts._qr.readTabTitle }}</MkButton>
+
+		<MkQrRead v-if="read"/>
+		<MkQrShow v-else/>
+	</div>
+	<MkPolkadots v-if="!read" accented revered :height="200" style="position: sticky; bottom: 0; margin-top: -200px;"/>
+</div>
 </template>
 
 <script lang="ts" setup>
 import { defineAsyncComponent, ref, shallowRef } from 'vue';
+import MkQrShow from './qr.show.vue';
 import { definePage } from '@/page.js';
 import { i18n } from '@/i18n.js';
 import { ensureSignin } from '@/i';
-import MkQrShow from './qr.show.vue';
+import MkButton from '@/components/MkButton.vue';
+import MkPolkadots from '@/components/MkPolkadots.vue';
 
 // router definitionでloginRequiredが設定されているためエラーハンドリングしない
 const $i = ensureSignin();
 
-const tab = ref<'read' | 'show'>('show');
-const error = ref<any>(null);
+const read = ref(false);
 
 const MkQrRead = defineAsyncComponent(() => import('./qr.read.vue'));
 
-const headerTabs = [{
-	key: 'show',
-	title: i18n.ts._qr.showTabTitle,
-	icon: 'ti ti-qrcode',
-}, {
-	key: 'read',
-	title: i18n.ts._qr.readTabTitle,
-	icon: 'ti ti-scan',
-}];
-
 definePage(() => ({
 	title: i18n.ts.qr,
 	icon: 'ti ti-qrcode',
@@ -47,4 +42,8 @@ definePage(() => ({
 .root {
 	height: 100%;
 }
+
+.button {
+	margin: 0 auto 16px auto;
+}
 </style>

From 923111d538b370e6de5f90b41702895428dbe128 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 15 Sep 2025 08:48:07 +0900
Subject: [PATCH 68/85] =?UTF-8?q?=F0=9F=8E=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/pages/qr.show.vue | 5 ++++-
 packages/frontend/src/pages/qr.vue      | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index bb9d58ad67..33641e9a02 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -157,7 +157,10 @@ $avatarSize: 58px;
 
 .root {
 	position: relative;
-	padding-top: 16px;
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
 }
 
 .content {
diff --git a/packages/frontend/src/pages/qr.vue b/packages/frontend/src/pages/qr.vue
index 2dd1769263..e7c34dcff4 100644
--- a/packages/frontend/src/pages/qr.vue
+++ b/packages/frontend/src/pages/qr.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div :class="$style.root" class="_pageScrollable">
-	<div class="_spacer" style="min-height: 100%;">
+	<div class="_spacer" style="min-height: 100%; display: flex; flex-direction: column;">
 		<MkButton v-if="read" :class="$style.button" rounded @click="read = false"><i class="ti ti-qrcode"></i> {{ i18n.ts._qr.showTabTitle }}</MkButton>
 		<MkButton v-else :class="$style.button" rounded @click="read = true"><i class="ti ti-scan"></i> {{ i18n.ts._qr.readTabTitle }}</MkButton>
 

From 6f24b3b66183eb8c7bfd3c2e08a88f27b9a691a3 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 15 Sep 2025 08:57:30 +0900
Subject: [PATCH 69/85] refactor

---
 packages/frontend/src/pages/qr.show.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index 33641e9a02..e28b535e16 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -29,7 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { extractAvgColorFromBlurhash } from '@@/js/extract-avg-color-from-blurhash.js';
 import tinycolor from 'tinycolor2';
 import QRCodeStyling from 'qr-code-styling';
-import { computed, ref, shallowRef, watch, onMounted, onUnmounted } from 'vue';
+import { computed, ref, shallowRef, watch, onMounted, onUnmounted, useTemplateRef } from 'vue';
 import { url, host } from '@@/js/config.js';
 import { getScrollContainer } from '@@/js/scroll';
 import type { Directive } from 'vue';
@@ -44,7 +44,7 @@ import { i18n } from '@/i18n.js';
 const $i = ensureSignin();
 
 const scrollContainer = shallowRef<HTMLElement | null>(null);
-const rootEl = ref<HTMLDivElement | null>(null);
+const rootEl = useTemplateRef('rootEl');
 
 const acct = computed(() => `@${$i.username}@${host}`);
 const userProfileUrl = computed(() => userPage($i, undefined, true));
@@ -55,7 +55,7 @@ const shareData = computed(() => ({
 }));
 const canShare = computed(() => navigator.canShare && navigator.canShare(shareData.value));
 
-const qrCodeEl = ref<HTMLDivElement | null>(null);
+const qrCodeEl = useTemplateRef('qrCodeEl');
 
 const avatarColor = computed(() => tinycolor(instance.themeColor ?? '#86b300'));
 const avatarHsl = computed(() => avatarColor.value.toHsl());

From 0306298071c1b73588c6f500c2e8d8d5b2010d40 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 15 Sep 2025 08:58:16 +0900
Subject: [PATCH 70/85] clean up

---
 packages/frontend/src/pages/qr.show.vue | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index e28b535e16..6c81077a3f 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div ref="rootEl" :class="$style.root">
+<div :class="$style.root">
 	<div :class="[$style.content]">
 		<div
 			ref="qrCodeEl" v-flip :style="{
@@ -26,26 +26,20 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { extractAvgColorFromBlurhash } from '@@/js/extract-avg-color-from-blurhash.js';
 import tinycolor from 'tinycolor2';
 import QRCodeStyling from 'qr-code-styling';
 import { computed, ref, shallowRef, watch, onMounted, onUnmounted, useTemplateRef } from 'vue';
 import { url, host } from '@@/js/config.js';
-import { getScrollContainer } from '@@/js/scroll';
 import type { Directive } from 'vue';
 import { instance } from '@/instance.js';
 import { ensureSignin } from '@/i.js';
 import { userPage, userName } from '@/filters/user.js';
 import misskeysvg from '/client-assets/misskey.svg';
-import MkAnimBg from '@/components/MkAnimBg.vue';
 import { getStaticImageUrl } from '@/utility/media-proxy.js';
 import { i18n } from '@/i18n.js';
 
 const $i = ensureSignin();
 
-const scrollContainer = shallowRef<HTMLElement | null>(null);
-const rootEl = useTemplateRef('rootEl');
-
 const acct = computed(() => `@${$i.username}@${host}`);
 const userProfileUrl = computed(() => userPage($i, undefined, true));
 const shareData = computed(() => ({
@@ -59,7 +53,6 @@ const qrCodeEl = useTemplateRef('qrCodeEl');
 
 const avatarColor = computed(() => tinycolor(instance.themeColor ?? '#86b300'));
 const avatarHsl = computed(() => avatarColor.value.toHsl());
-const bgColor = tinycolor(`hsl(${avatarHsl.value.h}, 60, 46)`).toRgbString();
 
 function share() {
 	if (!canShare.value) return;

From 205ca1217890f8ea10fff577ab99deac50f5da15 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 15 Sep 2025 08:59:01 +0900
Subject: [PATCH 71/85] refactor

---
 packages/frontend/src/pages/qr.show.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index 6c81077a3f..e4bf7085ce 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -51,8 +51,8 @@ const canShare = computed(() => navigator.canShare && navigator.canShare(shareDa
 
 const qrCodeEl = useTemplateRef('qrCodeEl');
 
-const avatarColor = computed(() => tinycolor(instance.themeColor ?? '#86b300'));
-const avatarHsl = computed(() => avatarColor.value.toHsl());
+const qrColor = computed(() => tinycolor(instance.themeColor ?? '#86b300'));
+const qrHsl = computed(() => qrColor.value.toHsl());
 
 function share() {
 	if (!canShare.value) return;
@@ -78,10 +78,10 @@ const qrCodeInstance = new QRCodeStyling({
 		crossOrigin: 'anonymous',
 	},
 	dotsOptions: {
-		color: tinycolor(`hsl(${avatarHsl.value.h}, 100, 18)`).toRgbString(),
+		color: tinycolor(`hsl(${qrHsl.value.h}, 100, 18)`).toRgbString(),
 	},
 	backgroundOptions: {
-		color: tinycolor(`hsl(${avatarHsl.value.h}, 100, 97)`).toRgbString(),
+		color: tinycolor(`hsl(${qrHsl.value.h}, 100, 97)`).toRgbString(),
 	},
 });
 

From bd44a565a73f4cac3545effb8246c6523f9abc50 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 15 Sep 2025 10:57:59 +0900
Subject: [PATCH 72/85] =?UTF-8?q?=F0=9F=8E=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/pages/qr.show.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index e4bf7085ce..ba81954e6b 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -160,14 +160,13 @@ $avatarSize: 58px;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	margin: 0 auto;
 }
 
 .qr {
 	position: relative;
 	margin: 0 auto;
 	width: 100%;
-	max-width: 250px;
+	max-width: 230px;
 	border-radius: 8px;
 	overflow: clip;
 	aspect-ratio: 1;

From 2699839144c11185385df57a869d7e2c883a6d2c Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 15 Sep 2025 17:31:16 +0900
Subject: [PATCH 73/85] Update qr.show.vue

---
 packages/frontend/src/pages/qr.show.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index ba81954e6b..068f4cd909 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -78,8 +78,15 @@ const qrCodeInstance = new QRCodeStyling({
 		crossOrigin: 'anonymous',
 	},
 	dotsOptions: {
+		type: 'dots',
 		color: tinycolor(`hsl(${qrHsl.value.h}, 100, 18)`).toRgbString(),
 	},
+	cornersDotOptions: {
+		type: 'dot',
+	},
+	cornersSquareOptions: {
+		type: 'extra-rounded',
+	},
 	backgroundOptions: {
 		color: tinycolor(`hsl(${qrHsl.value.h}, 100, 97)`).toRgbString(),
 	},

From 2e8ad6d985c8f4e1ee3a15cb3c65f2c373b619a8 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 15 Sep 2025 18:33:11 +0900
Subject: [PATCH 74/85] =?UTF-8?q?Misskey=E3=83=AD=E3=82=B4=E3=81=ABdrop-sh?=
 =?UTF-8?q?adow=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/pages/qr.show.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index 068f4cd909..3f32c4c279 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -221,6 +221,7 @@ $avatarSize: 58px;
 .logo {
 	width: 100px;
 	margin: $s3 auto 0;
+	filter: drop-shadow(0 0 6px #0007);
 }
 </style>
 

From 14828573d4d4f9473631b999e0f67d04171271c3 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 15 Sep 2025 18:38:27 +0900
Subject: [PATCH 75/85] clean up: do not use empty css

---
 packages/frontend/src/pages/qr.show.vue | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index 3f32c4c279..1b878ea4a2 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -14,9 +14,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 		></div>
 		<div v-flip :class="$style.user">
 			<MkAvatar :class="$style.avatar" :user="$i" :indicator="false"/>
-			<div :class="$style.names">
+			<div>
 				<div :class="$style.name"><MkCondensedLine :minScale="2 / 3"><MkUserName :user="$i" :nowrap="true"/></MkCondensedLine></div>
-				<div :class="$style.username"><MkCondensedLine :minScale="2 / 3">{{ acct }}</MkCondensedLine></div>
+				<div><MkCondensedLine :minScale="2 / 3">{{ acct }}</MkCondensedLine></div>
 			</div>
 		</div>
 		<img v-if="deviceMotionPermissionNeeded" v-flip :class="$style.logo" :src="misskeysvg" alt="Misskey Logo" @click="requestDeviceMotion"/>
@@ -206,18 +206,10 @@ $avatarSize: 58px;
 	margin-bottom: 16px;
 }
 
-.names {
-
-}
-
 .name {
 	font-weight: bold;
 }
 
-.username {
-
-}
-
 .logo {
 	width: 100px;
 	margin: $s3 auto 0;

From dc19250aee5cb63da8a8f12e8e1a124dbcb203ab Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 15 Sep 2025 18:39:24 +0900
Subject: [PATCH 76/85] fix os.select usage

---
 packages/frontend/src/pages/qr.read.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/pages/qr.read.vue b/packages/frontend/src/pages/qr.read.vue
index 028248d4ff..99b74aa4a5 100644
--- a/packages/frontend/src/pages/qr.read.vue
+++ b/packages/frontend/src/pages/qr.read.vue
@@ -219,7 +219,7 @@ async function chooseCamera() {
 	const select = await os.select({
 		title: i18n.ts._qr.chooseCamera,
 		items: cameras.map(camera => ({
-			text: camera.label,
+			label: camera.label,
 			value: camera.id,
 		})),
 	});

From 857d4fd5b2b5b724b3392bcbe830e66eb4e85fa4 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 16 Sep 2025 08:46:27 +0900
Subject: [PATCH 77/85] Update qr.vue

---
 packages/frontend/src/pages/qr.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/pages/qr.vue b/packages/frontend/src/pages/qr.vue
index e7c34dcff4..2e5629f232 100644
--- a/packages/frontend/src/pages/qr.vue
+++ b/packages/frontend/src/pages/qr.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div :class="$style.root" class="_pageScrollable">
-	<div class="_spacer" style="min-height: 100%; display: flex; flex-direction: column;">
+	<div class="_spacer" :class="$style.main">
 		<MkButton v-if="read" :class="$style.button" rounded @click="read = false"><i class="ti ti-qrcode"></i> {{ i18n.ts._qr.showTabTitle }}</MkButton>
 		<MkButton v-else :class="$style.button" rounded @click="read = true"><i class="ti ti-scan"></i> {{ i18n.ts._qr.readTabTitle }}</MkButton>
 
@@ -43,6 +43,14 @@ definePage(() => ({
 	height: 100%;
 }
 
+.main {
+	min-height: 100%;
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	z-index: 1;
+}
+
 .button {
 	margin: 0 auto 16px auto;
 }

From de32c732db1045ff9864a1c409426d416b7653d8 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 16 Sep 2025 09:03:40 +0900
Subject: [PATCH 78/85] Update qr.show.vue

---
 packages/frontend/src/pages/qr.show.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index 1b878ea4a2..d1320327e2 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -174,7 +174,7 @@ $avatarSize: 58px;
 	margin: 0 auto;
 	width: 100%;
 	max-width: 230px;
-	border-radius: 8px;
+	border-radius: 12px;
 	overflow: clip;
 	aspect-ratio: 1;
 

From 214d3ef35d185c5522c99501a36f8e0deeb3566c Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 16 Sep 2025 09:04:10 +0900
Subject: [PATCH 79/85] Update qr.show.vue

---
 packages/frontend/src/pages/qr.show.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index d1320327e2..28f80e0963 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -208,6 +208,7 @@ $avatarSize: 58px;
 
 .name {
 	font-weight: bold;
+	font-size: 110%;
 }
 
 .logo {

From 901872e4fdc3205aedef8551f439f54589fd48c0 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 16 Sep 2025 10:56:58 +0900
Subject: [PATCH 80/85] Update get-user-menu.ts

---
 packages/frontend/src/utility/get-user-menu.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/frontend/src/utility/get-user-menu.ts b/packages/frontend/src/utility/get-user-menu.ts
index 89dcae28e1..054ab9057c 100644
--- a/packages/frontend/src/utility/get-user-menu.ts
+++ b/packages/frontend/src/utility/get-user-menu.ts
@@ -215,6 +215,16 @@ export function getUserMenu(user: Misskey.entities.UserDetailed, router: Router
 		});
 	}
 
+	if ($i && meId === user.id) {
+		menuItems.push({
+			icon: 'ti ti-qrcode',
+			text: i18n.ts.qr,
+			action: () => {
+				router.push('/qr');
+			},
+		});
+	}
+
 	if (notesSearchAvailable && (user.host == null || canSearchNonLocalNotes)) {
 		menuItems.push({
 			icon: 'ti ti-search',

From b1d312b6862982b7b4d76b0e1902708b25b1c12a Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 16 Sep 2025 11:03:23 +0900
Subject: [PATCH 81/85] =?UTF-8?q?=E2=9C=8C=EF=B8=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/pages/settings/drive.vue   |  2 +-
 packages/frontend/src/pages/settings/profile.vue | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/pages/settings/drive.vue b/packages/frontend/src/pages/settings/drive.vue
index cfa4df18fc..2d794f2e30 100644
--- a/packages/frontend/src/pages/settings/drive.vue
+++ b/packages/frontend/src/pages/settings/drive.vue
@@ -48,7 +48,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<FormLink @click="chooseUploadFolder()">
 							<SearchLabel>{{ i18n.ts.uploadFolder }}</SearchLabel>
 							<template #suffix>{{ uploadFolder ? uploadFolder.name : '-' }}</template>
-							<template #suffixIcon><i class="ti ti-folder"></i></template>
+							<template #icon><i class="ti ti-folder"></i></template>
 						</FormLink>
 					</SearchMarker>
 
diff --git a/packages/frontend/src/pages/settings/profile.vue b/packages/frontend/src/pages/settings/profile.vue
index 17e8505474..89325dee63 100644
--- a/packages/frontend/src/pages/settings/profile.vue
+++ b/packages/frontend/src/pages/settings/profile.vue
@@ -151,6 +151,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div>
 			</MkFolder>
 		</SearchMarker>
+
+		<hr>
+
+		<SearchMarker :keywords="['qrcode']">
+			<FormLink to="/qr">
+				<template #icon><i class="ti ti-qrcode"></i></template>
+				<SearchLabel>{{ i18n.ts.qr }}</SearchLabel>
+			</FormLink>
+		</SearchMarker>
 	</div>
 </SearchMarker>
 </template>
@@ -164,6 +173,7 @@ import MkSelect from '@/components/MkSelect.vue';
 import FormSplit from '@/components/form/split.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import FormSlot from '@/components/form/slot.vue';
+import FormLink from '@/components/form/link.vue';
 import { chooseDriveFile } from '@/utility/drive.js';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';

From 4d6ff822c4ca0b49d5447e1aa61f63bdf9972916 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Wed, 17 Sep 2025 19:58:18 +0900
Subject: [PATCH 82/85] Update show.ts

---
 .../src/server/api/endpoints/ap/show.ts       | 37 +------------------
 1 file changed, 2 insertions(+), 35 deletions(-)

diff --git a/packages/backend/src/server/api/endpoints/ap/show.ts b/packages/backend/src/server/api/endpoints/ap/show.ts
index 1fd5d0c0fb..fe48e7497a 100644
--- a/packages/backend/src/server/api/endpoints/ap/show.ts
+++ b/packages/backend/src/server/api/endpoints/ap/show.ts
@@ -18,13 +18,9 @@ import { UserEntityService } from '@/core/entities/UserEntityService.js';
 import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
 import { UtilityService } from '@/core/UtilityService.js';
 import { bindThis } from '@/decorators.js';
-import { ApiError } from '../../error.js';
 import { IdentifiableError } from '@/misc/identifiable-error.js';
 import { FetchAllowSoftFailMask } from '@/core/activitypub/misc/check-against-url.js';
-import * as Acct from '@/misc/acct.js';
-import { IsNull } from 'typeorm';
-import { DI } from '@/di-symbols.js';
-import type { NotesRepository, UsersRepository } from '@/models/_.js';
+import { ApiError } from '../../error.js';
 
 export const meta = {
 	tags: ['federation'],
@@ -113,9 +109,6 @@ export const paramDef = {
 @Injectable()
 export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-disable-line import/no-default-export
 	constructor(
-		@Inject(DI.usersRepository)
-		private usersRepository: UsersRepository,
-
 		private utilityService: UtilityService,
 		private userEntityService: UserEntityService,
 		private noteEntityService: NoteEntityService,
@@ -144,7 +137,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 		}
 
 		let local = await this.mergePack(me, ...await Promise.all([
-			this.apDbResolverService.getUserFromApId(uri).then(async x => x ?? await this.getUserFromProfileUrl(uri)),
+			this.apDbResolverService.getUserFromApId(uri),
 			this.apDbResolverService.getNoteFromApId(uri),
 		]));
 		if (local != null) return local;
@@ -207,32 +200,6 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 		);
 	}
 
-	// To keep consistency with ap/show from external server,
-	// this function will handle `https://local.instance/@user`
-	// profile url to resolve user.
-	@bindThis
-	private async getUserFromProfileUrl(url: string): Promise<MiUser | null | undefined> {
-		if (!this.utilityService.isUriLocal(url)) {
-			return null;
-		}
-
-		const uri = new URL(url);
-		const pathComponents = uri.pathname.split('/').filter(Boolean);
-		if (pathComponents.length === 1 && pathComponents[0].startsWith('@')) {
-			const acct = Acct.parse(pathComponents[0]);
-			// normalize acct host
-			if (this.utilityService.isSelfHost(acct.host)) acct.host = null;
-
-			return await this.usersRepository.findOneBy({
-				usernameLower: acct.username.toLowerCase(),
-				host: acct.host ?? IsNull(),
-				isSuspended: false,
-			});
-		}
-
-		return null;
-	}
-
 	@bindThis
 	private async mergePack(me: MiLocalUser | null | undefined, user: MiUser | null | undefined, note: MiNote | null | undefined): Promise<SchemaType<typeof meta.res> | null> {
 		if (user != null) {

From 5d44ae877a8ce9bc1a4671f4e0adc3bd5e3be877 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Thu, 18 Sep 2025 15:49:05 +0900
Subject: [PATCH 83/85] Update ja-JP.yml

---
 locales/ja-JP.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 96fefd738a..a7049ada6f 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -3366,7 +3366,7 @@ _drafts:
   restore: "復元"
   listDrafts: "下書き一覧"
 
-qr: 二次元コード
+qr: "二次元コード"
 _qr:
   showTabTitle: "表示"
   readTabTitle: "読み取る"

From 4cbe741f864dcfe3830d5e10fcb8856bdaf97e28 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Fri, 19 Sep 2025 18:24:33 +0900
Subject: [PATCH 84/85] watermark

---
 locales/index.d.ts                            |  8 ++
 locales/ja-JP.yml                             |  2 +
 .../src/components/MkPositionSelector.vue     | 18 ++---
 .../MkWatermarkEditorDialog.Layer.vue         | 68 +++++++++++++++++
 .../components/MkWatermarkEditorDialog.vue    | 57 +++++---------
 .../utility/image-effector/ImageEffector.ts   | 75 ++++++++++++++++++-
 .../image-effector/fxs/watermarkPlacement.ts  |  9 ++-
 packages/frontend/src/utility/watermark.ts    | 32 +++++++-
 8 files changed, 214 insertions(+), 55 deletions(-)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 6ddc13f4af..6b36cf8502 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -12235,10 +12235,18 @@ export interface Locale extends ILocale {
          * テキスト
          */
         "text": string;
+        /**
+         * 二次元コード (アカウント)
+         */
+        "accountQr": string;
         /**
          * 位置
          */
         "position": string;
+        /**
+         * マージン
+         */
+        "margin": string;
         /**
          * タイプ
          */
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index a7049ada6f..945eea02ee 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -3275,7 +3275,9 @@ _watermarkEditor:
   opacity: "不透明度"
   scale: "サイズ"
   text: "テキスト"
+  accountQr: "二次元コード (アカウント)"
   position: "位置"
+  margin: "マージン"
   type: "タイプ"
   image: "画像"
   advanced: "高度"
diff --git a/packages/frontend/src/components/MkPositionSelector.vue b/packages/frontend/src/components/MkPositionSelector.vue
index 739f55125b..6f12aada30 100644
--- a/packages/frontend/src/components/MkPositionSelector.vue
+++ b/packages/frontend/src/components/MkPositionSelector.vue
@@ -6,15 +6,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div :class="[$style.root]">
 	<div :class="$style.items">
-		<button class="_button" :class="[$style.item, x === 'left' && y === 'top' ? $style.active : null]" @click="() => { x = 'left'; y = 'top'; }"><i class="ti ti-align-box-left-top"></i></button>
-		<button class="_button" :class="[$style.item, x === 'center' && y === 'top' ? $style.active : null]" @click="() => { x = 'center'; y = 'top'; }"><i class="ti ti-align-box-center-top"></i></button>
-		<button class="_button" :class="[$style.item, x === 'right' && y === 'top' ? $style.active : null]" @click="() => { x = 'right'; y = 'top'; }"><i class="ti ti-align-box-right-top"></i></button>
-		<button class="_button" :class="[$style.item, x === 'left' && y === 'center' ? $style.active : null]" @click="() => { x = 'left'; y = 'center'; }"><i class="ti ti-align-box-left-middle"></i></button>
-		<button class="_button" :class="[$style.item, x === 'center' && y === 'center' ? $style.active : null]" @click="() => { x = 'center'; y = 'center'; }"><i class="ti ti-align-box-center-middle"></i></button>
-		<button class="_button" :class="[$style.item, x === 'right' && y === 'center' ? $style.active : null]" @click="() => { x = 'right'; y = 'center'; }"><i class="ti ti-align-box-right-middle"></i></button>
-		<button class="_button" :class="[$style.item, x === 'left' && y === 'bottom' ? $style.active : null]" @click="() => { x = 'left'; y = 'bottom'; }"><i class="ti ti-align-box-left-bottom"></i></button>
-		<button class="_button" :class="[$style.item, x === 'center' && y === 'bottom' ? $style.active : null]" @click="() => { x = 'center'; y = 'bottom'; }"><i class="ti ti-align-box-center-bottom"></i></button>
-		<button class="_button" :class="[$style.item, x === 'right' && y === 'bottom' ? $style.active : null]" @click="() => { x = 'right'; y = 'bottom'; }"><i class="ti ti-align-box-right-bottom"></i></button>
+		<button v-panel class="_button" :class="[$style.item, x === 'left' && y === 'top' ? $style.active : null]" @click="() => { x = 'left'; y = 'top'; }"><i class="ti ti-arrow-up-left"></i></button>
+		<button v-panel class="_button" :class="[$style.item, x === 'center' && y === 'top' ? $style.active : null]" @click="() => { x = 'center'; y = 'top'; }"><i class="ti ti-arrow-up"></i></button>
+		<button v-panel class="_button" :class="[$style.item, x === 'right' && y === 'top' ? $style.active : null]" @click="() => { x = 'right'; y = 'top'; }"><i class="ti ti-arrow-up-right"></i></button>
+		<button v-panel class="_button" :class="[$style.item, x === 'left' && y === 'center' ? $style.active : null]" @click="() => { x = 'left'; y = 'center'; }"><i class="ti ti-arrow-left"></i></button>
+		<button v-panel class="_button" :class="[$style.item, x === 'center' && y === 'center' ? $style.active : null]" @click="() => { x = 'center'; y = 'center'; }"><i class="ti ti-focus-2"></i></button>
+		<button v-panel class="_button" :class="[$style.item, x === 'right' && y === 'center' ? $style.active : null]" @click="() => { x = 'right'; y = 'center'; }"><i class="ti ti-arrow-right"></i></button>
+		<button v-panel class="_button" :class="[$style.item, x === 'left' && y === 'bottom' ? $style.active : null]" @click="() => { x = 'left'; y = 'bottom'; }"><i class="ti ti-arrow-down-left"></i></button>
+		<button v-panel class="_button" :class="[$style.item, x === 'center' && y === 'bottom' ? $style.active : null]" @click="() => { x = 'center'; y = 'bottom'; }"><i class="ti ti-arrow-down"></i></button>
+		<button v-panel class="_button" :class="[$style.item, x === 'right' && y === 'bottom' ? $style.active : null]" @click="() => { x = 'right'; y = 'bottom'; }"><i class="ti ti-arrow-down-right"></i></button>
 	</div>
 </div>
 </template>
diff --git a/packages/frontend/src/components/MkWatermarkEditorDialog.Layer.vue b/packages/frontend/src/components/MkWatermarkEditorDialog.Layer.vue
index 11ae091d90..19b997bea2 100644
--- a/packages/frontend/src/components/MkWatermarkEditorDialog.Layer.vue
+++ b/packages/frontend/src/components/MkWatermarkEditorDialog.Layer.vue
@@ -18,6 +18,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 			></MkPositionSelector>
 		</FormSlot>
 
+		<MkRange
+			:modelValue="layer.align.margin ?? 0"
+			:min="0"
+			:max="0.5"
+			:step="0.01"
+			:textConverter="(v) => (v * 100).toFixed(1) + '%'"
+			continuousUpdate
+			@update:modelValue="(v) => (layer as Extract<WatermarkPreset['layers'][number], { type: 'account-qr' }>).align.margin = v"
+		>
+			<template #label>{{ i18n.ts._watermarkEditor.margin }}</template>
+		</MkRange>
+
 		<MkRange
 			v-model="layer.scale"
 			:min="0"
@@ -66,6 +78,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 			></MkPositionSelector>
 		</FormSlot>
 
+		<MkRange
+			:modelValue="layer.align.margin ?? 0"
+			:min="0"
+			:max="0.5"
+			:step="0.01"
+			:textConverter="(v) => (v * 100).toFixed(1) + '%'"
+			continuousUpdate
+			@update:modelValue="(v) => (layer as Extract<WatermarkPreset['layers'][number], { type: 'account-qr' }>).align.margin = v"
+		>
+			<template #label>{{ i18n.ts._watermarkEditor.margin }}</template>
+		</MkRange>
+
 		<MkRange
 			v-model="layer.scale"
 			:min="0"
@@ -107,6 +131,50 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</MkSwitch>
 	</template>
 
+	<template v-else-if="layer.type === 'account-qr'">
+		<FormSlot>
+			<template #label>{{ i18n.ts._watermarkEditor.position }}</template>
+			<MkPositionSelector
+				v-model:x="layer.align.x"
+				v-model:y="layer.align.y"
+			></MkPositionSelector>
+		</FormSlot>
+
+		<MkRange
+			:modelValue="layer.align.margin ?? 0"
+			:min="0"
+			:max="0.5"
+			:step="0.01"
+			:textConverter="(v) => (v * 100).toFixed(1) + '%'"
+			continuousUpdate
+			@update:modelValue="(v) => (layer as Extract<WatermarkPreset['layers'][number], { type: 'account-qr' }>).align.margin = v"
+		>
+			<template #label>{{ i18n.ts._watermarkEditor.margin }}</template>
+		</MkRange>
+
+		<MkRange
+			v-model="layer.scale"
+			:min="0"
+			:max="1"
+			:step="0.01"
+			:textConverter="(v) => (v * 100).toFixed(1) + '%'"
+			continuousUpdate
+		>
+			<template #label>{{ i18n.ts._watermarkEditor.scale }}</template>
+		</MkRange>
+
+		<MkRange
+			v-model="layer.opacity"
+			:min="0"
+			:max="1"
+			:step="0.01"
+			:textConverter="(v) => (v * 100).toFixed(1) + '%'"
+			continuousUpdate
+		>
+			<template #label>{{ i18n.ts._watermarkEditor.opacity }}</template>
+		</MkRange>
+	</template>
+
 	<template v-else-if="layer.type === 'stripe'">
 		<MkRange
 			v-model="layer.frequency"
diff --git a/packages/frontend/src/components/MkWatermarkEditorDialog.vue b/packages/frontend/src/components/MkWatermarkEditorDialog.vue
index 75a45548fd..a120634fa0 100644
--- a/packages/frontend/src/components/MkWatermarkEditorDialog.vue
+++ b/packages/frontend/src/components/MkWatermarkEditorDialog.vue
@@ -30,22 +30,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 			<div :class="$style.controls">
 				<div class="_spacer _gaps">
-					<MkSelect v-model="type" :items="typeDef">
-						<template #label>{{ i18n.ts._watermarkEditor.type }}</template>
-					</MkSelect>
-
-					<div v-if="type === 'text' || type === 'image'">
-						<XLayer
-							v-for="(layer, i) in preset.layers"
-							:key="layer.id"
-							v-model:layer="preset.layers[i]"
-						></XLayer>
-					</div>
-					<div v-else-if="type === 'advanced'" class="_gaps_s">
+					<div class="_gaps_s">
 						<MkFolder v-for="(layer, i) in preset.layers" :key="layer.id" :defaultOpen="false" :canPage="false">
 							<template #label>
 								<div v-if="layer.type === 'text'">{{ i18n.ts._watermarkEditor.text }}</div>
 								<div v-if="layer.type === 'image'">{{ i18n.ts._watermarkEditor.image }}</div>
+								<div v-if="layer.type === 'account-qr'">{{ i18n.ts._watermarkEditor.accountQr }}</div>
 								<div v-if="layer.type === 'stripe'">{{ i18n.ts._watermarkEditor.stripe }}</div>
 								<div v-if="layer.type === 'polkadot'">{{ i18n.ts._watermarkEditor.polkadot }}</div>
 								<div v-if="layer.type === 'checker'">{{ i18n.ts._watermarkEditor.checker }}</div>
@@ -95,7 +85,7 @@ function createTextLayer(): WatermarkPreset['layers'][number] {
 		id: genId(),
 		type: 'text',
 		text: `(c) @${$i.username}`,
-		align: { x: 'right', y: 'bottom' },
+		align: { x: 'right', y: 'bottom', margin: 0 },
 		scale: 0.3,
 		angle: 0,
 		opacity: 0.75,
@@ -109,7 +99,7 @@ function createImageLayer(): WatermarkPreset['layers'][number] {
 		type: 'image',
 		imageId: null,
 		imageUrl: null,
-		align: { x: 'right', y: 'bottom' },
+		align: { x: 'right', y: 'bottom', margin: 0 },
 		scale: 0.3,
 		angle: 0,
 		opacity: 0.75,
@@ -118,6 +108,16 @@ function createImageLayer(): WatermarkPreset['layers'][number] {
 	};
 }
 
+function createAccountQrLayer(): WatermarkPreset['layers'][number] {
+	return {
+		id: genId(),
+		type: 'account-qr',
+		align: { x: 'right', y: 'bottom', margin: 0 },
+		scale: 0.3,
+		opacity: 1,
+	};
+}
+
 function createStripeLayer(): WatermarkPreset['layers'][number] {
 	return {
 		id: genId(),
@@ -165,7 +165,7 @@ const props = defineProps<{
 const preset = reactive<WatermarkPreset>(deepClone(props.preset) ?? {
 	id: genId(),
 	name: '',
-	layers: [createTextLayer()],
+	layers: [],
 });
 
 const emit = defineEmits<{
@@ -187,28 +187,6 @@ async function cancel() {
 	dialog.value?.close();
 }
 
-const {
-	model: type,
-	def: typeDef,
-} = useMkSelect({
-	items: [
-		{ label: i18n.ts._watermarkEditor.text, value: 'text' },
-		{ label: i18n.ts._watermarkEditor.image, value: 'image' },
-		{ label: i18n.ts._watermarkEditor.advanced, value: 'advanced' },
-	],
-	initialValue: preset.layers.length > 1 ? 'advanced' : preset.layers[0].type,
-});
-
-watch(type, () => {
-	if (type.value === 'text') {
-		preset.layers = [createTextLayer()];
-	} else if (type.value === 'image') {
-		preset.layers = [createImageLayer()];
-	} else if (type.value === 'advanced') {
-		// nop
-	}
-});
-
 watch(preset, async (newValue, oldValue) => {
 	if (renderer != null) {
 		renderer.setLayers(preset.layers);
@@ -338,6 +316,11 @@ function addLayer(ev: MouseEvent) {
 		action: () => {
 			preset.layers.push(createImageLayer());
 		},
+	}, {
+		text: i18n.ts._watermarkEditor.accountQr,
+		action: () => {
+			preset.layers.push(createAccountQrLayer());
+		},
 	}, {
 		text: i18n.ts._watermarkEditor.stripe,
 		action: () => {
diff --git a/packages/frontend/src/utility/image-effector/ImageEffector.ts b/packages/frontend/src/utility/image-effector/ImageEffector.ts
index 66b4d1026c..f58d53f99e 100644
--- a/packages/frontend/src/utility/image-effector/ImageEffector.ts
+++ b/packages/frontend/src/utility/image-effector/ImageEffector.ts
@@ -3,8 +3,11 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import QRCodeStyling from 'qr-code-styling';
+import { url, host } from '@@/js/config.js';
 import { getProxiedImageUrl } from '../media-proxy.js';
 import { initShaderProgram } from '../webgl.js';
+import { ensureSignin } from '@/i.js';
 
 export type ImageEffectorRGB = [r: number, g: number, b: number];
 
@@ -48,6 +51,7 @@ interface AlignParamDef extends CommonParamDef {
 	default: {
 		x: 'left' | 'center' | 'right';
 		y: 'top' | 'center' | 'bottom';
+		margin?: number;
 	};
 };
 
@@ -58,7 +62,13 @@ interface SeedParamDef extends CommonParamDef {
 
 interface TextureParamDef extends CommonParamDef {
 	type: 'texture';
-	default: { type: 'text'; text: string | null; } | { type: 'url'; url: string | null; } | null;
+	default: {
+		type: 'text'; text: string | null;
+	} | {
+		type: 'url'; url: string | null;
+	} | {
+		type: 'account-qr';
+	} | null;
 };
 
 interface ColorParamDef extends CommonParamDef {
@@ -324,7 +334,11 @@ export class ImageEffector<IEX extends ReadonlyArray<ImageEffectorFx<any, any, a
 
 				if (_DEV_) console.log(`Baking texture of <${textureKey}>...`);
 
-				const texture = v.type === 'text' ? await createTextureFromText(this.gl, v.text) : v.type === 'url' ? await createTextureFromUrl(this.gl, v.url) : null;
+				const texture =
+					v.type === 'text' ? await createTextureFromText(this.gl, v.text) :
+					v.type === 'url' ? await createTextureFromUrl(this.gl, v.url) :
+					v.type === 'account-qr' ? await createTextureFromAccountQr(this.gl) :
+					null;
 				if (texture == null) continue;
 
 				this.paramTextures.set(textureKey, texture);
@@ -352,7 +366,12 @@ export class ImageEffector<IEX extends ReadonlyArray<ImageEffectorFx<any, any, a
 
 	private getTextureKeyForParam(v: ParamTypeToPrimitive['texture']) {
 		if (v == null) return '';
-		return v.type === 'text' ? `text:${v.text}` : v.type === 'url' ? `url:${v.url}` : '';
+		return (
+			v.type === 'text' ? `text:${v.text}` :
+			v.type === 'url' ? `url:${v.url}` :
+			v.type === 'account-qr' ? 'account-qr' :
+			''
+		);
 	}
 
 	/*
@@ -467,3 +486,53 @@ async function createTextureFromText(gl: WebGL2RenderingContext, text: string |
 
 	return info;
 }
+
+async function createTextureFromAccountQr(gl: WebGL2RenderingContext, resolution = 512): Promise<{ texture: WebGLTexture, width: number, height: number } | null> {
+	const $i = ensureSignin();
+
+	const qrCodeInstance = new QRCodeStyling({
+		width: resolution,
+		height: resolution,
+		margin: 42,
+		type: 'canvas',
+		data: `${url}/users/${$i.id}`,
+		image: $i.avatarUrl,
+		qrOptions: {
+			typeNumber: 0,
+			mode: 'Byte',
+			errorCorrectionLevel: 'H',
+		},
+		imageOptions: {
+			hideBackgroundDots: true,
+			imageSize: 0.3,
+			margin: 16,
+			crossOrigin: 'anonymous',
+		},
+		dotsOptions: {
+			type: 'dots',
+		},
+		cornersDotOptions: {
+			type: 'dot',
+		},
+		cornersSquareOptions: {
+			type: 'extra-rounded',
+		},
+	});
+
+	const blob = await qrCodeInstance.getRawData('png') as Blob | null;
+	if (blob == null) return null;
+
+	const data = await window.createImageBitmap(blob);
+
+	const texture = createTexture(gl);
+	gl.activeTexture(gl.TEXTURE0);
+	gl.bindTexture(gl.TEXTURE_2D, texture);
+	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, resolution, resolution, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
+	gl.bindTexture(gl.TEXTURE_2D, null);
+
+	return {
+		texture,
+		width: resolution,
+		height: resolution,
+	};
+}
diff --git a/packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.ts b/packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.ts
index 9b79e2bf94..f79acb44b0 100644
--- a/packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.ts
+++ b/packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.ts
@@ -23,6 +23,7 @@ uniform float u_opacity;
 uniform bool u_repeat;
 uniform int u_alignX; // 0: left, 1: center, 2: right
 uniform int u_alignY; // 0: top, 1: center, 2: bottom
+uniform float u_alignMargin;
 uniform int u_fitMode; // 0: contain, 1: cover
 out vec4 out_color;
 
@@ -51,6 +52,9 @@ void main() {
 	float x_offset = u_alignX == 0 ? x_scale / 2.0 : u_alignX == 2 ? 1.0 - (x_scale / 2.0) : 0.5;
 	float y_offset = u_alignY == 0 ? y_scale / 2.0 : u_alignY == 2 ? 1.0 - (y_scale / 2.0) : 0.5;
 
+	x_offset += (u_alignX == 0 ? 1.0 : u_alignX == 2 ? -1.0 : 0.0) * u_alignMargin;
+	y_offset += (u_alignY == 0 ? 1.0 : u_alignY == 2 ? -1.0 : 0.0) * u_alignMargin;
+
 	float angle = -(u_angle * PI);
 	vec2 center = vec2(x_offset, y_offset);
 	//vec2 centeredUv = (in_uv - center) * vec2(in_x_ratio, in_y_ratio);
@@ -86,7 +90,7 @@ export const FX_watermarkPlacement = defineImageEffectorFx({
 	id: 'watermarkPlacement',
 	name: '(internal)',
 	shader,
-	uniforms: ['texture_watermark', 'resolution_watermark', 'scale', 'angle', 'opacity', 'repeat', 'alignX', 'alignY', 'fitMode'] as const,
+	uniforms: ['texture_watermark', 'resolution_watermark', 'scale', 'angle', 'opacity', 'repeat', 'alignX', 'alignY', 'alignMargin', 'fitMode'] as const,
 	params: {
 		cover: {
 			type: 'boolean',
@@ -112,7 +116,7 @@ export const FX_watermarkPlacement = defineImageEffectorFx({
 		},
 		align: {
 			type: 'align',
-			default: { x: 'right', y: 'bottom' },
+			default: { x: 'right', y: 'bottom', margin: 0 },
 		},
 		opacity: {
 			type: 'number',
@@ -143,6 +147,7 @@ export const FX_watermarkPlacement = defineImageEffectorFx({
 		gl.uniform1i(u.repeat, params.repeat ? 1 : 0);
 		gl.uniform1i(u.alignX, params.align.x === 'left' ? 0 : params.align.x === 'right' ? 2 : 1);
 		gl.uniform1i(u.alignY, params.align.y === 'top' ? 0 : params.align.y === 'bottom' ? 2 : 1);
+		gl.uniform1f(u.alignMargin, params.align.margin ?? 0);
 		gl.uniform1i(u.fitMode, params.cover ? 1 : 0);
 	},
 });
diff --git a/packages/frontend/src/utility/watermark.ts b/packages/frontend/src/utility/watermark.ts
index 75807b30c4..edd6ed2122 100644
--- a/packages/frontend/src/utility/watermark.ts
+++ b/packages/frontend/src/utility/watermark.ts
@@ -3,11 +3,11 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import type { ImageEffectorFx, ImageEffectorLayer } from '@/utility/image-effector/ImageEffector.js';
 import { FX_watermarkPlacement } from '@/utility/image-effector/fxs/watermarkPlacement.js';
 import { FX_stripe } from '@/utility/image-effector/fxs/stripe.js';
 import { FX_polkadot } from '@/utility/image-effector/fxs/polkadot.js';
 import { FX_checker } from '@/utility/image-effector/fxs/checker.js';
-import type { ImageEffectorFx, ImageEffectorLayer } from '@/utility/image-effector/ImageEffector.js';
 import { ImageEffector } from '@/utility/image-effector/ImageEffector.js';
 
 const WATERMARK_FXS = [
@@ -17,6 +17,8 @@ const WATERMARK_FXS = [
 	FX_checker,
 ] as const satisfies ImageEffectorFx<string, any>[];
 
+type Align = { x: 'left' | 'center' | 'right'; y: 'top' | 'center' | 'bottom'; margin?: number; };
+
 export type WatermarkPreset = {
 	id: string;
 	name: string;
@@ -27,7 +29,7 @@ export type WatermarkPreset = {
 		repeat: boolean;
 		scale: number;
 		angle: number;
-		align: { x: 'left' | 'center' | 'right'; y: 'top' | 'center' | 'bottom' };
+		align: Align;
 		opacity: number;
 	} | {
 		id: string;
@@ -38,7 +40,13 @@ export type WatermarkPreset = {
 		repeat: boolean;
 		scale: number;
 		angle: number;
-		align: { x: 'left' | 'center' | 'right'; y: 'top' | 'center' | 'bottom' };
+		align: Align;
+		opacity: number;
+	} | {
+		id: string;
+		type: 'account-qr';
+		scale: number;
+		align: Align;
 		opacity: number;
 	} | {
 		id: string;
@@ -125,6 +133,22 @@ export class WatermarkRenderer {
 						},
 					},
 				};
+			} else if (layer.type === 'account-qr') {
+				return {
+					fxId: 'watermarkPlacement',
+					id: layer.id,
+					params: {
+						repeat: false,
+						scale: layer.scale,
+						align: layer.align,
+						angle: 0,
+						opacity: layer.opacity,
+						cover: false,
+						watermark: {
+							type: 'account-qr',
+						},
+					},
+				};
 			} else if (layer.type === 'stripe') {
 				return {
 					fxId: 'stripe',
@@ -164,7 +188,7 @@ export class WatermarkRenderer {
 					},
 				};
 			} else {
-				throw new Error(`Unknown layer type`);
+				throw new Error(`Unrecognized layer type: ${(layer as any).type}`);
 			}
 		});
 	}

From c1b0e4c7be0db2c03f9b1416bee633d556555e93 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Fri, 19 Sep 2025 18:31:03 +0900
Subject: [PATCH 85/85] Update CHANGELOG.md

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index adeb453795..e841ea2791 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,8 +4,10 @@
 - Enhance: 広告ごとにセンシティブフラグを設定できるようになりました
 
 ### Client
+- Feat: アカウントのQRコードを表示・読み取りできるようになりました
 - Enhance: チャットの日本語名称がダイレクトメッセージに戻るとともに、ベータ版機能ではなくなりました
 - Enhance: 画像編集にマスクエフェクトを追加
+- Enhance: ウォーターマークにアカウントのQRコードを追加できるように
 - Enhance: 時刻計算のための基準値を一か所で管理するようにし、パフォーマンスを向上
 - Fix: iOSで、デバイスがダークモードだと初回読み込み時にエラーになる問題を修正