Change search to use query params in web UI (#32949)

app/javascript/mastodon/features/explore/index.tsx

@@ -0,0 +1,105 @@
+import { useCallback, useRef } from 'react';
+
+import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
+
+import { Helmet } from 'react-helmet';
+import { NavLink, Switch, Route } from 'react-router-dom';
+
+import ExploreIcon from '@/material-icons/400-24px/explore.svg?react';
+import { Column } from 'mastodon/components/column';
+import type { ColumnRef } from 'mastodon/components/column';
+import { ColumnHeader } from 'mastodon/components/column_header';
+import { Search } from 'mastodon/features/compose/components/search';
+import { useIdentity } from 'mastodon/identity_context';
+
+import Links from './links';
+import Statuses from './statuses';
+import Suggestions from './suggestions';
+import Tags from './tags';
+
+const messages = defineMessages({
+  title: { id: 'explore.title', defaultMessage: 'Explore' },
+});
+
+const Explore: React.FC<{ multiColumn: boolean }> = ({ multiColumn }) => {
+  const { signedIn } = useIdentity();
+  const intl = useIntl();
+  const columnRef = useRef<ColumnRef>(null);
+
+  const handleHeaderClick = useCallback(() => {
+    columnRef.current?.scrollTop();
+  }, []);
+
+  return (
+    <Column
+      bindToDocument={!multiColumn}
+      ref={columnRef}
+      label={intl.formatMessage(messages.title)}
+    >
+      <ColumnHeader
+        icon={'explore'}
+        iconComponent={ExploreIcon}
+        title={intl.formatMessage(messages.title)}
+        onClick={handleHeaderClick}
+        multiColumn={multiColumn}
+      />
+
+      <div className='explore__search-header'>
+        <Search singleColumn />
+      </div>
+
+      <div className='account__section-headline'>
+        <NavLink exact to='/explore'>
+          <FormattedMessage
+            tagName='div'
+            id='explore.trending_statuses'
+            defaultMessage='Posts'
+          />
+        </NavLink>
+
+        <NavLink exact to='/explore/tags'>
+          <FormattedMessage
+            tagName='div'
+            id='explore.trending_tags'
+            defaultMessage='Hashtags'
+          />
+        </NavLink>
+
+        {signedIn && (
+          <NavLink exact to='/explore/suggestions'>
+            <FormattedMessage
+              tagName='div'
+              id='explore.suggested_follows'
+              defaultMessage='People'
+            />
+          </NavLink>
+        )}
+
+        <NavLink exact to='/explore/links'>
+          <FormattedMessage
+            tagName='div'
+            id='explore.trending_links'
+            defaultMessage='News'
+          />
+        </NavLink>
+      </div>
+
+      <Switch>
+        <Route path='/explore/tags' component={Tags} />
+        <Route path='/explore/links' component={Links} />
+        <Route path='/explore/suggestions' component={Suggestions} />
+        <Route exact path={['/explore', '/explore/posts']}>
+          <Statuses multiColumn={multiColumn} />
+        </Route>
+      </Switch>
+
+      <Helmet>
+        <title>{intl.formatMessage(messages.title)}</title>
+        <meta name='robots' content='all' />
+      </Helmet>
+    </Column>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default Explore;