From c293cacda31af62bc33f6145d3b6f4bb0d132e53 Mon Sep 17 00:00:00 2001 From: Jiayuan Date: Thu, 15 Jan 2026 19:07:25 +0800 Subject: [PATCH] Optimize typography and layout for better readability MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add Geist Mono font with multiple weights for consistent design - Set user message background to #f9f7f5 for better visual distinction - Improve markdown rendering with professional typographic spacing: - Increase paragraph margins and line height - Add proper heading hierarchy with asymmetric spacing - Fix code block styling to eliminate extra padding - Improve list and blockquote styling - Expand chat view padding (px-6→px-8, py-4→py-6) and message spacing (space-y-4→space-y-5) for better breathing room Co-Authored-By: Claude Haiku 4.5 --- package.json | 1 + pnpm-lock.yaml | 8 ++++ src/renderer/src/components/ChatView.tsx | 56 +++++++++++++++--------- src/renderer/src/main.tsx | 6 ++- src/renderer/src/styles/index.css | 1 + 5 files changed, 51 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index 1aa18c5ba6..cd796fc505 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "@agentclientprotocol/sdk": "^0.13.0", "@electron-toolkit/preload": "^3.0.2", "@electron-toolkit/utils": "^4.0.0", + "@fontsource/geist-mono": "^5.2.7", "@fontsource/geist-sans": "^5.2.5", "@radix-ui/react-collapsible": "^1.1.12", "@radix-ui/react-context-menu": "^2.2.16", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c1f23ec8e7..ef791833fd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,6 +17,9 @@ importers: '@electron-toolkit/utils': specifier: ^4.0.0 version: 4.0.0(electron@39.2.7) + '@fontsource/geist-mono': + specifier: ^5.2.7 + version: 5.2.7 '@fontsource/geist-sans': specifier: ^5.2.5 version: 5.2.5 @@ -692,6 +695,9 @@ packages: '@floating-ui/utils@0.2.10': resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==} + '@fontsource/geist-mono@5.2.7': + resolution: {integrity: sha512-xVPVFISJg/K0VVd+aQN0Y7X/sw9hUcJPyDWFJ5GpyU3bHELhoRsJkPSRSHXW32mOi0xZCUQDOaPj1sqIFJ1FGg==} + '@fontsource/geist-sans@5.2.5': resolution: {integrity: sha512-anllOHyJbElRs9fV15TeDRqAeb1IKm4bSknPl6ZMoyPTx1BBy7logudcUwpNjmQLkzn4Q0JGQLRCUKJYoyST6A==} @@ -4515,6 +4521,8 @@ snapshots: '@floating-ui/utils@0.2.10': {} + '@fontsource/geist-mono@5.2.7': {} + '@fontsource/geist-sans@5.2.5': {} '@humanfs/core@0.19.1': {} diff --git a/src/renderer/src/components/ChatView.tsx b/src/renderer/src/components/ChatView.tsx index 491319721c..db24c41b32 100644 --- a/src/renderer/src/components/ChatView.tsx +++ b/src/renderer/src/components/ChatView.tsx @@ -68,7 +68,7 @@ export function ChatView({ updates, isProcessing, hasSession, isInitializing, cu return (
-
+
{messages.map((msg, idx) => ( ))} @@ -323,7 +323,7 @@ function MessageBubble({ message }: MessageBubbleProps) { return (
-
+
{/* Render images first */} {imageBlocks.length > 0 && (
@@ -379,53 +379,69 @@ function TextContentBlock({ content }: { content: string }) { if (!content) return null return ( -
+

{children}

, - h1: ({ children }) =>

{children}

, - h2: ({ children }) =>

{children}

, - h3: ({ children }) =>

{children}

, - ul: ({ children }) =>
    {children}
, - ol: ({ children }) =>
    {children}
, - li: ({ children }) =>
  • {children}
    • , + // Paragraphs: consistent spacing, tighter line height for readability + p: ({ children }) => ( +

    {children}

    + ), + // Headings: more space above (1.5x) than below (0.5x) for visual grouping + h1: ({ children }) => ( +

    {children}

    + ), + h2: ({ children }) => ( +

    {children}

    + ), + h3: ({ children }) => ( +

    {children}

    + ), + // Lists: consistent spacing with content + ul: ({ children }) => ( +
      {children}
    + ), + ol: ({ children }) => ( +
      {children}
    + ), + li: ({ children }) =>
  • {children}
    • , + // Code: pre handles container, code is transparent for blocks code: ({ className, children }) => { const isBlock = className?.includes('language-') if (isBlock) { - return ( - - {children} - - ) + // Block code inside pre - no extra styling, pre handles it + return {children} } + // Inline code return ( - + {children} ) }, pre: ({ children }) => ( - 
    +            
                   {children}
             
    
           ),
+          // Links
           a: ({ href, children }) => (
             
               {children}
             
           ),
+          // Blockquote: subtle styling
           blockquote: ({ children }) => (
-            
    
+            
    
               {children}
             
    
           ),
-          hr: () => 
    ,
+          hr: () => 
    ,
           strong: ({ children }) => {children},
           em: ({ children }) => {children},
           // Table components for GFM table support
           table: ({ children }) => (
-            
    
+            
    
               
                 {children}
               
    
diff --git a/src/renderer/src/main.tsx b/src/renderer/src/main.tsx
index 99404c9c24..352b16fd25 100644
--- a/src/renderer/src/main.tsx
+++ b/src/renderer/src/main.tsx
@@ -1,4 +1,8 @@
-import '@fontsource/geist-sans'
+import '@fontsource/geist-sans/400.css'
+import '@fontsource/geist-sans/500.css'
+import '@fontsource/geist-sans/600.css'
+import '@fontsource/geist-sans/700.css'
+import '@fontsource/geist-mono/400.css'
 import './styles/index.css'
 
 import { StrictMode } from 'react'
diff --git a/src/renderer/src/styles/index.css b/src/renderer/src/styles/index.css
index f857fecc33..9c40480d77 100644
--- a/src/renderer/src/styles/index.css
+++ b/src/renderer/src/styles/index.css
@@ -42,6 +42,7 @@ body {
 }
 
 @theme inline {
+  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);