Experiment unlinked replies (again)

But still show link to the post's "thread"
2024-01-05 19:15:22 +08:00 · 2024-01-05 19:15:22 +08:00 · 54314de976
parent bc2886f7e2
commit 54314de976
3 changed files with 176 additions and 66 deletions
--- a/src/app.css
+++ b/src/app.css
@ -547,9 +547,10 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
  list-style: none;
 }
 .timeline.contextual > li .replies > .replies-summary {
-  padding: 8px;
+  --summary-padding: 8px;
+  padding: var(--summary-padding);
  background-color: var(--bg-faded-color);
-  display: inline-block;
+  display: inline-flex;
  border-radius: 8px;
  cursor: pointer;
  text-transform: uppercase;
@ -559,12 +560,67 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
  box-shadow: 0 0 0 2px var(--bg-color);
  position: relative;
  list-style: none;
-  white-space: nowrap;
+  gap: 8px;
+  align-items: center;
+  margin-right: calc(44px + 8px);

  b {
    font-weight: 500;
    color: var(--text-color);
  }
+
+  .avatars {
+    flex-shrink: 0;
+    transition: opacity 0.3s ease;
+
+    .avatar {
+      transition: transform 0.3s ease;
+
+      &:not(:first-child) {
+        margin: 0 0 0 -4px;
+      }
+    }
+  }
+
+  .replies-counts {
+    /* flex-grow: 1; */
+
+    > * {
+      display: inline-block;
+    }
+  }
+
+  .replies-summary-chevron {
+    transition: transform 0.3s ease;
+  }
+
+  .replies-parent-link {
+    position: absolute;
+    right: 4px;
+    height: 100%;
+    z-index: 2;
+    font-size: 16px;
+    font-weight: bold;
+    align-self: stretch;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    padding: var(--summary-padding) calc(var(--summary-padding) * 2);
+    transform: translateX(100%);
+    margin: calc(-1 * var(--summary-padding)) calc(-1 * var(--summary-padding))
+      calc(-1 * var(--summary-padding)) 0;
+    border-radius: 8px;
+    background-color: var(--link-bg-color);
+
+    &:is(:hover, :focus) {
+      color: var(--link-text-color);
+      box-shadow: inset 0 0 0 2px var(--link-faded-color);
+    }
+
+    &:active {
+      background-color: var(--link-faded-color);
+    }
+  }
 }
 .timeline.contextual > li .replies > .replies-summary::-webkit-details-marker {
  display: none;
@ -572,14 +628,14 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
 .timeline.contextual > li .replies > .replies-summary > * {
  vertical-align: middle;
 }
-.timeline.contextual > li .replies > .replies-summary .avatars {
-  margin-right: 8px;
-
-  > *:not(:first-child) {
-    margin: 0 0 0 -4px;
-  }
-}
-.timeline.contextual > li .replies > .replies-summary:active,
+.timeline.contextual
+  > li
+  .replies
+  > .replies-summary
+  .timeline.contextual
+  > li
+  .replies
+  > .replies-summary:active,
 .timeline.contextual > li .replies[open] > .replies-summary {
  color: var(--text-color);
  background-color: var(--comment-line-color);
@ -591,6 +647,18 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
 }
 .timeline.contextual > li .replies[open] > .replies-summary {
  border-bottom-left-radius: 0;
+
+  .avatars {
+    opacity: 0.5;
+
+    .avatar {
+      transform: rotate(-15deg);
+    }
+  }
+
+  .replies-summary-chevron {
+    transform: rotate(180deg);
+  }
 }
 .timeline.contextual > li .replies .replies-summary[hidden] {
  display: none;
--- a/src/index.css
+++ b/src/index.css
@ -32,6 +32,7 @@
  --text-color: #1c1e21;
  --text-insignificant-color: #1c1e2199;
  --link-color: var(--blue-color);
+  --link-bg-color: #4169e122;
  --link-light-color: #4169e199;
  --link-faded-color: #4169e155;
  --link-bg-hover-color: #f0f2f599;
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@ -184,6 +184,15 @@ function StatusPage(params) {
  );
 }

+function StatusParent(props) {
+  const { linkable, to, onClick, ...restProps } = props;
+  return linkable ? (
+    <Link class="status-link" to={to} onClick={onClick} {...restProps} />
+  ) : (
+    <div class="status-focus" tabIndex={0} {...restProps} />
+  );
+}
+
 function StatusThread({ id, closeLink = '/', instance: propInstance }) {
  const [searchParams, setSearchParams] = useSearchParams();
  const mediaParam = searchParams.get('media');
@ -705,24 +714,8 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
        weight,
      } = status;
      const isHero = statusID === id;
-      // const StatusParent = useCallback(
-      //   (props) =>
-      //     isThread || thread || ancestor ? (
-      //       <Link
-      //         class="status-link"
-      //         to={
-      //           instance ? `/${instance}/s/${statusID}` : `/s/${statusID}`
-      //         }
-      //         onClick={() => {
-      //           resetScrollPosition(statusID);
-      //         }}
-      //         {...props}
-      //       />
-      //     ) : (
-      //       <div class="status-focus" tabIndex={0} {...props} />
-      //     ),
-      //   [isThread, thread],
-      // );
+      const isLinkable = isThread || ancestor;
+
      return (
        <li
          key={statusID}
@ -808,25 +801,42 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
              )}
            </>
          ) : (
-            // <StatusParent>
-            <Link
-              class="status-link"
+            <StatusParent
+              linkable={isLinkable}
              to={instance ? `/${instance}/s/${statusID}` : `/s/${statusID}`}
              onClick={() => {
                resetScrollPosition(statusID);
              }}
            >
-              <InView
-                skip={i !== 0 || !ancestor}
-                threshold={0.5}
-                onChange={(inView) => {
-                  queueMicrotask(() => {
-                    requestAnimationFrame(() => {
-                      setReachTopPost(inView);
+              {/* <Link
+              class="status-link"
+              to={instance ? `/${instance}/s/${statusID}` : `/s/${statusID}`}
+              onClick={() => {
+                resetScrollPosition(statusID);
+              }}
+            > */}
+              {i === 0 && ancestor ? (
+                <InView
+                  threshold={0.5}
+                  onChange={(inView) => {
+                    queueMicrotask(() => {
+                      requestAnimationFrame(() => {
+                        setReachTopPost(inView);
+                      });
                    });
-                  });
-                }}
-              >
+                  }}
+                >
+                  <Status
+                    statusID={statusID}
+                    instance={instance}
+                    withinContext
+                    size={thread || ancestor ? 'm' : 's'}
+                    enableTranslate
+                    onMediaClick={handleMediaClick}
+                    onStatusLinkClick={handleStatusLinkClick}
+                  />
+                </InView>
+              ) : (
                <Status
                  statusID={statusID}
                  instance={instance}
@ -836,7 +846,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
                  onMediaClick={handleMediaClick}
                  onStatusLinkClick={handleStatusLinkClick}
                />
-              </InView>
+              )}
              {ancestor && repliesCount > 1 && (
                <div class="replies-link">
                  <Icon icon="comment2" />{' '}
@ -853,8 +863,8 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
                          </span>
                        </div>
                      )} */}
-              {/* </StatusParent> */}
-            </Link>
+            </StatusParent>
+            // </Link>
          )}
          {descendant && replies?.length > 0 && (
            <SubComments
@ -864,6 +874,10 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
              level={1}
              accWeight={weight}
              openAll={totalDescendants.current < SUBCOMMENTS_OPEN_ALL_LIMIT}
+              parentLink={{
+                to: instance ? `/${instance}/s/${statusID}` : `/s/${statusID}`,
+                onClick: () => resetScrollPosition(statusID),
+              }}
            />
          )}
          {uiState === 'loading' &&
@ -932,6 +946,11 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
    return ids.map((id) => statusKey(id, instance));
  }, [showMore, statuses, limit, instance]);

+  const statusesList = useMemo(
+    () => statuses.slice(0, limit).map(renderStatus),
+    [statuses, limit, renderStatus],
+  );
+
  return (
    <div
      tabIndex="-1"
@ -1176,7 +1195,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
            uiState === 'loading' ? 'loading' : ''
          }`}
        >
-          {statuses.slice(0, limit).map(renderStatus)}
+          {statusesList}
          {showMore > 0 && (
            <li>
              <button
@ -1244,6 +1263,7 @@ function SubComments({
  level,
  accWeight,
  openAll,
+  parentLink,
 }) {
  const [searchParams, setSearchParams] = useSearchParams();

@ -1330,34 +1350,49 @@ function SubComments({
            />
          ))}
        </span>
-        <b>
-          <span title={replies.length}>{shortenNumber(replies.length)}</span>{' '}
-          repl
-          {replies.length === 1 ? 'y' : 'ies'}
-        </b>
-        {!sameCount && totalComments > 1 && (
-          <>
-            {' '}
-            &middot;{' '}
-            <span>
-              <span title={totalComments}>{shortenNumber(totalComments)}</span>{' '}
-              comment
-              {totalComments === 1 ? '' : 's'}
-            </span>
-          </>
+        <span class="replies-counts">
+          <b>
+            <span title={replies.length}>{shortenNumber(replies.length)}</span>{' '}
+            repl
+            {replies.length === 1 ? 'y' : 'ies'}
+          </b>
+          {!sameCount && totalComments > 1 && (
+            <>
+              {' '}
+              &middot;{' '}
+              <span>
+                <span title={totalComments}>
+                  {shortenNumber(totalComments)}
+                </span>{' '}
+                comment
+                {totalComments === 1 ? '' : 's'}
+              </span>
+            </>
+          )}
+        </span>
+        <Icon icon="chevron-down" class="replies-summary-chevron" />
+        {!!parentLink && (
+          <Link
+            class="replies-parent-link"
+            to={parentLink.to}
+            onClick={parentLink.onClick}
+            title="View post with its replies"
+          >
+            &raquo;
+          </Link>
        )}
      </summary>
      <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}> */}
+            > */}
+            <div class="status-focus" tabIndex={0}>
              <Status
                statusID={r.id}
                instance={instance}
@ -1374,8 +1409,8 @@ function SubComments({
                  </span>
                </div>
              )}
-              {/* </div> */}
-            </Link>
+            </div>
+            {/* </Link> */}
            {r.replies?.length && (
              <SubComments
                instance={instance}
@ -1383,6 +1418,12 @@ function SubComments({
                level={level + 1}
                accWeight={!open ? r.weight : totalWeight}
                openAll={openAll}
+                parentLink={{
+                  to: instance ? `/${instance}/s/${r.id}` : `/s/${r.id}`,
+                  onClick: () => {
+                    resetScrollPosition(r.id);
+                  },
+                }}
              />
            )}
          </li>