fix scroll

Author: hate

apps/web/src/App.tsx

@@ -39,6 +39,7 @@ export default function App() {
   const [customPrompts, setCustomPrompts] = useState<PromptPackItem[]>([]);
   const [isCustomDialogOpen, setCustomDialogOpen] = useState(false);
   const [editingPrompt, setEditingPrompt] = useState<PromptPackItem | null>(null);
+  const [isTyping, setIsTyping] = useState(false);
 
   const targetSnippet = useSessionStore((state) => state.targetSnippet);
   const typed = useSessionStore((state) => state.typed);
@@ -55,6 +56,7 @@ export default function App() {
   const setSyntaxThemeId = useSyntaxThemeStore((state) => state.setThemeId);
 
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const typingTimeoutRef = useRef<NodeJS.Timeout>();
 
   // Load custom prompts on mount
   useEffect(() => {
@@ -159,6 +161,14 @@ export default function App() {
     if (isExplorerOpen) {
       closeExplorer();
     }
+
+    setIsTyping(true);
+    if (typingTimeoutRef.current) {
+      clearTimeout(typingTimeoutRef.current);
+    }
+    typingTimeoutRef.current = setTimeout(() => {
+      setIsTyping(false);
+    }, 1000);
   }, [closeExplorer, isExplorerOpen]);
 
   const { setPendingPrompt } = usePendingPromptSwitch(selectedLanguage, applyPromptSelection);
@@ -219,7 +229,7 @@ export default function App() {
                 />
 
                 <div className={appStyles.windowBody}>
-                  <div className={appStyles.editorColumn}>
+                  <div className={`${appStyles.editorColumn}${isTyping ? " is-typing" : ""}`}>
                     <div className={appStyles.editorInner}>
                       <EditorSurface
                         textareaRef={textareaRef}

apps/web/src/app/App.styles.ts

@@ -10,8 +10,8 @@ export const appStyles = {
   windowFullscreen:
     `fixed inset-0 z-30 m-0 flex h-screen w-screen min-h-0 flex-col overflow-hidden rounded-none shadow-none ${uiTokens.glassSurface} text-white`,
   windowBody: "relative flex flex-1 flex-col min-h-0 overflow-hidden",
-  editorColumn: "flex flex-1 min-h-0 overflow-auto",
-  editorInner: "flex-1 min-h-0 overflow-auto",
+  editorColumn: "flex flex-1 min-h-0 overflow-auto scrollbar-auto-hide",
+  editorInner: "flex-1 min-h-0",
   explorerPane: (open: boolean) =>
     `absolute top-0 right-0 bottom-0 transform transition-transform duration-300 ease-out will-change-transform backdrop-blur-2xl backdrop-saturate-150 ${open ? "translate-x-0 pointer-events-auto" : "translate-x-full pointer-events-none"
     }`,

apps/web/src/features/editor/components/EditorSurface.styles.ts

@@ -1,7 +1,7 @@
 export const editorStyles = {
   container:
     "relative bg-[length:100px_100px] bg-[radial-gradient(circle,_rgba(255,255,255,0.015)_1px,_transparent_1px)]",
-  inner: "py-10",
+  inner: "pt-10 pb-96",
   textarea:
     "absolute inset-0 h-full w-full resize-none opacity-0",
 };

apps/web/src/features/editor/components/TypingFeedback.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { motion } from "framer-motion";
 import { feedbackClass, type CharacterFeedback } from "../../../shared/feedback/feedback";
 import { getSyntaxColorClass, getTokenTypeAtIndex, type SyntaxToken } from "../../../shared/syntax/syntax";
@@ -23,6 +23,8 @@ export function TypingFeedback({
   fontSize,
   syntaxThemeId,
 }: TypingFeedbackProps) {
+  const activeCursorRef = useRef<HTMLSpanElement>(null);
+
   const lineCount = useMemo(() => {
     let count = 1;
     feedback.forEach((item) => {
@@ -33,6 +35,38 @@ export function TypingFeedback({
     return count;
   }, [feedback]);
 
+  useEffect(() => {
+    if (activeCursorRef.current) {
+      const element = activeCursorRef.current;
+      const container = element.closest('.scrollbar-auto-hide') as HTMLElement;
+
+      if (container) {
+        const rect = element.getBoundingClientRect();
+        const containerRect = container.getBoundingClientRect();
+
+        // Only scroll down if cursor is below viewport, never scroll up
+        const buffer = 100; // pixels from bottom before triggering scroll
+        const isBelowView = rect.bottom > containerRect.bottom - buffer;
+
+        if (isBelowView) {
+          // Calculate position to keep cursor visible with buffer from bottom
+          const relativeTop = rect.top - containerRect.top + container.scrollTop;
+          const elementHeight = rect.height;
+          const containerHeight = container.clientHeight;
+
+          // Position cursor at 2/3 down the viewport (not centered, keeps more context above)
+          const targetPosition = containerHeight * 0.66;
+          const scrollTop = relativeTop - targetPosition + (elementHeight / 2);
+
+          // Only scroll if we need to go down
+          if (scrollTop > container.scrollTop) {
+            container.scrollTop = scrollTop;
+          }
+        }
+      }
+    }
+  }, [typedLength]);
+
   return (
     <div className={typingFeedbackStyles.wrapper}>
       <div
@@ -60,6 +94,7 @@ export function TypingFeedback({
               return (
                 <span
                   key={item.index}
+                  ref={isActive ? activeCursorRef : undefined}
                   className={typingFeedbackStyles.pendingSpan(syntaxClass)}
                 >
                   {item.char}
@@ -82,6 +117,7 @@ export function TypingFeedback({
             return (
               <span
                 key={item.index}
+                ref={isActive ? activeCursorRef : undefined}
                 className={typingFeedbackStyles.typedSpan(syntaxClass, decorationClass)}
                 title={
                   item.typed && item.typed !== item.char

apps/web/src/styles.css

@@ -30,3 +30,46 @@ body::before {
   position: relative;
   z-index: 1;
 }
+
+/* Auto-hiding scrollbars */
+.scrollbar-auto-hide {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+  transition: scrollbar-color 0.3s ease;
+}
+
+.scrollbar-auto-hide:hover {
+  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
+}
+
+/* Hide scrollbar when typing, even on hover */
+.scrollbar-auto-hide.is-typing {
+  scrollbar-color: transparent transparent !important;
+}
+
+.scrollbar-auto-hide::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.scrollbar-auto-hide::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.scrollbar-auto-hide::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 4px;
+  transition: background-color 0.3s ease;
+}
+
+.scrollbar-auto-hide:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.scrollbar-auto-hide.is-typing::-webkit-scrollbar-thumb {
+  background-color: transparent !important;
+}
+
+.scrollbar-auto-hide::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(255, 255, 255, 0.3);
+}