feat(fc3b): /credentials view + ExtensionKeyBar + PlatformCredentialRow + UploadDialog

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-20 18:38:32 -04:00
parent e83747b085
commit a0203f4727
5 changed files with 300 additions and 1 deletions
@@ -0,0 +1,68 @@
+<template>
+  <section class="fc-cred-row">
+    <header class="fc-cred-row__head">
+      <span class="fc-cred-row__name">{{ platform.name }}</span>
+      <v-chip size="x-small" variant="tonal">{{ platform.auth_type }}</v-chip>
+    </header>
+    <div class="fc-cred-row__body">
+      <template v-if="credential">
+        <span class="fc-cred-row__status">
+          ✓ Stored · captured {{ fmtDate(credential.captured_at) }}
+          <template v-if="credential.expires_at">
+            · expires {{ fmtDate(credential.expires_at) }}
+          </template>
+        </span>
+        <v-spacer />
+        <v-btn size="small" variant="outlined" @click="$emit('replace', platform)">
+          Replace
+        </v-btn>
+        <v-btn size="small" variant="text" color="error" @click="$emit('remove', platform)">
+          ×
+        </v-btn>
+      </template>
+      <template v-else>
+        <span class="fc-cred-row__status fc-cred-row__status--empty">○ No credential</span>
+        <v-spacer />
+        <v-btn size="small" variant="flat" color="accent" @click="$emit('replace', platform)">
+          {{ platform.auth_type === 'cookies' ? 'Paste cookies.txt' : 'Paste token' }}
+        </v-btn>
+      </template>
+    </div>
+  </section>
+</template>
+
+<script setup>
+defineProps({
+  platform: { type: Object, required: true },
+  credential: { type: Object, default: null },
+})
+defineEmits(['replace', 'remove'])
+
+function fmtDate(iso) {
+  if (!iso) return '—'
+  return iso.slice(0, 10)
+}
+</script>
+
+<style scoped>
+.fc-cred-row {
+  border: 1px solid rgb(var(--v-theme-on-surface-variant) / 0.18);
+  border-radius: 6px;
+  padding: 0.75rem 1rem;
+  margin-bottom: 0.75rem;
+}
+.fc-cred-row__head {
+  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;
+}
+.fc-cred-row__name { font-weight: 600; }
+.fc-cred-row__body {
+  display: flex; align-items: center; gap: 0.5rem;
+}
+.fc-cred-row__status {
+  font-size: 0.9rem;
+  color: rgb(var(--v-theme-on-surface));
+}
+.fc-cred-row__status--empty {
+  color: rgb(var(--v-theme-on-surface-variant));
+}
+</style>