dezky/apps/operator/pages/flags.vue

<script setup lang="ts">
import type { Flag, FlagState } from '~/types/flag'
import type { Tenant } from '~/types/tenant'

const { data: flags, refresh } = await useFetch<Flag[]>('/api/flags', {
  default: () => [],
})
// Tenants are needed by FlagDetail for the allowlist picker + the rollout
// preview ("~N of M tenants will see this"). Lazy because we only need them
// when the side panel opens.
const { data: tenants } = useLazyFetch<Tenant[]>('/api/tenants', {
  default: () => [],
  server: false,
})

const open = ref<Flag | null>(null)
const showNew = ref(false)

function stateTone(state: FlagState): 'ok' | 'neutral' | 'warn' | 'info' {
  switch (state) {
    case 'on': return 'ok'
    case 'off': return 'neutral'
    case 'rollout': return 'warn'
    case 'targeted': return 'info'
  }
}
function stateLabel(f: Flag) {
  if (f.state === 'rollout') return `${f.pct}% rollout`
  return f.state
}

async function onSaved(updated: Flag) {
  // Replace the row in-place so the list reflects the new state without a
  // full refetch — but also refresh in the background to pick up any
  // server-side derived fields (history entries, updatedAt).
  flags.value = (flags.value ?? []).map((f) => (f.key === updated.key ? updated : f))
  open.value = updated
  refresh()
}

async function onCreated(created: Flag) {
  flags.value = [...(flags.value ?? []), created].sort((a, b) => a.key.localeCompare(b.key))
  showNew.value = false
  open.value = created
}

function fmtDate(s: string) {
  return new Date(s).toLocaleDateString('da-DK', { day: '2-digit', month: 'short' })
}

function describeScope(f: Flag): string {
  if (f.state === 'on') return 'all'
  if (f.state === 'off') return '—'
  const parts: string[] = []
  if (f.scope.plans.length) parts.push(`plan: ${f.scope.plans.join(', ')}`)
  if (f.scope.tenantSlugs.length) parts.push(`${f.scope.tenantSlugs.length} tenant${f.scope.tenantSlugs.length === 1 ? '' : 's'}`)
  if (f.scope.partnerSlugs.length) parts.push(`${f.scope.partnerSlugs.length} partner${f.scope.partnerSlugs.length === 1 ? '' : 's'}`)
  if (f.scope.environments.length) parts.push(`env: ${f.scope.environments.join('/')}`)
  return parts.length ? parts.join(' · ') : 'no targeting'
}
</script>

<template>
  <div>
    <PageHeader
      eyebrow="Engineering"
      title="Feature flags"
      :subtitle="`${flags.length} flags. Toggle, target, and roll out features without redeploying.`"
    >
      <template #actions>
        <UiButton variant="primary" @click="showNew = true">
          <template #leading><UiIcon name="plus" :size="13" /></template>
          New flag
        </UiButton>
      </template>
    </PageHeader>

    <div class="stage">
      <Card :pad="0">
        <table>
          <thead>
            <tr>
              <th>Key</th>
              <th>State</th>
              <th>Rollout</th>
              <th>Scope</th>
              <th>Last modified</th>
              <th class="r"></th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="f in flags" :key="f.key" @click="open = f">
              <td>
                <div class="key">
                  <span class="key-tile" :data-state="f.state">
                    <UiIcon name="plug" :size="11" />
                  </span>
                  <div>
                    <Mono class="key-name">{{ f.key }}</Mono>
                    <div v-if="f.description" class="key-desc">{{ f.description }}</div>
                  </div>
                </div>
              </td>
              <td><Badge :tone="stateTone(f.state)" dot>{{ stateLabel(f) }}</Badge></td>
              <td>
                <div v-if="f.state === 'rollout'" class="rollout">
                  <div class="bar"><div class="fill" :style="{ width: `${f.pct}%` }" /></div>
                  <Mono>{{ f.pct }}%</Mono>
                </div>
                <Mono v-else dim>—</Mono>
              </td>
              <td>
                <Mono dim>{{ describeScope(f) }}</Mono>
              </td>
              <td>
                <Mono dim>{{ fmtDate(f.updatedAt) }}</Mono>
              </td>
              <td class="r">
                <UiIcon name="chevRight" :size="12" />
              </td>
            </tr>
            <tr v-if="!flags.length">
              <td colspan="6" class="empty">
                <Mono dim>// no flags yet</Mono>
              </td>
            </tr>
          </tbody>
        </table>
      </Card>

      <Mono dim class="note">
        // backed by /api/flags · seed contains 10 flags mapping to real Dezky
        concerns. Consumers (portal, platform-api) call POST /api/flags/evaluate
        with a tenant slug to get current boolean values.
      </Mono>
    </div>

    <FlagDetail
      :flag="open"
      :tenants="tenants ?? []"
      @close="open = null"
      @saved="onSaved"
    />
    <NewFlagModal :open="showNew" @close="showNew = false" @created="onCreated" />
  </div>
</template>

<style scoped>
.stage { padding: 24px 40px 64px 40px; display: flex; flex-direction: column; gap: 16px; }

table { width: 100%; border-collapse: collapse; }
th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding: 12px 20px;
  font-weight: 500;
  border-bottom: 1px solid var(--border);
}
th.r, td.r { text-align: right; }
td { padding: 12px 20px; font-size: 12px; border-top: 1px solid var(--border); vertical-align: middle; color: var(--text-mute); }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--surface); }

.key { display: flex; align-items: center; gap: 10px; }
.key-tile {
  width: 24px; height: 24px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-mute);
}
.key-tile[data-state='on']      { background: rgba(31, 138, 91, 0.12);  color: var(--ok); }
.key-tile[data-state='off']     { background: rgba(128, 128, 128, 0.12); color: var(--text-mute); }
.key-tile[data-state='rollout'] { background: rgba(232, 154, 31, 0.12); color: var(--warn); }
.key-tile[data-state='targeted']{ background: rgba(42, 111, 219, 0.1);  color: var(--info); }
.key-name { font-weight: 600; color: var(--text); display: block; }
.key-desc { font-size: 11px; color: var(--text-mute); margin-top: 2px; }

.rollout { display: inline-flex; align-items: center; gap: 10px; width: 160px; }
.bar { flex: 1; height: 4px; background: var(--border); border-radius: 999px; overflow: hidden; }
.fill { height: 100%; background: var(--warn); }

.empty { padding: 32px 20px; text-align: center; }
.note { display: block; padding: 4px 4px 0 4px; }
</style>