chad-code 1.3.1

package/src/cli/cmd/tui/component/dialog-theme-list.tsx

@@ -0,0 +1,50 @@
+import { DialogSelect, type DialogSelectRef } from "../ui/dialog-select"
+import { useTheme } from "../context/theme"
+import { useDialog } from "../ui/dialog"
+import { onCleanup, onMount } from "solid-js"
+
+export function DialogThemeList() {
+  const theme = useTheme()
+  const options = Object.keys(theme.all())
+    .sort((a, b) => a.localeCompare(b, undefined, { sensitivity: "base" }))
+    .map((value) => ({
+      title: value,
+      value: value,
+    }))
+  const dialog = useDialog()
+  let confirmed = false
+  let ref: DialogSelectRef<string>
+  const initial = theme.selected
+
+  onCleanup(() => {
+    if (!confirmed) theme.set(initial)
+  })
+
+  return (
+    <DialogSelect
+      title="Themes"
+      options={options}
+      current={initial}
+      onMove={(opt) => {
+        theme.set(opt.value)
+      }}
+      onSelect={(opt) => {
+        theme.set(opt.value)
+        confirmed = true
+        dialog.clear()
+      }}
+      ref={(r) => {
+        ref = r
+      }}
+      onFilter={(query) => {
+        if (query.length === 0) {
+          theme.set(initial)
+          return
+        }
+
+        const first = ref.filtered[0]
+        if (first) theme.set(first.value)
+      }}
+    />
+  )
+}

package/src/cli/cmd/tui/component/did-you-know.tsx

@@ -0,0 +1,85 @@
+import { createMemo, createSignal, For } from "solid-js"
+import { useTheme } from "@tui/context/theme"
+import { useKeybind } from "@tui/context/keybind"
+import { TIPS } from "./tips"
+import { EmptyBorder } from "./border"
+
+type TipPart = { text: string; highlight: boolean }
+
+function parseTip(tip: string): TipPart[] {
+  const parts: TipPart[] = []
+  const regex = /\{highlight\}(.*?)\{\/highlight\}/g
+  let lastIndex = 0
+  let match
+
+  while ((match = regex.exec(tip)) !== null) {
+    if (match.index > lastIndex) {
+      parts.push({ text: tip.slice(lastIndex, match.index), highlight: false })
+    }
+    parts.push({ text: match[1], highlight: true })
+    lastIndex = regex.lastIndex
+  }
+
+  if (lastIndex < tip.length) {
+    parts.push({ text: tip.slice(lastIndex), highlight: false })
+  }
+
+  return parts
+}
+
+const [tipIndex, setTipIndex] = createSignal(Math.floor(Math.random() * TIPS.length))
+
+export function randomizeTip() {
+  setTipIndex(Math.floor(Math.random() * TIPS.length))
+}
+
+const BOX_WIDTH = 42
+const TITLE = " 🅘 Did you know? "
+
+export function DidYouKnow() {
+  const { theme } = useTheme()
+  const keybind = useKeybind()
+
+  const tipParts = createMemo(() => parseTip(TIPS[tipIndex()]))
+
+  const dashes = createMemo(() => {
+    // ╭─ + title + ─...─ + ╮ = BOX_WIDTH
+    // 1 + 1 + title.length + dashes + 1 = BOX_WIDTH
+    return Math.max(0, BOX_WIDTH - 2 - TITLE.length - 1)
+  })
+
+  return (
+    <box position="absolute" bottom={3} right={2} width={BOX_WIDTH}>
+      <text>
+        <span style={{ fg: theme.border }}>╭─</span>
+        <span style={{ fg: theme.text }}>{TITLE}</span>
+        <span style={{ fg: theme.border }}>{"─".repeat(dashes())}╮</span>
+      </text>
+      <box
+        border={["left", "right", "bottom"]}
+        borderColor={theme.border}
+        customBorderChars={{
+          ...EmptyBorder,
+          bottomLeft: "╰",
+          bottomRight: "╯",
+          horizontal: "─",
+          vertical: "│",
+        }}
+      >
+        <box paddingLeft={2} paddingRight={2} paddingTop={1} paddingBottom={1}>
+          <text>
+            <For each={tipParts()}>
+              {(part) => <span style={{ fg: part.highlight ? theme.text : theme.textMuted }}>{part.text}</span>}
+            </For>
+          </text>
+        </box>
+      </box>
+      <box flexDirection="row" justifyContent="flex-end">
+        <text>
+          <span style={{ fg: theme.text }}>{keybind.print("tips_toggle")}</span>
+          <span style={{ fg: theme.textMuted }}> hide tips</span>
+        </text>
+      </box>
+    </box>
+  )
+}

package/src/cli/cmd/tui/component/logo.tsx

@@ -0,0 +1,43 @@
+import { TextAttributes } from "@opentui/core"
+import { For } from "solid-js"
+import { useTheme } from "@tui/context/theme"
+
+const LOGO_LEFT = [
+  `    ░▒▓██▓▒░      `,
+  `  ░▓████████▓░    `,
+  ` ▓██▀▀░░░░▀▀██▓   `,
+  ` ██░ ▀░░░▀ ░██▓   `,
+  ` ▓██░░▄▄▄░░██▓    `,
+  `  ░▓██████▓░      `,
+  `    ░▓▓▓▓░        `,
+]
+
+const LOGO_RIGHT = [
+  `                       `,
+  ` █▀▀▀ █░░█ █▀▀█ █▀▀▄  `,
+  ` █░░░ █▀▀█ █▄▄█ █░░█  `,
+  ` ▀▀▀▀ ▀░░▀ ▀░░▀ ▀▀▀░  `,
+  ` █▀▀▀ █▀▀█ █▀▀▄ █▀▀▀  `,
+  ` █░░░ █░░█ █░░█ █▀▀▀  `,
+  ` ▀▀▀▀ ▀▀▀▀ ▀▀▀░ ▀▀▀▀  `,
+]
+
+export function Logo() {
+  const { theme } = useTheme()
+  return (
+    <box>
+      <For each={LOGO_LEFT}>
+        {(line, index) => (
+          <box flexDirection="row" gap={1}>
+            <text fg={theme.textMuted} selectable={false}>
+              {line}
+            </text>
+            <text fg={theme.text} attributes={TextAttributes.BOLD} selectable={false}>
+              {LOGO_RIGHT[index()]}
+            </text>
+          </box>
+        )}
+      </For>
+    </box>
+  )
+}