From 1e695b7214b720f7f5997bb4ad090c22d6e987be Mon Sep 17 00:00:00 2001
From: Chiri Vulpes <chiri@chiri.works>
Date: Tue, 29 Oct 2024 16:36:09 +1300
Subject: [PATCH] Text Editor: Fix proxy scrollbar blur causing hard corners,
 fix proxy scrollbar not updating on zoom

---
 src/ui/component/core/TextEditor.ts | 13 +++++++++----
 style/component/text-editor.chiri   |  4 +++-
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/ui/component/core/TextEditor.ts b/src/ui/component/core/TextEditor.ts
index e858844..477d351 100644
--- a/src/ui/component/core/TextEditor.ts
+++ b/src/ui/component/core/TextEditor.ts
@@ -30,6 +30,7 @@ import Popover from "ui/component/core/Popover"
 import RadioButton from "ui/component/core/RadioButton"
 import Slot from "ui/component/core/Slot"
 import type { Quilt } from "ui/utility/TextManipulator"
+import Viewport from "ui/utility/Viewport"
 import ViewTransition from "ui/view/component/ViewTransition"
 import Arrays from "utility/Arrays"
 import Define from "utility/Define"
@@ -1240,17 +1241,21 @@ const TextEditor = Component.Builder((component): TextEditor => {
 		})
 		.appendTo(actualEditor)
 
+	const contentWidth = State.Generator(() => `${editor.document?.element.scrollWidth ?? 0}px`)
+		.observe(component, state, Viewport.size)
+
 	const scrollbarProxy: Component = Component()
 		.style("text-editor-document-scrollbar-proxy")
 		.style.bind(isFullscreen, "text-editor-document-scrollbar-proxy--fullscreen")
-		.style.bindVariable("content-width",
-			state.map(component, () => `${editor.document?.element.scrollWidth ?? 0}px`))
+		.style.bind(contentWidth.map(component, () => (editor.document?.element.scrollWidth ?? 0) > (editor.document?.rect.value.width ?? 0)), "text-editor-document-scrollbar-proxy--visible")
+		.style.bindVariable("content-width", contentWidth)
 		.event.subscribe("scroll", () =>
 			editor.document?.element.scrollTo({ left: scrollbarProxy.element.scrollLeft, behavior: "instant" }))
 		.appendTo(actualEditor)
 
-	documentSlot.style.bindVariable("content-width",
-		state.map(component, () => `${documentSlot.element.scrollWidth ?? 0}px`))
+	const fullscreenContentWidth = State.Generator(() => `${documentSlot.element.scrollWidth ?? 0}px`)
+		.observe(component, state, Viewport.size)
+	documentSlot.style.bindVariable("content-width", fullscreenContentWidth)
 
 	state.use(editor, state => {
 		const name = editor.document?.name.value
diff --git a/style/component/text-editor.chiri b/style/component/text-editor.chiri
index c02cd50..4f9c738 100644
--- a/style/component/text-editor.chiri
+++ b/style/component/text-editor.chiri
@@ -291,7 +291,6 @@
 			%sticky
 			%bottom-0
 			%overflow-auto-x
-			%backdrop-blur
 			%border-bottom-radius-1
 			scrollbar-colour: $colour-5 transparent
 			@before:
@@ -305,6 +304,9 @@
 			&--fullscreen:
 				%hidden
 
+			&--visible:
+				%backdrop-blur
+
 	&--required:
 
 .text-editor: