Subtle badges

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 {

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}