claudeup 4.6.1 → 4.7.0

package/src/ui/state/DimensionsContext.js

@@ -21,9 +21,9 @@ function calculateDimensions(columns, rows, showProgress, showDebug, showUpdateB
     contentHeight = Math.max(10, contentHeight); // Minimum 10 lines for full layout
     // Calculate available content width (accounting for padding)
     const contentWidth = Math.max(40, terminalWidth - 4);
-    // Calculate list panel height for ScrollableList
+    // Calculate list panel height for scrollbox
     // ScreenLayout uses: panelHeight = contentHeight - 4 (header) - 1 (footer)
-    // The ScrollableList sits inside the panel
+    // The scrollbox sits inside the panel
     const listPanelHeight = Math.max(3, contentHeight - SCREEN_HEADER_HEIGHT - SCREEN_FOOTER_HEIGHT);
     return {
         terminalWidth,

package/src/ui/state/DimensionsContext.tsx

@@ -10,7 +10,7 @@ interface Dimensions {
 	contentHeight: number;
 	/** Available width for content (excluding borders, padding) */
 	contentWidth: number;
-	/** Available lines for ScrollableList in list panels */
+	/** Available lines for scrollbox in list panels */
 	listPanelHeight: number;
 }
 
@@ -52,9 +52,9 @@ function calculateDimensions(
 	// Calculate available content width (accounting for padding)
 	const contentWidth = Math.max(40, terminalWidth - 4);
 
-	// Calculate list panel height for ScrollableList
+	// Calculate list panel height for scrollbox
 	// ScreenLayout uses: panelHeight = contentHeight - 4 (header) - 1 (footer)
-	// The ScrollableList sits inside the panel
+	// The scrollbox sits inside the panel
 	const listPanelHeight = Math.max(
 		3,
 		contentHeight - SCREEN_HEADER_HEIGHT - SCREEN_FOOTER_HEIGHT,

package/src/ui/components/ScrollableDetail.js

@@ -1,23 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
-import { useState, useEffect } from "react";
-/**
- * A scrollable detail panel that renders an array of lines
- * with automatic scroll tracking. When content exceeds maxHeight,
- * it shows a scroll indicator and clips to fit.
- */
-export function ScrollableDetail({ lines, maxHeight, scrollTrigger = 0, }) {
-    const [scrollOffset, setScrollOffset] = useState(0);
-    // Reset scroll when content changes (new item selected)
-    useEffect(() => {
-        setScrollOffset(0);
-    }, [scrollTrigger]);
-    const totalLines = lines.length;
-    const visibleLines = Math.max(1, maxHeight - 1); // -1 for scroll indicator
-    const canScroll = totalLines > visibleLines;
-    const maxOffset = Math.max(0, totalLines - visibleLines);
-    const clampedOffset = Math.min(scrollOffset, maxOffset);
-    const visibleContent = lines.slice(clampedOffset, clampedOffset + visibleLines);
-    const scrollUp = clampedOffset > 0;
-    const scrollDown = clampedOffset < maxOffset;
-    return (_jsxs("box", { flexDirection: "column", children: [scrollUp && (_jsx("box", { children: _jsxs("text", { fg: "cyan", children: ["\u2191 ", clampedOffset, " more"] }) })), visibleContent, scrollDown && (_jsx("box", { children: _jsxs("text", { fg: "cyan", children: ["\u2193 ", totalLines - clampedOffset - visibleLines, " more"] }) }))] }));
-}

package/src/ui/components/ScrollableDetail.tsx

@@ -1,55 +0,0 @@
-import React, { useState, useEffect } from "react";
-
-interface ScrollableDetailProps {
-	/** Array of content lines to display */
-	lines: React.ReactNode[];
-	/** Maximum visible height */
-	maxHeight: number;
-	/** External scroll trigger — changes when list selection changes */
-	scrollTrigger?: number;
-}
-
-/**
- * A scrollable detail panel that renders an array of lines
- * with automatic scroll tracking. When content exceeds maxHeight,
- * it shows a scroll indicator and clips to fit.
- */
-export function ScrollableDetail({
-	lines,
-	maxHeight,
-	scrollTrigger = 0,
-}: ScrollableDetailProps) {
-	const [scrollOffset, setScrollOffset] = useState(0);
-
-	// Reset scroll when content changes (new item selected)
-	useEffect(() => {
-		setScrollOffset(0);
-	}, [scrollTrigger]);
-
-	const totalLines = lines.length;
-	const visibleLines = Math.max(1, maxHeight - 1); // -1 for scroll indicator
-	const canScroll = totalLines > visibleLines;
-	const maxOffset = Math.max(0, totalLines - visibleLines);
-	const clampedOffset = Math.min(scrollOffset, maxOffset);
-
-	const visibleContent = lines.slice(clampedOffset, clampedOffset + visibleLines);
-
-	const scrollUp = clampedOffset > 0;
-	const scrollDown = clampedOffset < maxOffset;
-
-	return (
-		<box flexDirection="column">
-			{scrollUp && (
-				<box>
-					<text fg="cyan">↑ {clampedOffset} more</text>
-				</box>
-			)}
-			{visibleContent}
-			{scrollDown && (
-				<box>
-					<text fg="cyan">↓ {totalLines - clampedOffset - visibleLines} more</text>
-				</box>
-			)}
-		</box>
-	);
-}