refs #4792 Implement search for tags

renderer/components/timelines/Search.tsx

@@ -7,6 +7,7 @@ import { FormattedMessage, useIntl } from 'react-intl'
 import Statuses from './search/Statuses'
 import { Account } from '@/db'
 import Accounts from './search/Accounts'
+import Hashtags from './search/Hashtags'
 
 type Props = {
   client: MegalodonInterface
@@ -108,9 +109,11 @@ export default function Search(props: Props) {
                 />
               </TabPanel>
               <TabPanel value="accounts">
-                <Accounts client={props.client} users={results.accounts} loading={loading} />
+                <Accounts users={results.accounts} loading={loading} />
+              </TabPanel>
+              <TabPanel value="hashtags">
+                <Hashtags hashtags={results.hashtags} loading={loading} />
               </TabPanel>
-              <TabPanel value="hashtags">hashtags</TabPanel>
             </TabsBody>
           </Tabs>
         </section>

renderer/components/timelines/search/Accounts.tsx

@@ -1,11 +1,9 @@
 import { Avatar, Spinner } from '@material-tailwind/react'
-import { Entity, MegalodonInterface } from 'megalodon'
+import { Entity } from 'megalodon'
 import emojify from '@/utils/emojify'
-import { Virtuoso } from 'react-virtuoso'
 import { useRouter } from 'next/router'
 
 type Props = {
-  client: MegalodonInterface
   users: Array<Entity.Account>
   loading: boolean
 }
@@ -21,12 +19,11 @@ export default function Accounts(props: Props) {
     <>
       <div className="overflow-x-hidden h-full w-full">
         {props.users.length > 0 ? (
-          <Virtuoso
-            style={{ height: 'calc(100vh - 64px)' }}
-            data={props.users}
-            className="timeline-scrollable"
-            itemContent={(index, user) => <User key={index} user={user} openUser={openUser} />}
-          />
+          <>
+            {props.users.map((user, index) => (
+              <User key={index} user={user} openUser={openUser} />
+            ))}
+          </>
         ) : (
           <>
             {props.loading && (

renderer/components/timelines/search/Hashtags.tsx

@@ -0,0 +1,60 @@
+import { Spinner } from '@material-tailwind/react'
+import { Entity } from 'megalodon'
+import { useRouter } from 'next/router'
+import { FaHashtag } from 'react-icons/fa6'
+
+type Props = {
+  hashtags: Array<Entity.Tag>
+  loading: boolean
+}
+
+export default function Hashtags(props: Props) {
+  const router = useRouter()
+
+  const openTag = (tag: string) => {
+    router.push({ query: { id: router.query.id, timeline: router.query.timeline, hashtag: tag, detail: true } })
+  }
+
+  return (
+    <>
+      <div className="overflow-x-hidden h-full w-full">
+        {props.hashtags.length > 0 ? (
+          <>
+            {props.hashtags.map(hashtag => (
+              <Hashtag key={hashtag.name} hashtag={hashtag} openTag={openTag} />
+            ))}
+          </>
+        ) : (
+          <>
+            {props.loading && (
+              <div className="py-4">
+                <Spinner className="m-auto" />
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </>
+  )
+}
+
+type HashtagProps = {
+  hashtag: Entity.Tag
+  openTag: (tag: string) => void
+}
+
+function Hashtag(props: HashtagProps) {
+  return (
+    <div className="border-b border-gray-200 dark:border-gray-700 mr-2 py-1">
+      <div className="flex">
+        <div
+          className="p2 cursor-pointer text-gray-800 dark:text-gray-200 flex items-center gap-1"
+          onClick={() => props.openTag(props.hashtag.name)}
+        >
+          <FaHashtag />
+          {props.hashtag.name}
+        </div>
+      </div>
+    </div>
+  )
+}