Rename "search" file to "explorer" and improve explorer tabs colors

src/components/ui/explorer-tabs.tsx

@@ -38,32 +38,43 @@ const ExplorerTabs: React.FC<TabsProps> = ({ items, activeItem }) => {
 
   return (
     <HStack className='inset-x-0 bottom-4 z-[999] w-full p-2' alignItems='center' justifyContent='center'>
-      {/* Cabeçalho das abas */}
+      {/* Header */}
-      <HStack space={1} className='w-full rounded-full bg-gray-800 p-1.5' justifyContent='around'>
+      <HStack space={1} className='w-full rounded-full bg-gray-200/60 p-1.5 dark:bg-gray-800' justifyContent='around'>
         {items.map(({ name, label, icon }) => {
           const isSelected = activeTab === name;
+          const shouldKeepBg = lastSelected === name && activeTab === 'search';
 
           return (
             <HStack key={name} alignItems='center' justifyContent='center'>
               {name === 'search' && isSelected ? (
-                // Renderiza o componente Search fora do botão
                 <Search autoSubmit />
               ) : (
                 <HStack
                   space={1}
                   alignItems='center'
+                  justifyContent='center'
                   onClick={() => 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
+                    isSelected || shouldKeepBg
-                      ? 'group border-gray-700 bg-gray-700 text-white shadow-md'
+                      ? 'border-gray-500 bg-gray-500 text-white shadow-md dark:border-gray-700 dark:bg-gray-700'
-                      : 'text-gray-500 hover:bg-gray-200/60 hover:!text-white dark:hover:bg-gray-800',
+                      : 'dark:hover:bg-gray-800/200 text-gray-500 hover:bg-gray-400/60 hover:!text-white',
+                    { '!p-2': shouldKeepBg },
                   )}
-                  justifyContent='center'
                 >
-                  <SvgIcon src={icon} className={clsx('size-5', { 'text-white': lastSelected === name && activeTab === 'search' })} />
+                  <SvgIcon
-                  {activeTab !== 'search' && (isMobile ? isSelected : !isMobile) && (
+                    src={icon}
-                    <Text className={clsx('transition-all duration-300', { '!text-gray-500 group-hover:!text-white': !isSelected })}>
+                    className='size-5 '
+                  />
+                  {(activeTab !== 'search' || isSelected) &&
+                    (isMobile ? isSelected : !isMobile) && (
+                    <Text
+                      className={clsx('transition-all duration-300', {
+                        '!text-gray-500 group-hover:!text-white': !isSelected,
+                        '!text-white': isSelected || shouldKeepBg,
+                      })}
+                    >
                       {label}
                     </Text>
                   )}

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({

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:' },

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 ExplorerCards from 'soapbox/features/explorer/components/explorer-cards.tsx';
-import ExplorerFilter from 'soapbox/features/search/components/explorerFilter.tsx';
+import ExplorerFilter from 'soapbox/features/explorer/components/explorerFilter.tsx';
-import AccountsCarousel from 'soapbox/features/search/components/popular-accounts.tsx';
+import AccountsCarousel from 'soapbox/features/explorer/components/popular-accounts.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.explorer', defaultMessage: 'Explorer' },

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'));