refs #4792 Implement search for accounts

renderer/components/timelines/Search.tsx

@@ -6,6 +6,7 @@ import { FaMagnifyingGlass } from 'react-icons/fa6'
 import { FormattedMessage, useIntl } from 'react-intl'
 import Statuses from './search/Statuses'
 import { Account } from '@/db'
+import Accounts from './search/Accounts'
 
 type Props = {
   client: MegalodonInterface
@@ -24,6 +25,7 @@ export default function Search(props: Props) {
     hashtags: [],
     statuses: []
   })
+  const [loading, setLoading] = useState(false)
 
   useEffect(() => {
     if (router.query.q) {
@@ -33,14 +35,20 @@ export default function Search(props: Props) {
   }, [router.query.q])
 
   const search = (query: string) => {
+    setLoading(true)
     setResults({
       accounts: [],
       hashtags: [],
       statuses: []
     })
-    props.client.search(query).then(res => {
-      setResults(res.data)
-    })
+    props.client
+      .search(query)
+      .then(res => {
+        setResults(res.data)
+      })
+      .finally(() => {
+        setLoading(false)
+      })
   }
 
   const submit = (ev: FormEvent<HTMLFormElement>) => {
@@ -91,9 +99,17 @@ export default function Search(props: Props) {
             </TabsHeader>
             <TabsBody style={{ height: 'calc(100% - 35px)' }}>
               <TabPanel value="statuses" className="h-full p-0">
-                <Statuses statuses={results.statuses} client={props.client} account={props.account} openMedia={props.openMedia} />
+                <Statuses
+                  statuses={results.statuses}
+                  client={props.client}
+                  account={props.account}
+                  openMedia={props.openMedia}
+                  loading={loading}
+                />
+              </TabPanel>
+              <TabPanel value="accounts">
+                <Accounts client={props.client} users={results.accounts} loading={loading} />
               </TabPanel>
-              <TabPanel value="accounts">accounts</TabPanel>
               <TabPanel value="hashtags">hashtags</TabPanel>
             </TabsBody>
           </Tabs>

renderer/components/timelines/search/Accounts.tsx

@@ -0,0 +1,66 @@
+import { Avatar, Spinner } from '@material-tailwind/react'
+import { Entity, MegalodonInterface } 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
+}
+
+export default function Accounts(props: Props) {
+  const router = useRouter()
+
+  const openUser = (id: string) => {
+    router.push({ query: { id: router.query.id, timeline: router.query.timeline, user_id: id, detail: true } })
+  }
+
+  return (
+    <>
+      <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.loading && (
+              <div className="py-4">
+                <Spinner className="m-auto" />
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </>
+  )
+}
+
+type UserProps = {
+  user: Entity.Account
+  openUser: (id: string) => void
+}
+
+function User(props: UserProps) {
+  return (
+    <div className="border-b border-gray-200 dark:border-gray-700 mr-2 py-1">
+      <div className="flex" onClick={() => props.openUser(props.user.id)}>
+        <div className="p2 cursor-pointer" style={{ width: '56px' }}>
+          <Avatar src={props.user.avatar} />
+        </div>
+        <div>
+          <p
+            className="text-gray-800 dark:text-gray-200"
+            dangerouslySetInnerHTML={{ __html: emojify(props.user.display_name, props.user.emojis) }}
+          />
+          <p className="text-gray-500">@{props.user.acct}</p>
+        </div>
+      </div>
+    </div>
+  )
+}

renderer/components/timelines/search/Statuses.tsx

@@ -8,6 +8,7 @@ type Props = {
   client: MegalodonInterface
   account: Account
   statuses: Array<Entity.Status>
+  loading: boolean
   openMedia: (media: Array<Entity.Attachment>, index: number) => void
 }
 
@@ -33,9 +34,13 @@ export default function Statuses(props: Props) {
             )}
           />
         ) : (
-          <div className="py-4">
-            <Spinner className="m-auto" />
-          </div>
+          <>
+            {props.loading && (
+              <div className="py-4">
+                <Spinner className="m-auto" />
+              </div>
+            )}
+          </>
         )}
       </div>
     </>