Add player moderation workflows and game integration

src/lib/ui/components/ChatPanel.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
     import { onMount, tick } from 'svelte';
+    import { page } from '$app/stores';
+    import { canReadModeration } from '$lib/auth.js';
+    import { moderationHref } from '$ui/moderation.js';
     import type { ChatContext, ContextualChatEntry } from '$lib/game-chat.js';
     import { formatDuration } from '$ui/duration.js';
     import { groupChatTimeline, type ChatBoundaryEntry } from '$ui/chat-timeline.js';
@@ -10,16 +13,19 @@
 
     let {
         server,
+        game,
         history,
         hostOffline = false,
         hostName
     }: {
         server?: string;
+        game?: string;
         history?: ContextualChatEntry[];
         hostOffline?: boolean;
         hostName?: string;
     } = $props();
     let updatedAt = $state<number | null>(null);
+    const moderationGame = $derived(game ?? server?.split('_')[0]);
     let liveEntries = $state<ContextualChatEntry[]>([]);
     const entries = $derived(history ?? liveEntries);
     let timeline = $derived(groupChatTimeline(entries));
@@ -242,6 +248,18 @@
                                 <div class="message-head">
                                     <strong>{item.entry.message.player}</strong
                                     >{@render chatContext(item.entry.context)}
+                                    {#if canReadModeration($page.data?.user?.role) && (moderationGame === 't5' || moderationGame === 't6')}<a
+                                            class="moderation-link"
+                                            href={moderationHref({
+                                                game: moderationGame,
+                                                q: item.entry.message.guid,
+                                                server,
+                                                matchId: item.entry.matchId,
+                                                message: item.entry.message.message
+                                            })}
+                                            aria-label={`Review ${item.entry.message.player} in moderation`}
+                                            >Moderation</a
+                                        >{/if}
                                 </div>
                                 <p>{item.entry.message.message}</p>
                             </div>
@@ -371,6 +389,9 @@
         white-space: pre-wrap;
         overflow-wrap: anywhere;
     }
+    .moderation-link {
+        font-size: var(--text-xs);
+    }
     .match-events {
         padding: var(--space-1) 0;
     }
@@ -463,5 +484,9 @@
             grid-row: 3;
             margin-top: 0;
         }
+        .moderation-link {
+            grid-column: 1 / -1;
+            grid-row: 4;
+        }
     }
 </style>