From 6f8390c3f8d3877c7120921ad694e1e06865e465 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 6 Apr 2023 18:21:56 +0800
Subject: [PATCH] Embrace "Private mention"

---
 src/components/compose.jsx |  2 +-
 src/components/status.css  | 24 ++++++++++++++++++++++--
 src/components/status.jsx  |  7 ++++++-
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/components/compose.jsx b/src/components/compose.jsx
index c979bf45..22176e80 100644
--- a/src/components/compose.jsx
+++ b/src/components/compose.jsx
@@ -893,7 +893,7 @@ function Compose({
                 </option>
                 <option value="unlisted">Unlisted</option>
                 <option value="private">Followers only</option>
-                <option value="direct">Direct</option>
+                <option value="direct">Private mention</option>
               </select>
             </label>{' '}
           </div>
diff --git a/src/components/status.css b/src/components/status.css
index 1258f324..3f583226 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -240,16 +240,18 @@
 
 .status-reply-badge {
   display: inline-flex;
-  margin-left: 4px;
+  margin: 2px 0 2px 4px;
   gap: 4px;
   align-items: center;
+  vertical-align: middle;
 }
 .status-reply-badge .icon {
   color: var(--reply-to-color);
 }
 .status-thread-badge {
+  vertical-align: middle;
   display: inline-flex;
-  margin: 4px 0 0 0;
+  margin: 2px 0;
   gap: 4px;
   align-items: center;
   color: var(--reply-to-text-color);
@@ -270,6 +272,24 @@
   );
   font-weight: bold;
 }
+.status-direct-badge {
+  vertical-align: middle;
+  display: inline-flex;
+  margin: 2px 0;
+  gap: 4px;
+  align-items: center;
+  color: var(--reply-to-text-color);
+  background-color: var(--bg-color);
+  border: 1px solid var(--reply-to-text-color);
+  border-radius: 4px;
+  padding: 4px;
+  font-size: 10px;
+  line-height: 1;
+  text-transform: uppercase;
+  opacity: 0.75;
+  font-weight: bold;
+  box-shadow: inset 0 0 0 1px var(--reply-to-color);
+}
 .status-filtered-badge {
   flex-shrink: 0;
   color: var(--text-insignificant-color);
diff --git a/src/components/status.jsx b/src/components/status.jsx
index ccf427fb..e3f5112c 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -62,7 +62,7 @@ const visibilityText = {
   public: 'Public',
   unlisted: 'Unlisted',
   private: 'Followers only',
-  direct: 'Direct',
+  direct: 'Private mention',
 };
 
 function Status({
@@ -779,6 +779,11 @@ function Status({
               </span>
             ))}
         </div>
+        {visibility === 'direct' && (
+          <>
+            <div class="status-direct-badge">Private mention</div>{' '}
+          </>
+        )}
         {!withinContext && (
           <>
             {inReplyToAccountId === status.account?.id ||