diff --git a/apps/desktop/src/settings/DesktopClientSettings.test.ts b/apps/desktop/src/settings/DesktopClientSettings.test.ts index ec5062f9105bf..50bf186d52662 100644 --- a/apps/desktop/src/settings/DesktopClientSettings.test.ts +++ b/apps/desktop/src/settings/DesktopClientSettings.test.ts @@ -39,10 +39,12 @@ const clientSettings: ClientSettings = { diffLayout: "stacked", environmentIdentificationMode: "artwork", favorites: [], + fontFamilyChat: "", fontFamilyCode: "", fontFamilyComposer: "", fontFamilySans: "", fontFamilyTerminal: "", + fontSizeChat: 14, fontSizeCode: 13, fontSizeInterface: 16, fontSizePrompt: 14, diff --git a/apps/web/src/appInit.tsx b/apps/web/src/appInit.tsx index b9312858e334b..f9b8ab4f87797 100644 --- a/apps/web/src/appInit.tsx +++ b/apps/web/src/appInit.tsx @@ -83,8 +83,10 @@ function startClientAppearance(): void { previous?.fontFamilySans !== settings.fontFamilySans || previous.fontFamilyCode !== settings.fontFamilyCode || previous.fontFamilyComposer !== settings.fontFamilyComposer || + previous.fontFamilyChat !== settings.fontFamilyChat || previous.fontSizeInterface !== settings.fontSizeInterface || previous.fontSizePrompt !== settings.fontSizePrompt || + previous.fontSizeChat !== settings.fontSizeChat || previous.fontSizeCode !== settings.fontSizeCode || previous.fontSmoothing !== settings.fontSmoothing ) { @@ -92,8 +94,10 @@ function startClientAppearance(): void { sans: settings.fontFamilySans, code: settings.fontFamilyCode, composer: settings.fontFamilyComposer, + chat: settings.fontFamilyChat, sizeInterface: settings.fontSizeInterface, sizePrompt: settings.fontSizePrompt, + sizeChat: settings.fontSizeChat, sizeCode: settings.fontSizeCode, smoothing: settings.fontSmoothing, }); diff --git a/apps/web/src/appearanceFonts.ts b/apps/web/src/appearanceFonts.ts index 48f8e5955e7e1..39bea9a8039b5 100644 --- a/apps/web/src/appearanceFonts.ts +++ b/apps/web/src/appearanceFonts.ts @@ -1,10 +1,13 @@ import { + DEFAULT_CHAT_FONT_SIZE, DEFAULT_CODE_FONT_SIZE, DEFAULT_INTERFACE_FONT_SIZE, DEFAULT_PROMPT_FONT_SIZE, + MAX_CHAT_FONT_SIZE, MAX_CODE_FONT_SIZE, MAX_INTERFACE_FONT_SIZE, MAX_PROMPT_FONT_SIZE, + MIN_CHAT_FONT_SIZE, MIN_CODE_FONT_SIZE, MIN_INTERFACE_FONT_SIZE, MIN_PROMPT_FONT_SIZE, @@ -62,13 +65,15 @@ export interface AppearanceFontPreferences { readonly sans: string; readonly code: string; readonly composer: string; + readonly chat: string; readonly sizeInterface: number; readonly sizePrompt: number; + readonly sizeChat: number; readonly sizeCode: number; readonly smoothing: boolean; } -/** Always writes sizes: interface size sets the root; prompt and code use pixels to avoid double scaling. */ +/** Always writes sizes: interface size sets the root; prompt, chat and code use pixels to avoid double scaling. */ export function applyAppearanceFontVariables( root: HTMLElement, preferences: AppearanceFontPreferences, @@ -77,6 +82,7 @@ export function applyAppearanceFontVariables( ["--font-sans", preferences.sans, DEFAULT_SANS_FONT_STACK], ["--font-mono", preferences.code, DEFAULT_CODE_FONT_STACK], ["--font-composer", preferences.composer, "var(--font-sans)"], + ["--font-chat", preferences.chat, "var(--font-sans)"], ]; for (const [variable, custom, fallback] of families) { const list = cssFontFamilies(custom); @@ -89,6 +95,7 @@ export function applyAppearanceFontVariables( root.style.fontSize = `${clampInterfaceFontSize(preferences.sizeInterface)}px`; root.style.setProperty("--font-size-prompt", `${clampPromptFontSize(preferences.sizePrompt)}px`); + root.style.setProperty("--font-size-chat", `${clampChatFontSize(preferences.sizeChat)}px`); const code = clampCodeFontSize(preferences.sizeCode); root.style.setProperty("--font-size-code", `${code}px`); root.style.setProperty("--diffs-font-size", `${code}px`); @@ -118,6 +125,10 @@ function clampPromptFontSize(value: number): number { return clampFontSize(value, MIN_PROMPT_FONT_SIZE, MAX_PROMPT_FONT_SIZE, DEFAULT_PROMPT_FONT_SIZE); } +function clampChatFontSize(value: number): number { + return clampFontSize(value, MIN_CHAT_FONT_SIZE, MAX_CHAT_FONT_SIZE, DEFAULT_CHAT_FONT_SIZE); +} + function clampCodeFontSize(value: number): number { return clampFontSize(value, MIN_CODE_FONT_SIZE, MAX_CODE_FONT_SIZE, DEFAULT_CODE_FONT_SIZE); } diff --git a/apps/web/src/components/NoProjectsHero.tsx b/apps/web/src/components/NoProjectsHero.tsx index e6ebe6536c519..e3b80ec490a34 100644 --- a/apps/web/src/components/NoProjectsHero.tsx +++ b/apps/web/src/components/NoProjectsHero.tsx @@ -28,7 +28,9 @@ export function NoProjectsHero() {
- What should we work on? + + What should we work on? + {scratchTargetEnvironmentId === null ? "Add a project to start your first thread." diff --git a/apps/web/src/components/chat/DraftHeroHeadline.tsx b/apps/web/src/components/chat/DraftHeroHeadline.tsx index d2e259692204b..56b5f868c75ef 100644 --- a/apps/web/src/components/chat/DraftHeroHeadline.tsx +++ b/apps/web/src/components/chat/DraftHeroHeadline.tsx @@ -387,7 +387,7 @@ export function DraftHeroHeadline({ {projectSelector} ) : ( -

+

{isScratchDraft ? ( <>What should we work on? ) : canChooseProject ? ( diff --git a/apps/web/src/components/chat/DraftHeroProjectHeading.tsx b/apps/web/src/components/chat/DraftHeroProjectHeading.tsx index d5db58f503afe..f0cc1ccebdd51 100644 --- a/apps/web/src/components/chat/DraftHeroProjectHeading.tsx +++ b/apps/web/src/components/chat/DraftHeroProjectHeading.tsx @@ -30,7 +30,11 @@ export function DraftHeroProjectHeading({ }, []); return ( -
+