From c69e552737afee2b75fab72590d2c23b04b4a2ea Mon Sep 17 00:00:00 2001 From: danidfra Date: Mon, 24 Feb 2025 16:01:26 -0300 Subject: [PATCH] Rename "search" file to "explorer" and improve explorer tabs colors --- src/components/ui/explorer-tabs.tsx | 31 +++++++++++++------ .../components/explorer-cards.tsx | 0 .../components/explorerFilter.tsx | 2 +- .../components/filters.tsx | 2 +- .../components/popular-accounts.tsx | 0 src/features/{search => explorer}/index.tsx | 6 ++-- src/features/ui/util/async-components.ts | 2 +- 7 files changed, 27 insertions(+), 16 deletions(-) rename src/features/{search => explorer}/components/explorer-cards.tsx (100%) rename src/features/{search => explorer}/components/explorerFilter.tsx (97%) rename src/features/{search => explorer}/components/filters.tsx (99%) rename src/features/{search => explorer}/components/popular-accounts.tsx (100%) rename src/features/{search => explorer}/index.tsx (76%) diff --git a/src/components/ui/explorer-tabs.tsx b/src/components/ui/explorer-tabs.tsx index a33645ef9..6f34e48da 100644 --- a/src/components/ui/explorer-tabs.tsx +++ b/src/components/ui/explorer-tabs.tsx @@ -38,32 +38,43 @@ const ExplorerTabs: React.FC = ({ items, activeItem }) => { return ( - {/* Cabeçalho das abas */} - + {/* Header */} + {items.map(({ name, label, icon }) => { const isSelected = activeTab === name; + const shouldKeepBg = lastSelected === name && activeTab === 'search'; return ( {name === 'search' && isSelected ? ( - // Renderiza o componente Search fora do botão ) : ( handleTabClick(name)} + /* eslint-disable-next-line tailwindcss/no-custom-classname */ className={clsx( 'group cursor-pointer rounded-full px-5 py-3 text-sm font-medium transition-all duration-300', - isSelected - ? 'group border-gray-700 bg-gray-700 text-white shadow-md' - : 'text-gray-500 hover:bg-gray-200/60 hover:!text-white dark:hover:bg-gray-800', + isSelected || shouldKeepBg + ? 'border-gray-500 bg-gray-500 text-white shadow-md dark:border-gray-700 dark:bg-gray-700' + : 'dark:hover:bg-gray-800/200 text-gray-500 hover:bg-gray-400/60 hover:!text-white', + { '!p-2': shouldKeepBg }, )} - justifyContent='center' > - - {activeTab !== 'search' && (isMobile ? isSelected : !isMobile) && ( - + + {(activeTab !== 'search' || isSelected) && + (isMobile ? isSelected : !isMobile) && ( + {label} )} diff --git a/src/features/search/components/explorer-cards.tsx b/src/features/explorer/components/explorer-cards.tsx similarity index 100% rename from src/features/search/components/explorer-cards.tsx rename to src/features/explorer/components/explorer-cards.tsx diff --git a/src/features/search/components/explorerFilter.tsx b/src/features/explorer/components/explorerFilter.tsx similarity index 97% rename from src/features/search/components/explorerFilter.tsx rename to src/features/explorer/components/explorerFilter.tsx index 4d65aa63f..8035f8f45 100644 --- a/src/features/search/components/explorerFilter.tsx +++ b/src/features/explorer/components/explorerFilter.tsx @@ -15,7 +15,7 @@ import { PlatformFilters, RepliesFilter, generateFilter, -} from 'soapbox/features/search/components/filters.tsx'; +} from 'soapbox/features/explorer/components/filters.tsx'; import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts'; const messages = defineMessages({ diff --git a/src/features/search/components/filters.tsx b/src/features/explorer/components/filters.tsx similarity index 99% rename from src/features/search/components/filters.tsx rename to src/features/explorer/components/filters.tsx index c700e844f..5d6b59bf1 100644 --- a/src/features/search/components/filters.tsx +++ b/src/features/explorer/components/filters.tsx @@ -13,8 +13,8 @@ import Stack from 'soapbox/components/ui/stack.tsx'; import SvgIcon from 'soapbox/components/ui/svg-icon.tsx'; import Text from 'soapbox/components/ui/text.tsx'; import Toggle from 'soapbox/components/ui/toggle.tsx'; +import { IGenerateFilter } from 'soapbox/features/explorer/components/explorerFilter.tsx'; import { SelectDropdown } from 'soapbox/features/forms/index.tsx'; -import { IGenerateFilter } from 'soapbox/features/search/components/explorerFilter.tsx'; const messages = defineMessages({ filters: { id: 'column.explorer.filters', defaultMessage: 'Filters:' }, diff --git a/src/features/search/components/popular-accounts.tsx b/src/features/explorer/components/popular-accounts.tsx similarity index 100% rename from src/features/search/components/popular-accounts.tsx rename to src/features/explorer/components/popular-accounts.tsx diff --git a/src/features/search/index.tsx b/src/features/explorer/index.tsx similarity index 76% rename from src/features/search/index.tsx rename to src/features/explorer/index.tsx index 22428b421..525d8839c 100644 --- a/src/features/search/index.tsx +++ b/src/features/explorer/index.tsx @@ -4,9 +4,9 @@ import { Column } from 'soapbox/components/ui/column.tsx'; import Divider from 'soapbox/components/ui/divider.tsx'; import Stack from 'soapbox/components/ui/stack.tsx'; import SearchResults from 'soapbox/features/compose/components/search-results.tsx'; -import ExplorerCards from 'soapbox/features/search/components/explorer-cards.tsx'; -import ExplorerFilter from 'soapbox/features/search/components/explorerFilter.tsx'; -import AccountsCarousel from 'soapbox/features/search/components/popular-accounts.tsx'; +import ExplorerCards from 'soapbox/features/explorer/components/explorer-cards.tsx'; +import ExplorerFilter from 'soapbox/features/explorer/components/explorerFilter.tsx'; +import AccountsCarousel from 'soapbox/features/explorer/components/popular-accounts.tsx'; const messages = defineMessages({ heading: { id: 'column.explorer', defaultMessage: 'Explorer' }, diff --git a/src/features/ui/util/async-components.ts b/src/features/ui/util/async-components.ts index e6717d626..6941e4425 100644 --- a/src/features/ui/util/async-components.ts +++ b/src/features/ui/util/async-components.ts @@ -58,7 +58,7 @@ export const BirthdaysModal = lazy(() => import('soapbox/features/ui/components/ export const BirthdayPanel = lazy(() => import('soapbox/components/birthday-panel.tsx')); export const ListEditor = lazy(() => import('soapbox/features/list-editor/index.tsx')); export const ListAdder = lazy(() => import('soapbox/features/list-adder/index.tsx')); -export const Search = lazy(() => import('soapbox/features/search/index.tsx')); +export const Search = lazy(() => import('soapbox/features/explorer/index.tsx')); export const LoginPage = lazy(() => import('soapbox/features/auth-login/components/login-page.tsx')); export const ExternalLogin = lazy(() => import('soapbox/features/external-login/index.tsx')); export const LogoutPage = lazy(() => import('soapbox/features/auth-login/components/logout.tsx'));