From 72a40b3139bea1eeb1ec39592a5ca32ceb932f23 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Wed, 17 May 2023 18:56:03 -0400
Subject: [PATCH 01/11] Display account info of post rather than 'Post' in
 header

---
 packages/client/src/pages/note.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/pages/note.vue b/packages/client/src/pages/note.vue
index dbc2f2aa92..cee0bf854b 100644
--- a/packages/client/src/pages/note.vue
+++ b/packages/client/src/pages/note.vue
@@ -26,6 +26,7 @@
 								v-if="!showNext && hasNext"
 								class="load next"
 								@click="showNext = true"
+								v-tooltip="i18n.ts.loadMore"
 								><i class="ph-caret-up ph-bold ph-lg"></i
 							></MkButton>
 							<div class="note _gap">
@@ -74,6 +75,7 @@
 								v-if="!showPrev && hasPrev"
 								class="load prev"
 								@click="showPrev = true"
+								v-tooltip="i18n.ts.loadMore"
 								><i class="ph-caret-down ph-bold ph-lg"></i
 							></MkButton>
 						</div>
@@ -193,8 +195,8 @@ definePageMetadata(
 	computed(() =>
 		note
 			? {
-					title: i18n.ts.note,
-					subtitle: new Date(note.createdAt).toLocaleString(),
+					title: note.user.name,
+					subtitle: `@${note.user.username}@${note.user.host}`,
 					avatar: note.user,
 					path: `/notes/${note.id}`,
 					share: {

From fb06aecb7b540bfbd48414e588a72f82e9bca362 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Wed, 17 May 2023 21:54:37 -0400
Subject: [PATCH 02/11] Jump to Reply + other note page improvmeents

---
 locales/en-US.yml                              |  3 +++
 .../client/src/components/MkNoteDetailed.vue   | 18 ++++++++++++++++--
 packages/client/src/components/MkNoteSub.vue   |  6 ++++++
 .../client/src/components/MkSubNoteContent.vue |  8 ++++++--
 packages/client/src/components/global/MkA.vue  | 11 +++--------
 .../src/components/global/MkPageHeader.vue     |  7 ++++++-
 packages/client/src/pages/note.vue             |  9 +++++++--
 7 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/locales/en-US.yml b/locales/en-US.yml
index 254ab13466..ec24104b0c 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -57,8 +57,11 @@ sendMessage: "Send a message"
 copyUsername: "Copy username"
 searchUser: "Search for a user"
 reply: "Reply"
+jumpToReply: "Jump to Reply"
 loadMore: "Load more"
 showMore: "Show more"
+newer: "newer"
+older: "older"
 showLess: "Close"
 youGotNewFollower: "followed you"
 receiveFollowRequest: "Follow request received"
diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index b1caca1609..00c5ba9d25 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -15,20 +15,22 @@
 			:key="note.id"
 			class="reply-to"
 			:note="note"
+			:detailedView="true"
 		/>
 		<MkLoading v-else-if="appearNote.reply" mini />
 		<MkNoteSub
 			v-if="appearNote.reply"
 			:note="appearNote.reply"
 			class="reply-to"
+			:detailedView="true"
 		/>
 
-		<div ref="noteEl" class="article" tabindex="-1">
+		<div ref="noteEl" class="article" tabindex="-1" :id="appearNote.id">
 			<MkNote
 				@contextmenu.stop="onContextmenu"
 				tabindex="-1"
 				:note="appearNote"
-				:detailedView="true"
+				detailedView
 			></MkNote>
 		</div>
 
@@ -39,6 +41,7 @@
 			:note="note"
 			class="reply"
 			:conversation="replies"
+			:detailedView="true"
 		/>
 		<MkLoading v-else-if="appearNote.repliesCount > 0" />
 	</div>
@@ -329,6 +332,9 @@ onMounted(() => {
 onUpdated(() => {
 	if (!isScrolling) {
 		noteEl?.scrollIntoView();
+		if (location.hash) {
+			location.replace(location.hash); // Jump to highlighted reply
+		}
 	}
 });
 
@@ -510,6 +516,14 @@ onUnmounted(() => {
 		// 	}
 		// }
 	}
+	:deep(.reply:target > .main),
+	:deep(.reply-to:target) {
+		z-index: 2;
+		&::before {
+			outline: auto;
+			opacity: 1;
+		}
+	}
 
 	&.max-width_500px {
 		font-size: 0.9em;
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index f27b3e27a6..c0d2405e40 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -4,6 +4,8 @@
 		ref="el"
 		v-size="{ max: [450, 500] }"
 		class="wrpstxzv"
+		:id="detailedView ? appearNote.id : null"
+		tabindex="-1"
 		:class="{
 			children: depth > 1,
 			singleStart: replies.length == 1,
@@ -138,6 +140,7 @@
 						:depth="depth"
 						:replyLevel="replyLevel + 1"
 						:parentId="appearNote.replyId"
+						:detailedView="detailedView"
 					/>
 				</template>
 				<template v-else>
@@ -150,6 +153,7 @@
 						:depth="depth + 1"
 						:replyLevel="replyLevel + 1"
 						:parentId="appearNote.replyId"
+						:detailedView="detailedView"
 					/>
 				</template>
 			</template>
@@ -212,6 +216,7 @@ const props = withDefaults(
 		note: misskey.entities.Note;
 		conversation?: misskey.entities.Note[];
 		parentId?;
+		detailedView?;
 
 		// how many notes are in between this one and the note being viewed in detail
 		depth?: number;
@@ -348,6 +353,7 @@ function noteClick(e) {
 <style lang="scss" scoped>
 .wrpstxzv {
 	padding: 16px 32px;
+	outline: none;
 	&.children {
 		padding: 10px 0 0 var(--indent);
 		padding-left: var(--indent) !important;
diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue
index 4742611acc..d683e9a828 100644
--- a/packages/client/src/components/MkSubNoteContent.vue
+++ b/packages/client/src/components/MkSubNoteContent.vue
@@ -2,7 +2,8 @@
 	<p v-if="note.cw != null" class="cw">
 		<MkA
 			v-if="!detailed && note.replyId"
-			:to="`/notes/${note.replyId}`"
+			:to="`#${note.replyId}`"
+			behavior="browser"
 			class="reply-icon"
 			@click.stop
 		>
@@ -16,6 +17,7 @@
 				!note.replyId
 			"
 			:to="`/notes/${note.renoteId}`"
+			v-tooltip="i18n.ts.jumpToReply"
 			class="reply-icon"
 			@click.stop
 		>
@@ -60,7 +62,9 @@
 				<template v-if="!note.cw">
 					<MkA
 						v-if="!detailed && note.replyId"
-						:to="`/notes/${note.replyId}`"
+						:to="`#${note.replyId}`"
+						behavior="browser"
+						v-tooltip="i18n.ts.jumpToReply"
 						class="reply-icon"
 						@click.stop
 					>
diff --git a/packages/client/src/components/global/MkA.vue b/packages/client/src/components/global/MkA.vue
index e1a50ad35e..bb1321d9f4 100644
--- a/packages/client/src/components/global/MkA.vue
+++ b/packages/client/src/components/global/MkA.vue
@@ -2,9 +2,8 @@
 	<a
 		:href="to"
 		:class="active ? activeClass : null"
-		@click="nav"
 		@contextmenu.prevent.stop="onContextmenu"
-		@click.stop
+		@click.stop="nav"
 	>
 		<slot></slot>
 	</a>
@@ -99,13 +98,9 @@ function popout() {
 }
 
 function nav(ev: MouseEvent) {
-	if (!ev.ctrlKey) {
-		ev.preventDefault();
+	if (!ev.ctrlKey && props.behavior !== "browser") {
 
-		if (props.behavior === "browser") {
-			location.href = props.to;
-			return;
-		}
+		ev.preventDefault();
 
 		if (props.behavior) {
 			if (props.behavior === "window") {
diff --git a/packages/client/src/components/global/MkPageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue
index b288fcaa0b..eb4abf3169 100644
--- a/packages/client/src/components/global/MkPageHeader.vue
+++ b/packages/client/src/components/global/MkPageHeader.vue
@@ -139,6 +139,7 @@ const props = defineProps<{
 	thin?: boolean;
 	displayMyAvatar?: boolean;
 	displayBackButton?: boolean;
+	to?: string;
 }>();
 
 const emit = defineEmits<{
@@ -193,7 +194,11 @@ const preventDrag = (ev: TouchEvent) => {
 };
 
 const onClick = () => {
-	scrollToTop(el, { behavior: "smooth" });
+	if (props.to) {
+		location.href = props.to;
+	} else {
+		scrollToTop(el, { behavior: "smooth" });
+	}
 };
 
 function onTabMousedown(tab: Tab, ev: MouseEvent): void {
diff --git a/packages/client/src/pages/note.vue b/packages/client/src/pages/note.vue
index cee0bf854b..d0f6ed6392 100644
--- a/packages/client/src/pages/note.vue
+++ b/packages/client/src/pages/note.vue
@@ -5,6 +5,7 @@
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
+				:to="`#${noteId}`"
 		/></template>
 		<MkSpacer :content-max="800" :marginMin="6">
 			<div class="fcuexfpr">
@@ -26,7 +27,7 @@
 								v-if="!showNext && hasNext"
 								class="load next"
 								@click="showNext = true"
-								v-tooltip="i18n.ts.loadMore"
+								v-tooltip="`${i18n.ts.loadMore} (${i18n.ts.newer})`"
 								><i class="ph-caret-up ph-bold ph-lg"></i
 							></MkButton>
 							<div class="note _gap">
@@ -75,7 +76,7 @@
 								v-if="!showPrev && hasPrev"
 								class="load prev"
 								@click="showPrev = true"
-								v-tooltip="i18n.ts.loadMore"
+								v-tooltip="`${i18n.ts.loadMore} (${i18n.ts.older})`"
 								><i class="ph-caret-down ph-bold ph-lg"></i
 							></MkButton>
 						</div>
@@ -219,6 +220,10 @@ definePageMetadata(
 	opacity: 0;
 }
 
+:global(html, body) {
+	scroll-behavior: smooth;
+}
+
 .fcuexfpr {
 	#calckey_app > :not(.wallpaper) & {
 		background: var(--bg);

From e921e2dce3b5f9b77c486d0c5cf255dc0cdbaa4a Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Thu, 18 May 2023 15:48:36 -0400
Subject: [PATCH 03/11] simplify conversation code

---
 packages/client/src/components/MkNoteSub.vue | 41 +++++++-------------
 1 file changed, 13 insertions(+), 28 deletions(-)

diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index c0d2405e40..9a3e577b6f 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -129,34 +129,19 @@
 			</div>
 		</div>
 		<template v-if="conversation">
-			<template v-if="replyLevel < 11 && depth < 5">
-				<template v-if="replies.length == 1">
-					<MkNoteSub
-						v-for="reply in replies"
-						:key="reply.id"
-						:note="reply"
-						class="reply single"
-						:conversation="conversation"
-						:depth="depth"
-						:replyLevel="replyLevel + 1"
-						:parentId="appearNote.replyId"
-						:detailedView="detailedView"
-					/>
-				</template>
-				<template v-else>
-					<MkNoteSub
-						v-for="reply in replies"
-						:key="reply.id"
-						:note="reply"
-						class="reply"
-						:conversation="conversation"
-						:depth="depth + 1"
-						:replyLevel="replyLevel + 1"
-						:parentId="appearNote.replyId"
-						:detailedView="detailedView"
-					/>
-				</template>
-			</template>
+			<MkNoteSub
+				v-if="replyLevel < 11 && depth < 5"
+				v-for="reply in replies"
+				:key="reply.id"
+				:note="reply"
+				class="reply"
+				:class="{single: replies.length == 1}"
+				:conversation="conversation"
+				:depth="replies.lenght == 1 ? depth : depth + 1"
+				:replyLevel="replyLevel + 1"
+				:parentId="appearNote.replyId"
+				:detailedView="detailedView"
+			/>
 			<div v-else-if="replies.length > 0" class="more">
 				<div class="line"></div>
 				<MkA class="text _link" :to="notePage(note)"

From d013b351e26fcda933a41d5cd0397a45be9d52ed Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Fri, 19 May 2023 13:02:41 -0400
Subject: [PATCH 04/11] Tabbed content in detailed notes page

---
 packages/client/src/components/MkNote.vue     |  36 ++-
 .../client/src/components/MkNoteDetailed.vue  | 298 ++++++++++++------
 .../client/src/components/MkRenoteButton.vue  |   3 +-
 packages/client/src/components/MkTab.vue      |  30 +-
 .../client/src/components/MkUserCardMini.vue  |   1 +
 packages/client/src/pages/note.vue            |  70 +---
 6 files changed, 251 insertions(+), 187 deletions(-)

diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 5028d711e7..9045c890bd 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -5,7 +5,7 @@
 		ref="el"
 		v-hotkey="keymap"
 		v-size="{ max: [500, 450, 350, 300] }"
-		class="tkcbzcuz"
+		class="tkcbzcuz note-container"
 		:tabindex="!isDeleted ? '-1' : null"
 		:class="{ renote: isRenote }"
 	>
@@ -104,6 +104,11 @@
 							/>
 						</div>
 					</div>
+				</div>
+				<div v-if="detailedView" class="info">
+					<MkA class="created-at" :to="notePage(appearNote)">
+						<MkTime :time="appearNote.createdAt" mode="absolute" />
+					</MkA>
 					<MkA
 						v-if="appearNote.channel && !inChannel"
 						class="channel"
@@ -113,11 +118,6 @@
 						{{ appearNote.channel.name }}</MkA
 					>
 				</div>
-				<div v-if="detailedView" class="info">
-					<MkA class="created-at" :to="notePage(appearNote)">
-						<MkTime :time="appearNote.createdAt" mode="absolute" />
-					</MkA>
-				</div>
 				<footer ref="footerEl" class="footer" @click.stop tabindex="-1">
 					<XReactionsViewer
 						v-if="enableEmojiReactions"
@@ -130,7 +130,7 @@
 						@click="reply()"
 					>
 						<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
-						<template v-if="appearNote.repliesCount > 0">
+						<template v-if="appearNote.repliesCount > 0 && !detailedView">
 							<p class="count">{{ appearNote.repliesCount }}</p>
 						</template>
 					</button>
@@ -139,6 +139,7 @@
 						class="button"
 						:note="appearNote"
 						:count="appearNote.renoteCount"
+						:detailedView="detailedView"
 					/>
 					<XStarButtonNoEmoji
 						v-if="!enableEmojiReactions"
@@ -450,6 +451,10 @@ function focusAfter() {
 	focusNext(el.value);
 }
 
+function scrollIntoView() {
+	el.value.scrollIntoView();
+}
+
 function noteClick(e) {
 	if (document.getSelection().type === "Range" || props.detailedView) {
 		e.stopPropagation();
@@ -464,6 +469,12 @@ function readPromo() {
 	});
 	isDeleted.value = true;
 }
+
+defineExpose({
+	focus,
+	blur,
+	scrollIntoView,
+});
 </script>
 
 <style lang="scss" scoped>
@@ -656,14 +667,13 @@ function readPromo() {
 						}
 					}
 				}
-
-				> .channel {
-					opacity: 0.7;
-					font-size: 80%;
-				}
 			}
 			> .info {
-				margin-block: 16px;
+				display: flex;
+				justify-content: space-between;
+				flex-wrap: wrap;
+				gap: .7em;
+				margin-top: 16px;
 				opacity: 0.7;
 				font-size: 0.9em;
 			}
diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index 00c5ba9d25..1cffb267ec 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -25,17 +25,51 @@
 			:detailedView="true"
 		/>
 
-		<div ref="noteEl" class="article" tabindex="-1" :id="appearNote.id">
-			<MkNote
-				@contextmenu.stop="onContextmenu"
-				tabindex="-1"
-				:note="appearNote"
-				detailedView
-			></MkNote>
-		</div>
+		<MkNote
+			ref="noteEl"
+			@contextmenu.stop="onContextmenu"
+			tabindex="-1"
+			:note="appearNote"
+			detailedView
+		></MkNote>
+
+		<MkTab 
+			v-model="tab"
+			:style="'chips'"
+			@update:modelValue="loadTab"
+		>
+			<option value="replies">
+				<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
+				<template v-if="appearNote.repliesCount > 0">
+					<span class="count">{{ appearNote.repliesCount }}</span>
+				</template>
+				{{ i18n.ts._notification._types.reply }}
+			</option>
+			<option value="renotes">
+				<i class="ph-repeat ph-bold ph-lg"></i>
+				<template v-if="appearNote.renoteCount > 0">
+					<span class="count">{{ appearNote.renoteCount }}</span>
+				</template>
+				{{ i18n.ts._notification._types.renote }}
+			</option>
+			<option value="quotes">
+				<i class="ph-quotes ph-bold ph-lg"></i>
+				<template v-if="directQuotes?.length > 0">
+					<span class="count">{{ directQuotes.length }}</span>
+				</template>
+				{{ i18n.ts._notification._types.quote }}
+			</option>
+			<option value="clips">
+				<i class="ph-paperclip ph-bold ph-lg"></i>
+				<template v-if="clips.length > 0">
+					<span class="count">{{ clips.length }}</span>
+				</template>
+				{{ i18n.ts.clips }}
+			</option>
+		</MkTab>
 
 		<MkNoteSub
-			v-if="directReplies"
+			v-if="directReplies && tab === 'replies'"
 			v-for="note in directReplies"
 			:key="note.id"
 			:note="note"
@@ -43,7 +77,66 @@
 			:conversation="replies"
 			:detailedView="true"
 		/>
-		<MkLoading v-else-if="appearNote.repliesCount > 0" />
+		<MkLoading v-else-if="tab === 'replies' && appearNote.repliesCount > 0" />
+		
+		<MkNoteSub
+			v-if="directQuotes && tab === 'quotes'"
+			v-for="note in directQuotes"
+			:key="note.id"
+			:note="note"
+			class="reply"
+			:conversation="directQuotes"
+			:detailedView="true"
+		/>
+		<MkLoading v-else-if="tab === 'quotes' && directQuotes.length > 0" />
+		
+		<!-- <MkPagination
+			v-if="tab === 'renotes'"
+			v-slot="{ items }"
+			ref="pagingComponent"
+			:pagination="pagination"
+		> -->
+			<MkUserCardMini
+				v-if="tab === 'renotes' && appearNote.renoteCount > 0"
+				v-for="item in renotes"
+				:key="item.user.id"
+				:user="item.user"
+				:with-chart="false"
+			/>
+		<!-- </MkPagination> -->
+		<MkLoading v-else-if="tab === 'renotes' && appearNote.renoteCount > 0" />
+
+		<div
+			v-if="tab === 'clips' && clips.length > 0"
+			class="_content clips"
+		>
+			<MkA
+				v-for="item in clips"
+				:key="item.id"
+				:to="`/clips/${item.id}`"
+				class="item _panel"
+			>
+				<b>{{ item.name }}</b>
+				<div
+					v-if="item.description"
+					class="description"
+				>
+					{{ item.description }}
+				</div>
+				<div class="user">
+					<MkAvatar
+						:user="item.user"
+						class="avatar"
+						:show-indicator="true"
+					/>
+					<MkUserName
+						:user="item.user"
+						:nowrap="false"
+					/>
+				</div>
+			</MkA>
+		</div>
+		<MkLoading v-else-if="tab === 'clips' && clips.length > 0" />
 	</div>
 	<div v-else class="_panel muted" @click="muted.muted = false">
 		<I18n :src="softMuteReasonI18nSrc(muted.what)" tag="small">
@@ -73,15 +166,17 @@ import {
 	reactive,
 	ref,
 } from "vue";
-import type * as misskey from "calckey-js";
+import * as misskey from "calckey-js";
+import MkTab from "@/components/MkTab.vue";
 import MkNote from "@/components/MkNote.vue";
 import MkNoteSub from "@/components/MkNoteSub.vue";
 import XStarButton from "@/components/MkStarButton.vue";
 import XRenoteButton from "@/components/MkRenoteButton.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkUserCardMini from "@/components/MkUserCardMini.vue";
 import { pleaseLogin } from "@/scripts/please-login";
 import { getWordSoftMute } from "@/scripts/check-word-mute";
 import { userPage } from "@/filters/user";
-import { useRouter } from "@/router";
 import * as os from "@/os";
 import { defaultStore, noteViewInterruptors } from "@/store";
 import { reactionPicker } from "@/scripts/reaction-picker";
@@ -92,12 +187,15 @@ import { useNoteCapture } from "@/scripts/use-note-capture";
 import { deepClone } from "@/scripts/clone";
 import { stream } from "@/stream";
 import { NoteUpdatedEvent } from "calckey-js/built/streaming.types";
+import appear from "@/directives/appear";
 
 const props = defineProps<{
 	note: misskey.entities.Note;
 	pinned?: boolean;
 }>();
 
+let tab = $ref("replies");
+
 let note = $ref(deepClone(props.note));
 
 const softMuteReasonI18nSrc = (what?: string) => {
@@ -146,6 +244,9 @@ const translating = ref(false);
 let conversation = $ref<null | misskey.entities.Note[]>([]);
 const replies = ref<misskey.entities.Note[]>([]);
 let directReplies = $ref<null | misskey.entities.Note[]>([]);
+let directQuotes = $ref<null | misskey.entities.Note[]>([]);
+let clips = $ref();
+let renotes = $ref();
 let isScrolling;
 
 const keymap = {
@@ -259,10 +360,14 @@ os.api("notes/children", {
 	directReplies = res
 		.filter(
 			(note) =>
-				note.replyId === appearNote.id ||
-				note.renoteId === appearNote.id
+				note.replyId === appearNote.id
 		)
 		.reverse();
+	directQuotes = res
+		.filter(
+			(note) =>
+				note.renoteId === appearNote.id
+		);
 });
 
 conversation = null;
@@ -276,6 +381,33 @@ if (appearNote.replyId) {
 	});
 }
 
+clips = null;
+os.api("notes/clips", {
+	noteId: appearNote.id,
+}).then((res) => {
+	clips = res;
+});
+
+// const pagination = {
+// 	endpoint: "notes/renotes",
+// 	noteId: appearNote.id,
+// 	limit: 10,
+// };
+
+// const pagingComponent = $ref<InstanceType<typeof MkPagination>>();
+
+renotes = null;
+function loadTab() {
+	if (tab === "renotes" && !renotes) {
+		os.api("notes/renotes", {
+			noteId: appearNote.id,
+			limit: 100,
+		}).then((res) => {
+			renotes = res;
+		})
+	}
+}
+
 async function onNoteUpdated(noteData: NoteUpdatedEvent): Promise<void> {
 	const { type, id, body } = noteData;
 
@@ -326,12 +458,12 @@ document.addEventListener("wheel", () => {
 onMounted(() => {
 	stream.on("noteUpdated", onNoteUpdated);
 	isScrolling = false;
-	noteEl?.scrollIntoView();
+	noteEl.scrollIntoView();
 });
 
 onUpdated(() => {
 	if (!isScrolling) {
-		noteEl?.scrollIntoView();
+		noteEl.scrollIntoView();
 		if (location.hash) {
 			location.replace(location.hash); // Jump to highlighted reply
 		}
@@ -372,80 +504,36 @@ onUnmounted(() => {
 		}
 	}
 
-	&:hover > .article > .main > .footer > .button {
-		opacity: 1;
-	}
 	> .reply-to {
 		margin-bottom: -16px;
 		padding-bottom: 16px;
 	}
 
-	> .renote {
-		display: flex;
-		align-items: center;
-		padding: 16px 32px 8px 32px;
-		line-height: 28px;
-		white-space: pre;
-		color: var(--renote);
-
-		> .avatar {
-			flex-shrink: 0;
-			display: inline-block;
-			width: 28px;
-			height: 28px;
-			margin: 0 8px 0 0;
-			border-radius: 6px;
-		}
-
-		> i {
-			margin-right: 4px;
-		}
-
-		> span {
-			overflow: hidden;
-			flex-shrink: 1;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-
-			> .name {
-				font-weight: bold;
-			}
-		}
-
-		> .info {
-			margin-left: auto;
-			font-size: 0.9em;
-
-			> .time {
-				flex-shrink: 0;
-				color: inherit;
-
-				> .dropdownIcon {
-					margin-right: 4px;
-				}
-			}
-		}
-	}
-
-	> .renote + .article {
-		padding-top: 8px;
-	}
-
-	> .article {
-		padding-block: 28px 6px;
+	> :deep(.note-container) {
+		padding-block: 28px 0;
 		padding-top: 12px;
 		font-size: 1.1rem;
 		overflow: clip;
 		outline: none;
 		scroll-margin-top: calc(var(--stickyTop) + 20vh);
-		:deep(.article) {
+		.article {
 			cursor: unset;
+			padding-bottom: 0;
 		}
 		&:first-of-type {
 			padding-top: 28px;
 		}
 	}
 
+	> :deep(.chips) {
+		padding: 6px 32px 12px;
+	}
+	> :deep(.user-card-mini) {
+		padding-inline: 32px;
+		border-top: 1px solid var(--divider);
+		border-radius: 0;
+	}
+
 	> .reply {
 		border-top: solid 0.5px var(--divider);
 		cursor: pointer;
@@ -532,46 +620,20 @@ onUnmounted(() => {
 		> .reply-to:first-child {
 			padding-top: 14px;
 		}
-		> .renote {
-			padding: 8px 16px 0 16px;
-		}
 
-		> .article {
+		> :deep(.note-container) {
 			padding: 6px 0 0 0;
 			> .header > .body {
 				padding-left: 10px;
 			}
 		}
-	}
-
-	&.max-width_350px {
-		> .article {
-			> .main {
-				> .footer {
-					> .button {
-						&:not(:last-child) {
-							margin-right: 18px;
-						}
-					}
-				}
-			}
+		> .clips, > .chips, > :deep(.user-card-mini) {
+			padding-inline: 16px !important;
 		}
 	}
 
 	&.max-width_300px {
 		font-size: 0.825em;
-
-		> .article {
-			> .main {
-				> .footer {
-					> .button {
-						&:not(:last-child) {
-							margin-right: 12px;
-						}
-					}
-				}
-			}
-		}
 	}
 }
 
@@ -580,4 +642,36 @@ onUnmounted(() => {
 	text-align: center;
 	opacity: 0.7;
 }
+
+.clips { // want to redesign at some point
+	padding: 24px 32px;
+	padding-top: 0;
+	> .item {
+		display: block;
+		padding: 16px;
+		// background: var(--buttonBg);
+		border: 1px solid var(--divider);
+		margin-bottom: var(--margin);
+		transition: background .2s;
+		&:hover, &:focus-within {
+			background: var(--panelHighlight);
+		}
+
+		> .description {
+			padding: 8px 0;
+		}
+
+		> .user {
+			$height: 32px;
+			padding-top: 16px;
+			border-top: solid 0.5px var(--divider);
+			line-height: $height;
+
+			> .avatar {
+				width: $height;
+				height: $height;
+			}
+		}
+	}
+}
 </style>
diff --git a/packages/client/src/components/MkRenoteButton.vue b/packages/client/src/components/MkRenoteButton.vue
index 631c7415aa..8815666936 100644
--- a/packages/client/src/components/MkRenoteButton.vue
+++ b/packages/client/src/components/MkRenoteButton.vue
@@ -7,7 +7,7 @@
 		@click="renote(false, $event)"
 	>
 		<i class="ph-repeat ph-bold ph-lg"></i>
-		<p v-if="count > 0" class="count">{{ count }}</p>
+		<p v-if="count > 0 && !detailedView" class="count">{{ count }}</p>
 	</button>
 	<button v-else class="eddddedb _button">
 		<i class="ph-prohibit ph-bold ph-lg"></i>
@@ -30,6 +30,7 @@ import { MenuItem } from "@/types/menu";
 const props = defineProps<{
 	note: misskey.entities.Note;
 	count: number;
+	detailedView?;
 }>();
 
 const buttonRef = ref<HTMLElement>();
diff --git a/packages/client/src/components/MkTab.vue b/packages/client/src/components/MkTab.vue
index de3ef290b7..f28b37213c 100644
--- a/packages/client/src/components/MkTab.vue
+++ b/packages/client/src/components/MkTab.vue
@@ -6,6 +6,9 @@ export default defineComponent({
 		modelValue: {
 			required: true,
 		},
+		style: {
+			required: false,
+		},
 	},
 	render() {
 		const options = this.$slots.default();
@@ -13,7 +16,10 @@ export default defineComponent({
 		return h(
 			"div",
 			{
-				class: "pxhvhrfw",
+				class: [
+					"pxhvhrfw",
+					{ chips: this.style === "chips" },
+				],
 			},
 			options.map((option) =>
 				withDirectives(
@@ -66,7 +72,7 @@ export default defineComponent({
 
 		&.active {
 			color: var(--accent);
-			background: var(--accentedBg);
+			background: var(--accentedBg) !important;
 		}
 
 		&:not(.active):hover {
@@ -83,6 +89,26 @@ export default defineComponent({
 		}
 	}
 
+	&.chips {
+		padding: 12px 32px;
+		font-size: .85em;
+		overflow-x: auto;
+		> button {
+			display: flex;
+			gap: 6px;
+			align-items: center;
+			flex: unset;
+			margin: 0;
+			margin-right: 8px;
+			padding: .5em 1em;
+			border-radius: 100px;
+			background: var(--buttonBg);
+			> i {
+				margin-top: -.1em;
+			}
+		}
+	}
+
 	&.max-width_500px {
 		font-size: 80%;
 
diff --git a/packages/client/src/components/MkUserCardMini.vue b/packages/client/src/components/MkUserCardMini.vue
index 9d97e24841..02c22b5238 100644
--- a/packages/client/src/components/MkUserCardMini.vue
+++ b/packages/client/src/components/MkUserCardMini.vue
@@ -1,5 +1,6 @@
 <template>
 	<div
+		class="user-card-mini"
 		:class="[
 			$style.root,
 			{ yellow: user.isSilenced, red: user.isSuspended, gray: false },
diff --git a/packages/client/src/pages/note.vue b/packages/client/src/pages/note.vue
index d0f6ed6392..65f7abd48f 100644
--- a/packages/client/src/pages/note.vue
+++ b/packages/client/src/pages/note.vue
@@ -41,37 +41,6 @@
 									class="note"
 								/>
 							</div>
-							<div
-								v-if="clips && clips.length > 0"
-								class="_content clips _gap"
-							>
-								<div class="title">{{ i18n.ts.clip }}</div>
-								<MkA
-									v-for="item in clips"
-									:key="item.id"
-									:to="`/clips/${item.id}`"
-									class="item _panel _gap"
-								>
-									<b>{{ item.name }}</b>
-									<div
-										v-if="item.description"
-										class="description"
-									>
-										{{ item.description }}
-									</div>
-									<div class="user">
-										<MkAvatar
-											:user="item.user"
-											class="avatar"
-											:show-indicator="true"
-										/>
-										<MkUserName
-											:user="item.user"
-											:nowrap="false"
-										/>
-									</div>
-								</MkA>
-							</div>
 							<MkButton
 								v-if="!showPrev && hasPrev"
 								class="load prev"
@@ -114,7 +83,6 @@ const props = defineProps<{
 }>();
 
 let note = $ref<null | misskey.entities.Note>();
-let clips = $ref();
 let hasPrev = $ref(false);
 let hasNext = $ref(false);
 let showPrev = $ref(false);
@@ -160,9 +128,6 @@ function fetchNote() {
 		.then((res) => {
 			note = res;
 			Promise.all([
-				os.api("notes/clips", {
-					noteId: note.id,
-				}),
 				os.api("users/notes", {
 					userId: note.userId,
 					untilId: note.id,
@@ -173,8 +138,7 @@ function fetchNote() {
 					sinceId: note.id,
 					limit: 1,
 				}),
-			]).then(([_clips, prev, next]) => {
-				clips = _clips;
+			]).then(([prev, next]) => {
 				hasPrev = prev.length !== 0;
 				hasNext = next.length !== 0;
 			});
@@ -220,10 +184,6 @@ definePageMetadata(
 	opacity: 0;
 }
 
-:global(html, body) {
-	scroll-behavior: smooth;
-}
-
 .fcuexfpr {
 	#calckey_app > :not(.wallpaper) & {
 		background: var(--bg);
@@ -251,34 +211,6 @@ definePageMetadata(
 					background: var(--panel);
 				}
 			}
-
-			> .clips {
-				> .title {
-					font-weight: bold;
-					padding: 12px;
-				}
-
-				> .item {
-					display: block;
-					padding: 16px;
-
-					> .description {
-						padding: 8px 0;
-					}
-
-					> .user {
-						$height: 32px;
-						padding-top: 16px;
-						border-top: solid 0.5px var(--divider);
-						line-height: $height;
-
-						> .avatar {
-							width: $height;
-							height: $height;
-						}
-					}
-				}
-			}
 		}
 	}
 }

From 98a831961eb83b44c4c96a1ea374b10538af86ec Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Fri, 19 May 2023 13:20:48 -0400
Subject: [PATCH 05/11] little bit more accessible tabs

---
 packages/client/src/components/MkTab.vue | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/packages/client/src/components/MkTab.vue b/packages/client/src/components/MkTab.vue
index f28b37213c..1f89c8ad07 100644
--- a/packages/client/src/components/MkTab.vue
+++ b/packages/client/src/components/MkTab.vue
@@ -20,21 +20,17 @@ export default defineComponent({
 					"pxhvhrfw",
 					{ chips: this.style === "chips" },
 				],
+				role: "tablist",
 			},
 			options.map((option) =>
 				withDirectives(
 					h(
 						"button",
 						{
-							class: [
-								"_button",
-								{
-									active:
-										this.modelValue === option.props?.value,
-								},
-							],
+							class: "_button",
+							role: "tab",
 							key: option.key,
-							disabled: this.modelValue === option.props?.value,
+							'aria-selected': this.modelValue === option.props?.value ? "true" : "false",
 							onClick: () => {
 								this.$emit(
 									"update:modelValue",
@@ -70,12 +66,12 @@ export default defineComponent({
 			cursor: default;
 		}
 
-		&.active {
+		&[aria-selected="true"] {
 			color: var(--accent);
 			background: var(--accentedBg) !important;
 		}
 
-		&:not(.active):hover {
+		&:not([aria-selected="true"]):hover {
 			color: var(--fgHighlighted);
 			background: var(--panelHighlight);
 		}

From 79af6df55e97d78fb04ac8d189978843145f6aba Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Fri, 19 May 2023 14:28:36 -0400
Subject: [PATCH 06/11] add withChart prop to UserCardMini

---
 .../client/src/components/MkUserCardMini.vue  | 31 ++++++++++++-------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/packages/client/src/components/MkUserCardMini.vue b/packages/client/src/components/MkUserCardMini.vue
index 02c22b5238..27b3e939fd 100644
--- a/packages/client/src/components/MkUserCardMini.vue
+++ b/packages/client/src/components/MkUserCardMini.vue
@@ -28,21 +28,28 @@ import MkMiniChart from "@/components/MkMiniChart.vue";
 import * as os from "@/os";
 import { acct } from "@/filters/user";
 
-const props = defineProps<{
-	user: misskey.entities.User;
-}>();
+const props = withDefaults(defineProps<{
+		user: misskey.entities.User;
+		withChart?: boolean;
+	}>(),
+	{
+		withChart: true,
+	}
+);
 
 let chartValues = $ref<number[] | null>(null);
 
-os.apiGet("charts/user/notes", {
-	userId: props.user.id,
-	limit: 16 + 1,
-	span: "day",
-}).then((res) => {
-	// 今日のぶんの値はまだ途中の値であり、それも含めると大抵の場合前日よりも下降しているようなグラフになってしまうため今日は弾く
-	res.inc.splice(0, 1);
-	chartValues = res.inc;
-});
+if (props.withChart) {
+	os.apiGet("charts/user/notes", {
+		userId: props.user.id,
+		limit: 16 + 1,
+		span: "day",
+	}).then((res) => {
+		// 今日のぶんの値はまだ途中の値であり、それも含めると大抵の場合前日よりも下降しているようなグラフになってしまうため今日は弾く
+		res.inc.splice(0, 1);
+		chartValues = res.inc;
+	});
+}
 </script>
 
 <style lang="scss" module>

From d60002f4269209b4ed0a33a00d760186cabb3fe0 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Fri, 19 May 2023 14:34:16 -0400
Subject: [PATCH 07/11] mini mfm button

---
 packages/client/src/components/MkButton.vue         | 11 +++++++++--
 packages/client/src/components/MkSubNoteContent.vue |  1 +
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/MkButton.vue b/packages/client/src/components/MkButton.vue
index feac281d9e..2290daa6b0 100644
--- a/packages/client/src/components/MkButton.vue
+++ b/packages/client/src/components/MkButton.vue
@@ -2,7 +2,7 @@
 	<button
 		v-if="!link"
 		class="bghgjjyj _button"
-		:class="{ inline, primary, gradate, danger, rounded, full }"
+		:class="{ inline, primary, gradate, danger, rounded, full, mini }"
 		:type="type"
 		@click="emit('click', $event)"
 		@mousedown="onMousedown"
@@ -15,7 +15,7 @@
 	<MkA
 		v-else
 		class="bghgjjyj _button"
-		:class="{ inline, primary, gradate, danger, rounded, full }"
+		:class="{ inline, primary, gradate, danger, rounded, full, mini }"
 		:to="to"
 		@mousedown="onMousedown"
 	>
@@ -41,6 +41,7 @@ const props = defineProps<{
 	wait?: boolean;
 	danger?: boolean;
 	full?: boolean;
+	mini: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -190,6 +191,12 @@ function onMousedown(evt: MouseEvent): void {
 		}
 	}
 
+	&.mini {
+		padding: 4px 8px;
+		font-size: .9em;
+		border-radius: 100px;
+	}
+
 	&:disabled {
 		opacity: 0.7;
 	}
diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue
index d683e9a828..c1d2e10ffd 100644
--- a/packages/client/src/components/MkSubNoteContent.vue
+++ b/packages/client/src/components/MkSubNoteContent.vue
@@ -133,6 +133,7 @@
 		<MkButton
 			v-if="hasMfm && defaultStore.state.animatedMfm"
 			@click.stop="toggleMfm"
+			:mini="true"
 		>
 			<template v-if="disableMfm">
 				<i class="ph-play ph-bold"></i> {{ i18n.ts._mfm.play }}

From 5db7460a82762e78db340b894a64d34e68af8ec5 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Fri, 19 May 2023 14:40:47 -0400
Subject: [PATCH 08/11] fix loading icon for boosts tab

---
 packages/client/src/components/MkNoteDetailed.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index 1cffb267ec..6dc6ddb624 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -97,7 +97,7 @@
 			:pagination="pagination"
 		> -->
 			<MkUserCardMini
-				v-if="tab === 'renotes' && appearNote.renoteCount > 0"
+				v-if="tab === 'renotes' && renotes"
 				v-for="item in renotes"
 				:key="item.user.id"
 				:user="item.user"

From f573f93d166dbbf2b056cd64d565c8d7571a6871 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Fri, 19 May 2023 14:45:29 -0400
Subject: [PATCH 09/11] Make UserCardMini clickable

---
 packages/client/src/components/MkUserCardMini.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/components/MkUserCardMini.vue b/packages/client/src/components/MkUserCardMini.vue
index 27b3e939fd..908882ec30 100644
--- a/packages/client/src/components/MkUserCardMini.vue
+++ b/packages/client/src/components/MkUserCardMini.vue
@@ -1,10 +1,11 @@
 <template>
-	<div
+	<MkA
 		class="user-card-mini"
 		:class="[
 			$style.root,
 			{ yellow: user.isSilenced, red: user.isSuspended, gray: false },
 		]"
+		:to="userPage(user)"
 	>
 		<MkAvatar
 			class="avatar"
@@ -19,14 +20,14 @@
 			>
 		</div>
 		<MkMiniChart v-if="chartValues" class="chart" :src="chartValues" />
-	</div>
+	</MkA>
 </template>
 
 <script lang="ts" setup>
 import * as misskey from "calckey-js";
 import MkMiniChart from "@/components/MkMiniChart.vue";
 import * as os from "@/os";
-import { acct } from "@/filters/user";
+import { acct, userPage } from "@/filters/user";
 
 const props = withDefaults(defineProps<{
 		user: misskey.entities.User;
@@ -62,6 +63,7 @@ if (props.withChart) {
 	padding: 16px;
 	background: var(--panel);
 	border-radius: 8px;
+	transition: background .2s;
 
 	> :global(.avatar) {
 		display: block;
@@ -102,6 +104,10 @@ if (props.withChart) {
 		height: 30px;
 	}
 
+	&:hover, &:focus {
+		background: var(--panelHighlight);
+	}
+
 	&:global(.yellow) {
 		--c: rgb(255 196 0 / 15%);
 		background-image: linear-gradient(

From f7856c6525ed68b66e992b1db97550a8d3e59473 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Fri, 19 May 2023 16:29:16 -0400
Subject: [PATCH 10/11] note metadata

---
 packages/client/src/pages/note.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/pages/note.vue b/packages/client/src/pages/note.vue
index 65f7abd48f..72b71996ed 100644
--- a/packages/client/src/pages/note.vue
+++ b/packages/client/src/pages/note.vue
@@ -160,8 +160,8 @@ definePageMetadata(
 	computed(() =>
 		note
 			? {
-					title: note.user.name,
-					subtitle: `@${note.user.username}@${note.user.host}`,
+					title: i18n.t("noteOf", { user: note.user.name }),
+					subtitle: new Date(note.createdAt).toLocaleString(),
 					avatar: note.user,
 					path: `/notes/${note.id}`,
 					share: {

From 2b6053d0b362ac8cd725f355d80bd329966911f6 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Fri, 19 May 2023 17:07:22 -0400
Subject: [PATCH 11/11] fix null error

---
 packages/client/src/components/MkNoteDetailed.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index 6dc6ddb624..a6b2bdf7d0 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -61,7 +61,7 @@
 			</option>
 			<option value="clips">
 				<i class="ph-paperclip ph-bold ph-lg"></i>
-				<template v-if="clips.length > 0">
+				<template v-if="clips?.length > 0">
 					<span class="count">{{ clips.length }}</span>
 				</template>
 				{{ i18n.ts.clips }}