messages screen improvement

This commit is contained in:
onysd 2026-09-08 01:19:33 +03:00
parent 280321b902
commit ae2cc3ba90
12 changed files with 438 additions and 111 deletions

View file

@ -1,6 +1,7 @@
import { ArrowLeft } from "lucide-react";
import { useEffect, useState } from "react";
import { api, errorMessage } from "../api";
import { MessageView } from "../components/MessageView";
import { Alert, Badge, EmptyRow, JsonBlock, LoadingSurface, PageFrame, SectionHead, Summary } from "../components/ui";
import { formatUnix } from "../lib/format";
import type { Navigate } from "../routing";
@ -38,32 +39,38 @@ export function GroupMessageDetailPage({ channelID, msgID, navigate }: { channel
actions={<button className="btn icon-text" onClick={() => navigate("/messages/groups")}><ArrowLeft size={15} /> {"Back to group messages"}</button>}
>
<div className="stacked-sections">
<section className="entity-head">
<div>
<div className="entity-title">{`Channel / Group ${msg.ChannelID}`}</div>
<div className="entity-subtitle">{`Sender ${msg.SenderUserID} · ${formatUnix(msg.Date)}`}</div>
</div>
<div className="entity-badges">
{msg.Deleted ? <Badge tone="danger">{"Deleted"}</Badge> : <Badge>{"Live"}</Badge>}
{msg.Pinned && <Badge tone="warn">{"Pinned"}</Badge>}
{msg.Post && <Badge>{"Channel post"}</Badge>}
<Badge>pts {msg.PTS}</Badge>
</div>
</section>
<MessageView
body={msg.Body}
media={msg.Media}
sender={msg.Post ? `Channel post in ${msg.ChannelID}` : `From ${msg.SenderUserID}`}
meta={`${formatUnix(msg.Date)}${msg.EditDate ? ` · edited ${formatUnix(msg.EditDate)}` : ""}${msg.ViewsCount ? ` · ${msg.ViewsCount} views` : ""}`}
badges={
<>
{msg.Deleted ? <Badge tone="danger">{"Deleted"}</Badge> : <Badge>{"Live"}</Badge>}
{msg.Pinned && <Badge tone="warn">{"Pinned"}</Badge>}
{msg.Post && <Badge>{"Channel post"}</Badge>}
</>
}
/>
<div className="summary-grid">
<Summary label={"Message ID"} value={String(msg.ID)} mono />
<Summary label={"Channel / Group"} value={String(msg.ChannelID)} mono />
<Summary label="From Peer" value={`${msg.FromPeerType}:${msg.FromPeerID}`} mono />
<Summary label={"Views"} value={String(msg.ViewsCount)} />
<Summary label={"pts"} value={String(msg.PTS)} mono />
</div>
<section className="section-block">
<SectionHead title={"Channel Message Row"} text={"channel_messages read-only snapshot"} />
<JsonBlock value={detail.MessageJSON} />
</section>
<section className="section-block">
<SectionHead title={"Channel Row"} text={"channels read-only snapshot"} />
<JsonBlock value={detail.ChannelJSON} />
</section>
<details className="raw-details">
<summary>{"Stored rows (JSON)"}</summary>
<div className="stacked-sections">
<section className="section-block">
<SectionHead title={"Channel Message Row"} text={"channel_messages read-only snapshot"} />
<JsonBlock value={detail.MessageJSON} />
</section>
<section className="section-block">
<SectionHead title={"Channel Row"} text={"channels read-only snapshot"} />
<JsonBlock value={detail.ChannelJSON} />
</section>
</div>
</details>
<section className="section-block">
<SectionHead title={"Channel Update Events"} text={"durable channel_update_events"} />
<div className="table-wrap">