feat: Add loot builder frontend — Pinia store, views, 4 components, router + nav

Implements the complete frontend for BetterLoot profile management:
- Pinia store (loot.ts) with CRUD, import/export, apply-to-server actions
- LootBuilderView orchestrator with profile bar, modals, two-column layout
- LootContainerSidebar with categorized container list, search, config indicators
- LootItemEditor for per-container item settings and ungrouped item table
- LootItemPicker modal with searchable/filterable Rust item grid
- LootGroupEditor for reusable loot group management
- Router integration at /loot-builder
- Sidebar nav item with Crosshair icon and loot.view permission

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

frontend/src/views/admin/LootBuilderView.vue

@@ -0,0 +1,393 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useLootStore } from '@/stores/loot'
+import { useToastStore } from '@/stores/toast'
+import LootContainerSidebar from '@/components/loot/LootContainerSidebar.vue'
+import LootItemEditor from '@/components/loot/LootItemEditor.vue'
+import LootGroupEditor from '@/components/loot/LootGroupEditor.vue'
+import LootItemPicker from '@/components/loot/LootItemPicker.vue'
+import { Save, Upload, Download, Play, Copy, Trash2, Plus, Layers } from 'lucide-vue-next'
+
+const loot = useLootStore()
+const toast = useToastStore()
+
+const showCreateModal = ref(false)
+const showImportModal = ref(false)
+const showItemPicker = ref(false)
+const newProfileName = ref('')
+const newProfileDesc = ref('')
+const selectedMultiplier = ref(1)
+const showApplyDropdown = ref(false)
+const importJson = ref('')
+const importName = ref('')
+const activeTab = ref<'items' | 'groups'>('items')
+
+const multipliers = [1, 2, 5, 10]
+
+onMounted(async () => {
+  await loot.fetchProfiles()
+  if (loot.profiles.length > 0) {
+    await loot.loadProfile(loot.profiles[0].id)
+  }
+})
+
+async function handleCreateProfile() {
+  if (!newProfileName.value.trim()) return
+  const profile = await loot.createProfile(newProfileName.value.trim(), newProfileDesc.value.trim() || undefined)
+  if (profile) {
+    showCreateModal.value = false
+    newProfileName.value = ''
+    newProfileDesc.value = ''
+  }
+}
+
+async function handleDeleteProfile() {
+  if (!loot.currentProfile) return
+  if (!confirm(`Delete "${loot.currentProfile.profile_name}"?`)) return
+  await loot.deleteProfile(loot.currentProfile.id)
+}
+
+async function handleDuplicate() {
+  if (!loot.currentProfile) return
+  const dup = await loot.duplicateProfile(loot.currentProfile.id)
+  if (dup) await loot.loadProfile(dup.id)
+}
+
+async function handleApply(mult: number) {
+  if (!loot.currentProfile) return
+  showApplyDropdown.value = false
+  if (loot.isDirty) {
+    await loot.saveCurrentProfile()
+  }
+  await loot.applyToServer(loot.currentProfile.id, mult)
+}
+
+async function handleImport() {
+  if (!importName.value.trim() || !importJson.value.trim()) return
+  try {
+    const parsed = JSON.parse(importJson.value)
+    // Support both full export format and raw LootTables format
+    const lootTable = parsed.loot_table || parsed
+    const lootGroups = parsed.loot_groups || {}
+    await loot.importProfile(importName.value.trim(), lootTable, lootGroups)
+    showImportModal.value = false
+    importJson.value = ''
+    importName.value = ''
+  } catch {
+    toast.error('Invalid JSON')
+  }
+}
+
+async function handleExport() {
+  if (!loot.currentProfile) return
+  const data = await loot.exportProfile(loot.currentProfile.id, selectedMultiplier.value)
+  if (!data) return
+  const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = `${data.profile_name}_${data.multiplier}x.json`
+  a.click()
+  URL.revokeObjectURL(url)
+}
+
+async function handleProfileChange(id: string) {
+  if (loot.isDirty) {
+    if (!confirm('Unsaved changes will be lost. Continue?')) return
+  }
+  await loot.loadProfile(id)
+}
+
+function handleAddItem(shortname: string) {
+  if (!loot.currentProfile || !loot.selectedContainer) return
+  const table = loot.currentProfile.loot_table
+  if (!table[loot.selectedContainer]) {
+    table[loot.selectedContainer] = {
+      Enabled: true,
+      LootProfiles: [],
+      GuaranteedItems: {},
+      UngroupedItems: {},
+      ItemSettings: { ItemsMin: 1, ItemsMax: 6, MinScrap: 0, MaxScrap: 0 },
+    }
+  }
+  const container = table[loot.selectedContainer]
+  if (!container.UngroupedItems) container.UngroupedItems = {}
+  if (!container.UngroupedItems[shortname]) {
+    container.UngroupedItems[shortname] = {
+      Min: 1,
+      Max: 1,
+      SkinId: 0,
+      DisplayName: '',
+      Probability: 50,
+      DurabilitySettings: { MinDurability: 1, MaxDurability: 1 },
+      ItemEntryModifications: { AmmoSettings: null, AttachmentSettings: null },
+      BonusItems: {},
+    }
+    loot.markDirty()
+  }
+  showItemPicker.value = false
+}
+</script>
+
+<template>
+  <div class="p-6 space-y-4">
+    <!-- Header -->
+    <div class="flex items-center justify-between">
+      <h1 class="text-2xl font-bold text-neutral-100">Loot Builder</h1>
+      <div class="flex items-center gap-2">
+        <button
+          @click="showCreateModal = true"
+          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
+        >
+          <Plus class="w-4 h-4" />
+          New Profile
+        </button>
+      </div>
+    </div>
+
+    <!-- Profile Bar -->
+    <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-4">
+      <div class="flex items-center gap-3 flex-wrap">
+        <!-- Profile Selector -->
+        <select
+          v-if="loot.profiles.length > 0"
+          :value="loot.currentProfile?.id || ''"
+          @change="handleProfileChange(($event.target as HTMLSelectElement).value)"
+          class="bg-neutral-800 border border-neutral-700 text-neutral-200 rounded-lg px-3 py-2 text-sm min-w-[200px]"
+        >
+          <option v-for="p in loot.profiles" :key="p.id" :value="p.id">
+            {{ p.profile_name }}
+            <template v-if="p.is_active"> (Active)</template>
+          </option>
+        </select>
+        <span v-else class="text-neutral-500 text-sm">No profiles yet</span>
+
+        <!-- Save -->
+        <button
+          @click="loot.saveCurrentProfile()"
+          :disabled="!loot.currentProfile || !loot.isDirty || loot.isSaving"
+          class="flex items-center gap-2 px-3 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
+        >
+          <Save class="w-4 h-4" />
+          {{ loot.isSaving ? 'Saving...' : 'Save' }}
+        </button>
+
+        <!-- Apply Dropdown -->
+        <div class="relative">
+          <button
+            @click="showApplyDropdown = !showApplyDropdown"
+            :disabled="!loot.currentProfile || loot.isApplying"
+            class="flex items-center gap-2 px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
+          >
+            <Play class="w-4 h-4" />
+            {{ loot.isApplying ? 'Applying...' : 'Apply to Server' }}
+          </button>
+          <div
+            v-if="showApplyDropdown"
+            class="absolute top-full mt-1 right-0 bg-neutral-800 border border-neutral-700 rounded-lg shadow-xl z-10 py-1 min-w-[140px]"
+          >
+            <button
+              v-for="m in multipliers"
+              :key="m"
+              @click="handleApply(m)"
+              class="w-full text-left px-4 py-2 text-sm text-neutral-300 hover:bg-neutral-700"
+            >
+              {{ m }}x Multiplier
+            </button>
+          </div>
+        </div>
+
+        <!-- Duplicate -->
+        <button
+          @click="handleDuplicate"
+          :disabled="!loot.currentProfile"
+          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 disabled:opacity-50 text-sm"
+        >
+          <Copy class="w-4 h-4" />
+          Duplicate
+        </button>
+
+        <!-- Import -->
+        <button
+          @click="showImportModal = true"
+          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
+        >
+          <Upload class="w-4 h-4" />
+          Import
+        </button>
+
+        <!-- Export -->
+        <button
+          @click="handleExport"
+          :disabled="!loot.currentProfile"
+          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 disabled:opacity-50 text-sm"
+        >
+          <Download class="w-4 h-4" />
+          Export
+        </button>
+
+        <!-- Delete -->
+        <button
+          @click="handleDeleteProfile"
+          :disabled="!loot.currentProfile"
+          class="flex items-center gap-2 px-3 py-2 bg-red-500/10 text-red-400 rounded-lg hover:bg-red-500/20 disabled:opacity-50 text-sm ml-auto"
+        >
+          <Trash2 class="w-4 h-4" />
+          Delete
+        </button>
+      </div>
+    </div>
+
+    <!-- Main Content -->
+    <div v-if="loot.currentProfile" class="flex gap-4" style="height: calc(100vh - 250px)">
+      <!-- Sidebar -->
+      <LootContainerSidebar
+        :loot-table="loot.currentProfile.loot_table"
+        :selected="loot.selectedContainer"
+        @select="loot.selectedContainer = $event"
+      />
+
+      <!-- Editor Area -->
+      <div class="flex-1 flex flex-col min-w-0">
+        <!-- Tabs -->
+        <div class="flex border-b border-neutral-800 mb-4">
+          <button
+            @click="activeTab = 'items'"
+            class="px-4 py-2 text-sm font-medium border-b-2 transition-colors"
+            :class="activeTab === 'items' ? 'border-oxide-500 text-oxide-400' : 'border-transparent text-neutral-500 hover:text-neutral-300'"
+          >
+            Container Items
+          </button>
+          <button
+            @click="activeTab = 'groups'"
+            class="px-4 py-2 text-sm font-medium border-b-2 transition-colors flex items-center gap-2"
+            :class="activeTab === 'groups' ? 'border-oxide-500 text-oxide-400' : 'border-transparent text-neutral-500 hover:text-neutral-300'"
+          >
+            <Layers class="w-4 h-4" />
+            Loot Groups
+          </button>
+        </div>
+
+        <div class="flex-1 overflow-y-auto">
+          <LootItemEditor
+            v-if="activeTab === 'items' && loot.selectedContainer"
+            :container-key="loot.selectedContainer"
+            :loot-table="loot.currentProfile.loot_table"
+            @dirty="loot.markDirty()"
+            @add-item="showItemPicker = true"
+          />
+          <div v-else-if="activeTab === 'items'" class="flex items-center justify-center h-full text-neutral-500">
+            Select a container from the sidebar
+          </div>
+
+          <LootGroupEditor
+            v-if="activeTab === 'groups'"
+            :loot-groups="loot.currentProfile.loot_groups"
+            @dirty="loot.markDirty()"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- Empty State -->
+    <div v-else-if="!loot.isLoading" class="bg-neutral-900 border border-neutral-800 rounded-xl p-12 text-center">
+      <Layers class="w-12 h-12 text-neutral-600 mx-auto mb-4" />
+      <h2 class="text-lg font-semibold text-neutral-300 mb-2">No Loot Profile Selected</h2>
+      <p class="text-neutral-500 mb-4">Create a new profile or select one from the dropdown above.</p>
+      <button
+        @click="showCreateModal = true"
+        class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600"
+      >
+        Create First Profile
+      </button>
+    </div>
+
+    <!-- Loading -->
+    <div v-if="loot.isLoading" class="flex items-center justify-center py-20">
+      <div class="animate-spin w-8 h-8 border-2 border-oxide-500 border-t-transparent rounded-full" />
+    </div>
+
+    <!-- Create Modal -->
+    <div v-if="showCreateModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showCreateModal = false">
+      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-md">
+        <h2 class="text-lg font-semibold text-neutral-100 mb-4">New Loot Profile</h2>
+        <div class="space-y-4">
+          <div>
+            <label class="block text-sm text-neutral-400 mb-1">Profile Name</label>
+            <input
+              v-model="newProfileName"
+              placeholder="e.g. Vanilla 2x"
+              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
+              @keydown.enter="handleCreateProfile"
+            />
+          </div>
+          <div>
+            <label class="block text-sm text-neutral-400 mb-1">Description (optional)</label>
+            <textarea
+              v-model="newProfileDesc"
+              rows="2"
+              placeholder="What is this profile for?"
+              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm resize-none"
+            />
+          </div>
+          <div class="flex justify-end gap-2">
+            <button @click="showCreateModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button>
+            <button
+              @click="handleCreateProfile"
+              :disabled="!newProfileName.trim()"
+              class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
+            >
+              Create
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Import Modal -->
+    <div v-if="showImportModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showImportModal = false">
+      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-lg">
+        <h2 class="text-lg font-semibold text-neutral-100 mb-4">Import Loot Profile</h2>
+        <div class="space-y-4">
+          <div>
+            <label class="block text-sm text-neutral-400 mb-1">Profile Name</label>
+            <input
+              v-model="importName"
+              placeholder="Name for imported profile"
+              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
+            />
+          </div>
+          <div>
+            <label class="block text-sm text-neutral-400 mb-1">BetterLoot JSON</label>
+            <textarea
+              v-model="importJson"
+              rows="10"
+              placeholder="Paste LootTables.json content here..."
+              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm font-mono resize-none"
+            />
+          </div>
+          <div class="flex justify-end gap-2">
+            <button @click="showImportModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button>
+            <button
+              @click="handleImport"
+              :disabled="!importName.trim() || !importJson.trim()"
+              class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
+            >
+              Import
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Item Picker Modal -->
+    <LootItemPicker
+      v-if="showItemPicker"
+      @select="handleAddItem"
+      @close="showItemPicker = false"
+    />
+
+    <!-- Click-away for apply dropdown -->
+    <div v-if="showApplyDropdown" class="fixed inset-0 z-0" @click="showApplyDropdown = false" />
+  </div>
+</template>