From 31028939c7fdc88c88db2209b943995310b74e4d Mon Sep 17 00:00:00 2001
From: sneakers-the-rat <JLSaunders987@gmail.com>
Date: Fri, 6 Oct 2023 20:28:26 -0700
Subject: [PATCH 1/4] fix linting errors

---
 .../flavours/glitch/components/status.jsx     |  2 +-
 .../glitch/components/status_content.jsx      |  3 +-
 .../glitch/components/status_expand_button.js | 71 -------------------
 .../components/status_expand_button.jsx       | 71 +++++++++++++++++++
 4 files changed, 73 insertions(+), 74 deletions(-)
 delete mode 100644 app/javascript/flavours/glitch/components/status_expand_button.js
 create mode 100644 app/javascript/flavours/glitch/components/status_expand_button.jsx

diff --git a/app/javascript/flavours/glitch/components/status.jsx b/app/javascript/flavours/glitch/components/status.jsx
index 5ede4c2f53b7cf..4ca7c7ba16329c 100644
--- a/app/javascript/flavours/glitch/components/status.jsx
+++ b/app/javascript/flavours/glitch/components/status.jsx
@@ -22,10 +22,10 @@ import { MediaGallery, Video, Audio } from '../features/ui/util/async-components
 import AttachmentList from './attachment_list';
 import StatusActionBar from './status_action_bar';
 import StatusContent from './status_content';
+import StatusExpandButton from './status_expand_button';
 import StatusHeader from './status_header';
 import StatusIcons from './status_icons';
 import StatusPrepend from './status_prepend';
-import StatusExpandButton from './status_expand_button';
 
 const domParser = new DOMParser();
 
diff --git a/app/javascript/flavours/glitch/components/status_content.jsx b/app/javascript/flavours/glitch/components/status_content.jsx
index 4f160977ae3fd2..cfedc1ad037ed3 100644
--- a/app/javascript/flavours/glitch/components/status_content.jsx
+++ b/app/javascript/flavours/glitch/components/status_content.jsx
@@ -8,12 +8,11 @@ import classnames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
-import { Icon } from 'flavours/glitch/components/icon';
 import { autoPlayGif, languages as preloadedLanguages } from 'flavours/glitch/initial_state';
 import { decode as decodeIDNA } from 'flavours/glitch/utils/idna';
-import StatusExpandButton from './status_expand_button';
 
 import Permalink from './permalink';
+import StatusExpandButton from './status_expand_button';
 
 const textMatchesTarget = (text, origin, host) => {
   return (text === origin || text === host
diff --git a/app/javascript/flavours/glitch/components/status_expand_button.js b/app/javascript/flavours/glitch/components/status_expand_button.js
deleted file mode 100644
index 3f5d8638640147..00000000000000
--- a/app/javascript/flavours/glitch/components/status_expand_button.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from 'react';
-import { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import Icon from './icon';
-
-
-const StatusExpandButton=(
-  {
-    hidden,
-    handleSpoilerClick,
-    mediaIcons,
-  },
-)=>{
-  const makeToggleText = () => {
-    let newText;
-    if (hidden) {
-      newText = [
-        <FormattedMessage
-          id='status.show_more'
-          defaultMessage='Show more'
-          key='0'
-        />,
-      ];
-      if (mediaIcons) {
-        mediaIcons.forEach((mediaIcon, idx) => {
-          newText.push(
-            <Icon
-              fixedWidth
-              className='status__content__spoiler-icon'
-              id={mediaIcon}
-              aria-hidden='true'
-              key={`icon-${idx}`}
-            />,
-          );
-        });
-      }
-    } else {
-      newText = (
-        <FormattedMessage
-          id='status.show_less'
-          defaultMessage='Show less'
-          key='0'
-        />
-      );
-    }
-    return(newText);
-  };
-
-  // const [hidden, setHidden] = useState(false);
-  const [toggleText, setToggleText] = useState(makeToggleText());
-
-  // Change the text when the hidden state changes
-  useEffect(() => {
-    setToggleText(makeToggleText());
-  }, [hidden]);
-
-  return(
-    <button type='button' className='status__content__spoiler-link' onClick={handleSpoilerClick} aria-expanded={!hidden}>
-      {toggleText}
-    </button>
-  );
-};
-
-StatusExpandButton.propTypes = {
-  hidden: PropTypes.bool,
-  handleSpoilerClick: PropTypes.func,
-  mediaIcons: PropTypes.arrayOf(PropTypes.string),
-};
-
-export default StatusExpandButton;
diff --git a/app/javascript/flavours/glitch/components/status_expand_button.jsx b/app/javascript/flavours/glitch/components/status_expand_button.jsx
new file mode 100644
index 00000000000000..3f425cfbcc2f7c
--- /dev/null
+++ b/app/javascript/flavours/glitch/components/status_expand_button.jsx
@@ -0,0 +1,71 @@
+import PropTypes from 'prop-types';
+import React, { useState, useEffect } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import { Icon } from './icon';
+
+const makeToggleText = (hidden, mediaIcons) => {
+  let newText;
+  if (hidden) {
+    newText = [
+      <FormattedMessage
+        id='status.show_more'
+        defaultMessage='Show more'
+        key='0'
+      />,
+    ];
+    if (mediaIcons) {
+      mediaIcons.forEach((mediaIcon, idx) => {
+        newText.push(
+          <Icon
+            fixedWidth
+            className='status__content__spoiler-icon'
+            id={mediaIcon}
+            aria-hidden='true'
+            key={`icon-${idx}`}
+          />,
+        );
+      });
+    }
+  } else {
+    newText = (
+      <FormattedMessage
+        id='status.show_less'
+        defaultMessage='Show less'
+        key='0'
+      />
+    );
+  }
+  return(newText);
+};
+
+const StatusExpandButton=(
+  {
+    hidden,
+    handleSpoilerClick,
+    mediaIcons,
+  },
+) => {
+  const [toggleText, setToggleText] = useState(makeToggleText(hidden, mediaIcons));
+
+  // Change the text when the hidden state changes
+  useEffect(() => {
+    let text = makeToggleText(hidden, mediaIcons);
+    setToggleText(text);
+  }, [hidden, mediaIcons]);
+
+  return(
+    <button type='button' className='status__content__spoiler-link' onClick={handleSpoilerClick} aria-expanded={!hidden}>
+      {toggleText}
+    </button>
+  );
+};
+
+StatusExpandButton.propTypes = {
+  hidden: PropTypes.bool,
+  handleSpoilerClick: PropTypes.func,
+  mediaIcons: PropTypes.arrayOf(PropTypes.string),
+};
+
+export default StatusExpandButton;

From 8a0b1246b3696796ec391749026d22bbe3558bee Mon Sep 17 00:00:00 2001
From: sneakers-the-rat <JLSaunders987@gmail.com>
Date: Fri, 6 Oct 2023 20:32:08 -0700
Subject: [PATCH 2/4] fix CSS linting

---
 app/javascript/flavours/glitch/styles/components/status.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss
index c7afdfae375395..ffbac26273bb95 100644
--- a/app/javascript/flavours/glitch/styles/components/status.scss
+++ b/app/javascript/flavours/glitch/styles/components/status.scss
@@ -332,7 +332,6 @@
       max-height: 6em;
       overflow: hidden;
       text-overflow: ellipsis;
-      //padding-top: 0;
 
       &::after {
         content: '';

From e1c717c94d85eb95a96f40a54b8bc8a065fb399b Mon Sep 17 00:00:00 2001
From: sneakers-the-rat <sneakers-the-rat@protonmail.com>
Date: Fri, 19 Jul 2024 01:41:06 -0700
Subject: [PATCH 3/4] fix bigger status previews after grouped notifs update

---
 .../bigger_collapsed_statuses.scss            | 39 +++++++++++--------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/app/javascript/flavours/glitch/styles/neuromatchstodon/bigger_collapsed_statuses.scss b/app/javascript/flavours/glitch/styles/neuromatchstodon/bigger_collapsed_statuses.scss
index a6a04a47d822c1..6d143a66a3fda6 100644
--- a/app/javascript/flavours/glitch/styles/neuromatchstodon/bigger_collapsed_statuses.scss
+++ b/app/javascript/flavours/glitch/styles/neuromatchstodon/bigger_collapsed_statuses.scss
@@ -1,28 +1,33 @@
-.status {
+$status-collapsed-height: 10em;
+$notification-collapsed-height: 6em;
+
+.status__wrapper {
   &.collapsed {
-    .status__content {
-      height: unset;
-      max-height: 6em;
-      padding-top: unset;
+    .status {
+      &__content {
+        height: unset;
+        max-height: $status-collapsed-height;
+        padding-top: unset;
+        mask-image: linear-gradient(#000 80%, transparent);
+
+        &::after {
+          top: unset;
+          height: 40%;
+        }
 
-      &::after {
-        top: unset;
-        height: 40%;
+        // "See more" button
+        &__spoiler-link {
+          background: $action-button-color;
+        }
       }
-    }
-  }
 
-  &--in-thread {
-    &.collapsed {
-      & > button {
+      &--in-thread > button {
         margin-inline-start: 46px + 10px;
       }
     }
   }
 }
 
-// Fix background color after upstream moved how the
-// normal button is placed in the DOM
-.status.collapsed .status__content__spoiler-link {
-  background: $action-button-color;
+.notification-ungrouped .status__wrapper.collapsed .status__content {
+  max-height: $notification-collapsed-height;
 }

From 3c4e35773f7a4c984882ed5cc44ea47a6e30c5b7 Mon Sep 17 00:00:00 2001
From: sneakers-the-rat <sneakers-the-rat@protonmail.com>
Date: Fri, 19 Jul 2024 16:19:51 -0700
Subject: [PATCH 4/4] correct selectors for notifications, hover lightening

---
 .../bigger_collapsed_statuses.scss              | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/app/javascript/flavours/glitch/styles/neuromatchstodon/bigger_collapsed_statuses.scss b/app/javascript/flavours/glitch/styles/neuromatchstodon/bigger_collapsed_statuses.scss
index 6d143a66a3fda6..f79d8f98871199 100644
--- a/app/javascript/flavours/glitch/styles/neuromatchstodon/bigger_collapsed_statuses.scss
+++ b/app/javascript/flavours/glitch/styles/neuromatchstodon/bigger_collapsed_statuses.scss
@@ -18,6 +18,12 @@ $notification-collapsed-height: 6em;
         // "See more" button
         &__spoiler-link {
           background: $action-button-color;
+
+          &:hover,
+          &:focus {
+            background: lighten($action-button-color, 7%);
+            text-decoration: none;
+          }
         }
       }
 
@@ -28,6 +34,15 @@ $notification-collapsed-height: 6em;
   }
 }
 
-.notification-ungrouped .status__wrapper.collapsed .status__content {
+// set a smaller height for previews of longposts in notifications
+// The component structure is different depending on whether
+// grouped notifications is enabled or not, and whether
+// something is an interaction or not - there isn't a
+// class given for "notifications" so we have to improvise
+.notification-ungrouped .status__wrapper.collapsed .status__content,
+.notification__filter-bar
+  + .scrollable
+  .status__wrapper.collapsed
+  .status__content {
   max-height: $notification-collapsed-height;
 }