From 0cb8918778d86217c86922c75a37d1be3e82b3aa Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Thu, 16 Feb 2023 17:06:36 -0500
Subject: [PATCH 01/61] Add URL previews to subnote

---
 packages/client/src/components/MkSubNoteContent.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue
index b575fcc0ae..2139cffb24 100644
--- a/packages/client/src/components/MkSubNoteContent.vue
+++ b/packages/client/src/components/MkSubNoteContent.vue
@@ -5,9 +5,9 @@
 		<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="ph-arrow-bend-up-left-bold ph-lg"></i></MkA>
 		<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
 		<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">{{ i18n.ts.quoteAttached }}: ...</MkA>
+		<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" class="url-preview"/>
 	</div>
 	<div v-if="note.files.length > 0">
-		<summary>({{ i18n.t('withNFiles', { n: note.files.length }) }})</summary>
 		<XMediaList :media-list="note.files"/>
 	</div>
 	<div v-if="note.poll">
@@ -26,8 +26,11 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import * as misskey from 'calckey-js';
+import * as mfm from 'mfm-js';
 import XMediaList from '@/components/MkMediaList.vue';
 import XPoll from '@/components/MkPoll.vue';
+import MkUrlPreview from '@/components/MkUrlPreview.vue';
+import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
 import { i18n } from '@/i18n';
 
 const props = defineProps<{
@@ -42,6 +45,9 @@ const isLong = (
 	)
 );
 const collapsed = $ref(props.note.cw == null && isLong);
+const urls = props.note.text ? extractUrlFromMfm(mfm.parse(props.note.text)) : null;
+console.log(props.note.text);
+
 </script>
 
 <style lang="scss" scoped>

From da648e151702628c28f4ffe3d84085daf18ced11 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Fri, 17 Feb 2023 00:06:49 -0500
Subject: [PATCH 02/61] Add buttons & link previews to subnotes, start of new
 thread design

Should've made them separate commits but eeek I started working on them at the same time D:
---
 packages/client/src/components/MkNote.vue     |  66 +-------
 .../client/src/components/MkNoteDetailed.vue  |   2 +-
 .../client/src/components/MkNoteFooter.vue    | 159 ++++++++++++++++++
 packages/client/src/components/MkNoteSub.vue  |  12 +-
 .../components/MkReactionsViewer.reaction.vue |   1 +
 .../src/components/MkReactionsViewer.vue      |   6 +-
 6 files changed, 177 insertions(+), 69 deletions(-)
 create mode 100644 packages/client/src/components/MkNoteFooter.vue

diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index ee6c5770f6..20225843a3 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -71,26 +71,7 @@
 				</div>
 				<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><i class="ph-television-bold ph-lg"></i> {{ appearNote.channel.name }}</MkA>
 			</div>
-			<footer class="footer">
-				<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
-				<button v-tooltip.noDelay.bottom="i18n.ts.reply" class="button _button" @click="reply()">
-					<template v-if="appearNote.reply"><i class="ph-arrow-u-up-left-bold ph-lg"></i></template>
-					<template v-else><i class="ph-arrow-bend-up-left-bold ph-lg"></i></template>
-					<p v-if="appearNote.repliesCount > 0" class="count">{{ appearNote.repliesCount }}</p>
-				</button>
-				<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
-				<XStarButton v-if="appearNote.myReaction == null" ref="starButton" class="button" :note="appearNote"/>
-				<button v-if="appearNote.myReaction == null" ref="reactButton" v-tooltip.noDelay.bottom="i18n.ts.reaction" class="button _button" @click="react()">
-					<i class="ph-smiley-bold ph-lg"></i>
-				</button>
-				<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
-					<i class="ph-minus-bold ph-lg"></i>
-				</button>
-				<XQuoteButton class="button" :note="appearNote"/>
-				<button ref="menuButton" v-tooltip.noDelay.bottom="i18n.ts.more" class="button _button" @click="menu()">
-					<i class="ph-dots-three-outline-bold ph-lg"></i>
-				</button>
-			</footer>
+			<MkNoteFooter :note="appearNote"></MkNoteFooter>
 		</div>
 	</article>
 </div>
@@ -113,15 +94,12 @@ import type * as misskey from 'calckey-js';
 import MkNoteSub from '@/components/MkNoteSub.vue';
 import XNoteHeader from '@/components/MkNoteHeader.vue';
 import XNoteSimple from '@/components/MkNoteSimple.vue';
-import XReactionsViewer from '@/components/MkReactionsViewer.vue';
 import XMediaList from '@/components/MkMediaList.vue';
 import XCwButton from '@/components/MkCwButton.vue';
+import MkNoteFooter from '@/components/MkNoteFooter.vue';
 import XPoll from '@/components/MkPoll.vue';
-import XStarButton from '@/components/MkStarButton.vue';
 import XRenoteButton from '@/components/MkRenoteButton.vue';
-import XQuoteButton from '@/components/MkQuoteButton.vue';
 import MkUrlPreview from '@/components/MkUrlPreview.vue';
-import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
 import MkVisibility from '@/components/MkVisibility.vue';
 import { pleaseLogin } from '@/scripts/please-login';
 import { focusPrev, focusNext } from '@/scripts/focus';
@@ -170,7 +148,6 @@ const isRenote = (
 
 const el = ref<HTMLElement>();
 const menuButton = ref<HTMLElement>();
-const starButton = ref<InstanceType<typeof XStarButton>>();
 const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
 const renoteTime = ref<HTMLElement>();
 const reactButton = ref<HTMLElement>();
@@ -187,7 +164,6 @@ const muted = ref(checkWordMute(appearNote, $i, defaultStore.state.mutedWords));
 const translation = ref(null);
 const translating = ref(false);
 const urls = appearNote.text ? extractUrlFromMfm(mfm.parse(appearNote.text)) : null;
-const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.user.instance);
 
 const keymap = {
 	'r': () => reply(true),
@@ -229,14 +205,6 @@ function react(viaKeyboard = false): void {
 	});
 }
 
-function undoReact(note): void {
-	const oldReaction = note.myReaction;
-	if (!oldReaction) return;
-	os.api('notes/reactions/delete', {
-		noteId: note.id,
-	});
-}
-
 const currentClipPage = inject<Ref<misskey.entities.Clip> | null>('currentClipPage', null);
 
 function onContextmenu(ev: MouseEvent): void {
@@ -594,36 +562,6 @@ function readPromo() {
 					font-size: 80%;
 				}
 			}
-
-			> .footer {
-				display: flex;
-				flex-wrap: wrap;
-				> .button {
-					margin: 0;
-					padding: 8px;
-					opacity: 0.7;
-					flex-grow: 1;
-					max-width: 3.5em;
-					width: max-content;
-					min-width: max-content;
-					&:first-of-type {
-						margin-left: -.5em;
-					}
-					&:hover {
-						color: var(--fgHighlighted);
-					}
-
-					> .count {
-						display: inline;
-						margin: 0 0 0 8px;
-						opacity: 0.7;
-					}
-
-					&.reacted {
-						color: var(--accent);
-					}
-				}
-			}
 		}
 	}
 
diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index fab06f1ab6..fa6b0bd890 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -53,7 +53,7 @@
 					<XCwButton v-model="showContent" :note="appearNote"/>
 				</p>
 				<div v-show="appearNote.cw == null || showContent" class="content">
-					<div class="text" @click.self="router.push(notePage(appearNote))">
+					<div class="text">
 						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
 						<div v-if="translating || translation" class="translation">
 							<MkLoading v-if="translating" mini/>
diff --git a/packages/client/src/components/MkNoteFooter.vue b/packages/client/src/components/MkNoteFooter.vue
new file mode 100644
index 0000000000..ff5eb7702c
--- /dev/null
+++ b/packages/client/src/components/MkNoteFooter.vue
@@ -0,0 +1,159 @@
+<template>
+	<footer ref="el" class="footer" @click.stop.prevent>
+		<XReactionsViewer v-if="!conversation" ref="reactionsViewer" :note="appearNote"/>
+		<button v-tooltip.noDelay.bottom="i18n.ts.reply" class="button _button" @click="reply()">
+			<template v-if="appearNote.reply"><i class="ph-arrow-u-up-left-bold ph-lg"></i></template>
+			<template v-else><i class="ph-arrow-bend-up-left-bold ph-lg"></i></template>
+			<p v-if="appearNote.repliesCount > 0" class="count">{{ appearNote.repliesCount }}</p>
+		</button>
+		<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
+		<XStarButton v-if="appearNote.myReaction == null" ref="starButton" class="button" :note="appearNote"/>
+		<button v-if="appearNote.myReaction == null" ref="reactButton" v-tooltip.noDelay.bottom="i18n.ts.reaction" class="button _button" @click="react()">
+			<i class="ph-smiley-bold ph-lg"></i>
+		</button>
+		<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
+			<i class="ph-minus-bold ph-lg"></i>
+		</button>
+		<XQuoteButton class="button" :note="appearNote"/>
+		<button ref="menuButton" v-tooltip.noDelay.bottom="i18n.ts.more" class="button _button" @click="menu()">
+			<i class="ph-dots-three-outline-bold ph-lg"></i>
+		</button>
+		<XReactionsViewer v-if="conversation" ref="reactionsViewer" :note="appearNote"/>
+	</footer>
+</template>
+
+<script lang="ts" setup>
+import { inject, ref } from 'vue';
+import type { Ref } from 'vue';
+import type * as misskey from 'calckey-js';
+import XReactionsViewer from '@/components/MkReactionsViewer.vue';
+import XStarButton from '@/components/MkStarButton.vue';
+import XRenoteButton from '@/components/MkRenoteButton.vue';
+import XQuoteButton from '@/components/MkQuoteButton.vue';
+import { pleaseLogin } from '@/scripts/please-login';
+import * as os from '@/os';
+import { reactionPicker } from '@/scripts/reaction-picker';
+import { i18n } from '@/i18n';
+import { getNoteMenu } from '@/scripts/get-note-menu';
+import { deepClone } from '@/scripts/clone';
+import { useNoteCapture } from '@/scripts/use-note-capture';
+
+
+const props = defineProps<{
+	note: misskey.entities.Note;
+	conversation?: misskey.entities.Note[];
+}>();
+
+let note = $ref(deepClone(props.note));
+
+const isRenote = (
+	note.renote != null &&
+	note.text == null &&
+	note.fileIds.length === 0 &&
+	note.poll == null
+);
+
+const el = ref<HTMLElement>();
+const menuButton = ref<HTMLElement>();
+const starButton = ref<InstanceType<typeof XStarButton>>();
+const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
+const reactButton = ref<HTMLElement>();
+let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note);
+const isDeleted = ref(false);
+const translation = ref(null);
+const translating = ref(false);
+
+useNoteCapture({
+	rootEl: el,
+	note: $$(appearNote),
+	isDeletedRef: isDeleted,
+});
+
+
+function reply(viaKeyboard = false): void {
+	pleaseLogin();
+	os.post({
+		reply: appearNote,
+		animation: !viaKeyboard,
+	}, () => {
+		focus();
+	});
+}
+
+function react(viaKeyboard = false): void {
+	pleaseLogin();
+	blur();
+	reactionPicker.show(reactButton.value, reaction => {
+		os.api('notes/reactions/create', {
+			noteId: appearNote.id,
+			reaction: reaction,
+		});
+	}, () => {
+		focus();
+	});
+}
+
+function undoReact(note): void {
+	const oldReaction = note.myReaction;
+	if (!oldReaction) return;
+	os.api('notes/reactions/delete', {
+		noteId: note.id,
+	});
+}
+
+const currentClipPage = inject<Ref<misskey.entities.Clip> | null>('currentClipPage', null);
+
+
+function menu(viaKeyboard = false): void {
+	os.popupMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, currentClipPage }), menuButton.value, {
+		viaKeyboard,
+	}).then(focus);
+}
+
+function focus() {
+	el.value.focus();
+}
+
+function blur() {
+	el.value.blur();
+}
+
+
+</script>
+
+
+<style lang="scss" scoped>
+.footer {
+	display: flex;
+	flex-wrap: wrap;
+	margin-top: .4em;
+	pointer-events: none; // Allow clicking anything w/out pointer-events: all; to open post
+
+	> .button {
+		margin: 0;
+		padding: 8px;
+		opacity: 0.7;
+		flex-grow: 1;
+		max-width: 3.5em;
+		width: max-content;
+		min-width: max-content;
+		pointer-events: all;
+		&:first-of-type {
+			margin-left: -.5em;
+		}
+		&:hover {
+			color: var(--fgHighlighted);
+		}
+
+		> .count {
+			display: inline;
+			margin: 0 0 0 8px;
+			opacity: 0.7;
+		}
+
+		&.reacted {
+			color: var(--accent);
+		}
+	}
+}
+</style>
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index c0766ec5f5..a0277d86ec 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -16,10 +16,14 @@
 					<MkSubNoteContent class="text" :note="note"/>
 				</div>
 			</div>
+			<MkNoteFooter :note="note" :conversation="conversation"></MkNoteFooter>
 		</div>
 	</div>
 	<template v-if="conversation">
-		<template v-if="depth < 5">
+		<template v-if="depth < 5 && replies.length == 1">
+			<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply single" :conversation="conversation" :depth="depth"/>
+		</template>
+		<template v-else-if="depth < 5">
 			<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply" :conversation="conversation" :depth="depth + 1"/>
 		</template>
 		<div v-else-if="replies.length > 0" class="more">
@@ -35,6 +39,7 @@ import * as misskey from 'calckey-js';
 import XNoteHeader from '@/components/MkNoteHeader.vue';
 import MkSubNoteContent from '@/components/MkSubNoteContent.vue';
 import XCwButton from '@/components/MkCwButton.vue';
+import MkNoteFooter from '@/components/MkNoteFooter.vue';
 import { notePage } from '@/filters/note';
 import { useRouter } from '@/router';
 import * as os from '@/os';
@@ -122,8 +127,11 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 	}
 
 	> .reply, > .more {
-		border-left: solid 0.5px var(--divider);
+		// border-left: solid 0.5px var(--divider);
 		margin-top: 10px;
+		&.single {
+			padding: 0 !important;
+		}
 	}
 
 	> .more {
diff --git a/packages/client/src/components/MkReactionsViewer.reaction.vue b/packages/client/src/components/MkReactionsViewer.reaction.vue
index 83606ec669..63d92cabb5 100644
--- a/packages/client/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/client/src/components/MkReactionsViewer.reaction.vue
@@ -97,6 +97,7 @@ useTooltip(buttonRef, async (showing) => {
 	margin: 2px;
 	padding: 0 6px;
 	border-radius: 4px;
+	pointer-events: all;
 
 	&.canToggle {
 		background: rgba(0, 0, 0, 0.05);
diff --git a/packages/client/src/components/MkReactionsViewer.vue b/packages/client/src/components/MkReactionsViewer.vue
index 21dc80e213..a9cf9b00c3 100644
--- a/packages/client/src/components/MkReactionsViewer.vue
+++ b/packages/client/src/components/MkReactionsViewer.vue
@@ -21,9 +21,11 @@ const isMe = computed(() => $i && $i.id === props.note.userId);
 
 <style lang="scss" scoped>
 .tdflqwzn {
-	margin: 4px -2px 0 -2px;
+	margin: 0px -2px 0 -2px;
 	width: 100%;
-
+	.reply & {
+		width: auto;
+	}
 	&:empty {
 		display: none;
 	}

From cdf9a036046ba7651c8c82bbf8e35e5ae24f4500 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Fri, 17 Feb 2023 00:19:29 -0800
Subject: [PATCH 03/61] chore: formatting

---
 packages/backend/src/misc/reaction-lib.ts     | 33 +++++-----
 .../server/api/endpoints/channels/followed.ts | 16 +++--
 .../src/components/global/MkPageHeader.vue    | 63 ++++++++++---------
 3 files changed, 61 insertions(+), 51 deletions(-)

diff --git a/packages/backend/src/misc/reaction-lib.ts b/packages/backend/src/misc/reaction-lib.ts
index 7d78904bba..e25b2d6614 100644
--- a/packages/backend/src/misc/reaction-lib.ts
+++ b/packages/backend/src/misc/reaction-lib.ts
@@ -5,17 +5,17 @@ import { toPunyNullable } from "./convert-host.js";
 import { IsNull } from "typeorm";
 
 const legacies = new Map([
-	['like', '👍'],
-	['love', '❤️'],
-	['laugh', '😆'],
-	['hmm', '🤔'],
-	['surprise', '😮'],
-	['congrats', '🎉'],
-	['angry', '💢'],
-	['confused', '😥'],
-	['rip', '😇'],
-	['pudding', '🍮'],
-	['star', '⭐'],
+	["like", "👍"],
+	["love", "❤️"],
+	["laugh", "😆"],
+	["hmm", "🤔"],
+	["surprise", "😮"],
+	["congrats", "🎉"],
+	["angry", "💢"],
+	["confused", "😥"],
+	["rip", "😇"],
+	["pudding", "🍮"],
+	["star", "⭐"],
 ]);
 
 export async function getFallbackReaction() {
@@ -42,7 +42,10 @@ export function convertLegacyReactions(reactions: Record<string, number>) {
 		if (emoji) {
 			_reactions.set(emoji, (_reactions.get(emoji) || 0) + reactions[reaction]);
 		} else {
-			_reactions.set(reaction, (_reactions.get(reaction) || 0) + reactions[reaction]);
+			_reactions.set(
+				reaction,
+				(_reactions.get(reaction) || 0) + reactions[reaction],
+			);
 		}
 	}
 
@@ -127,7 +130,7 @@ export function decodeReaction(str: string): DecodedReaction {
 }
 
 export function convertLegacyReaction(reaction: string): string {
-  const decoded = decodeReaction(reaction).reaction;
-  if (legacies.has(decoded)) return legacies.get(decoded)!;
-  return decoded;
+	const decoded = decodeReaction(reaction).reaction;
+	if (legacies.has(decoded)) return legacies.get(decoded)!;
+	return decoded;
 }
diff --git a/packages/backend/src/server/api/endpoints/channels/followed.ts b/packages/backend/src/server/api/endpoints/channels/followed.ts
index f9e61222fc..993a211f7e 100644
--- a/packages/backend/src/server/api/endpoints/channels/followed.ts
+++ b/packages/backend/src/server/api/endpoints/channels/followed.ts
@@ -32,17 +32,23 @@ export const paramDef = {
 } as const;
 
 export default define(meta, paramDef, async (ps, me) => {
-	const query = ChannelFollowings.createQueryBuilder('following').andWhere({ followerId: me.id });
+	const query = ChannelFollowings.createQueryBuilder("following").andWhere({
+		followerId: me.id,
+	});
 	if (ps.sinceId) {
-		query.andWhere('following."followeeId" > :sinceId', { sinceId: ps.sinceId });
+		query.andWhere('following."followeeId" > :sinceId', {
+			sinceId: ps.sinceId,
+		});
 	}
 	if (ps.untilId) {
-		query.andWhere('following."followeeId" < :untilId', { untilId: ps.untilId });
+		query.andWhere('following."followeeId" < :untilId', {
+			untilId: ps.untilId,
+		});
 	}
 	if (ps.sinceId && !ps.untilId) {
-		query.orderBy('following."followeeId"', 'ASC');
+		query.orderBy('following."followeeId"', "ASC");
 	} else {
-		query.orderBy('following."followeeId"', 'DESC');
+		query.orderBy('following."followeeId"', "DESC");
 	}
 
 	const followings = await query.take(ps.limit).getMany();
diff --git a/packages/client/src/components/global/MkPageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue
index 8fa3edfe1e..3b844bd82d 100644
--- a/packages/client/src/components/global/MkPageHeader.vue
+++ b/packages/client/src/components/global/MkPageHeader.vue
@@ -1,35 +1,36 @@
 <template>
-	<div v-if="show" ref="el" class="fdidabkb" :class="{ slim: narrow, thin: thin_ }" :style="{ background: bg }" @click="onClick">
-		<div v-if="narrow" class="buttons left" @click="openAccountMenu">
-		<MkAvatar v-if="props.displayMyAvatar && $i" class="avatar" :user="$i" :disable-preview="true"/>
-	</div>
-	<template v-if="metadata">
-		<div v-if="!hideTitle" class="titleContainer" @click="showTabsPopup">
-			<MkAvatar v-if="metadata.avatar" class="avatar" :user="metadata.avatar" :disable-preview="true" :show-indicator="true"/>
-				<i v-else-if="metadata.icon && !narrow" class="icon" :class="metadata.icon"></i>
-
-				<div class="title">
-					<MkUserName v-if="metadata.userName" :user="metadata.userName" :nowrap="true" class="title"/>
-					<div v-else-if="metadata.title && !(tabs != null && tabs.length > 0 && narrow)" class="title">{{ metadata.title }}</div>
-					<div v-if="!narrow && metadata.subtitle" class="subtitle">
-						{{ metadata.subtitle }}
-					</div>
-				</div>
-			</div>
-			<div ref="tabsEl" v-if="hasTabs" class="tabs">
-				<button v-for="tab in tabs" :ref="(el) => tabRefs[tab.key] = el" v-tooltip.noDelay="tab.title" class="tab _button" :class="{ active: tab.key != null && tab.key === props.tab }" @mousedown="(ev) => onTabMousedown(tab, ev)" @click="(ev) => onTabClick(tab, ev)">
-					<i v-if="tab.icon" class="icon" :class="tab.icon"></i>
-					<span class="title">{{ tab.title }}</span>
-				</button>
-				<div ref="tabHighlightEl" class="highlight"></div>
-			</div>
-		</template>
-		<div class="buttons right">
-			<template v-for="action in actions">
-				<button v-tooltip.noDelay="action.text" class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag"><i :class="action.icon"></i></button>
-			</template>
-		</div>
-	</div>
+  <div ref="el" class="fdidabkb" :class="classes" :style="{ background: bg }" @click="onClick">
+    <div v-show="narrow" class="buttons left" @click="openAccountMenu">
+      <MkAvatar v-if="displayMyAvatar && user" class="avatar" :user="user" :disable-preview="true"/>
+    </div>
+    <template v-if="hasTabs">
+      <div v-show="!hideTitle" class="titleContainer" @click="showTabsPopup">
+        <MkAvatar v-if="metadata.avatar" class="avatar" :user="metadata.avatar" :disable-preview="true" :show-indicator="true"/>
+        <i v-else-if="metadata.icon && !narrow" class="icon" :class="metadata.icon"></i>
+        <div class="title">
+          <MkUserName v-if="metadata.userName" :user="metadata.userName" :nowrap="true" class="title"/>
+          <div v-else-if="metadata.title && !hasTabs && !narrow" class="title">{{ metadata.title }}</div>
+          <div v-show="!narrow && metadata.subtitle" class="subtitle">{{ metadata.subtitle }}</div>
+        </div>
+      </div>
+      <div ref="tabsEl" class="tabs" v-show="hasTabs">
+        <button v-for="tab in tabs" :key="tab.key" ref="tabRefs[tab.key]" v-tooltip.noDelay="tab.title"
+          class="tab _button" :class="{ active: isActiveTab(tab) }" @mousedown="onTabMousedown(tab)"
+          @click="onTabClick(tab)">
+          <i v-if="tab.icon && !tab.iconOnly" class="icon" :class="tab.icon"></i>
+          <span class="title">{{ tab.title }}</span>
+        </button>
+        <div ref="tabHighlightEl" class="highlight"></div>
+      </div>
+    </template>
+    <div v-show="hasActions" class="buttons right">
+      <button v-for="(action, index) in actions" :key="index" v-tooltip.noDelay="action.text"
+        class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler"
+        @touchstart="preventDrag">
+        <i :class="action.icon"></i>
+      </button>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>

From 650a62953d4016df27e70e3a8d219f71e5f8ce94 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Fri, 17 Feb 2023 11:31:48 -0500
Subject: [PATCH 04/61] Add more to subnotecontent if detailed

---
 packages/client/src/components/MkNoteSub.vue        |  2 +-
 packages/client/src/components/MkSubNoteContent.vue | 11 ++++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index a0277d86ec..bd965f4a3b 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -13,7 +13,7 @@
 					<XCwButton v-model="showContent" :note="note"/>
 				</p>
 				<div v-show="note.cw == null || showContent" class="content" @click="router.push(notePage(note))">
-					<MkSubNoteContent class="text" :note="note"/>
+					<MkSubNoteContent class="text" :note="note" :detailed="true"/>
 				</div>
 			</div>
 			<MkNoteFooter :note="note" :conversation="conversation"></MkNoteFooter>
diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue
index 2139cffb24..daded56d22 100644
--- a/packages/client/src/components/MkSubNoteContent.vue
+++ b/packages/client/src/components/MkSubNoteContent.vue
@@ -5,7 +5,12 @@
 		<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="ph-arrow-bend-up-left-bold ph-lg"></i></MkA>
 		<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
 		<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">{{ i18n.ts.quoteAttached }}: ...</MkA>
-		<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" class="url-preview"/>
+		<template v-if="detailed">
+			<!-- <div v-if="note.renoteId" class="renote">
+				<XNoteSimple :note="note.renote"/>
+			</div> -->
+			<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" class="url-preview"/>
+		</template>
 	</div>
 	<div v-if="note.files.length > 0">
 		<XMediaList :media-list="note.files"/>
@@ -27,6 +32,7 @@
 import { } from 'vue';
 import * as misskey from 'calckey-js';
 import * as mfm from 'mfm-js';
+import XNoteSimple from '@/components/MkNoteSimple.vue';
 import XMediaList from '@/components/MkMediaList.vue';
 import XPoll from '@/components/MkPoll.vue';
 import MkUrlPreview from '@/components/MkUrlPreview.vue';
@@ -35,9 +41,9 @@ import { i18n } from '@/i18n';
 
 const props = defineProps<{
 	note: misskey.entities.Note;
+	detailed?: boolean;
 }>();
 
-
 const isLong = (
 	props.note.cw == null && props.note.text != null && (
 		(props.note.text.split('\n').length > 9) ||
@@ -46,7 +52,6 @@ const isLong = (
 );
 const collapsed = $ref(props.note.cw == null && isLong);
 const urls = props.note.text ? extractUrlFromMfm(mfm.parse(props.note.text)) : null;
-console.log(props.note.text);
 
 </script>
 

From 4ed1b80d6842acd60ae137767e93b54cd6ceec9a Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Fri, 17 Feb 2023 11:40:12 -0800
Subject: [PATCH 05/61] perf: :zap: MkPageHeader perf

---
 .../src/components/global/MkPageHeader.vue    | 100 +++++++++---------
 1 file changed, 50 insertions(+), 50 deletions(-)

diff --git a/packages/client/src/components/global/MkPageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue
index 3b844bd82d..831eca9976 100644
--- a/packages/client/src/components/global/MkPageHeader.vue
+++ b/packages/client/src/components/global/MkPageHeader.vue
@@ -34,7 +34,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref, inject, watch, shallowReactive, nextTick, reactive } from 'vue';
+import { computed, onMounted, onUnmounted, ref, inject, watch, shallowReactive, nextTick } from 'vue';
 import tinycolor from 'tinycolor2';
 import { popupMenu } from '@/os';
 import { scrollToTop } from '@/scripts/scroll';
@@ -71,17 +71,17 @@ const metadata = injectPageMetadata();
 const hideTitle = inject('shouldOmitHeaderTitle', false);
 const thin_ = props.thin || inject('shouldHeaderThin', false);
 
-const el = $ref<HTMLElement | null>(null);
-const tabRefs = {};
-const tabHighlightEl = $ref<HTMLElement | null>(null);
-const tabsEl = $ref<HTMLElement | null>(null);
-const bg = ref(null);
-let narrow = $ref(false);
+const el = ref<HTMLElement | null>(null);
+const tabRefs: Record<string, HTMLElement> = {};
+const tabHighlightEl = ref<HTMLElement | null>(null);
+const tabsEl = ref<HTMLElement | null>(null);
+const bg = ref<string | null>(null);
+const narrow = ref(false);
 const height = ref(0);
-const hasTabs = $computed(() => props.tabs && props.tabs.length > 0);
-const hasActions = $computed(() => props.actions && props.actions.length > 0);
-const show = $computed(() => {
-	return !hideTitle || hasTabs || hasActions;
+const hasTabs = computed(() => props.tabs && props.tabs.length > 0);
+const hasActions = computed(() => props.actions && props.actions.length > 0);
+const show = computed(() => {
+	return !hideTitle || hasTabs.value || hasActions.value;
 });
 
 const openAccountMenu = (ev: MouseEvent) => {
@@ -91,11 +91,11 @@ const openAccountMenu = (ev: MouseEvent) => {
 };
 
 const showTabsPopup = (ev: MouseEvent) => {
-	if (!hasTabs) return;
-	if (!narrow) return;
+	if (!hasTabs.value) return;
+	if (!narrow.value) return;
 	ev.preventDefault();
 	ev.stopPropagation();
-	const menu = props.tabs.map(tab => ({
+	const menu = props.tabs!.map(tab => ({
 		text: tab.title,
 		icon: tab.icon,
 		active: tab.key != null && tab.key === props.tab,
@@ -111,7 +111,7 @@ const preventDrag = (ev: TouchEvent) => {
 };
 
 const onClick = () => {
-	scrollToTop(el, { behavior: 'smooth' });
+	scrollToTop(el.value!, { behavior: 'smooth' });
 };
 
 function onTabMousedown(tab: Tab, ev: MouseEvent): void {
@@ -142,42 +142,42 @@ const calcBg = () => {
 let ro: ResizeObserver | null;
 
 onMounted(() => {
-	calcBg();
-	globalEvents.on('themeChanged', calcBg);
-	
-	watch(() => [props.tab, props.tabs], () => {
-		nextTick(() => {
-			const tabEl = tabRefs[props.tab];
-			if (tabEl && tabHighlightEl) {
-				// offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある
-				// https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4
-				const tabSizeX = tabEl.scrollWidth + 20; // + the tab's padding
-				tabEl.style = `--width: ${tabSizeX}px`;
-				setTimeout(() => {
-					const parentRect = tabsEl.getBoundingClientRect();
-					const rect = tabEl.getBoundingClientRect();
-					const left = (rect.left - parentRect.left + tabsEl?.scrollLeft);
-					tabHighlightEl.style.width = tabSizeX + 'px';
-					tabHighlightEl.style.transform = `translateX(${left}px)`;
-					window.requestAnimationFrame(() => {
-						tabsEl?.scrollTo({left: left - 60, behavior: "smooth"});
-					})
-				}, 200);
-			}
-		});
-	}, {
-		immediate: true,
-	});
+  calcBg();
+  globalEvents.on('themeChanged', calcBg);
 
-	if (el && el.parentElement) {
-		narrow = el.parentElement.offsetWidth < 500;
-		ro = new ResizeObserver((entries, observer) => {
-			if (el.parentElement && document.body.contains(el)) {
-				narrow = el.parentElement.offsetWidth < 500;
-			}
-		});
-		ro.observe(el.parentElement);
-	}
+  const updateTabHighlight = () => {
+    nextTick(() => {
+      const tabEl = tabRefs[props.tab];
+      if (tabEl && tabHighlightEl) {
+        const tabSizeX = tabEl.scrollWidth + 20;
+        tabEl.style.setProperty('--width', `${tabSizeX}px`);
+
+        const parentRect = tabsEl.getBoundingClientRect();
+        const rect = tabEl.getBoundingClientRect();
+        const left = (rect.left - parentRect.left + tabsEl.scrollLeft);
+        tabHighlightEl.style.width = `${tabSizeX}px`;
+        tabHighlightEl.style.transform = `translateX(${left}px)`;
+        tabsEl.scrollTo({left: left - 60, behavior: "smooth"});
+      }
+    });
+  };
+
+  const updateTab = () => {
+    emit('update:tab', props.tab);
+  };
+
+  watch(() => [props.tab, props.tabs], updateTabHighlight, { immediate: true });
+  watch(() => props.tab, updateTab);
+
+  if (el && el.parentElement) {
+    narrow.value = el.parentElement.offsetWidth < 500;
+    ro = new ResizeObserver((entries, observer) => {
+      if (el.parentElement && document.body.contains(el)) {
+        narrow.value = el.parentElement.offsetWidth < 500;
+      }
+    });
+    ro.observe(el.parentElement);
+  }
 });
 
 onUnmounted(() => {

From 6d2f2efcf6c3406d352675b16e53b7c4c2c59d0c Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Fri, 17 Feb 2023 11:41:24 -0800
Subject: [PATCH 06/61] dev10

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index dbb304cb96..476d9afe56 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "13.2.0-dev9",
+	"version": "13.2.0-dev10",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",

From 9ed34f3704b410f24468d4db145477253be4bd52 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Fri, 17 Feb 2023 11:54:33 -0800
Subject: [PATCH 07/61] add isActiveTab method

---
 packages/client/src/components/global/MkPageHeader.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/client/src/components/global/MkPageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue
index 831eca9976..4a6b72a4e8 100644
--- a/packages/client/src/components/global/MkPageHeader.vue
+++ b/packages/client/src/components/global/MkPageHeader.vue
@@ -132,6 +132,11 @@ function onTabClick(tab: Tab, ev: MouseEvent): void {
 	}
 }
 
+const isActiveTab = (index: number) => {
+  const activeTab = tabRefs[props.tab]?.value ?? 0;
+  return index === activeTab;
+};
+
 const calcBg = () => {
 	const rawBg = metadata?.bg || 'var(--bg)';
 	const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);

From 0d32eb2cd5717d07ec57ffe894c3f4dc6cd32123 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Fri, 17 Feb 2023 12:36:07 -0800
Subject: [PATCH 08/61] fix

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 476d9afe56..d1173a5d40 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
 		"test": "pnpm run mocha",
 		"format": "gulp format",
 		"clean": "pnpm node ./scripts/clean.js",
-		"clean-all": "pnpm node ./scripts/clean-all.js",
+	"clean-all": "pnpm node ./scripts/clean-all.js",
 		"cleanall": "pnpm run clean-all"
 	},
 	"resolutions": {

From b654add6b31f6bb6768e50bfd19fc0ac523d938e Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Fri, 17 Feb 2023 12:36:16 -0800
Subject: [PATCH 09/61] fix

---
 .../src/components/global/MkPageHeader.vue    | 98 +++++++++----------
 1 file changed, 46 insertions(+), 52 deletions(-)

diff --git a/packages/client/src/components/global/MkPageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue
index 4a6b72a4e8..c25f90dba8 100644
--- a/packages/client/src/components/global/MkPageHeader.vue
+++ b/packages/client/src/components/global/MkPageHeader.vue
@@ -1,40 +1,39 @@
 <template>
-  <div ref="el" class="fdidabkb" :class="classes" :style="{ background: bg }" @click="onClick">
-    <div v-show="narrow" class="buttons left" @click="openAccountMenu">
-      <MkAvatar v-if="displayMyAvatar && user" class="avatar" :user="user" :disable-preview="true"/>
-    </div>
-    <template v-if="hasTabs">
-      <div v-show="!hideTitle" class="titleContainer" @click="showTabsPopup">
-        <MkAvatar v-if="metadata.avatar" class="avatar" :user="metadata.avatar" :disable-preview="true" :show-indicator="true"/>
-        <i v-else-if="metadata.icon && !narrow" class="icon" :class="metadata.icon"></i>
-        <div class="title">
-          <MkUserName v-if="metadata.userName" :user="metadata.userName" :nowrap="true" class="title"/>
-          <div v-else-if="metadata.title && !hasTabs && !narrow" class="title">{{ metadata.title }}</div>
-          <div v-show="!narrow && metadata.subtitle" class="subtitle">{{ metadata.subtitle }}</div>
-        </div>
-      </div>
-      <div ref="tabsEl" class="tabs" v-show="hasTabs">
-        <button v-for="tab in tabs" :key="tab.key" ref="tabRefs[tab.key]" v-tooltip.noDelay="tab.title"
-          class="tab _button" :class="{ active: isActiveTab(tab) }" @mousedown="onTabMousedown(tab)"
-          @click="onTabClick(tab)">
-          <i v-if="tab.icon && !tab.iconOnly" class="icon" :class="tab.icon"></i>
-          <span class="title">{{ tab.title }}</span>
-        </button>
-        <div ref="tabHighlightEl" class="highlight"></div>
-      </div>
-    </template>
-    <div v-show="hasActions" class="buttons right">
-      <button v-for="(action, index) in actions" :key="index" v-tooltip.noDelay="action.text"
-        class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler"
-        @touchstart="preventDrag">
-        <i :class="action.icon"></i>
-      </button>
-    </div>
-  </div>
+	<div v-if="show" ref="el" class="fdidabkb" :class="{ slim: narrow, thin: thin_ }" :style="{ background: bg }" @click="onClick">
+		<div v-if="narrow" class="buttons left" @click="openAccountMenu">
+		<MkAvatar v-if="props.displayMyAvatar && $i" class="avatar" :user="$i" :disable-preview="true"/>
+	</div>
+	<template v-if="metadata">
+		<div v-if="!hideTitle" class="titleContainer" @click="showTabsPopup">
+			<MkAvatar v-if="metadata.avatar" class="avatar" :user="metadata.avatar" :disable-preview="true" :show-indicator="true"/>
+				<i v-else-if="metadata.icon && !narrow" class="icon" :class="metadata.icon"></i>
+
+				<div class="title">
+					<MkUserName v-if="metadata.userName" :user="metadata.userName" :nowrap="true" class="title"/>
+					<div v-else-if="metadata.title && !(tabs != null && tabs.length > 0 && narrow)" class="title">{{ metadata.title }}</div>
+					<div v-if="!narrow && metadata.subtitle" class="subtitle">
+						{{ metadata.subtitle }}
+					</div>
+				</div>
+			</div>
+			<div ref="tabsEl" v-if="hasTabs" class="tabs">
+				<button v-for="tab in tabs" :ref="(el) => tabRefs[tab.key] = el" v-tooltip.noDelay="tab.title" class="tab _button" :class="{ active: tab.key != null && tab.key === props.tab }" @mousedown="(ev) => onTabMousedown(tab, ev)" @click="(ev) => onTabClick(tab, ev)">
+					<i v-if="tab.icon" class="icon" :class="tab.icon"></i>
+					<span class="title">{{ tab.title }}</span>
+				</button>
+				<div ref="tabHighlightEl" class="highlight"></div>
+			</div>
+		</template>
+		<div class="buttons right">
+			<template v-for="action in actions">
+				<button v-tooltip.noDelay="action.text" class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag"><i :class="action.icon"></i></button>
+			</template>
+		</div>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref, inject, watch, shallowReactive, nextTick } from 'vue';
+import { computed, onMounted, onUnmounted, ref, inject, watch, shallowReactive, nextTick, reactive } from 'vue';
 import tinycolor from 'tinycolor2';
 import { popupMenu } from '@/os';
 import { scrollToTop } from '@/scripts/scroll';
@@ -71,17 +70,17 @@ const metadata = injectPageMetadata();
 const hideTitle = inject('shouldOmitHeaderTitle', false);
 const thin_ = props.thin || inject('shouldHeaderThin', false);
 
-const el = ref<HTMLElement | null>(null);
-const tabRefs: Record<string, HTMLElement> = {};
-const tabHighlightEl = ref<HTMLElement | null>(null);
-const tabsEl = ref<HTMLElement | null>(null);
-const bg = ref<string | null>(null);
-const narrow = ref(false);
+const el = $ref<HTMLElement | null>(null);
+const tabRefs = {};
+const tabHighlightEl = $ref<HTMLElement | null>(null);
+const tabsEl = $ref<HTMLElement | null>(null);
+const bg = ref(null);
+let narrow = $ref(false);
 const height = ref(0);
-const hasTabs = computed(() => props.tabs && props.tabs.length > 0);
-const hasActions = computed(() => props.actions && props.actions.length > 0);
-const show = computed(() => {
-	return !hideTitle || hasTabs.value || hasActions.value;
+const hasTabs = $computed(() => props.tabs && props.tabs.length > 0);
+const hasActions = $computed(() => props.actions && props.actions.length > 0);
+const show = $computed(() => {
+	return !hideTitle || hasTabs || hasActions;
 });
 
 const openAccountMenu = (ev: MouseEvent) => {
@@ -91,11 +90,11 @@ const openAccountMenu = (ev: MouseEvent) => {
 };
 
 const showTabsPopup = (ev: MouseEvent) => {
-	if (!hasTabs.value) return;
-	if (!narrow.value) return;
+	if (!hasTabs) return;
+	if (!narrow) return;
 	ev.preventDefault();
 	ev.stopPropagation();
-	const menu = props.tabs!.map(tab => ({
+	const menu = props.tabs.map(tab => ({
 		text: tab.title,
 		icon: tab.icon,
 		active: tab.key != null && tab.key === props.tab,
@@ -111,7 +110,7 @@ const preventDrag = (ev: TouchEvent) => {
 };
 
 const onClick = () => {
-	scrollToTop(el.value!, { behavior: 'smooth' });
+	scrollToTop(el, { behavior: 'smooth' });
 };
 
 function onTabMousedown(tab: Tab, ev: MouseEvent): void {
@@ -132,11 +131,6 @@ function onTabClick(tab: Tab, ev: MouseEvent): void {
 	}
 }
 
-const isActiveTab = (index: number) => {
-  const activeTab = tabRefs[props.tab]?.value ?? 0;
-  return index === activeTab;
-};
-
 const calcBg = () => {
 	const rawBg = metadata?.bg || 'var(--bg)';
 	const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);

From 66c3ac0654502a743b65271b7cb2a93be6133c2a Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sun, 19 Feb 2023 18:31:16 -0500
Subject: [PATCH 10/61] new threading, still wip

---
 .../client/src/components/MkNoteFooter.vue    |  2 +-
 packages/client/src/components/MkNoteSub.vue  | 83 ++++++++++++-------
 2 files changed, 55 insertions(+), 30 deletions(-)

diff --git a/packages/client/src/components/MkNoteFooter.vue b/packages/client/src/components/MkNoteFooter.vue
index ff5eb7702c..ae29e17e48 100644
--- a/packages/client/src/components/MkNoteFooter.vue
+++ b/packages/client/src/components/MkNoteFooter.vue
@@ -126,7 +126,7 @@ function blur() {
 .footer {
 	display: flex;
 	flex-wrap: wrap;
-	margin-top: .4em;
+	// margin-top: .4em;
 	pointer-events: none; // Allow clicking anything w/out pointer-events: all; to open post
 
 	> .button {
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index bd965f4a3b..dd0ddc251c 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -1,5 +1,6 @@
 <template>
-<div v-size="{ max: [450] }" class="wrpstxzv" :class="{ children: depth > 1 }">
+<div v-size="{ max: [450] }" class="wrpstxzv" :class="{ children: depth > 1, singleStart:replies.length == 1 }">
+	<div v-if="conversation && depth > 1" class="line"></div>
 	<div class="main" @click="router.push(notePage(note))">
 		<div class="avatar-container">
 			<MkAvatar class="avatar" :user="note.user"/>
@@ -20,8 +21,8 @@
 		</div>
 	</div>
 	<template v-if="conversation">
-		<template v-if="depth < 5 && replies.length == 1">
-			<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply single" :conversation="conversation" :depth="depth"/>
+		<template v-if="replies.length == 1">
+			<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply single" :conversation="conversation" :depth="depth + 1"/>
 		</template>
 		<template v-else-if="depth < 5">
 			<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply" :conversation="conversation" :depth="depth + 1"/>
@@ -67,7 +68,7 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 
 
 	&.children {
-		padding: 10px 0 0 16px;
+		padding: 10px 0 0 var(--avatarSize);
 		font-size: 1em;
 		cursor: auto;
 
@@ -143,35 +144,59 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 		&:first-child {
 			padding-top: 30px;
 		}
-		.avatar-container {
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			margin-right: 14px;
-			width: var(--avatarSize);
-			> .avatar {
-				width: var(--avatarSize);
-				height: var(--avatarSize);
-				margin: 0;
-			}
-			> .line {
-				width: var(--avatarSize);
+		> .main > .body {
+			padding-bottom: 16px;
+		}
+	}
+	
+	// Reply Lines
+	&.reply, &.reply-to, &.reply-to-more {
+		> .main {
+			> .avatar-container {
 				display: flex;
-				flex-grow: 1;
-				&::before {
-					content: "";
-					display: block;
-					width: 2px;
-					background-color: var(--divider);
-					margin-inline: auto;
-					.note > & {
-						margin-bottom: -16px;
-					}
+				flex-direction: column;
+				align-items: center;
+				margin-right: 14px;
+				width: var(--avatarSize);
+				> .avatar {
+					width: var(--avatarSize);
+					height: var(--avatarSize);
+					margin: 0;
 				}
 			}
 		}
-		> .main > .body {
-			padding-bottom: 16px;
+		.line {
+			width: var(--avatarSize);
+			display: flex;
+			flex-grow: 1;
+			&::before {
+				content: "";
+				display: block;
+				width: 2px;
+				background-color: var(--divider);
+				background-color: white; // FOr now
+				margin-inline: auto;
+				.note > & {
+					margin-bottom: -16px;
+				}
+			}
+		}
+	}
+	.reply:last-child, &.reply:not(.children) {	// Hide line in last reply of thread
+		> .main:last-child > .avatar-container > .line { 
+			display: none;
+		}
+	}
+	.reply.children:not(:last-child) { // Line that goes through multiple replies
+		position: relative;
+		> .line {
+			position: absolute;
+			top: 0;
+			left: 0;
+			bottom: 0;
+		}
+		&:not(.single):not(.singleStart) > .main > .avatar-container > .line {
+			display: none;
 		}
 	}
 

From e32bab700dbb7b06b321129dd93869fdacd0725d Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sun, 19 Feb 2023 20:12:01 -0500
Subject: [PATCH 11/61] add reply connectors, a

---
 .../client/src/components/MkNoteFooter.vue    |  1 -
 packages/client/src/components/MkNoteSub.vue  | 48 ++++++++++++++-----
 2 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/packages/client/src/components/MkNoteFooter.vue b/packages/client/src/components/MkNoteFooter.vue
index ae29e17e48..8a40240b32 100644
--- a/packages/client/src/components/MkNoteFooter.vue
+++ b/packages/client/src/components/MkNoteFooter.vue
@@ -126,7 +126,6 @@ function blur() {
 .footer {
 	display: flex;
 	flex-wrap: wrap;
-	// margin-top: .4em;
 	pointer-events: none; // Allow clicking anything w/out pointer-events: all; to open post
 
 	> .button {
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index dd0ddc251c..4a4d27040b 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -65,10 +65,11 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 <style lang="scss" scoped>
 .wrpstxzv {
 	padding: 16px 32px;
-
+	--divider: rgba(255,255,255,0.5); // for now
 
 	&.children {
-		padding: 10px 0 0 var(--avatarSize);
+		padding: 10px 0 0 var(--indent);
+		padding-left: var(--indent) !important;
 		font-size: 1em;
 		cursor: auto;
 
@@ -127,8 +128,10 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 		}
 	}
 
+	&.reply :deep(.footer) {
+		font-size: .9em;
+	}
 	> .reply, > .more {
-		// border-left: solid 0.5px var(--divider);
 		margin-top: 10px;
 		&.single {
 			padding: 0 !important;
@@ -144,13 +147,14 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 		&:first-child {
 			padding-top: 30px;
 		}
-		> .main > .body {
-			padding-bottom: 16px;
+		.line::before {
+			margin-bottom: -16px;
 		}
 	}
 	
 	// Reply Lines
 	&.reply, &.reply-to, &.reply-to-more {
+		--indent: var(--avatarSize);
 		> .main {
 			> .avatar-container {
 				display: flex;
@@ -172,16 +176,16 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 			&::before {
 				content: "";
 				display: block;
-				width: 2px;
-				background-color: var(--divider);
-				background-color: white; // FOr now
+				border-left: 2px solid var(--divider);
 				margin-inline: auto;
-				.note > & {
-					margin-bottom: -16px;
-				}
 			}
 		}
 	}
+	&.single, &.singleStart {
+		> .main > .avatar-container > .line::before {
+			margin-bottom: -10px;
+		}
+	}
 	.reply:last-child, &.reply:not(.children) {	// Hide line in last reply of thread
 		> .main:last-child > .avatar-container > .line { 
 			display: none;
@@ -194,11 +198,33 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 			top: 0;
 			left: 0;
 			bottom: 0;
+			&::before {
+				margin-top: -10px;
+			}
 		}
 		&:not(.single):not(.singleStart) > .main > .avatar-container > .line {
 			display: none;
 		}
 	}
+	// Reply line connectors
+	.reply.children:not(.single) {
+		position: relative;
+		> .line {
+			position: absolute;
+			left: 0;
+			&::after {
+				content: "";
+				position: absolute;
+				border-left: 2px solid var(--divider);
+				border-bottom: 2px solid var(--divider);
+				margin-left: calc(var(--avatarSize) / 2 - 1px);
+				margin-top: -20px;
+				width: calc(var(--indent) / 3);
+				height: calc((var(--avatarSize) / 2) + 20px);
+				border-bottom-left-radius: calc(var(--indent) / 3);
+			}
+		}
+	}
 
 	&.max-width_450px {
 		padding: 14px 16px;

From d6c10891b71f26b9598baa739934aa77f1cd0544 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sun, 19 Feb 2023 20:56:28 -0500
Subject: [PATCH 12/61] back to the smaller avatars

---
 packages/client/src/components/MkNoteSub.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index 4a4d27040b..52f427b7f5 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -128,8 +128,14 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 		}
 	}
 
-	&.reply :deep(.footer) {
-		font-size: .9em;
+	&.reply {
+		--avatarSize: 38px;
+		.avatar-container {
+			margin-right: 8px !important;
+		}
+		:deep(.footer) {
+			font-size: .9em;
+		}
 	}
 	> .reply, > .more {
 		margin-top: 10px;

From 1235a1cdb8dfbdac381766c518c2103b0259ab6c Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Mon, 20 Feb 2023 13:18:37 -0500
Subject: [PATCH 13/61] use accent color for lines

---
 packages/client/src/components/MkNoteSub.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index 52f427b7f5..39a4bc7383 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -65,7 +65,7 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 <style lang="scss" scoped>
 .wrpstxzv {
 	padding: 16px 32px;
-	--divider: rgba(255,255,255,0.5); // for now
+	// --divider: rgba(255,255,255,0.5); // for now
 
 	&.children {
 		padding: 10px 0 0 var(--indent);
@@ -182,7 +182,7 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 			&::before {
 				content: "";
 				display: block;
-				border-left: 2px solid var(--divider);
+				border-left: 2px solid var(--accent);
 				margin-inline: auto;
 			}
 		}
@@ -221,11 +221,11 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 			&::after {
 				content: "";
 				position: absolute;
-				border-left: 2px solid var(--divider);
-				border-bottom: 2px solid var(--divider);
-				margin-left: calc(var(--avatarSize) / 2 - 1px);
+				border-left: 2px solid var(--accent);
+				border-bottom: 2px solid var(--accent);
+				margin-left: calc((var(--avatarSize) / 2) - 1px);
 				margin-top: -20px;
-				width: calc(var(--indent) / 3);
+				width: calc(var(--indent) / 2);
 				height: calc((var(--avatarSize) / 2) + 20px);
 				border-bottom-left-radius: calc(var(--indent) / 3);
 			}

From 514cc3d8d2bebce350df703b014adc09540ede39 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Mon, 20 Feb 2023 13:19:12 -0500
Subject: [PATCH 14/61] Use bolder font on active reaction

---
 packages/client/src/components/MkReactionsViewer.reaction.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/client/src/components/MkReactionsViewer.reaction.vue b/packages/client/src/components/MkReactionsViewer.reaction.vue
index 63d92cabb5..1aee525714 100644
--- a/packages/client/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/client/src/components/MkReactionsViewer.reaction.vue
@@ -120,6 +120,7 @@ useTooltip(buttonRef, async (showing) => {
 
 		> .count {
 			color: var(--fgOnAccent);
+			font-weight: 600;
 		}
 
 		> .icon {

From 294d94080079099cc6744ed5d87f9cc05ae6005c Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Mon, 20 Feb 2023 13:30:15 -0500
Subject: [PATCH 15/61] Revert footer changes

---
 packages/client/src/components/MkNoteFooter.vue    |  4 +---
 packages/client/src/components/MkNoteSub.vue       |  3 +--
 .../client/src/components/MkReactionsViewer.vue    |  7 +++----
 .../client/src/components/MkSubNoteContent.vue     | 14 +++++++-------
 4 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/packages/client/src/components/MkNoteFooter.vue b/packages/client/src/components/MkNoteFooter.vue
index 8a40240b32..1f47d4083f 100644
--- a/packages/client/src/components/MkNoteFooter.vue
+++ b/packages/client/src/components/MkNoteFooter.vue
@@ -1,6 +1,6 @@
 <template>
 	<footer ref="el" class="footer" @click.stop.prevent>
-		<XReactionsViewer v-if="!conversation" ref="reactionsViewer" :note="appearNote"/>
+		<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
 		<button v-tooltip.noDelay.bottom="i18n.ts.reply" class="button _button" @click="reply()">
 			<template v-if="appearNote.reply"><i class="ph-arrow-u-up-left-bold ph-lg"></i></template>
 			<template v-else><i class="ph-arrow-bend-up-left-bold ph-lg"></i></template>
@@ -18,7 +18,6 @@
 		<button ref="menuButton" v-tooltip.noDelay.bottom="i18n.ts.more" class="button _button" @click="menu()">
 			<i class="ph-dots-three-outline-bold ph-lg"></i>
 		</button>
-		<XReactionsViewer v-if="conversation" ref="reactionsViewer" :note="appearNote"/>
 	</footer>
 </template>
 
@@ -41,7 +40,6 @@ import { useNoteCapture } from '@/scripts/use-note-capture';
 
 const props = defineProps<{
 	note: misskey.entities.Note;
-	conversation?: misskey.entities.Note[];
 }>();
 
 let note = $ref(deepClone(props.note));
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index 39a4bc7383..645d2d277a 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -17,7 +17,7 @@
 					<MkSubNoteContent class="text" :note="note" :detailed="true"/>
 				</div>
 			</div>
-			<MkNoteFooter :note="note" :conversation="conversation"></MkNoteFooter>
+			<MkNoteFooter :note="note"></MkNoteFooter>
 		</div>
 	</div>
 	<template v-if="conversation">
@@ -65,7 +65,6 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 <style lang="scss" scoped>
 .wrpstxzv {
 	padding: 16px 32px;
-	// --divider: rgba(255,255,255,0.5); // for now
 
 	&.children {
 		padding: 10px 0 0 var(--indent);
diff --git a/packages/client/src/components/MkReactionsViewer.vue b/packages/client/src/components/MkReactionsViewer.vue
index a9cf9b00c3..eb60e3633d 100644
--- a/packages/client/src/components/MkReactionsViewer.vue
+++ b/packages/client/src/components/MkReactionsViewer.vue
@@ -21,11 +21,10 @@ const isMe = computed(() => $i && $i.id === props.note.userId);
 
 <style lang="scss" scoped>
 .tdflqwzn {
-	margin: 0px -2px 0 -2px;
+	margin-inline: -2px;
+	margin-top: .2em;
 	width: 100%;
-	.reply & {
-		width: auto;
-	}
+	
 	&:empty {
 		display: none;
 	}
diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue
index daded56d22..987d596f40 100644
--- a/packages/client/src/components/MkSubNoteContent.vue
+++ b/packages/client/src/components/MkSubNoteContent.vue
@@ -5,13 +5,13 @@
 		<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="ph-arrow-bend-up-left-bold ph-lg"></i></MkA>
 		<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
 		<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">{{ i18n.ts.quoteAttached }}: ...</MkA>
-		<template v-if="detailed">
-			<!-- <div v-if="note.renoteId" class="renote">
-				<XNoteSimple :note="note.renote"/>
-			</div> -->
-			<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" class="url-preview"/>
-		</template>
 	</div>
+	<template v-if="detailed">
+		<!-- <div v-if="note.renoteId" class="renote">
+			<XNoteSimple :note="note.renote"/>
+		</div> -->
+		<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" class="url-preview"/>
+	</template>
 	<div v-if="note.files.length > 0">
 		<XMediaList :media-list="note.files"/>
 	</div>
@@ -58,7 +58,7 @@ const urls = props.note.text ? extractUrlFromMfm(mfm.parse(props.note.text)) : n
 <style lang="scss" scoped>
 .wrmlmaau {
 	overflow-wrap: break-word;
-
+	
 	> .body {
 		> .reply {
 			margin-right: 6px;

From 62246796b14160be4b2b8f784a1f3bad5a4438d6 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Mon, 20 Feb 2023 22:24:06 -0500
Subject: [PATCH 16/61] Prevent mention avatars from wrapping

---
 packages/client/src/components/MkMention.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/MkMention.vue b/packages/client/src/components/MkMention.vue
index 3091b435e4..2df9f12357 100644
--- a/packages/client/src/components/MkMention.vue
+++ b/packages/client/src/components/MkMention.vue
@@ -42,8 +42,13 @@ const bgCss = bg.toRgbString();
 <style lang="scss" scoped>
 .akbvjaqn {
 	display: inline-block;
-	padding: 4px 8px 4px 4px;
+	padding: 2px 8px 2px 2px;
+	margin-block: 2px;
 	border-radius: 999px;
+	max-width: 100%;
+	white-space: nowrap;
+	overflow: clip;
+	text-overflow: ellipsis;
 	color: var(--mention);
 
 	&.isMe {

From 795950a7544313537f94e36f1ea1ebc566f09238 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Mon, 20 Feb 2023 23:29:34 -0500
Subject: [PATCH 17/61] *Might* be something that can improve performance

---
 packages/client/src/components/MkNote.vue    | 1 +
 packages/client/src/components/MkNoteSub.vue | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 20225843a3..eaf0d159a8 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -279,6 +279,7 @@ function readPromo() {
 	font-size: 1.05em;
 	overflow: clip;
 	contain: content;
+	content-visibility: auto;
 
 	// これらの指定はパフォーマンス向上には有効だが、ノートの高さは一定でないため、
 	// 下の方までスクロールすると上のノートの高さがここで決め打ちされたものに変化し、表示しているノートの位置が変わってしまう
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index 645d2d277a..6ba7043069 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -65,6 +65,7 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 <style lang="scss" scoped>
 .wrpstxzv {
 	padding: 16px 32px;
+	content-visibility: auto;
 
 	&.children {
 		padding: 10px 0 0 var(--indent);

From eb30b8460dc3b0ed01286ff9622f73e3b8fead27 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Thu, 23 Feb 2023 16:44:15 -0500
Subject: [PATCH 18/61] bruh why didn't I just do that

---
 packages/client/src/components/MkNoteSub.vue | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index 6ba7043069..718b7e177d 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -1,10 +1,10 @@
 <template>
-<div v-size="{ max: [450] }" class="wrpstxzv" :class="{ children: depth > 1, singleStart:replies.length == 1 }">
+<div v-size="{ max: [450] }" class="wrpstxzv" :class="{ children: depth > 1, singleStart: replies.length == 1 }">
 	<div v-if="conversation && depth > 1" class="line"></div>
 	<div class="main" @click="router.push(notePage(note))">
 		<div class="avatar-container">
 			<MkAvatar class="avatar" :user="note.user"/>
-			<div class="line"></div>
+			<div v-if="(!conversation) || replies.length > 0" class="line"></div>
 		</div>
 		<div class="body">
 			<XNoteHeader class="header" :note="note" :mini="true"/>
@@ -22,7 +22,7 @@
 	</div>
 	<template v-if="conversation">
 		<template v-if="replies.length == 1">
-			<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply single" :conversation="conversation" :depth="depth + 1"/>
+			<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply single" :conversation="conversation" :depth="depth"/>
 		</template>
 		<template v-else-if="depth < 5">
 			<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply" :conversation="conversation" :depth="depth + 1"/>
@@ -192,11 +192,6 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 			margin-bottom: -10px;
 		}
 	}
-	.reply:last-child, &.reply:not(.children) {	// Hide line in last reply of thread
-		> .main:last-child > .avatar-container > .line { 
-			display: none;
-		}
-	}
 	.reply.children:not(:last-child) { // Line that goes through multiple replies
 		position: relative;
 		> .line {
@@ -208,9 +203,6 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 				margin-top: -10px;
 			}
 		}
-		&:not(.single):not(.singleStart) > .main > .avatar-container > .line {
-			display: none;
-		}
 	}
 	// Reply line connectors
 	.reply.children:not(.single) {

From 42532ce168bb9ec592711c8d874718b0714189e6 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Thu, 23 Feb 2023 18:22:51 -0500
Subject: [PATCH 19/61] line alignment fixes

---
 packages/client/src/components/MkNoteSub.vue | 44 +++++++++++++-------
 1 file changed, 29 insertions(+), 15 deletions(-)

diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index 718b7e177d..9ab9b4b04d 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -66,7 +66,6 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 .wrpstxzv {
 	padding: 16px 32px;
 	content-visibility: auto;
-
 	&.children {
 		padding: 10px 0 0 var(--indent);
 		padding-left: var(--indent) !important;
@@ -141,6 +140,9 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 		margin-top: 10px;
 		&.single {
 			padding: 0 !important;
+			> .line {
+				display: none;
+			}
 		}
 	}
 
@@ -160,7 +162,7 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 	
 	// Reply Lines
 	&.reply, &.reply-to, &.reply-to-more {
-		--indent: var(--avatarSize);
+		--indent: calc(var(--avatarSize) - 5px);
 		> .main {
 			> .avatar-container {
 				display: flex;
@@ -176,20 +178,30 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 			}
 		}
 		.line {
+			position: relative;
 			width: var(--avatarSize);
 			display: flex;
 			flex-grow: 1;
+			margin-bottom: -10px;
 			&::before {
 				content: "";
-				display: block;
-				border-left: 2px solid var(--accent);
-				margin-inline: auto;
+				position: absolute;
+				border-left: 2px solid var(--divider);
+				margin-left: calc((var(--avatarSize) / 2) - 1px);
+				width: calc(var(--indent) / 2);
+				inset-block: 0;
+				min-height: 8px;
 			}
 		}
 	}
+	&.reply-to, &.reply-to-more {
+		> .main > .avatar-container > .line {
+			margin-bottom: 0px !important;
+		}
+	}
 	&.single, &.singleStart {
-		> .main > .avatar-container > .line::before {
-			margin-bottom: -10px;
+		> .main > .avatar-container > .line {
+			margin-bottom: -10px !important;
 		}
 	}
 	.reply.children:not(:last-child) { // Line that goes through multiple replies
@@ -199,9 +211,6 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 			top: 0;
 			left: 0;
 			bottom: 0;
-			&::before {
-				margin-top: -10px;
-			}
 		}
 	}
 	// Reply line connectors
@@ -210,18 +219,23 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 		> .line {
 			position: absolute;
 			left: 0;
+			top: 0;
 			&::after {
 				content: "";
 				position: absolute;
-				border-left: 2px solid var(--accent);
-				border-bottom: 2px solid var(--accent);
+				border-left: 2px solid var(--divider);
+				border-bottom: 2px solid var(--divider);
 				margin-left: calc((var(--avatarSize) / 2) - 1px);
-				margin-top: -20px;
 				width: calc(var(--indent) / 2);
-				height: calc((var(--avatarSize) / 2) + 20px);
-				border-bottom-left-radius: calc(var(--indent) / 3);
+				height: calc((var(--avatarSize) / 2));
+				border-bottom-left-radius: calc(var(--indent) / 2);
+				top: 8px;
 			}
 		}
+		&:not(:last-child) > .line::after {
+			mask: linear-gradient(to right, transparent 2px, black 2px);
+			-webkit-mask: linear-gradient(to right, transparent 2px, black 2px);
+		}
 	}
 
 	&.max-width_450px {

From b0ceb9385c5279356aebbc2ef6e9919892e31ef9 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Thu, 23 Feb 2023 18:28:32 -0500
Subject: [PATCH 20/61] change line color

---
 packages/client/src/components/MkNoteSub.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index 9ab9b4b04d..c896b1cfea 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -186,7 +186,7 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 			&::before {
 				content: "";
 				position: absolute;
-				border-left: 2px solid var(--divider);
+				border-left: 2px solid var(--X13);
 				margin-left: calc((var(--avatarSize) / 2) - 1px);
 				width: calc(var(--indent) / 2);
 				inset-block: 0;
@@ -223,8 +223,8 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 			&::after {
 				content: "";
 				position: absolute;
-				border-left: 2px solid var(--divider);
-				border-bottom: 2px solid var(--divider);
+				border-left: 2px solid var(--X13);
+				border-bottom: 2px solid var(--X13);
 				margin-left: calc((var(--avatarSize) / 2) - 1px);
 				width: calc(var(--indent) / 2);
 				height: calc((var(--avatarSize) / 2));

From 5a4a3a536b4c6698cda505cebeb0436d57313142 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Thu, 23 Feb 2023 20:14:43 -0500
Subject: [PATCH 21/61] fix click events

---
 packages/client/src/components/MkCwButton.vue |  2 +-
 .../client/src/components/MkMediaList.vue     |  2 +-
 packages/client/src/components/MkMention.vue  |  4 ++--
 packages/client/src/components/MkNote.vue     | 20 +++++++++----------
 .../client/src/components/MkNoteFooter.vue    |  2 +-
 .../client/src/components/MkNoteHeader.vue    |  2 +-
 .../client/src/components/MkNoteSimple.vue    |  2 +-
 packages/client/src/components/MkPoll.vue     |  4 ++--
 .../src/components/MkSubNoteContent.vue       |  4 ++--
 .../client/src/components/MkUrlPreview.vue    |  6 +++---
 .../client/src/components/global/MkAvatar.vue |  2 +-
 .../client/src/components/global/MkUrl.vue    |  2 +-
 12 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/packages/client/src/components/MkCwButton.vue b/packages/client/src/components/MkCwButton.vue
index 4e38b16b0f..3baae82b95 100644
--- a/packages/client/src/components/MkCwButton.vue
+++ b/packages/client/src/components/MkCwButton.vue
@@ -1,5 +1,5 @@
 <template>
-<button class="nrvgflfu _button" @click.stop.prevent="toggle">
+<button class="nrvgflfu _button" @click.stop="toggle">
 	<b>{{ modelValue ? i18n.ts._cw.hide : i18n.ts._cw.show }}</b>
 	<span v-if="!modelValue">{{ label }}</span>
 </button>
diff --git a/packages/client/src/components/MkMediaList.vue b/packages/client/src/components/MkMediaList.vue
index 6cc12c9dfe..8b6d2c2c95 100644
--- a/packages/client/src/components/MkMediaList.vue
+++ b/packages/client/src/components/MkMediaList.vue
@@ -2,7 +2,7 @@
 <div class="hoawjimk">
 	<XBanner v-for="media in mediaList.filter(media => !previewable(media))" :key="media.id" :media="media"/>
 	<div v-if="mediaList.filter(media => previewable(media)).length > 0" class="gird-container" :class="{ dmWidth: inDm }">
-		<div ref="gallery" :data-count="mediaList.filter(media => previewable(media)).length" @click.stop.prevent>
+		<div ref="gallery" :data-count="mediaList.filter(media => previewable(media)).length" @click.stop>
 			<template v-for="media in mediaList.filter(media => previewable(media))">
 				<XVideo v-if="media.type.startsWith('video')" :key="media.id" :video="media"/>
 				<XImage v-else-if="media.type.startsWith('image')" :key="media.id" class="image" :data-id="media.id" :image="media" :raw="raw"/>
diff --git a/packages/client/src/components/MkMention.vue b/packages/client/src/components/MkMention.vue
index 2df9f12357..4b2e0d5189 100644
--- a/packages/client/src/components/MkMention.vue
+++ b/packages/client/src/components/MkMention.vue
@@ -1,12 +1,12 @@
 <template>
-<MkA v-if="url.startsWith('/')" v-user-preview="canonical" class="akbvjaqn" :class="{ isMe }" :to="url" :style="{ background: bgCss }">
+<MkA v-if="url.startsWith('/')" v-user-preview="canonical" class="akbvjaqn" :class="{ isMe }" :to="url" :style="{ background: bgCss }" @click.stop>
 	<img class="icon" :src="`/avatar/@${username}@${host}`" alt="">
 	<span class="main">
 		<span class="username">@{{ username }}</span>
 		<span v-if="(host != localHost) || $store.state.showFullAcct" class="host">@{{ toUnicode(host) }}</span>
 	</span>
 </MkA>
-<a v-else class="akbvjaqn" :href="url" target="_blank" rel="noopener" :style="{ background: bgCss }">
+<a v-else class="akbvjaqn" :href="url" target="_blank" rel="noopener" :style="{ background: bgCss }" @click.stop>
 	<span class="main">
 		<span class="username">@{{ username }}</span>
 		<span class="host">@{{ toUnicode(host) }}</span>
diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 753e98b0dd..23a25321cb 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -25,7 +25,7 @@
 				</template>
 			</I18n>
 			<div class="info">
-				<button ref="renoteTime" class="_button time" @click="showRenoteMenu()">
+				<button ref="renoteTime" class="_button time" @click.stop="showRenoteMenu()">
 					<i v-if="isMyRenote" class="ph-dots-three-outline-bold ph-lg dropdownIcon"></i>
 					<MkTime :time="note.createdAt"/>
 				</button>
@@ -33,24 +33,24 @@
 			</div>
 		</div>
 	</div>
-	<article class="article" @contextmenu.stop="onContextmenu" @click.self="router.push(notePage(appearNote))">
-		<div class="main" @click.self="router.push(notePage(appearNote))">
+	<article class="article" @contextmenu.stop="onContextmenu" @click="router.push(notePage(appearNote))">
+		<div class="main">
 			<div class="header-container">
 				<MkAvatar class="avatar" :user="appearNote.user"/>
 				<XNoteHeader class="header" :note="appearNote" :mini="true"/>
 			</div>
 			<div class="body">
 				<p v-if="appearNote.cw != null" class="cw">
-					<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
+					<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis" @click.stop/>
 					<XCwButton v-model="showContent" :note="appearNote"/>
 				</p>
 				<div v-show="appearNote.cw == null || showContent" class="content" :class="{ collapsed, isLong }">
-					<div class="text" @click.self="router.push(notePage(appearNote))">
-						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
+					<div class="text">
+						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis" @click.stop/>
 						<!-- <a v-if="appearNote.renote != null" class="rp">RN:</a> -->
 						<div v-if="translating || translation" class="translation">
 							<MkLoading v-if="translating" mini/>
-							<div v-else class="translated">
+							<div v-else class="translated" @click.stop>
 								<b>{{ i18n.t('translatedFrom', { x: translation.sourceLang }) }}: </b>
 								<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
 							</div>
@@ -62,14 +62,14 @@
 					<XPoll v-if="appearNote.poll" ref="pollViewer" :note="appearNote" class="poll"/>
 					<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" class="url-preview"/>
 					<div v-if="appearNote.renote" class="renote"><XNoteSimple :note="appearNote.renote"/></div>
-					<button v-if="isLong && collapsed" class="fade _button" @click.stop.prevent="collapsed = false">
+					<button v-if="isLong && collapsed" class="fade _button" @click.stop="collapsed = false">
 						<span>{{ i18n.ts.showMore }}</span>
 					</button>
-					<button v-else-if="isLong && !collapsed" class="showLess _button" @click.stop.prevent="collapsed = true">
+					<button v-else-if="isLong && !collapsed" class="showLess _button" @click.stop="collapsed = true">
 						<span>{{ i18n.ts.showLess }}</span>
 					</button>
 				</div>
-				<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><i class="ph-television-bold ph-lg"></i> {{ appearNote.channel.name }}</MkA>
+				<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`" @click.stop><i class="ph-television-bold ph-lg"></i> {{ appearNote.channel.name }}</MkA>
 			</div>
 			<MkNoteFooter :note="appearNote"></MkNoteFooter>
 		</div>
diff --git a/packages/client/src/components/MkNoteFooter.vue b/packages/client/src/components/MkNoteFooter.vue
index 1f47d4083f..d8fcffbeae 100644
--- a/packages/client/src/components/MkNoteFooter.vue
+++ b/packages/client/src/components/MkNoteFooter.vue
@@ -1,5 +1,5 @@
 <template>
-	<footer ref="el" class="footer" @click.stop.prevent>
+	<footer ref="el" class="footer" @click.stop>
 		<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
 		<button v-tooltip.noDelay.bottom="i18n.ts.reply" class="button _button" @click="reply()">
 			<template v-if="appearNote.reply"><i class="ph-arrow-u-up-left-bold ph-lg"></i></template>
diff --git a/packages/client/src/components/MkNoteHeader.vue b/packages/client/src/components/MkNoteHeader.vue
index 835611a43b..f1d2d37b0f 100644
--- a/packages/client/src/components/MkNoteHeader.vue
+++ b/packages/client/src/components/MkNoteHeader.vue
@@ -2,7 +2,7 @@
 <header class="kkwtjztg">
 	<div class="user-info">
 		<div>
-			<MkA v-user-preview="note.user.id" class="name" :to="userPage(note.user)">
+			<MkA v-user-preview="note.user.id" class="name" :to="userPage(note.user)" @click.stop>
 				<MkUserName :user="note.user" class="mkusername">
 					<span v-if="note.user.isBot" class="is-bot">bot</span>
 				</MkUserName>
diff --git a/packages/client/src/components/MkNoteSimple.vue b/packages/client/src/components/MkNoteSimple.vue
index 031c7313f1..b882af29a9 100644
--- a/packages/client/src/components/MkNoteSimple.vue
+++ b/packages/client/src/components/MkNoteSimple.vue
@@ -1,5 +1,5 @@
 <template>
-<div v-size="{ min: [350, 500] }" class="yohlumlk">
+<div v-size="{ min: [350, 500] }" class="yohlumlk" @click.stop>
 	<MkAvatar class="avatar" :user="note.user"/>
 	<div class="main">
 		<XNoteHeader class="header" :note="note" :mini="true"/>
diff --git a/packages/client/src/components/MkPoll.vue b/packages/client/src/components/MkPoll.vue
index 2c5d35c7a0..4b41b99d7b 100644
--- a/packages/client/src/components/MkPoll.vue
+++ b/packages/client/src/components/MkPoll.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="tivcixzd" :class="{ done: closed || isVoted }">
 	<ul>
-		<li v-for="(choice, i) in note.poll.choices" :key="i" :class="{ voted: choice.voted }" @click="vote(i)">
+		<li v-for="(choice, i) in note.poll.choices" :key="i" :class="{ voted: choice.voted }" @click.stop="vote(i)">
 			<div class="backdrop" :style="{ 'width': `${showResult ? (choice.votes / total * 100) : 0}%` }"></div>
 			<span>
 				<template v-if="choice.isVoted"><i class="ph-check-bold ph-lg"></i></template>
@@ -13,7 +13,7 @@
 	<p v-if="!readOnly">
 		<span>{{ i18n.t('_poll.totalVotes', { n: total }) }}</span>
 		<span> · </span>
-		<a v-if="!closed && !isVoted" @click="showResult = !showResult">{{ showResult ? i18n.ts._poll.vote : i18n.ts._poll.showResult }}</a>
+		<a v-if="!closed && !isVoted" @click.stop="showResult = !showResult">{{ showResult ? i18n.ts._poll.vote : i18n.ts._poll.showResult }}</a>
 		<span v-if="isVoted">{{ i18n.ts._poll.voted }}</span>
 		<span v-else-if="closed">{{ i18n.ts._poll.closed }}</span>
 		<span v-if="remaining > 0"> · {{ timer }}</span>
diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue
index 987d596f40..4c91a31890 100644
--- a/packages/client/src/components/MkSubNoteContent.vue
+++ b/packages/client/src/components/MkSubNoteContent.vue
@@ -19,10 +19,10 @@
 		<summary>{{ i18n.ts.poll }}</summary>
 		<XPoll :note="note"/>
 	</div>
-	<button v-if="isLong && collapsed" class="fade _button" @click.stop.prevent="collapsed = false">
+	<button v-if="isLong && collapsed" class="fade _button" @click.stop="collapsed = false">
 		<span>{{ i18n.ts.showMore }}</span>
 	</button>
-	<button v-if="isLong && !collapsed" class="showLess _button" @click.stop.prevent="collapsed = true">
+	<button v-if="isLong && !collapsed" class="showLess _button" @click.stop="collapsed = true">
 		<span>{{ i18n.ts.showLess }}</span>
 	</button>
 </div>
diff --git a/packages/client/src/components/MkUrlPreview.vue b/packages/client/src/components/MkUrlPreview.vue
index 865d4bcbe6..371e84f01b 100644
--- a/packages/client/src/components/MkUrlPreview.vue
+++ b/packages/client/src/components/MkUrlPreview.vue
@@ -1,12 +1,12 @@
 <template>
-<div v-if="playerEnabled" class="player" :style="`padding: ${(player.height || 0) / (player.width || 1) * 100}% 0 0`">
+<div v-if="playerEnabled" class="player" :style="`padding: ${(player.height || 0) / (player.width || 1) * 100}% 0 0`" @click.stop>
 	<button class="disablePlayer" :title="i18n.ts.disablePlayer" @click="playerEnabled = false"><i class="ph-x-bold ph-lg"></i></button>
 	<iframe :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" :width="player.width || '100%'" :heigth="player.height || 250" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen/>
 </div>
-<div v-else-if="tweetId && tweetExpanded" ref="twitter" class="twitter">
+<div v-else-if="tweetId && tweetExpanded" ref="twitter" class="twitter" @click.stop>
 	<iframe ref="tweet" scrolling="no" frameborder="no" :style="{ position: 'relative', width: '100%', height: `${tweetHeight}px` }" :src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${$store.state.darkMode ? 'dark' : 'light'}&amp;id=${tweetId}`"></iframe>
 </div>
-<div v-else v-size="{ max: [400, 350] }" class="mk-url-preview">
+<div v-else v-size="{ max: [400, 350] }" class="mk-url-preview" @click.stop>
 	<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
 		<component :is="self ? 'MkA' : 'a'" v-if="!fetching" class="link" :class="{ compact }" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url">
 			<div v-if="thumbnail" class="thumbnail" :style="`background-image: url('${thumbnail}')`">
diff --git a/packages/client/src/components/global/MkAvatar.vue b/packages/client/src/components/global/MkAvatar.vue
index e391c433de..f2a39de61d 100644
--- a/packages/client/src/components/global/MkAvatar.vue
+++ b/packages/client/src/components/global/MkAvatar.vue
@@ -3,7 +3,7 @@
 	<img class="inner" :src="url" decoding="async"/>
 	<MkUserOnlineIndicator v-if="showIndicator && user.instance == null" class="indicator" :user="user"/>
 </span>
-<MkA v-else v-user-preview="disablePreview ? undefined : user.id" class="eiwwqkts _noSelect" :class="{ cat: user.isCat, square: $store.state.squareAvatars }" :style="{ color }" :to="userPage(user)" :title="acct(user)" :target="target">
+<MkA v-else v-user-preview="disablePreview ? undefined : user.id" class="eiwwqkts _noSelect" :class="{ cat: user.isCat, square: $store.state.squareAvatars }" :style="{ color }" :to="userPage(user)" :title="acct(user)" :target="target" @click.stop>
 	<img class="inner" :src="url" decoding="async"/>
 	<MkUserOnlineIndicator v-if="showIndicator && user.instance == null" class="indicator" :user="user"/>
 </MkA>
diff --git a/packages/client/src/components/global/MkUrl.vue b/packages/client/src/components/global/MkUrl.vue
index d22c0b2999..b1e3e1ba3e 100644
--- a/packages/client/src/components/global/MkUrl.vue
+++ b/packages/client/src/components/global/MkUrl.vue
@@ -1,7 +1,7 @@
 <template>
 <component
 	:is="self ? 'MkA' : 'a'" ref="el" class="ieqqeuvs _link" :[attr]="self ? url.substr(local.length) : url" :rel="rel" :target="target"
-	@contextmenu.stop="() => {}"
+	@contextmenu.stop="() => {}" @click.stop
 >
 	<template v-if="!self">
 		<span class="schema">{{ schema }}//</span>

From 041d3997cd378dc906a48465d4f31a2f289c6d66 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Thu, 23 Feb 2023 20:37:26 -0500
Subject: [PATCH 22/61] Make quotes clickable

---
 packages/client/src/components/MkNote.vue         | 6 +++++-
 packages/client/src/components/MkNoteDetailed.vue | 6 +++++-
 packages/client/src/components/MkNoteSimple.vue   | 2 +-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 23a25321cb..7ebeb6d563 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -61,7 +61,7 @@
 					</div>
 					<XPoll v-if="appearNote.poll" ref="pollViewer" :note="appearNote" class="poll"/>
 					<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" class="url-preview"/>
-					<div v-if="appearNote.renote" class="renote"><XNoteSimple :note="appearNote.renote"/></div>
+					<div v-if="appearNote.renote" class="renote"><XNoteSimple :note="appearNote.renote" @click.stop="router.push(notePage(appearNote.renote))"/></div>
 					<button v-if="isLong && collapsed" class="fade _button" @click.stop="collapsed = false">
 						<span>{{ i18n.ts.showMore }}</span>
 					</button>
@@ -555,6 +555,10 @@ function readPromo() {
 							padding: 16px;
 							border: solid 1px var(--renote);
 							border-radius: 8px;
+							transition: background .2s;
+							&:hover, &:focus-within {
+								background-color: var(--panelHighlight);
+							}
 						}
 					}
 				}
diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index 864b27022b..88e13119fe 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -68,7 +68,7 @@
 					</div>
 					<XPoll v-if="appearNote.poll" ref="pollViewer" :note="appearNote" class="poll"/>
 					<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="true" class="url-preview"/>
-					<div v-if="appearNote.renote" class="renote"><XNoteSimple :note="appearNote.renote"/></div>
+					<div v-if="appearNote.renote" class="renote"><XNoteSimple :note="appearNote.renote" @click.stop="router.push(notePage(appearNote.renote))"/></div>
 				</div>
 				<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><i class="ph-television-bold ph-lg"></i> {{ appearNote.channel.name }}</MkA>
 			</div>
@@ -530,6 +530,10 @@ onUnmounted(() => {
 							padding: 16px;
 							border: solid 1px var(--renote);
 							border-radius: 8px;
+							transition: background .2s;
+							&:hover, &:focus-within {
+								background-color: var(--panelHighlight);
+							}
 						}
 					}
 				}
diff --git a/packages/client/src/components/MkNoteSimple.vue b/packages/client/src/components/MkNoteSimple.vue
index b882af29a9..031c7313f1 100644
--- a/packages/client/src/components/MkNoteSimple.vue
+++ b/packages/client/src/components/MkNoteSimple.vue
@@ -1,5 +1,5 @@
 <template>
-<div v-size="{ min: [350, 500] }" class="yohlumlk" @click.stop>
+<div v-size="{ min: [350, 500] }" class="yohlumlk">
 	<MkAvatar class="avatar" :user="note.user"/>
 	<div class="main">
 		<XNoteHeader class="header" :note="note" :mini="true"/>

From 5fe9ee27ef26fd9ffb130ef0b2d4a4db3df22ac1 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Thu, 23 Feb 2023 20:46:48 -0500
Subject: [PATCH 23/61] smaller reply avatars on mobile

---
 packages/client/src/components/MkNoteSub.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index c896b1cfea..66c5c4c466 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -240,6 +240,10 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 
 	&.max-width_450px {
 		padding: 14px 16px;
+		&.reply {
+			--avatarSize: 28px;
+			--indent: calc(var(--avatarSize) - 8px);
+		}
 		&.reply-to, &.reply-to-more {
 			padding-top: 14px !important;
 			padding-bottom: 0 !important;

From 842d48c4a868ef406fd99adc6a0adf221be0859b Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Thu, 23 Feb 2023 22:03:38 -0500
Subject: [PATCH 24/61] also add hover to link previews

---
 packages/client/src/components/MkSubNoteContent.vue | 4 ++++
 packages/client/src/components/MkUrlPreview.vue     | 5 +++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue
index 4c91a31890..5799bc6fbb 100644
--- a/packages/client/src/components/MkSubNoteContent.vue
+++ b/packages/client/src/components/MkSubNoteContent.vue
@@ -72,6 +72,10 @@ const urls = props.note.text ? extractUrlFromMfm(mfm.parse(props.note.text)) : n
 		}
 	}
 
+	> .mk-url-preview {
+		margin-top: 8px;
+	}
+
 	&.collapsed {
 		position: relative;
 		max-height: 9em;
diff --git a/packages/client/src/components/MkUrlPreview.vue b/packages/client/src/components/MkUrlPreview.vue
index 371e84f01b..6c8f19f581 100644
--- a/packages/client/src/components/MkUrlPreview.vue
+++ b/packages/client/src/components/MkUrlPreview.vue
@@ -214,9 +214,10 @@ onUnmounted(() => {
 		border: 1px solid var(--divider);
 		border-radius: 8px;
 		overflow: hidden;
-
-		&:hover {
+		transition: background .2s;
+		&:hover, &:focus-within {
 			text-decoration: none;
+			background-color: var(--panelHighlight);
 			> article > header > h1 {
 				text-decoration: underline;
 			}

From 2311956dfa6a072d635c287062b942e9d0c5e1c6 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Thu, 23 Feb 2023 22:45:12 -0500
Subject: [PATCH 25/61] Change reply order from oldest to newest

---
 packages/client/src/components/MkNoteDetailed.vue | 2 +-
 packages/client/src/components/MkNoteSub.vue      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index 88e13119fe..302f4bc4f7 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -294,7 +294,7 @@ os.api('notes/children', {
 	depth: 6,
 }).then(res => {
 	replies.value = res;
-	directReplies.value = res.filter(note => note.replyId === appearNote.id || note.renoteId === appearNote.id);
+	directReplies.value = res.filter(note => note.replyId === appearNote.id || note.renoteId === appearNote.id).reverse();
 });
 
 if (appearNote.replyId) {
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index 66c5c4c466..16cbc20c0d 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -59,7 +59,7 @@ const props = withDefaults(defineProps<{
 });
 
 let showContent = $ref(false);
-const replies: misskey.entities.Note[] = props.conversation?.filter(item => item.replyId === props.note.id || item.renoteId === props.note.id) ?? [];
+const replies: misskey.entities.Note[] = props.conversation?.filter(item => item.replyId === props.note.id || item.renoteId === props.note.id).reverse() ?? [];
 </script>
 
 <style lang="scss" scoped>

From b34b6de71f44300158d87bdeebffd7bf6cf4672c Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Fri, 24 Feb 2023 11:55:51 -0500
Subject: [PATCH 26/61] Reduce detailed note spacing on mobile

---
 packages/client/src/components/MkNoteDetailed.vue | 10 +++++++++-
 packages/client/src/components/MkNoteSub.vue      | 13 ++++++++-----
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index 302f4bc4f7..47d489ef64 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -291,7 +291,7 @@ function blur() {
 os.api('notes/children', {
 	noteId: appearNote.id,
 	limit: 30,
-	depth: 6,
+	depth: 12,
 }).then(res => {
 	replies.value = res;
 	directReplies.value = res.filter(note => note.replyId === appearNote.id || note.renoteId === appearNote.id).reverse();
@@ -599,6 +599,10 @@ onUnmounted(() => {
 		font-size: 0.9em;
 	}
 
+	@media (max-width: 500px) {
+		margin-inline: -24px;
+	}
+
 	&.max-width_450px {
 
 		> .reply-to-more:first-child {
@@ -616,6 +620,10 @@ onUnmounted(() => {
 		}
 	}
 
+	@media (max-width: 400px) {
+		margin-inline: -12px;
+	}
+
 	&.max-width_350px {
 		> .article {
 			> .main {
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index 16cbc20c0d..a422cf4408 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -239,12 +239,8 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 	}
 
 	&.max-width_450px {
-		padding: 14px 16px;
-		&.reply {
-			--avatarSize: 28px;
-			--indent: calc(var(--avatarSize) - 8px);
-		}
 		&.reply-to, &.reply-to-more {
+			padding: 14px 16px;
 			padding-top: 14px !important;
 			padding-bottom: 0 !important;
 			margin-bottom: 0 !important;
@@ -253,5 +249,12 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 			margin-right: 10px;
 		}
 	}
+	@media (max-width: 450px) {
+		padding: 14px 16px;
+		&.reply {
+			--avatarSize: 28px;
+			--indent: calc(var(--avatarSize) - 8px);
+		}
+	}
 }
 </style>

From 5eee718750f33317c5dddfe52b6350181f7cb0a9 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Fri, 24 Feb 2023 20:37:36 -0500
Subject: [PATCH 27/61] larger pfp's for first column of replies on mobile

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

diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index a422cf4408..da2443239b 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -1,5 +1,5 @@
 <template>
-<div v-size="{ max: [450] }" class="wrpstxzv" :class="{ children: depth > 1, singleStart: replies.length == 1 }">
+<div v-size="{ max: [450] }" class="wrpstxzv" :class="{ children: depth > 1, singleStart: replies.length == 1, firstColumn: depth == 1 && conversation }">
 	<div v-if="conversation && depth > 1" class="line"></div>
 	<div class="main" @click="router.push(notePage(note))">
 		<div class="avatar-container">
@@ -252,8 +252,17 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 	@media (max-width: 450px) {
 		padding: 14px 16px;
 		&.reply {
-			--avatarSize: 28px;
-			--indent: calc(var(--avatarSize) - 8px);
+			--avatarSize: 24px;
+			--indent: calc(var(--avatarSize) - 4px);
+		}
+		&.firstColumn {
+			> .main, > .line, > .children:not(.single) > .line {
+				--avatarSize: 35px;
+				--indent: 35px;
+			}
+			> .children:not(.single) {
+				padding-left: 28px !important;
+			}
 		}
 	}
 }

From 92b8aed3e200c6af39f8e5d1c80aa0c3a264bcc5 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Fri, 24 Feb 2023 22:33:21 -0500
Subject: [PATCH 28/61] style view thread continuation button + fix link
 underline

---
 packages/client/src/components/MkNoteSub.vue | 24 +++++++++++++++++++-
 packages/client/src/style.scss               |  1 +
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index da2443239b..b346a15a04 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -28,6 +28,7 @@
 			<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply" :conversation="conversation" :depth="depth + 1"/>
 		</template>
 		<div v-else-if="replies.length > 0" class="more">
+			<div class="line"></div>
 			<MkA class="text _link" :to="notePage(note)">{{ i18n.ts.continueThread }} <i class="ph-caret-double-right-bold ph-lg"></i></MkA>
 		</div>
 	</template>
@@ -135,6 +136,11 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 		:deep(.footer) {
 			font-size: .9em;
 		}
+		> .main:hover {
+			:deep(.footer .button) {
+				opacity: 1;
+			}
+		}
 	}
 	> .reply, > .more {
 		margin-top: 10px;
@@ -147,7 +153,23 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 	}
 
 	> .more {
-		padding: 10px 0 0 16px;
+		display: flex;
+		padding-block: 10px;
+		font-weight: 600;
+		> .line {
+			flex-grow: 0 !important;
+			margin-top: -10px !important;
+			margin-bottom: 10px !important;
+			margin-right: 10px !important;
+			&::before {
+				border-left-style: dashed !important;
+				border-bottom-left-radius: 100px !important;
+			}
+		}
+		i {
+			font-size: 1em !important;
+			vertical-align: middle !important;
+		}
 	}
 
 	&.reply-to, &.reply-to-more {
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index ca8bd8b435..ea76118a27 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -479,6 +479,7 @@ hr {
 }
 
 ._link {
+	position: relative;
 	color: var(--link);
 
 	&:after {

From 5c076893c6f000cca958940b1998e91a5c4435ba Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Fri, 24 Feb 2023 22:35:37 -0500
Subject: [PATCH 29/61] increase size when indents decrease

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

diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index b346a15a04..29f550687a 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -271,7 +271,7 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 			margin-right: 10px;
 		}
 	}
-	@media (max-width: 450px) {
+	@media (max-width: 500px) {
 		padding: 14px 16px;
 		&.reply {
 			--avatarSize: 24px;

From 7a2d1e7a07fbee44961bf430c5863708872a729e Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Fri, 24 Feb 2023 22:37:17 -0500
Subject: [PATCH 30/61] fix alignment

---
 packages/client/src/components/MkNoteSub.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index 29f550687a..d065168c96 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -271,8 +271,10 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 			margin-right: 10px;
 		}
 	}
-	@media (max-width: 500px) {
+	@media (max-width: 450px) {
 		padding: 14px 16px;
+	}
+	@media (max-width: 500px) {
 		&.reply {
 			--avatarSize: 24px;
 			--indent: calc(var(--avatarSize) - 4px);

From c81a75cd1f8597ccbe69156894930989288ce7be Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sat, 25 Feb 2023 00:19:39 -0500
Subject: [PATCH 31/61] change reply hover

---
 .../client/src/components/MkNoteDetailed.vue  | 59 +++++++++++++++++--
 1 file changed, 53 insertions(+), 6 deletions(-)

diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index 47d489ef64..7b712145f0 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -581,19 +581,66 @@ onUnmounted(() => {
 	> .reply {
 		border-top: solid 0.5px var(--divider);
 		cursor: pointer;
-
+		&:not(:last-child) {
+			padding-bottom: 4px;
+		}
 		@media (pointer: coarse) {
 			cursor: default;
 		}
 	}
 
-	> .reply, .reply-to, .reply-to-more {
-		transition: background-color 0.25s ease-in-out;
-		
-		&:hover {
-			background-color: var(--panelHighlight);
+	// Hover
+	.reply :deep(.main), .reply-to, .reply-to-more, :deep(.more) {
+		position: relative;
+		&::before {
+			content: "";
+			position: absolute;
+			inset: -12px -24px;
+			bottom: -0px;
+			background: var(--panelHighlight);
+			border-radius: var(--radius);
+			opacity: 0;
+			transition: opacity .2s;
+			z-index: -1;
 		}
+		&.reply-to, &.reply-to-more {
+			&::before {
+				inset: 0px 8px;
+			}
+		}
+		&.reply-to-more:first-of-type::before {
+			top: 12px;
+		}
+		&::after {
+			content: "";
+			position: absolute;
+			inset: -9999px;
+			background: var(--modalBg);
+			opacity: 0;
+			z-index: -2;
+			pointer-events: none;
+			transition: opacity .2s;
+		}
+		&.more::before {
+			inset: 0 !important;
+		}
+		&:hover, &:focus-within {
+			&::before {
+				opacity: 1;
+			}
+		}
+		// @media (pointer: coarse) {
+		// 	&:has(.button:focus-within) {
+		// 		z-index: 2;
+		// 		--X13: transparent;
+		// 		&::after {
+		// 			opacity: 1;
+		// 			backdrop-filter: var(--modalBgFilter);
+		// 		}
+		// 	}
+		// }
 	}
+	
 
 	&.max-width_500px {
 		font-size: 0.9em;

From 0f94a62198af0c6ddbd998be3e1a76438c13288b Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sat, 25 Feb 2023 00:21:37 -0500
Subject: [PATCH 32/61] comment out unneeded bit (maybe for now)

---
 .../client/src/components/MkNoteDetailed.vue  | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index 7b712145f0..082cb33d3c 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -611,16 +611,16 @@ onUnmounted(() => {
 		&.reply-to-more:first-of-type::before {
 			top: 12px;
 		}
-		&::after {
-			content: "";
-			position: absolute;
-			inset: -9999px;
-			background: var(--modalBg);
-			opacity: 0;
-			z-index: -2;
-			pointer-events: none;
-			transition: opacity .2s;
-		}
+		// &::after {
+		// 	content: "";
+		// 	position: absolute;
+		// 	inset: -9999px;
+		// 	background: var(--modalBg);
+		// 	opacity: 0;
+		// 	z-index: -2;
+		// 	pointer-events: none;
+		// 	transition: opacity .2s;
+		// }
 		&.more::before {
 			inset: 0 !important;
 		}

From de97032eab243435b85235485de87438a1521eee Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sat, 25 Feb 2023 00:39:43 -0500
Subject: [PATCH 33/61] add footer hover thingy to subnote too

---
 packages/client/src/components/MkNote.vue       | 10 +++++++---
 packages/client/src/components/MkNoteFooter.vue |  1 +
 packages/client/src/components/MkNoteSub.vue    | 13 ++++++++-----
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 7ebeb6d563..0d0b977d7d 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -312,10 +312,14 @@ function readPromo() {
 		}
 	}
 
-	&:hover > .article > .main > .footer > .button {
-		opacity: 1;
+	& > .article > .main {
+		&:hover, &:focus-within {
+			:deep(.footer .button) {
+				opacity: 1;
+			}
+		}
 	}
-
+	
 	> .reply-to {
 		& + .note-context {
 			.line::before {
diff --git a/packages/client/src/components/MkNoteFooter.vue b/packages/client/src/components/MkNoteFooter.vue
index d8fcffbeae..a5a7eb175a 100644
--- a/packages/client/src/components/MkNoteFooter.vue
+++ b/packages/client/src/components/MkNoteFooter.vue
@@ -135,6 +135,7 @@ function blur() {
 		width: max-content;
 		min-width: max-content;
 		pointer-events: all;
+		transition: opacity .2s;
 		&:first-of-type {
 			margin-left: -.5em;
 		}
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index d065168c96..8b11cbffc2 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -136,11 +136,6 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 		:deep(.footer) {
 			font-size: .9em;
 		}
-		> .main:hover {
-			:deep(.footer .button) {
-				opacity: 1;
-			}
-		}
 	}
 	> .reply, > .more {
 		margin-top: 10px;
@@ -172,6 +167,14 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 		}
 	}
 
+	&.reply, &.reply-to, &.reply-to-more {
+		> .main:hover, > .main:focus-within {
+			:deep(.footer .button) {
+				opacity: 1;
+			}
+		}
+	}
+
 	&.reply-to, &.reply-to-more {
 		padding-bottom: 0;
 		&:first-child {

From 5177fdeef1d8ed2fe35271f5767ab713ee51fd0d Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sat, 25 Feb 2023 01:15:42 -0500
Subject: [PATCH 34/61] allow mfm to overflow w/out it blocking any buttons

---
 packages/client/src/components/MkCwButton.vue     | 2 ++
 packages/client/src/components/MkNote.vue         | 1 -
 packages/client/src/components/MkNoteDetailed.vue | 1 +
 packages/client/src/components/MkNoteFooter.vue   | 2 ++
 packages/client/src/components/MkNoteHeader.vue   | 2 ++
 packages/client/src/components/MkNoteSub.vue      | 1 +
 6 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/MkCwButton.vue b/packages/client/src/components/MkCwButton.vue
index 3baae82b95..902fe6d974 100644
--- a/packages/client/src/components/MkCwButton.vue
+++ b/packages/client/src/components/MkCwButton.vue
@@ -36,6 +36,8 @@ const toggle = () => {
 
 <style lang="scss" scoped>
 .nrvgflfu {
+	position: relative;
+	z-index: 2;
 	display: inline-block;
 	padding: 4px 8px;
 	font-size: 0.8em;
diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 0d0b977d7d..91926db471 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -451,7 +451,6 @@ function readPromo() {
 
 			> .body {
 				margin-top: .7em;
-				overflow: hidden;
 
 				> .cw {
 					cursor: default;
diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index 082cb33d3c..4b5ca111ec 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -430,6 +430,7 @@ onUnmounted(() => {
 	> .article {
 		padding: 32px;
 		font-size: 1.2em;
+		overflow: clip;
 
 		> .header {
 			display: flex;
diff --git a/packages/client/src/components/MkNoteFooter.vue b/packages/client/src/components/MkNoteFooter.vue
index a5a7eb175a..4183225b9a 100644
--- a/packages/client/src/components/MkNoteFooter.vue
+++ b/packages/client/src/components/MkNoteFooter.vue
@@ -122,6 +122,8 @@ function blur() {
 
 <style lang="scss" scoped>
 .footer {
+	position: relative;
+	z-index: 2;
 	display: flex;
 	flex-wrap: wrap;
 	pointer-events: none; // Allow clicking anything w/out pointer-events: all; to open post
diff --git a/packages/client/src/components/MkNoteHeader.vue b/packages/client/src/components/MkNoteHeader.vue
index f1d2d37b0f..0d0b2183d4 100644
--- a/packages/client/src/components/MkNoteHeader.vue
+++ b/packages/client/src/components/MkNoteHeader.vue
@@ -47,6 +47,8 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
 
 <style lang="scss" scoped>
 .kkwtjztg {
+	position: relative;
+	z-index: 2;
 	display: flex;
 	align-items: center;
 	white-space: nowrap;
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index 8b11cbffc2..422c2de12c 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -67,6 +67,7 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 .wrpstxzv {
 	padding: 16px 32px;
 	content-visibility: auto;
+	overflow: clip;
 	&.children {
 		padding: 10px 0 0 var(--indent);
 		padding-left: var(--indent) !important;

From 161594d4bc3c7af665fc00e1f2ccbfb01c463456 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sat, 25 Feb 2023 01:18:21 -0500
Subject: [PATCH 35/61] Fix 'close' button in posts not sticking to bottom

thanmk you overlfow clip
---
 packages/client/src/style.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index ea76118a27..819bbecb5a 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -155,6 +155,10 @@ hr {
 	box-shadow: 0px 4px 32px var(--shadow) !important;
 }
 
+.swiper {
+	overflow: clip !important;
+}
+
 ._button {
 	appearance: none;
 	display: inline-block;

From 0914a7fbd9c49d915d360670342be4b5a70363b0 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sat, 25 Feb 2023 11:10:48 -0500
Subject: [PATCH 36/61] fix line alignment

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

diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index 422c2de12c..d70fee5e2e 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -67,7 +67,6 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 .wrpstxzv {
 	padding: 16px 32px;
 	content-visibility: auto;
-	overflow: clip;
 	&.children {
 		padding: 10px 0 0 var(--indent);
 		padding-left: var(--indent) !important;
@@ -97,6 +96,7 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 			flex: 1;
 			min-width: 0;
 			cursor: pointer;
+			overflow: clip;
 			@media (pointer: coarse) {
 				cursor: default;
 			}

From be15764e2dd65ed88f17374aba7f418c1f1f0e94 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sat, 25 Feb 2023 11:57:16 -0500
Subject: [PATCH 37/61] sort of fix replies count ?

---
 packages/client/src/components/MkNoteFooter.vue | 8 +++++++-
 packages/client/src/components/MkNoteSub.vue    | 2 +-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/MkNoteFooter.vue b/packages/client/src/components/MkNoteFooter.vue
index 4183225b9a..acdb6e73e8 100644
--- a/packages/client/src/components/MkNoteFooter.vue
+++ b/packages/client/src/components/MkNoteFooter.vue
@@ -4,7 +4,12 @@
 		<button v-tooltip.noDelay.bottom="i18n.ts.reply" class="button _button" @click="reply()">
 			<template v-if="appearNote.reply"><i class="ph-arrow-u-up-left-bold ph-lg"></i></template>
 			<template v-else><i class="ph-arrow-bend-up-left-bold ph-lg"></i></template>
-			<p v-if="appearNote.repliesCount > 0" class="count">{{ appearNote.repliesCount }}</p>
+			<template v-if="directReplies > 0">
+				<p class="count">{{ directReplies }}</p>
+			</template>
+			<template v-else-if="appearNote.repliesCount > 0">
+				<p class="count">{{ appearNote.repliesCount }}</p>
+			</template>
 		</button>
 		<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
 		<XStarButton v-if="appearNote.myReaction == null" ref="starButton" class="button" :note="appearNote"/>
@@ -40,6 +45,7 @@ import { useNoteCapture } from '@/scripts/use-note-capture';
 
 const props = defineProps<{
 	note: misskey.entities.Note;
+	directReplies;
 }>();
 
 let note = $ref(deepClone(props.note));
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index d70fee5e2e..bcdf5af7de 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -17,7 +17,7 @@
 					<MkSubNoteContent class="text" :note="note" :detailed="true"/>
 				</div>
 			</div>
-			<MkNoteFooter :note="note"></MkNoteFooter>
+			<MkNoteFooter :note="note" :directReplies="replies.length"></MkNoteFooter>
 		</div>
 	</div>
 	<template v-if="conversation">

From 65de7b89e7fcc232644827078af14544c2b453ae Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sat, 25 Feb 2023 12:15:35 -0500
Subject: [PATCH 38/61] Remove content-visibility oh god that did not work as I
 expected

---
 packages/client/src/components/MkNote.vue    | 1 -
 packages/client/src/components/MkNoteSub.vue | 1 -
 2 files changed, 2 deletions(-)

diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 91926db471..9940e37001 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -280,7 +280,6 @@ function readPromo() {
 	font-size: 1.05em;
 	overflow: clip;
 	contain: content;
-	content-visibility: auto;
 
 	// これらの指定はパフォーマンス向上には有効だが、ノートの高さは一定でないため、
 	// 下の方までスクロールすると上のノートの高さがここで決め打ちされたものに変化し、表示しているノートの位置が変わってしまう
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index bcdf5af7de..44d5b8a602 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -66,7 +66,6 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 <style lang="scss" scoped>
 .wrpstxzv {
 	padding: 16px 32px;
-	content-visibility: auto;
 	&.children {
 		padding: 10px 0 0 var(--indent);
 		padding-left: var(--indent) !important;

From 233408569b858db5df868ed59267255937cfe5ba Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sat, 25 Feb 2023 12:36:57 -0500
Subject: [PATCH 39/61] style fixes

---
 packages/client/src/components/MkNoteDetailed.vue | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index 4b5ca111ec..fabf56d2e4 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -335,7 +335,6 @@ onUnmounted(() => {
 .lxwezrsl {
 	position: relative;
 	transition: box-shadow 0.1s ease;
-	overflow: hidden;
 	contain: content;
 
 	&:focus-visible {
@@ -582,9 +581,7 @@ onUnmounted(() => {
 	> .reply {
 		border-top: solid 0.5px var(--divider);
 		cursor: pointer;
-		&:not(:last-child) {
-			padding-bottom: 4px;
-		}
+		padding-bottom: 4px;
 		@media (pointer: coarse) {
 			cursor: default;
 		}
@@ -608,9 +605,9 @@ onUnmounted(() => {
 			&::before {
 				inset: 0px 8px;
 			}
-		}
-		&.reply-to-more:first-of-type::before {
-			top: 12px;
+			&:first-of-type::before {
+				top: 12px;
+			}
 		}
 		// &::after {
 		// 	content: "";

From 5d391bd1986a9236d192dc7cf344b2a033910af6 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sat, 25 Feb 2023 13:50:24 -0500
Subject: [PATCH 40/61] add some animations to reactions

---
 .../src/components/MkReactionsViewer.reaction.vue | 15 ++++++++++++++-
 packages/client/src/style.scss                    | 15 +++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/MkReactionsViewer.reaction.vue b/packages/client/src/components/MkReactionsViewer.reaction.vue
index 1aee525714..f21fe175a1 100644
--- a/packages/client/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/client/src/components/MkReactionsViewer.reaction.vue
@@ -98,7 +98,20 @@ useTooltip(buttonRef, async (showing) => {
 	padding: 0 6px;
 	border-radius: 4px;
 	pointer-events: all;
-
+	animation: scaleInSmall .3s cubic-bezier(0,0,0,1.2);
+	:deep(.mk-emoji) {
+		animation: scaleIn .4s cubic-bezier(0,0,0,1.5);
+		transition: transform .4s cubic-bezier(0,0,0,6);
+	}
+	&.reacted :deep(.mk-emoji) {
+		transition: transform .4s cubic-bezier(0,0,0,1);
+	}
+	&:active {
+		:deep(.mk-emoji) {
+			transition: transform .4s cubic-bezier(0,0,0,1);
+			transform: scale(.85);
+		}
+	}
 	&.canToggle {
 		background: rgba(0, 0, 0, 0.05);
 
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index 819bbecb5a..ea16f054c6 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -615,3 +615,18 @@ hr {
     transform:  scaleX(1.00) scaleY(1.00) ;
   }
 }
+
+@media(prefers-reduced-motion: no-preference) {
+	@keyframes scaleIn {
+		from {
+			transform: scale(0);
+			opacity: 0;
+		}
+	}
+	@keyframes scaleInSmall {
+		from {
+			transform: scale(.8);
+			opacity: 0;
+		}
+	}
+}

From 1c57ba62424a865b7c6f5d9120136815f96696f7 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sat, 25 Feb 2023 15:36:35 -0500
Subject: [PATCH 41/61] Only animate in if newly added

---
 .../components/MkReactionsViewer.reaction.vue | 26 ++++++-------------
 1 file changed, 8 insertions(+), 18 deletions(-)

diff --git a/packages/client/src/components/MkReactionsViewer.reaction.vue b/packages/client/src/components/MkReactionsViewer.reaction.vue
index f21fe175a1..00f49e1126 100644
--- a/packages/client/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/client/src/components/MkReactionsViewer.reaction.vue
@@ -4,7 +4,7 @@
 	ref="buttonRef"
 	v-ripple="canToggle"
 	class="hkzvhatu _button"
-	:class="{ reacted: note.myReaction == reaction, canToggle }"
+	:class="{ reacted: note.myReaction == reaction, canToggle, newlyAdded: !isInitial }"
 	@click="toggleReaction()"
 >
 	<XReactionIcon class="icon" :reaction="reaction" :custom-emojis="note.emojis"/>
@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, onMounted, onUpdated, ref, watch } from 'vue';
 import * as misskey from 'calckey-js';
 import XDetails from '@/components/MkReactionsViewer.details.vue';
 import XReactionIcon from '@/components/MkReactionIcon.vue';
@@ -55,20 +55,6 @@ const toggleReaction = () => {
 	}
 };
 
-const anime = () => {
-	if (document.hidden) return;
-
-	// TODO: 新しくリアクションが付いたことが視覚的に分かりやすいアニメーション
-};
-
-watch(() => props.count, (newCount, oldCount) => {
-	if (oldCount < newCount) anime();
-});
-
-onMounted(() => {
-	if (!props.isInitial) anime();
-});
-
 useTooltip(buttonRef, async (showing) => {
 	const reactions = await os.apiGet('notes/reactions', {
 		noteId: props.note.id,
@@ -98,9 +84,13 @@ useTooltip(buttonRef, async (showing) => {
 	padding: 0 6px;
 	border-radius: 4px;
 	pointer-events: all;
-	animation: scaleInSmall .3s cubic-bezier(0,0,0,1.2);
+	&.newlyAdded {
+		animation: scaleInSmall .3s cubic-bezier(0,0,0,1.2);
+		:deep(.mk-emoji) {
+			animation: scaleIn .4s cubic-bezier(0,0,0,1.5);
+		}
+	}
 	:deep(.mk-emoji) {
-		animation: scaleIn .4s cubic-bezier(0,0,0,1.5);
 		transition: transform .4s cubic-bezier(0,0,0,6);
 	}
 	&.reacted :deep(.mk-emoji) {

From a538b2ea8415a958a981ccbc6d1694979ea80fd8 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sat, 25 Feb 2023 15:38:36 -0500
Subject: [PATCH 42/61] a

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

diff --git a/packages/client/src/components/MkReactionsViewer.reaction.vue b/packages/client/src/components/MkReactionsViewer.reaction.vue
index 00f49e1126..6b6ebbd9f7 100644
--- a/packages/client/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/client/src/components/MkReactionsViewer.reaction.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUpdated, ref, watch } from 'vue';
+import { computed, ref } from 'vue';
 import * as misskey from 'calckey-js';
 import XDetails from '@/components/MkReactionsViewer.details.vue';
 import XReactionIcon from '@/components/MkReactionIcon.vue';

From 404f7986e101b364aab1fd51cb3ad6d6e20a018c Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sat, 25 Feb 2023 15:51:51 -0500
Subject: [PATCH 43/61] remove unneeded bit

---
 packages/client/src/components/MkNote.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 9940e37001..17d81b37d2 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -164,7 +164,6 @@ const muted = ref(checkWordMute(appearNote, $i, defaultStore.state.mutedWords));
 const translation = ref(null);
 const translating = ref(false);
 const urls = appearNote.text ? extractUrlFromMfm(mfm.parse(appearNote.text)).slice(0, 5) : null;
-const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.user.instance);
 
 const keymap = {
 	'r': () => reply(true),

From 8cb3a25245ba072abc28bb02af96a3228fcc19f4 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sat, 25 Feb 2023 19:48:10 -0500
Subject: [PATCH 44/61] change line height

---
 packages/client/src/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index ea16f054c6..0bab91771f 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -32,7 +32,7 @@ html {
 	overflow-wrap: break-word;
 	font-family: "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif;
 	font-size: 14px;
-	line-height: 1.35;
+	line-height: 1.6;
 	text-size-adjust: 100%;
 	tab-size: 2;
 

From a0720231a897fd24c97ae2733897db1407d966cc Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sat, 25 Feb 2023 19:59:58 -0500
Subject: [PATCH 45/61] padding tweaks

---
 packages/client/src/components/MkNoteDetailed.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index fabf56d2e4..3ecc30709c 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -428,6 +428,10 @@ onUnmounted(() => {
 
 	> .article {
 		padding: 32px;
+		padding-bottom: 6px;
+		&:last-child {
+			padding-bottom: 24px;
+		}
 		font-size: 1.2em;
 		overflow: clip;
 
@@ -581,7 +585,8 @@ onUnmounted(() => {
 	> .reply {
 		border-top: solid 0.5px var(--divider);
 		cursor: pointer;
-		padding-bottom: 4px;
+		padding-top: 24px;
+		padding-bottom: 10px;
 		@media (pointer: coarse) {
 			cursor: default;
 		}

From 1310fa277ef4ec4fc98d94e0c4470de75a0e3a0e Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sat, 25 Feb 2023 20:08:53 -0500
Subject: [PATCH 46/61] increase clip area of subnote body

---
 packages/client/src/components/MkNoteSub.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index 44d5b8a602..f0c5ecb7a1 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -95,6 +95,10 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 			flex: 1;
 			min-width: 0;
 			cursor: pointer;
+			margin: -200px;
+			padding: 200px;
+			margin-bottom: 0;
+			padding-bottom: 0;
 			overflow: clip;
 			@media (pointer: coarse) {
 				cursor: default;

From 4278bd1e546846dc3932f52c4d7e995d6d0661ad Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sat, 25 Feb 2023 20:22:17 -0500
Subject: [PATCH 47/61] =?UTF-8?q?fix=20subnote=20body=20clip=20area?=
 =?UTF-8?q?=E2=84=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/client/src/components/MkNoteSub.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index f0c5ecb7a1..e10b8204e3 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -77,6 +77,7 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 		}
 	}
 
+	
 	> .main {
 		display: flex;
 
@@ -95,10 +96,8 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 			flex: 1;
 			min-width: 0;
 			cursor: pointer;
-			margin: -200px;
-			padding: 200px;
-			margin-bottom: 0;
-			padding-bottom: 0;
+			margin: 0 -200px;
+			padding: 0 200px;
 			overflow: clip;
 			@media (pointer: coarse) {
 				cursor: default;
@@ -131,7 +130,10 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 			}
 		}
 	}
-
+	&:first-child > .main > .body {
+		margin-top: -200px;
+		padding-top: 200px;
+	}
 	&.reply {
 		--avatarSize: 38px;
 		.avatar-container {

From f8d26e3e3d213f69dbfced9b9c280fd80c121e93 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sat, 25 Feb 2023 20:36:00 -0500
Subject: [PATCH 48/61] Tweak reaction animation

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

diff --git a/packages/client/src/components/MkReactionsViewer.reaction.vue b/packages/client/src/components/MkReactionsViewer.reaction.vue
index 6b6ebbd9f7..8c952addcb 100644
--- a/packages/client/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/client/src/components/MkReactionsViewer.reaction.vue
@@ -87,7 +87,7 @@ useTooltip(buttonRef, async (showing) => {
 	&.newlyAdded {
 		animation: scaleInSmall .3s cubic-bezier(0,0,0,1.2);
 		:deep(.mk-emoji) {
-			animation: scaleIn .4s cubic-bezier(0,0,0,1.5);
+			animation: scaleIn .4s cubic-bezier(0.7, 0, 0, 1.5);
 		}
 	}
 	:deep(.mk-emoji) {

From 5c1ca3ac2973d5f320a0da465beb79c4ebfbedb7 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sat, 25 Feb 2023 21:22:23 -0500
Subject: [PATCH 49/61] fix small window sizes

---
 .../client/src/components/MkNoteDetailed.vue  | 12 +-----
 packages/client/src/components/MkNoteSub.vue  | 38 +++++++++----------
 packages/client/src/pages/note.vue            |  8 +++-
 3 files changed, 28 insertions(+), 30 deletions(-)

diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index 3ecc30709c..f6bbdc2158 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -648,13 +648,9 @@ onUnmounted(() => {
 	&.max-width_500px {
 		font-size: 0.9em;
 	}
-
-	@media (max-width: 500px) {
-		margin-inline: -24px;
-	}
-
+	
 	&.max-width_450px {
-
+		
 		> .reply-to-more:first-child {
 			padding-top: 14px;
 		}
@@ -670,10 +666,6 @@ onUnmounted(() => {
 		}
 	}
 
-	@media (max-width: 400px) {
-		margin-inline: -12px;
-	}
-
 	&.max-width_350px {
 		> .article {
 			> .main {
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index e10b8204e3..234348976a 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -1,5 +1,5 @@
 <template>
-<div v-size="{ max: [450] }" class="wrpstxzv" :class="{ children: depth > 1, singleStart: replies.length == 1, firstColumn: depth == 1 && conversation }">
+<div v-size="{ max: [450, 500] }" class="wrpstxzv" :class="{ children: depth > 1, singleStart: replies.length == 1, firstColumn: depth == 1 && conversation }">
 	<div v-if="conversation && depth > 1" class="line"></div>
 	<div class="main" @click="router.push(notePage(note))">
 		<div class="avatar-container">
@@ -269,7 +269,25 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 		}
 	}
 
+	&.max-width_500px {
+		:not(.reply) > & {
+			.reply {
+				--avatarSize: 24px;
+				--indent: calc(var(--avatarSize) - 4px);
+			}
+			&.firstColumn {
+				> .main, > .line, > .children:not(.single) > .line {
+					--avatarSize: 35px;
+					--indent: 35px;
+				}
+				> .children:not(.single) {
+					padding-left: 28px !important;
+				}
+			}
+		}
+	}
 	&.max-width_450px {
+		padding: 14px 16px;
 		&.reply-to, &.reply-to-more {
 			padding: 14px 16px;
 			padding-top: 14px !important;
@@ -280,23 +298,5 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 			margin-right: 10px;
 		}
 	}
-	@media (max-width: 450px) {
-		padding: 14px 16px;
-	}
-	@media (max-width: 500px) {
-		&.reply {
-			--avatarSize: 24px;
-			--indent: calc(var(--avatarSize) - 4px);
-		}
-		&.firstColumn {
-			> .main, > .line, > .children:not(.single) > .line {
-				--avatarSize: 35px;
-				--indent: 35px;
-			}
-			> .children:not(.single) {
-				padding-left: 28px !important;
-			}
-		}
-	}
 }
 </style>
diff --git a/packages/client/src/pages/note.vue b/packages/client/src/pages/note.vue
index f2a7bb78ab..47a79d56a3 100644
--- a/packages/client/src/pages/note.vue
+++ b/packages/client/src/pages/note.vue
@@ -2,7 +2,7 @@
 <MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="800">
-		<div class="fcuexfpr">
+		<div class="fcuexfpr" v-size="{ max: [500, 350] }">
 			<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
 				<div v-if="note" class="note">
 					<div v-if="showNext" class="_gap">
@@ -202,5 +202,11 @@ definePageMetadata(computed(() => note ? {
 			}
 		}
 	}
+	&.max-width_500px > .note {
+		margin-inline: -24px;
+	}
+	&.max-width_350px > .note {
+		margin-inline: -12px;
+	}
 }
 </style>

From 790dcccc6ef78a3bd8c2eec017f524a3376717f1 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sat, 25 Feb 2023 21:49:41 -0500
Subject: [PATCH 50/61] don't know why that was like that oops

---
 packages/client/src/components/global/MkPageHeader.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/global/MkPageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue
index fce2c836c4..1569cddf98 100644
--- a/packages/client/src/components/global/MkPageHeader.vue
+++ b/packages/client/src/components/global/MkPageHeader.vue
@@ -169,10 +169,10 @@ onMounted(() => {
 	});
 
   if (el && el.parentElement) {
-    narrow.value = el.parentElement.offsetWidth < 500;
+    narrow = el.parentElement.offsetWidth < 500;
     ro = new ResizeObserver((entries, observer) => {
       if (el.parentElement && document.body.contains(el)) {
-        narrow.value = el.parentElement.offsetWidth < 500;
+        narrow = el.parentElement.offsetWidth < 500;
       }
     });
     ro.observe(el.parentElement);

From c2dde63813179c29675a5a26ac6d9a777d8c9c83 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sat, 25 Feb 2023 21:51:37 -0500
Subject: [PATCH 51/61] fix indents on this ?

---
 .../src/components/global/MkPageHeader.vue     | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/client/src/components/global/MkPageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue
index 1569cddf98..5eaa5e4fee 100644
--- a/packages/client/src/components/global/MkPageHeader.vue
+++ b/packages/client/src/components/global/MkPageHeader.vue
@@ -168,15 +168,15 @@ onMounted(() => {
 		immediate: true,
 	});
 
-  if (el && el.parentElement) {
-    narrow = el.parentElement.offsetWidth < 500;
-    ro = new ResizeObserver((entries, observer) => {
-      if (el.parentElement && document.body.contains(el)) {
-        narrow = el.parentElement.offsetWidth < 500;
-      }
-    });
-    ro.observe(el.parentElement);
-  }
+	if (el && el.parentElement) {
+		narrow = el.parentElement.offsetWidth < 500;
+		ro = new ResizeObserver((entries, observer) => {
+			if (el.parentElement && document.body.contains(el)) {
+				narrow = el.parentElement.offsetWidth < 500;
+			}
+		});
+		ro.observe(el.parentElement);
+	}
 });
 
 onUnmounted(() => {

From 5e46f0c99c9f6cb769d12a5bf604371e8127d0e7 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sat, 25 Feb 2023 21:53:12 -0500
Subject: [PATCH 52/61] also fix that indent, huh

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index ef22dab20d..11a539409e 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
 		"test": "pnpm run mocha",
 		"format": "gulp format",
 		"clean": "pnpm node ./scripts/clean.js",
-	"clean-all": "pnpm node ./scripts/clean-all.js",
+		"clean-all": "pnpm node ./scripts/clean-all.js",
 		"cleanall": "pnpm run clean-all"
 	},
 	"resolutions": {

From 1763e2083f475a761c2e8a9f9d05e88433533e16 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sun, 26 Feb 2023 11:33:38 -0500
Subject: [PATCH 53/61] Only use regular reply icon

---
 packages/client/src/components/MkNoteFooter.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/client/src/components/MkNoteFooter.vue b/packages/client/src/components/MkNoteFooter.vue
index acdb6e73e8..44feed322d 100644
--- a/packages/client/src/components/MkNoteFooter.vue
+++ b/packages/client/src/components/MkNoteFooter.vue
@@ -2,8 +2,7 @@
 	<footer ref="el" class="footer" @click.stop>
 		<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
 		<button v-tooltip.noDelay.bottom="i18n.ts.reply" class="button _button" @click="reply()">
-			<template v-if="appearNote.reply"><i class="ph-arrow-u-up-left-bold ph-lg"></i></template>
-			<template v-else><i class="ph-arrow-bend-up-left-bold ph-lg"></i></template>
+			<i class="ph-arrow-bend-up-left-bold ph-lg"></i>
 			<template v-if="directReplies > 0">
 				<p class="count">{{ directReplies }}</p>
 			</template>

From f4449cfafd05260c768c34fde1f17fa9d7c66708 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Mon, 27 Feb 2023 09:32:24 -0500
Subject: [PATCH 54/61] Don't think that needed a reverse

---
 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 f6bbdc2158..2caf34488c 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -301,7 +301,7 @@ if (appearNote.replyId) {
 	os.api('notes/conversation', {
 		noteId: appearNote.replyId,
 	}).then(res => {
-		conversation.value = res.reverse();
+		conversation.value = res;
 	});
 }
 

From aaaa58a8db609ccede1b9e15e5efd6de6ecff51d Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Mon, 27 Feb 2023 09:42:11 -0500
Subject: [PATCH 55/61] change continue thread text

---
 locales/en-US.yml                            |  2 +-
 packages/client/src/components/MkNoteSub.vue | 11 +++++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/locales/en-US.yml b/locales/en-US.yml
index 97f5313c80..a8a3e056aa 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -835,7 +835,7 @@ muteThread: "Mute thread"
 unmuteThread: "Unmute thread"
 ffVisibility: "Follows/Followers Visibility"
 ffVisibilityDescription: "Allows you to configure who can see who you follow and who follows you."
-continueThread: "View thread continuation"
+continueThread: "Continue thread"
 deleteAccountConfirm: "This will irreversibly delete your account. Proceed?"
 incorrectPassword: "Incorrect password."
 voteConfirm: "Confirm your vote for \"{choice}\"?"
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index 234348976a..2f7fe86d05 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -171,6 +171,17 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 			font-size: 1em !important;
 			vertical-align: middle !important;
 		}
+		a {
+			position: static;
+			&::before {
+				content: "";
+				position: absolute;
+				inset: 0;
+			}
+			&::after {
+				content: unset;
+			}
+		}
 	}
 
 	&.reply, &.reply-to, &.reply-to-more {

From b7b853f970da5bcc61f622269d1885fbf3a8b317 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Wed, 15 Mar 2023 18:58:35 -0400
Subject: [PATCH 56/61] fix footer icons

---
 packages/client/src/components/MkNoteFooter.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/components/MkNoteFooter.vue b/packages/client/src/components/MkNoteFooter.vue
index 44feed322d..cd0709b793 100644
--- a/packages/client/src/components/MkNoteFooter.vue
+++ b/packages/client/src/components/MkNoteFooter.vue
@@ -2,7 +2,7 @@
 	<footer ref="el" class="footer" @click.stop>
 		<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
 		<button v-tooltip.noDelay.bottom="i18n.ts.reply" class="button _button" @click="reply()">
-			<i class="ph-arrow-bend-up-left-bold ph-lg"></i>
+			<i class="ph-arrow-bend-up-left ph-bold ph-lg"></i>
 			<template v-if="directReplies > 0">
 				<p class="count">{{ directReplies }}</p>
 			</template>
@@ -13,14 +13,14 @@
 		<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
 		<XStarButton v-if="appearNote.myReaction == null" ref="starButton" class="button" :note="appearNote"/>
 		<button v-if="appearNote.myReaction == null" ref="reactButton" v-tooltip.noDelay.bottom="i18n.ts.reaction" class="button _button" @click="react()">
-			<i class="ph-smiley-bold ph-lg"></i>
+			<i class="ph-smiley ph-bold ph-lg"></i>
 		</button>
 		<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
-			<i class="ph-minus-bold ph-lg"></i>
+			<i class="ph-minus ph-bold ph-lg"></i>
 		</button>
 		<XQuoteButton class="button" :note="appearNote"/>
 		<button ref="menuButton" v-tooltip.noDelay.bottom="i18n.ts.more" class="button _button" @click="menu()">
-			<i class="ph-dots-three-outline-bold ph-lg"></i>
+			<i class="ph-dots-three-outline ph-bold ph-lg"></i>
 		</button>
 	</footer>
 </template>

From 4cabd725a0309b428dc3432bf8f3baa2bcb17b6d Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Wed, 15 Mar 2023 19:18:26 -0400
Subject: [PATCH 57/61] fix line in boosted text

---
 packages/client/src/components/MkNote.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index a7c8cdcbce..08075e5314 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -324,9 +324,9 @@ function readPromo() {
 				content: "";
 				display: block;
 				margin-bottom: -10px;
-				width: 2px;
-				background-color: var(--divider);
-				margin-inline: auto;
+				margin-top: 16px;
+				border-left: 2px solid var(--divider);
+				margin-left: calc((var(--avatarSize) / 2) - 1px);
 			}
 		}
 	}

From 4b391424aee0d8752ffb3db5dfb03037939c8f28 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Wed, 15 Mar 2023 19:53:22 -0400
Subject: [PATCH 58/61] fix line alignment in smaller windows

---
 packages/client/src/components/MkNoteSub.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index 14bcf58266..e90c3da14d 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -286,14 +286,14 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 				--avatarSize: 24px;
 				--indent: calc(var(--avatarSize) - 4px);
 			}
-			&.firstColumn {
-				> .main, > .line, > .children:not(.single) > .line {
-					--avatarSize: 35px;
-					--indent: 35px;
-				}
-				> .children:not(.single) {
-					padding-left: 28px !important;
-				}
+		}
+		.firstColumn {
+			> .main, > .line, > .children:not(.single) > .line {
+				--avatarSize: 35px;
+				--indent: 35px;
+			}
+			> .children:not(.single) {
+				padding-left: 28px !important;
 			}
 		}
 	}

From 1be55c9685017c858bf32fe34c449bfc3077d870 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Wed, 15 Mar 2023 20:26:13 -0400
Subject: [PATCH 59/61] *actually* fix the line alignment

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

diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index e90c3da14d..c204cb2f9f 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -287,7 +287,7 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 				--indent: calc(var(--avatarSize) - 4px);
 			}
 		}
-		.firstColumn {
+		&.firstColumn {
 			> .main, > .line, > .children:not(.single) > .line {
 				--avatarSize: 35px;
 				--indent: 35px;

From f79ac3d361102b86cb297ed9e99016f8d160a9a0 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Wed, 15 Mar 2023 21:24:12 -0400
Subject: [PATCH 60/61] Change reply icon (also align the icon in the posting
 form)

---
 packages/client/src/components/MkNoteFooter.vue | 2 +-
 packages/client/src/components/MkPostForm.vue   | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/MkNoteFooter.vue b/packages/client/src/components/MkNoteFooter.vue
index cd0709b793..579cfcb077 100644
--- a/packages/client/src/components/MkNoteFooter.vue
+++ b/packages/client/src/components/MkNoteFooter.vue
@@ -2,7 +2,7 @@
 	<footer ref="el" class="footer" @click.stop>
 		<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
 		<button v-tooltip.noDelay.bottom="i18n.ts.reply" class="button _button" @click="reply()">
-			<i class="ph-arrow-bend-up-left ph-bold ph-lg"></i>
+			<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
 			<template v-if="directReplies > 0">
 				<p class="count">{{ directReplies }}</p>
 			</template>
diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index c7a1e17a79..7ce990b214 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -22,7 +22,7 @@
 				<span v-if="visibility === 'specified'"><i class="ph-envelope-simple-open ph-bold ph-lg"></i></span>
 			</button>
 			<button v-tooltip="i18n.ts.previewNoteText" class="_button preview" :class="{ active: showPreview }" @click="showPreview = !showPreview"><i class="ph-file-code ph-bold ph-lg"></i></button>
-			<button class="submit _buttonGradate" :disabled="!canPost" data-cy-open-post-form-submit @click="post">{{ submitText }}<i :class="reply ? 'ph-arrow-bend-up-left ph-bold ph-lg' : renote ? 'ph-quotes ph-bold ph-lg' : 'ph-paper-plane-tilt ph-bold ph-lg'"></i></button>
+			<button class="submit _buttonGradate" :disabled="!canPost" data-cy-open-post-form-submit @click="post">{{ submitText }}<i :class="reply ? 'ph-arrow-u-up-left ph-bold ph-lg' : renote ? 'ph-quotes ph-bold ph-lg' : 'ph-paper-plane-tilt ph-bold ph-lg'"></i></button>
 		</div>
 	</header>
 	<div class="form" :class="{ fixed }">
@@ -796,6 +796,8 @@ onMounted(() => {
 			}
 
 			> .submit {
+				display: inline-flex;
+				align-items: center;
 				margin: 16px 16px 16px 0;
 				padding: 0 12px;
 				line-height: 34px;

From bca45c5868e28bcf86008f86b35abee9fcb13a73 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Wed, 15 Mar 2023 22:29:48 -0400
Subject: [PATCH 61/61] fix deck view margins

---
 packages/client/src/pages/note.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/pages/note.vue b/packages/client/src/pages/note.vue
index 65fda4699e..1b0380cc20 100644
--- a/packages/client/src/pages/note.vue
+++ b/packages/client/src/pages/note.vue
@@ -202,11 +202,13 @@ definePageMetadata(computed(() => note ? {
 			}
 		}
 	}
-	&.max-width_500px > .note {
-		margin-inline: -24px;
-	}
-	&.max-width_350px > .note {
-		margin-inline: -12px;
+	#calckey_app > :not(.mk-deck) {
+		&.max-width_500px > .note {
+			margin-inline: -24px;
+		}
+		&.max-width_350px > .note {
+			margin-inline: -12px;
+		}
 	}
 }
 </style>