fc3g(ui): BrowserExtensionCard on Settings → Maintenance — one-click Firefox install + key copy/rotate

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/src/components/settings/BrowserExtensionCard.vue

@@ -0,0 +1,189 @@
+<template>
+  <v-card class="fc-ext-card">
+    <v-card-title class="d-flex align-center" style="gap: 10px;">
+      <v-icon icon="mdi-puzzle" size="small" />
+      <span>Browser extension</span>
+      <span v-if="manifest?.installed" class="text-caption fc-muted">
+        · Firefox · v{{ manifest.version }}
+      </span>
+    </v-card-title>
+
+    <v-card-text>
+      <p class="fc-muted text-body-2">
+        Pushes session cookies from supported platforms
+        (patreon, subscribestar, hentaifoundry, discord, pixiv, deviantart)
+        into FabledCurator, and lets you add a creator as a source from
+        their page in one click.
+      </p>
+
+      <v-alert
+        v-if="manifestError"
+        type="warning" variant="tonal" density="compact" class="mt-3"
+      >
+        Could not load extension manifest: {{ manifestError }}
+      </v-alert>
+
+      <v-alert
+        v-else-if="manifest && !manifest.installed"
+        type="warning" variant="tonal" density="compact" class="mt-3"
+      >
+        No bundled extension found in this image. Push a release that
+        runs the extension CI workflow, or grab the XPI from the
+        FabledCurator Forgejo releases page.
+      </v-alert>
+
+      <template v-else-if="manifest?.installed">
+        <div class="fc-ext-install mt-3">
+          <v-btn
+            v-if="isFirefox"
+            color="accent" variant="flat" rounded="pill"
+            prepend-icon="mdi-firefox"
+            @click="installXpi"
+          >Install Firefox extension</v-btn>
+
+          <v-btn
+            variant="outlined" rounded="pill"
+            :href="manifest.latest_url" download
+            prepend-icon="mdi-download"
+          >Download XPI</v-btn>
+
+          <v-alert
+            v-if="!isFirefox"
+            type="info" variant="tonal" density="compact" class="mt-3"
+          >
+            Open this page in Firefox to install in one click, or use
+            "Download XPI" to install manually.
+          </v-alert>
+        </div>
+
+        <v-divider class="my-4" />
+
+        <div class="fc-muted text-body-2 mb-3">
+          After installing, open the extension's options page
+          (about:addons → FabledCurator → Preferences) and paste these:
+        </div>
+
+        <v-text-field
+          label="FC base URL" :model-value="apiUrl"
+          readonly density="compact" hide-details
+          append-inner-icon="mdi-content-copy"
+          @click:append-inner="copy(apiUrl, 'URL')"
+        />
+
+        <v-text-field
+          label="Extension API key"
+          :model-value="apiKey"
+          :type="keyShown ? 'text' : 'password'"
+          readonly density="compact" hide-details class="mt-3"
+        >
+          <template #append-inner>
+            <v-btn
+              variant="text" density="compact" size="small"
+              :icon="keyShown ? 'mdi-eye-off' : 'mdi-eye'"
+              @click="keyShown = !keyShown"
+            />
+            <v-btn
+              variant="text" density="compact" size="small"
+              icon="mdi-content-copy"
+              @click="copy(apiKey, 'API key')"
+            />
+            <v-btn
+              variant="text" density="compact" size="small"
+              icon="mdi-refresh" color="warning"
+              :loading="rotating"
+              @click="rotateKey"
+            />
+          </template>
+        </v-text-field>
+      </template>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import { useApi } from '../../composables/useApi.js'
+
+const api = useApi()
+
+const manifest = ref(null)
+const manifestError = ref(null)
+const apiKey = ref('')
+const keyShown = ref(false)
+const rotating = ref(false)
+
+const apiUrl = computed(() => `${window.location.origin}/api`)
+const isFirefox = computed(() => navigator.userAgent.includes('Firefox'))
+
+onMounted(async () => {
+  await Promise.all([loadManifest(), loadKey()])
+})
+
+async function loadManifest() {
+  try {
+    manifest.value = await api.get('/api/extension/manifest')
+  } catch (e) {
+    if (e.status === 404) {
+      // Backend says no XPI is bundled — surface the not-installed
+      // state, not an error.
+      manifest.value = { installed: false }
+    } else {
+      manifestError.value = e.message
+    }
+  }
+}
+
+async function loadKey() {
+  try {
+    const { key } = await api.get('/api/settings/extension_api_key')
+    apiKey.value = key
+  } catch (e) {
+    apiKey.value = ''
+    window.__fcToast?.({
+      text: `Failed to load extension API key: ${e.message}`,
+      type: 'error',
+    })
+  }
+}
+
+function installXpi() {
+  if (!manifest.value?.latest_url) return
+  window.location.assign(manifest.value.latest_url)
+}
+
+async function rotateKey() {
+  rotating.value = true
+  try {
+    const { key } = await api.post('/api/settings/extension_api_key/rotate')
+    apiKey.value = key
+    keyShown.value = true
+    window.__fcToast?.({ text: 'Extension API key rotated.', type: 'success' })
+  } catch (e) {
+    window.__fcToast?.({
+      text: `Rotate failed: ${e.message}`,
+      type: 'error',
+    })
+  } finally {
+    rotating.value = false
+  }
+}
+
+async function copy(text, label) {
+  try {
+    await navigator.clipboard.writeText(text)
+    window.__fcToast?.({ text: `${label} copied.`, type: 'success' })
+  } catch (e) {
+    window.__fcToast?.({ text: `Copy failed: ${e.message}`, type: 'error' })
+  }
+}
+</script>
+
+<style scoped>
+.fc-ext-card { border-radius: 8px; }
+.fc-ext-install {
+  display: flex; flex-wrap: wrap; gap: 8px;
+}
+.fc-muted {
+  color: rgb(var(--v-theme-on-surface-variant));
+}
+</style>

frontend/src/components/settings/MaintenancePanel.vue

@@ -12,6 +12,7 @@
     <MLThresholdSliders class="mt-4" />
     <AllowlistTable class="mt-4" />
     <AliasTable class="mt-4" />
+    <BrowserExtensionCard class="mt-6" />
     <LegacyMigrationCard class="mt-6" />
   </div>
 </template>
@@ -22,6 +23,7 @@ import CentroidRecomputeCard from './CentroidRecomputeCard.vue'
 import MLThresholdSliders from './MLThresholdSliders.vue'
 import AllowlistTable from './AllowlistTable.vue'
 import AliasTable from './AliasTable.vue'
+import BrowserExtensionCard from './BrowserExtensionCard.vue'
 import LegacyMigrationCard from './LegacyMigrationCard.vue'
 </script>