From 87c75af182a2497718a2d193f0c31558e685af48 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Mon, 3 Jun 2024 15:01:14 +0900
Subject: [PATCH] tweak ui

---
 .../src/components/MkNoteDetailed.vue         | 12 +++-
 .../src/pages/embed/user-timeline.vue         | 57 ++++++++++++++++++-
 2 files changed, 65 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index 0784deceed..31bda0302c 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -58,7 +58,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<div :class="$style.noteHeaderUsername"><MkAcct :user="appearNote.user"/></div>
 					</div>
 					<div :class="$style.noteHeaderInfo">
-						<img v-if="inEmbedPage" :src="instance.iconUrl || '/favicon.ico'" alt="" :class="$style.noteHeaderInstanceIcon"/>
+						<a v-if="inEmbedPage" :href="url" :class="$style.noteHeaderInstanceIconLink" target="_blank" rel="noopener noreferrer">
+							<img :src="instance.iconUrl || '/favicon.ico'" alt="" :class="$style.noteHeaderInstanceIcon"/>
+						</a>
 						<template v-else>
 							<div v-if="appearNote.visibility !== 'public'" :title="i18n.ts._visibility[appearNote.visibility]">
 								<i v-if="appearNote.visibility === 'home'" class="ti ti-home"></i>
@@ -275,6 +277,7 @@ import MkPagination, { type Paging } from '@/components/MkPagination.vue';
 import MkReactionIcon from '@/components/MkReactionIcon.vue';
 import MkButton from '@/components/MkButton.vue';
 import { isEnabledUrlPreview, instance } from '@/instance.js';
+import { url } from '@/config.js';
 
 const props = withDefaults(defineProps<{
 	note: Misskey.entities.Note;
@@ -699,11 +702,14 @@ function loadConversation() {
 	align-items: center;
 }
 
-.noteHeaderInstanceIcon {
+.noteHeaderInstanceIconLink {
 	display: inline-block;
+	margin-left: 4px;
+}
+
+.noteHeaderInstanceIcon {
 	width: 32px;
 	height: 32px;
-	margin-left: 4px;
 }
 
 .noteHeaderUsername {
diff --git a/packages/frontend/src/pages/embed/user-timeline.vue b/packages/frontend/src/pages/embed/user-timeline.vue
index 616eef1176..6cb35e3e5f 100644
--- a/packages/frontend/src/pages/embed/user-timeline.vue
+++ b/packages/frontend/src/pages/embed/user-timeline.vue
@@ -8,7 +8,25 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkLoading v-if="loading"/>
 		<template v-else-if="user">
 			<div v-if="normalizedShowHeader" :class="$style.userHeader">
-				<MkAvatar :user="user"/>{{ user.name }} のノート
+				<a :href="`/@${user.username}`" target="_blank" rel="noopener noreferrer">
+					<MkAvatar :class="$style.avatar" :user="user"/>
+				</a>
+				<div :class="$style.headerTitle">
+					<I18n :src="i18n.ts.noteOf" tag="div">
+						<template #user>
+							<a :href="`/@${user.username}`" target="_blank" rel="noopener noreferrer">
+								<Mfm :text="user.name ?? `@${user.username}`" :plain="true"/>
+							</a>
+						</template>
+					</I18n>
+					<div :class="$style.sub"></div>
+				</div>
+				<a :href="url" :class="$style.instanceIconLink" target="_blank" rel="noopener noreferrer">
+					<img
+						:class="$style.instanceIcon"
+						:src="instance.iconUrl || '/favicon.ico'"
+					/>
+				</a>
 			</div>
 			<MkNotes
 				:class="$style.userTimelineNotes"
@@ -28,6 +46,9 @@ import MkNotes from '@/components/MkNotes.vue';
 import XNotFound from '@/pages/not-found.vue';
 import type { Paging } from '@/components/MkPagination.vue';
 import { misskeyApi } from '@/scripts/misskey-api.js';
+import { i18n } from '@/i18n.js';
+import { instance } from '@/instance.js';
+import { url } from '@/config.js';
 
 const props = defineProps<{
 	username: string;
@@ -65,6 +86,40 @@ misskeyApi('users/show', {
 	flex-direction: column;
 }
 
+.userHeader {
+	padding: 8px 16px;
+	display: flex;
+	align-items: center;
+	gap: var(--margin);
+	border-bottom: 1px solid var(--divider);
+
+	.avatar {
+		display: inline-block;
+		width: 32px;
+		height: 32px;
+	}
+
+	.headerTitle {
+		font-weight: 700;
+
+		.sub {
+			font-size: 0.8em;
+			font-weight: 400;
+			opacity: 0.7;
+		}
+	}
+
+	.instanceIconLink {
+		display: block;
+		margin-left: auto;
+	}
+
+	.instanceIcon {
+		height: 24px;
+		border-radius: 4px;
+	}
+}
+
 .userTimelineNotes {
 	flex: 1;
 	overflow-y: auto;