From e04562cdc8849cd6bdf74b9bc3a78171afbf2fae Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Tue, 23 May 2023 13:56:29 -0400
Subject: [PATCH 1/4] Fix tabs not transitioning on first click

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

diff --git a/packages/client/src/components/global/MkPageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue
index 1892ec0c0..944c6140a 100644
--- a/packages/client/src/components/global/MkPageHeader.vue
+++ b/packages/client/src/components/global/MkPageHeader.vue
@@ -541,7 +541,7 @@ onUnmounted(() => {
 			opacity: 0.7;
 			overflow: hidden;
 			transition: color 0.2s, opacity 0.2s, width 0.2s, min-width 0.2s;
-			--width: max-content;
+			--width: 38px;
 
 			&:hover {
 				opacity: 1;

From cab146fb9684d543982f5de940fe5ad8bad8373f Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Tue, 23 May 2023 20:30:55 -0400
Subject: [PATCH 2/4] Fix z-index, better clipping in notes

---
 packages/client/src/components/MkMention.vue  | 22 +++++----
 packages/client/src/components/MkNote.vue     | 31 ++++++++++++-
 .../client/src/components/MkNoteDetailed.vue  |  1 +
 packages/client/src/components/MkNoteSub.vue  | 46 +++++++++++++++++--
 .../client/src/components/MkRenoteButton.vue  | 17 +------
 .../client/src/components/MkStarButton.vue    | 11 +----
 .../src/components/MkStarButtonNoEmoji.vue    | 15 +-----
 .../src/components/MkSubNoteContent.vue       |  4 ++
 8 files changed, 93 insertions(+), 54 deletions(-)

diff --git a/packages/client/src/components/MkMention.vue b/packages/client/src/components/MkMention.vue
index 4a336c941..af982fbbc 100644
--- a/packages/client/src/components/MkMention.vue
+++ b/packages/client/src/components/MkMention.vue
@@ -5,7 +5,6 @@
 		class="akbvjaqn"
 		:class="{ isMe }"
 		:to="url"
-		:style="{ background: bgCss }"
 		@click.stop
 	>
 		<img class="icon" :src="`/avatar/@${username}@${host}`" alt="" />
@@ -37,7 +36,6 @@
 <script lang="ts" setup>
 import { toUnicode } from "punycode";
 import {} from "vue";
-import tinycolor from "tinycolor2";
 import { host as localHost } from "@/config";
 import { $i } from "@/account";
 
@@ -58,17 +56,11 @@ const isMe =
 	`@${props.username}@${toUnicode(props.host)}` ===
 		`@${$i.username}@${toUnicode(localHost)}`.toLowerCase();
 
-const bg = tinycolor(
-	getComputedStyle(document.documentElement).getPropertyValue(
-		isMe ? "--mentionMe" : "--mention"
-	)
-);
-bg.setAlpha(0.1);
-const bgCss = bg.toRgbString();
 </script>
 
 <style lang="scss" scoped>
 .akbvjaqn {
+	position: relative;
 	display: inline-block;
 	padding: 2px 8px 2px 2px;
 	margin-block: 2px;
@@ -78,8 +70,18 @@ const bgCss = bg.toRgbString();
 	text-overflow: ellipsis;
 	color: var(--mention);
 
+	&::before {
+		content: "";
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		background: var(--mention);
+		opacity: 0.1;
+		z-index: -1;
+	}
+
 	&.isMe {
-		color: var(--mentionMe);
+		--mention: var(--mentionMe);
 	}
 
 	> .icon {
diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index c4c06aa8d..223860683 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -575,6 +575,8 @@ defineExpose({
 	}
 
 	.note-context {
+		position: relative;
+		z-index: 2;
 		padding: 0 32px 0 32px;
 		display: flex;
 		&:first-child {
@@ -587,6 +589,8 @@ defineExpose({
 			line-height: 28px;
 		}
 		> .line {
+			position: relative;
+			z-index: 2;
 			width: var(--avatarSize);
 			display: flex;
 			margin-right: 14px;
@@ -655,9 +659,15 @@ defineExpose({
 	}
 
 	> .article {
+		overflow: hidden;
 		padding: 4px 32px 10px;
 		cursor: pointer;
 
+		&:first-child, &:nth-child(2) {
+			margin-top: -100px;
+			padding-top: 104px;
+		}
+
 		@media (pointer: coarse) {
 			cursor: default;
 		}
@@ -721,7 +731,8 @@ defineExpose({
 				flex-wrap: wrap;
 				pointer-events: none; // Allow clicking anything w/out pointer-events: all; to open post
 				margin-top: 0.4em;
-				> .button {
+				> :deep(.button) {
+					position: relative;
 					margin: 0;
 					padding: 8px;
 					opacity: 0.7;
@@ -730,9 +741,27 @@ defineExpose({
 					width: max-content;
 					min-width: max-content;
 					pointer-events: all;
+					height: auto;
 					transition: opacity 0.2s;
+					&::before {
+						content: "";
+						position: absolute;
+						inset: 0;
+						bottom: 2px;
+						background: var(--panel);
+						z-index: -1;
+						transition: background .2s;
+					}
 					&:first-of-type {
 						margin-left: -0.5em;
+						&::before {
+							border-radius: 100px 0 0 100px;
+						}
+					}
+					&:last-of-type {
+						&::before {
+							border-radius: 0 100px 100px 0;
+						}
 					}
 					&:hover {
 						color: var(--fgHighlighted);
diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index e716f7860..84ec092a5 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -595,6 +595,7 @@ onUnmounted(() => {
 		}
 		&:hover,
 		&:focus-within {
+			--panel: var(--panelHighlight);
 			&::before {
 				opacity: 1;
 			}
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index d0aae4168..90fa205af 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -395,7 +395,8 @@ function noteClick(e) {
 				flex-wrap: wrap;
 				pointer-events: none; // Allow clicking anything w/out pointer-events: all; to open post
 
-				> .button {
+				> :deep(.button) {
+					position: relative;
 					margin: 0;
 					padding: 8px;
 					opacity: 0.7;
@@ -404,9 +405,27 @@ function noteClick(e) {
 					width: max-content;
 					min-width: max-content;
 					pointer-events: all;
+					height: auto;
 					transition: opacity 0.2s;
+					&::before {
+						content: "";
+						position: absolute;
+						inset: 0;
+						bottom: 2px;
+						background: var(--panel);
+						z-index: -1;
+						transition: background .2s;
+					}
 					&:first-of-type {
 						margin-left: -0.5em;
+						&::before {
+							border-radius: 100px 0 0 100px;
+						}
+					}
+					&:last-of-type {
+						&::before {
+							border-radius: 0 100px 100px 0;
+						}
 					}
 					&:hover {
 						color: var(--fgHighlighted);
@@ -425,9 +444,24 @@ function noteClick(e) {
 			}
 		}
 	}
-	&:first-child > .main > .body {
-		margin-top: -200px;
-		padding-top: 200px;
+
+	&.reply > .main {
+		margin-inline: -200px;
+		padding-inline: 200px;
+		&::before {
+			inset-inline: 176px !important;
+		}
+	}
+	&.reply, &.reply-to {
+		> .main > .body {
+			margin-right: -24px;
+			padding-right: 24px;
+			margin-top: -12px;
+			padding-top: 12px;
+			margin-left: calc(0px - var(--avatarSize) - 32px);
+			padding-left: calc(var(--avatarSize) + 32px);
+			border-radius: var(--radius);
+		}
 	}
 	&.reply {
 		--avatarSize: 38px;
@@ -451,6 +485,8 @@ function noteClick(e) {
 		padding-block: 10px;
 		font-weight: 600;
 		> .line {
+			position: relative;
+			z-index: 2;
 			flex-grow: 0 !important;
 			margin-top: -10px !important;
 			margin-bottom: 10px !important;
@@ -520,6 +556,7 @@ function noteClick(e) {
 		}
 		.line {
 			position: relative;
+			z-index: 2;
 			width: var(--avatarSize);
 			display: flex;
 			flex-grow: 1;
@@ -562,6 +599,7 @@ function noteClick(e) {
 		position: relative;
 		> .line {
 			position: absolute;
+			z-index: 2;
 			left: 0;
 			top: 0;
 			&::after {
diff --git a/packages/client/src/components/MkRenoteButton.vue b/packages/client/src/components/MkRenoteButton.vue
index e21611b81..d1999ade7 100644
--- a/packages/client/src/components/MkRenoteButton.vue
+++ b/packages/client/src/components/MkRenoteButton.vue
@@ -3,7 +3,7 @@
 		v-if="canRenote"
 		ref="buttonRef"
 		v-tooltip.noDelay.bottom="i18n.ts.renote"
-		class="eddddedb _button canRenote"
+		class="button _button canRenote"
 		@click="renote(false, $event)"
 	>
 		<i class="ph-repeat ph-bold ph-lg"></i>
@@ -248,25 +248,12 @@ const renote = async (viaKeyboard = false, ev?: MouseEvent) => {
 </script>
 
 <style lang="scss" scoped>
-.eddddedb {
-	display: inline-block;
-	height: 32px;
-	margin: 2px;
-	padding: 0 6px;
-	border-radius: 4px;
-
+.button {
 	&:not(.canRenote) {
 		cursor: default;
 	}
-
 	&.renoted {
 		background: var(--accent);
 	}
-
-	> .count {
-		display: inline;
-		margin-left: 8px;
-		opacity: 0.7;
-	}
 }
 </style>
diff --git a/packages/client/src/components/MkStarButton.vue b/packages/client/src/components/MkStarButton.vue
index a8bf79c40..ecfbf2e73 100644
--- a/packages/client/src/components/MkStarButton.vue
+++ b/packages/client/src/components/MkStarButton.vue
@@ -1,7 +1,7 @@
 <template>
 	<button
 		v-tooltip.noDelay.bottom="i18n.ts._gallery.like"
-		class="skdfgljsdkf _button"
+		class="button _button"
 		@click="star($event)"
 	>
 		<svg
@@ -70,12 +70,3 @@ function star(ev?: MouseEvent): void {
 	}
 }
 </script>
-
-<style lang="scss" scoped>
-.skdfgljsdkf {
-	display: inline-block;
-	height: 32px;
-	margin: 2px;
-	padding: 0 6px;
-}
-</style>
diff --git a/packages/client/src/components/MkStarButtonNoEmoji.vue b/packages/client/src/components/MkStarButtonNoEmoji.vue
index 3ca0b9261..e67599ac2 100644
--- a/packages/client/src/components/MkStarButtonNoEmoji.vue
+++ b/packages/client/src/components/MkStarButtonNoEmoji.vue
@@ -1,7 +1,7 @@
 <template>
 	<button
 		v-tooltip.noDelay.bottom="i18n.ts._gallery.like"
-		class="_button"
+		class="button _button"
 		:class="$style.root"
 		ref="buttonRef"
 		@click="toggleStar($event)"
@@ -110,13 +110,6 @@ useTooltip(buttonRef, async (showing) => {
 </script>
 
 <style lang="scss" module>
-.root {
-	display: inline-block;
-	height: 32px;
-	margin: 2px;
-	padding: 0 6px;
-}
-
 .yellow {
 	color: var(--warn);
 }
@@ -124,10 +117,4 @@ useTooltip(buttonRef, async (showing) => {
 .red {
 	color: var(--error);
 }
-
-.count {
-	display: inline;
-	margin: 0 0 0 8px;
-	opacity: 0.7;
-}
 </style>
diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue
index e99a5aaf6..fcfbc64ab 100644
--- a/packages/client/src/components/MkSubNoteContent.vue
+++ b/packages/client/src/components/MkSubNoteContent.vue
@@ -243,6 +243,10 @@ function focusFooter(ev) {
 </script>
 
 <style lang="scss" scoped>
+:deep(a) {
+	position: relative;
+	z-index: 2;
+}
 .reply-icon {
 	display: inline-block;
 	border-radius: 6px;

From 6e1d5f366d87875f43ab02f7a68d4350855f483e Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Tue, 23 May 2023 20:49:56 -0400
Subject: [PATCH 3/4] fix

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

diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 223860683..5b5e16fa4 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -807,6 +807,9 @@ defineExpose({
 		}
 		> .article {
 			padding: 4px 16px 8px;
+			&:first-child, &:nth-child(2) {
+				padding-top: 104px;
+			}
 			> .main > .header-container > .avatar {
 				margin-right: 10px;
 				// top: calc(14px + var(--stickyTop, 0px));
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index 90fa205af..987e8baf2 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -673,6 +673,10 @@ function noteClick(e) {
 		> .main > .avatar-container {
 			margin-right: 10px;
 		}
+		&:first-child > .main > .body {
+			margin-top: -20px;
+			padding-top: 22px;
+		}
 	}
 }
 

From e135f1583283d4f4003fc5325dc405b92305af92 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Tue, 23 May 2023 20:54:28 -0400
Subject: [PATCH 4/4] hide scrollbar in header

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

diff --git a/packages/client/src/components/global/MkPageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue
index 944c6140a..1fc08780a 100644
--- a/packages/client/src/components/global/MkPageHeader.vue
+++ b/packages/client/src/components/global/MkPageHeader.vue
@@ -518,6 +518,9 @@ onUnmounted(() => {
 			transparent
 		);
 		scrollbar-width: none;
+		&::-webkit-scrollbar {
+			display: none;
+		}
 
 		&.collapse {
 			--width: 38px;