codeblog-app 1.5.1 → 1.5.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "codeblog-app",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "description": "CLI client for CodeBlog — the forum where AI writes the posts",
   "type": "module",
   "license": "MIT",
@@ -56,11 +56,11 @@
     "typescript": "5.8.2"
   },
   "optionalDependencies": {
-    "codeblog-app-darwin-arm64": "1.5.1",
-    "codeblog-app-darwin-x64": "1.5.1",
-    "codeblog-app-linux-arm64": "1.5.1",
-    "codeblog-app-linux-x64": "1.5.1",
-    "codeblog-app-windows-x64": "1.5.1"
+    "codeblog-app-darwin-arm64": "1.5.2",
+    "codeblog-app-darwin-x64": "1.5.2",
+    "codeblog-app-linux-arm64": "1.5.2",
+    "codeblog-app-linux-x64": "1.5.2",
+    "codeblog-app-windows-x64": "1.5.2"
   },
   "dependencies": {
     "@ai-sdk/amazon-bedrock": "^4.0.60",

package/src/tui/app.tsx

@@ -5,7 +5,7 @@ import { ExitProvider, useExit } from "./context/exit"
 import { ThemeProvider, useTheme } from "./context/theme"
 import { Home } from "./routes/home"
 import { Chat } from "./routes/chat"
-import { ThemeSetup } from "./routes/setup"
+import { ThemeSetup, ThemePicker } from "./routes/setup"
 
 import pkg from "../../package.json"
 const VERSION = pkg.version
@@ -123,6 +123,9 @@ function App() {
         <Match when={route.data.type === "chat"}>
           <Chat />
         </Match>
+        <Match when={route.data.type === "theme"}>
+          <ThemePicker onDone={() => route.navigate({ type: "home" })} />
+        </Match>
       </Switch>
 
       {/* Status bar */}

package/src/tui/context/route.tsx

@@ -8,7 +8,9 @@ export type SearchRoute = { type: "search"; query: string }
 export type TrendingRoute = { type: "trending" }
 export type NotificationsRoute = { type: "notifications" }
 
-export type Route = HomeRoute | ChatRoute | PostRoute | SearchRoute | TrendingRoute | NotificationsRoute
+export type ThemeRoute = { type: "theme" }
+
+export type Route = HomeRoute | ChatRoute | PostRoute | SearchRoute | TrendingRoute | NotificationsRoute | ThemeRoute
 
 export const { use: useRoute, provider: RouteProvider } = createSimpleContext({
   name: "Route",

package/src/tui/routes/home.tsx

@@ -2,7 +2,7 @@ import { createSignal, Show } from "solid-js"
 import { useKeyboard } from "@opentui/solid"
 import { useRoute } from "../context/route"
 import { useExit } from "../context/exit"
-import { useTheme, THEME_NAMES } from "../context/theme"
+import { useTheme } from "../context/theme"
 
 const LOGO = [
   "  ██████╗ ██████╗ ██████╗ ███████╗██████╗ ██╗      ██████╗  ██████╗ ",
@@ -82,30 +82,10 @@ export function Home(props: {
         return
       }
 
-      if (cmd === "/theme") {
-        const name = parts[1]
-        if (!name) {
-          showMsg(`Theme: ${theme.name} (${theme.mode}) | Available: ${THEME_NAMES.join(", ")}`, theme.colors.text)
-          return
-        }
-        if (THEME_NAMES.includes(name)) {
-          theme.set(name)
-          showMsg(`Theme set to ${name}`, theme.colors.success)
-        } else {
-          showMsg(`Unknown theme: ${name}. Available: ${THEME_NAMES.join(", ")}`, theme.colors.error)
-        }
-        return
-      }
-
-      if (cmd === "/dark") {
-        theme.setMode("dark")
-        showMsg("Switched to dark mode", theme.colors.success)
-        return
-      }
-
-      if (cmd === "/light") {
-        theme.setMode("light")
-        showMsg("Switched to light mode", theme.colors.success)
+      if (cmd === "/theme" || cmd === "/dark" || cmd === "/light") {
+        if (cmd === "/dark") theme.setMode("dark")
+        if (cmd === "/light") theme.setMode("light")
+        route.navigate({ type: "theme" })
         return
       }
 

package/src/tui/routes/setup.tsx

@@ -2,6 +2,14 @@ import { createSignal } from "solid-js"
 import { useKeyboard } from "@opentui/solid"
 import { useTheme, THEME_NAMES, THEMES } from "../context/theme"
 
+// High-contrast colors that are visible on ANY terminal background
+const HC = {
+  title: "#ff6600",
+  text: "#888888",
+  selected: "#00cc00",
+  dim: "#999999",
+}
+
 export function ThemeSetup() {
   const theme = useTheme()
   const modes = ["dark", "light"] as const
@@ -13,13 +21,11 @@ export function ThemeSetup() {
     if (step() === "mode") {
       if (evt.name === "up" || evt.name === "k") {
         setModeIdx((i) => (i - 1 + modes.length) % modes.length)
-        theme.setMode(modes[(modeIdx() - 1 + modes.length) % modes.length])
         evt.preventDefault()
         return
       }
       if (evt.name === "down" || evt.name === "j") {
         setModeIdx((i) => (i + 1) % modes.length)
-        theme.setMode(modes[(modeIdx() + 1) % modes.length])
         evt.preventDefault()
         return
       }
@@ -33,14 +39,16 @@ export function ThemeSetup() {
 
     if (step() === "theme") {
       if (evt.name === "up" || evt.name === "k") {
-        setThemeIdx((i) => (i - 1 + THEME_NAMES.length) % THEME_NAMES.length)
-        theme.set(THEME_NAMES[(themeIdx() - 1 + THEME_NAMES.length) % THEME_NAMES.length])
+        const next = (themeIdx() - 1 + THEME_NAMES.length) % THEME_NAMES.length
+        setThemeIdx(next)
+        theme.set(THEME_NAMES[next])
         evt.preventDefault()
         return
       }
       if (evt.name === "down" || evt.name === "j") {
-        setThemeIdx((i) => (i + 1) % THEME_NAMES.length)
-        theme.set(THEME_NAMES[(themeIdx() + 1) % THEME_NAMES.length])
+        const next = (themeIdx() + 1) % THEME_NAMES.length
+        setThemeIdx(next)
+        theme.set(THEME_NAMES[next])
         evt.preventDefault()
         return
       }
@@ -62,62 +70,62 @@ export function ThemeSetup() {
       <box flexGrow={1} minHeight={0} />
 
       <box flexShrink={0} flexDirection="column" alignItems="center">
-        <text fg={theme.colors.primary}>
-          <span style={{ bold: true }}>Welcome to CodeBlog</span>
+        <text fg={HC.title}>
+          <span style={{ bold: true }}>{"★ Welcome to CodeBlog ★"}</span>
         </text>
         <box height={1} />
-        <text fg={theme.colors.textMuted}>Let's set up your terminal theme</text>
-        <box height={1} />
       </box>
 
       {step() === "mode" ? (
         <box flexShrink={0} flexDirection="column" width="100%" maxWidth={50}>
-          <text fg={theme.colors.text}>
-            <span style={{ bold: true }}>Step 1: Is your terminal background dark or light?</span>
+          <text fg={HC.title}>
+            <span style={{ bold: true }}>{"What is your terminal background color?"}</span>
           </text>
           <box height={1} />
           {modes.map((m, i) => (
             <box flexDirection="row" paddingLeft={2}>
-              <text fg={modeIdx() === i ? theme.colors.primary : theme.colors.textMuted}>
+              <text fg={modeIdx() === i ? HC.selected : HC.dim}>
                 {modeIdx() === i ? "❯ " : "  "}
               </text>
-              <text fg={modeIdx() === i ? theme.colors.text : theme.colors.textMuted}>
+              <text fg={modeIdx() === i ? HC.selected : HC.dim}>
                 <span style={{ bold: modeIdx() === i }}>
-                  {m === "dark" ? "🌙 Dark background" : "☀️  Light background"}
+                  {m === "dark" ? "Dark background  (black/dark terminal)" : "Light background (white/light terminal)"}
                 </span>
               </text>
             </box>
           ))}
           <box height={1} />
-          <text fg={theme.colors.textMuted}>↑↓ to select · Enter to confirm</text>
+          <text fg={HC.text}>{"↑↓ select · Enter confirm"}</text>
         </box>
       ) : (
-        <box flexShrink={0} flexDirection="column" width="100%" maxWidth={50}>
+        <box flexShrink={0} flexDirection="column" width="100%" maxWidth={60}>
           <text fg={theme.colors.text}>
-            <span style={{ bold: true }}>Step 2: Choose a color theme</span>
+            <span style={{ bold: true }}>{"Choose a color theme:"}</span>
           </text>
           <box height={1} />
           {THEME_NAMES.map((name, i) => {
-            const def = THEMES[name]
-            const c = def[theme.mode]
+            const c = THEMES[name][theme.mode]
             return (
               <box flexDirection="row" paddingLeft={2}>
                 <text fg={themeIdx() === i ? c.primary : theme.colors.textMuted}>
                   {themeIdx() === i ? "❯ " : "  "}
                 </text>
                 <text fg={themeIdx() === i ? c.text : theme.colors.textMuted}>
-                  <span style={{ bold: themeIdx() === i }}>{name}</span>
+                  <span style={{ bold: themeIdx() === i }}>
+                    {name.padEnd(14)}
+                  </span>
                 </text>
                 <text fg={c.logo1}>{" ●"}</text>
                 <text fg={c.logo2}>{"●"}</text>
                 <text fg={c.primary}>{"●"}</text>
+                <text fg={c.accent}>{"●"}</text>
                 <text fg={c.success}>{"●"}</text>
                 <text fg={c.error}>{"●"}</text>
               </box>
             )
           })}
           <box height={1} />
-          <text fg={theme.colors.textMuted}>↑↓ to select · Enter to confirm · Esc to go back</text>
+          <text fg={theme.colors.textMuted}>{"↑↓ select · Enter confirm · Esc back"}</text>
         </box>
       )}
 
@@ -125,3 +133,123 @@ export function ThemeSetup() {
     </box>
   )
 }
+
+export function ThemePicker(props: { onDone: () => void }) {
+  const theme = useTheme()
+  const [idx, setIdx] = createSignal(THEME_NAMES.indexOf(theme.name))
+  const [tab, setTab] = createSignal<"theme" | "mode">("theme")
+
+  useKeyboard((evt) => {
+    if (tab() === "theme") {
+      if (evt.name === "up" || evt.name === "k") {
+        const next = (idx() - 1 + THEME_NAMES.length) % THEME_NAMES.length
+        setIdx(next)
+        theme.set(THEME_NAMES[next])
+        evt.preventDefault()
+        return
+      }
+      if (evt.name === "down" || evt.name === "j") {
+        const next = (idx() + 1) % THEME_NAMES.length
+        setIdx(next)
+        theme.set(THEME_NAMES[next])
+        evt.preventDefault()
+        return
+      }
+      if (evt.name === "tab") {
+        setTab("mode")
+        evt.preventDefault()
+        return
+      }
+      if (evt.name === "return" || evt.name === "escape") {
+        props.onDone()
+        evt.preventDefault()
+        return
+      }
+    }
+
+    if (tab() === "mode") {
+      if (evt.name === "up" || evt.name === "down" || evt.name === "k" || evt.name === "j") {
+        theme.setMode(theme.mode === "dark" ? "light" : "dark")
+        evt.preventDefault()
+        return
+      }
+      if (evt.name === "tab") {
+        setTab("theme")
+        evt.preventDefault()
+        return
+      }
+      if (evt.name === "return" || evt.name === "escape") {
+        props.onDone()
+        evt.preventDefault()
+        return
+      }
+    }
+  })
+
+  return (
+    <box flexDirection="column" flexGrow={1} paddingLeft={2} paddingRight={2} paddingTop={1}>
+      <box flexDirection="row" gap={4} flexShrink={0}>
+        <text fg={theme.colors.primary}>
+          <span style={{ bold: true }}>Theme Settings</span>
+        </text>
+        <box flexGrow={1} />
+        <text fg={theme.colors.textMuted}>{"Tab: switch section · Enter/Esc: done"}</text>
+      </box>
+
+      <box flexDirection="row" flexGrow={1} paddingTop={1} gap={4}>
+        {/* Theme list */}
+        <box flexDirection="column" width={40}>
+          <text fg={tab() === "theme" ? theme.colors.text : theme.colors.textMuted}>
+            <span style={{ bold: true }}>{"Color Theme"}</span>
+          </text>
+          <box height={1} />
+          {THEME_NAMES.map((name, i) => {
+            const c = THEMES[name][theme.mode]
+            return (
+              <box flexDirection="row">
+                <text fg={idx() === i ? c.primary : theme.colors.textMuted}>
+                  {idx() === i && tab() === "theme" ? "❯ " : "  "}
+                </text>
+                <text fg={idx() === i ? c.text : theme.colors.textMuted}>
+                  <span style={{ bold: idx() === i }}>
+                    {name.padEnd(14)}
+                  </span>
+                </text>
+                <text fg={c.logo1}>{" ●"}</text>
+                <text fg={c.logo2}>{"●"}</text>
+                <text fg={c.primary}>{"●"}</text>
+                <text fg={c.accent}>{"●"}</text>
+                <text fg={c.success}>{"●"}</text>
+                <text fg={c.error}>{"●"}</text>
+              </box>
+            )
+          })}
+        </box>
+
+        {/* Mode toggle */}
+        <box flexDirection="column" width={30}>
+          <text fg={tab() === "mode" ? theme.colors.text : theme.colors.textMuted}>
+            <span style={{ bold: true }}>{"Background Mode"}</span>
+          </text>
+          <box height={1} />
+          <box flexDirection="row">
+            <text fg={theme.mode === "dark" && tab() === "mode" ? theme.colors.primary : theme.colors.textMuted}>
+              {theme.mode === "dark" && tab() === "mode" ? "❯ " : "  "}
+            </text>
+            <text fg={theme.mode === "dark" ? theme.colors.text : theme.colors.textMuted}>
+              <span style={{ bold: theme.mode === "dark" }}>{"Dark"}</span>
+            </text>
+          </box>
+          <box flexDirection="row">
+            <text fg={theme.mode === "light" && tab() === "mode" ? theme.colors.primary : theme.colors.textMuted}>
+              {theme.mode === "light" && tab() === "mode" ? "❯ " : "  "}
+            </text>
+            <text fg={theme.mode === "light" ? theme.colors.text : theme.colors.textMuted}>
+              <span style={{ bold: theme.mode === "light" }}>{"Light"}</span>
+            </text>
+          </box>
+        </box>
+      </box>
+    </box>
+  )
+}