1import { useCallback } from "react";
2
3import {
4 CODE_FONT_SIZE_STEP,
5 MAX_CODE_FONT_SIZE,
6 MIN_CODE_FONT_SIZE,
7} from "../../../../lib/appearancePreferences";
8import { SettingsSection } from "../../components/SettingsSection";
9import { SettingsSwitchRow } from "../../components/SettingsSwitchRow";
10import { useAppearancePreferences } from "../AppearancePreferencesProvider";
11import {
12 AppearancePreviewSeparator,
13 CodeAppearancePreview,
14} from "../components/AppearancePreviews";
15import { FontSizeSliderRow } from "../components/FontSizeSliderRow";
16
17export function CodeAppearanceSection() {
18 const { isReady, appearance, setCodeFontSize, setCodeWordBreak } = useAppearancePreferences();
19 const custom = appearance.isCodeFontSizeCustom;
20
21 const handleToggleCustom = useCallback(
22 (enabled: boolean) => {
23 setCodeFontSize(enabled ? appearance.codeFontSize : null);
24 },
25 [appearance.codeFontSize, setCodeFontSize],
26 );
27
28 return (
29 <SettingsSection title="Code & Diffs">
30 <CodeAppearancePreview
31 fontSize={appearance.codeFontSize}
32 wordBreak={appearance.codeWordBreak}
33 />
34 <AppearancePreviewSeparator />
35 <SettingsSwitchRow
36 disabled={!isReady}
37 icon="chevron.left.forwardslash.chevron.right"
38 label="Custom font size"
39 onValueChange={handleToggleCustom}
40 value={custom}
41 />
42 {custom ? (
43 <FontSizeSliderRow
44 disabled={!isReady}
45 icon="textformat.size"
46 label="Font size"
47 max={MAX_CODE_FONT_SIZE}
48 min={MIN_CODE_FONT_SIZE}
49 onChange={setCodeFontSize}
50 step={CODE_FONT_SIZE_STEP}
51 value={appearance.codeFontSize}
52 valueLabel={`${appearance.codeFontSize} pt`}
53 />
54 ) : null}
55 <SettingsSwitchRow
56 disabled={!isReady}
57 icon="text.word.spacing"
58 label="Word break"
59 onValueChange={setCodeWordBreak}
60 value={appearance.codeWordBreak}
61 />
62 </SettingsSection>
63 );
64}