From 108ac6621caf7d827a237a885b153f61c9a1d50e Mon Sep 17 00:00:00 2001 From: Sandro Date: Fri, 30 Oct 2026 16:12:36 +0100 Subject: [PATCH 1/4] fix(themes): improve contrast for code blocks and callouts in light theme --- CHANGELOG.md | 3 +++ frontend/src/index.css | 4 ++-- frontend/src/themes/theme-light.css | 24 ++++++++++++------------ 3 files changed, 17 insertions(+), 14 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 74666f9..d5806f1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,9 @@ Das Format folgt [Keep a Changelog](https://keepachangelog.com/de/1.1.0/), die V ## [Unreleased] +### Fixed +- Light-Theme: Kontraste für Code-Blöcke (`--bg-code`), Callouts (`--bg-panel-elevated`), Zitate und Rahmen auf Notizhintergründen geschärft; VS Code Light+ Syntaxfarben für hohe Lesbarkeit optimiert. + ## [0.8.0] - 2026-10-30 ### Added diff --git a/frontend/src/index.css b/frontend/src/index.css index c413f42..75839b8 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -429,11 +429,11 @@ body { --code-keyword: #0000ff; --code-string: #a31515; --code-number: #098658; - --code-comment: #008000; + --code-comment: #007000; --code-property: #0451a5; --code-function: #795e26; --code-type: #267f99; - --code-punctuation: #3b3b3b; + --code-punctuation: #2e2e2e; --code-variable: #001080; } diff --git a/frontend/src/themes/theme-light.css b/frontend/src/themes/theme-light.css index 9d5cb1e..a1539aa 100644 --- a/frontend/src/themes/theme-light.css +++ b/frontend/src/themes/theme-light.css @@ -14,24 +14,24 @@ /* --- 2. OBERFLÄCHEN & HINTERGRÜNDE --- */ --bg-app: #f3f4f6; --bg-panel: #ffffff; - --bg-panel-elevated: #ebedf0; - --bg-panel-hover: #e2e5ea; + --bg-panel-elevated: #e2e8f0; + --bg-panel-hover: #cbd5e1; --bg-input: #ffffff; --bg-overlay: rgba(15, 23, 42, 0.45); - --bg-code: #f1f5f9; + --bg-code: #e2e8f0; /* --- 3. TEXT & KONTRASTE --- */ --text-main: #111827; - --text-muted: #4b5563; - --text-faint: #9ca3af; + --text-muted: #374151; + --text-faint: #6b7280; /* --- 4. RAHMEN, LINIEN & SCHATTEN --- */ - --border-color: rgba(17, 24, 39, 0.13); - --border-subtle: rgba(17, 24, 39, 0.06); - --border-strong: rgba(17, 24, 39, 0.28); + --border-color: rgba(17, 24, 39, 0.18); + --border-subtle: rgba(17, 24, 39, 0.08); + --border-strong: rgba(17, 24, 39, 0.32); --shadow-panel: 0 8px 24px rgba(15, 23, 42, 0.08); - --scrollbar-thumb: rgba(17, 24, 39, 0.18); - --scrollbar-thumb-hover: rgba(17, 24, 39, 0.32); + --scrollbar-thumb: rgba(17, 24, 39, 0.22); + --scrollbar-thumb-hover: rgba(17, 24, 39, 0.38); /* --- 5. STATUS- & SIGNALFARBEN --- */ --color-success: #15803d; @@ -57,10 +57,10 @@ --code-keyword: #0000ff; --code-string: #a31515; --code-number: #098658; - --code-comment: #008000; + --code-comment: #007000; --code-property: #0451a5; --code-function: #795e26; --code-type: #267f99; - --code-punctuation: #3b3b3b; + --code-punctuation: #2e2e2e; --code-variable: #001080; } From 1d6863824b970302ae83dfa094592562c3f0ba5c Mon Sep 17 00:00:00 2001 From: Sandro Date: Fri, 30 Oct 2026 16:17:17 +0100 Subject: [PATCH 2/4] feat(workspace): add line numbers and horizontal scrolling to code block editor --- CHANGELOG.md | 3 + .../features/workspace/CodeBlockEditor.tsx | 112 ++++++++++++------ .../__tests__/CodeBlockEditor.test.tsx | 51 ++++++++ 3 files changed, 132 insertions(+), 34 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d5806f1..c64506c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,9 @@ Das Format folgt [Keep a Changelog](https://keepachangelog.com/de/1.1.0/), die V ## [Unreleased] +### Added +- Code-Blöcke: Zeilennummernspalte links mit synchronem Scrollen (wächst dynamisch bei 100+ Zeilen, zählt auch leere Endzeilen mit); horizontaler Bildlauf bei langen Zeilen ohne automatischen Zeilenumbruch (`white-space: pre`). + ### Fixed - Light-Theme: Kontraste für Code-Blöcke (`--bg-code`), Callouts (`--bg-panel-elevated`), Zitate und Rahmen auf Notizhintergründen geschärft; VS Code Light+ Syntaxfarben für hohe Lesbarkeit optimiert. diff --git a/frontend/src/features/workspace/CodeBlockEditor.tsx b/frontend/src/features/workspace/CodeBlockEditor.tsx index 8f314b7..c4e436b 100644 --- a/frontend/src/features/workspace/CodeBlockEditor.tsx +++ b/frontend/src/features/workspace/CodeBlockEditor.tsx @@ -347,6 +347,7 @@ export const CodeBlockEditor: React.FC = ({ const copyTimerRef = useRef(null); const localTextareaRef = useRef(null); const preRef = useRef(null); + const lineNumbersRef = useRef(null); useEffect(() => { return () => { @@ -506,18 +507,42 @@ export const CodeBlockEditor: React.FC = ({ }; const handleScroll = (e: React.UIEvent) => { + const target = e.currentTarget; if (preRef.current) { - preRef.current.scrollTop = e.currentTarget.scrollTop; - preRef.current.scrollLeft = e.currentTarget.scrollLeft; + preRef.current.scrollTop = target.scrollTop; + preRef.current.scrollLeft = target.scrollLeft; + } + if (lineNumbersRef.current) { + lineNumbersRef.current.scrollTop = target.scrollTop; } }; + const handleLineNumbersScroll = (e: React.UIEvent) => { + const target = e.currentTarget; + if (localTextareaRef.current) { + localTextareaRef.current.scrollTop = target.scrollTop; + } + if (preRef.current) { + preRef.current.scrollTop = target.scrollTop; + } + }; + + const handleLineNumbersWheel = (e: React.WheelEvent) => { + if (localTextareaRef.current) { + localTextareaRef.current.scrollTop += e.deltaY; + } + }; + + const lineCount = useMemo(() => { + return currentContent.split('\n').length; + }, [currentContent]); + const rawLang = block.lang || ''; const selectValue = rawLang ? resolveLanguageId(rawLang) || rawLang : ''; const hasCustomUnknownLang = Boolean(selectValue && !KNOWN_OPTION_IDS.has(selectValue)); return ( -
+
{/* Code Block Header */}
@@ -584,41 +609,60 @@ export const CodeBlockEditor: React.FC = ({
- {/* Live Highlighted Overlay + Textarea */} -
-
+        {/* Line Numbers Column */}
+        
+
+        {/* Code Content (Overlay + Textarea) */}
+        
+ +