Skip to content

Commit 9e621f5

Browse files
vipmaxvipmax
committed
feat: add configurable font settings and style agent messages
1 parent 4312db8 commit 9e621f5

27 files changed

Lines changed: 824 additions & 226 deletions

‎anycode-base/src/editor.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ export class AnycodeEditor {
6464
private code: Code;
6565
private offset: number;
6666
private settings: EditorSettings;
67+
private editorFontSettingsHandler: ((event: Event) => void) | null = null;
6768
private renderer!: Renderer;
6869
private container!: HTMLDivElement;
6970
private buttonsColumn!: HTMLDivElement;
@@ -134,6 +135,26 @@ export class AnycodeEditor {
134135
}
135136

136137
this.settings = { lineHeight: 20, buffer: 15 };
138+
if (typeof window !== 'undefined') {
139+
const rootStyles = window.getComputedStyle(document.documentElement);
140+
const fontSize = Number.parseFloat(rootStyles.getPropertyValue('--editor-font-size'));
141+
const lineHeight = Number.parseFloat(rootStyles.getPropertyValue('--editor-line-height'));
142+
if (Number.isFinite(fontSize) && Number.isFinite(lineHeight)) {
143+
this.settings.lineHeight = Math.max(12, Math.round(fontSize * lineHeight));
144+
}
145+
}
146+
if (typeof window !== 'undefined') {
147+
this.editorFontSettingsHandler = (event: Event) => {
148+
const detail = (event as CustomEvent<{ size?: number; lineHeight?: number }>).detail;
149+
if (!detail) return;
150+
const fontSize = Number(detail.size);
151+
const lineHeight = Number(detail.lineHeight);
152+
if (Number.isFinite(fontSize) && Number.isFinite(lineHeight)) {
153+
this.setLineHeight(fontSize * lineHeight);
154+
}
155+
};
156+
window.addEventListener('anycode:editor-font-settings', this.editorFontSettingsHandler);
157+
}
137158

138159
if (options.theme) {
139160
const css = generateCssClasses(options.theme);
@@ -179,6 +200,10 @@ export class AnycodeEditor {
179200

180201
public clean() {
181202
this.removeEventListeners();
203+
if (this.editorFontSettingsHandler && typeof window !== 'undefined') {
204+
window.removeEventListener('anycode:editor-font-settings', this.editorFontSettingsHandler);
205+
this.editorFontSettingsHandler = null;
206+
}
182207
this.clearPendingHover();
183208
this.closeHover();
184209
if (this.scrollAnimationFrameId !== null) {
@@ -602,6 +627,14 @@ export class AnycodeEditor {
602627
this.renderer.renderCursorOrSelection(this.getEditorState());
603628
}
604629

630+
public setLineHeight(lineHeight: number): void {
631+
const nextLineHeight = Math.max(12, Math.round(lineHeight));
632+
if (this.settings.lineHeight === nextLineHeight) return;
633+
this.settings.lineHeight = nextLineHeight;
634+
this.container.style.setProperty('--anycode-line-height', `${nextLineHeight}px`);
635+
this.render();
636+
}
637+
605638
private getDiffGapTarget(target: EventTarget | null): HTMLElement | null {
606639
if (!(target instanceof Element)) {
607640
return null;

‎anycode-base/src/styles.css‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,20 @@
33
display: flex;
44
height: 100%;
55
overflow: auto;
6-
font-family: monospace;
6+
font-family: var(--editor-font-family, monospace);
7+
font-size: var(--editor-font-size, 14px);
8+
font-weight: var(--editor-font-weight, 700);
79
background: var(--background-color);
810
color: var(--theme-editor-foreground, var(--foreground-color, #fff));
911
white-space: pre;
1012
outline: none;
1113
position: relative;
1214
}
1315

16+
.anyeditor * {
17+
font-family: inherit;
18+
}
19+
1420
.anyeditor .buttons {
1521
position: sticky;
1622
left: 0;
@@ -139,7 +145,7 @@
139145
.anyeditor .code {
140146
flex: 1;
141147
/* padding-left: 10px; */
142-
font-size: 14px;
148+
font-size: var(--editor-font-size, 14px);
143149
line-height: var(--anycode-line-height);
144150
outline: none;
145151
}
@@ -534,6 +540,6 @@
534540

535541
@media (pointer: coarse) {
536542
.anyeditor .code {
537-
font-size: 16px;
543+
font-size: var(--editor-font-size, 16px);
538544
}
539545
}

‎anycode/App.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,12 @@ import { AgentPanel } from './features/agents/AgentPanel';
3434
import { BrowserPanel } from './features/browser/BrowserPanel';
3535
import { type DiffMode } from './types/diffMode';
3636
import { normalizePath } from './utils';
37+
import { useSettings } from './hooks/useSettings';
3738

3839
const App: React.FC = () => {
3940
const { wsRef, isConnected, connectionStatus } = useSocket({});
4041
const [showConnectionBanner, setShowConnectionBanner] = React.useState(false);
42+
const settings = useSettings();
4143

4244
const [fileIconsStyle, setFileIconsStyle] = React.useState<'colored' | 'monochrome' | 'disabled'>(() => {
4345
if (typeof window === 'undefined') return 'colored';
@@ -53,7 +55,7 @@ const App: React.FC = () => {
5355
const fileTree = useFileTree({ wsRef, isConnected });
5456
const editors = useEditors({ wsRef, isConnected });
5557
const terminals = useTerminals({ wsRef, isConnected });
56-
const terminalPanes = useTerminalPanes({
58+
const terminalPanes = useTerminalPanes({
5759
terminals: terminals.terminals,
5860
addTerminal: terminals.addTerminal,
5961
closeTerminal: terminals.closeTerminal,
@@ -429,6 +431,7 @@ const App: React.FC = () => {
429431
onTerminalMessage={terminals.handleTerminalDataCallback}
430432
onTerminalResize={terminals.handleTerminalResize}
431433
onIsTerminalClosing={terminals.isTerminalClosing}
434+
fontConfig={settings.fontSettings.terminal}
432435
/>
433436
);
434437
case 'agent':
@@ -485,6 +488,8 @@ const App: React.FC = () => {
485488
onFileIconsStyleChange={handleFileIconsStyleChange}
486489
fileIconsOpacity={fileIconsOpacity}
487490
onFileIconsOpacityChange={handleFileIconsOpacityChange}
491+
fontSettings={settings.fontSettings}
492+
onFontSettingsChange={settings.updateFontSettings}
488493
/>
489494
);
490495
default:

‎anycode/components/ChangesPanel.css‎

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,17 @@
33
flex-direction: column;
44
height: 100%;
55
color: var(--theme-foreground, var(--foreground-color, #e0e0e0));
6-
font-size: 13px;
6+
font-family: var(--interface-font-family);
7+
font-size: var(--interface-font-size, 14px);
8+
font-weight: var(--interface-font-weight, 700);
79
}
810

911
.changes-panel-title {
1012
padding: 10px 20px;
11-
font-size: 11px;
1213
display: flex;
1314
align-items: center;
1415
justify-content: space-between;
15-
font-size: 15px;
16+
font-size: 1.07em;
1617
}
1718

1819
.changes-header {
@@ -50,7 +51,7 @@
5051
}
5152

5253
.changes-branch {
53-
font-weight: 500;
54+
font-weight: inherit;
5455
}
5556

5657
.changes-branch-select {
@@ -65,7 +66,9 @@
6566
border: none;
6667
background-color: transparent;
6768
color: var(--theme-foreground, var(--foreground-color, #e0e0e0));
68-
font-size: 12px;
69+
font-family: var(--interface-font-family);
70+
font-size: 0.86em;
71+
font-weight: var(--interface-font-weight, 700);
6972
border-radius: 0;
7073
padding: 2px 18px 2px 0;
7174
min-height: 24px;
@@ -89,7 +92,7 @@
8992
background: none;
9093
border: 1px solid transparent;
9194
color: var(--theme-foreground, var(--foreground-color, #e0e0e0));
92-
font-size: 11px;
95+
font-size: 0.79em;
9396
cursor: pointer;
9497
padding: 2px 8px;
9598
border-radius: 4px;
@@ -122,8 +125,7 @@
122125
}
123126

124127
.changes-refresh-btn {
125-
font-size: 16px;
126-
font-size: 16px;
128+
font-size: 1.14em;
127129
}
128130

129131
.changes-message-container {
@@ -141,8 +143,9 @@
141143
color: var(--theme-foreground, var(--foreground-color, #e0e0e0));
142144
padding: 6px 8px;
143145
border-radius: 8px;
144-
font-family: inherit;
145-
font-size: 13px;
146+
font-family: var(--interface-font-family);
147+
font-size: 0.93em;
148+
font-weight: var(--interface-font-weight, 700);
146149
min-height: 32px;
147150
max-height: 50vh;
148151
line-height: 1.4;
@@ -154,7 +157,7 @@
154157
@media (max-width: 768px) {
155158
.changes-message-mirror,
156159
.changes-message-input {
157-
font-size: 16px;
160+
font-size: 1em;
158161
}
159162
}
160163

@@ -215,7 +218,7 @@
215218
display: inline-flex;
216219
align-items: center;
217220
gap: 4px;
218-
font-size: 11px;
221+
font-size: 0.79em;
219222
line-height: 1;
220223
font-variant-numeric: tabular-nums;
221224
opacity: 0.95;
@@ -296,7 +299,7 @@
296299

297300
.changes-group-title {
298301
padding: 6px 8px 4px;
299-
font-size: 11px;
302+
font-size: 0.79em;
300303
text-transform: uppercase;
301304
letter-spacing: 0.04em;
302305
color: var(--theme-tab-foreground, #8f8f8f);
@@ -335,7 +338,7 @@
335338
display: inline-flex;
336339
align-items: center;
337340
gap: 4px;
338-
font-size: 11px;
341+
font-size: 1em;
339342
line-height: 1;
340343
font-variant-numeric: tabular-nums;
341344
white-space: nowrap;
@@ -348,7 +351,7 @@
348351
width: 18px;
349352
height: 18px;
350353
line-height: 16px;
351-
font-size: 14px;
354+
font-size: 1em;
352355
border-radius: 4px;
353356
cursor: pointer;
354357
padding: 0;
@@ -423,7 +426,7 @@
423426
border: none;
424427
color: var(--theme-tab-foreground, #7f7f7f);
425428
margin-right: 0;
426-
font-size: 14px;
429+
font-size: 1em;
427430
cursor: pointer !important;
428431
padding: 1px 4px;
429432
opacity: 0;
@@ -455,7 +458,7 @@
455458
border: none;
456459
color: var(--theme-tab-foreground, #7f7f7f);
457460
margin-right: 0;
458-
font-size: 16px;
461+
font-size: 1.14em;
459462
line-height: 1;
460463
cursor: pointer !important;
461464
padding: 1px 4px;
@@ -511,7 +514,7 @@
511514
/* Pushed to right in flex container if it's the last item */
512515
margin-left: auto;
513516
color: var(--theme-foreground, var(--foreground-color, #ffffff));
514-
font-size: 15px;
517+
font-size: 1.07em;
515518
background-color: var(--theme-background, var(--background-color, #2d2d2d));
516519
cursor: pointer !important;
517520
flex-shrink: 0;
@@ -556,7 +559,7 @@
556559
align-items: center;
557560
justify-content: flex-end;
558561
gap: 2px;
559-
font-size: 11px;
562+
font-size: 0.79em;
560563
line-height: 1;
561564
font-variant-numeric: tabular-nums;
562565
flex-shrink: 0;

0 commit comments

Comments
 (0)