style: soften draft welcome title

Makes the welcome prompt lighter
Keeps the project name visually emphasized
This commit is contained in:
Bohdan Triapitsyn
2026-05-28 01:25:55 +03:00
parent 7dffc98f00
commit 4a1ebd98da
2 changed files with 42 additions and 8 deletions
@@ -337,6 +337,20 @@ const getProjectDisplayLabel = (project: { label?: string; path: string }): stri
return label || formatDirectoryName(project.path);
};
const renderDraftTitle = (title: string, projectLabel: string | null): React.ReactNode => {
if (!projectLabel) return title;
const projectIndex = title.indexOf(projectLabel);
if (projectIndex === -1) return title;
return (
<>
{title.slice(0, projectIndex)}
<span className="font-medium">{projectLabel}</span>
{title.slice(projectIndex + projectLabel.length)}
</>
);
};
type ChatContainerProps = {
autoOpenDraft?: boolean;
readOnly?: boolean;
@@ -794,10 +808,13 @@ export const ChatContainer: React.FC<ChatContainerProps> = ({ autoOpenDraft = tr
<div className="relative flex h-full flex-col bg-background transform-gpu">
{useCompactDraftLayout && !isDesktopExpandedInput ? (
<div className="flex min-h-0 flex-1 items-center justify-center px-6 text-center">
<h1 className="text-balance text-3xl font-medium tracking-tight text-foreground">
{draftProjectLabel
? t('chat.emptyState.draftTitleWithProject', { project: draftProjectLabel })
: t('chat.emptyState.draftTitle')}
<h1 className="text-balance text-3xl font-normal tracking-tight text-foreground">
{renderDraftTitle(
draftProjectLabel
? t('chat.emptyState.draftTitleWithProject', { project: draftProjectLabel })
: t('chat.emptyState.draftTitle'),
draftProjectLabel,
)}
</h1>
</div>
) : null}
+21 -4
View File
@@ -318,6 +318,20 @@ const getProjectDisplayLabel = (project: { label?: string; path: string }): stri
return formatDirectoryName(project.path);
};
const renderDraftTitle = (title: string, projectLabel: string | null): React.ReactNode => {
if (!projectLabel) return title;
const projectIndex = title.indexOf(projectLabel);
if (projectIndex === -1) return title;
return (
<>
{title.slice(0, projectIndex)}
<span className="font-medium">{projectLabel}</span>
{title.slice(projectIndex + projectLabel.length)}
</>
);
};
const getProjectIconColor = (projectColor?: string | null): string | undefined => {
if (!projectColor) {
return undefined;
@@ -3789,10 +3803,13 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({ onOpenSettings, scrollTo
>
{newSessionDraftOpen && !isDesktopExpanded && !isMobile && !isVSCode && !isMiniChatSurface ? (
<div className="chat-input-column mb-7 text-center">
<h1 className="text-balance text-2xl font-medium tracking-tight text-foreground md:text-3xl">
{draftProjectLabel
? t('chat.emptyState.draftTitleWithProject', { project: draftProjectLabel })
: t('chat.emptyState.draftTitle')}
<h1 className="text-balance text-2xl font-normal tracking-tight text-foreground md:text-3xl">
{renderDraftTitle(
draftProjectLabel
? t('chat.emptyState.draftTitleWithProject', { project: draftProjectLabel })
: t('chat.emptyState.draftTitle'),
draftProjectLabel,
)}
</h1>
</div>
) : null}