feat(redesign): re-skin server-ops/operations/store/analytics views to DS (Phase D batch 2)

18 admin views re-skinned onto design-system components + tokens: Server/Players/Plugins/ChatLog, Wipes/WipeProfiles/Maps/Schedules/Alerts, StoreConfig/StoreItems/ModuleStore, Analytics/WipeAnalytics/MapAnalytics/PlayerRetention/StoreRevenue. ECharts now read var(--accent) (token-driven, follows game skin). 14 icons added to the registry. All logic/store/router/handlers/API calls preserved; presentation-only re-skin. Build green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/views/admin/ChatLogView.vue

@@ -3,7 +3,14 @@ import { ref, computed, onMounted } from 'vue'
 import { useApi } from '@/composables/useApi'
 import { useToastStore } from '@/stores/toast'
 import type { ChatMessage } from '@/types'
-import { MessageSquare, Search, Flag, RefreshCw } from 'lucide-vue-next'
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import IconButton from '@/components/ds/core/IconButton.vue'
+import Input from '@/components/ds/forms/Input.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
+import Tabs from '@/components/ds/navigation/Tabs.vue'
 
 const api = useApi()
 const toast = useToastStore()
@@ -32,12 +39,18 @@ const filteredMessages = computed(() => {
   return result
 })
 
-function channelBadgeClass(channel: string): string {
+const channelTabItems = computed(() => [
+  { value: 'all', label: 'All', count: messages.value.length },
+  { value: 'global', label: 'Global' },
+  { value: 'team', label: 'Team' },
+  { value: 'server', label: 'Server' },
+])
+
+function channelTone(channel: string): 'accent' | 'info' | 'neutral' {
   switch (channel) {
-    case 'global': return 'bg-oxide-500/15 text-oxide-400'
-    case 'team': return 'bg-blue-500/15 text-blue-400'
-    case 'server': return 'bg-neutral-700/50 text-neutral-400'
-    default: return 'bg-neutral-700/50 text-neutral-400'
+    case 'global': return 'accent'
+    case 'team': return 'info'
+    default: return 'neutral'
   }
 }
 
@@ -76,89 +89,163 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
-    <!-- Header -->
-    <div class="flex items-center justify-between">
-      <div class="flex items-center gap-3">
-        <MessageSquare class="w-5 h-5 text-oxide-500" />
+  <div class="clv">
+    <!-- Page head -->
+    <div class="clv__head">
+      <div class="clv__head-id">
+        <div class="clv__head-chip">
+          <Icon name="message-square" :size="20" :stroke-width="2" />
+        </div>
         <div>
-          <h1 class="text-2xl font-bold text-neutral-100">Chat Log</h1>
-          <p class="text-sm text-neutral-500 mt-0.5">{{ messages.length }} messages</p>
+          <div class="t-eyebrow">Chat log</div>
+          <h1 class="clv__title">Chat log</h1>
         </div>
       </div>
-      <button
-        @click="fetchMessages"
-        :disabled="isLoading"
-        class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 disabled:opacity-50 rounded-lg transition-colors"
-      >
-        <RefreshCw class="w-4 h-4" :class="{ 'animate-spin': isLoading }" />
-        Refresh
-      </button>
+      <div class="clv__head-actions">
+        <div class="clv__stat-pill">
+          <span class="clv__stat-num">{{ messages.length }}</span>
+          <span class="clv__stat-label">messages</span>
+        </div>
+        <Button
+          variant="secondary"
+          size="sm"
+          icon="refresh-cw"
+          :loading="isLoading"
+          :disabled="isLoading"
+          @click="fetchMessages"
+        >Refresh</Button>
+      </div>
     </div>
 
     <!-- Filters -->
-    <div class="flex items-center gap-4">
-      <div class="relative flex-1 max-w-sm">
-        <Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" />
-        <input
-          v-model="searchQuery"
-          type="text"
-          placeholder="Search messages, players, or Steam IDs..."
-          class="w-full pl-10 pr-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-        />
-      </div>
-      <div class="flex bg-neutral-800 rounded-lg border border-neutral-700 overflow-hidden">
-        <button
-          v-for="opt in (['all', 'global', 'team', 'server'] as const)"
-          :key="opt"
-          @click="channelFilter = opt"
-          class="px-3 py-2 text-sm font-medium transition-colors capitalize"
-          :class="channelFilter === opt
-            ? 'bg-oxide-500/15 text-oxide-400'
-            : 'text-neutral-400 hover:text-neutral-200'"
-        >
-          {{ opt }}
-        </button>
-      </div>
+    <div class="clv__filters">
+      <Input
+        v-model="searchQuery"
+        icon="search"
+        placeholder="Search messages, players, or Steam IDs…"
+        size="sm"
+        style="max-width: 340px;"
+      />
+      <Tabs v-model="channelFilter" :items="channelTabItems" />
     </div>
 
-    <!-- Messages -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-lg divide-y divide-neutral-800">
-      <div v-if="filteredMessages.length === 0" class="px-4 py-12 text-center text-neutral-500 text-sm">
-        <template v-if="isLoading">Loading chat messages...</template>
-        <template v-else-if="searchQuery">No messages matching "{{ searchQuery }}"</template>
-        <template v-else>No chat messages yet. Messages will appear when the server is active.</template>
+    <!-- Messages panel -->
+    <Panel :flush-body="true">
+      <!-- Empty state -->
+      <EmptyState
+        v-if="filteredMessages.length === 0 && !isLoading"
+        icon="message-square"
+        :title="searchQuery ? 'No messages found' : 'No chat messages'"
+        :description="searchQuery
+          ? `No messages matching &quot;${searchQuery}&quot;.`
+          : 'No chat messages yet. Messages will appear when the server is active.'"
+      />
+
+      <!-- Loading -->
+      <div v-else-if="isLoading && filteredMessages.length === 0" class="clv__loading">
+        <Icon name="loader" :size="20" class="clv__spin" />
+        <span>Loading chat messages…</span>
       </div>
-      <div
-        v-for="msg in filteredMessages"
-        :key="msg.id"
-        class="flex items-start gap-4 px-4 py-3 hover:bg-neutral-800/50 transition-colors"
-        :class="{ 'bg-red-500/5 border-l-2 border-l-red-500/30': msg.flagged }"
-      >
-        <div class="shrink-0 text-right w-20">
-          <p class="text-xs text-neutral-500">{{ formatDate(msg.created_at) }}</p>
-          <p class="text-xs text-neutral-600">{{ formatTime(msg.created_at) }}</p>
-        </div>
-        <span
-          class="shrink-0 text-xs font-medium px-2 py-0.5 rounded-full mt-0.5"
-          :class="channelBadgeClass(msg.channel)"
+
+      <!-- Message list -->
+      <div v-else class="clv__messages">
+        <div
+          v-for="msg in filteredMessages"
+          :key="msg.id"
+          class="clv__row"
+          :class="{ 'clv__row--flagged': msg.flagged }"
         >
-          {{ msg.channel }}
-        </span>
-        <div class="flex-1 min-w-0">
-          <span class="text-sm font-medium text-oxide-400">{{ msg.player_name }}</span>
-          <span class="text-sm text-neutral-500 ml-2 font-mono">{{ msg.steam_id }}</span>
-          <p class="text-sm text-neutral-300 mt-0.5 break-words">{{ msg.message }}</p>
+          <!-- Timestamp -->
+          <div class="clv__ts">
+            <span class="clv__date">{{ formatDate(msg.created_at) }}</span>
+            <span class="clv__time">{{ formatTime(msg.created_at) }}</span>
+          </div>
+
+          <!-- Channel badge -->
+          <Badge :tone="channelTone(msg.channel)" size="md">{{ msg.channel }}</Badge>
+
+          <!-- Message body -->
+          <div class="clv__body">
+            <span class="clv__player">{{ msg.player_name }}</span>
+            <span class="clv__steam">{{ msg.steam_id }}</span>
+            <p class="clv__text">{{ msg.message }}</p>
+          </div>
+
+          <!-- Flag toggle -->
+          <IconButton
+            icon="bookmark"
+            :variant="msg.flagged ? 'accent' : 'ghost'"
+            size="sm"
+            :label="msg.flagged ? 'Unflag message' : 'Flag message'"
+            @click="toggleFlag(msg)"
+          />
         </div>
-        <button
-          @click="toggleFlag(msg)"
-          class="shrink-0 p-1 rounded transition-colors"
-          :class="msg.flagged ? 'text-red-400 hover:text-red-300' : 'text-neutral-600 hover:text-neutral-400'"
-          :title="msg.flagged ? 'Unflag message' : 'Flag message'"
-        >
-          <Flag class="w-4 h-4" />
-        </button>
       </div>
-    </div>
+    </Panel>
   </div>
 </template>
+
+<style scoped>
+.clv { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
+
+/* Page head */
+.clv__head {
+  display: flex; align-items: flex-end; justify-content: space-between;
+  flex-wrap: wrap; gap: 12px;
+}
+.clv__head-id { display: flex; align-items: center; gap: 12px; }
+.clv__head-chip {
+  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--accent); background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.clv__title {
+  font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
+  color: var(--text-primary); margin-top: 3px;
+}
+.clv__head-actions { display: flex; align-items: center; gap: 12px; }
+
+/* Stat pill */
+.clv__stat-pill { display: flex; align-items: center; gap: 6px; }
+.clv__stat-num { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
+.clv__stat-label { font-size: var(--text-xs); color: var(--text-tertiary); }
+
+/* Filters */
+.clv__filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+
+/* Loading */
+.clv__loading {
+  display: flex; align-items: center; justify-content: center; gap: 10px;
+  padding: 48px; color: var(--text-tertiary); font-size: var(--text-sm);
+}
+@keyframes clv-spin { to { transform: rotate(360deg); } }
+.clv__spin { animation: clv-spin 0.7s linear infinite; }
+
+/* Messages */
+.clv__messages { display: flex; flex-direction: column; }
+.clv__row {
+  display: flex; align-items: flex-start; gap: 14px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+  transition: var(--transition-colors);
+}
+.clv__row:last-child { border-bottom: 0; }
+.clv__row:hover { background: var(--surface-hover); }
+.clv__row--flagged {
+  background: var(--status-offline-soft);
+  border-left: 3px solid var(--status-offline-border);
+}
+.clv__row--flagged:hover { background: var(--status-offline-soft); filter: brightness(1.04); }
+
+/* Timestamp */
+.clv__ts { display: flex; flex-direction: column; align-items: flex-end; min-width: 68px; flex: none; padding-top: 1px; }
+.clv__date { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); }
+.clv__time { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
+
+/* Message body */
+.clv__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.clv__player { font-size: var(--text-sm); font-weight: 600; color: var(--accent-text); }
+.clv__steam { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); margin-left: 8px; }
+.clv__text { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.5; word-break: break-word; margin: 0; }
+</style>