Experiment: new reply/thread "badges"

Also totally forced one-lined the name text + date at the top of a status

src/components/icon.jsx

@@ -42,6 +42,8 @@ const ICONS = {
   popin: ['mingcute:external-link-line', '180deg'],
   plus: 'mingcute:add-circle-line',
   'chevron-left': 'mingcute:left-line',
+  reply: ['mingcute:share-forward-line', '180deg', 'horizontal'],
+  thread: 'mingcute:route-line',
 };
 
 function Icon({ icon, size = 'm', alt, title, class: className = '' }) {
@@ -49,9 +51,9 @@ function Icon({ icon, size = 'm', alt, title, class: className = '' }) {
 
   const iconSize = SIZES[size];
   let iconName = ICONS[icon];
-  let rotate;
+  let rotate, flip;
   if (Array.isArray(iconName)) {
-    [iconName, rotate] = iconName;
+    [iconName, rotate, flip] = iconName;
   }
   return (
     <div
@@ -70,6 +72,7 @@ function Icon({ icon, size = 'm', alt, title, class: className = '' }) {
         height={iconSize}
         icon={iconName}
         rotate={rotate}
+        flip={flip}
       >
         {alt}
       </iconify-icon>

src/components/status.css

@@ -104,6 +104,12 @@
   display: flex;
   gap: 8px;
   justify-content: space-between;
+  white-space: nowrap;
+}
+.status > .container > .meta > * {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .status.large > .container > .meta {
   min-height: 50px;
@@ -129,6 +135,39 @@
   font-size: smaller;
 }
 
+.status-reply-badge {
+  display: inline-flex;
+  margin-left: 4px;
+  gap: 4px;
+  align-items: center;
+}
+.status-reply-badge .icon {
+  color: var(--reply-to-color);
+}
+.status-thread-badge {
+  display: inline-flex;
+  margin: 8px 0 0 0;
+  gap: 4px;
+  align-items: center;
+  color: var(--reply-to-color);
+  background: var(--bg-color);
+  border: 1px solid var(--reply-to-color);
+  border-radius: 4px;
+  padding: 4px;
+  font-size: 10px;
+  line-height: 1;
+  text-transform: uppercase;
+  opacity: 0.75;
+  background-image: repeating-linear-gradient(
+    -70deg,
+    transparent,
+    transparent 3px,
+    var(--reply-to-faded-color) 3px,
+    var(--reply-to-faded-color) 4px
+  );
+  font-weight: bold;
+}
+
 .status.large .content-container {
   margin-left: calc(-50px - 16px);
   padding-top: 10px;

src/components/status.jsx

@@ -220,13 +220,13 @@ function Status({
       )}
       <div class="container">
         <div class="meta">
-          <span>
+          {/* <span> */}
           <NameText
             account={status.account}
             showAvatar={size === 's'}
             showAcct={size === 'l'}
           />
-            {inReplyToAccount && !withinContext && size !== 's' && (
+          {/* {inReplyToAccount && !withinContext && size !== 's' && (
               <>
                 {' '}
                 <span class="ib">
@@ -234,8 +234,8 @@ function Status({
                   <NameText account={inReplyToAccount} short />
                 </span>
               </>
-            )}
+            )} */}
-          </span>{' '}
+          {/* </span> */}{' '}
           {size !== 'l' &&
             (uri ? (
               <a href={uri} target="_blank" class="time">
@@ -271,6 +271,25 @@ function Status({
               </span>
             ))}
         </div>
+        {inReplyToAccount && !withinContext && size !== 's' && (
+          <div
+            class={`status-${
+              inReplyToAccountId === status.account.id ? 'thread' : 'reply'
+            }-badge`}
+          >
+            {inReplyToAccountId === status.account.id ? (
+              <>
+                <Icon icon="thread" size="s" />
+                Thread
+              </>
+            ) : (
+              <>
+                <Icon icon="reply" />{' '}
+                <NameText account={inReplyToAccount} short />
+              </>
+            )}
+          </div>
+        )}
         <div
           class={`content-container ${
             sensitive || spoilerText ? 'has-spoiler' : ''

src/index.css

@@ -2,7 +2,7 @@
   --blue-color: royalblue;
   --purple-color: blueviolet;
   --green-color: green;
-  --orange-color: orange;
+  --orange-color: darkorange;
   --red-color: orangered;
   --bg-color: #fff;
   --bg-faded-color: #f0f2f5;
@@ -39,6 +39,7 @@
     --blue-color: CornflowerBlue;
     --purple-color: mediumpurple;
     --green-color: limegreen;
+    --orange-color: orange;
     --bg-color: #242526;
     --bg-faded-color: #18191a;
     --bg-blur-color: #0009;

src/pages/notifications.css

@@ -58,6 +58,7 @@
 
 .notification-content {
   flex-grow: 1;
+  min-width: 0;
 }
 .notification-content p:first-child {
   margin-top: 0;