upd: add option to select between note designs

Adds the ability to choose between `Sharkey` or `Misskey`

1 files changed, 12 insertions, 68 deletions

diff --git a/packages/frontend/src/components/MkNoteSub.vue b/packages/frontend/src/components/MkNoteSub.vue
index 822b4de83f..3e33c7aa69 100644
--- a/packages/frontend/src/components/MkNoteSub.vue
+++ b/packages/frontend/src/components/MkNoteSub.vue
@@ -5,12 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div v-if="!muted" ref="el" :class="[$style.root, { [$style.children]: depth > 1 }]">
-	<div v-if="!hideLine" :class="$style.line"></div>
 	<div :class="$style.main">
 		<div v-if="note.channel" :class="$style.colorBar" :style="{ background: note.channel.color }"></div>
 		<MkAvatar :class="$style.avatar" :user="note.user" link preview/>
 		<div :class="$style.body">
-			<MkNoteHeader :class="$style.header" :note="note" :classic="true" :mini="true"/>
+			<MkNoteHeader :class="$style.header" :note="note" :mini="true"/>
 			<div :class="$style.content">
 				<p v-if="note.cw != null" :class="$style.cw">
 					<Mfm v-if="note.cw != ''" style="margin-right: 8px;" :text="note.cw" :author="note.user" :nyaize="'respect'"/>
@@ -107,7 +106,6 @@ import { getNoteMenu } from '@/scripts/get-note-menu.js';
 import { useNoteCapture } from '@/scripts/use-note-capture.js';
 
 const canRenote = computed(() => ['public', 'home'].includes(props.note.visibility) || props.note.userId === $i.id);
-const hideLine = computed(() => { return props.detail ? true : false; });
 
 const props = withDefaults(defineProps<{
 	note: Misskey.entities.Note;
@@ -363,7 +361,7 @@ if (props.detail) {
 
 <style lang="scss" module>
 .root {
-	padding: 28px 32px;
+	padding: 16px 32px;
 	font-size: 0.9em;
 	position: relative;
 
@@ -373,20 +371,12 @@ if (props.detail) {
 	}
 }
 
-.line {
-	position: absolute;
-	height: 100%;
-	left: 60px;
-	// using solid instead of dotted, stylelistic choice
-	border-left: 2.5px solid rgb(174, 174, 174);
-}
-
 .footer {
-	position: relative;
-	z-index: 1;
-	margin-top: 0.4em;
-	width: max-content;
-	min-width: max-content;
+		position: relative;
+		z-index: 1;
+		margin-top: 0.4em;
+		width: max-content;
+		min-width: max-content;
 }
 
 .main {
@@ -406,9 +396,9 @@ if (props.detail) {
 .avatar {
 	flex-shrink: 0;
 	display: block;
-	margin: 0 14px 0 0;
-	width: 58px;
-	height: 58px;
+	margin: 0 8px 0 0;
+	width: 38px;
+	height: 38px;
 	border-radius: var(--radius-sm);
 }
 
@@ -421,11 +411,6 @@ if (props.detail) {
 	overflow: hidden;
 }
 
-.text {
-	margin: 0;
-	padding: 0;
-}
-
 .header {
 	margin-bottom: 2px;
 }
@@ -445,36 +430,6 @@ if (props.detail) {
 	}
 }
 
-.reply, .more {
-	border-left: solid 0.5px var(--divider);
-	margin-top: 10px;
-}
-
-.more {
-	padding: 10px 0 0 16px;
-}
-
-@container (max-width: 580px) {
-	.root {
-		padding: 28px 26px 0;
-	}
-
-	.line {
-		left: 50.5px;
-	}
-
-	.avatar {
-		width: 50px;
-		height: 50px;
-	}
-}
-
-@container (max-width: 500px) {
-	.root {
-		padding: 23px 25px;
-	}
-}
-
 @container (max-width: 400px) {
 	.noteFooterButton {
 		&:not(:last-child) {
@@ -514,9 +469,9 @@ if (props.detail) {
 	padding: 10px 0 0 16px;
 }
 
-@container (max-width: 480px) {
+@container (max-width: 450px) {
 	.root {
-		padding: 22px 24px;
+		padding: 14px 16px;
 
 		&.children {
 			padding: 10px 0 0 8px;
@@ -524,17 +479,6 @@ if (props.detail) {
 	}
 }
 
-@container (max-width: 450px) {
-	.line {
-		left: 46px;
-	}
-
-	.avatar {
-		width: 46px;
-		height: 46px;
-	}
-}
-
 .muted {
 	text-align: center;
 	padding: 8px !important;