From ab561e1e77f551dda3cd79605fd9e0267e410da0 Mon Sep 17 00:00:00 2001
From: robbyczgw-cla <robbyczgw@gmail.com>
Date: Fri, 6 Feb 2026 15:49:43 +0000
Subject: [PATCH] feat: add text size setting (S / M / L / XL)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add adjustable text size for chat messages:
- Four sizes: S (text-sm), M (text-base), L (text-lg), XL (text-xl)
- Picker in Settings → Chat section
- Applied to all message content (user and assistant)
- Persisted via Zustand store (localStorage)
- Default: M (text-base, matches current behavior)

Changes:
- src/hooks/use-chat-settings.ts: add TextSize type + textSizeClasses map
- src/screens/chat/components/settings-dialog.tsx: add size picker buttons
- src/screens/chat/components/message-item.tsx: apply text size class

No new dependencies.
---
 apps/webclaw/src/hooks/use-chat-settings.ts   | 10 ++++++
 .../screens/chat/components/message-item.tsx  |  3 +-
 .../chat/components/settings-dialog.tsx       | 33 +++++++++++++++++--
 3 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/apps/webclaw/src/hooks/use-chat-settings.ts b/apps/webclaw/src/hooks/use-chat-settings.ts
index d10e4bc..390d827 100644
--- a/apps/webclaw/src/hooks/use-chat-settings.ts
+++ b/apps/webclaw/src/hooks/use-chat-settings.ts
@@ -3,11 +3,20 @@ import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 
 export type ThemeMode = 'system' | 'light' | 'dark'
+export type TextSize = 'sm' | 'md' | 'lg' | 'xl'
+
+export const textSizeClasses: Record<TextSize, string> = {
+  sm: 'text-sm',
+  md: 'text-base',
+  lg: 'text-lg',
+  xl: 'text-xl',
+}
 
 export type ChatSettings = {
   showToolMessages: boolean
   showReasoningBlocks: boolean
   theme: ThemeMode
+  textSize: TextSize
 }
 
 type ChatSettingsState = {
@@ -22,6 +31,7 @@ export const useChatSettingsStore = create<ChatSettingsState>()(
         showToolMessages: true,
         showReasoningBlocks: true,
         theme: 'system',
+        textSize: 'md',
       },
       updateSettings: (updates) =>
         set((state) => ({
diff --git a/apps/webclaw/src/screens/chat/components/message-item.tsx b/apps/webclaw/src/screens/chat/components/message-item.tsx
index 310c18e..3757b5e 100644
--- a/apps/webclaw/src/screens/chat/components/message-item.tsx
+++ b/apps/webclaw/src/screens/chat/components/message-item.tsx
@@ -10,7 +10,7 @@ import type { ToolPart } from '@/components/prompt-kit/tool'
 import { Message, MessageContent } from '@/components/prompt-kit/message'
 import { Thinking } from '@/components/prompt-kit/thinking'
 import { Tool } from '@/components/prompt-kit/tool'
-import { useChatSettings } from '@/hooks/use-chat-settings'
+import { useChatSettings, textSizeClasses } from '@/hooks/use-chat-settings'
 import { cn } from '@/lib/utils'
 
 type MessageItemProps = {
@@ -221,6 +221,7 @@ function MessageItemComponent({
           markdown={!isUser}
           className={cn(
             'text-primary-900',
+            textSizeClasses[settings.textSize],
             !isUser
               ? 'bg-transparent w-full'
               : 'bg-primary-100 px-4 py-2.5 max-w-[85%]',
diff --git a/apps/webclaw/src/screens/chat/components/settings-dialog.tsx b/apps/webclaw/src/screens/chat/components/settings-dialog.tsx
index 1bc15d8..3302f41 100644
--- a/apps/webclaw/src/screens/chat/components/settings-dialog.tsx
+++ b/apps/webclaw/src/screens/chat/components/settings-dialog.tsx
@@ -15,9 +15,10 @@ import {
 } from '@/components/ui/dialog'
 import { Switch } from '@/components/ui/switch'
 import { Tabs, TabsList, TabsTab } from '@/components/ui/tabs'
-import { useChatSettings } from '@/hooks/use-chat-settings'
-import type { ThemeMode } from '@/hooks/use-chat-settings'
+import { useChatSettings, textSizeClasses } from '@/hooks/use-chat-settings'
+import type { ThemeMode, TextSize } from '@/hooks/use-chat-settings'
 import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
 
 type SettingsSectionProps = {
   title: string
@@ -154,6 +155,34 @@ export function SettingsDialog({
           </SettingsSection>
 
           <SettingsSection title="Chat">
+            <SettingsRow label="Text size">
+              <div className="flex gap-1">
+                {(['sm', 'md', 'lg', 'xl'] as const).map(function renderSize(size) {
+                  const labels: Record<TextSize, string> = {
+                    sm: 'S',
+                    md: 'M',
+                    lg: 'L',
+                    xl: 'XL',
+                  }
+                  return (
+                    <button
+                      key={size}
+                      onClick={function handleClick() {
+                        updateSettings({ textSize: size })
+                      }}
+                      className={cn(
+                        'px-2.5 py-1 rounded-md text-xs font-medium transition-colors',
+                        settings.textSize === size
+                          ? 'bg-primary-900 text-white'
+                          : 'bg-primary-100 text-primary-600 hover:bg-primary-200',
+                      )}
+                    >
+                      {labels[size]}
+                    </button>
+                  )
+                })}
+              </div>
+            </SettingsRow>
             <SettingsRow label="Show tool messages">
               <Switch
                 checked={settings.showToolMessages}