Moderation panel redesign

src/App.vue

@@ -2,13 +2,15 @@
 import { RouterLink, RouterView } from 'vue-router'
 import { onMounted } from 'vue'
 import AuthButton from '@/components/AuthButton.vue'
-import AdminModerationPanel from '@/components/Moderation/AdminModerationPanel.vue'
+import BulkSelectionTray from '@/components/Moderation/Panel/BulkSelectionTray.vue'
 import IconDiscord from '@/components/icons/IconDiscord.vue'
 import IconYoutube from '@/components/icons/IconYoutube.vue'
 import IconGithub from '@/components/icons/IconGithub.vue'
 import { useAuth } from '@/stores/auth'
+import { useModerationStore } from '@/stores/moderation'
 
 const { initAuth } = useAuth()
+const moderationStore = useModerationStore()
 
 onMounted(async () => {
   await initAuth()
@@ -31,15 +33,19 @@ onMounted(async () => {
             <router-link class="hover:text-gray-100 text-nowrap" to="/maps">Map Leaderboards</router-link>
             <router-link class="hover:text-gray-100 text-nowrap" to="/players">Player Lookup</router-link>
             <router-link class="hover:text-gray-100 text-nowrap" to="/servers">Servers</router-link>
+            <router-link
+              v-if="moderationStore.canAccessModerationPanel.value"
+              class="hover:text-gray-100 text-nowrap text-purple-300 hover:text-purple-200"
+              to="/moderation"
+            >Moderation</router-link>
           </nav>
           <AuthButton />
         </div>
       </div>
     </header>
     <RouterView class="mb-auto" />
 
-    <!-- Admin Moderation Panel -->
-    <AdminModerationPanel />
+    <BulkSelectionTray v-if="moderationStore.canAccessModerationPanel.value" />
 
     <!-- Footer -->
     <footer class="pt-8">

src/api/offstylesApi.ts

@@ -30,6 +30,7 @@ export interface ServerActivityOwner {
 
 export interface ServerActivityResponse {
   _id: string;
+  key_id: string;
   name: string;
   servers: ServerInfo[];
   permissions: number;
@@ -105,6 +106,9 @@ class OffstylesApi extends Api {
       case 'player':
         params.append("steamid", filter.scope.steamid);
         break;
+      case 'server':
+        params.append("server", filter.scope.server);
+        break;
       case 'globals':
         if (filter.scope.recent) params.append("recent", "true");
         if (filter.scope.wr !== undefined) params.append("wr", filter.scope.wr.toString());
@@ -239,6 +243,25 @@ class OffstylesApi extends Api {
     if (!response.ok) await throwApiError(response);
   }
 
+  // Server-owner self-invalidation (always invalidates; backend verifies the
+  // caller owns the server each record was set on).
+  static async serverOwnerInvalidate(recordIds: string[], reason: string): Promise<void> {
+    const params = new URLSearchParams({
+      ids: recordIds.join(","),
+    });
+
+    const response = await fetch(`${this.offstylesApiUrl}/so_moderate?${params.toString()}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "text/plain",
+      },
+      body: reason,
+      credentials: "include",
+    });
+
+    if (!response.ok) await throwApiError(response);
+  }
+
   // Get user profile data
   static async getUserProfile(steamId: string): Promise<User> {
     const params = new URLSearchParams({