- Expand NotificationRepository (unread list paginated, count, markRead ownership-scoped); new ActivityLogRepository (create, findByProject paginated) with deterministic created_at+id ordering - NotificationService (notifyOnEvent, resolveTargets for 8 event types, injectable SseBroadcaster for M8) + ActivityLogService (logActivity, listByProject) - NotificationEvent/SseEvent/SseBroadcaster types in lib/types - APIs: GET /api/notifications, POST /api/notifications/:id/read, GET /api/projects/:projectId/activity - Screens: notifications list + MarkReadButton, NotificationBadge in Header, project activity page + ProjectNav link - Unit tests for both repositories and services (28 new)
51 lines
1.7 KiB
TypeScript
51 lines
1.7 KiB
TypeScript
import type { Notification } from '@/lib/types';
|
|
import { MarkReadButton } from '@/components/notifications/MarkReadButton';
|
|
|
|
const TYPE_LABELS: Record<string, string> = {
|
|
mention: 'メンション',
|
|
todo_assigned: 'ToDo担当',
|
|
todo_due_soon: 'ToDo期限',
|
|
meeting_invited: 'ミーティング招待',
|
|
board_commented: '掲示板コメント',
|
|
project_added: 'プロジェクト追加',
|
|
file_shared: 'ファイル共有',
|
|
note_updated: 'メモ更新',
|
|
};
|
|
|
|
export function NotificationList({
|
|
notifications,
|
|
}: {
|
|
notifications: Notification[];
|
|
}) {
|
|
if (notifications.length === 0) {
|
|
return <p className="text-sm text-gray-400">未読の通知はありません。</p>;
|
|
}
|
|
|
|
return (
|
|
<ul className="divide-y rounded-lg border bg-white shadow-sm">
|
|
{notifications.map((notification) => (
|
|
<li key={notification.id} className="p-4">
|
|
<div className="flex items-center justify-between">
|
|
<span className="rounded bg-blue-100 px-2 py-0.5 text-xs text-blue-700">
|
|
{TYPE_LABELS[notification.type] ?? notification.type}
|
|
</span>
|
|
<MarkReadButton notificationId={notification.id} />
|
|
</div>
|
|
<p className="mt-2 font-medium text-gray-800">{notification.title}</p>
|
|
{notification.body && (
|
|
<p className="mt-1 text-sm text-gray-600">{notification.body}</p>
|
|
)}
|
|
{notification.projectId !== null && (
|
|
<a
|
|
href={`/projects/${notification.projectId}`}
|
|
className="mt-1 inline-block text-xs text-blue-600 hover:underline"
|
|
>
|
|
プロジェクトを開く
|
|
</a>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
);
|
|
}
|