Skip to content

Commit 897f82f

Browse files
authored
fix: prevent header duplication on terminal resize (#53)
Use React Ink's Static component to render the header only once, preventing duplicate text display when the terminal window is resized. Fixes #50
1 parent 343b45f commit 897f82f

File tree

1 file changed

+17
-7
lines changed

1 file changed

+17
-7
lines changed

src/App.tsx

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { StatusMessage } from '@inkjs/ui';
2-
import { Box, Text } from 'ink';
2+
import { Box, Static, Text } from 'ink';
33
import type React from 'react';
44
import { useMemo } from 'react';
55
import type { CliOptions } from './_types.js';
@@ -84,12 +84,22 @@ export function App({ cliOptions }: AppProps): React.JSX.Element {
8484
return (
8585
<ErrorBoundary>
8686
<Box flexDirection="column" width="100%" height="100%">
87-
<Box paddingX={1} paddingY={0} borderStyle="single" borderBottom={true}>
88-
<Text bold color={theme.ui.appTitle}>
89-
ccexp
90-
</Text>
91-
<Text dimColor> | Interactive File Browser</Text>
92-
</Box>
87+
<Static items={[{ id: 'header' }]}>
88+
{() => (
89+
<Box
90+
key="header"
91+
paddingX={1}
92+
paddingY={0}
93+
borderStyle="single"
94+
borderBottom={true}
95+
>
96+
<Text bold color={theme.ui.appTitle}>
97+
ccexp
98+
</Text>
99+
<Text dimColor> | Interactive File Browser</Text>
100+
</Box>
101+
)}
102+
</Static>
93103

94104
<Box flexGrow={1}>
95105
<SplitPane

0 commit comments

Comments
 (0)