feat: simplify notifications (close #42)

README.md

@@ -17,6 +17,8 @@
 
 ## 細かい変更点
 
+- 通知の表示を簡潔にする
+  - 「がリアクションしました」とかリプライの上にある白い線とかが邪魔に思えたため
 - 支援者リストをファイルから読み込む
   - 外部のサーバーが落ちるとユーザーページが開けなくなることを防ぐため
 - 閲覧注意の注釈と画像の代替テキストもアンテナで調べる対象にする

packages/client/src/components/MkNote.vue

@@ -24,7 +24,7 @@
 				collapsedReply: collapsedReply && appearNote.reply,
 			}"
 		>
-			<div class="line"></div>
+			<div v-if="!collapsedReply" class="line"></div>
 			<div v-if="appearNote._prId_" class="info">
 				<i class="ph-megaphone-simple-bold ph-lg"></i>
 				{{ i18n.ts.promotion
@@ -676,9 +676,9 @@ defineExpose({
 		> .line {
 			position: relative;
 			z-index: 2;
-			width: var(--avatarSize);
+			width: 0;
 			display: flex;
-			margin-right: 14px;
+			margin-right: 0;
 			margin-top: 0;
 			flex-grow: 0;
 			pointer-events: none;
@@ -934,7 +934,7 @@ defineExpose({
 				margin-top: 0px;
 			}
 			> .line {
-				margin-right: 10px;
+				margin-right: 0;
 				&::before {
 					margin-top: 8px;
 				}

packages/client/src/components/MkNotification.vue

@@ -114,15 +114,12 @@
 				:to="notePage(notification.note)"
 				:title="getNoteSummary(notification.note)"
 			>
-				<span>{{ i18n.ts._notification.reacted }}</span>
-				<i class="ph-quotes ph-fill ph-lg"></i>
 				<Mfm
 					:text="getNoteSummary(notification.note)"
 					:plain="true"
 					:nowrap="!full"
 					:custom-emojis="notification.note.emojis"
 				/>
-				<i class="ph-quotes ph-fill ph-lg"></i>
 			</MkA>
 			<MkA
 				v-if="notification.type === 'renote'"
@@ -130,15 +127,12 @@
 				:to="notePage(notification.note)"
 				:title="getNoteSummary(notification.note.renote)"
 			>
-				<span>{{ i18n.ts._notification.renoted }}</span>
-				<i class="ph-quotes ph-fill ph-lg"></i>
 				<Mfm
 					:text="getNoteSummary(notification.note.renote)"
 					:plain="true"
 					:nowrap="!full"
 					:custom-emojis="notification.note.renote.emojis"
 				/>
-				<i class="ph-quotes ph-fill ph-lg"></i>
 			</MkA>
 			<MkA
 				v-if="notification.type === 'reply'"
@@ -185,15 +179,12 @@
 				:to="notePage(notification.note)"
 				:title="getNoteSummary(notification.note)"
 			>
-				<span>{{ i18n.ts._notification.voted }}</span>
-				<i class="ph-quotes ph-fill ph-lg"></i>
 				<Mfm
 					:text="getNoteSummary(notification.note)"
 					:plain="true"
 					:nowrap="!full"
 					:custom-emojis="notification.note.emojis"
 				/>
-				<i class="ph-quotes ph-fill ph-lg"></i>
 			</MkA>
 			<MkA
 				v-if="notification.type === 'pollEnded'"
@@ -201,14 +192,12 @@
 				:to="notePage(notification.note)"
 				:title="getNoteSummary(notification.note)"
 			>
-				<i class="ph-quotes ph-fill ph-lg"></i>
 				<Mfm
 					:text="getNoteSummary(notification.note)"
 					:plain="true"
 					:nowrap="!full"
 					:custom-emojis="notification.note.emojis"
 				/>
-				<i class="ph-quotes ph-fill ph-lg"></i>
 			</MkA>
 			<span
 				v-if="notification.type === 'follow'"
@@ -518,12 +507,12 @@ useTooltip(reactionRef, (showing) => {
 			overflow: hidden;
 			text-overflow: ellipsis;
 
-			> span:first-child {
-				opacity: 0.7;
-				&::after {
-					content: ": ";
-				}
-			}
+			//	> span:first-child {
+			//		opacity: 0.7;
+			//		&::after {
+			//			content: ": ";
+			//		}
+			//	}
 
 			> i {
 				vertical-align: super;