@@ -60,7 +71,7 @@ export const StyleOnlyFooterFirstRow = () => {
/* -----------------------------------------------------------------------------
* CatalogFooterFirstRow
- * Catalog footer first row: Return, Archive, Top, Refresh on left; Style selector on right.
+ * Catalog footer nav row: Return, Catalog, Top, Refresh, plus search/filter label.
* -------------------------------------------------------------------------- */
interface CatalogFooterFirstRowProps {
@@ -71,7 +82,6 @@ interface CatalogFooterFirstRowProps {
}
export const CatalogFooterFirstRow = ({ communityAddress, isInAllView = false, isInSubscriptionsView = false, isInModView = false }: CatalogFooterFirstRowProps) => {
- const { t } = useTranslation();
return (
@@ -87,15 +97,27 @@ export const CatalogFooterFirstRow = ({ communityAddress, isInAllView = false, i
[]
-
-
- {t('style')}:
-
+
);
};
+/* -----------------------------------------------------------------------------
+ * CatalogFooterStyleRow
+ * Catalog style selector on its own row (below nav, above BoardsBar).
+ * -------------------------------------------------------------------------- */
+
+export const CatalogFooterStyleRow = () => {
+ const { t } = useTranslation();
+ return (
+
+ {t('style')}:
+
+
+ );
+};
+
/* -----------------------------------------------------------------------------
* ThreadFooterStyleRow
* Style selector on its own row (thread page only, below first row, above BoardsBar).
diff --git a/src/components/footer/index.ts b/src/components/footer/index.ts
index 447fa44b..428b2df9 100644
--- a/src/components/footer/index.ts
+++ b/src/components/footer/index.ts
@@ -3,6 +3,7 @@ export {
PageFooterMobile,
StyleOnlyFooterFirstRow,
CatalogFooterFirstRow,
+ CatalogFooterStyleRow,
ThreadFooterFirstRow,
ThreadFooterStyleRow,
ThreadFooterMobile,
diff --git a/src/views/catalog/__tests__/catalog.test.tsx b/src/views/catalog/__tests__/catalog.test.tsx
index 1b9ea3d5..5734b073 100644
--- a/src/views/catalog/__tests__/catalog.test.tsx
+++ b/src/views/catalog/__tests__/catalog.test.tsx
@@ -322,8 +322,15 @@ vi.mock('../../../components/catalog-row', () => ({
vi.mock('../../../components/footer', () => ({
CatalogFooterFirstRow: ({ communityAddress }: { communityAddress?: string }) =>
- createElement('div', { 'data-testid': 'catalog-first-row' }, communityAddress || 'multi'),
- PageFooterDesktop: ({ firstRow }: { firstRow: React.ReactNode }) => createElement('div', { 'data-testid': 'catalog-footer-desktop' }, firstRow),
+ createElement(
+ 'div',
+ { 'data-testid': 'catalog-first-row' },
+ communityAddress || 'multi',
+ testState.searchText ? ` - search_results_for: ${testState.searchText}` : null,
+ ),
+ CatalogFooterStyleRow: () => createElement('div', { 'data-testid': 'catalog-style-row' }, 'style'),
+ PageFooterDesktop: ({ firstRow, styleRow }: { firstRow?: React.ReactNode; styleRow?: React.ReactNode }) =>
+ createElement('div', { 'data-testid': 'catalog-footer-desktop' }, firstRow, styleRow),
PageFooterMobile: ({ children }: { children: React.ReactNode }) => createElement('div', { 'data-testid': 'catalog-footer-mobile' }, children),
}));
@@ -902,6 +909,22 @@ describe('Catalog', () => {
expect(container.querySelector('[data-testid="catalog-first-row"]')?.textContent).toBe('music-posting.eth');
});
+ it('shows centered nothing found when catalog search has no matches', async () => {
+ testState.feed = [{ cid: 'network-post', title: 'cats on stage', communityAddress: 'music-posting.eth' }];
+ testState.searchText = 'asddasd';
+ testState.hasMore = false;
+
+ await renderCatalog({ initialEntry: '/mu/catalog?q=asddasd', routePath: '/:boardIdentifier/catalog' });
+
+ expect(container.textContent).toContain('nothing_found');
+ expect(container.textContent).not.toContain('no_threads');
+ expect(container.querySelector('[role="status"]')?.className).toContain('searchNothingFound');
+ expect(container.querySelector('[role="status"]')?.textContent).toBe('nothing_found');
+ expect(container.querySelectorAll('[data-testid="catalog-row"]')).toHaveLength(0);
+ expect(container.textContent).toContain('search_results_for');
+ expect(container.textContent).toContain('asddasd');
+ });
+
it('queries scoped recent account posts and still applies local search filtering before injecting them', async () => {
const currentTimestamp = Math.floor(Date.now() / 1000);
testState.feed = [{ cid: 'network-post', title: 'cats on stage', communityAddress: 'music-posting.eth' }];
diff --git a/src/views/catalog/catalog.module.css b/src/views/catalog/catalog.module.css
index 25c758b5..e0964db8 100644
--- a/src/views/catalog/catalog.module.css
+++ b/src/views/catalog/catalog.module.css
@@ -3,6 +3,22 @@
color: var(--post-mobile-abbr-text-color);
}
+.stateString {
+ padding: 15px 0 10px 5px;
+ color: var(--post-mobile-abbr-text-color);
+}
+
+.searchNothingFound {
+ color: red;
+ display: block;
+ margin: 0;
+ padding: 1em 0;
+ text-align: center;
+ font-size: x-large;
+ font-weight: bold;
+ line-height: normal;
+}
+
.morePostsSuggestion {
padding-bottom: 5px;
}
diff --git a/src/views/catalog/catalog.tsx b/src/views/catalog/catalog.tsx
index 4f4f1afb..f2307a8a 100644
--- a/src/views/catalog/catalog.tsx
+++ b/src/views/catalog/catalog.tsx
@@ -25,7 +25,7 @@ import useSortingStore from '../../stores/use-sorting-store';
import useCatalogFiltersStore from '../../stores/use-catalog-filters-store';
import { getCommunityAddress, isDirectoryBoard, normalizeMultiboardFeedPath } from '../../lib/utils/route-utils';
import CatalogRow from '../../components/catalog-row';
-import { CatalogFooterFirstRow, PageFooterDesktop, PageFooterMobile } from '../../components/footer';
+import { CatalogFooterFirstRow, CatalogFooterStyleRow, PageFooterDesktop, PageFooterMobile } from '../../components/footer';
import { ReturnButton, ArchiveButton, TopButton, RefreshButton } from '../../components/board-buttons/board-buttons';
import mobileFooterStyles from '../../components/footer/footer.module.css';
import LoadingEllipsis from '../../components/loading-ellipsis';
@@ -131,6 +131,20 @@ const CatalogFooter = ({
// Separate component for the loading state when there's no feed
// This also calls useFeedStateString internally to isolate re-renders
+interface CatalogSearchNothingFoundProps {
+ className?: string;
+}
+
+const CatalogSearchNothingFound = ({ className }: CatalogSearchNothingFoundProps) => {
+ const { t } = useTranslation();
+
+ return (
+
+ {t('nothing_found')}
+
+ );
+};
+
interface CatalogLoadingProps {
communityAddresses: string[];
hasMore: boolean;
@@ -138,9 +152,10 @@ interface CatalogLoadingProps {
state: string | undefined;
subscriptionsLength: number;
error: Error | undefined;
+ hasActiveSearch: boolean;
}
-const CatalogLoading = ({ communityAddresses, hasMore, combinedFeedLength, state, subscriptionsLength, error }: CatalogLoadingProps) => {
+const CatalogLoading = ({ communityAddresses, hasMore, combinedFeedLength, state, subscriptionsLength, error, hasActiveSearch }: CatalogLoadingProps) => {
const { t } = useTranslation();
const rawFeedStateString = useFeedStateString(communityAddresses);
@@ -153,7 +168,9 @@ const CatalogLoading = ({ communityAddresses, hasMore, combinedFeedLength, state
) : subscriptionsLength === 0 ? (
{t('not_subscribed_to_any_board')}
) : !hasMore && combinedFeedLength === 0 ? (
- t('no_threads')
+ hasActiveSearch ? null : (
+ t('no_threads')
+ )
) : (
hasMore &&
)}
@@ -587,6 +604,11 @@ const Catalog = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp,
const footerMoreThreadsSuggestion = showHiddenThreads ? null : moreThreadsSuggestion;
const footerShowLoadingEllipsis = showHiddenThreads ? isLoadingHiddenCatalogThreads : effectiveInfiniteScroll;
+ const catalogFooterFirstRow = (
+
+ );
+ const catalogFooterStyleRow =
;
+
// Memoize footer component to preserve identity across renders (Virtuoso optimization)
// Note: useFeedStateString is called inside CatalogFooter to isolate re-renders from backend state changes
const footerComponents = useMemo(
@@ -604,16 +626,7 @@ const Catalog = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp,
onExpandTimeWindow={expandSuggestionTimeWindow}
showLoadingEllipsis={footerShowLoadingEllipsis}
/>
-
- }
- />
+
@@ -633,6 +646,8 @@ const Catalog = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp,
footerMoreThreadsSuggestion,
moreThreadsSuggestionPathname,
expandSuggestionTimeWindow,
+ catalogFooterFirstRow,
+ catalogFooterStyleRow,
communityAddress,
isInAllView,
isInSubscriptionsView,
@@ -655,16 +670,7 @@ const Catalog = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp,
onExpandTimeWindow={expandSuggestionTimeWindow}
showLoadingEllipsis={footerShowLoadingEllipsis}
/>
-
- }
- />
+
@@ -683,6 +689,8 @@ const Catalog = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp,
footerMoreThreadsSuggestion,
moreThreadsSuggestionPathname,
expandSuggestionTimeWindow,
+ catalogFooterFirstRow,
+ catalogFooterStyleRow,
communityAddress,
isInAllView,
isInSubscriptionsView,
@@ -692,6 +700,9 @@ const Catalog = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp,
],
);
const isFeedLoaded = feed.length > 0 || hiddenThreadsCount > 0 || state === 'failed';
+ const hasActiveSearch = searchText.trim().length > 0;
+ const showSearchNothingFound =
+ hasActiveSearch && !footerHasMore && footerCombinedFeedLength === 0 && state !== 'failed' && !(isInSubscriptionsView && (subscriptions?.length || 0) === 0);
// Process the feed to move "top" posts to the top (applied after display sort)
const processedFeed = useMemo(() => {
@@ -896,6 +907,21 @@ const Catalog = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp,
)}
+ ) : showSearchNothingFound ? (
+ <>
+
+
+ {catalogFooterFirstRow}
+
+
+
+
+
) : (
<>
@@ -906,18 +932,10 @@ const Catalog = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp,
state={state}
subscriptionsLength={isInSubscriptionsView ? subscriptions?.length || 0 : 1}
error={error}
+ hasActiveSearch={hasActiveSearch}
/>
-
- }
- />
+