feat(thread-stats): show board page number in post stats via cache-first lookup

src/components/board-buttons/board-buttons.tsx

@@ -2,6 +2,7 @@ import { useTranslation } from 'react-i18next';
 import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
 import { useAccountComment, useComment, useSubscribe } from '@plebbit/plebbit-react-hooks';
 import { isAllView, isCatalogView, isModView, isModQueueView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
+import { usePostPageNumber } from '../../hooks/use-post-page-number';
 import { useDirectories } from '../../hooks/use-directories';
 import { getBoardPath, isDirectoryBoard } from '../../lib/utils/route-utils';
 import { useResolvedSubplebbitAddress } from '../../hooks/use-resolved-subplebbit-address';
@@ -457,7 +458,11 @@ export const MobileBoardButtons = () => {
 export const PostPageStats = () => {
   const { t } = useTranslation();
   const params = useParams();
+  const location = useLocation();
   const commentCid = params?.commentCid as string | undefined;
+  const resolvedAddress = useResolvedSubplebbitAddress();
+  const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any });
+  const subplebbitAddress = resolvedAddress || accountComment?.subplebbitAddress;
 
   const comment = useComment({ commentCid });
   const postCid = comment?.parentCid ?? commentCid;
@@ -466,6 +471,13 @@ export const PostPageStats = () => {
   const { closed, pinned, replyCount } = post || {};
   const linkCount = useCountLinksInReplies(post);
 
+  const isThreadView = isPostPageView(location.pathname, params);
+  const pageNumber = usePostPageNumber({
+    subplebbitAddress,
+    postCid,
+    enabled: isThreadView,
+  });
+
   const displayReplyCount = replyCount !== undefined ? replyCount.toString() : '?';
   const replyCountTooltip = replyCount !== undefined ? capitalize(t('replies')) : t('loading');
 
@@ -474,6 +486,12 @@ export const PostPageStats = () => {
       {pinned && `${capitalize(t('sticky'))} / `}
       {closed && `${capitalize(t('closed'))} / `}
       <Tooltip content={replyCountTooltip}>{displayReplyCount}</Tooltip> / <Tooltip content={capitalize(t('links'))}>{linkCount?.toString()}</Tooltip>
+      {isThreadView && (
+        <>
+          {' '}
+          / <Tooltip content={pageNumber != null ? t('pagination.pageLabel') : t('loading')}>{pageNumber?.toString() ?? '?'}</Tooltip>
+        </>
+      )}
     </span>
   );
 };