feat(multiboards): expand time filters in place

src/hooks/use-expanded-time-filter.ts

@@ -0,0 +1,39 @@
+import { useCallback, useState } from 'react';
+import { getTimeFilterSeconds, type TimeFilterSuggestion } from '../lib/utils/time-filter-utils';
+
+interface UseExpandedTimeFilterOptions {
+  timeFilterName: string;
+  timeFilterSeconds: number | undefined;
+  expandTimeWindow: (newerThan?: number) => Promise<void>;
+}
+
+const useExpandedTimeFilter = ({ timeFilterName, timeFilterSeconds, expandTimeWindow }: UseExpandedTimeFilterOptions) => {
+  const [currentTimeFilterName, setCurrentTimeFilterName] = useState(timeFilterName);
+  const [currentTimeFilterSeconds, setCurrentTimeFilterSeconds] = useState(timeFilterSeconds);
+
+  const expandSuggestionTimeWindow = useCallback(
+    async (suggestion: TimeFilterSuggestion | null) => {
+      if (!suggestion) {
+        return;
+      }
+
+      const nextTimeFilterSeconds = getTimeFilterSeconds(suggestion.timeFilterName);
+      if (typeof nextTimeFilterSeconds !== 'number') {
+        return;
+      }
+
+      await expandTimeWindow(nextTimeFilterSeconds);
+      setCurrentTimeFilterName(suggestion.timeFilterName);
+      setCurrentTimeFilterSeconds(nextTimeFilterSeconds);
+    },
+    [expandTimeWindow],
+  );
+
+  return {
+    currentTimeFilterName,
+    currentTimeFilterSeconds,
+    expandSuggestionTimeWindow,
+  };
+};
+
+export default useExpandedTimeFilter;

src/lib/utils/time-filter-utils.ts

@@ -55,7 +55,7 @@ const convertDynamicTimeFilterNameToSeconds = (timeFilterName: string): number |
   }
 };
 
-const getTimeFilterSeconds = (timeFilterName: string | null | undefined): number | undefined => {
+export const getTimeFilterSeconds = (timeFilterName: string | null | undefined): number | undefined => {
   if (!timeFilterName || timeFilterName === 'all') {
     return undefined;
   }

src/views/board/__tests__/board.test.tsx

@@ -41,6 +41,7 @@ const testState = vi.hoisted(() => ({
   lastVirtuosoDefaultItemHeight: undefined as number | undefined,
   lastVirtuosoIncreaseViewportBy: undefined as { top: number; bottom: number } | undefined,
   lastVirtuosoMinOverscanItemCount: undefined as { top: number; bottom: number } | undefined,
+  expandTimeWindowMock: vi.fn(),
   loadMoreMock: vi.fn(),
   pageSizes: {
     guiPostsPerPage: 2,
@@ -135,6 +136,7 @@ vi.mock('@bitsocialnet/bitsocial-react-hooks', () => ({
     return {
       feed: getScopedFeed(options),
       hasMore: testState.hasMore,
+      expandTimeWindow: testState.expandTimeWindowMock,
       loadMore: testState.loadMoreMock,
       reset: testState.resetMock,
     };
@@ -551,7 +553,32 @@ describe('Board', () => {
         expect.objectContaining({ newerThan: 365 * 24 * 60 * 60 }),
       ]),
     );
-    expect(Array.from(container.querySelectorAll('a')).some((link) => link.getAttribute('href') === '/all?t=1w')).toBe(true);
+    expect(container.querySelector('[data-testid="expand-time-window-button"]')).toBeTruthy();
+  });
+
+  it('expands the multiboard time window in place from the footer suggestion', async () => {
+    const now = Math.floor(Date.now() / 1000);
+    localStorage.setItem(LAST_VISIT_STORAGE_KEY, String((now - 3 * 24 * 60 * 60) * 1000));
+    testState.feed = [
+      { cid: 'recent-post', communityAddress: 'music-posting.eth', timestamp: now - 2 * 24 * 60 * 60 },
+      { cid: 'older-post', communityAddress: 'music-posting.eth', timestamp: now - 5 * 24 * 60 * 60 },
+    ];
+
+    await renderBoard({
+      boardProps: { viewType: 'all' },
+      initialEntry: '/all?t=last',
+      routePath: '/all/*',
+    });
+
+    const expandButton = container.querySelector('[data-testid="expand-time-window-button"]');
+    expect(expandButton).toBeTruthy();
+    expect(Array.from(container.querySelectorAll('a')).some((link) => link.getAttribute('href') === '/all?t=1w')).toBe(false);
+
+    await act(async () => {
+      expandButton?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    });
+
+    expect(testState.expandTimeWindowMock).toHaveBeenCalledWith(7 * 24 * 60 * 60);
   });
 
   it('keeps broader suggestion feeds on the base page size so their identities stay stable while scrolling', async () => {

src/views/board/board.module.css

@@ -23,10 +23,24 @@
   color: var(--button-desktop-text-color);
 }
 
+.morePostsSuggestionAction {
+  background: none;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+  text-decoration: var(--button-text-decoration);
+  color: var(--button-desktop-text-color);
+  font: inherit;
+}
+
 .footer a:hover {
   color: var(--button-desktop-text-color-hover);
 }
 
+.morePostsSuggestionAction:hover {
+  color: var(--button-desktop-text-color-hover);
+}
+
 .button {
   text-transform: capitalize;
   color: var(--button-desktop-text-color);

src/views/board/board.tsx

@@ -17,6 +17,7 @@ import useFeedResetStore from '../../stores/use-feed-reset-store';
 import useFeedViewSettingsStore from '../../stores/use-feed-view-settings-store';
 import usePostNumberStore from '../../stores/use-post-number-store';
 import { useBoardFeedPageSize } from '../../hooks/use-board-feed-page-size';
+import useExpandedTimeFilter from '../../hooks/use-expanded-time-filter';
 import useIsMobile from '../../hooks/use-is-mobile';
 import { useSuggestionFeedLoader } from '../../hooks/use-suggestion-feed-loader';
 import useTimeFilter from '../../hooks/use-time-filter';
@@ -54,6 +55,7 @@ interface BoardFooterProps {
   moreThreadsSuggestion: TimeFilterSuggestion | null;
   moreThreadsSuggestionPathname: string | null;
   moreThreadsSuggestionSearch: string;
+  onExpandTimeWindow?: (suggestion: TimeFilterSuggestion) => void | Promise<void>;
   communityState: string | undefined;
   subscriptionsLength: number;
   accountCommunityAddressesLength: number;
@@ -74,6 +76,7 @@ const BoardFooter = ({
   moreThreadsSuggestion,
   moreThreadsSuggestionPathname,
   moreThreadsSuggestionSearch,
+  onExpandTimeWindow,
   communityState,
   subscriptionsLength,
   accountCommunityAddressesLength,
@@ -91,7 +94,16 @@ const BoardFooter = ({
           i18nKey={moreThreadsSuggestion.i18nKey}
           values={{ currentTimeFilterName, count: combinedFeedLength }}
           components={{
-            1: (
+            1: onExpandTimeWindow ? (
+              <button
+                type='button'
+                data-testid='expand-time-window-button'
+                className={styles.morePostsSuggestionAction}
+                onClick={() => {
+                  void onExpandTimeWindow(moreThreadsSuggestion);
+                }}
+              />
+            ) : (
               <Link
                 to={{ pathname: moreThreadsSuggestionPathname, search: getSearchWithTimeFilter(moreThreadsSuggestionSearch, moreThreadsSuggestion.timeFilterName) }}
               />
@@ -201,11 +213,16 @@ const Board = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp, t
     [communities, effectiveInfiniteScroll, infiniteFeedPostsPerPage, paginationFeedPostsPerPage, excludeArchivedFilter, multiboardTimeFilterSeconds],
   );
 
-  const { feed, hasMore, loadMore, reset } = useFeed(feedOptions);
-  const shouldProbeSuggestionFeeds = isVisible && isMultiboardView && typeof multiboardTimeFilterSeconds === 'number';
-  const shouldProbeWeeklyFeed = shouldProbeSuggestionFeeds && multiboardTimeFilterSeconds < WEEK_IN_SECONDS;
-  const shouldProbeMonthlyFeed = shouldProbeSuggestionFeeds && multiboardTimeFilterSeconds < MONTH_IN_SECONDS;
-  const shouldProbeYearlyFeed = shouldProbeSuggestionFeeds && multiboardTimeFilterSeconds < YEAR_IN_SECONDS;
+  const { feed, hasMore, loadMore, reset, expandTimeWindow } = useFeed(feedOptions);
+  const { currentTimeFilterName, currentTimeFilterSeconds, expandSuggestionTimeWindow } = useExpandedTimeFilter({
+    timeFilterName,
+    timeFilterSeconds: multiboardTimeFilterSeconds,
+    expandTimeWindow,
+  });
+  const shouldProbeSuggestionFeeds = isVisible && isMultiboardView && typeof currentTimeFilterSeconds === 'number';
+  const shouldProbeWeeklyFeed = shouldProbeSuggestionFeeds && currentTimeFilterSeconds < WEEK_IN_SECONDS;
+  const shouldProbeMonthlyFeed = shouldProbeSuggestionFeeds && currentTimeFilterSeconds < MONTH_IN_SECONDS;
+  const shouldProbeYearlyFeed = shouldProbeSuggestionFeeds && currentTimeFilterSeconds < YEAR_IN_SECONDS;
   // Keep suggestion feeds on a stable hook identity; the loader widens them by paging, not by recreating the feed.
   const suggestionPostsPerPage = infiniteFeedPostsPerPage;
   const suggestionRequestKeyBase = `${location.pathname}${location.search}`;
@@ -328,8 +345,8 @@ const Board = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp, t
     [effectiveInfiniteScroll, combinedFeed, guiPostsPerPage, maxGuiPages],
   );
   const moreThreadsSuggestion = useMemo(
-    () => (isMultiboardView ? getTimeFilterSuggestion(feed.length, weeklyFeed.length, monthlyFeed.length, yearlyFeed.length, multiboardTimeFilterSeconds) : null),
-    [feed.length, isMultiboardView, monthlyFeed.length, multiboardTimeFilterSeconds, weeklyFeed.length, yearlyFeed.length],
+    () => (isMultiboardView ? getTimeFilterSuggestion(feed.length, weeklyFeed.length, monthlyFeed.length, yearlyFeed.length, currentTimeFilterSeconds) : null),
+    [currentTimeFilterSeconds, feed.length, isMultiboardView, monthlyFeed.length, weeklyFeed.length, yearlyFeed.length],
   );
   const moreThreadsSuggestionPathname = isInAllView ? '/all' : isInSubscriptionsView ? '/subs' : isInModView ? '/mod' : null;
   const registerComments = usePostNumberStore((state) => state.registerComments);
@@ -408,10 +425,11 @@ const Board = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp, t
             combinedFeedLength={combinedFeed.length}
             isInSubscriptionsView={isInSubscriptionsView}
             isInModView={isInModView}
-            currentTimeFilterName={timeFilterName}
+            currentTimeFilterName={currentTimeFilterName}
             moreThreadsSuggestion={moreThreadsSuggestion}
             moreThreadsSuggestionPathname={moreThreadsSuggestionPathname}
             moreThreadsSuggestionSearch={location.search}
+            onExpandTimeWindow={expandSuggestionTimeWindow}
             communityState={communityState}
             subscriptionsLength={subscriptions?.length || 0}
             accountCommunityAddressesLength={accountCommunityAddresses?.length || 0}
@@ -486,9 +504,10 @@ const Board = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp, t
       combinedFeed.length,
       isInSubscriptionsView,
       isInModView,
-      timeFilterName,
+      currentTimeFilterName,
       moreThreadsSuggestion,
       moreThreadsSuggestionPathname,
+      expandSuggestionTimeWindow,
       communityState,
       communityAddress,
       subscriptions?.length,

src/views/catalog/__tests__/catalog.test.tsx

@@ -51,6 +51,7 @@ const testState = vi.hoisted(() => ({
   hasMore: false,
   imageSize: 'Small' as 'Large' | 'Small',
   incrementFilterCountMock: vi.fn(),
+  expandTimeWindowMock: vi.fn(),
   loadMoreMock: vi.fn(),
   pageSizes: {
     guiPostsPerPage: 2,
@@ -161,6 +162,7 @@ vi.mock('@bitsocialnet/bitsocial-react-hooks', () => ({
     return {
       feed: getScopedFeed(options),
       hasMore: testState.hasMore,
+      expandTimeWindow: testState.expandTimeWindowMock,
       loadMore: testState.loadMoreMock,
       reset: testState.resetMock,
     };
@@ -504,7 +506,32 @@ describe('Catalog', () => {
         expect.objectContaining({ newerThan: 365 * 24 * 60 * 60 }),
       ]),
     );
-    expect(Array.from(container.querySelectorAll('a')).some((link) => link.getAttribute('href') === '/all/catalog?t=1w')).toBe(true);
+    expect(container.querySelector('[data-testid="expand-time-window-button"]')).toBeTruthy();
+  });
+
+  it('expands the multiboard catalog time window in place from the footer suggestion', async () => {
+    const now = Math.floor(Date.now() / 1000);
+    localStorage.setItem(LAST_VISIT_STORAGE_KEY, String((now - 3 * 24 * 60 * 60) * 1000));
+    testState.feed = [
+      { cid: 'recent-post', title: 'recent', communityAddress: 'music-posting.eth', timestamp: now - 2 * 24 * 60 * 60 },
+      { cid: 'older-post', title: 'older', communityAddress: 'music-posting.eth', timestamp: now - 5 * 24 * 60 * 60 },
+    ];
+
+    await renderCatalog({
+      catalogProps: { viewType: 'all' },
+      initialEntry: '/all/catalog?t=last',
+      routePath: '/all/*',
+    });
+
+    const expandButton = container.querySelector('[data-testid="expand-time-window-button"]');
+    expect(expandButton).toBeTruthy();
+    expect(Array.from(container.querySelectorAll('a')).some((link) => link.getAttribute('href') === '/all/catalog?t=1w')).toBe(false);
+
+    await act(async () => {
+      expandButton?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    });
+
+    expect(testState.expandTimeWindowMock).toHaveBeenCalledWith(7 * 24 * 60 * 60);
   });
 
   it('keeps broader catalog suggestion feeds on the base page size so their identities stay stable while scrolling', async () => {

src/views/catalog/catalog.module.css

@@ -12,10 +12,24 @@
   color: var(--button-desktop-text-color);
 }
 
+.morePostsSuggestionAction {
+  background: none;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+  text-decoration: var(--button-text-decoration);
+  color: var(--button-desktop-text-color);
+  font: inherit;
+}
+
 .footer a:hover {
   color: var(--button-desktop-text-color-hover);
 }
 
+.morePostsSuggestionAction:hover {
+  color: var(--button-desktop-text-color-hover);
+}
+
 @media (max-width: 640px) {
   .footer {
     padding-left: 5px;

src/views/catalog/catalog.tsx

@@ -10,6 +10,7 @@ import { useAccountCommunityAddresses } from '../../hooks/use-account-community-
 import { useFilteredDirectoryAddresses } from '../../hooks/use-filtered-directory-addresses';
 import { useResolvedCommunityAddress } from '../../hooks/use-resolved-community-address';
 import { useFeedStateString } from '../../hooks/use-state-string';
+import useExpandedTimeFilter from '../../hooks/use-expanded-time-filter';
 import { useSuggestionFeedLoader } from '../../hooks/use-suggestion-feed-loader';
 import useTimeFilter from '../../hooks/use-time-filter';
 import useIsMobile from '../../hooks/use-is-mobile';
@@ -57,6 +58,7 @@ interface CatalogFooterProps {
   moreThreadsSuggestion: TimeFilterSuggestion | null;
   moreThreadsSuggestionPathname: string | null;
   moreThreadsSuggestionSearch: string;
+  onExpandTimeWindow?: (suggestion: TimeFilterSuggestion) => void | Promise<void>;
   /** When false, suppress the loading ellipsis (e.g. non-infinite mode) */
   showLoadingEllipsis?: boolean;
 }
@@ -72,6 +74,7 @@ const CatalogFooter = ({
   moreThreadsSuggestion,
   moreThreadsSuggestionPathname,
   moreThreadsSuggestionSearch,
+  onExpandTimeWindow,
   showLoadingEllipsis = true,
 }: CatalogFooterProps) => {
   const { t } = useTranslation();
@@ -86,7 +89,16 @@ const CatalogFooter = ({
           i18nKey={moreThreadsSuggestion.i18nKey}
           values={{ currentTimeFilterName, count: combinedFeedLength }}
           components={{
-            1: (
+            1: onExpandTimeWindow ? (
+              <button
+                type='button'
+                data-testid='expand-time-window-button'
+                className={styles.morePostsSuggestionAction}
+                onClick={() => {
+                  void onExpandTimeWindow(moreThreadsSuggestion);
+                }}
+              />
+            ) : (
               <Link
                 to={{ pathname: moreThreadsSuggestionPathname, search: getSearchWithTimeFilter(moreThreadsSuggestionSearch, moreThreadsSuggestion.timeFilterName) }}
               />
@@ -341,11 +353,16 @@ const Catalog = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp,
     multiboardTimeFilterSeconds,
   ]);
 
-  const { feed, hasMore, loadMore, reset } = useFeed(feedOptions);
-  const shouldProbeSuggestionFeeds = isVisible && isMultiboard && typeof multiboardTimeFilterSeconds === 'number';
-  const shouldProbeWeeklyFeed = shouldProbeSuggestionFeeds && multiboardTimeFilterSeconds < WEEK_IN_SECONDS;
-  const shouldProbeMonthlyFeed = shouldProbeSuggestionFeeds && multiboardTimeFilterSeconds < MONTH_IN_SECONDS;
-  const shouldProbeYearlyFeed = shouldProbeSuggestionFeeds && multiboardTimeFilterSeconds < YEAR_IN_SECONDS;
+  const { feed, hasMore, loadMore, reset, expandTimeWindow } = useFeed(feedOptions);
+  const { currentTimeFilterName, currentTimeFilterSeconds, expandSuggestionTimeWindow } = useExpandedTimeFilter({
+    timeFilterName,
+    timeFilterSeconds: multiboardTimeFilterSeconds,
+    expandTimeWindow,
+  });
+  const shouldProbeSuggestionFeeds = isVisible && isMultiboard && typeof currentTimeFilterSeconds === 'number';
+  const shouldProbeWeeklyFeed = shouldProbeSuggestionFeeds && currentTimeFilterSeconds < WEEK_IN_SECONDS;
+  const shouldProbeMonthlyFeed = shouldProbeSuggestionFeeds && currentTimeFilterSeconds < MONTH_IN_SECONDS;
+  const shouldProbeYearlyFeed = shouldProbeSuggestionFeeds && currentTimeFilterSeconds < YEAR_IN_SECONDS;
   const suggestionFilter = useMemo(
     () => createCombinedFilter(filterItems, searchText, communityAddress || 'all', undefined, false),
     [communityAddress, filterItems, searchText],
@@ -473,8 +490,8 @@ const Catalog = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp,
     [effectiveInfiniteScroll, combinedFeed, boardPostsPerPage, maxGuiPages],
   );
   const moreThreadsSuggestion = useMemo(
-    () => (isMultiboard ? getTimeFilterSuggestion(feed.length, weeklyFeed.length, monthlyFeed.length, yearlyFeed.length, multiboardTimeFilterSeconds) : null),
-    [feed.length, isMultiboard, monthlyFeed.length, multiboardTimeFilterSeconds, weeklyFeed.length, yearlyFeed.length],
+    () => (isMultiboard ? getTimeFilterSuggestion(feed.length, weeklyFeed.length, monthlyFeed.length, yearlyFeed.length, currentTimeFilterSeconds) : null),
+    [currentTimeFilterSeconds, feed.length, isMultiboard, monthlyFeed.length, weeklyFeed.length, yearlyFeed.length],
   );
   const moreThreadsSuggestionPathname = isInAllView ? '/all/catalog' : isInSubscriptionsView ? '/subs/catalog' : isInModView ? '/mod/catalog' : null;
 
@@ -508,10 +525,11 @@ const Catalog = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp,
             communityAddresses={communityAddresses}
             hasMore={hasMore}
             combinedFeedLength={cappedFeed.length}
-            currentTimeFilterName={timeFilterName}
+            currentTimeFilterName={currentTimeFilterName}
             moreThreadsSuggestion={moreThreadsSuggestion}
             moreThreadsSuggestionPathname={moreThreadsSuggestionPathname}
             moreThreadsSuggestionSearch={location.search}
+            onExpandTimeWindow={expandSuggestionTimeWindow}
             showLoadingEllipsis={effectiveInfiniteScroll}
           />
           <PageFooterDesktop
@@ -539,9 +557,10 @@ const Catalog = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp,
       communityAddresses,
       hasMore,
       cappedFeed.length,
-      timeFilterName,
+      currentTimeFilterName,
       moreThreadsSuggestion,
       moreThreadsSuggestionPathname,
+      expandSuggestionTimeWindow,
       communityAddress,
       isInAllView,
       isInSubscriptionsView,
@@ -557,10 +576,11 @@ const Catalog = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp,
           communityAddresses={communityAddresses}
           hasMore={hasMore}
           combinedFeedLength={cappedFeed.length}
-          currentTimeFilterName={timeFilterName}
+          currentTimeFilterName={currentTimeFilterName}
           moreThreadsSuggestion={moreThreadsSuggestion}
           moreThreadsSuggestionPathname={moreThreadsSuggestionPathname}
           moreThreadsSuggestionSearch={location.search}
+          onExpandTimeWindow={expandSuggestionTimeWindow}
           showLoadingEllipsis={effectiveInfiniteScroll}
         />
         <PageFooterDesktop
@@ -587,9 +607,10 @@ const Catalog = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp,
       communityAddresses,
       hasMore,
       cappedFeed.length,
-      timeFilterName,
+      currentTimeFilterName,
       moreThreadsSuggestion,
       moreThreadsSuggestionPathname,
+      expandSuggestionTimeWindow,
       communityAddress,
       isInAllView,
       isInSubscriptionsView,