v0.27.04
This commit is contained in:
null
parent
263f1c5e6e
commit
48dcb480ba
|
|
@ -1,18 +1,62 @@
|
||||||
import React, { useCallback, useEffect, useState } from 'react';
|
import React, { useCallback, useEffect, useState } from 'react';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import { ArrowLeft, ArrowUpCircle, CheckCircle2, Info, Sparkles } from 'lucide-react';
|
import { ArrowLeft, ArrowUpCircle, CheckCircle2, Info, Loader2, Sparkles, AlertCircle } from 'lucide-react';
|
||||||
import { api } from '@/api';
|
import { api } from '@/api';
|
||||||
import { useAuth } from '@/hooks/useAuth';
|
import { useAuth } from '@/hooks/useAuth';
|
||||||
|
import { APP_VERSION } from '@/lib/version';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
|
||||||
|
function UpdateBadge({ status, loading }) {
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<span className="inline-flex items-center gap-1 text-xs text-muted-foreground/60">
|
||||||
|
<Loader2 className="h-3 w-3 animate-spin shrink-0" />
|
||||||
|
Checking…
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (!status) return null;
|
||||||
|
|
||||||
|
if (status.has_update) {
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
href={status.latest_release_url || '#'}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="inline-flex items-center gap-1 text-xs font-medium text-amber-400 hover:text-amber-300 transition-colors"
|
||||||
|
>
|
||||||
|
<ArrowUpCircle className="h-3 w-3 shrink-0" />
|
||||||
|
v{status.latest_version} available
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (status.up_to_date) {
|
||||||
|
return (
|
||||||
|
<span className="inline-flex items-center gap-1 text-xs text-emerald-500/80">
|
||||||
|
<CheckCircle2 className="h-3 w-3 shrink-0" />
|
||||||
|
Up to date
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// up_to_date is null — check failed
|
||||||
|
return (
|
||||||
|
<span className="inline-flex items-center gap-1 text-xs text-muted-foreground/50" title={status.error || 'Update check failed'}>
|
||||||
|
<AlertCircle className="h-3 w-3 shrink-0" />
|
||||||
|
Could not check
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export default function AboutPage() {
|
export default function AboutPage() {
|
||||||
const { user } = useAuth();
|
const { user } = useAuth();
|
||||||
|
|
||||||
const [about, setAbout] = useState(null);
|
const [about, setAbout] = useState(null);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [updateStatus, setUpdateStatus] = useState(null);
|
const [updateStatus, setUpdateStatus] = useState(null);
|
||||||
|
const [updateLoading, setUpdateLoading] = useState(true);
|
||||||
|
|
||||||
const load = useCallback(async () => {
|
const load = useCallback(async () => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
|
|
@ -26,9 +70,17 @@ export default function AboutPage() {
|
||||||
useEffect(() => { load(); }, [load]);
|
useEffect(() => { load(); }, [load]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
api.updateStatus().then(setUpdateStatus).catch(() => {});
|
setUpdateLoading(true);
|
||||||
|
api.updateStatus()
|
||||||
|
.then(setUpdateStatus)
|
||||||
|
.catch(() => setUpdateStatus(null))
|
||||||
|
.finally(() => setUpdateLoading(false));
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
// Use Vite-injected APP_VERSION as the immediate source of truth.
|
||||||
|
// api.about() version is shown once loaded as a cross-check; they should always match.
|
||||||
|
const displayVersion = about?.version ?? APP_VERSION;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-[radial-gradient(circle_at_top_left,oklch(var(--primary)/0.10),transparent_34rem),linear-gradient(180deg,oklch(var(--background)),oklch(var(--muted)/0.28))] px-4 py-8 text-foreground sm:px-6">
|
<div className="min-h-screen bg-[radial-gradient(circle_at_top_left,oklch(var(--primary)/0.10),transparent_34rem),linear-gradient(180deg,oklch(var(--background)),oklch(var(--muted)/0.28))] px-4 py-8 text-foreground sm:px-6">
|
||||||
<main className="mx-auto w-full max-w-3xl space-y-5">
|
<main className="mx-auto w-full max-w-3xl space-y-5">
|
||||||
|
|
@ -52,30 +104,13 @@ export default function AboutPage() {
|
||||||
<CardContent className="space-y-5">
|
<CardContent className="space-y-5">
|
||||||
<div className="grid gap-3 sm:grid-cols-3">
|
<div className="grid gap-3 sm:grid-cols-3">
|
||||||
|
|
||||||
{/* Version — with update status for admins */}
|
{/* Version card — shows immediately via APP_VERSION, update status alongside */}
|
||||||
<div className="rounded-xl border border-border/70 bg-background/65 p-4">
|
<div className="rounded-xl border border-border/70 bg-background/65 p-4">
|
||||||
<p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Version</p>
|
<p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Version</p>
|
||||||
<p className="mt-1 font-mono text-lg font-bold">v{about?.version || '...'}</p>
|
<p className="mt-1 font-mono text-lg font-bold">v{displayVersion}</p>
|
||||||
{updateStatus && (
|
<div className="mt-2">
|
||||||
<div className="mt-2">
|
<UpdateBadge status={updateStatus} loading={updateLoading} />
|
||||||
{updateStatus.has_update ? (
|
</div>
|
||||||
<a
|
|
||||||
href={updateStatus.latest_release_url || '#'}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="inline-flex items-center gap-1 text-xs font-medium text-amber-400 hover:text-amber-300 transition-colors"
|
|
||||||
>
|
|
||||||
<ArrowUpCircle className="h-3 w-3 shrink-0" />
|
|
||||||
v{updateStatus.latest_version} available
|
|
||||||
</a>
|
|
||||||
) : updateStatus.up_to_date ? (
|
|
||||||
<span className="inline-flex items-center gap-1 text-xs text-emerald-500/80">
|
|
||||||
<CheckCircle2 className="h-3 w-3 shrink-0" />
|
|
||||||
Up to date
|
|
||||||
</span>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="rounded-xl border border-border/70 bg-background/65 p-4">
|
<div className="rounded-xl border border-border/70 bg-background/65 p-4">
|
||||||
|
|
@ -104,7 +139,6 @@ export default function AboutPage() {
|
||||||
<Button asChild>
|
<Button asChild>
|
||||||
<Link to="/release-notes">Release Notes</Link>
|
<Link to="/release-notes">Release Notes</Link>
|
||||||
</Button>
|
</Button>
|
||||||
{/* Only shown when the visitor is not signed in */}
|
|
||||||
{user == null && (
|
{user == null && (
|
||||||
<Button asChild variant="outline">
|
<Button asChild variant="outline">
|
||||||
<Link to="/login">Sign In</Link>
|
<Link to="/login">Sign In</Link>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import React, { useCallback, useEffect, useState } from 'react';
|
import React, { useCallback, useEffect, useState } from 'react';
|
||||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
import { Card, CardContent, CardHeader } from '@/components/ui/card';
|
||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import {
|
import {
|
||||||
|
|
@ -12,152 +12,137 @@ import { ChevronDown, ChevronsUpDown, Map, FileText, Loader2, Users, FileCode, C
|
||||||
import { api } from '@/api';
|
import { api } from '@/api';
|
||||||
import { APP_VERSION } from '@/lib/version';
|
import { APP_VERSION } from '@/lib/version';
|
||||||
|
|
||||||
/* ─── Priority Configuration ───────────────────────────── */
|
/* ─── Priority lanes ────────────────────────────────────────────────────────── */
|
||||||
|
|
||||||
const PRIORITY_LANES = [
|
const PRIORITY_LANES = [
|
||||||
{ key: 'critical', emoji: '🔴', label: 'CRITICAL', borderColor: 'border-t-red-500', bgColor: 'bg-red-500/10', textColor: 'text-red-600 dark:text-red-400', badgeClass: 'bg-red-500/15 text-red-600 dark:text-red-400 border-red-500/20' },
|
{ key: 'critical', emoji: '🔴', label: 'CRITICAL', borderColor: 'border-t-red-500', bgColor: 'bg-red-500/10', textColor: 'text-red-500', badgeClass: 'bg-red-500/15 text-red-500 border-red-500/20' },
|
||||||
{ key: 'high', emoji: '🟠', label: 'HIGH', borderColor: 'border-t-orange-500', bgColor: 'bg-orange-500/10', textColor: 'text-orange-600 dark:text-orange-400', badgeClass: 'bg-orange-500/15 text-orange-600 dark:text-orange-400 border-orange-500/20' },
|
{ key: 'high', emoji: '🟠', label: 'HIGH', borderColor: 'border-t-orange-500', bgColor: 'bg-orange-500/10', textColor: 'text-orange-500', badgeClass: 'bg-orange-500/15 text-orange-500 border-orange-500/20' },
|
||||||
{ key: 'medium', emoji: '🟡', label: 'MEDIUM', borderColor: 'border-t-yellow-500', bgColor: 'bg-yellow-500/10', textColor: 'text-yellow-600 dark:text-yellow-400', badgeClass: 'bg-yellow-500/15 text-yellow-600 dark:text-yellow-400 border-yellow-500/20' },
|
{ key: 'medium', emoji: '🟡', label: 'MEDIUM', borderColor: 'border-t-yellow-500', bgColor: 'bg-yellow-500/10', textColor: 'text-yellow-500', badgeClass: 'bg-yellow-500/15 text-yellow-500 border-yellow-500/20' },
|
||||||
{ key: 'low', emoji: '🔵', label: 'LOW', borderColor: 'border-t-blue-500', bgColor: 'bg-blue-500/10', textColor: 'text-blue-600 dark:text-blue-400', badgeClass: 'bg-blue-500/15 text-blue-600 dark:text-blue-400 border-blue-500/20' },
|
{ key: 'low', emoji: '🔵', label: 'LOW', borderColor: 'border-t-blue-500', bgColor: 'bg-blue-500/10', textColor: 'text-blue-500', badgeClass: 'bg-blue-500/15 text-blue-500 border-blue-500/20' },
|
||||||
{ key: 'niceToHave', emoji: '💭', label: 'NICE TO HAVE', borderColor: 'border-t-gray-400', bgColor: 'bg-gray-400/10', textColor: 'text-gray-600 dark:text-gray-400', badgeClass: 'bg-gray-500/15 text-gray-600 dark:text-gray-400 border-gray-500/20' },
|
{ key: 'niceToHave', emoji: '💭', label: 'NICE TO HAVE', borderColor: 'border-t-border', bgColor: 'bg-muted/30', textColor: 'text-muted-foreground', badgeClass: 'bg-muted/50 text-muted-foreground border-border/50' },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
// Normalise any priority string to a lane key.
|
||||||
function laneForPriority(priority) {
|
function laneForPriority(priority) {
|
||||||
const key = typeof priority === 'string'
|
const normalised = String(priority || '').toLowerCase().replace(/[\s_-]+/g, '');
|
||||||
? priority.toLowerCase().replace(/\s+/g, '').replace(/to/ig, 'To')
|
const map = {
|
||||||
: '';
|
critical: 'critical',
|
||||||
// Map API priority keys to lane keys
|
high: 'high',
|
||||||
const mapping = {
|
medium: 'medium',
|
||||||
critical: 'critical',
|
low: 'low',
|
||||||
high: 'high',
|
|
||||||
medium: 'medium',
|
|
||||||
low: 'low',
|
|
||||||
nicetohave: 'niceToHave',
|
nicetohave: 'niceToHave',
|
||||||
'nice to have': 'niceToHave',
|
|
||||||
};
|
};
|
||||||
return mapping[key] || 'low';
|
return map[normalised] ?? 'low';
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─── Roadmap Item Card ────────────────────────────────── */
|
/* ─── Roadmap item card ─────────────────────────────────────────────────────── */
|
||||||
|
|
||||||
function RoadmapItemCard({ item, defaultOpen, onToggle }) {
|
function RoadmapItemCard({ item, defaultOpen }) {
|
||||||
const lane = PRIORITY_LANES.find(l => l.key === laneForPriority(item.priority)) || PRIORITY_LANES[3];
|
const lane = PRIORITY_LANES.find(l => l.key === laneForPriority(item.priority)) ?? PRIORITY_LANES[3];
|
||||||
const [open, setOpen] = useState(defaultOpen);
|
const [open, setOpen] = useState(defaultOpen);
|
||||||
|
|
||||||
const handleOpenChange = useCallback((value) => {
|
// Sync when parent toggles all cards via forceKey remount (no extra effect needed)
|
||||||
setOpen(value);
|
|
||||||
onToggle?.(value);
|
|
||||||
}, [onToggle]);
|
|
||||||
|
|
||||||
const effortLabel = item.effort || '';
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Collapsible open={open} onOpenChange={handleOpenChange} className="group">
|
<Collapsible open={open} onOpenChange={setOpen} className="group">
|
||||||
<Card className="border-border/70 bg-card/95 transition-shadow hover:shadow-md">
|
<div className="rounded-xl border border-border/60 bg-card/90 transition-shadow hover:shadow-md overflow-hidden">
|
||||||
|
|
||||||
|
{/* Trigger — always visible header */}
|
||||||
<CollapsibleTrigger asChild>
|
<CollapsibleTrigger asChild>
|
||||||
<button className="w-full text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-2xl">
|
<button className="w-full text-left px-4 pt-3 pb-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
|
||||||
<CardHeader className="pb-2">
|
<div className="flex items-start justify-between gap-2">
|
||||||
<div className="flex items-start justify-between gap-2">
|
<div className="flex-1 min-w-0">
|
||||||
<div className="flex-1 min-w-0">
|
<Badge
|
||||||
<Badge
|
variant="outline"
|
||||||
variant="outline"
|
className={`${lane.badgeClass} border text-[11px] font-semibold px-1.5 py-0 mb-1.5`}
|
||||||
className={`${lane.badgeClass} border text-[11px] font-semibold px-1.5 py-0 mb-1.5`}
|
>
|
||||||
aria-label={`${lane.label} priority`}
|
{lane.emoji} {lane.label}
|
||||||
>
|
</Badge>
|
||||||
{lane.emoji} {lane.label}
|
<p className="font-semibold text-sm leading-snug">{item.title}</p>
|
||||||
</Badge>
|
|
||||||
<h4 className="font-semibold text-sm leading-snug line-clamp-3">
|
|
||||||
{item.title}
|
|
||||||
</h4>
|
|
||||||
</div>
|
|
||||||
<ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200 group-aria-expanded:rotate-180 mt-0.5" />
|
|
||||||
</div>
|
</div>
|
||||||
</CardHeader>
|
<ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground mt-0.5 transition-transform duration-200 group-data-[state=open]:rotate-180" />
|
||||||
|
</div>
|
||||||
</button>
|
</button>
|
||||||
</CollapsibleTrigger>
|
</CollapsibleTrigger>
|
||||||
|
|
||||||
<div className="px-6 pb-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
|
{/* Meta row — always visible */}
|
||||||
{item.added && (
|
{(item.added || item.addedBy || item.effort) && (
|
||||||
<span className="flex items-center gap-0.5">
|
<div className="px-4 pb-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
|
||||||
<Clock className="h-3 w-3" />
|
{item.added && (
|
||||||
{item.added}
|
<span className="flex items-center gap-1">
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
{item.addedBy && (
|
|
||||||
<>
|
|
||||||
<span aria-hidden="true">·</span>
|
|
||||||
<span className="flex items-center gap-0.5">
|
|
||||||
<Users className="h-3 w-3" />
|
|
||||||
{item.addedBy}
|
|
||||||
</span>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{effortLabel && (
|
|
||||||
<>
|
|
||||||
<span aria-hidden="true">·</span>
|
|
||||||
<span className="flex items-center gap-0.5">
|
|
||||||
<Clock className="h-3 w-3" />
|
<Clock className="h-3 w-3" />
|
||||||
{effortLabel}
|
{item.added}
|
||||||
</span>
|
</span>
|
||||||
</>
|
)}
|
||||||
)}
|
{item.addedBy && (
|
||||||
</div>
|
<>
|
||||||
|
<span aria-hidden="true">·</span>
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<Users className="h-3 w-3" />
|
||||||
|
{item.addedBy}
|
||||||
|
</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{item.effort && (
|
||||||
|
<>
|
||||||
|
<span aria-hidden="true">·</span>
|
||||||
|
<span>{item.effort}</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Expandable detail */}
|
||||||
<CollapsibleContent>
|
<CollapsibleContent>
|
||||||
<CardContent className="pt-0 pb-4 space-y-3">
|
<div className="px-4 pb-4 pt-1 space-y-3 border-t border-border/40">
|
||||||
{item.description && (
|
{item.description && (
|
||||||
<div>
|
<div>
|
||||||
<p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-1">Description</p>
|
<p className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground mb-1">Description</p>
|
||||||
<p className="text-sm leading-relaxed">{item.description}</p>
|
<p className="text-sm leading-relaxed">{item.description}</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{item.rationale && (
|
{item.rationale && (
|
||||||
<div>
|
<div>
|
||||||
<p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-1">Rationale</p>
|
<p className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground mb-1">Rationale</p>
|
||||||
<p className="text-sm leading-relaxed text-muted-foreground">{item.rationale}</p>
|
<p className="text-sm leading-relaxed text-muted-foreground">{item.rationale}</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{item.implementationNotes && (
|
{item.implementationNotes && (
|
||||||
<div>
|
<div>
|
||||||
<p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-1">Implementation Notes</p>
|
<p className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground mb-1">Implementation Notes</p>
|
||||||
<div className="rounded-xl bg-muted/50 border border-border/50 p-3 text-sm font-mono leading-relaxed whitespace-pre-wrap">
|
<div className="rounded-lg bg-muted/50 border border-border/50 p-3 text-sm font-mono leading-relaxed whitespace-pre-wrap">
|
||||||
{item.implementationNotes}
|
{item.implementationNotes}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</CardContent>
|
</div>
|
||||||
</CollapsibleContent>
|
</CollapsibleContent>
|
||||||
</Card>
|
</div>
|
||||||
</Collapsible>
|
</Collapsible>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─── Priority Lane ─────────────────────────────────────── */
|
/* ─── Priority lane column ──────────────────────────────────────────────────── */
|
||||||
|
|
||||||
function PriorityLane({ lane, items, defaultOpenCards }) {
|
function PriorityLane({ lane, items, defaultOpenCards, forceKey }) {
|
||||||
if (items.length === 0) return null;
|
if (items.length === 0) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section
|
<section aria-label={`${lane.label} priority`} className={`rounded-xl border border-border/60 border-t-4 ${lane.borderColor}`}>
|
||||||
role="region"
|
<div className="px-4 py-2.5 flex items-center gap-2 border-b border-border/50">
|
||||||
aria-label={`${lane.label} priority lane`}
|
<span aria-hidden="true">{lane.emoji}</span>
|
||||||
className={`rounded-2xl border ${lane.borderColor} border-t-4 bg-background/50`}
|
<h3 className={`font-bold text-xs uppercase tracking-wider ${lane.textColor}`}>{lane.label}</h3>
|
||||||
>
|
<span className="ml-auto text-[11px] font-semibold text-muted-foreground tabular-nums">{items.length}</span>
|
||||||
<div className="px-4 py-3 flex items-center gap-2 border-b border-border/50">
|
|
||||||
<span className="text-lg" aria-hidden="true">{lane.emoji}</span>
|
|
||||||
<h3 className={`font-bold text-sm ${lane.textColor}`}>{lane.label}</h3>
|
|
||||||
<Badge variant="secondary" className="ml-auto text-[11px]">{items.length}</Badge>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="p-3 space-y-3">
|
<div className="p-3 space-y-2">
|
||||||
{items.map((item) => (
|
{items.map(item => (
|
||||||
<RoadmapItemCard key={item.id} item={item} defaultOpen={defaultOpenCards} />
|
<RoadmapItemCard key={`${item.id}-${forceKey}`} item={item} defaultOpen={defaultOpenCards} />
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─── Dev Log Entry ─────────────────────────────────────── */
|
/* ─── Dev log entry ─────────────────────────────────────────────────────────── */
|
||||||
|
|
||||||
function DevLogEntry({ entry }) {
|
function DevLogEntry({ entry }) {
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
|
|
@ -165,69 +150,51 @@ function DevLogEntry({ entry }) {
|
||||||
return (
|
return (
|
||||||
<Collapsible open={open} onOpenChange={setOpen} className="group">
|
<Collapsible open={open} onOpenChange={setOpen} className="group">
|
||||||
<div className="relative flex gap-4">
|
<div className="relative flex gap-4">
|
||||||
{/* Timeline line */}
|
<div className="flex flex-col items-center shrink-0">
|
||||||
<div className="flex flex-col items-center">
|
<div className="w-3 h-3 rounded-full bg-primary border-2 border-background mt-1.5" />
|
||||||
<div className="w-3 h-3 rounded-full bg-primary border-2 border-background shrink-0 mt-1.5" />
|
<div className="w-px flex-1 bg-border/50" />
|
||||||
<div className="w-px flex-1 bg-border/70" />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex-1 pb-6 min-w-0">
|
<div className="flex-1 pb-6 min-w-0">
|
||||||
<CollapsibleTrigger asChild>
|
<CollapsibleTrigger asChild>
|
||||||
<button className="w-full text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-xl">
|
<button className="w-full text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-lg">
|
||||||
<div className="flex items-center gap-2 flex-wrap">
|
<div className="flex items-center gap-2 flex-wrap">
|
||||||
<span className="font-mono font-bold text-sm">{entry.version}</span>
|
<span className="font-mono font-bold text-sm">{entry.version}</span>
|
||||||
{entry.date && (
|
{entry.date && <span className="text-xs text-muted-foreground">{entry.date}</span>}
|
||||||
<span className="text-xs text-muted-foreground">{entry.date}</span>
|
|
||||||
)}
|
|
||||||
{entry.status && (
|
{entry.status && (
|
||||||
<Badge
|
<Badge variant="outline" className={`text-[11px] ${
|
||||||
variant="outline"
|
entry.status.includes('COMPLETED')
|
||||||
className={`text-[11px] ${
|
? 'bg-emerald-500/15 text-emerald-500 border-emerald-500/20'
|
||||||
entry.status.includes('COMPLETED')
|
: 'bg-muted/50 text-muted-foreground border-border/50'
|
||||||
? 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border-emerald-500/20'
|
}`}>
|
||||||
: 'bg-muted/50 text-muted-foreground'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{entry.status}
|
{entry.status}
|
||||||
</Badge>
|
</Badge>
|
||||||
)}
|
)}
|
||||||
{entry.agents?.length > 0 && (
|
{entry.filesModified?.length > 0 && (
|
||||||
<span className="text-xs text-muted-foreground">
|
<span className="text-xs text-muted-foreground flex items-center gap-0.5">
|
||||||
{entry.agents.map(a => a.name).join(', ')}
|
<FileCode className="h-3 w-3" />
|
||||||
|
{entry.filesModified.length} files
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
{(entry.filesModified?.length > 0 || entry.workCompleted?.length > 0) && (
|
<ChevronDown className="h-3.5 w-3.5 text-muted-foreground ml-auto transition-transform duration-200 group-data-[state=open]:rotate-180" />
|
||||||
<span className="text-xs text-muted-foreground">
|
|
||||||
<FileCode className="inline h-3 w-3 mr-0.5" />
|
|
||||||
{entry.filesModified?.length || 0} files
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
<ChevronDown className="h-3.5 w-3.5 text-muted-foreground transition-transform duration-200 group-aria-expanded:rotate-180 ml-auto" />
|
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
</CollapsibleTrigger>
|
</CollapsibleTrigger>
|
||||||
|
|
||||||
<CollapsibleContent>
|
<CollapsibleContent>
|
||||||
<div className="mt-3 space-y-3">
|
<div className="mt-3 space-y-3 pl-1">
|
||||||
{entry.agents?.length > 0 && (
|
{entry.agents?.length > 0 && (
|
||||||
<div>
|
<div>
|
||||||
<p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2">Agents</p>
|
<p className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground mb-2">Agents</p>
|
||||||
<div className="flex flex-wrap gap-2">
|
<div className="flex flex-wrap gap-2">
|
||||||
{entry.agents.map((agent, idx) => (
|
{entry.agents.map((agent, idx) => (
|
||||||
<Badge
|
<Badge key={idx} variant="outline" className={`text-[11px] ${
|
||||||
key={idx}
|
agent.status === 'COMPLETED' ? 'bg-emerald-500/15 text-emerald-500 border-emerald-500/20' :
|
||||||
variant="outline"
|
agent.status === 'IN PROGRESS' ? 'bg-yellow-500/15 text-yellow-500 border-yellow-500/20' :
|
||||||
className={`text-[11px] ${
|
'bg-muted/50 text-muted-foreground border-border/50'
|
||||||
agent.status === 'COMPLETED'
|
}`}>
|
||||||
? 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border-emerald-500/20'
|
|
||||||
: agent.status === 'IN PROGRESS'
|
|
||||||
? 'bg-yellow-500/15 text-yellow-600 dark:text-yellow-400 border-yellow-500/20'
|
|
||||||
: 'bg-muted/50 text-muted-foreground'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{agent.status === 'COMPLETED' ? '✅' : agent.status === 'IN PROGRESS' ? '⏳' : '❓'}{' '}
|
{agent.status === 'COMPLETED' ? '✅' : agent.status === 'IN PROGRESS' ? '⏳' : '❓'}{' '}
|
||||||
{agent.name}
|
{agent.name}{agent.time ? ` · ${agent.time}` : ''}
|
||||||
{agent.time ? ` · ${agent.time}` : ''}
|
|
||||||
</Badge>
|
</Badge>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -236,7 +203,7 @@ function DevLogEntry({ entry }) {
|
||||||
|
|
||||||
{entry.filesModified?.length > 0 && (
|
{entry.filesModified?.length > 0 && (
|
||||||
<div>
|
<div>
|
||||||
<p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-1.5">Files Modified</p>
|
<p className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground mb-1.5">Files Modified</p>
|
||||||
<div className="flex flex-wrap gap-1">
|
<div className="flex flex-wrap gap-1">
|
||||||
{entry.filesModified.map((file, idx) => (
|
{entry.filesModified.map((file, idx) => (
|
||||||
<code key={idx} className="text-[11px] bg-muted/50 px-1.5 py-0.5 rounded border border-border/50 text-muted-foreground">
|
<code key={idx} className="text-[11px] bg-muted/50 px-1.5 py-0.5 rounded border border-border/50 text-muted-foreground">
|
||||||
|
|
@ -249,8 +216,8 @@ function DevLogEntry({ entry }) {
|
||||||
|
|
||||||
{entry.workCompleted?.length > 0 && (
|
{entry.workCompleted?.length > 0 && (
|
||||||
<div>
|
<div>
|
||||||
<p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-1.5">Work Completed</p>
|
<p className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground mb-1.5">Work Completed</p>
|
||||||
<ul className="space-y-0.5">
|
<ul className="space-y-1">
|
||||||
{entry.workCompleted.map((work, idx) => (
|
{entry.workCompleted.map((work, idx) => (
|
||||||
<li key={idx} className="text-sm text-muted-foreground flex items-start gap-1.5">
|
<li key={idx} className="text-sm text-muted-foreground flex items-start gap-1.5">
|
||||||
<span className="text-emerald-500 mt-0.5 shrink-0">✓</span>
|
<span className="text-emerald-500 mt-0.5 shrink-0">✓</span>
|
||||||
|
|
@ -268,27 +235,32 @@ function DevLogEntry({ entry }) {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─── Main Page ─────────────────────────────────────────── */
|
/* ─── Main page ─────────────────────────────────────────────────────────────── */
|
||||||
|
|
||||||
export default function RoadmapPage() {
|
export default function RoadmapPage() {
|
||||||
const [roadmapData, setRoadmapData] = useState(null);
|
const [roadmapData, setRoadmapData] = useState(null);
|
||||||
const [devLogData, setDevLogData] = useState(null);
|
const [devLogData, setDevLogData] = useState(null);
|
||||||
const [roadmapLoading, setRoadmapLoading] = useState(true);
|
const [roadmapLoading, setRoadmapLoading] = useState(true);
|
||||||
const [devLogLoading, setDevLogLoading] = useState(false);
|
const [devLogLoading, setDevLogLoading] = useState(false);
|
||||||
const [roadmapError, setRoadmapError] = useState(null);
|
const [roadmapError, setRoadmapError] = useState(null);
|
||||||
const [devLogError, setDevLogError] = useState(null);
|
const [devLogError, setDevLogError] = useState(null);
|
||||||
const [allExpanded, setAllExpanded] = useState(true);
|
|
||||||
|
// Expand/collapse all — forceKey causes cards to remount with the new default
|
||||||
|
const [allExpanded, setAllExpanded] = useState(true);
|
||||||
|
const [forceKey, setForceKey] = useState(0);
|
||||||
|
|
||||||
|
const handleExpandToggle = () => {
|
||||||
|
setAllExpanded(prev => !prev);
|
||||||
|
setForceKey(prev => prev + 1);
|
||||||
|
};
|
||||||
|
|
||||||
// Detect desktop for default expand state
|
|
||||||
const [isDesktop, setIsDesktop] = useState(
|
const [isDesktop, setIsDesktop] = useState(
|
||||||
typeof window !== 'undefined' ? window.matchMedia('(min-width: 1024px)').matches : true
|
typeof window !== 'undefined' ? window.matchMedia('(min-width: 1024px)').matches : true
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const mq = window.matchMedia('(min-width: 1024px)');
|
const mq = window.matchMedia('(min-width: 1024px)');
|
||||||
const handler = (e) => setIsDesktop(e.matches);
|
const handler = (e) => setIsDesktop(e.matches);
|
||||||
mq.addEventListener('change', handler);
|
mq.addEventListener('change', handler);
|
||||||
setIsDesktop(mq.matches);
|
|
||||||
return () => mq.removeEventListener('change', handler);
|
return () => mq.removeEventListener('change', handler);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
|
@ -297,51 +269,37 @@ export default function RoadmapPage() {
|
||||||
let cancelled = false;
|
let cancelled = false;
|
||||||
setRoadmapLoading(true);
|
setRoadmapLoading(true);
|
||||||
api.roadmap()
|
api.roadmap()
|
||||||
.then((data) => {
|
.then(data => { if (!cancelled) setRoadmapData(data); })
|
||||||
if (!cancelled) setRoadmapData(data);
|
.catch(err => { if (!cancelled) setRoadmapError(err.message || 'Failed to load roadmap'); })
|
||||||
})
|
.finally(() => { if (!cancelled) setRoadmapLoading(false); });
|
||||||
.catch((err) => {
|
|
||||||
if (!cancelled) setRoadmapError(err.message || 'Failed to load roadmap');
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
if (!cancelled) setRoadmapLoading(false);
|
|
||||||
});
|
|
||||||
return () => { cancelled = true; };
|
return () => { cancelled = true; };
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
// Lazy-load dev log when the Activity tab is first opened
|
||||||
const fetchDevLog = useCallback(() => {
|
const fetchDevLog = useCallback(() => {
|
||||||
if (devLogData) return; // Already loaded
|
if (devLogData || devLogLoading) return;
|
||||||
let cancelled = false;
|
let cancelled = false;
|
||||||
setDevLogLoading(true);
|
setDevLogLoading(true);
|
||||||
api.devLog()
|
api.devLog()
|
||||||
.then((data) => {
|
.then(data => { if (!cancelled) setDevLogData(data); })
|
||||||
if (!cancelled) setDevLogData(data);
|
.catch(err => { if (!cancelled) setDevLogError(err.message || 'Failed to load activity log'); })
|
||||||
})
|
.finally(() => { if (!cancelled) setDevLogLoading(false); });
|
||||||
.catch((err) => {
|
}, [devLogData, devLogLoading]);
|
||||||
if (!cancelled) setDevLogError(err.message || 'Failed to load activity log');
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
if (!cancelled) setDevLogLoading(false);
|
|
||||||
});
|
|
||||||
return () => { cancelled = true; };
|
|
||||||
}, [devLogData]);
|
|
||||||
|
|
||||||
const version = roadmapData?.version || APP_VERSION;
|
const version = roadmapData?.version || APP_VERSION;
|
||||||
const items = roadmapData?.items || [];
|
const items = roadmapData?.items || [];
|
||||||
const counts = roadmapData?.counts || {};
|
const grouped = PRIORITY_LANES.map(lane => ({
|
||||||
const devLogEntries = devLogData?.entries || [];
|
|
||||||
|
|
||||||
// Group items by priority lane
|
|
||||||
const grouped = PRIORITY_LANES.map(lane => ({
|
|
||||||
...lane,
|
...lane,
|
||||||
items: items.filter(item => laneForPriority(item.priority) === lane.key),
|
items: items.filter(item => laneForPriority(item.priority) === lane.key),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const defaultOpenCards = isDesktop && allExpanded;
|
const defaultOpenCards = isDesktop && allExpanded;
|
||||||
|
const laneProps = { defaultOpenCards, forceKey };
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
{/* Page Header */}
|
|
||||||
|
{/* Header */}
|
||||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<div className="flex h-10 w-10 items-center justify-center rounded-xl border border-border/70 bg-primary/10 text-primary">
|
<div className="flex h-10 w-10 items-center justify-center rounded-xl border border-border/70 bg-primary/10 text-primary">
|
||||||
|
|
@ -358,7 +316,7 @@ export default function RoadmapPage() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Tabs */}
|
{/* Tabs */}
|
||||||
<Tabs defaultValue="roadmap" onValueChange={(value) => { if (value === 'activity') fetchDevLog(); }}>
|
<Tabs defaultValue="roadmap" onValueChange={v => { if (v === 'activity') fetchDevLog(); }}>
|
||||||
<TabsList>
|
<TabsList>
|
||||||
<TabsTrigger value="roadmap" className="gap-1.5">
|
<TabsTrigger value="roadmap" className="gap-1.5">
|
||||||
<Map className="h-3.5 w-3.5" />
|
<Map className="h-3.5 w-3.5" />
|
||||||
|
|
@ -370,101 +328,81 @@ export default function RoadmapPage() {
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
</TabsList>
|
</TabsList>
|
||||||
|
|
||||||
{/* ─── Roadmap Tab ─── */}
|
{/* ── Roadmap tab ── */}
|
||||||
<TabsContent value="roadmap">
|
<TabsContent value="roadmap" className="mt-4">
|
||||||
{roadmapLoading ? (
|
{roadmapLoading ? (
|
||||||
<div className="flex items-center justify-center py-16">
|
<div className="flex items-center justify-center py-16 gap-3 text-muted-foreground">
|
||||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
<Loader2 className="h-5 w-5 animate-spin" />
|
||||||
<span className="ml-3 text-muted-foreground">Loading roadmap…</span>
|
<span className="text-sm">Loading roadmap…</span>
|
||||||
</div>
|
</div>
|
||||||
) : roadmapError ? (
|
) : roadmapError ? (
|
||||||
<Card className="border-destructive/50 bg-destructive/5">
|
<div className="rounded-xl border border-destructive/50 bg-destructive/5 py-8 text-center">
|
||||||
<CardContent className="py-8 text-center">
|
<p className="text-destructive font-medium">Failed to load roadmap</p>
|
||||||
<p className="text-destructive font-medium">Failed to load roadmap</p>
|
<p className="text-sm text-muted-foreground mt-1">{roadmapError}</p>
|
||||||
<p className="text-sm text-muted-foreground mt-1">{roadmapError}</p>
|
</div>
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
) : items.length === 0 ? (
|
) : items.length === 0 ? (
|
||||||
<Card>
|
<div className="rounded-xl border border-dashed border-border/60 py-12 text-center text-sm text-muted-foreground">
|
||||||
<CardContent className="py-12 text-center text-muted-foreground">
|
No roadmap items found.
|
||||||
No roadmap items found.
|
</div>
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
{/* Expand/Collapse All toggle */}
|
|
||||||
<div className="flex justify-end mb-3">
|
<div className="flex justify-end mb-3">
|
||||||
<Button
|
<Button variant="outline" size="sm" onClick={handleExpandToggle} className="gap-1.5">
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => setAllExpanded(prev => !prev)}
|
|
||||||
className="gap-1.5"
|
|
||||||
>
|
|
||||||
<ChevronsUpDown className="h-3.5 w-3.5" />
|
<ChevronsUpDown className="h-3.5 w-3.5" />
|
||||||
{allExpanded ? 'Collapse All' : 'Expand All'}
|
{allExpanded ? 'Collapse All' : 'Expand All'}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Desktop: 5-column grid */}
|
{/* Desktop: 5 columns */}
|
||||||
<div className="hidden lg:grid lg:grid-cols-5 gap-4">
|
<div className="hidden lg:grid lg:grid-cols-5 gap-3">
|
||||||
{grouped.map(lane => (
|
{grouped.map(lane => <PriorityLane key={lane.key} lane={lane} items={lane.items} {...laneProps} />)}
|
||||||
<PriorityLane key={lane.key} lane={lane} items={lane.items} defaultOpenCards={defaultOpenCards} />
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Tablet: 2-column grid */}
|
{/* Tablet: 2 columns */}
|
||||||
<div className="hidden sm:grid sm:grid-cols-2 lg:hidden gap-4">
|
<div className="hidden sm:grid sm:grid-cols-2 lg:hidden gap-3">
|
||||||
{/* Left column: Critical + High */}
|
<div className="space-y-3">
|
||||||
<div className="space-y-4">
|
{grouped.filter(l => l.key === 'critical' || l.key === 'high').map(lane =>
|
||||||
{grouped.filter(l => l.key === 'critical' || l.key === 'high').map(lane => (
|
<PriorityLane key={lane.key} lane={lane} items={lane.items} {...laneProps} />
|
||||||
<PriorityLane key={lane.key} lane={lane} items={lane.items} defaultOpenCards={defaultOpenCards} />
|
)}
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
{/* Right column: Medium + Low + Nice to Have */}
|
<div className="space-y-3">
|
||||||
<div className="space-y-4">
|
{grouped.filter(l => l.key === 'medium' || l.key === 'low' || l.key === 'niceToHave').map(lane =>
|
||||||
{grouped.filter(l => l.key === 'medium' || l.key === 'low' || l.key === 'niceToHave').map(lane => (
|
<PriorityLane key={lane.key} lane={lane} items={lane.items} {...laneProps} />
|
||||||
<PriorityLane key={lane.key} lane={lane} items={lane.items} defaultOpenCards={defaultOpenCards} />
|
)}
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Mobile: single column */}
|
{/* Mobile: single column */}
|
||||||
<div className="sm:hidden space-y-4">
|
<div className="sm:hidden space-y-3">
|
||||||
{grouped.map(lane => (
|
{grouped.map(lane => <PriorityLane key={lane.key} lane={lane} items={lane.items} {...laneProps} />)}
|
||||||
<PriorityLane key={lane.key} lane={lane} items={lane.items} defaultOpenCards={defaultOpenCards} />
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
|
||||||
{/* ─── Activity Log Tab ─── */}
|
{/* ── Activity log tab ── */}
|
||||||
<TabsContent value="activity">
|
<TabsContent value="activity" className="mt-4">
|
||||||
{devLogLoading ? (
|
{devLogLoading ? (
|
||||||
<div className="flex items-center justify-center py-16">
|
<div className="flex items-center justify-center py-16 gap-3 text-muted-foreground">
|
||||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
<Loader2 className="h-5 w-5 animate-spin" />
|
||||||
<span className="ml-3 text-muted-foreground">Loading activity log…</span>
|
<span className="text-sm">Loading activity log…</span>
|
||||||
</div>
|
</div>
|
||||||
) : devLogError ? (
|
) : devLogError ? (
|
||||||
<Card className="border-destructive/50 bg-destructive/5">
|
<div className="rounded-xl border border-destructive/50 bg-destructive/5 py-8 text-center">
|
||||||
<CardContent className="py-8 text-center">
|
<p className="text-destructive font-medium">Failed to load activity log</p>
|
||||||
<p className="text-destructive font-medium">Failed to load activity log</p>
|
<p className="text-sm text-muted-foreground mt-1">{devLogError}</p>
|
||||||
<p className="text-sm text-muted-foreground mt-1">{devLogError}</p>
|
</div>
|
||||||
</CardContent>
|
) : devLogData && devLogData.entries?.length === 0 ? (
|
||||||
</Card>
|
<div className="rounded-xl border border-dashed border-border/60 py-12 text-center text-sm text-muted-foreground">
|
||||||
) : devLogEntries.length === 0 ? (
|
No activity log entries found.
|
||||||
<Card>
|
</div>
|
||||||
<CardContent className="py-12 text-center text-muted-foreground">
|
) : devLogData ? (
|
||||||
No activity log entries found.
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
) : (
|
|
||||||
<div className="pt-2">
|
<div className="pt-2">
|
||||||
{devLogEntries.map((entry, idx) => (
|
{devLogData.entries.map((entry, idx) => (
|
||||||
<DevLogEntry key={entry.version || idx} entry={entry} />
|
<DevLogEntry key={entry.version || idx} entry={entry} />
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
)}
|
) : null}
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue