feat(redesign): re-skin admin-ops/platform-admin/public views to DS (Phase D batch 4 — panel re-skin complete)
All checks were successful
Test Asgard Runner / test (push) Successful in 3s
All checks were successful
Test Asgard Runner / test (push) Successful in 3s
Final re-skin batch: admin ops (Console/FileManager[VueFinder preserved]/WipeCalendar/WipeHistory/Changelog/Migration), platform-admin (Dashboard/Licenses/Servers/Subscriptions/Users), public product pages (ServerInfo/StatusPage/StoreView) + PublicLayout, WarpEditor, ErrorBoundary. All logic/store/router/WebSocket/handlers preserved. Marketing views (Landing/Pricing/FAQ/HowItWorks/Roadmap/EarlyAccess + MarketingLayout) intentionally deferred to the dedicated marketing-site redesign. Build green. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Vantz Stockwell
@@ -1,7 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useApi } from '@/composables/useApi'
|
||||
import { FileText, Tag, Loader2 } from 'lucide-vue-next'
|
||||
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
|
||||
@@ -38,13 +42,13 @@ function loadMore() {
|
||||
fetchChangelog()
|
||||
}
|
||||
|
||||
function getCategoryColor(category: string): string {
|
||||
function categoryTone(category: string): 'online' | 'offline' | 'info' | 'warn' | 'neutral' {
|
||||
switch (category) {
|
||||
case 'feature': return 'bg-green-500/10 text-green-400'
|
||||
case 'bugfix': return 'bg-red-500/10 text-red-400'
|
||||
case 'module': return 'bg-blue-500/10 text-blue-400'
|
||||
case 'security': return 'bg-yellow-500/10 text-yellow-400'
|
||||
default: return 'bg-neutral-700/50 text-neutral-400'
|
||||
case 'feature': return 'online'
|
||||
case 'bugfix': return 'offline'
|
||||
case 'module': return 'info'
|
||||
case 'security': return 'warn'
|
||||
default: return 'neutral'
|
||||
}
|
||||
}
|
||||
|
||||
@@ -54,60 +58,127 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-6 space-y-6">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center gap-3">
|
||||
<FileText class="w-5 h-5 text-oxide-500" />
|
||||
<h1 class="text-2xl font-bold text-neutral-100">Changelog</h1>
|
||||
<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>
|
||||
|
||||
<!-- Changelog Feed -->
|
||||
<div class="space-y-4">
|
||||
<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"
|
||||
class="bg-neutral-900 border border-neutral-800 rounded-lg p-5"
|
||||
:title="entry.title"
|
||||
>
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex items-center gap-2 px-2 py-1 bg-oxide-500/10 border border-oxide-500/20 rounded-lg">
|
||||
<Tag class="w-3 h-3 text-oxide-400" />
|
||||
<span class="text-xs font-mono text-oxide-400">{{ entry.version }}</span>
|
||||
</div>
|
||||
<span
|
||||
class="text-xs font-medium px-2 py-0.5 rounded-full capitalize"
|
||||
:class="getCategoryColor(entry.category)"
|
||||
>
|
||||
{{ entry.category }}
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-xs text-neutral-500">{{ new Date(entry.published_at).toLocaleDateString() }}</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-neutral-100 mb-2">{{ entry.title }}</h3>
|
||||
<div class="text-sm text-neutral-300 whitespace-pre-line leading-relaxed">
|
||||
{{ entry.body }}
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-if="isLoading" class="flex justify-center py-6">
|
||||
<Loader2 class="w-6 h-6 text-oxide-500 animate-spin" />
|
||||
<!-- Load more button -->
|
||||
<div v-else-if="hasMore" class="cl__more">
|
||||
<Button variant="secondary" @click="loadMore">Load more</Button>
|
||||
</div>
|
||||
|
||||
<!-- Load More -->
|
||||
<div v-else-if="hasMore" class="flex justify-center">
|
||||
<button
|
||||
@click="loadMore"
|
||||
class="px-4 py-2 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 rounded-lg transition-colors"
|
||||
>
|
||||
Load More
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- End of List -->
|
||||
<div v-else class="text-center py-6 text-sm text-neutral-500">
|
||||
No more changelog entries
|
||||
</div>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user