From d6b090a88cdabc8e3fe40bf8ef7349a3371166e0 Mon Sep 17 00:00:00 2001
From: Ember <me@ember-is.gay>
Date: Sun, 30 Jun 2024 19:21:29 +1000
Subject: [PATCH] Statuses collapse to value set?

---
 .../flavours/blobfox/components/status.jsx           | 12 +++++++++++-
 .../flavours/blobfox/styles/components/status.scss   | 10 +++++-----
 .../flavours/glitch/styles/components/status.scss    | 10 +++++-----
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/app/javascript/flavours/blobfox/components/status.jsx b/app/javascript/flavours/blobfox/components/status.jsx
index 134559a599ed67..218aea3b98b789 100644
--- a/app/javascript/flavours/blobfox/components/status.jsx
+++ b/app/javascript/flavours/blobfox/components/status.jsx
@@ -553,6 +553,7 @@ class Status extends ImmutablePureComponent {
     } = this.props;
     const { isCollapsed } = this.state;
     let background = null;
+    let collapsedHeight = null;
     let attachments = null;
 
     //  Depending on user settings, some media are considered as parts of the
@@ -636,6 +637,14 @@ class Status extends ImmutablePureComponent {
       background = status.getIn(['account', 'header']);
     }
 
+    collapsedHeight = (
+      settings.getIn(['collapsed', 'auto', 'height'])
+    )
+
+    if (status.get('media_attachments').size && !muted) {
+      collapsedHeight += 210;
+    }
+
     //  This handles our media attachments.
     //  If a media file is of unknwon type or if the status is muted
     //  (notification), we show a list of links instead of embedded media.
@@ -811,7 +820,7 @@ class Status extends ImmutablePureComponent {
       <HotKeys handlers={handlers}>
         <div
           className={computedClass}
-          style={isCollapsed && background ? { backgroundImage: `url(${background})` } : null}
+          style={isCollapsed && background ? { backgroundImage: `url(${background})`} : null}
           {...selectorAttribs}
           ref={handleRef}
           tabIndex={0}
@@ -846,6 +855,7 @@ class Status extends ImmutablePureComponent {
           </header>
           <StatusContent
             status={status}
+            style={isCollapsed ? { height: `${collapsedHeight}px`} : null}
             media={contentMedia}
             extraMedia={extraMedia}
             mediaIcons={contentMediaIcons}
diff --git a/app/javascript/flavours/blobfox/styles/components/status.scss b/app/javascript/flavours/blobfox/styles/components/status.scss
index cb7d72e5ccf42a..8d8cd8b4105997 100644
--- a/app/javascript/flavours/blobfox/styles/components/status.scss
+++ b/app/javascript/flavours/blobfox/styles/components/status.scss
@@ -329,7 +329,7 @@
     }
 
     .status__content {
-      height: 20px;
+      height: 12em;
       overflow: hidden;
       text-overflow: ellipsis;
       padding-top: 0;
@@ -355,15 +355,15 @@
 
     &:focus > .status__content::after {
       background: linear-gradient(
-        rgba(lighten($ui-base-color, 4%), 0),
-        rgba(lighten($ui-base-color, 4%), 1)
+        rgba(lighten($ui-base-color, 4%), 0) 0.1em,
+        rgba(lighten($ui-base-color, 4%), 1) 4em
       );
     }
 
     &.status-direct > .status__content::after {
       background: linear-gradient(
-        rgba(mix($ui-base-color, $ui-highlight-color, 95%), 0),
-        rgba(mix($ui-base-color, $ui-highlight-color, 95%), 1)
+        rgba(mix($ui-base-color, $ui-highlight-color, 95%), 0) 0.1em,
+        rgba(mix($ui-base-color, $ui-highlight-color, 95%), 1) 4em
       );
     }
 
diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss
index 7a5cd17b626e2e..5b912df2f45892 100644
--- a/app/javascript/flavours/glitch/styles/components/status.scss
+++ b/app/javascript/flavours/glitch/styles/components/status.scss
@@ -322,7 +322,7 @@
     }
 
     .status__content {
-      height: 20px;
+      height: 12em;
       overflow: hidden;
       text-overflow: ellipsis;
       padding-top: 0;
@@ -335,8 +335,8 @@
         inset-inline-start: 0;
         inset-inline-end: 0;
         background: linear-gradient(
-          rgba($ui-base-color, 0),
-          rgba($ui-base-color, 1)
+          rgba($ui-base-color, 0) 0.1em,
+          rgba($ui-base-color, 1) 4em
         );
         pointer-events: none;
       }
@@ -348,8 +348,8 @@
 
     &:focus > .status__content::after {
       background: linear-gradient(
-        rgba(lighten($ui-base-color, 4%), 0),
-        rgba(lighten($ui-base-color, 4%), 1)
+        rgba(lighten($ui-base-color, 4%), 0) 0.1em,
+        rgba(lighten($ui-base-color, 4%), 1) 4em
       );
     }