From c167f206436d43e19f113fab515ff9de524333ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9E=9C=E7=89=A9=E3=83=AA=E3=83=B3?= <nassii74@gmail.com>
Date: Sat, 16 Dec 2023 14:13:38 +0900
Subject: [PATCH] =?UTF-8?q?feature:=20=E3=83=81=E3=83=A3=E3=83=B3=E3=83=8D?=
 =?UTF-8?q?=E3=83=AB=E6=8A=95=E7=A8=BF=E3=81=AF=E3=83=95=E3=82=A9=E3=83=BC?=
 =?UTF-8?q?=E3=83=A0=E3=81=AB=E8=89=B2=E3=81=8C=E3=81=A4=E3=81=8F=E3=81=A8?=
 =?UTF-8?q?=E3=81=86=E3=82=8C=E3=81=97=E3=81=84=20(#12686)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/components/MkPostForm.vue | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index 4a1930ac0..8a2a21a89 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -67,6 +67,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<MkInfo v-if="hasNotSpecifiedMentions" warn :class="$style.hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo>
 	<input v-show="useCw" ref="cwInputEl" v-model="cw" :class="$style.cw" :placeholder="i18n.ts.annotation" @keydown="onKeydown">
 	<div :class="[$style.textOuter, { [$style.withCw]: useCw }]">
+		<div v-if="channel" :class="$style.colorBar" :style="{ background: channel.color }"></div>
 		<textarea ref="textareaEl" v-model="text" :class="[$style.text]" :disabled="posting || posted" :readonly="textAreaReadOnly" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
 		<div v-if="maxTextLength - textLength < 100" :class="['_acrylic', $style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</div>
 	</div>
@@ -1038,6 +1039,17 @@ defineExpose({
 	}
 }
 
+
+.colorBar {
+	position: absolute;
+	top: 0px;
+	left: 12px;
+	width: 5px;
+	height: 100% ;
+	border-radius: 999px;
+	pointer-events: none;
+}
+
 .submitInner {
 	padding: 0 12px;
 	line-height: 34px;
@@ -1296,5 +1308,6 @@ defineExpose({
 	.headerRight {
 		gap: 0;
 	}
+
 }
 </style>