corrosion-admin-panel/frontend/src/views/admin/ChangelogView.vue

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useApi } from '@/composables/useApi'
import Panel from '@/components/ds/data/Panel.vue'
import Button from '@/components/ds/core/Button.vue'
import Badge from '@/components/ds/core/Badge.vue'
import Icon from '@/components/ds/core/Icon.vue'
import EmptyState from '@/components/ds/feedback/EmptyState.vue'

interface ChangelogEntry {
  id: string
  version: string
  title: string
  body: string
  category: 'feature' | 'bugfix' | 'module' | 'security'
  published_at: string
}

const api = useApi()
const entries = ref<ChangelogEntry[]>([])
const isLoading = ref(false)
const page = ref(1)
const hasMore = ref(true)

async function fetchChangelog() {
  isLoading.value = true
  try {
    const result = await api.get<{ entries: ChangelogEntry[] } | ChangelogEntry[]>(`/changelog?page=${page.value}&limit=20`)
    const items = Array.isArray(result) ? result : (result.entries ?? [])
    if (items.length === 0) {
      hasMore.value = false
    } else {
      entries.value.push(...items)
    }
  } finally {
    isLoading.value = false
  }
}

function loadMore() {
  page.value++
  fetchChangelog()
}

function categoryTone(category: string): 'online' | 'offline' | 'info' | 'warn' | 'neutral' {
  switch (category) {
    case 'feature': return 'online'
    case 'bugfix': return 'offline'
    case 'module': return 'info'
    case 'security': return 'warn'
    default: return 'neutral'
  }
}

onMounted(() => {
  fetchChangelog()
})
</script>

<template>
  <div class="cl">
    <!-- Page head -->
    <div class="cl__head">
      <div class="cl__head-id">
        <div class="cl__head-chip">
          <Icon name="file-text" :size="20" :stroke-width="2" />
        </div>
        <div>
          <div class="t-eyebrow">Platform</div>
          <h1 class="cl__title">Changelog</h1>
        </div>
      </div>
    </div>

    <!-- Loading state — first load -->
    <div v-if="isLoading && entries.length === 0" class="cl__loading">
      <Icon name="loader" :size="22" class="cl__spin" />
      <span>Loading changelog…</span>
    </div>

    <!-- Empty state -->
    <Panel v-else-if="!isLoading && entries.length === 0" title="Changelog">
      <EmptyState
        icon="file-text"
        title="No entries yet"
        description="Platform changelog entries will appear here."
      />
    </Panel>

    <!-- Entry feed -->
    <template v-else>
      <Panel
        v-for="entry in entries"
        :key="entry.id"
        :title="entry.title"
      >
        <template #actions>
          <Badge tone="accent" :mono="true">{{ entry.version }}</Badge>
          <Badge :tone="categoryTone(entry.category)">{{ entry.category }}</Badge>
          <span class="cl__date">{{ new Date(entry.published_at).toLocaleDateString() }}</span>
        </template>
        <div class="cl__body">{{ entry.body }}</div>
      </Panel>

      <!-- Load more spinner -->
      <div v-if="isLoading" class="cl__loading">
        <Icon name="loader" :size="20" class="cl__spin" />
        <span>Loading more…</span>
      </div>

      <!-- Load more button -->
      <div v-else-if="hasMore" class="cl__more">
        <Button variant="secondary" @click="loadMore">Load more</Button>
      </div>

      <!-- End of list -->
      <div v-else class="cl__end">No more changelog entries</div>
    </template>
  </div>
</template>

<style scoped>
.cl {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Page head */
.cl__head { display: flex; align-items: center; }
.cl__head-id { display: flex; align-items: center; gap: 12px; }
.cl__head-chip {
  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-border);
}
.cl__title {
  font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
  color: var(--text-primary); margin-top: 3px;
}

/* Entry body */
.cl__body {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  white-space: pre-line;
  line-height: 1.65;
}

/* Date label in actions slot */
.cl__date {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* Loading / footer states */
.cl__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 28px 0;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}
@keyframes cl-spin { to { transform: rotate(360deg); } }
.cl__spin { animation: cl-spin 0.7s linear infinite; }

.cl__more {
  display: flex;
  justify-content: center;
  padding: 4px 0;
}
.cl__end {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
  padding: 20px 0;
}
</style>