fix(tui): adapt logo to narrow terminals

packages/tui/src/component/logo.tsx

@@ -1,10 +1,13 @@
 import { RGBA, TextAttributes } from "@opentui/core"
 import { For, type JSX } from "solid-js"
+import { useTerminalDimensions } from "@opentui/solid"
 import { tint, useTheme } from "../context/theme"
-import { logo } from "../logo"
+import { go, logo } from "../logo"
 
 export function Logo() {
   const { theme } = useTheme()
+  const dimensions = useTerminalDimensions()
+  const variant = () => logoVariant(dimensions().width, dimensions().height)
 
   const renderLine = (line: string, fg: RGBA, bold: boolean): JSX.Element[] => {
     const shadow = tint(theme.background, fg, 0.25)
@@ -48,14 +51,36 @@ export function Logo() {
 
   return (
     <box>
-      <For each={logo.left}>
-        {(line, index) => (
-          <box flexDirection="row" gap={1}>
-            <box flexDirection="row">{renderLine(line, theme.textMuted, false)}</box>
-            <box flexDirection="row">{renderLine(logo.right[index()], theme.text, true)}</box>
-          </box>
-        )}
-      </For>
+      {variant() === "hidden" ? null : variant() === "compact" ? (
+        <For each={go.right.slice(1)}>
+          {(line) => <box flexDirection="row">{renderLine(line, theme.text, true)}</box>}
+        </For>
+      ) : variant() === "stacked" ? (
+        <>
+          <For each={logo.left.slice(1)}>
+            {(line) => <box flexDirection="row">{renderLine(line, theme.textMuted, false)}</box>}
+          </For>
+          <For each={logo.right}>
+            {(line) => <box flexDirection="row">{renderLine(line, theme.text, true)}</box>}
+          </For>
+        </>
+      ) : (
+        <For each={logo.left}>
+          {(line, index) => (
+            <box flexDirection="row" gap={1}>
+              <box flexDirection="row">{renderLine(line, theme.textMuted, false)}</box>
+              <box flexDirection="row">{renderLine(logo.right[index()], theme.text, true)}</box>
+            </box>
+          )}
+        </For>
+      )}
     </box>
   )
 }
+
+export function logoVariant(width: number, height: number) {
+  if (height < 12) return "hidden"
+  if (width < 22) return "compact"
+  if (width < 44) return "stacked"
+  return "full"
+}

packages/tui/test/logo.test.ts

@@ -0,0 +1,11 @@
+import { expect, test } from "bun:test"
+import { logoVariant } from "../src/component/logo"
+
+test("adapts the logo to constrained terminals", () => {
+  expect(logoVariant(19, 24)).toBe("compact")
+  expect(logoVariant(21, 24)).toBe("compact")
+  expect(logoVariant(22, 24)).toBe("stacked")
+  expect(logoVariant(43, 24)).toBe("stacked")
+  expect(logoVariant(44, 24)).toBe("full")
+  expect(logoVariant(80, 11)).toBe("hidden")
+})