initial pass at settings, not current saved

Author: chrisdrackett

apps/client/app.config.ts

@@ -49,22 +49,22 @@ export const appConfig = {
 		local: string
 		src: string
 	}[],
+	// themes to load into the editor via shiki
+	themes: [
+		{ name: "Code Glue Light", theme: codeGlueLight },
+		{ name: "Vitesse Dark", theme: "vitesse-dark" },
+		{ name: "Vitesse Light", theme: "vitesse-light" },
+	] satisfies {
+		name: string
+		theme: ThemeInput | "none" | StringLiteralUnion<BundledTheme, string>
+	}[],
 	editor: {
 		tabSize: 2,
 		printWidth: 80,
 		defaultFontSize: 14,
 		defaultFontWidth: 100,
 		defaultFontWeight: 260,
 		defaultFont: "Monaspace Argon",
-		// themes to load into the editor via shiki
-		themes: [
-			{ name: "Code Glue Light", theme: codeGlueLight },
-			{ name: "Vitesse Dark", theme: "vitesse-dark" },
-			{ name: "Vitesse Light", theme: "vitesse-light" },
-		] satisfies {
-			name: string
-			theme: ThemeInput | "none" | StringLiteralUnion<BundledTheme, string>
-		}[],
 		// languages that need to support the above themes
 		languages: ["typescript", "javascript"] satisfies (
 			| LanguageInput
@@ -74,7 +74,9 @@ export const appConfig = {
 	},
 	logs: {
 		defaultFontSize: 14,
-		font: "Monaspace Krypton",
+		defaultFontWidth: 100,
+		defaultFontWeight: 260,
+		defaultFont: "Monaspace Krypton",
 	},
 	queries: {
 		settings: parseAsBoolean.withDefault(false),

apps/client/src/components/Editor/index.tsx

@@ -1,10 +1,11 @@
 import { type Monaco, Editor as MonacoEditor } from "@monaco-editor/react"
 import React from "react"
+import { useSnapshot } from "valtio/react"
 
 import { appConfig } from "@/config"
-import { codeGlueLight } from "@/design/editorThemes"
 import { useCurrentAutomation } from "@/hooks/useAutomation"
 import { store } from "@/store"
+import { getUserSettingOrDefault, settingsStore } from "@/store/settings"
 
 import type { editor } from "monaco-editor"
 
@@ -16,6 +17,13 @@ export const Editor: React.FC = () => {
 		useCurrentAutomation()
 	const path = automationId ? `/automations/${automationId}.ts` : undefined
 
+	const snap = useSnapshot(settingsStore)
+	const theme = getUserSettingOrDefault(snap, "editor.theme")
+	const typeface = getUserSettingOrDefault(snap, "editor.typeface")
+	const fontSize = getUserSettingOrDefault(snap, "editor.fontSize")
+	const fontWidth = getUserSettingOrDefault(snap, "editor.fontWidth")
+	const fontWeight = getUserSettingOrDefault(snap, "editor.fontWeight")
+
 	/**
 	 * Support for automation draft saving with debounce
 	 */
@@ -74,7 +82,7 @@ export const Editor: React.FC = () => {
 		<MonacoEditor
 			{...{
 				language: "typescript",
-				theme: codeGlueLight.name,
+				theme,
 				defaultValue: automationSnapshot.body,
 				beforeMount: handleEditorBeforeMount,
 				onChange: handleEditorChange,
@@ -86,12 +94,11 @@ export const Editor: React.FC = () => {
 					minimap: { enabled: false },
 					tabSize: appConfig.editor.tabSize,
 					rulers: [appConfig.editor.printWidth],
-					fontSize: appConfig.editor.defaultFontSize,
-					fontFamily: appConfig.editor.font,
-					fontWeight: "260",
+					fontSize,
+					fontFamily: typeface,
 					fontLigatures:
 						"'calt', 'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'ss07', 'ss08', 'ss09', 'ss10', 'liga'",
-					fontVariations: true,
+					fontVariations: `'wght' ${fontWeight}, 'wdth' ${fontWidth}`,
 					allowVariableFonts: true,
 					automaticLayout: true,
 					occurrencesHighlight: "off",

apps/client/src/components/Editor/init.ts

@@ -67,7 +67,7 @@ configureMonacoPrettier(monaco, {
 
 // Create the language highlighter, add themes and languages in appConfig
 const highlighter = await createHighlighter({
-	themes: appConfig.editor.themes,
+	themes: appConfig.themes.map((t) => t.theme),
 	langs: appConfig.editor.languages,
 })
 

apps/client/src/components/Logs.tsx

@@ -1,4 +1,5 @@
-import { useCallback, useEffect, useRef } from "react"
+import { useEffect } from "react"
+import { useSnapshot } from "valtio/react"
 
 import { ScrollView, type ScrollViewRef, Text } from "@code-glue/paradigm"
 import { formatAutomationContext } from "@code-glue/server/utils/helpers/format.mts"
@@ -7,8 +8,8 @@ import {
 	type LogLine,
 	useAutomationLogs,
 } from "@/hooks/useAutomationLogs"
-import { appConfig } from "../../app.config"
-import { useAutomation } from "../hooks/useAutomation"
+import { useAutomation } from "@/hooks/useAutomation"
+import { getUserSettingOrDefault, settingsStore } from "@/store/settings"
 
 import type React from "react"
 
@@ -43,6 +44,11 @@ export const Logs = ({
 	ref,
 }: LogsProps) => {
 	const { automationSnapshot: automation } = useAutomation(automationId)
+	const snap = useSnapshot(settingsStore)
+	const typeface = getUserSettingOrDefault(snap, "console.typeface")
+	const fontSize = getUserSettingOrDefault(snap, "console.fontSize")
+	const fontWidth = getUserSettingOrDefault(snap, "console.fontWidth")
+	const fontWeight = getUserSettingOrDefault(snap, "console.fontWeight")
 
 	const loggerContext = automationId
 		? formatAutomationContext(automation.title)
@@ -82,7 +88,8 @@ export const Logs = ({
 				<Text
 					style={Text.style.footnote}
 					key={logKey(log)}
-					_style={{ fontFamily: appConfig.logs.font }}
+					// biome-ignore lint/suspicious/noExplicitAny: runtime values, not Tamagui tokens
+					_style={{ fontFamily: typeface, fontSize, fontWeight, fontStretch: `${fontWidth}%` } as any}
 					color={log.isHistorical ? "$colorDisabled" : "$color"}
 				>
 					<Text

apps/client/src/design/editorThemes.ts

@@ -35,7 +35,7 @@ export const codeGlueLight = {
 		"editorSuggestWidget.highlightForeground": "#3f8ffa",
 		"editorSuggestWidget.selectedBackground": "#3f8ffa",
 		"editorSuggestWidget.border": "#c0c0c0",
-		"editorRuler.foreground": "#ececec",
+		"editorRuler.foreground": "#d0d0d0",
 	},
 	settings: [
 		{

apps/client/src/pages/Frame/Frame.tsx

@@ -4,6 +4,7 @@ import { useSnapshot } from "valtio/react"
 import { Center, Layout, ParadigmProvider, Text } from "@code-glue/paradigm"
 import { glueDesignConfig } from "@/design/design.config"
 import { store } from "@/store"
+import { settingsStore } from "@/store/settings"
 import { Content } from "./Content"
 import { Nav } from "./Nav"
 
@@ -12,6 +13,7 @@ export const Frame = () => {
 		isReady: storeIsReady,
 		apiStatus: { typesReady },
 	} = useSnapshot(store)
+	const { appTheme } = useSnapshot(settingsStore)
 
 	const [fontsLoaded, setFontsLoaded] = useState(false)
 
@@ -25,7 +27,10 @@ export const Frame = () => {
 		fontsLoaded && storeIsReady && (typesReady || store.serverError)
 
 	return (
-		<ParadigmProvider config={glueDesignConfig}>
+		<ParadigmProvider
+			config={glueDesignConfig}
+			{...(appTheme !== undefined ? { theme: appTheme } : {})}
+		>
 			{!appReady ? (
 				<Center fillContainer>
 					<Text>Loading...</Text>