Merge pull request 'Change detailed note tabs design' (#10164) from Freeplay/calckey:notes into develop

Reviewed-on: https://codeberg.org/calckey/calckey/pulls/10164

packages/client/src/components/MkNoteDetailed.vue

@@ -33,7 +33,7 @@
 			detailedView
 		></MkNote>
 
-		<MkTab v-model="tab" :style="'chips'" @update:modelValue="loadTab">
+		<MkTab v-model="tab" :style="'underline'" @update:modelValue="loadTab">
 			<option value="replies">
 				<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
 				<template v-if="appearNote.repliesCount > 0">

packages/client/src/components/MkTab.vue

@@ -16,7 +16,10 @@ export default defineComponent({
 		return h(
 			"div",
 			{
-				class: ["pxhvhrfw", { chips: this.style === "chips" }],
+				class: ["pxhvhrfw", 
+					{ chips: this.style === "chips" },
+					{ underline: this.style === "underline" }
+				],
 				role: "tablist",
 			},
 			options.map((option) =>
@@ -85,7 +88,7 @@ export default defineComponent({
 		}
 	}
 
-	&.chips {
+	&.chips, &.underline {
 		padding: 12px 32px;
 		font-size: 0.85em;
 		overflow-x: auto;
@@ -118,6 +121,22 @@ export default defineComponent({
 		}
 	}
 
+	&.underline {
+		padding-block: 0 !important;
+		margin-bottom: -1px;
+		button {
+			background: none !important;
+			border-radius: 0 !important;
+			padding-block: 10px !important;
+			border-bottom: 2px solid transparent;
+			&[aria-selected="true"] {
+				background: none !important;
+				font-weight: 700;
+				border-bottom-color: var(--accent);
+			}
+		}
+	}
+
 	&.max-width_500px {
 		font-size: 80%;