Merge pull request #4777 from h3poteto/iss-4653/notification-detail

refs #4653 Enable detail panel in notifications
2024-01-15 00:06:47 +09:00 · 2024-01-15 00:06:47 +09:00 · 1f6683018d
parent add0d5bb29 b7808289a0
commit 1f6683018d
4 changed files with 99 additions and 63 deletions
--- a/renderer/components/timelines/Notifications.tsx
+++ b/renderer/components/timelines/Notifications.tsx
@ -5,6 +5,8 @@ import { FormattedMessage, useIntl } from 'react-intl'
 import { Virtuoso } from 'react-virtuoso'
 import Notification from './notification/Notification'
 import { Input, Spinner } from '@material-tailwind/react'
+import { useRouter } from 'next/router'
+import Detail from '../detail/Detail'

 const TIMELINE_STATUSES_COUNT = 30
 const TIMELINE_MAX_STATUSES = 2147483647
@ -23,6 +25,7 @@ export default function Notifications(props: Props) {
  const { formatMessage } = useIntl()
  const scrollerRef = useRef<HTMLElement | null>(null)
  const streaming = useRef<WebSocketInterface | null>(null)
+  const router = useRouter()

  useEffect(() => {
    const f = async () => {
@ -99,47 +102,57 @@ export default function Notifications(props: Props) {
    return false
  }, [firstItemIndex, notifications, setNotifications, unreads])

+  const timelineClass = () => {
+    if (router.query.detail) {
+      return 'timeline-with-drawer'
+    }
+    return 'timeline'
+  }
+
  return (
-    <section className="h-full timeline-wrapper">
-      <div className="w-full bg-blue-950 text-blue-100 p-2 flex justify-between">
-        <div className="text-lg font-bold">
-          <FormattedMessage id="timeline.notifications" />
-        </div>
-        <div className="w-64 text-xs">
-          <form>
-            <Input type="text" placeholder={formatMessage({ id: 'timeline.search' })} disabled />
-          </form>
-        </div>
-      </div>
-      <div className="timeline overflow-y-auto w-full overflow-x-hidden" style={{ height: 'calc(100% - 50px)' }}>
-        {notifications.length > 0 ? (
-          <Virtuoso
-            style={{ height: '100%' }}
-            scrollerRef={ref => {
-              scrollerRef.current = ref as HTMLElement
-            }}
-            firstItemIndex={firstItemIndex}
-            atTopStateChange={prependUnreads}
-            className="timeline-scrollable"
-            data={notifications}
-            endReached={loadMore}
-            itemContent={(_, notification) => (
-              <Notification
-                client={props.client}
-                account={props.account}
-                notification={notification}
-                onRefresh={updateStatus}
-                key={notification.id}
-                openMedia={media => props.setAttachment(media)}
-              />
-            )}
-          />
-        ) : (
-          <div className="w-full pt-6" style={{ height: '100%' }}>
-            <Spinner className="m-auto" />
+    <div className="flex timeline-wrapper">
+      <section className={`h-full ${timelineClass()}`}>
+        <div className="w-full bg-blue-950 text-blue-100 p-2 flex justify-between">
+          <div className="text-lg font-bold">
+            <FormattedMessage id="timeline.notifications" />
          </div>
-        )}
-      </div>
-    </section>
+          <div className="w-64 text-xs">
+            <form>
+              <Input type="text" placeholder={formatMessage({ id: 'timeline.search' })} disabled />
+            </form>
+          </div>
+        </div>
+        <div className="timeline overflow-y-auto w-full overflow-x-hidden" style={{ height: 'calc(100% - 50px)' }}>
+          {notifications.length > 0 ? (
+            <Virtuoso
+              style={{ height: '100%' }}
+              scrollerRef={ref => {
+                scrollerRef.current = ref as HTMLElement
+              }}
+              firstItemIndex={firstItemIndex}
+              atTopStateChange={prependUnreads}
+              className="timeline-scrollable"
+              data={notifications}
+              endReached={loadMore}
+              itemContent={(_, notification) => (
+                <Notification
+                  client={props.client}
+                  account={props.account}
+                  notification={notification}
+                  onRefresh={updateStatus}
+                  key={notification.id}
+                  openMedia={media => props.setAttachment(media)}
+                />
+              )}
+            />
+          ) : (
+            <div className="w-full pt-6" style={{ height: '100%' }}>
+              <Spinner className="m-auto" />
+            </div>
+          )}
+        </div>
+      </section>
+      <Detail client={props.client} account={props.account} className="detail" openMedia={media => props.setAttachment(media)} />
+    </div>
  )
 }
--- a/renderer/components/timelines/notification/Follow.tsx
+++ b/renderer/components/timelines/notification/Follow.tsx
@ -3,6 +3,7 @@ import { FaUserPlus } from 'react-icons/fa6'
 import { FormattedMessage, useIntl } from 'react-intl'
 import emojify from '@/utils/emojify'
 import { Avatar } from '@material-tailwind/react'
+import { useRouter } from 'next/router'

 type Props = {
  notification: Entity.Notification
@ -10,6 +11,11 @@ type Props = {

 export default function Follow(props: Props) {
  const { formatMessage } = useIntl()
+  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="border-b mr-2 py-1">
@ -17,7 +23,7 @@ export default function Follow(props: Props) {
        <div style={{ width: '56px' }}>
          <FaUserPlus className="text-blue-600 w-4 mr-2 ml-auto" />
        </div>
-        <div style={{ width: 'calc(100% - 56px)' }}>
+        <div className="cursor-pointer" style={{ width: 'calc(100% - 56px)' }} onClick={() => openUser(props.notification.account.id)}>
          <span
            dangerouslySetInnerHTML={{
              __html: emojify(
@ -34,11 +40,16 @@ export default function Follow(props: Props) {
        </div>
      </div>
      <div className="flex">
-        <div className="p-2" style={{ width: '56px' }}>
-          <Avatar src={props.notification.account.avatar} />
+        <div className="p-2 cursor-pointer" style={{ width: '56px' }}>
+          <Avatar
+            src={props.notification.account.avatar}
+            onClick={() => openUser(props.notification.account.id)}
+            variant="rounded"
+            style={{ width: '40px', height: '40px' }}
+          />
        </div>
        <div style={{ width: 'calc(100% - 56px)' }}>
-          <div className="flex">
+          <div className="flex cursor-pointer" onClick={() => openUser(props.notification.account.id)}>
            <span
              className="text-gray-950 text-ellipsis break-all overflow-hidden"
              dangerouslySetInnerHTML={{ __html: emojify(props.notification.account.display_name, props.notification.account.emojis) }}
--- a/renderer/components/timelines/notification/Reaction.tsx
+++ b/renderer/components/timelines/notification/Reaction.tsx
@ -9,6 +9,7 @@ import { FaBarsProgress, FaHouse, FaPenToSquare, FaRetweet, FaStar } from 'react
 import { useIntl } from 'react-intl'
 import { useState } from 'react'
 import { Avatar } from '@material-tailwind/react'
+import { useRouter } from 'next/router'

 type Props = {
  notification: Entity.Notification
@ -21,17 +22,26 @@ export default function Reaction(props: Props) {
  const status = props.notification.status
  const [spoilered, setSpoilered] = useState(status.spoiler_text.length > 0)
  const { formatMessage } = useIntl()
+  const router = useRouter()

  const refresh = async () => {
    const res = await props.client.getStatus(status.id)
    props.onRefresh(res.data)
  }

+  const openStatus = () => {
+    router.push({ query: { id: router.query.id, timeline: router.query.timeline, status_id: status.id, detail: true } })
+  }
+
+  const openUser = (id: string) => {
+    router.push({ query: { id: router.query.id, timeline: router.query.timeline, user_id: id, detail: true } })
+  }
+
  return (
    <div className="border-b mr-2 py-1">
      <div className="flex items-center">
        <div style={{ width: '56px' }}>{actionIcon(props.notification)}</div>
-        <div style={{ width: 'calc(100% - 56px)' }}>
+        <div className="cursor-pointer" style={{ width: 'calc(100% - 56px)' }} onClick={() => openUser(props.notification.account.id)}>
          <span
            dangerouslySetInnerHTML={{
              __html: emojify(
@ -48,19 +58,24 @@ export default function Reaction(props: Props) {
        </div>
      </div>
      <div className="flex">
-        <div className="p-2" style={{ width: '56px' }}>
-          <Avatar src={status.account.avatar} />
+        <div className="p-2 cursor-pointer" style={{ width: '56px' }}>
+          <Avatar
+            src={status.account.avatar}
+            onClick={() => openUser(status.account.id)}
+            variant="rounded"
+            style={{ width: '40px', height: '40px' }}
+          />
        </div>
        <div className="text-gray-600 break-all overflow-hidden" style={{ width: 'calc(100% - 56px)' }}>
          <div className="flex justify-between">
-            <div className="flex">
+            <div className="flex cursor-pointer" onClick={() => openUser(status.account.id)}>
              <span
                className="text-gray-600 text-ellipsis break-all overflow-hidden"
                dangerouslySetInnerHTML={{ __html: emojify(status.account.display_name, status.account.emojis) }}
              ></span>
              <span className="text-gray-600 text-ellipsis break-all overflow-hidden">@{status.account.acct}</span>
            </div>
-            <div className="text-gray-600 text-right">
+            <div className="text-gray-600 text-right cursor-pointer" onClick={openStatus}>
              <time dateTime={status.created_at}>{dayjs(status.created_at).format('YYYY-MM-DD HH:mm:ss')}</time>
            </div>
          </div>
--- a/renderer/pages/accounts/[id]/[timeline].tsx
+++ b/renderer/pages/accounts/[id]/[timeline].tsx
@ -48,18 +48,15 @@ export default function Page() {
  }, [router.query.modal, router.query.report_target_id])

  if (!account || !client) return null
-  switch (router.query.timeline as string) {
-    case 'notifications': {
-      return <Notifications account={account} client={client} setAttachment={setAttachment} />
-    }
-    default: {
-      return (
-        <>
-          <Timeline timeline={router.query.timeline as string} account={account} client={client} setAttachment={setAttachment} />
-          <Media open={attachment !== null} close={() => setAttachment(null)} attachment={attachment} />
-          {report && <Report open={report !== null} close={() => setReport(null)} status={report} client={client} />}
-        </>
-      )
-    }
-  }
+  return (
+    <>
+      {(router.query.timeline as string) === 'notifications' ? (
+        <Notifications account={account} client={client} setAttachment={setAttachment} />
+      ) : (
+        <Timeline timeline={router.query.timeline as string} account={account} client={client} setAttachment={setAttachment} />
+      )}
+      <Media open={attachment !== null} close={() => setAttachment(null)} attachment={attachment} />
+      {report && <Report open={report !== null} close={() => setReport(null)} status={report} client={client} />}
+    </>
+  )
 }