Treat posts from groups differently from boosts

src/components/status.css

@@ -7,6 +7,13 @@
     transparent min(160px, 50%)
   );
 }
+.status-group {
+  background: linear-gradient(
+    160deg,
+    var(--group-faded-color),
+    transparent min(160px, 50%)
+  );
+}
 .status-reply-to {
   background: linear-gradient(
     160deg,
@@ -14,7 +21,7 @@
     transparent min(160px, 50%)
   );
 }
-.status-reblog .status-reply-to {
+:is(.status-reblog, .status-group) .status-reply-to {
   background: linear-gradient(
     -20deg,
     var(--reply-to-faded-color),
@@ -51,6 +58,11 @@
   margin-right: 4px;
   vertical-align: text-bottom;
 }
+.status-group .status-pre-meta .icon {
+  color: var(--group-color);
+  margin-right: 4px;
+  vertical-align: text-bottom;
+}
 
 /* STATUS */
 

src/components/status.jsx

@@ -136,6 +136,7 @@ function Status({
       username,
       emojis: accountEmojis,
       bot,
+      group,
     },
     id,
     repliesCount,
@@ -230,6 +231,25 @@ function Status({
 
   if (reblog) {
     // If has statusID, means useItemID (cached in states)
+
+    if (group) {
+      return (
+        <div class="status-group" onMouseEnter={debugHover}>
+          <div class="status-pre-meta">
+            <Icon icon="group" size="l" alt="Group" />{' '}
+            <NameText account={status.account} instance={instance} showAvatar />
+          </div>
+          <Status
+            status={statusID ? null : reblog}
+            statusID={statusID ? reblog.id : null}
+            instance={instance}
+            size={size}
+            contentTextWeight={contentTextWeight}
+          />
+        </div>
+      );
+    }
+
     return (
       <div class="status-reblog" onMouseEnter={debugHover}>
         <div class="status-pre-meta">

src/index.css

@@ -35,6 +35,8 @@
   --button-plain-bg-hover-color: rgba(128, 128, 128, 0.1);
   --reblog-color: var(--purple-color);
   --reblog-faded-color: #892be220;
+  --group-color: var(--green-color);
+  --group-faded-color: #00640020;
   --reply-to-color: var(--orange-color);
   --reply-to-text-color: #b36200;
   --favourite-color: var(--red-color);

src/utils/timeline-utils.jsx

@@ -6,7 +6,7 @@ export function groupBoosts(values) {
   let serialBoosts = 0;
   for (let i = 0; i < values.length; i++) {
     const item = values[i];
-    if (item.reblog) {
+    if (item.reblog && !item.account?.group) {
       boostStash.push(item);
       serialBoosts++;
     } else {