Experimental reply parent hint

src/components/status.css

@@ -330,6 +330,62 @@
   font-size: 90%;
 }
 
+.status.compact-reply {
+  --avatar-size: 20px;
+  --line-start: 40px;
+  --line-width: 3px;
+  --line-end: calc(var(--line-start) + var(--line-width));
+
+  display: flex;
+  gap: 12px;
+  --top-padding: 8px;
+  padding-top: var(--top-padding);
+  padding-bottom: 0;
+  background-image: linear-gradient(
+    160deg,
+    var(--reply-to-faded-color),
+    transparent
+  );
+
+  > * {
+    opacity: 0.65;
+    transition: opacity 1s ease-out;
+  }
+  .status-link:hover & > * {
+    opacity: 1;
+  }
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: calc(var(--top-padding) + var(--avatar-size));
+    left: var(--line-start);
+    width: var(--line-width);
+    height: calc(100% - var(--top-padding) - var(--avatar-size) + 16px);
+    background-color: var(--comment-line-color);
+    z-index: 0;
+    mask-image: linear-gradient(to bottom, #000 8px, transparent);
+  }
+
+  .avatar {
+    margin-left: calc((50px - var(--avatar-size)) / 2);
+    justify-self: center;
+    z-index: 1;
+  }
+
+  .content-compact {
+    overflow: hidden;
+    display: -webkit-box;
+    display: box;
+    -webkit-box-orient: vertical;
+    box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    font-size: 90%;
+    line-height: var(--avatar-size);
+  }
+}
+
 .status .container {
   flex-grow: 1;
   min-width: 0;

src/components/timeline.jsx

@@ -46,6 +46,7 @@ function Timeline({
   view,
   filterContext,
   showFollowedTags,
+  showReplyParent,
 }) {
   const snapStates = useSnapshot(states);
   const [items, setItems] = useState([]);
@@ -84,7 +85,7 @@ function Timeline({
               if (boostsCarousel) {
                 value = groupBoosts(value);
               }
-              value = groupContext(value);
+              value = groupContext(value, instance);
             }
             if (pinnedPosts.length) {
               value = pinnedPosts.concat(value);
@@ -522,6 +523,7 @@ function TimelineItem({
   filterContext,
   view,
   showFollowedTags,
+  showReplyParent,
 }) {
   const { id: statusID, reblog, items, type, _pinned } = status;
   if (_pinned) useItemID = false;
@@ -680,6 +682,7 @@ function TimelineItem({
             instance={instance}
             enableCommentHint
             showFollowedTags={showFollowedTags}
+            showReplyParent
             // allowFilters={allowFilters}
           />
         ) : (
@@ -688,6 +691,7 @@ function TimelineItem({
             instance={instance}
             enableCommentHint
             showFollowedTags={showFollowedTags}
+            showReplyParent
             // allowFilters={allowFilters}
           />
         )}

src/pages/following.jsx

@@ -129,6 +129,7 @@ function Following({ title, path, id, ...props }) {
       // allowFilters
       filterContext="home"
       showFollowedTags
+      showReplyParent
     />
   );
 }

src/pages/list.jsx

@@ -104,6 +104,7 @@ function List(props) {
         boostsCarousel={snapStates.settings.boostsCarousel}
         // allowFilters
         filterContext="home"
+        showReplyParent
         // refresh={reloadCount}
         headerStart={
           <Link to="/l" class="button plain">

src/utils/states.js

@@ -37,6 +37,7 @@ const states = proxy({
   unfurledLinks: {},
   statusQuotes: {},
   statusFollowedTags: {},
+  statusReply: {},
   accounts: {},
   routeNotification: null,
   // Modals

src/utils/timeline-utils.jsx

@@ -1,6 +1,8 @@
+import { api } from './api';
 import { extractTagsFromStatus, getFollowedTags } from './followed-tags';
+import pmem from './pmem';
 import { fetchRelationships } from './relationships';
-import states, { statusKey } from './states';
+import states, { saveStatus, statusKey } from './states';
 import store from './store';
 
 export function groupBoosts(values) {
@@ -81,7 +83,7 @@ export function dedupeBoosts(items, instance) {
   return filteredItems;
 }
 
-export function groupContext(items) {
+export function groupContext(items, instance) {
   const contexts = [];
   let contextIndex = 0;
   items.forEach((item) => {
@@ -173,12 +175,45 @@ export function groupContext(items) {
         return;
       }
     }
+
+    if (item.inReplyToId && item.inReplyToAccountId !== item.account.id) {
+      const sKey = statusKey(item.id, instance);
+      if (states.statusReply[sKey]) {
+        return;
+      }
+      // If it's a reply and not a thread
+      queueMicrotask(async () => {
+        try {
+          const { masto } = api({ instance });
+          // const replyToStatus = await masto.v1.statuses
+          //   .$select(item.inReplyToId)
+          //   .fetch();
+          const replyToStatus = await fetchStatus(item.inReplyToId, masto);
+          saveStatus(replyToStatus, instance, {
+            skipThreading: true,
+            skipUnfurling: true,
+          });
+          states.statusReply[sKey] = {
+            id: replyToStatus.id,
+            instance,
+          };
+        } catch (e) {
+          // Silently fail
+          console.error(e);
+        }
+      });
+    }
+
     newItems.push(item);
   });
 
   return newItems;
 }
 
+const fetchStatus = pmem((statusID, masto) => {
+  return masto.v1.statuses.$select(statusID).fetch();
+});
+
 export async function assignFollowedTags(items, instance) {
   const followedTags = await getFollowedTags(); // [{name: 'tag'}, {...}]
   if (!followedTags.length) return;