From b2737bf8bdb15d8619aa3ba42ae34533ede95918 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Mon, 24 Jun 2024 01:05:55 +0900
Subject: [PATCH 1/4] refs #4792 Implement search for statuses

---
 locales/en/translation.json                   |   5 +-
 renderer/components/compose/Compose.tsx       |   1 +
 renderer/components/detail/Profile.tsx        |   7 +-
 renderer/components/timelines/Search.tsx      | 104 ++++++++++++++++++
 renderer/components/timelines/Timeline.tsx    |  24 +++-
 .../components/timelines/search/Statuses.tsx  |  43 ++++++++
 renderer/pages/_app.tsx                       |  10 +-
 renderer/pages/accounts/[id]/[timeline].tsx   |  29 +++--
 8 files changed, 198 insertions(+), 25 deletions(-)
 create mode 100644 renderer/components/timelines/Search.tsx
 create mode 100644 renderer/components/timelines/search/Statuses.tsx

diff --git a/locales/en/translation.json b/locales/en/translation.json
index ee1850cb..3a6d8ed4 100644
--- a/locales/en/translation.json
+++ b/locales/en/translation.json
@@ -183,6 +183,9 @@
     "submit": "Submit"
   },
   "search": {
-    "placeholder": "Search timeline"
+    "placeholder": "Search timeline",
+    "statuses": "Statuses",
+    "accounts": "Accounts",
+    "hashtags": "Hashtags"
   }
 }
diff --git a/renderer/components/compose/Compose.tsx b/renderer/components/compose/Compose.tsx
index 0f5b936c..2ef8d75f 100644
--- a/renderer/components/compose/Compose.tsx
+++ b/renderer/components/compose/Compose.tsx
@@ -239,6 +239,7 @@ export default function Compose(props: Props) {
             color="blue-gray"
             containerProps={{ className: 'mb-2' }}
             value={spoiler}
+            className="placeholder:opacity-100"
             onChange={ev => setSpoiler(ev.target.value)}
             placeholder={formatMessage({ id: 'compose.spoiler.placeholder' })}
           />
diff --git a/renderer/components/detail/Profile.tsx b/renderer/components/detail/Profile.tsx
index 4a08449d..e4114a27 100644
--- a/renderer/components/detail/Profile.tsx
+++ b/renderer/components/detail/Profile.tsx
@@ -256,7 +256,12 @@ export default function Profile(props: Props) {
           </div>
           <div>
             <Tabs value="timeline">
-              <TabsHeader>
+              <TabsHeader
+                indicatorProps={{
+                  className:
+                    'bg-blue-gray-50 dark:bg-blue-gray-900 border-b-2 border-blue-400 dark:border-blue-600 shadow-none rounded-none'
+                }}
+              >
                 <Tab value="timeline">
                   <FormattedMessage id="profile.timeline" />
                 </Tab>
diff --git a/renderer/components/timelines/Search.tsx b/renderer/components/timelines/Search.tsx
new file mode 100644
index 00000000..26bcfcde
--- /dev/null
+++ b/renderer/components/timelines/Search.tsx
@@ -0,0 +1,104 @@
+import { Input, Tab, TabPanel, Tabs, TabsBody, TabsHeader } from '@material-tailwind/react'
+import { Entity, MegalodonInterface } from 'megalodon'
+import { useRouter } from 'next/router'
+import { FormEvent, useEffect, useState } from 'react'
+import { FaMagnifyingGlass } from 'react-icons/fa6'
+import { FormattedMessage, useIntl } from 'react-intl'
+import Statuses from './search/Statuses'
+import { Account } from '@/db'
+
+type Props = {
+  client: MegalodonInterface
+  account: Account
+  openMedia: (media: Array<Entity.Attachment>, index: number) => void
+}
+
+export default function Search(props: Props) {
+  const router = useRouter()
+  const { formatMessage } = useIntl()
+
+  const [query, setQuery] = useState('')
+  const [activeTab, setActiveTab] = useState('statuses')
+  const [results, setResults] = useState<Entity.Results>({
+    accounts: [],
+    hashtags: [],
+    statuses: []
+  })
+
+  useEffect(() => {
+    if (router.query.q) {
+      setQuery(router.query.q as string)
+      search(router.query.q as string)
+    }
+  }, [router.query.q])
+
+  const search = (query: string) => {
+    setResults({
+      accounts: [],
+      hashtags: [],
+      statuses: []
+    })
+    props.client.search(query).then(res => {
+      setResults(res.data)
+    })
+  }
+
+  const submit = (ev: FormEvent<HTMLFormElement>) => {
+    ev.preventDefault()
+    const word = ((ev.target as HTMLFormElement).elements[0] as HTMLInputElement).value
+    if (word.length > 0) {
+      router.push({
+        query: Object.assign({}, router.query, {
+          timeline: 'search',
+          q: word
+        })
+      })
+    }
+  }
+
+  return (
+    <>
+      <div className="search w-full h-full">
+        <section className="h-full w-full">
+          <div className="w-full theme-text-primary p-2 flex justify-center" style={{ height: '56px' }}>
+            <form onSubmit={ev => submit(ev)}>
+              <Input
+                type="text"
+                color="blue-gray"
+                placeholder={formatMessage({ id: 'timeline.search' })}
+                className="placeholder:opacity-100"
+                value={query}
+                onChange={e => setQuery(e.target.value)}
+                icon={<FaMagnifyingGlass />}
+              />
+            </form>
+          </div>
+          <Tabs value={activeTab} style={{ height: 'calc(100% - 56px)' }}>
+            <TabsHeader
+              indicatorProps={{
+                className: 'bg-blue-gray-50 dark:bg-blue-gray-900 border-b-2 border-blue-400 dark:border-blue-600 shadow-none rounded-none'
+              }}
+            >
+              <Tab value="statuses" onClick={() => setActiveTab('statuses')}>
+                <FormattedMessage id="search.statuses" />
+              </Tab>
+              <Tab value="accounts" onClick={() => setActiveTab('accounts')}>
+                <FormattedMessage id="search.accounts" />
+              </Tab>
+              <Tab value="hashtags" onClick={() => setActiveTab('hashtags')}>
+                <FormattedMessage id="search.hashtags" />
+              </Tab>
+            </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} />
+              </TabPanel>
+              <TabPanel value="accounts">accounts</TabPanel>
+              <TabPanel value="hashtags">hashtags</TabPanel>
+            </TabsBody>
+          </Tabs>
+        </section>
+      </div>
+    </>
+  )
+}
diff --git a/renderer/components/timelines/Timeline.tsx b/renderer/components/timelines/Timeline.tsx
index 65a305b9..b4e5bb04 100644
--- a/renderer/components/timelines/Timeline.tsx
+++ b/renderer/components/timelines/Timeline.tsx
@@ -1,6 +1,6 @@
 import { Account } from '@/db'
 import { Entity, MegalodonInterface, WebSocketInterface } from 'megalodon'
-import { useEffect, useState, useCallback, useRef } from 'react'
+import { useEffect, useState, useCallback, useRef, FormEvent } from 'react'
 import { Virtuoso } from 'react-virtuoso'
 import Status from './status/Status'
 import { FormattedMessage, useIntl } from 'react-intl'
@@ -244,6 +244,19 @@ export default function Timeline(props: Props) {
     })
   }
 
+  const search = (ev: FormEvent<HTMLFormElement>) => {
+    ev.preventDefault()
+    const word = ((ev.target as HTMLFormElement).elements[0] as HTMLInputElement).value
+    if (word.length > 0) {
+      router.push({
+        query: Object.assign({}, router.query, {
+          timeline: 'search',
+          q: word
+        })
+      })
+    }
+  }
+
   return (
     <div className="flex timeline-wrapper">
       <section className={`h-full ${timelineClass()}`}>
@@ -252,14 +265,13 @@ export default function Timeline(props: Props) {
             {props.timeline.match(/list_(\d+)/) ? <>{list && list.title}</> : <FormattedMessage id={`timeline.${props.timeline}`} />}
           </div>
           <div className="w-64 text-xs">
-            <form>
+            <form onSubmit={ev => search(ev)}>
               <Input
                 type="text"
-                label={formatMessage({ id: 'timeline.search' })}
-                disabled
+                color="blue-gray"
+                placeholder={formatMessage({ id: 'timeline.search' })}
                 containerProps={{ className: 'h-7' }}
-                className="!py-1 !px-2 !text-xs"
-                labelProps={{ className: '!leading-10' }}
+                className="!py-1 !px-2 !text-xs placeholder:opacity-100"
               />
             </form>
           </div>
diff --git a/renderer/components/timelines/search/Statuses.tsx b/renderer/components/timelines/search/Statuses.tsx
new file mode 100644
index 00000000..23c7bed0
--- /dev/null
+++ b/renderer/components/timelines/search/Statuses.tsx
@@ -0,0 +1,43 @@
+import { Entity, MegalodonInterface } from 'megalodon'
+import { Virtuoso } from 'react-virtuoso'
+import Status from '../status/Status'
+import { Account } from '@/db'
+import { Spinner } from '@material-tailwind/react'
+
+type Props = {
+  client: MegalodonInterface
+  account: Account
+  statuses: Array<Entity.Status>
+  openMedia: (media: Array<Entity.Attachment>, index: number) => void
+}
+
+export default function Statuses(props: Props) {
+  return (
+    <>
+      <div className="overflow-x-hidden h-full w-full">
+        {props.statuses.length > 0 ? (
+          <Virtuoso
+            style={{ height: '100%' }}
+            data={props.statuses}
+            className="timeline-scrollable"
+            itemContent={(index, status) => (
+              <Status
+                key={index}
+                client={props.client}
+                account={props.account}
+                status={status}
+                openMedia={props.openMedia}
+                onRefresh={() => {}}
+                filters={[]}
+              />
+            )}
+          />
+        ) : (
+          <div className="py-4">
+            <Spinner className="m-auto" />
+          </div>
+        )}
+      </div>
+    </>
+  )
+}
diff --git a/renderer/pages/_app.tsx b/renderer/pages/_app.tsx
index 9579946c..053930a7 100644
--- a/renderer/pages/_app.tsx
+++ b/renderer/pages/_app.tsx
@@ -340,12 +340,7 @@ export default function MyApp({ Component, pageProps }: AppProps) {
     },
     tabsHeader: {
       defaultProps: {
-        className: ''
-      },
-      styles: {
-        base: {
-          bg: 'bg-blue-gray-50 dark:bg-blue-gray-800'
-        }
+        className: 'rounded-none border-b border-blue-gray-50 dark:border-blue-gray-900 bg-transparent p-0'
       }
     },
     tab: {
@@ -360,9 +355,6 @@ export default function MyApp({ Component, pageProps }: AppProps) {
             initial: {
               color: 'text-blue-gray-900 dark:text-blue-gray-200'
             }
-          },
-          indicator: {
-            bg: 'bg-white dark:bg-gray-700'
           }
         }
       }
diff --git a/renderer/pages/accounts/[id]/[timeline].tsx b/renderer/pages/accounts/[id]/[timeline].tsx
index 0f72773d..8b3eaab3 100644
--- a/renderer/pages/accounts/[id]/[timeline].tsx
+++ b/renderer/pages/accounts/[id]/[timeline].tsx
@@ -4,6 +4,7 @@ import { useEffect, useReducer, useState } from 'react'
 import { Account, db } from '@/db'
 import generator, { Entity, MegalodonInterface } from 'megalodon'
 import Notifications from '@/components/timelines/Notifications'
+import Search from '@/components/timelines/Search'
 import Media from '@/components/Media'
 import Report from '@/components/report/Report'
 
@@ -69,14 +70,26 @@ export default function Page() {
           }
         />
       ) : (
-        <Timeline
-          timeline={router.query.timeline as string}
-          account={account}
-          client={client}
-          openMedia={(media: Array<Entity.Attachment>, index: number) =>
-            dispatch({ target: 'media', value: true, object: media, index: index })
-          }
-        />
+        <>
+          {(router.query.timeline as string) === 'search' ? (
+            <Search
+              client={client}
+              account={account}
+              openMedia={(media: Array<Entity.Attachment>, index: number) =>
+                dispatch({ target: 'media', value: true, object: media, index: index })
+              }
+            />
+          ) : (
+            <Timeline
+              timeline={router.query.timeline as string}
+              account={account}
+              client={client}
+              openMedia={(media: Array<Entity.Attachment>, index: number) =>
+                dispatch({ target: 'media', value: true, object: media, index: index })
+              }
+            />
+          )}
+        </>
       )}
       <Media
         open={modalState.media.opened}

From e9c2504c5659e5c70c6a9e39fabab32275640f3a Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Mon, 24 Jun 2024 01:29:28 +0900
Subject: [PATCH 2/4] refs #4792 Implement search for accounts

---
 renderer/components/timelines/Search.tsx      | 26 ++++++--
 .../components/timelines/search/Accounts.tsx  | 66 +++++++++++++++++++
 .../components/timelines/search/Statuses.tsx  | 11 +++-
 3 files changed, 95 insertions(+), 8 deletions(-)
 create mode 100644 renderer/components/timelines/search/Accounts.tsx

diff --git a/renderer/components/timelines/Search.tsx b/renderer/components/timelines/Search.tsx
index 26bcfcde..017a7a21 100644
--- a/renderer/components/timelines/Search.tsx
+++ b/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>
diff --git a/renderer/components/timelines/search/Accounts.tsx b/renderer/components/timelines/search/Accounts.tsx
new file mode 100644
index 00000000..6215db05
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/renderer/components/timelines/search/Statuses.tsx b/renderer/components/timelines/search/Statuses.tsx
index 23c7bed0..4f214dc5 100644
--- a/renderer/components/timelines/search/Statuses.tsx
+++ b/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>
     </>

From 247116ebcbfe7d04b212afa95a30a2b2507d18b4 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Wed, 26 Jun 2024 01:03:15 +0900
Subject: [PATCH 3/4] refs #4792 Implement search for tags

---
 renderer/components/timelines/Search.tsx      |  7 ++-
 .../components/timelines/search/Accounts.tsx  | 15 ++---
 .../components/timelines/search/Hashtags.tsx  | 60 +++++++++++++++++++
 3 files changed, 71 insertions(+), 11 deletions(-)
 create mode 100644 renderer/components/timelines/search/Hashtags.tsx

diff --git a/renderer/components/timelines/Search.tsx b/renderer/components/timelines/Search.tsx
index 017a7a21..f290e72b 100644
--- a/renderer/components/timelines/Search.tsx
+++ b/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>
diff --git a/renderer/components/timelines/search/Accounts.tsx b/renderer/components/timelines/search/Accounts.tsx
index 6215db05..073accb1 100644
--- a/renderer/components/timelines/search/Accounts.tsx
+++ b/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 && (
diff --git a/renderer/components/timelines/search/Hashtags.tsx b/renderer/components/timelines/search/Hashtags.tsx
new file mode 100644
index 00000000..b1d87ab6
--- /dev/null
+++ b/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>
+  )
+}

From 620ba5f76913159a8afd568904f21ce3c3165ceb Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Tue, 2 Jul 2024 22:32:04 +0900
Subject: [PATCH 4/4] refs #4792 Show detail in search results

---
 renderer/components/timelines/Search.tsx          | 13 +++++++++++--
 renderer/components/timelines/search/Hashtags.tsx |  2 +-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/renderer/components/timelines/Search.tsx b/renderer/components/timelines/Search.tsx
index f290e72b..968bea95 100644
--- a/renderer/components/timelines/Search.tsx
+++ b/renderer/components/timelines/Search.tsx
@@ -8,6 +8,7 @@ import Statuses from './search/Statuses'
 import { Account } from '@/db'
 import Accounts from './search/Accounts'
 import Hashtags from './search/Hashtags'
+import Detail from '../detail/Detail'
 
 type Props = {
   client: MegalodonInterface
@@ -65,10 +66,17 @@ export default function Search(props: Props) {
     }
   }
 
+  const timelineClass = () => {
+    if (router.query.detail) {
+      return 'timeline-with-drawer'
+    }
+    return 'timeline'
+  }
+
   return (
     <>
-      <div className="search w-full h-full">
-        <section className="h-full w-full">
+      <div className="flex timeline-wrapper">
+        <section className={`h-full ${timelineClass()}`}>
           <div className="w-full theme-text-primary p-2 flex justify-center" style={{ height: '56px' }}>
             <form onSubmit={ev => submit(ev)}>
               <Input
@@ -117,6 +125,7 @@ export default function Search(props: Props) {
             </TabsBody>
           </Tabs>
         </section>
+        <Detail client={props.client} account={props.account} className="detail" openMedia={props.openMedia} />
       </div>
     </>
   )
diff --git a/renderer/components/timelines/search/Hashtags.tsx b/renderer/components/timelines/search/Hashtags.tsx
index b1d87ab6..c8e57f6c 100644
--- a/renderer/components/timelines/search/Hashtags.tsx
+++ b/renderer/components/timelines/search/Hashtags.tsx
@@ -12,7 +12,7 @@ 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 } })
+    router.push({ query: { id: router.query.id, timeline: router.query.timeline, tag: tag, detail: true } })
   }
 
   return (