feat: bold dashboard redesign with inline stats, section labels, and chip icons
Restructure QuickStartPage for a more professional, informative layout: - Left-aligned hero greeting (text-4xl) with date context and inline stat strip - GreetingStatStrip shows resolved/active/MTTR at a glance - Remove collapsible toggle — dashboard stats always visible - Section labels with trailing border lines for visual hierarchy - Suggestion chips with category icons, card-style hover, press feedback - Fix cyan focus ring and icon color to ember orange design system - Session cards: line-clamp-2 descriptions, font-medium text, problem_domain metadata - Widen container max-w-3xl → max-w-4xl for breathing room - Add .impeccable.md and .github/copilot-instructions.md design context - CLAUDE.md audit: fix stale references, remove duplication, update counts Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -22,7 +22,7 @@ const STATUS_CONFIG: Record<string, { icon: typeof CheckCircle; color: string }>
|
||||
abandoned: { icon: XCircle, color: '#8891a0' },
|
||||
}
|
||||
|
||||
export function RecentFlowPilotSessions() {
|
||||
export function RecentFlowPilotSessions({ hideHeader = false }: { hideHeader?: boolean }) {
|
||||
const [sessions, setSessions] = useState<AISessionSummary[]>([])
|
||||
const navigate = useNavigate()
|
||||
|
||||
@@ -42,18 +42,20 @@ export function RecentFlowPilotSessions() {
|
||||
|
||||
return (
|
||||
<div className="card-flat">
|
||||
<div
|
||||
className="flex items-center justify-between px-5 py-3"
|
||||
style={{ borderBottom: '1px solid var(--color-border-default)' }}
|
||||
>
|
||||
<h3 className="font-heading text-sm font-bold text-foreground">Recent Sessions</h3>
|
||||
<Link
|
||||
to="/sessions"
|
||||
className="flex items-center gap-1 text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors"
|
||||
{!hideHeader && (
|
||||
<div
|
||||
className="flex items-center justify-between px-5 py-3"
|
||||
style={{ borderBottom: '1px solid var(--color-border-default)' }}
|
||||
>
|
||||
History <ArrowRight size={10} />
|
||||
</Link>
|
||||
</div>
|
||||
<h3 className="font-heading text-sm font-bold text-foreground">Recent Sessions</h3>
|
||||
<Link
|
||||
to="/sessions"
|
||||
className="flex items-center gap-1 text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
History <ArrowRight size={10} />
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
{sessions.map((session, i) => {
|
||||
const config = STATUS_CONFIG[session.status] || STATUS_CONFIG.abandoned
|
||||
@@ -73,11 +75,14 @@ export function RecentFlowPilotSessions() {
|
||||
<StatusIcon size={14} style={{ color: config.color }} className="shrink-0" />
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm text-foreground truncate">
|
||||
<p className="text-sm font-medium text-foreground truncate">
|
||||
{session.session_type === 'chat'
|
||||
? (session.title || session.problem_summary || 'Chat')
|
||||
: (session.problem_summary || 'Session')}
|
||||
</p>
|
||||
{session.problem_domain && (
|
||||
<p className="text-[0.625rem] text-muted-foreground mt-0.5 truncate">{session.problem_domain}</p>
|
||||
)}
|
||||
</div>
|
||||
<span className="shrink-0 font-sans text-xs text-muted-foreground">
|
||||
{timeAgo(session.resolved_at || session.created_at)}
|
||||
|
||||
Reference in New Issue
Block a user