scaffold: Vue 3 frontend — router, stores, views, composables, layouts

Complete frontend skeleton: Vite + Vue 3 + TypeScript + Tailwind CSS,
Pinia stores (auth, server, wipe, plugins), authenticated API composable,
full route tree with auth guards, DashboardLayout with sidebar nav,
23 view stubs across auth/admin/public, all TypeScript interfaces.

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

frontend/src/components/layout/DashboardLayout.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { RouterView, RouterLink, useRoute } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+import { useServerStore } from '@/stores/server'
+import {
+  LayoutDashboard,
+  Server,
+  Terminal,
+  Users,
+  Puzzle,
+  RefreshCw,
+  Map,
+  MessageSquare,
+  BarChart3,
+  Bell,
+  UserPlus,
+  ShoppingBag,
+  Package,
+  Settings,
+  LogOut,
+} from 'lucide-vue-next'
+
+const route = useRoute()
+const auth = useAuthStore()
+const server = useServerStore()
+
+const navItems = [
+  { name: 'Dashboard', path: '/', icon: LayoutDashboard },
+  { name: 'Server', path: '/server', icon: Server },
+  { name: 'Console', path: '/console', icon: Terminal },
+  { name: 'Players', path: '/players', icon: Users },
+  { name: 'Plugins', path: '/plugins', icon: Puzzle },
+  { name: 'Auto-Wiper', path: '/wipes', icon: RefreshCw },
+  { name: 'Maps', path: '/maps', icon: Map },
+  { name: 'Chat Log', path: '/chat', icon: MessageSquare },
+  { name: 'Analytics', path: '/analytics', icon: BarChart3 },
+  { name: 'Notifications', path: '/notifications', icon: Bell },
+  { name: 'Team', path: '/team', icon: UserPlus },
+  { name: 'Store', path: '/store/manage', icon: ShoppingBag },
+  { name: 'Modules', path: '/modules', icon: Package },
+  { name: 'Settings', path: '/settings', icon: Settings },
+]
+
+function isActive(path: string): boolean {
+  if (path === '/') return route.path === '/'
+  return route.path.startsWith(path)
+}
+
+function handleLogout() {
+  auth.logout()
+}
+</script>
+
+<template>
+  <div class="flex h-screen bg-neutral-950">
+    <!-- Sidebar -->
+    <aside class="w-64 bg-neutral-900 border-r border-neutral-800 flex flex-col">
+      <!-- Logo -->
+      <div class="p-4 border-b border-neutral-800">
+        <h1 class="text-xl font-bold text-red-500 tracking-wider">CORROSION</h1>
+        <p class="text-xs text-neutral-500 mt-1">{{ auth.license?.server_name || 'Server Management' }}</p>
+      </div>
+
+      <!-- Server Status Indicator -->
+      <div class="px-4 py-3 border-b border-neutral-800">
+        <div class="flex items-center gap-2">
+          <div
+            class="w-2 h-2 rounded-full"
+            :class="{
+              'bg-green-500': server.connection?.connection_status === 'connected',
+              'bg-yellow-500': server.connection?.connection_status === 'degraded',
+              'bg-red-500': server.connection?.connection_status === 'offline' || !server.connection,
+            }"
+          />
+          <span class="text-sm text-neutral-400">
+            {{ server.stats?.player_count ?? 0 }}/{{ server.stats?.max_players ?? 0 }} players
+          </span>
+        </div>
+      </div>
+
+      <!-- Navigation -->
+      <nav class="flex-1 overflow-y-auto py-2">
+        <RouterLink
+          v-for="item in navItems"
+          :key="item.path"
+          :to="item.path"
+          class="flex items-center gap-3 px-4 py-2 mx-2 rounded-lg text-sm transition-colors"
+          :class="isActive(item.path)
+            ? 'bg-red-500/10 text-red-400'
+            : 'text-neutral-400 hover:bg-neutral-800 hover:text-neutral-200'"
+        >
+          <component :is="item.icon" class="w-4 h-4" />
+          {{ item.name }}
+        </RouterLink>
+      </nav>
+
+      <!-- User -->
+      <div class="p-4 border-t border-neutral-800">
+        <div class="flex items-center justify-between">
+          <div>
+            <p class="text-sm text-neutral-300">{{ auth.user?.username }}</p>
+            <p class="text-xs text-neutral-500">{{ auth.user?.email }}</p>
+          </div>
+          <button
+            @click="handleLogout"
+            class="text-neutral-500 hover:text-red-400 transition-colors"
+          >
+            <LogOut class="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+    </aside>
+
+    <!-- Main Content -->
+    <main class="flex-1 overflow-y-auto">
+      <RouterView />
+    </main>
+  </div>
+</template>

frontend/src/components/layout/PublicLayout.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { RouterView } from 'vue-router'
+</script>
+
+<template>
+  <div class="min-h-screen bg-neutral-950">
+    <RouterView />
+
+    <footer class="py-6 text-center text-neutral-600 text-sm border-t border-neutral-800">
+      Powered by <span class="text-red-500 font-semibold">Corrosion</span>
+    </footer>
+  </div>
+</template>