Merge branch 'develop' into bh-worker

packages/frontend/src/components/MkMediaImage.vue

@@ -34,6 +34,7 @@
 		<div :class="$style.indicators">
 			<div v-if="['image/gif', 'image/apng'].includes(image.type)" :class="$style.indicator">GIF</div>
 			<div v-if="image.comment" :class="$style.indicator">ALT</div>
+			<div v-if="image.isSensitive" :class="$style.indicator" style="color: var(--warn);">NSFW</div>
 		</div>
 		<button v-tooltip="i18n.ts.hide" :class="$style.hide" class="_button" @click.stop.prevent="hide = true"><i class="ti ti-eye-off"></i></button>
 	</template>
@@ -48,6 +49,8 @@ import bytes from '@/filters/bytes';
 import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
 import { defaultStore } from '@/store';
 import { i18n } from '@/i18n';
+import * as os from '@/os';
+import { iAmModerator } from '@/account';
 
 const props = defineProps<{
 	image: misskey.entities.DriveFile;
@@ -77,6 +80,17 @@ watch(() => props.image, () => {
 	deep: true,
 	immediate: true,
 });
+
+function showMenu(ev: MouseEvent) {
+	os.popupMenu([...(iAmModerator ? [{
+		text: i18n.ts.markAsSensitive,
+		icon: 'ti ti-eye-off',
+		action: () => {
+			os.apiWithDialog('drive/files/update', { fileId: props.image.id, isSensitive: true });
+		},
+	}] : [])], ev.currentTarget ?? ev.target);
+}
+
 </script>
 
 <style lang="scss" module>
@@ -126,6 +140,21 @@ watch(() => props.image, () => {
 	right: 12px;
 }
 
+.menu {
+	display: block;
+	position: absolute;
+	border-radius: 6px;
+	background-color: rgba(0, 0, 0, 0.3);
+	-webkit-backdrop-filter: var(--blur, blur(15px));
+	backdrop-filter: var(--blur, blur(15px));
+	color: #fff;
+	font-size: 0.8em;
+	padding: 6px 8px;
+	text-align: center;
+	bottom: 12px;
+	right: 12px;
+}
+
 .imageContainer {
 	display: block;
 	cursor: zoom-in;

packages/frontend/src/components/global/MkAcct.stories.impl.ts

@@ -47,8 +47,24 @@ export const Long = {
 		...Default.args,
 		user: {
 			...userDetailed(),
-			username: '2c7cc62a697ea3a7826521f3fd34f0cb273693cbe5e9310f35449f43622a5cdc',
-			host: 'nostr.example',
+			username: 'the_quick_brown_fox_jumped_over_the_lazy_dog',
+			host: 'misskey.example',
+		},
+	},
+	decorators: [
+		() => ({
+			template: '<div style="width: 360px;"><story/></div>',
+		}),
+	],
+} satisfies StoryObj<typeof MkAcct>;
+export const VeryLong = {
+	...Default,
+	args: {
+		...Default.args,
+		user: {
+			...userDetailed(),
+			username: '2c7cc62a697ea3a7826521f3fd34f0cb273693cbe5e9310f35449f43622a5cdc',
+			host: 'the.quick.brown.fox.jumped.over.the.lazy.dog.very.long.hostname.nostr.example',
 		},
 	},
 	decorators: [

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

@@ -1,5 +1,5 @@
 <template>
-<MkCondensedLine v-if="defaultStore.state.enableCondensedLineForAcct">
+<MkCondensedLine v-if="defaultStore.state.enableCondensedLineForAcct" :min-scale="2 / 3">
 	<span>@{{ user.username }}</span>
 	<span v-if="user.host || detail || defaultStore.state.showFullAcct" style="opacity: 0.5;">@{{ user.host || host }}</span>
 </MkCondensedLine>

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

@@ -7,14 +7,19 @@
 </template>
 
 <script lang="ts">
+interface Props {
+	readonly minScale?: number;
+}
+
 const contentSymbol = Symbol();
 const observer = new ResizeObserver((entries) => {
 	for (const entry of entries) {
 		const content = (entry.target[contentSymbol] ? entry.target : entry.target.firstElementChild) as HTMLSpanElement;
+		const props: Required<Props> = content[contentSymbol];
 		const container = content.parentElement as HTMLSpanElement;
 		const contentWidth = content.getBoundingClientRect().width;
 		const containerWidth = container.getBoundingClientRect().width;
-		container.style.transform = `scaleX(${Math.min(1, containerWidth / contentWidth)})`;
+		container.style.transform = `scaleX(${Math.max(props.minScale, Math.min(1, containerWidth / contentWidth))})`;
 	}
 });
 </script>
@@ -22,6 +27,10 @@ const observer = new ResizeObserver((entries) => {
 <script setup lang="ts">
 import { ref, watch } from 'vue';
 
+const props = withDefaults(defineProps<Props>(), {
+	minScale: 0,
+});
+
 const content = ref<HTMLSpanElement>();
 
 watch(content, (value, oldValue) => {
@@ -33,7 +42,7 @@ watch(content, (value, oldValue) => {
 		}
 	}
 	if (value) {
-		value[contentSymbol] = contentSymbol;
+		value[contentSymbol] = props;
 		observer.observe(value);
 		if (value.parentElement) {
 			observer.observe(value.parentElement);
@@ -45,7 +54,7 @@ watch(content, (value, oldValue) => {
 <style module lang="scss">
 .container {
 	display: inline-block;
-	width: 100%;
+	max-width: 100%;
 	transform-origin: 0;
 }