feat(FN-4911): complete Step 3 — add secrets view component

Fusion-Task-Id: FN-4911 Fusion-Task-Lineage: 021e3ee9-a776-4648-a17d-8ae1a7ebc5be
2026-05-17 10:57:41 -07:00
parent 73c6f46b5b
commit ff7c2336cf
2 changed files with 372 additions and 0 deletions
--- a/packages/dashboard/app/components/SecretsView.css
+++ b/packages/dashboard/app/components/SecretsView.css
@@ -0,0 +1,106 @@
+.secrets-view {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+}
+
+.secrets-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-md);
+}
+
+.secrets-header-actions {
+  display: flex;
+  gap: var(--space-sm);
+}
+
+.secrets-loading,
+.secrets-empty {
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.secrets-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+}
+
+.secrets-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: var(--space-md);
+}
+
+.secrets-row-main {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+.secrets-row-key {
+  font-family: var(--font-mono);
+}
+
+.secrets-row-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+}
+
+.secrets-chip {
+  border: var(--btn-border-width) solid var(--border);
+  border-radius: var(--radius-pill);
+  padding: var(--space-xs) var(--space-sm);
+  color: var(--text-muted);
+}
+
+.secrets-revealed {
+  margin: 0;
+  white-space: pre-wrap;
+  border: var(--btn-border-width) solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: var(--space-sm);
+}
+
+.secrets-row-side {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+  align-items: flex-end;
+}
+
+.secrets-row-read {
+  color: var(--text-muted);
+}
+
+.secrets-row-actions,
+.secrets-confirm,
+.secrets-value-row,
+.secrets-radio-row {
+  display: flex;
+  gap: var(--space-sm);
+  align-items: center;
+}
+
+.secrets-value-row .input {
+  flex: 1;
+}
+
+@media (max-width: 768px) {
+  .secrets-header,
+  .secrets-row {
+    grid-template-columns: minmax(0, 1fr);
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .secrets-row-side {
+    align-items: flex-start;
+  }
+}