Experiment: make replies container not whole-clickable

Except for "thread" statuses

src/components/status.jsx

@@ -94,6 +94,7 @@ function Status({
   allowFilters,
   onMediaClick,
   quoted,
+  onStatusLinkClick = () => {},
 }) {
   if (skeleton) {
     return (
@@ -526,7 +527,10 @@ function Status({
             <br />
             {createdDateText}
           </MenuHeader>
-          <MenuLink to={instance ? `/${instance}/s/${id}` : `/s/${id}`}>
+          <MenuLink
+            to={instance ? `/${instance}/s/${id}` : `/s/${id}`}
+            onClick={onStatusLinkClick}
+          >
             <Icon icon="arrow-right" />
             <span>View post by @{username || acct}</span>
           </MenuLink>
@@ -944,6 +948,7 @@ function Status({
                     onClick={(e) => {
                       e.preventDefault();
                       e.stopPropagation();
+                      onStatusLinkClick?.();
                     }}
                     class={`time ${open ? 'is-open' : ''}`}
                   >

src/pages/status.jsx

@@ -843,6 +843,24 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
               weight,
             } = status;
             const isHero = statusID === id;
+            const StatusParent = useCallback(
+              (props) =>
+                isThread || thread ? (
+                  <Link
+                    class="status-link"
+                    to={
+                      instance ? `/${instance}/s/${statusID}` : `/s/${statusID}`
+                    }
+                    onClick={() => {
+                      resetScrollPosition(statusID);
+                    }}
+                    {...props}
+                  />
+                ) : (
+                  <div class="status-focus" tabIndex={0} {...props} />
+                ),
+              [isThread, thread],
+            );
             return (
               <li
                 key={statusID}
@@ -923,15 +941,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
                     )}
                   </>
                 ) : (
-                  <Link
-                    class="status-link"
-                    to={
-                      instance ? `/${instance}/s/${statusID}` : `/s/${statusID}`
-                    }
-                    onClick={() => {
-                      resetScrollPosition(statusID);
-                    }}
-                  >
+                  <StatusParent>
                     <Status
                       statusID={statusID}
                       instance={instance}
@@ -939,6 +949,9 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
                       size={thread || ancestor ? 'm' : 's'}
                       enableTranslate
                       onMediaClick={handleMediaClick}
+                      onStatusLinkClick={() => {
+                        resetScrollPosition(statusID);
+                      }}
                     />
                     {ancestor && isThread && repliesCount > 1 && (
                       <div class="replies-link">
@@ -956,7 +969,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
                           </span>
                         </div>
                       )} */}
-                  </Link>
+                  </StatusParent>
                 )}
                 {descendant && replies?.length > 0 && (
                   <SubComments
@@ -1171,13 +1184,14 @@ function SubComments({
       <ul>
         {replies.map((r) => (
           <li key={r.id}>
-            <Link
+            {/* <Link
               class="status-link"
               to={instance ? `/${instance}/s/${r.id}` : `/s/${r.id}`}
               onClick={() => {
                 resetScrollPosition(r.id);
               }}
-            >
+            > */}
+            <div class="status-focus" tabIndex={0}>
               <Status
                 statusID={r.id}
                 instance={instance}
@@ -1194,7 +1208,8 @@ function SubComments({
                   </span>
                 </div>
               )}
-            </Link>
+            </div>
+            {/* </Link> */}
             {r.replies?.length && (
               <SubComments
                 instance={instance}