Merge remote-tracking branch 'mi-dev/develop' into emoji

# Conflicts:
#	CHANGELOG.md
#	packages/misskey-js/etc/misskey-js.api.md

packages/frontend/src/components/MkNotePreview.vue

@@ -5,14 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div :class="$style.root">
-	<MkAvatar :class="$style.avatar" :user="$i" link preview/>
+	<MkAvatar :class="$style.avatar" :user="user" link preview/>
 	<div :class="$style.main">
 		<div :class="$style.header">
-			<MkUserName :user="$i" :nowrap="true"/>
+			<MkUserName :user="user" :nowrap="true"/>
 		</div>
 		<div>
 			<div>
-				<Mfm :text="text.trim()" :author="$i" :i="$i"/>
+				<Mfm :text="text.trim()" :author="user" :i="user"/>
 			</div>
 		</div>
 	</div>
@@ -21,10 +21,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { } from 'vue';
-import { $i } from '@/account.js';
+import * as Misskey from 'misskey-js';
 
 const props = defineProps<{
 	text: string;
+	user: Misskey.entities.User;
 }>();
 </script>
 

packages/frontend/src/components/MkPostForm.vue

@@ -73,7 +73,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" :class="$style.hashtags" :placeholder="i18n.ts.hashtags" list="hashtags">
 	<XPostFormAttaches v-model="files" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName" @replaceFile="replaceFile"/>
 	<MkPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/>
-	<MkNotePreview v-if="showPreview" :class="$style.preview" :text="text"/>
+	<MkNotePreview v-if="showPreview" :class="$style.preview" :text="text" :user="postAccount ?? $i"/>
 	<div v-if="showingOptions" style="padding: 8px 16px;">
 	</div>
 	<footer :class="$style.footer">

packages/frontend/src/components/MkRange.vue

@@ -34,6 +34,7 @@ const props = withDefaults(defineProps<{
 	textConverter?: (value: number) => string,
 	showTicks?: boolean;
 	easing?: boolean;
+	continuousUpdate?: boolean;
 }>(), {
 	step: 1,
 	textConverter: (v) => v.toString(),
@@ -123,6 +124,10 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => {
 		const pointerX = ev.touches && ev.touches.length > 0 ? ev.touches[0].clientX : ev.clientX;
 		const pointerPositionOnContainer = pointerX - (containerRect.left + (thumbWidth / 2));
 		rawValue.value = Math.min(1, Math.max(0, pointerPositionOnContainer / (containerEl.value!.offsetWidth - thumbWidth)));
+
+		if (props.continuousUpdate) {
+			emit('update:modelValue', finalValue.value);
+		}
 	};
 
 	let beforeValue = finalValue.value;

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

@@ -23,7 +23,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</div>
 	</div>
-	<img v-if="decoration || user.avatarDecorations.length > 0" :class="[$style.decoration]" :src="decoration ?? user.avatarDecorations[0].url" alt="">
+	<img
+		v-if="showDecoration && (decoration || user.avatarDecorations.length > 0)"
+		:class="[$style.decoration]"
+		:src="decoration?.url ?? user.avatarDecorations[0].url"
+		:style="{
+			rotate: getDecorationAngle(),
+			scale: getDecorationScale(),
+		}"
+		alt=""
+	>
 </component>
 </template>
 
@@ -48,18 +57,28 @@ const props = withDefaults(defineProps<{
 	link?: boolean;
 	preview?: boolean;
 	indicator?: boolean;
-	decoration?: string;
+	decoration?: {
+		url: string;
+		angle?: number;
+		flipH?: boolean;
+		flipV?: boolean;
+	};
+	forceShowDecoration?: boolean;
 }>(), {
 	target: null,
 	link: false,
 	preview: false,
 	indicator: false,
+	decoration: undefined,
+	forceShowDecoration: false,
 });
 
 const emit = defineEmits<{
 	(ev: 'click', v: MouseEvent): void;
 }>();
 
+const showDecoration = props.forceShowDecoration || defaultStore.state.showAvatarDecorations;
+
 const bound = $computed(() => props.link
 	? { to: userPage(props.user), target: props.target }
 	: {});
@@ -73,6 +92,30 @@ function onClick(ev: MouseEvent): void {
 	emit('click', ev);
 }
 
+function getDecorationAngle() {
+	let angle;
+	if (props.decoration) {
+		angle = props.decoration.angle ?? 0;
+	} else if (props.user.avatarDecorations.length > 0) {
+		angle = props.user.avatarDecorations[0].angle ?? 0;
+	} else {
+		angle = 0;
+	}
+	return angle === 0 ? undefined : `${angle * 360}deg`;
+}
+
+function getDecorationScale() {
+	let scaleX;
+	if (props.decoration) {
+		scaleX = props.decoration.flipH ? -1 : 1;
+	} else if (props.user.avatarDecorations.length > 0) {
+		scaleX = props.user.avatarDecorations[0].flipH ? -1 : 1;
+	} else {
+		scaleX = 1;
+	}
+	return scaleX === 1 ? undefined : `${scaleX} 1`;
+}
+
 let color = $ref<string | undefined>();
 
 watch(() => props.user.avatarBlurhash, () => {