From 53e04823df833bb376770892d1f51b0ecbdaa8c8 Mon Sep 17 00:00:00 2001 From: "Tom (plebeius.eth)" Date: Wed, 4 Jun 2025 16:36:16 +0200 Subject: [PATCH] feat(board): add search bar to board page, redirect to catalog view --- .../board-buttons/board-buttons.module.css | 21 +++++ .../board-buttons/board-buttons.tsx | 85 +++++++++++++++---- 2 files changed, 90 insertions(+), 16 deletions(-) diff --git a/src/components/board-buttons/board-buttons.module.css b/src/components/board-buttons/board-buttons.module.css index 59d754e4..f46b0f28 100644 --- a/src/components/board-buttons/board-buttons.module.css +++ b/src/components/board-buttons/board-buttons.module.css @@ -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; diff --git a/src/components/board-buttons/board-buttons.tsx b/src/components/board-buttons/board-buttons.tsx index 61ce220c..0e482dc7 100644 --- a/src/components/board-buttons/board-buttons.tsx +++ b/src/components/board-buttons/board-buttons.tsx @@ -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 = () => {
{isInPostView || isInPendingPostPage ? ( <> - - + +
@@ -263,11 +275,11 @@ export const MobileBoardButtons = () => { ) : ( <> {isInCatalogView ? ( - + ) : ( - + )} - {!(isInAllView || isInSubscriptionsView) && } + {!(isInAllView || isInSubscriptionsView || isInModView) && } {isInCatalogView && searchText ? ( @@ -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 ? ( <> [ - + ] [ - ] [ + ] [ ] [ ] @@ -363,12 +376,13 @@ export const DesktopBoardButtons = () => { {isInCatalogView ? ( <> [ - ]{' '} + ]{' '} ) : ( <> + [ - ]{' '} + ]{' '} )} [] @@ -394,10 +408,10 @@ export const DesktopBoardButtons = () => { )} - {(isInAllView || isInSubscriptionsView) && ( - + {(isInAllView || isInSubscriptionsView || isInModView) && ( + )} - {!(isInAllView || isInSubscriptionsView) && ( + {!(isInAllView || isInSubscriptionsView || isInModView) && ( <> [ ] @@ -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) => { + 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 ; +};