feat(post-page): enable Update button to refresh replies, add Auto alert translation

Update button calls useReplies().reset() for manual refresh. Auto button
shows translated informational alert. Register reply feed reset in Post
desktop/mobile when on post page.

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

@@ -147,47 +147,32 @@ const RefreshButton = () => {
 
 const UpdateButton = () => {
   const { t } = useTranslation();
-  const isMobile = useIsMobile();
-
-  const handleManualUpdate = () => {
-    window.alert('Manual updates are not available yet. Posts update automatically every ~2 minutes.');
-  };
-
+  const reset = useFeedResetStore((state) => state.reset);
   return (
-    <>
-      {/* TODO: Implement update button once available in API  */}
-      {isMobile ? (
-        <button className={`button ${styles.disabledButton}`} onClick={handleManualUpdate}>
-          {t('update')}
-        </button>
-      ) : (
-        <button className={`button ${styles.disabledButton}`} onClick={handleManualUpdate}>
-          {t('update')}
-        </button>
-      )}
-    </>
+    <button className='button' onClick={() => reset?.()}>
+      {t('update')}
+    </button>
   );
 };
 
 const AutoButton = () => {
   const { t } = useTranslation();
   const isMobile = useIsMobile();
-
-  const handleManualUpdate = () => {
-    window.alert('Manual updates are not available yet. Posts update automatically every ~2 minutes.');
+  const handleAutoClick = () => {
+    window.alert(t('posts_auto_update_info'));
   };
 
   return (
     <>
       {isMobile ? (
-        <button className='button' onClick={handleManualUpdate}>
+        <button className='button' onClick={handleAutoClick}>
           <label>
             <input type='checkbox' className={styles.autoCheckbox} checked disabled />
             {t('Auto')}
           </label>
         </button>
       ) : (
-        <label onClick={handleManualUpdate}>
+        <label onClick={handleAutoClick}>
           {' '}
           <input type='checkbox' className={styles.autoCheckbox} checked disabled /> {t('Auto')}
         </label>

src/components/post-desktop/post-desktop.tsx

@@ -38,6 +38,7 @@ import { shouldShowSnow } from '../../lib/snow';
 import useReplyModalStore from '../../stores/use-reply-modal-store';
 import { selectPostMenuProps } from '../../lib/utils/post-menu-props';
 import useChallengesStore from '../../stores/use-challenges-store';
+import useFeedResetStore from '../../stores/use-feed-reset-store';
 import usePostNumberStore from '../../stores/use-post-number-store';
 import { alertChallengeVerificationFailed } from '../../lib/utils/challenge-utils';
 import { usePublishCommentModeration } from '@plebbit/plebbit-react-hooks';
@@ -626,7 +627,17 @@ const PostDesktop = ({
   const { hidden, unhide, hide } = useHide({ cid });
   const isHidden = hidden && !isInPostPageView;
 
-  const { replies, hasMore, loadMore } = useReplies({ comment: post, flat: true, accountComments: { newerThan: Infinity } });
+  const repliesResult = useReplies({ comment: post, flat: true, accountComments: { newerThan: Infinity } });
+  const { replies, hasMore, loadMore } = repliesResult;
+  const reset = (repliesResult as { reset?: () => Promise<void> }).reset;
+  const setResetFunction = useFeedResetStore((s) => s.setResetFunction);
+  useEffect(() => {
+    if ((isInPostPageView || isInPendingPostView) && reset) {
+      setResetFunction(() => {
+        reset();
+      });
+    }
+  }, [isInPostPageView, isInPendingPostView, reset, setResetFunction]);
   const registerComments = usePostNumberStore((s) => s.registerComments);
   const numberToCid = usePostNumberStore((s) => s.numberToCid);
   const prevCidsRef = useRef<string>('');

src/components/post-mobile/post-mobile.tsx

@@ -34,6 +34,7 @@ import { capitalize, lowerCase } from 'lodash';
 import useReplyModalStore from '../../stores/use-reply-modal-store';
 import { selectPostMenuProps } from '../../lib/utils/post-menu-props';
 import useChallengesStore from '../../stores/use-challenges-store';
+import useFeedResetStore from '../../stores/use-feed-reset-store';
 import usePostNumberStore from '../../stores/use-post-number-store';
 import { alertChallengeVerificationFailed } from '../../lib/utils/challenge-utils';
 
@@ -476,7 +477,17 @@ const PostMobile = ({
   const directories = useDirectories();
   const boardPath = subplebbitAddress ? getBoardPath(subplebbitAddress, directories) : undefined;
   const linksCount = useCountLinksInReplies(post);
-  const { replies, hasMore, loadMore } = useReplies({ comment: post, accountComments: { newerThan: Infinity } });
+  const repliesResult = useReplies({ comment: post, accountComments: { newerThan: Infinity } });
+  const { replies, hasMore, loadMore } = repliesResult;
+  const reset = (repliesResult as { reset?: () => Promise<void> }).reset;
+  const setResetFunction = useFeedResetStore((s) => s.setResetFunction);
+  useEffect(() => {
+    if ((isInPostView || isInPendingPostView) && reset) {
+      setResetFunction(() => {
+        reset();
+      });
+    }
+  }, [isInPostView, isInPendingPostView, reset, setResetFunction]);
   const registerComments = usePostNumberStore((s) => s.registerComments);
   const numberToCid = usePostNumberStore((s) => s.numberToCid);
   const prevCidsRef = useRef<string>('');