Merge pull request 'note-improvements but this time fix boosted avatars' (#9535) from Freeplay/calckey:note-improvements into develop

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

packages/client/src/components/MkInstanceTicker.vue

@@ -31,7 +31,7 @@ const computedStyle = getComputedStyle(document.documentElement);
 const themeColor = instance.themeColor ?? computedStyle.getPropertyValue('--bg');
 
 const bg = {
-	background: `linear-gradient(90deg, ${themeColor}, ${themeColor}33)`,
+	background: `linear-gradient(90deg, ${themeColor}, ${themeColor}55)`,
 };
 
 function getInstanceIcon(instance): string {
@@ -41,11 +41,15 @@ function getInstanceIcon(instance): string {
 
 <style lang="scss" scoped>
 .hpaizdrt {
+	display: flex;
+	align-items: center;
+	height: 1.1em;
 	display: flex;
 	align-items: center;
 	height: 1.1em;
 	justify-self: flex-end;
 	padding: .2em .4em;
+	padding: .2em .4em;
 	border-radius: 100px;
 	font-size: .8em;
 	text-shadow: 0 2px 2px var(--shadow);
@@ -54,6 +58,10 @@ function getInstanceIcon(instance): string {
 		width: max-content;
 		max-width: 100%;
 	}
+	.header > .body & {
+		width: max-content;
+		max-width: 100%;
+	}
 
 	> .icon {
 		height: 100%;
@@ -61,17 +69,24 @@ function getInstanceIcon(instance): string {
 	}
 
 	> .name {
+		display: none;
 		display: none;
 		margin-left: 4px;
 		font-size: 0.85em;
+		font-size: 0.85em;
 		vertical-align: top;
 		font-weight: bold;
 		text-overflow: ellipsis;
 		white-space: nowrap;
+		text-overflow: ellipsis;
+		white-space: nowrap;
 		text-shadow: -1px -1px 0 var(--bg), 1px -1px 0 var(--bg), -1px 1px 0 var(--bg), 1px 1px 0 var(--bg);
 		.article > .main &, .header > .body & {
 			display: unset;
 		}
+		.article > .main &, .header > .body & {
+			display: unset;
+		}
 	}
 }
 </style>

packages/client/src/components/MkMediaList.vue

@@ -143,6 +143,8 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
 		position: relative;
 		width: 100%;
 		margin-top: 4px;
+		border-radius: var(--radius);
+		overflow: hidden;
 
 		&:before {
 			content: '';

packages/client/src/components/MkNote.vue

@@ -10,11 +10,12 @@
 	:class="{ renote: isRenote }"
 >
 	<MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" class="reply-to"/>
-	<div v-if="pinned" class="info"><i class="ph-push-pin-bold ph-lg"></i> {{ i18n.ts.pinnedNote }}</div>
+	<div class="note-context">
+		<div class="line"></div>
 		<div v-if="appearNote._prId_" class="info"><i class="ph-megaphone-simple-bold ph-lg"></i> {{ i18n.ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ i18n.ts.hideThisNote }} <i class="ph-x-bold ph-lg"></i></button></div>
 		<div v-if="appearNote._featuredId_" class="info"><i class="ph-lightning-bold ph-lg"></i> {{ i18n.ts.featured }}</div>
+		<div v-if="pinned" class="info"><i class="ph-push-pin-bold ph-lg"></i>{{ i18n.ts.pinnedNote }}</div>
 		<div v-if="isRenote" class="renote">
-		<!-- <MkAvatar class="avatar" :user="note.user"/> -->
 			<i class="ph-repeat-bold ph-lg"></i>
 			<I18n :src="i18n.ts.renotedBy" tag="span">
 				<template #user>
@@ -31,11 +32,13 @@
 				<MkVisibility :note="note"/>
 			</div>
 		</div>
+	</div>
 	<article class="article" @contextmenu.stop="onContextmenu" @click.self="router.push(notePage(appearNote))">
-		<MkAvatar class="avatar" :user="appearNote.user"/>
 		<div class="main" @click.self="router.push(notePage(appearNote))">
+			<div class="header-container">
+				<MkAvatar class="avatar" :user="appearNote.user"/>
 				<XNoteHeader class="header" :note="appearNote" :mini="true"/>
-			<MkInstanceTicker v-if="showTicker" class="ticker" :instance="appearNote.user.instance"/>
+			</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"/>
@@ -43,7 +46,6 @@
 				</p>
 				<div v-show="appearNote.cw == null || showContent" class="content" :class="{ collapsed, isLong }">
 					<div class="text" @click.self="router.push(notePage(appearNote))">
-						<MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="ph-arrow-bend-up-left-bold ph-lg"></i></MkA>
 						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
 						<!-- <a v-if="appearNote.renote != null" class="rp">RN:</a> -->
 						<div v-if="translating || translation" class="translation">
@@ -344,11 +346,47 @@ function readPromo() {
 		opacity: 1;
 	}
 
+	> .reply-to {
+		& + .note-context {
+			.line::before {
+				content: "";
+				display: block;
+				margin-bottom: -10px;
+				width: 2px;
+				background-color: var(--accentDarken);
+				margin-inline: auto;
+			}
+		}
+	}
+
+	.note-context {
+		padding: 0 32px 0 32px;
+		display: flex;
+		&:first-child {
+			margin-top: 20px;
+		}
+		> :not(.line) {
+			width: 0;
+			flex-grow: 1;
+			position: relative;
+			margin-bottom: -10px;
+			line-height: 28px;
+		}
+		> .line {
+			width: var(--avatarSize);
+			display: flex;
+			margin-right: 14px;
+			margin-top: 0;
+			flex-grow: 0;
+		}
+		
+		> div > i {
+			position: absolute;
+			right: 100%;
+		}
 		> .info {
 			display: flex;
 			align-items: center;
-		padding: 16px 32px 8px 32px;
-		line-height: 24px;
 			font-size: 90%;
 			white-space: pre;
 			color: #f6c177;
@@ -363,31 +401,13 @@ function readPromo() {
 			}
 		}
 
-	> .info + .article {
-		padding-top: 8px;
-	}
-
-	> .reply-to {
-		opacity: 0.7;
-		padding-bottom: 0;
-	}
 
 		> .renote {
 			display: flex;
 			align-items: center;
-		padding: 16px 32px 8px 32px;
-		line-height: 28px;
 			white-space: pre;
 			color: var(--renote);
 
-		> .avatar {
-			flex-shrink: 0;
-			display: inline-block;
-			width: 28px;
-			height: 28px;
-			margin: 0 8px 0 0;
-			border-radius: 6px;
-		}
 			
 			> i {
 				margin-right: 4px;
@@ -407,11 +427,13 @@ function readPromo() {
 			> .info {
 				margin-left: auto;
 				font-size: 0.9em;
+				display: flex;
 
 				> .time {
 					flex-shrink: 0;
 					color: inherit;
-
+					display: inline-flex;
+					align-items: center;
 					> .dropdownIcon {
 						margin-right: 4px;
 					}
@@ -419,71 +441,44 @@ function readPromo() {
 			}
 		}
 
-	> .renote + .article {
+		& + .article {
-		padding-top: 8px;
+			padding-top: 10px !important;
+		}
+
 	}
 
 	> .article {
-		padding: 28px 32px 18px;
+		padding: 28px 32px 16px;
 		cursor: pointer;
-		display: grid;
-		align-items: center;
-		grid-template-columns: 58px;
 
 		@media (pointer: coarse) {
 			cursor: default;
 		}
 
+		.header-container {
+			display: flex;
 			> .avatar {
 				flex-shrink: 0;
 				display: block;
-			margin: 0 14px 8px 0;
+				margin: 0 14px 0 0;
-			grid-row: 1 / span 2;
+				width: var(--avatarSize);
-			width: 48px;
+				height: var(--avatarSize);
-			height: 48px;
 				position: relative;
 				top: 0;
 				left: 0;
 			}
-
+			> .header {
+				width: 0;
+				flex-grow: 1;
+			}
+		}
 		> .main {
 			flex: 1;
 			min-width: 0;
-			display: contents;
-
-			> header.header {
-				display: contents;
-			
-				> .name, .info {
-					grid-row: 1;
-				}
-			}
-
-			> :not(.ticker) {
-				grid-column: 1 / span 3;
-				width: 100%;
-				max-width: 100%;
-			}
-
-			> .name, .info {
-				grid-row: 1;
-			}
-
-			> .ticker {
-				grid-row: 2;
-				align-self: flex-start;
-				margin-left: auto;
-			}
-
-			> .ticker {
-				font-size: 0.9em;
-			}
 
 			> .body {
-				margin-top: .2em;
+				margin-top: .7em;
 				overflow: hidden;
-				margin-inline: -100px;
-				padding-inline: 100px;
 
 				> .cw {
 					cursor: default;
@@ -520,7 +515,11 @@ function readPromo() {
 						position: relative;
 						max-height: 9em;
 						overflow: hidden;
-
+						> .text {
+							max-height: 9em;
+							mask: linear-gradient(black calc(100% - 64px), transparent);
+							-webkit-mask: linear-gradient(black calc(100% - 64px), transparent);
+						}
 						> .fade {
 							display: block;
 							position: absolute;
@@ -528,7 +527,6 @@ function readPromo() {
 							left: 0;
 							width: 100%;
 							height: 64px;
-							background: linear-gradient(0deg, var(--panel), var(--X15));
 
 							> span {
 								display: inline-block;
@@ -569,6 +567,10 @@ function readPromo() {
 						}
 					}
 
+					> .files {
+						margin-top: .4em;
+						margin-bottom: .4em;
+					}
 					> .url-preview {
 						margin-top: 8px;
 					}
@@ -595,15 +597,18 @@ function readPromo() {
 			}
 
 			> .footer {
+				display: flex;
+				flex-wrap: wrap;
 				> .button {
 					margin: 0;
 					padding: 8px;
 					opacity: 0.7;
-
+					flex-grow: 1;
-					&:not(:last-child) {
+					max-width: 3.5em;
-						margin-right: 16px;
+					min-width: max-content;
+					&:first-of-type {
+						margin-left: -.5em;
 					}
-
 					&:hover {
 						color: var(--fgHighlighted);
 					}
@@ -628,67 +633,31 @@ function readPromo() {
 
 	&.max-width_500px {
 		font-size: 0.9em;
-
-		> .article {
-			> .avatar {
-				width: 50px;
-				height: 50px;
-			}
-		}
 	}
 
 	&.max-width_450px {
-		> .renote {
+		--avatarSize: 46px;
-			padding: 8px 16px 0 16px;
+		> .note-context {
+			padding-inline: 16px;
+			margin-top: 0;
+			> :not(.line) {
+				margin-top: 10px;
 			}
-
-		> .info {
-			padding: 8px 16px 0 16px;
 		}
-
 		> .article {
-			padding: 14px 16px 9px;
+			padding: 16px 16px 9px;
 
-			> .avatar {
+			> .main > .header-container > .avatar {
-				margin: 0 10px 8px 0;
+				margin-right: 10px;
-				width: 46px;
-				height: 46px;
 				// top: calc(14px + var(--stickyTop, 0px));
 			}
 		}
 	}
 
-	&.max-width_350px {
+
-		> .article {
-			> .main {
-				> .footer {
-					> .button {
-						&:not(:last-child) {
-							margin-right: 18px;
-						}
-					}
-				}
-			}
-		}
-	}
 
 	&.max-width_300px {
-		> .article {
+		--avatarSize: 40px;
-			> .avatar {
-				width: 44px;
-				height: 44px;
-			}
-
-			> .main {
-				> .footer {
-					> .button {
-						&:not(:last-child) {
-							margin-right: 12px;
-						}
-					}
-				}
-			}
-		}
 	}
 }
 

packages/client/src/components/MkNoteDetailed.vue

@@ -54,9 +54,7 @@
 				</p>
 				<div v-show="appearNote.cw == null || showContent" class="content">
 					<div class="text" @click.self="router.push(notePage(appearNote))">
-						<MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="ph-arrow-bend-up-left-bold ph-lg"></i></MkA>
 						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
-						<!-- <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">
@@ -338,14 +336,12 @@ if (appearNote.replyId) {
 	&:hover > .article > .main > .footer > .button {
 		opacity: 1;
 	}
-
 	> .reply-to {
-		opacity: 0.7;
+		margin-bottom: -16px;
-		padding-bottom: 0;
 	}
 
 	> .reply-to-more {
-		opacity: 0.7;
+		// opacity: 0.7;
 		cursor: pointer;
 
 		@media (pointer: coarse) {
@@ -416,21 +412,26 @@ if (appearNote.replyId) {
 			> .avatar {
 				display: block;
 				flex-shrink: 0;
-				width: 52px;
+				width: var(--avatarSize);
-				height: 52px;
+				height: var(--avatarSize);
 			}
 
 			> .body {
+				width: 0;
 				flex: 1;
 				display: flex;
 				flex-direction: column;
 				justify-content: center;
-				padding-left: 16px;
+				padding-left: 14px;
 				font-size: 0.95em;
 
 				> .top {
+					display: flex;
+					align-items: center;
 					> .name {
 						font-weight: bold;
+						overflow: hidden;
+						text-overflow: ellipsis;
 					}
 
 					> .is-bot {
@@ -568,18 +569,18 @@ if (appearNote.replyId) {
 	}
 
 	&.max-width_450px {
+
+		> .reply-to-more:first-child {
+			padding-top: 14px;
+		}
 		> .renote {
 			padding: 8px 16px 0 16px;
 		}
 
 		> .article {
 			padding: 16px;
-
+			> .header > .body {
-			> .header {
+				padding-left: 10px;
-				> .avatar {
-					width: 50px;
-					height: 50px;
-				}
 			}
 		}
 	}
@@ -602,12 +603,6 @@ if (appearNote.replyId) {
 		font-size: 0.825em;
 
 		> .article {
-			> .header {
-				> .avatar {
-					width: 50px;
-					height: 50px;
-				}
-			}
 
 			> .main {
 				> .footer {

packages/client/src/components/MkNoteHeader.vue

@@ -1,56 +1,105 @@
 <template>
 <header class="kkwtjztg">
+	<div class="user-info">
+		<div>
 			<MkA v-user-preview="note.user.id" class="name" :to="userPage(note.user)">
 				<MkUserName :user="note.user" class="mkusername">
 					<span v-if="note.user.isBot" class="is-bot">bot</span>
 				</MkUserName>
 			</MkA>
 			<div class="username"><MkAcct :user="note.user"/></div>
+		</div>
+		<div>
 			<div class="info">
 				<MkA class="created-at" :to="notePage(note)">
 					<MkTime :time="note.createdAt"/>
 				</MkA>
 				<MkVisibility :note="note"/>
 			</div>
+			<MkInstanceTicker v-if="showTicker" class="ticker" :instance="note.user.instance"/>
+		</div>
+	</div>
 </header>
 </template>
 
 <script lang="ts" setup>
 import { } from 'vue';
 import type * as misskey from 'calckey-js';
+import { defaultStore, noteViewInterruptors } from '@/store';
 import MkVisibility from '@/components/MkVisibility.vue';
+import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
 import { notePage } from '@/filters/note';
 import { userPage } from '@/filters/user';
+import { deepClone } from '@/scripts/clone';
 
-defineProps<{
+const props = defineProps<{
 	note: misskey.entities.Note;
 	pinned?: boolean;
 }>();
+
+let note = $ref(deepClone(props.note));
+
+const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && note.user.instance);
+
+
+
 </script>
 
 <style lang="scss" scoped>
 .kkwtjztg {
 	display: flex;
-	align-items: baseline;
+	align-items: center;
 	white-space: nowrap;
 	justify-self: flex-end;
-	padding: .1em .7em;
 	border-radius: 100px;
 	font-size: .8em;
 	text-shadow: 0 2px 2px var(--shadow);
 
-	> .name {
+	> .avatar {
-		flex-shrink: 1;
+		width: 3.7em;
-		display: block;
+		height: 3.7em;
+		margin-right: 1em;
+	}
+	> .user-info {
+		width: 0;
+		flex-grow: 1;
+		line-height: 1.5;
+		display: flex;
+		font-size: 1.2em;
+		> div {
+			&:first-child {
+				flex-grow: 1;
+				width: 0;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+			&:last-child {
+				max-width: 50%;
+				gap: .2em .5em;
+			}
+			.article > .main & {
+				display: flex;
+				flex-direction: column;
+				align-items: flex-start;
+				&:last-child {
+					align-items: flex-end;
+				}
+				> * {
+					max-width: 100%;
+				}
+			}
+		}
+		.name {
+			// flex: 1 1 0px;
+			display: inline;
 			margin: 0 .5em 0 0;
 			padding: 0;
 			overflow: hidden;
-		font-size: 1.2em;
 			font-weight: bold;
 			text-decoration: none;
 			text-overflow: ellipsis;
 
-		>.mkusername >.is-bot {
+			.mkusername >.is-bot {
 				flex-shrink: 0;
 				align-self: center;
 				margin: 0 .5em 0 0;
@@ -65,19 +114,35 @@ defineProps<{
 			}
 		}
 
-	> .username {
+		.username {
-		flex-shrink: 9999999;
+			display: inline;
 			margin: 0 .5em 0 0;
 			overflow: hidden;
 			text-overflow: ellipsis;
-		grid-row: 2;
 			align-self: flex-start;
+			font-size: .9em;
 		}
 
-	> .info {
+		.info {
+			display: inline-flex;
 			flex-shrink: 0;
-		margin-left: auto;
+			margin-left: .5em;
 			font-size: 0.9em;
+			.created-at {
+				max-width: 100%;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+		}
+
+		.ticker {
+			display: inline-flex;
+			margin-left: .5em;
+			vertical-align: middle;
+			> .name {
+				display: none;
+			}
+		}
 	}
 }
 </style>

packages/client/src/components/MkNoteSimple.vue

@@ -1,6 +1,6 @@
 <template>
 <div v-size="{ min: [350, 500] }" class="yohlumlk">
-	<!-- <MkAvatar class="avatar" :user="note.user"/> -->
+	<MkAvatar class="avatar" :user="note.user"/>
 	<div class="main">
 		<XNoteHeader class="header" :note="note" :mini="true"/>
 		<div class="body">

packages/client/src/components/MkNoteSub.vue

@@ -1,7 +1,10 @@
 <template>
 <div v-size="{ max: [450] }" class="wrpstxzv" :class="{ children: depth > 1 }">
-	<div class="main" @click="router.push(notePage(note.reply))">
+	<div class="main" @click="router.push(notePage(note))">
+		<div class="avatar-container">
 			<MkAvatar class="avatar" :user="note.user"/>
+			<div class="line"></div>
+		</div>
 		<div class="body">
 			<XNoteHeader class="header" :note="note" :mini="true"/>
 			<div class="body">
@@ -56,11 +59,7 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 <style lang="scss" scoped>
 .wrpstxzv {
 	padding: 16px 32px;
-	font-size: 0.9em;
 
-	&.max-width_450px {
-		padding: 14px 16px;
-	}
 
 	&.children {
 		padding: 10px 0 0 16px;
@@ -75,20 +74,21 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 	> .main {
 		display: flex;
 
+		> .avatar-container {
+			margin-right: 8px;
 			> .avatar {
 				flex-shrink: 0;
 				display: block;
-			margin: 0 8px 0 0;
 				width: 38px;
 				height: 38px;
 				border-radius: 8px;
 			}
+		}
 
 		> .body {
 			flex: 1;
 			min-width: 0;
 			cursor: pointer;
-
 			@media (pointer: coarse) {
 				cursor: default;
 			}
@@ -129,5 +129,54 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
 	> .more {
 		padding: 10px 0 0 16px;
 	}
+
+	&.reply-to, &.reply-to-more {
+		padding-bottom: 0;
+		&: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);
+				display: flex;
+				flex-grow: 1;
+				&::before {
+					content: "";
+					display: block;
+					width: 2px;
+					background-color: var(--accentDarken);
+					margin-inline: auto;
+					.note > & {
+						margin-bottom: -16px;
+					}
+				}
+			}
+		}
+		> .main > .body {
+			padding-bottom: 16px;
+		}
+	}
+
+	&.max-width_450px {
+		padding: 14px 16px;
+		&.reply-to, &.reply-to-more {
+			padding-top: 14px !important;
+			padding-bottom: 0 !important;
+			margin-bottom: 0 !important;
+		}
+		> .main > .avatar-container {
+			margin-right: 10px;
+		}
+	}
 }
 </style>

packages/client/src/components/MkReactionsViewer.vue

@@ -22,6 +22,7 @@ const isMe = computed(() => $i && $i.id === props.note.userId);
 <style lang="scss" scoped>
 .tdflqwzn {
 	margin: 4px -2px 0 -2px;
+	width: 100%;
 
 	&:empty {
 		display: none;

packages/client/src/components/MkSubNoteContent.vue

@@ -4,7 +4,7 @@
 		<span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deleted }})</span>
 		<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}`">QB: ...</MkA>
+		<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">{{ i18n.ts.quoteAttached }}: ...</MkA>
 	</div>
 	<div v-if="note.files.length > 0">
 		<summary>({{ i18n.t('withNFiles', { n: note.files.length }) }})</summary>
@@ -65,7 +65,11 @@ const collapsed = $ref(props.note.cw == null && isLong);
 		position: relative;
 		max-height: 9em;
 		overflow: hidden;
-
+		> .body {
+			max-height: 9em;
+			mask: linear-gradient(black calc(100% - 64px), transparent);
+			-webkit-mask: linear-gradient(black calc(100% - 64px), transparent);
+		}
 		> .fade {
 			display: block;
 			position: absolute;
@@ -73,7 +77,6 @@ const collapsed = $ref(props.note.cw == null && isLong);
 			left: 0;
 			width: 100%;
 			height: 64px;
-			background: linear-gradient(0deg, var(--panel), var(--X15));
 
 			> span {
 				display: inline-block;

packages/client/src/components/MkUrlPreview.vue

@@ -210,14 +210,12 @@ onUnmounted(() => {
 		position: relative;
 		display: block;
 		font-size: 14px;
-		box-shadow: 0 0 0 1px var(--divider);
+		border: 1px solid var(--divider);
 		border-radius: 8px;
 		overflow: hidden;
 
 		&:hover {
 			text-decoration: none;
-			border-color: rgba(0, 0, 0, 0.2);
-
 			> article > header > h1 {
 				text-decoration: underline;
 			}

packages/client/src/style.scss

@@ -4,6 +4,7 @@
 	--radius: 12px;
 	--marginFull: 16px;
 	--marginHalf: 10px;
+	--avatarSize: 48px;
 
 	--margin: var(--marginFull);