refact: ink based terminal view (#17)

src/cli/ui/ui.tsx

@@ -0,0 +1,69 @@
+import { Box, render, Text, useApp, useInput } from "ink"
+import { ScrollableMarkdown } from './components/scrollable-markdown.js';
+import { useStateValue, State, StateProvider } from './state/state.js';
+import { useEffect, useState } from "react";
+import { useTerminalHeight } from "./hooks/terminal.js";
+
+const MarkdownView = () => {
+  const markdown = useStateValue((state) => state.markdown);
+  const error = useStateValue((state) => state.error);
+
+  return (
+    <Box flexGrow={1} flexDirection="column">
+      <Box flexDirection="column" flexGrow={1} overflow="hidden">
+        <ScrollableMarkdown markdownContent={markdown} />
+      </Box>
+      {error && (
+        <Box flexDirection="column" padding={1}>
+          <Text color="red">{error}</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+const App = () => {
+  const { exit } = useApp();
+  const height = useTerminalHeight();
+  useInput((_input, key) => {
+    if (key.escape) {
+      process.exit(0);
+    }
+  });
+  useEffect(
+    () => {
+      const enterAltScreenCommand = "\x1b[?1049h";
+      const leaveAltScreenCommand = "\x1b[?1049l";
+      process.stdout.write(enterAltScreenCommand);
+      const onExit = () => {
+        exit();
+        process.stdout.write(leaveAltScreenCommand);
+      }
+      process.on("exit", onExit);
+      return () => {
+        process.stdout.write(leaveAltScreenCommand);
+        process.off("exit", onExit);
+      }
+    }, []
+  );
+
+  return (
+    <Box height={height} flexDirection="column">
+      <MarkdownView />
+      <Box>
+        <Text>Press esc to exit</Text>
+      </Box>
+    </Box>
+  )
+}
+
+const renderUI = (state: State) => {
+
+  render(
+    <StateProvider state={state}>
+      <App />
+    </StateProvider>
+  );
+}
+
+export { renderUI, State }