Merge remote-tracking branch 'misskey-dev/develop' into io

packages/frontend/src/components/MkAutocomplete.vue

@@ -431,7 +431,7 @@ function applySelect() {
 
 function chooseUser() {
 	props.close();
-	os.selectUser().then(user => {
+	os.selectUser({ includeSelf: true }).then(user => {
 		complete('user', user);
 		props.textarea.focus();
 	});

packages/frontend/src/components/MkChartLegend.vue

@@ -30,9 +30,9 @@ function onClick(item: LegendItem) {
 	if (chart.value == null) return;
 	if (type.value === 'pie' || type.value === 'doughnut') {
 		// Pie and doughnut charts only have a single dataset and visibility is per item
-		if (item.index) chart.value.toggleDataVisibility(item.index);
+		if (item.index != null) chart.value.toggleDataVisibility(item.index);
 	} else {
-		if (item.datasetIndex) chart.value.setDatasetVisibility(item.datasetIndex, !chart.value.isDatasetVisible(item.datasetIndex));
+		if (item.datasetIndex != null) chart.value.setDatasetVisibility(item.datasetIndex, !chart.value.isDatasetVisible(item.datasetIndex));
 	}
 	chart.value.update();
 }

packages/frontend/src/components/MkCode.core.vue

@@ -5,13 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <!-- eslint-disable vue/no-v-html -->
 <template>
-<div :class="['codeBlockRoot', { 'codeEditor': codeEditor }]" v-html="html"></div>
+<div :class="[$style.codeBlockRoot, { [$style.codeEditor]: codeEditor }]" v-html="html"></div>
 </template>
 
 <script lang="ts" setup>
 import { ref, computed, watch } from 'vue';
-import { BUNDLED_LANGUAGES } from 'shiki';
-import type { Lang as ShikiLang } from 'shiki';
+import { bundledLanguagesInfo } from 'shiki';
+import type { BuiltinLanguage } from 'shiki';
 import { getHighlighter } from '@/scripts/code-highlighter.js';
 
 const props = defineProps<{
@@ -22,24 +22,24 @@ const props = defineProps<{
 
 const highlighter = await getHighlighter();
 
-const codeLang = ref<ShikiLang | 'aiscript'>('js');
+const codeLang = ref<BuiltinLanguage | 'aiscript'>('js');
 const html = computed(() => highlighter.codeToHtml(props.code, {
 	lang: codeLang.value,
 	theme: 'dark-plus',
 }));
 
 async function fetchLanguage(to: string): Promise<void> {
-	const language = to as ShikiLang;
+	const language = to as BuiltinLanguage;
 
 	// Check for the loaded languages, and load the language if it's not loaded yet.
 	if (!highlighter.getLoadedLanguages().includes(language)) {
 		// Check if the language is supported by Shiki
-		const bundles = BUNDLED_LANGUAGES.filter((bundle) => {
+		const bundles = bundledLanguagesInfo.filter((bundle) => {
 			// Languages are specified by their id, they can also have aliases (i. e. "js" and "javascript")
 			return bundle.id === language || bundle.aliases?.includes(language);
 		});
 		if (bundles.length > 0) {
-			await highlighter.loadLanguage(language);
+			await highlighter.loadLanguage(bundles[0].import);
 			codeLang.value = language;
 		} else {
 			codeLang.value = 'js';
@@ -57,8 +57,8 @@ watch(() => props.lang, (to) => {
 }, { immediate: true });
 </script>
 
-<style scoped lang="scss">
-.codeBlockRoot :deep(.shiki) {
+<style module lang="scss">
+.codeBlockRoot :global(.shiki) {
 	padding: 1em;
 	margin: .5em 0;
 	overflow: auto;
@@ -74,7 +74,7 @@ watch(() => props.lang, (to) => {
 	min-width: 100%;
 	height: 100%;
 
-	& :deep(.shiki) {
+	& :global(.shiki) {
 		padding: 12px;
 		margin: 0;
 		border-radius: 6px;

packages/frontend/src/components/MkMediaVideo.vue

@@ -396,6 +396,7 @@ onDeactivated(() => {
 
 .hidden {
 	width: 100%;
+	height: 100%;
 	background: #000;
 	border: none;
 	outline: none;

packages/frontend/src/components/MkNote.vue

@@ -256,7 +256,12 @@ const translation = ref<Misskey.entities.NotesTranslateResponse | null>(null);
 const translating = ref(false);
 const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.value.user.instance);
 const canRenote = computed(() => ['public', 'home'].includes(appearNote.value.visibility) || (appearNote.value.visibility === 'followers' && appearNote.value.userId === $i?.id));
-const renoteCollapsed = ref(defaultStore.state.collapseRenotes && isRenote && (($i && ($i.id === note.value.userId || $i.id === appearNote.value.userId)) ?? (appearNote.value.myReaction != null)));
+const renoteCollapsed = ref(
+	defaultStore.state.collapseRenotes && isRenote && (
+		($i && ($i.id === note.value.userId || $i.id === appearNote.value.userId)) || // `||` must be `||`! See https://github.com/misskey-dev/misskey/issues/13131
+		(appearNote.value.myReaction != null)
+	)
+);
 const hideMutedNotes = defaultStore.state.hideMutedNotes;
 
 /* Overload FunctionにLintが対応していないのでコメントアウト

packages/frontend/src/components/MkPostForm.vue

@@ -865,7 +865,7 @@ function cancel() {
 }
 
 function insertMention() {
-	os.selectUser().then(user => {
+	os.selectUser({ localOnly: localOnly.value, includeSelf: true }).then(user => {
 		insertTextAtCursor(textareaEl.value, '@' + Misskey.acct.toString(user) + ' ');
 	});
 }

packages/frontend/src/components/MkUserSelectDialog.vue

@@ -78,10 +78,13 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
 	includeSelf?: boolean;
 	localOnly?: boolean;
-}>();
+}>(), {
+	includeSelf: false,
+	localOnly: false,
+});
 
 const username = ref('');
 const host = ref('');
@@ -102,10 +105,10 @@ function search() {
 		detail: false,
 	}).then(_users => {
 		users.value = _users.filter((u) => {
-			if (!props.includeSelf) {
-				return u.id !== $i?.id;
-			} else {
+			if (props.includeSelf) {
 				return true;
+			} else {
+				return u.id !== $i?.id;
 			}
 		});
 	});
@@ -146,10 +149,10 @@ onMounted(() => {
 				}
 			})
 			.filter((u) => {
-				if (!props.includeSelf) {
-					return u.id !== $i?.id;
-				} else {
+				if (props.includeSelf) {
 					return true;
+				} else {
+					return u.id !== $i?.id;
 				}
 			});
 

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

@@ -27,7 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<img
 			v-for="decoration in decorations ?? user.avatarDecorations"
 			:class="[$style.decoration]"
-			:src="decoration.url"
+			:src="getDecorationUrl(decoration)"
 			:style="{
 				rotate: getDecorationAngle(decoration),
 				scale: getDecorationScale(decoration),
@@ -92,6 +92,11 @@ function onClick(ev: MouseEvent): void {
 	emit('click', ev);
 }
 
+function getDecorationUrl(decoration: Omit<Misskey.entities.UserDetailed['avatarDecorations'][number], 'id'>) {
+	if (defaultStore.state.disableShowingAnimatedImages || defaultStore.state.dataSaver.avatar) return getStaticImageUrl(decoration.url);
+	return decoration.url;
+}
+
 function getDecorationAngle(decoration: Omit<Misskey.entities.UserDetailed['avatarDecorations'][number], 'id'>) {
 	const angle = decoration.angle ?? 0;
 	return angle === 0 ? undefined : `${angle * 360}deg`;