From f0adee6ebf58db25b225c5e8d54a615e6400bad2 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 17 Apr 2023 19:09:46 +0800
Subject: [PATCH] Add tiny little closed eye for compact status spoiler

---
 src/components/status.css   | 13 +++++++++++++
 src/components/timeline.jsx |  8 ++++++++
 2 files changed, 21 insertions(+)

diff --git a/src/components/status.css b/src/components/status.css
index a9d52638..da7577ca 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -389,6 +389,19 @@
   color: inherit;
 }
 
+.status.compact-thread .spoiler-badge {
+  font-size: smaller;
+  color: var(--button-bg-color);
+  border: 1px dashed var(--button-bg-color);
+  padding: 2px 4px;
+  border-radius: 16px;
+  display: inline-flex;
+  margin: 4px;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-faded-color);
+}
+
 .timeline-deck .status .content {
   max-height: 50vh;
   max-height: 50dvh;
diff --git a/src/components/timeline.jsx b/src/components/timeline.jsx
index 48fc1b86..e0cdc7f7 100644
--- a/src/components/timeline.jsx
+++ b/src/components/timeline.jsx
@@ -584,6 +584,14 @@ function TimelineStatusCompact({ status, instance }) {
       )}
       <div class="content-compact" title={statusPeekText}>
         {statusPeekText}
+        {status.sensitive && status.spoilerText && (
+          <>
+            {' '}
+            <span class="spoiler-badge">
+              <Icon icon="eye-close" size="s" />
+            </span>
+          </>
+        )}
       </div>
     </article>
   );