From 4acb6aa3c232fd33585c32b8bffe00aab95dcc35 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Tue, 20 Dec 2022 20:17:38 +0800
Subject: [PATCH] Subtle badges

---
 src/components/status.css | 21 +++++++++++++++++++++
 src/components/status.jsx |  7 +++++++
 2 files changed, 28 insertions(+)

diff --git a/src/components/status.css b/src/components/status.css
index 4fbc6bf8..805ca219 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -62,6 +62,7 @@
   padding: 16px 16px 20px;
   line-height: 1.5;
   align-items: flex-start;
+  position: relative;
 }
 .status.large {
   --fade-in-out-bg: linear-gradient(
@@ -608,6 +609,26 @@ a.card:hover {
   color: var(--green-color);
 }
 
+/* BADGE */
+
+.status-badge {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  line-height: 0;
+  pointer-events: none;
+  opacity: 0.75;
+}
+.status-badge .favourite {
+  color: var(--favourite-color);
+}
+.status-badge .reblog {
+  color: var(--reblog-color);
+}
+.status-badge .bookmark {
+  color: var(--link-color);
+}
+
 /* MISC */
 
 .status-aside {
diff --git a/src/components/status.jsx b/src/components/status.jsx
index 7eb1949f..c0909a7b 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -197,6 +197,13 @@ function Status({
       }`}
       onMouseEnter={debugHover}
     >
+      {size !== 'l' && (
+        <div class="status-badge">
+          {reblogged && <Icon class="reblog" icon="rocket" size="s" />}
+          {favourited && <Icon class="favourite" icon="heart" size="s" />}
+          {bookmarked && <Icon class="bookmark" icon="bookmark" size="s" />}
+        </div>
+      )}
       {size !== 's' && (
         <a
           href={url}