427 lines
15 KiB
TypeScript
427 lines
15 KiB
TypeScript
|
import { useEffect, useMemo, useState } from "react";
|
||
|
|
import { Link } from "react-router-dom";
|
||
|
|
import { PageHeader } from "../components/layout/PageHeader";
|
||
|
|
import { Badge, Button, Card, EmptyState } from "../components/ui";
|
||
|
|
import { useData, useRepos } from "../data/DataContext";
|
||
|
|
import type {
|
||
|
|
OutboxBundle,
|
||
|
|
OwnPost,
|
||
|
|
ScoutPost,
|
||
|
|
ThreadsAccount,
|
||
|
|
TrendItem,
|
||
|
|
} from "../domain/types";
|
||
|
|
import { useI18n } from "../i18n/I18nContext";
|
||
|
|
import { loadScoutToday } from "../lib/scoutToday";
|
||
|
|
|
||
|
|
function isPendingScout(p: ScoutPost): boolean {
|
||
|
|
return p.outreach_status === "new" || p.outreach_status === "drafted";
|
||
|
|
}
|
||
|
|
|
||
|
|
function startOfLocalDayNano(): number {
|
||
|
|
const d = new Date();
|
||
|
|
d.setHours(0, 0, 0, 0);
|
||
|
|
return d.getTime() * 1_000_000;
|
||
|
|
}
|
||
|
|
|
||
|
|
type AccountPulse = {
|
||
|
|
account: ThreadsAccount;
|
||
|
|
posts: number;
|
||
|
|
views: number;
|
||
|
|
likes: number;
|
||
|
|
replies: number;
|
||
|
|
topInsight?: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
export function TodayPage() {
|
||
|
|
const repos = useRepos();
|
||
|
|
const { tick, refresh } = useData();
|
||
|
|
const { t, locale } = useI18n();
|
||
|
|
|
||
|
|
const [scoutPosts, setScoutPosts] = useState<ScoutPost[]>([]);
|
||
|
|
const [outbox, setOutbox] = useState<OutboxBundle[]>([]);
|
||
|
|
const [trends, setTrends] = useState<TrendItem[]>([]);
|
||
|
|
const [ownPosts, setOwnPosts] = useState<OwnPost[]>([]);
|
||
|
|
const [accounts, setAccounts] = useState<ThreadsAccount[]>([]);
|
||
|
|
const [scoutDone, setScoutDone] = useState(0);
|
||
|
|
const [scoutGoal, setScoutGoal] = useState(8);
|
||
|
|
|
||
|
|
const dateLocale = locale === "en" ? "en-US" : "zh-TW";
|
||
|
|
|
||
|
|
const todayLabel = useMemo(
|
||
|
|
() =>
|
||
|
|
new Date().toLocaleDateString(dateLocale, {
|
||
|
|
month: "numeric",
|
||
|
|
day: "numeric",
|
||
|
|
weekday: "short",
|
||
|
|
}),
|
||
|
|
[dateLocale, tick],
|
||
|
|
);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
void (async () => {
|
||
|
|
const scout = loadScoutToday();
|
||
|
|
setScoutDone(scout.done);
|
||
|
|
setScoutGoal(scout.goalValue);
|
||
|
|
const [posts, box, trendList, owns, acc] = await Promise.all([
|
||
|
|
repos.scout.listPosts(),
|
||
|
|
repos.outbox.list(),
|
||
|
|
repos.inspiration.listTrends("all"),
|
||
|
|
repos.ownPosts.list(),
|
||
|
|
repos.accounts.list(),
|
||
|
|
]);
|
||
|
|
setScoutPosts(posts);
|
||
|
|
setOutbox(box);
|
||
|
|
setTrends(trendList.slice(0, 8));
|
||
|
|
setOwnPosts(owns);
|
||
|
|
setAccounts(acc.filter((a) => a.is_usable));
|
||
|
|
})();
|
||
|
|
}, [repos, tick]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const onStore = () => refresh();
|
||
|
|
window.addEventListener("harbor:store", onStore);
|
||
|
|
return () => window.removeEventListener("harbor:store", onStore);
|
||
|
|
}, [refresh]);
|
||
|
|
|
||
|
|
const dayStart = useMemo(() => startOfLocalDayNano(), [tick]);
|
||
|
|
|
||
|
|
const pendingScout = useMemo(
|
||
|
|
() =>
|
||
|
|
scoutPosts
|
||
|
|
.filter(isPendingScout)
|
||
|
|
.slice()
|
||
|
|
.sort((a, b) => (b.score || 0) - (a.score || 0)),
|
||
|
|
[scoutPosts],
|
||
|
|
);
|
||
|
|
|
||
|
|
const failedOutbox = useMemo(
|
||
|
|
() => outbox.filter((o) => o.status === "partial_failed"),
|
||
|
|
[outbox],
|
||
|
|
);
|
||
|
|
const runningOutbox = useMemo(
|
||
|
|
() => outbox.filter((o) => o.status === "scheduling" || o.status === "active"),
|
||
|
|
[outbox],
|
||
|
|
);
|
||
|
|
const sentToday = useMemo(() => {
|
||
|
|
return outbox.filter((o) => {
|
||
|
|
if (o.status !== "completed") return false;
|
||
|
|
return o.updated_at >= dayStart;
|
||
|
|
}).length;
|
||
|
|
}, [outbox, dayStart]);
|
||
|
|
|
||
|
|
const goalPct = Math.min(100, Math.round((scoutDone / Math.max(1, scoutGoal)) * 100));
|
||
|
|
|
||
|
|
const topicCards = useMemo(() => trends.slice(0, 3), [trends]);
|
||
|
|
|
||
|
|
const accountPulses = useMemo((): AccountPulse[] => {
|
||
|
|
const byAcc = new Map<string, OwnPost[]>();
|
||
|
|
for (const p of ownPosts) {
|
||
|
|
const list = byAcc.get(p.account_id) || [];
|
||
|
|
list.push(p);
|
||
|
|
byAcc.set(p.account_id, list);
|
||
|
|
}
|
||
|
|
const rows: AccountPulse[] = [];
|
||
|
|
for (const acc of accounts) {
|
||
|
|
const posts = byAcc.get(acc.id) || [];
|
||
|
|
if (!posts.length && accounts.length > 3) continue;
|
||
|
|
const views = posts.reduce((s, p) => s + (p.view_count || 0), 0);
|
||
|
|
const likes = posts.reduce((s, p) => s + (p.like_count || 0), 0);
|
||
|
|
const replies = posts.reduce((s, p) => s + (p.reply_count || 0), 0);
|
||
|
|
const top = posts.slice().sort((a, b) => (b.view_count || 0) - (a.view_count || 0))[0];
|
||
|
|
rows.push({
|
||
|
|
account: acc,
|
||
|
|
posts: posts.length,
|
||
|
|
views,
|
||
|
|
likes,
|
||
|
|
replies,
|
||
|
|
topInsight: top?.insight || top?.formula_summary,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
// 沒 usable 時仍展示有貼文的帳
|
||
|
|
if (!rows.length) {
|
||
|
|
for (const [accId, posts] of byAcc) {
|
||
|
|
const acc =
|
||
|
|
accounts.find((a) => a.id === accId) ||
|
||
|
|
({
|
||
|
|
id: accId,
|
||
|
|
username: accId,
|
||
|
|
display_name: accId,
|
||
|
|
connection: "connected",
|
||
|
|
is_usable: true,
|
||
|
|
avatar_color: "#888",
|
||
|
|
} as ThreadsAccount);
|
||
|
|
rows.push({
|
||
|
|
account: acc,
|
||
|
|
posts: posts.length,
|
||
|
|
views: posts.reduce((s, p) => s + (p.view_count || 0), 0),
|
||
|
|
likes: posts.reduce((s, p) => s + (p.like_count || 0), 0),
|
||
|
|
replies: posts.reduce((s, p) => s + (p.reply_count || 0), 0),
|
||
|
|
topInsight: posts[0]?.insight,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return rows
|
||
|
|
.sort((a, b) => b.views - a.views || b.likes - a.likes)
|
||
|
|
.slice(0, 4);
|
||
|
|
}, [accounts, ownPosts]);
|
||
|
|
|
||
|
|
const pendingPreview = pendingScout.slice(0, 3);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<PageHeader title={t("nav.today")} description={todayLabel} />
|
||
|
|
|
||
|
|
<div className="hb-today-actions">
|
||
|
|
<Link to="/app/studio">
|
||
|
|
<Button type="button">{t("today.findTopic")}</Button>
|
||
|
|
</Link>
|
||
|
|
<Link to="/app/scout">
|
||
|
|
<Button type="button" variant={pendingScout.length ? "primary" : "ghost"}>
|
||
|
|
{pendingScout.length
|
||
|
|
? t("today.pendingRepliesN", { n: pendingScout.length })
|
||
|
|
: t("today.pendingReplies")}
|
||
|
|
</Button>
|
||
|
|
</Link>
|
||
|
|
<Link to="/app/studio/new">
|
||
|
|
<Button type="button" variant="ghost">
|
||
|
|
{t("today.newThread")}
|
||
|
|
</Button>
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 數值列 */}
|
||
|
|
<div className="hb-today-metrics" role="group" aria-label={t("today.metricsAria")}>
|
||
|
|
<Link to="/app/scout" className="hb-today-metric">
|
||
|
|
<span className="hb-today-metric__label">{t("today.metric.pending")}</span>
|
||
|
|
<span className="hb-today-metric__value">{pendingScout.length}</span>
|
||
|
|
<span className="hb-today-metric__hint">{t("today.metric.pendingHint")}</span>
|
||
|
|
</Link>
|
||
|
|
<div className="hb-today-metric">
|
||
|
|
<span className="hb-today-metric__label">{t("today.metric.doneGoal")}</span>
|
||
|
|
<span className="hb-today-metric__value">
|
||
|
|
{scoutDone}
|
||
|
|
<span className="hb-today-metric__den">/{scoutGoal}</span>
|
||
|
|
</span>
|
||
|
|
<div className="hb-progress hb-progress--sm" aria-hidden>
|
||
|
|
<div className="hb-progress__bar" style={{ width: `${goalPct}%` }} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<Link to="/app/outbox" className="hb-today-metric">
|
||
|
|
<span className="hb-today-metric__label">{t("today.metric.sentToday")}</span>
|
||
|
|
<span className="hb-today-metric__value">{sentToday}</span>
|
||
|
|
<span className="hb-today-metric__hint">
|
||
|
|
{runningOutbox.length
|
||
|
|
? t("today.metric.running", { n: runningOutbox.length })
|
||
|
|
: t("today.metric.sentDone")}
|
||
|
|
</span>
|
||
|
|
</Link>
|
||
|
|
<Link
|
||
|
|
to="/app/outbox"
|
||
|
|
className={`hb-today-metric${failedOutbox.length ? " is-alert" : ""}`}
|
||
|
|
>
|
||
|
|
<span className="hb-today-metric__label">{t("today.metric.failed")}</span>
|
||
|
|
<span className="hb-today-metric__value">{failedOutbox.length}</span>
|
||
|
|
<span className="hb-today-metric__hint">
|
||
|
|
{failedOutbox.length ? t("today.metric.needAction") : t("today.metric.ok")}
|
||
|
|
</span>
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 待回覆 */}
|
||
|
|
<Card title={t("today.pending.title", { n: pendingScout.length })}>
|
||
|
|
{pendingPreview.length === 0 ? (
|
||
|
|
<EmptyState
|
||
|
|
title={t("today.pending.empty")}
|
||
|
|
action={
|
||
|
|
<Link to="/app/scout">
|
||
|
|
<Button type="button">{t("today.goScout")}</Button>
|
||
|
|
</Link>
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
) : (
|
||
|
|
<div className="hb-stack">
|
||
|
|
<ul className="hb-today-list">
|
||
|
|
{pendingPreview.map((p) => (
|
||
|
|
<li key={p.id}>
|
||
|
|
<Link to="/app/scout" className="hb-today-list__item">
|
||
|
|
<span className="hb-today-list__meta">
|
||
|
|
@{p.author}
|
||
|
|
{p.search_tag ? ` · ${p.search_tag}` : ""}
|
||
|
|
{typeof p.score === "number" ? ` · ${Math.round(p.score)}` : ""}
|
||
|
|
</span>
|
||
|
|
<span className="hb-today-list__text">
|
||
|
|
{p.text.slice(0, 96)}
|
||
|
|
{p.text.length > 96 ? "…" : ""}
|
||
|
|
</span>
|
||
|
|
</Link>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
{pendingScout.length > pendingPreview.length ? (
|
||
|
|
<p className="text-muted" style={{ margin: 0, fontSize: "0.85rem" }}>
|
||
|
|
{t("today.pending.more", { n: pendingScout.length - pendingPreview.length })}{" "}
|
||
|
|
<Link to="/app/scout">{t("today.pending.handle")}</Link>
|
||
|
|
</p>
|
||
|
|
) : (
|
||
|
|
<Link to="/app/scout">
|
||
|
|
<Button type="button" variant="ghost">
|
||
|
|
{t("today.pending.start")}
|
||
|
|
</Button>
|
||
|
|
</Link>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
{/* 找話題 */}
|
||
|
|
<Card title={t("today.topics.title")}>
|
||
|
|
{topicCards.length === 0 ? (
|
||
|
|
<EmptyState
|
||
|
|
title={t("today.topics.empty")}
|
||
|
|
action={
|
||
|
|
<Link to="/app/studio">
|
||
|
|
<Button type="button">{t("today.goStudio")}</Button>
|
||
|
|
</Link>
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
) : (
|
||
|
|
<div className="hb-stack">
|
||
|
|
<ul className="hb-today-list">
|
||
|
|
{topicCards.map((item) => (
|
||
|
|
<li key={item.id}>
|
||
|
|
<Link to="/app/studio" className="hb-today-list__item">
|
||
|
|
<span className="hb-today-list__meta">
|
||
|
|
{item.label}
|
||
|
|
{typeof item.heat === "number" ? (
|
||
|
|
<Badge tone="brand">{t("today.heat", { n: item.heat })}</Badge>
|
||
|
|
) : null}
|
||
|
|
</span>
|
||
|
|
<span className="hb-today-list__text">
|
||
|
|
{item.summary?.slice(0, 100) || item.samples?.[0] || t("today.topicAngle")}
|
||
|
|
{(item.summary?.length || 0) > 100 ? "…" : ""}
|
||
|
|
</span>
|
||
|
|
</Link>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
<div className="hb-today-actions" style={{ margin: 0 }}>
|
||
|
|
<Link to="/app/studio">
|
||
|
|
<Button type="button" variant="ghost">
|
||
|
|
{t("today.moreInspire")}
|
||
|
|
</Button>
|
||
|
|
</Link>
|
||
|
|
<Link to="/app/studio/new">
|
||
|
|
<Button type="button" variant="ghost">
|
||
|
|
{t("today.useTopic")}
|
||
|
|
</Button>
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
{/* 發送摘要 */}
|
||
|
|
<Card title={t("today.outbox.title")}>
|
||
|
|
{failedOutbox.length === 0 && runningOutbox.length === 0 && sentToday === 0 ? (
|
||
|
|
<p className="text-muted" style={{ margin: 0 }}>
|
||
|
|
{t("today.outbox.empty")}{" "}
|
||
|
|
<Link to="/app/studio/new">{t("today.newThread")}</Link>
|
||
|
|
{t("today.outbox.emptyMid")}{" "}
|
||
|
|
<Link to="/app/outbox">{t("nav.outbox")}</Link>
|
||
|
|
{t("today.outbox.emptyEnd")}
|
||
|
|
</p>
|
||
|
|
) : (
|
||
|
|
<div className="hb-stack" style={{ gap: "0.5rem" }}>
|
||
|
|
<p style={{ margin: 0, fontSize: "0.9rem" }}>
|
||
|
|
{t("today.outbox.summary", {
|
||
|
|
sent: sentToday,
|
||
|
|
running: runningOutbox.length,
|
||
|
|
failed: failedOutbox.length,
|
||
|
|
})}
|
||
|
|
</p>
|
||
|
|
{failedOutbox.slice(0, 2).map((o) => (
|
||
|
|
<p key={o.id} style={{ margin: 0, fontSize: "0.85rem" }}>
|
||
|
|
<Badge tone="danger">{t("today.badge.failed")}</Badge>{" "}
|
||
|
|
<Link to={`/app/outbox/${o.id}`}>{o.title}</Link>
|
||
|
|
</p>
|
||
|
|
))}
|
||
|
|
{runningOutbox.slice(0, 2).map((o) => (
|
||
|
|
<p key={o.id} style={{ margin: 0, fontSize: "0.85rem" }}>
|
||
|
|
<Badge tone="brand">
|
||
|
|
{o.status === "scheduling" ? t("today.badge.scheduling") : t("today.badge.sending")}
|
||
|
|
</Badge>{" "}
|
||
|
|
<Link to={`/app/outbox/${o.id}`}>{o.title}</Link>
|
||
|
|
</p>
|
||
|
|
))}
|
||
|
|
<Link to="/app/outbox">
|
||
|
|
<Button type="button" variant="ghost">
|
||
|
|
{t("today.openOutbox")}
|
||
|
|
</Button>
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
{/* 帳號成效（輕量） */}
|
||
|
|
<Card title={t("today.accounts.title")}>
|
||
|
|
{accountPulses.length === 0 ? (
|
||
|
|
<EmptyState
|
||
|
|
title={t("today.accounts.empty")}
|
||
|
|
action={
|
||
|
|
<Link to="/app/crew">
|
||
|
|
<Button type="button" variant="ghost">
|
||
|
|
{t("nav.crew")}
|
||
|
|
</Button>
|
||
|
|
</Link>
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
) : (
|
||
|
|
<div className="hb-stack">
|
||
|
|
<ul className="hb-today-account-list">
|
||
|
|
{accountPulses.map((row) => (
|
||
|
|
<li key={row.account.id} className="hb-today-account">
|
||
|
|
<div className="hb-today-account__head">
|
||
|
|
<strong>@{row.account.username}</strong>
|
||
|
|
<span className="text-muted" style={{ fontSize: "0.78rem" }}>
|
||
|
|
{t("today.postsCount", { n: row.posts })}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div className="hb-today-account__stats">
|
||
|
|
<span>
|
||
|
|
{t("today.views")} <strong>{row.views.toLocaleString(dateLocale)}</strong>
|
||
|
|
</span>
|
||
|
|
<span>
|
||
|
|
{t("today.likes")} <strong>{row.likes}</strong>
|
||
|
|
</span>
|
||
|
|
<span>
|
||
|
|
{t("today.repliesShort")} <strong>{row.replies}</strong>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
{row.topInsight ? (
|
||
|
|
<p className="hb-today-account__insight">{row.topInsight}</p>
|
||
|
|
) : null}
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
<div className="hb-today-actions" style={{ margin: 0 }}>
|
||
|
|
<Link to="/app/insights">
|
||
|
|
<Button type="button">{t("today.fullInsights")}</Button>
|
||
|
|
</Link>
|
||
|
|
<Link to="/app/studio?tab=posts">
|
||
|
|
<Button type="button" variant="ghost">
|
||
|
|
{t("today.viewPosts")}
|
||
|
|
</Button>
|
||
|
|
</Link>
|
||
|
|
<Link to="/app/crew">
|
||
|
|
<Button type="button" variant="ghost">
|
||
|
|
{t("today.manageAccounts")}
|
||
|
|
</Button>
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</Card>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|