Merge tag '13.5.6' into io

packages/frontend/src/components/MkAchievements.vue

@@ -107,6 +107,7 @@ onMounted(() => {
 }
 
 .iconFrame {
+	position: relative;
 	width: 58px;
 	height: 58px;
 	padding: 6px;

packages/frontend/src/components/MkCwButton.vue

@@ -1,5 +1,5 @@
 <template>
-<button class="_button" :class="$style.root" @click="toggle">
+<button class="_button" :class="$style.root" @mousedown="toggle">
 	<b>{{ modelValue ? i18n.ts._cw.hide : i18n.ts._cw.show }}</b>
 	<span v-if="!modelValue" :class="$style.label">{{ label }}</span>
 </button>

packages/frontend/src/components/MkDialog.vue

@@ -28,8 +28,8 @@
 			</template>
 		</MkSelect>
 		<div v-if="(showOkButton || showCancelButton) && !actions" :class="$style.buttons">
-			<MkButton v-if="showOkButton" inline primary :autofocus="!input && !select" @click="ok">{{ (showCancelButton || input || select) ? i18n.ts.ok : i18n.ts.gotIt }}</MkButton>
-			<MkButton v-if="showCancelButton || input || select" inline @click="cancel">{{ i18n.ts.cancel }}</MkButton>
+			<MkButton v-if="showOkButton" inline primary :autofocus="!input && !select" @click="ok">{{ okText ?? ((showCancelButton || input || select) ? i18n.ts.ok : i18n.ts.gotIt) }}</MkButton>
+			<MkButton v-if="showCancelButton || input || select" inline @click="cancel">{{ cancelText ?? i18n.ts.cancel }}</MkButton>
 		</div>
 		<div v-if="actions" :class="$style.buttons">
 			<MkButton v-for="action in actions" :key="action.text" inline :primary="action.primary" @click="() => { action.callback(); close(); }">{{ action.text }}</MkButton>
@@ -82,6 +82,8 @@ const props = withDefaults(defineProps<{
 	showOkButton?: boolean;
 	showCancelButton?: boolean;
 	cancelableByBgClick?: boolean;
+	okText?: string;
+	cancelText?: string;
 }>(), {
 	type: 'info',
 	showOkButton: true,

packages/frontend/src/components/MkMediaBanner.vue

@@ -56,7 +56,7 @@ onMounted(() => {
 	width: 100%;
 	border-radius: 4px;
 	margin-top: 4px;
-	overflow: clip;
+	// overflow: clip;
 
 	--plyr-color-main: var(--accent);
 	--plyr-audio-controls-background: var(--bg);
@@ -99,7 +99,7 @@ onMounted(() => {
 
 	> .audio {
 		border-radius: 8px;
-		overflow: clip;
+		// overflow: clip;
 	}
 }
 </style>

packages/frontend/src/components/MkSignup.vue

@@ -50,13 +50,13 @@
 			<span v-if="passwordRetypeState == 'not-match'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.passwordNotMatched }}</span>
 		</template>
 	</MkInput>
-	<MkSwitch v-if="instance.tosUrl" v-model="ToSAgreement" class="tou">
-		<I18n :src="i18n.ts.agreeTo">
-			<template #0>
-				<a :href="instance.tosUrl" class="_link" target="_blank">{{ i18n.ts.tos }}</a>
-			</template>
-		</I18n>
+	<MkSwitch v-model="ToSAgreement" class="tou">
+		<template #label>{{ i18n.ts.agreeBelow }}</template>
 	</MkSwitch>
+	<ul style="margin: 0; padding-left: 2em;">
+		<li v-if="instance.tosUrl"><a :href="instance.tosUrl" class="_link" target="_blank">{{ i18n.ts.tos }}</a></li>
+		<li><a href="https://misskey-hub.net/docs/notes.html" class="_link" target="_blank">{{ i18n.ts.basicNotesBeforeCreateAccount }}</a></li>
+	</ul>
 	<MkCaptcha v-if="instance.enableHcaptcha" ref="hcaptcha" v-model="hCaptchaResponse" class="captcha" provider="hcaptcha" :sitekey="instance.hcaptchaSiteKey"/>
 	<MkCaptcha v-if="instance.enableRecaptcha" ref="recaptcha" v-model="reCaptchaResponse" class="captcha" provider="recaptcha" :sitekey="instance.recaptchaSiteKey"/>
 	<MkCaptcha v-if="instance.enableTurnstile" ref="turnstile" v-model="turnstileResponse" class="captcha" provider="turnstile" :sitekey="instance.turnstileSiteKey"/>

packages/frontend/src/components/global/MkAvatar.vue

@@ -1,11 +1,19 @@
 <template>
-<span v-if="!link" v-user-preview="preview ? user.id : undefined" :class="[$style.root, { [$style.cat]: user.isCat, [$style.square]: $store.state.squareAvatars }]" class="_noSelect" :style="{ color }" :title="acct(user)" @click="onClick">
+<span v-if="!link" v-user-preview="preview ? user.id : undefined" class="_noSelect" :class="[$style.root, { [$style.cat]: user.isCat, [$style.square]: $store.state.squareAvatars }]" :style="{ color }" :title="acct(user)" @click="onClick">
 	<img :class="$style.inner" :src="url" decoding="async"/>
 	<MkUserOnlineIndicator v-if="indicator" :class="$style.indicator" :user="user"/>
+	<template v-if="user.isCat">
+		<div :class="$style.earLeft"/>
+		<div :class="$style.earRight"/>
+	</template>
 </span>
-<MkA v-else v-user-preview="preview ? user.id : undefined" class="_noSelect" :class="[$style.root, { [$style.cat]: user.isCat, [$style.square]: $store.state.squareAvatars }]" :style="{ color }" :to="userPage(user)" :title="acct(user)" :target="target">
+<MkA v-else v-user-preview="preview ? user.id : undefined" class="_noSelect" :class="[$style.root, { [$style.cat]: user.isCat, [$style.square]: $store.state.squareAvatars }]" :style="{ color }" :title="acct(user)" :to="userPage(user)" :target="target">
 	<img :class="$style.inner" :src="url" decoding="async"/>
 	<MkUserOnlineIndicator v-if="indicator" :class="$style.indicator" :user="user"/>
+	<template v-if="user.isCat">
+		<div :class="$style.earLeft"/>
+		<div :class="$style.earRight"/>
+	</template>
 </MkA>
 </template>
 
@@ -110,32 +118,41 @@ watch(() => props.user.avatarBlurhash, () => {
 }
 
 .cat {
-	&:before, &:after {
-		background: #df548f;
-		border: solid 4px currentColor;
-		box-sizing: border-box;
-		content: '';
+	> .earLeft,
+	> .earRight {
+		contain: strict;
 		display: inline-block;
 		height: 50%;
 		width: 50%;
+		background: currentColor;
+
+		&::before {
+			contain: strict;
+			content: '';
+			display: block;
+			width: 60%;
+			height: 60%;
+			margin: 20%;
+			background: #df548f;
+		}
 	}
 
-	&:before {
+	> .earLeft {
 		border-radius: 0 75% 75%;
 		transform: rotate(37.5deg) skew(30deg);
 	}
 
-	&:after {
+	> .earRight {
 		border-radius: 75% 0 75% 75%;
 		transform: rotate(-37.5deg) skew(-30deg);
 	}
 
 	&:hover {
-		&:before {
+		> .earLeft {
 			animation: earwiggleleft 1s infinite;
 		}
 
-		&:after {
+		> .earRight {
 			animation: earwiggleright 1s infinite;
 		}
 	}

packages/frontend/src/os.ts

@@ -171,6 +171,8 @@ export function confirm(props: {
 	type: 'error' | 'info' | 'success' | 'warning' | 'waiting' | 'question';
 	title?: string | null;
 	text?: string | null;
+	okText?: string;
+	cancelText?: string;
 }): Promise<{ canceled: boolean }> {
 	return new Promise((resolve, reject) => {
 		popup(MkDialog, {

packages/frontend/src/pages/auth.form.vue

@@ -1,60 +1,66 @@
 <template>
-<section class="">
-	<div class="">{{ $t('_auth.shareAccess', { name: app.name }) }}</div>
-	<div class="">
-		<h2>{{ app.name }}</h2>
-		<p class="id">{{ app.id }}</p>
-		<p class="description">{{ app.description }}</p>
-	</div>
-	<div class="">
-		<h2>{{ $ts._auth.permissionAsk }}</h2>
-		<ul>
-			<li v-for="p in app.permission" :key="p">{{ $t(`_permissions.${p}`) }}</li>
-		</ul>
-	</div>
-	<div class="">
-		<MkButton inline @click="cancel">{{ $ts.cancel }}</MkButton>
-		<MkButton inline primary @click="accept">{{ $ts.accept }}</MkButton>
-	</div>
-</section>
+	<section>
+		<div v-if="app.permission.length > 0">
+			<p>{{ $t('_auth.permission', { name }) }}</p>
+			<ul>
+				<li v-for="p in app.permission" :key="p">{{ $t(`_permissions.${p}`) }}</li>
+			</ul>
+		</div>
+		<div>{{ i18n.t('_auth.shareAccess', { name: `${name} (${app.id})` }) }}</div>
+		<div :class="$style.buttons">
+			<MkButton inline @click="cancel">{{ i18n.ts.cancel }}</MkButton>
+			<MkButton inline primary @click="accept">{{ i18n.ts.accept }}</MkButton>
+		</div>
+	</section>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { } from 'vue';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { AuthSession } from 'misskey-js/built/entities';
 
-export default defineComponent({
-	components: {
-		MkButton,
-	},
-	props: ['session'],
-	computed: {
-		name(): string {
-			const el = document.createElement('div');
-			el.textContent = this.app.name;
-			return el.innerHTML;
-		},
-		app(): any {
-			return this.session.app;
-		},
-	},
-	methods: {
-		cancel() {
-			os.api('auth/deny', {
-				token: this.session.token,
-			}).then(() => {
-				this.$emit('denied');
-			});
-		},
+const props = defineProps<{
+	session: AuthSession;
+}>();
 
-		accept() {
-			os.api('auth/accept', {
-				token: this.session.token,
-			}).then(() => {
-				this.$emit('accepted');
-			});
-		},
-	},
+const emit = defineEmits<{
+	(event: 'accepted'): void;
+	(event: 'denied'): void;
+}>();
+
+const app = $computed(() => props.session.app);
+
+const name = $computed(() => {
+	const el = document.createElement('div');
+	el.textContent = app.name;
+	return el.innerHTML;
 });
+
+function cancel() {
+	os.api('auth/deny', {
+		token: props.session.token,
+	}).then(() => {
+		emit('denied');
+	});
+}
+
+function accept() {
+	os.api('auth/accept', {
+		token: props.session.token,
+	}).then(() => {
+		emit('accepted');
+	});
+}
+
 </script>
+
+<style lang="scss" module>
+.buttons {
+	margin-top: 16px;
+	display: flex;
+	gap: 8px;
+	flex-wrap: wrap;
+}
+</style>

packages/frontend/src/pages/auth.vue

@@ -1,93 +1,105 @@
 <template>
-<div v-if="$i && fetching" class="">
-	<MkLoading/>
-</div>
-<div v-else-if="$i">
-	<XForm
-		v-if="state == 'waiting'"
-		ref="form"
-		class="form"
-		:session="session"
-		@denied="state = 'denied'"
-		@accepted="accepted"
-	/>
-	<div v-if="state == 'denied'" class="denied">
-		<h1>{{ $ts._auth.denied }}</h1>
-	</div>
-	<div v-if="state == 'accepted'" class="accepted">
-		<h1>{{ session.app.isAuthorized ? $t('already-authorized') : $ts.allowed }}</h1>
-		<p v-if="session.app.callbackUrl">{{ $ts._auth.callback }}<MkEllipsis/></p>
-		<p v-if="!session.app.callbackUrl">{{ $ts._auth.pleaseGoBack }}</p>
-	</div>
-	<div v-if="state == 'fetch-session-error'" class="error">
-		<p>{{ $ts.somethingHappened }}</p>
-	</div>
-</div>
-<div v-else class="signin">
-	<MkSignin @login="onLogin"/>
-</div>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" /></template>
+	<MkSpacer :content-max="500">
+		<div v-if="state == 'fetch-session-error'">
+			<p>{{ i18n.ts.somethingHappened }}</p>
+		</div>
+		<div v-else-if="$i && !session">
+			<MkLoading />
+		</div>
+		<div v-else-if="$i && session">
+			<XForm
+				v-if="state == 'waiting'"
+				class="form"
+				:session="session"
+				@denied="state = 'denied'"
+				@accepted="accepted"
+			/>
+			<div v-if="state == 'denied'">
+				<h1>{{ i18n.ts._auth.denied }}</h1>
+			</div>
+			<div v-if="state == 'accepted' && session">
+				<h1>{{ session.app.isAuthorized ? $t('already-authorized') : i18n.ts.allowed }}</h1>
+				<p v-if="session.app.callbackUrl">{{ i18n.ts._auth.callback }}
+					<MkEllipsis />
+				</p>
+				<p v-if="!session.app.callbackUrl">{{ i18n.ts._auth.pleaseGoBack }}</p>
+			</div>
+		</div>
+		<div v-else>
+			<p :class="$style.loginMessage">{{ i18n.ts._auth.pleaseLogin }}</p>
+			<MkSignin @login="onLogin" />
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { onMounted } from 'vue';
 import XForm from './auth.form.vue';
 import MkSignin from '@/components/MkSignin.vue';
 import * as os from '@/os';
-import { login } from '@/account';
+import { $i, login } from '@/account';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { AuthSession } from 'misskey-js/built/entities';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
-	components: {
-		XForm,
-		MkSignin,
-	},
-	props: ['token'],
-	data() {
-		return {
-			state: null,
-			session: null,
-			fetching: true,
-		};
-	},
-	mounted() {
-		if (!this.$i) return;
+const props = defineProps<{
+	token: string;
+}>();
 
-		// Fetch session
-		os.api('auth/session/show', {
-			token: this.token,
-		}).then(session => {
-			this.session = session;
-			this.fetching = false;
+let state = $ref<'waiting' | 'accepted' | 'fetch-session-error' | 'denied' | null>(null);
+let session = $ref<AuthSession | null>(null);
 
-			// 既に連携していた場合
-			if (this.session.app.isAuthorized) {
-				os.api('auth/accept', {
-					token: this.session.token,
-				}).then(() => {
-					this.accepted();
-				});
-			} else {
-				this.state = 'waiting';
-			}
-		}).catch(error => {
-			this.state = 'fetch-session-error';
-			this.fetching = false;
+function accepted() {
+	state = 'accepted';
+	if (session && session.app.callbackUrl) {
+		const url = new URL(session.app.callbackUrl);
+		if (['javascript:', 'file:', 'data:', 'mailto:', 'tel:'].includes(url.protocol)) throw new Error('invalid url');
+		location.href = `${session.app.callbackUrl}?token=${session.token}`;
+	}
+}
+
+function onLogin(res) {
+	login(res.i);
+}
+
+onMounted(async () => {
+	if (!$i) return;
+
+	try {
+		session = await os.api('auth/session/show', {
+			token: props.token,
 		});
-	},
-	methods: {
-		accepted() {
-			this.state = 'accepted';
-			if (this.session.app.callbackUrl) {
-				const url = new URL(this.session.app.callbackUrl);
-				if (['javascript:', 'file:', 'data:', 'mailto:', 'tel:'].includes(url.protocol)) throw new Error('invalid url');
-				location.href = `${this.session.app.callbackUrl}?token=${this.session.token}`;
-			}
-		}, onLogin(res) {
-			login(res.i);
-		},
-	},
+
+		// 既に連携していた場合
+		if (session.app.isAuthorized) {
+			await os.api('auth/accept', {
+				token: session.token,
+			});
+			accepted();
+		} else {
+			state = 'waiting';
+		}
+	} catch (e) {
+		state = 'fetch-session-error';
+	}
+});
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts._auth.shareAccessTitle,
+	icon: 'ti ti-apps',
 });
 </script>
 
-<style lang="scss" scoped>
-
+<style lang="scss" module>
+.loginMessage {
+	text-align: center;
+	margin: 8px 0 24px;
+}
 </style>

packages/frontend/src/pages/miauth.vue

@@ -1,41 +1,40 @@
 <template>
-<MkSpacer :content-max="800">
-	<div v-if="$i">
-		<div v-if="state == 'waiting'" class="waiting">
-			<div class="">
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" /></template>
+	<MkSpacer :content-max="800">
+		<div v-if="$i">
+			<div v-if="state == 'waiting'">
 				<MkLoading/>
 			</div>
-		</div>
-		<div v-if="state == 'denied'" class="denied">
-			<div class="">
+			<div v-if="state == 'denied'">
 				<p>{{ i18n.ts._auth.denied }}</p>
 			</div>
-		</div>
-		<div v-else-if="state == 'accepted'" class="accepted">
-			<div class="">
+			<div v-else-if="state == 'accepted'" class="accepted">
 				<p v-if="callback">{{ i18n.ts._auth.callback }}<MkEllipsis/></p>
 				<p v-else>{{ i18n.ts._auth.pleaseGoBack }}</p>
 			</div>
-		</div>
-		<div v-else class="">
-			<div v-if="name" class="">{{ $t('_auth.shareAccess', { name: name }) }}</div>
-			<div v-else class="">{{ i18n.ts._auth.shareAccessAsk }}</div>
-			<div class="">
-				<p>{{ i18n.ts._auth.permissionAsk }}</p>
-				<ul>
-					<li v-for="p in _permissions" :key="p">{{ $t(`_permissions.${p}`) }}</li>
-				</ul>
-			</div>
-			<div class="">
-				<MkButton inline @click="deny">{{ i18n.ts.cancel }}</MkButton>
-				<MkButton inline primary @click="accept">{{ i18n.ts.accept }}</MkButton>
+			<div v-else>
+				<div v-if="_permissions.length > 0">
+					<p v-if="name">{{ $t('_auth.permission', { name }) }}</p>
+					<p v-else>{{ i18n.ts._auth.permissionAsk }}</p>
+					<ul>
+						<li v-for="p in _permissions" :key="p">{{ $t(`_permissions.${p}`) }}</li>
+					</ul>
+				</div>
+				<div v-if="name">{{ $t('_auth.shareAccess', { name }) }}</div>
+				<div v-else>{{ i18n.ts._auth.shareAccessAsk }}</div>
+				<div :class="$style.buttons">
+					<MkButton inline @click="deny">{{ i18n.ts.cancel }}</MkButton>
+					<MkButton inline primary @click="accept">{{ i18n.ts.accept }}</MkButton>
+				</div>
 			</div>
 		</div>
-	</div>
-	<div v-else class="signin">
-		<MkSignin @login="onLogin"/>
-	</div>
-</MkSpacer>
+		<div v-else>
+			<p :class="$style.loginMessage">{{ i18n.ts._auth.pleaseLogin }}</p>
+			<MkSignin @login="onLogin"/>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -45,6 +44,7 @@ import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os';
 import { $i, login } from '@/account';
 import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const props = defineProps<{
 	session: string;
@@ -54,7 +54,7 @@ const props = defineProps<{
 	permission: string; // コンマ区切り
 }>();
 
-const _permissions = props.permission.split(',');
+const _permissions = props.permission ? props.permission.split(',') : [];
 
 let state = $ref<string | null>(null);
 
@@ -83,8 +83,27 @@ function deny(): void {
 function onLogin(res): void {
 	login(res.i);
 }
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: 'MiAuth',
+	icon: 'ti ti-apps',
+});
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" module>
+.buttons {
+	margin-top: 16px;
+	display: flex;
+	gap: 8px;
+	flex-wrap: wrap;
+}
 
+.loginMessage {
+	text-align: center;
+	margin: 8px 0 24px;
+}
 </style>

packages/frontend/src/pages/settings/profile.vue

@@ -150,6 +150,8 @@ function changeAvatar(ev) {
 		const { canceled } = await os.confirm({
 			type: 'question',
 			text: i18n.t('cropImageAsk'),
+			okText: i18n.ts.cropYes,
+			cancelText: i18n.ts.cropNo,
 		});
 
 		if (!canceled) {
@@ -174,6 +176,8 @@ function changeBanner(ev) {
 		const { canceled } = await os.confirm({
 			type: 'question',
 			text: i18n.t('cropImageAsk'),
+			okText: i18n.ts.cropYes,
+			cancelText: i18n.ts.cropNo,
 		});
 
 		if (!canceled) {

packages/frontend/src/ui/_common_/navbar-for-mobile.vue

@@ -35,7 +35,7 @@
 				<i class="icon ti ti-pencil ti-fw"></i><span class="text">{{ i18n.ts.note }}</span>
 			</button>
 			<button v-click-anime class="item _button account" @click="openAccountMenu">
-				<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
+				<MkAvatar :user="$i" class="avatar"/><MkAcct class="text _nowrap" :user="$i"/>
 			</button>
 		</div>
 	</div>
@@ -168,20 +168,25 @@ function more() {
 				display: flex;
 				align-items: center;
 				padding-left: 30px;
-				text-overflow: ellipsis;
-				overflow: hidden;
-				white-space: nowrap;
 				width: 100%;
 				text-align: left;
 				box-sizing: border-box;
 				margin-top: 16px;
 
 				> .avatar {
+					display: block;
+					flex-shrink: 0;
 					position: relative;
 					width: 32px;
 					aspect-ratio: 1;
 					margin-right: 8px;
 				}
+
+				> .text {
+					display: block;
+					flex-shrink: 1;
+					padding-right: 8px;
+				}
 			}
 		}
 

packages/frontend/src/ui/_common_/navbar.vue

@@ -45,7 +45,7 @@
 				<i class="icon ti ti-pencil ti-fw"></i><span class="text">{{ i18n.ts.note }}</span>
 			</button>
 			<button v-click-anime v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="item _button account" @click="openAccountMenu">
-				<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
+				<MkAvatar :user="$i" class="avatar"/><MkAcct class="text _nowrap" :user="$i"/>
 			</button>
 		</div>
 	</div>
@@ -217,20 +217,25 @@ function more(ev: MouseEvent) {
 					display: flex;
 					align-items: center;
 					padding-left: 30px;
-					text-overflow: ellipsis;
-					overflow: hidden;
-					white-space: nowrap;
 					width: 100%;
 					text-align: left;
 					box-sizing: border-box;
 					margin-top: 16px;
 
 					> .avatar {
+						display: block;
+						flex-shrink: 0;
 						position: relative;
 						width: 32px;
 						aspect-ratio: 1;
 						margin-right: 8px;
 					}
+
+					> .text {
+						display: block;
+						flex-shrink: 1;
+						padding-right: 8px;
+					}
 				}
 			}