External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(board): add search bar to board page, redirect to catalog view

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2025-06-04 16:36:16 +02:00
parent 20c601ac18
commit 53e04823df
2 changed files with 90 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/board-buttons/board-buttons.module.css
+21
View File
@@ -88,6 +88,27 @@
margin-bottom: 15px;
}
.searchOPsInput {
height: 16px;
line-height: 16px;
margin-left: 2px;
padding: 0 2px;
width: 120px;
margin: 0px;
margin-right: 4px;
padding: 0 2px;
border: var(--post-form-field-input-border, revert);
background-color: var(--post-form-field-input-background-color, revert);
color: var(--post-form-field-input-color);
outline: none;
font-family: arial, helvetica, sans-serif;
font-size: 10pt;
}
.searchOPsInput:focus {
border: var(--post-form-field-input-focus-border, revert);
}
@media (max-width: 640px) {
.desktopBoardButtons {
display: none;
src/components/board-buttons/board-buttons.tsx
+69 -16
View File
@@ -3,7 +3,7 @@ import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
import { useAccountComment, useSubscribe } from '@plebbit/plebbit-react-hooks';
import useSubplebbitsStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits';
import useSubplebbitsPagesStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits-pages';
import { isAllView, isCatalogView, isDescriptionView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
import { isAllView, isCatalogView, isDescriptionView, isModView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
import useCatalogFiltersStore from '../../stores/use-catalog-filters-store';
import useCatalogStyleStore from '../../stores/use-catalog-style-store';
import useFeedResetStore from '../../stores/use-feed-reset-store';
@@ -22,10 +22,11 @@ interface BoardButtonsProps {
isInAllView?: boolean;
isInCatalogView?: boolean;
isInSubscriptionsView?: boolean;
isInModView?: boolean;
isTopbar?: boolean;
}
const CatalogButton = ({ address, isInAllView, isInSubscriptionsView }: BoardButtonsProps) => {
const CatalogButton = ({ address, isInAllView, isInSubscriptionsView, isInModView }: BoardButtonsProps) => {
const { t } = useTranslation();
const params = useParams();
@@ -36,6 +37,9 @@ const CatalogButton = ({ address, isInAllView, isInSubscriptionsView }: BoardBut
} else if (isInSubscriptionsView) {
if (params?.timeFilterName) return `/p/subscriptions/catalog/${params.timeFilterName}`;
return `/p/subscriptions/catalog`;
} else if (isInModView) {
if (params?.timeFilterName) return `/p/mod/catalog/${params.timeFilterName}`;
return `/p/mod/catalog`;
}
return `/p/${address}/catalog`;
};
@@ -58,7 +62,7 @@ const SubscribeButton = ({ address }: BoardButtonsProps) => {
);
};
const ReturnButton = ({ address, isInAllView, isInSubscriptionsView }: BoardButtonsProps) => {
const ReturnButton = ({ address, isInAllView, isInSubscriptionsView, isInModView }: BoardButtonsProps) => {
const { t } = useTranslation();
const params = useParams();
@@ -69,6 +73,9 @@ const ReturnButton = ({ address, isInAllView, isInSubscriptionsView }: BoardButt
} else if (isInSubscriptionsView) {
if (params?.timeFilterName) return `/p/subscriptions/${params.timeFilterName}`;
return `/p/subscriptions`;
} else if (isInModView) {
if (params?.timeFilterName) return `/p/mod/${params.timeFilterName}`;
return `/p/mod`;
}
return `/p/${address}`;
};
@@ -190,7 +197,7 @@ const ShowOPCommentOption = () => {
);
};
export const TimeFilter = ({ isInAllView, isInCatalogView, isInSubscriptionsView, isTopbar = false }: BoardButtonsProps) => {
export const TimeFilter = ({ isInAllView, isInCatalogView, isInSubscriptionsView, isInModView, isTopbar = false }: BoardButtonsProps) => {
const { t } = useTranslation();
const navigate = useNavigate();
const { timeFilterName, timeFilterNames } = useTimeFilter();
@@ -205,6 +212,10 @@ export const TimeFilter = ({ isInAllView, isInCatalogView, isInSubscriptionsView
? isInCatalogView
? `/p/subscriptions/catalog/${timeFilterName}`
: `/p/subscriptions/${timeFilterName}`
: isInModView
? isInCatalogView
? `/p/mod/catalog/${timeFilterName}`
: `/p/mod/${timeFilterName}`
: null;
link && navigate(link);
};
@@ -242,6 +253,7 @@ export const MobileBoardButtons = () => {
const isInPendingPostPage = isPendingPostView(location.pathname, params);
const isInPostView = isPostPageView(location.pathname, params);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, useParams());
const isInModView = isModView(location.pathname);
const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any });
const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress;
@@ -252,8 +264,8 @@ export const MobileBoardButtons = () => {
<div className={`${styles.mobileBoardButtons} ${!isInCatalogView ? styles.addMargin : ''}`}>
{isInPostView || isInPendingPostPage ? (
<>
<ReturnButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} />
<CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} />
<ReturnButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} isInModView={isInModView} />
<CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} isInModView={isInModView} />
<SubscribeButton address={subplebbitAddress} />
<div className={styles.secondRow}>
<UpdateButton />
@@ -263,11 +275,11 @@ export const MobileBoardButtons = () => {
) : (
<>
{isInCatalogView ? (
<ReturnButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} />
<ReturnButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} isInModView={isInModView} />
) : (
<CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} />
<CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} isInModView={isInModView} />
)}
{!(isInAllView || isInSubscriptionsView) && <SubscribeButton address={subplebbitAddress} />}
{!(isInAllView || isInSubscriptionsView || isInModView) && <SubscribeButton address={subplebbitAddress} />}
<RefreshButton />
{isInCatalogView && searchText ? (
<span className={styles.filteredThreadsCount}>
@@ -338,6 +350,7 @@ export const DesktopBoardButtons = () => {
const isInPendingPostPage = isPendingPostView(location.pathname, params);
const isInPostView = isPostPageView(location.pathname, params);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, useParams());
const isInModView = isModView(location.pathname);
const { filteredCount, searchText } = useCatalogFiltersStore();
@@ -348,9 +361,9 @@ export const DesktopBoardButtons = () => {
{isInPostView || isInPendingPostPage ? (
<>
[
<ReturnButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} />
<ReturnButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} isInModView={isInModView} />
] [
<CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} />] [
<CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} isInModView={isInModView} />] [
<UpdateButton />
] [
<AutoButton />]
@@ -363,12 +376,13 @@ export const DesktopBoardButtons = () => {
{isInCatalogView ? (
<>
[
<ReturnButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} />]{' '}
<ReturnButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} isInModView={isInModView} />]{' '}
</>
) : (
<>
<SearchOPsBar />
[
<CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} />]{' '}
<CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} isInModView={isInModView} />]{' '}
</>
)}
[<RefreshButton />]
@@ -394,10 +408,10 @@ export const DesktopBoardButtons = () => {
<ShowOPCommentOption />
</>
)}
{(isInAllView || isInSubscriptionsView) && (
<TimeFilter isInAllView={isInAllView} isInCatalogView={isInCatalogView} isInSubscriptionsView={isInSubscriptionsView} />
{(isInAllView || isInSubscriptionsView || isInModView) && (
<TimeFilter isInAllView={isInAllView} isInCatalogView={isInCatalogView} isInSubscriptionsView={isInSubscriptionsView} isInModView={isInModView} />
)}
{!(isInAllView || isInSubscriptionsView) && (
{!(isInAllView || isInSubscriptionsView || isInModView) && (
<>
[
<SubscribeButton address={subplebbitAddress} />]
@@ -415,3 +429,42 @@ export const DesktopBoardButtons = () => {
</>
);
};
const SearchOPsBar = () => {
const { t } = useTranslation();
const navigate = useNavigate();
const params = useParams();
const location = useLocation();
const isInAllView = isAllView(location.pathname);
const isInSubscriptionsView = isSubscriptionsView(location.pathname, useParams());
const isInModView = isModView(location.pathname);
const handleSearch = (event: React.KeyboardEvent<HTMLInputElement>) => {
if (event.key === 'Enter') {
const searchQuery = (event.target as HTMLInputElement).value.trim();
if (searchQuery) {
let catalogUrl = '';
if (isInAllView) {
catalogUrl = params?.timeFilterName
? `/p/all/catalog/${params.timeFilterName}?q=${encodeURIComponent(searchQuery)}`
: `/p/all/catalog?q=${encodeURIComponent(searchQuery)}`;
} else if (isInSubscriptionsView) {
catalogUrl = params?.timeFilterName
? `/p/subscriptions/catalog/${params.timeFilterName}?q=${encodeURIComponent(searchQuery)}`
: `/p/subscriptions/catalog?q=${encodeURIComponent(searchQuery)}`;
} else if (isInModView) {
catalogUrl = params?.timeFilterName
? `/p/mod/catalog/${params.timeFilterName}?q=${encodeURIComponent(searchQuery)}`
: `/p/mod/catalog?q=${encodeURIComponent(searchQuery)}`;
} else {
catalogUrl = `/p/${params?.subplebbitAddress}/catalog?q=${encodeURIComponent(searchQuery)}`;
}
navigate(catalogUrl);
}
}
};
return <input type='text' placeholder={t('search_ops_placeholder', 'Search OPs...')} onKeyDown={handleSearch} className={styles.searchOPsInput} />;
};