From e41ba1d177cda1aad83ba184c04abbd3a78dbc5a Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 27 Aug 2024 19:47:25 +0900
Subject: [PATCH] wip

---
 .../frontend-embed/src/components/EmAcct.vue  | 24 +++++++++++++++++++
 .../src/components/EmMention.vue              | 12 ----------
 .../src/components/EmNoteDetailed.vue         |  2 ++
 .../src/components/EmUserName.vue             | 21 ++++++++++++++++
 packages/frontend-embed/src/style.scss        |  7 ++++++
 .../src/components/MkEmbedCodeGenDialog.vue   | 18 ++++++--------
 6 files changed, 61 insertions(+), 23 deletions(-)
 create mode 100644 packages/frontend-embed/src/components/EmAcct.vue
 create mode 100644 packages/frontend-embed/src/components/EmUserName.vue

diff --git a/packages/frontend-embed/src/components/EmAcct.vue b/packages/frontend-embed/src/components/EmAcct.vue
new file mode 100644
index 0000000000..07315e6a8b
--- /dev/null
+++ b/packages/frontend-embed/src/components/EmAcct.vue
@@ -0,0 +1,24 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<span>
+	<span>@{{ user.username }}</span>
+	<span v-if="user.host || detail" style="opacity: 0.5;">@{{ user.host || host }}</span>
+</span>
+</template>
+
+<script lang="ts" setup>
+import * as Misskey from 'misskey-js';
+import { toUnicode } from 'punycode/';
+import { host as hostRaw } from '@/config.js';
+
+defineProps<{
+	user: Misskey.entities.UserLite;
+	detail?: boolean;
+}>();
+
+const host = toUnicode(hostRaw);
+</script>
diff --git a/packages/frontend-embed/src/components/EmMention.vue b/packages/frontend-embed/src/components/EmMention.vue
index 521afad332..5eadf828c7 100644
--- a/packages/frontend-embed/src/components/EmMention.vue
+++ b/packages/frontend-embed/src/components/EmMention.vue
@@ -5,7 +5,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <MkA v-user-preview="canonical" :class="[$style.root]" :to="url" :style="{ background: bgCss }">
-	<img :class="$style.icon" :src="avatarUrl" alt="">
 	<span>
 		<span>@{{ username }}</span>
 		<span v-if="(host != localHost)" :class="$style.host">@{{ toUnicode(host) }}</span>
@@ -31,8 +30,6 @@ const url = `/${canonical}`;
 const bg = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--mention'));
 bg.setAlpha(0.1);
 const bgCss = bg.toRgbString();
-
-const avatarUrl = `/avatar/@${props.username}@${props.host}`;
 </script>
 
 <style lang="scss" module>
@@ -43,15 +40,6 @@ const avatarUrl = `/avatar/@${props.username}@${props.host}`;
 	color: var(--mention);
 }
 
-.icon {
-	width: 1.5em;
-	height: 1.5em;
-	object-fit: cover;
-	margin: 0 0.2em 0 0;
-	vertical-align: bottom;
-	border-radius: 100%;
-}
-
 .host {
 	opacity: 0.5;
 }
diff --git a/packages/frontend-embed/src/components/EmNoteDetailed.vue b/packages/frontend-embed/src/components/EmNoteDetailed.vue
index 507c42f711..ba153882cf 100644
--- a/packages/frontend-embed/src/components/EmNoteDetailed.vue
+++ b/packages/frontend-embed/src/components/EmNoteDetailed.vue
@@ -136,6 +136,8 @@ import EmPoll from '@/components/EmPoll.vue';
 import EmA from '@/components/EmA.vue';
 import EmAvatar from '@/components/EmAvatar.vue';
 import EmTime from '@/components/EmTime.vue';
+import EmUserName from '@/components/EmUserName.vue';
+import EmAcct from '@/components/EmAcct.vue';
 import { userPage } from '@/utils.js';
 import { notePage } from '@/utils.js';
 import { i18n } from '@/i18n.js';
diff --git a/packages/frontend-embed/src/components/EmUserName.vue b/packages/frontend-embed/src/components/EmUserName.vue
new file mode 100644
index 0000000000..c0c7c443ca
--- /dev/null
+++ b/packages/frontend-embed/src/components/EmUserName.vue
@@ -0,0 +1,21 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<EmMfm :text="user.name ?? user.username" :author="user" :plain="true" :nowrap="nowrap" :emojiUrls="user.emojis"/>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import * as Misskey from 'misskey-js';
+import EmMfm from './EmMfm.js';
+
+const props = withDefaults(defineProps<{
+	user: Misskey.entities.User;
+	nowrap?: boolean;
+}>(), {
+	nowrap: true,
+});
+</script>
diff --git a/packages/frontend-embed/src/style.scss b/packages/frontend-embed/src/style.scss
index ee3b5c53c8..7a0063a75c 100644
--- a/packages/frontend-embed/src/style.scss
+++ b/packages/frontend-embed/src/style.scss
@@ -108,6 +108,13 @@ rt {
 	text-align: center;
 }
 
+._nowrap {
+	white-space: pre !important;
+	word-wrap: normal !important; // https://codeday.me/jp/qa/20190424/690106.html
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
 ._button {
 	user-select: none;
 	-webkit-user-select: none;
diff --git a/packages/frontend/src/components/MkEmbedCodeGenDialog.vue b/packages/frontend/src/components/MkEmbedCodeGenDialog.vue
index 3fa8242b6f..120851f69d 100644
--- a/packages/frontend/src/components/MkEmbedCodeGenDialog.vue
+++ b/packages/frontend/src/components/MkEmbedCodeGenDialog.vue
@@ -29,7 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				>
 					<MkLoading v-if="iframeLoading" :class="$style.embedCodeGenPreviewSpinner"/>
 					<div :class="$style.embedCodeGenPreviewWrapper">
-						<div :class="$style.embedCodeGenPreviewTitle">{{ i18n.ts.preview }}</div>
+						<div class="_acrylic" :class="$style.embedCodeGenPreviewTitle">{{ i18n.ts.preview }}</div>
 						<div ref="resizerRootEl" :class="$style.embedCodeGenPreviewResizerRoot" inert>
 							<div
 								:class="$style.embedCodeGenPreviewResizer"
@@ -326,16 +326,12 @@ onUnmounted(() => {
 }
 
 .embedCodeGenPreviewTitle {
-	width: fit-content;
-	flex-shrink: 0;
-	padding: 0 8px;
-	background-color: var(--panel);
-	border-right: 1px solid var(--divider);
-	border-bottom: 1px solid var(--divider);
-	border-bottom-right-radius: var(--radius);
-	height: 28px;
-	line-height: 28px;
-	box-sizing: border-box;
+	position: absolute;
+	z-index: 100;
+	top: 8px;
+	left: 8px;
+	padding: 6px 8px;
+	border-radius: 6px;
 }
 
 .embedCodeGenPreviewSpinner {