mirror of
https://github.com/supabase/supabase.git
synced 2026-10-09 03:15:06 +03:00
Saxon Fletcher
c33d255eba
<img width="1062" height="712" alt="image" src="https://github.com/user-attachments/assets/44c82e00-94b4-405a-b2ef-cbc08401c4db" /> <img width="1583" height="962" alt="image" src="https://github.com/user-attachments/assets/b19b9fd8-24b1-48d6-8b31-11fba9911b9a" /> ## What kind of change does this PR introduce? UI refinement. ## What is the current behavior? The assistant sidebar and Explorer chat use different empty states. ## What is the new behavior? Share a centered empty state with chat-focused prompts, use-case icons, and a “Use your own agent” footer. Simplify prompt cards and align Explorer Home styling. ## Additional context Studio typecheck, targeted ESLint, and Prettier pass. E2E selectors updated; browser verification pending. Local build stopped after showing no progress during compilation. I have read CONTRIBUTING.md. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Redesigned Explorer and AI Assistant onboarding with project-focused chat prompts. * Added personalized chat template icons and updated suggested actions. * Added an option to connect and use an external agent through Claude, OpenAI, or Cursor. * Improved chat composer placement and empty-chat guidance. * **Style** * Action cards now support layouts without descriptions and adjust alignment automatically. * **Tests** * Updated end-to-end coverage for the revised assistant interface. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
30 lines
920 B
TypeScript
30 lines
920 B
TypeScript
import type { ReactNode } from 'react'
|
|
import { Card, cn } from 'ui'
|
|
|
|
export const ActionCard = (card: {
|
|
icon: ReactNode
|
|
title: string
|
|
description?: string
|
|
bgColor: string
|
|
onClick?: () => void
|
|
}) => {
|
|
return (
|
|
<Card
|
|
className="grow bg-surface-100 p-3 transition-colors hover:bg-surface-200 border hover:border-default cursor-pointer"
|
|
onClick={card.onClick}
|
|
>
|
|
<div className={cn('relative flex gap-3', card.description ? 'items-start' : 'items-center')}>
|
|
<div
|
|
className={`rounded-full ${card.bgColor} w-8 h-8 flex items-center justify-center shrink-0`}
|
|
>
|
|
{card.icon}
|
|
</div>
|
|
<div className="flex flex-col gap-0">
|
|
<h3 className="text-sm text-foreground mb-0">{card.title}</h3>
|
|
{card.description && <p className="text-xs text-foreground-light">{card.description}</p>}
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
)
|
|
}
|