@ahmd-sh/hntui 0.3.0 → 0.4.0

package/README.md

@@ -1,6 +1,10 @@
-# hntui
+<h1 align="center">hntui: Hacker News in your terminal!</h1>
 
-Hacker News in your terminal! (formerly published as `@ahmd-sh/hackernuis`)
+<p align="center">A sleek and elegant tui for browsing one of the best tech news sources.</p>
+
+<p align="center">
+  <img src=".github/assets/hntui-showcase.webp" alt="hntui — Hacker News in your terminal" width="800">
+</p>
 
 ```
 curl -fsSL https://raw.githubusercontent.com/ahmd-sh/hntui/main/install.sh | sh
@@ -30,7 +34,7 @@ The prebuilt binaries have no dependencies. Installing through npm (or hacking o
 curl -fsSL https://raw.githubusercontent.com/ahmd-sh/hntui/main/install.sh | sh
 ```
 
-Installs a self-contained binary (runtime included, nothing else needed) to `~/.local/bin`. You can also grab a binary for your platform directly from the [releases page](https://github.com/ahmd-sh/hntui/releases).
+Installs a self-contained binary to `~/.local/bin`. You can also grab a binary for your platform directly from the [releases page](https://github.com/ahmd-sh/hntui/releases). Binaries cover macOS (Apple Silicon) and Linux (x64, arm64) — on an Intel Mac, use the Bun install below.
 
 ### With Bun
 
@@ -38,7 +42,7 @@ Installs a self-contained binary (runtime included, nothing else needed) to `~/.
 bun add -g @ahmd-sh/hntui
 ```
 
-Either way the command is `hntui`. Or run it once without installing:
+Or run it once without installing:
 
 ```bash
 bunx @ahmd-sh/hntui
@@ -59,13 +63,13 @@ Press `q` (or `Ctrl-C`) to quit.
 | Key | Action |
 |---|---|
 | `j` / `↓`, `k` / `↑` | Move cursor |
-| `gg`, `Shift-G` | Jump to first or last |
+| `gg`, `G` | Jump to first or last |
 | `Ctrl-D`, `Ctrl-U`, `PgDown`, `PgUp` | Scroll a half page |
 | `c`, `Enter` | Open the story and read its comments |
 | `h` / `←`, `l` / `→` | Previous or next tab |
 | `Tab`, `Shift-Tab` | Cycle through tabs |
 | `1` through `6` | Jump to a specific category |
-| `Shift-S` | Jump to the Saved list |
+| `S` | Jump to the Saved list |
 | `s` | Save or unsave the highlighted post |
 | `o` | Open the story's URL in your browser |
 | `r` | Refresh the current feed |
@@ -77,7 +81,7 @@ Press `q` (or `Ctrl-C`) to quit.
 | Key | Action |
 |---|---|
 | `j` / `↓`, `k` / `↑` | Move the comment cursor |
-| `gg`, `Shift-G` | Jump to first or last comment |
+| `gg`, `G` | Jump to first or last comment |
 | `Ctrl-D`, `Ctrl-U`, `PgDown`, `PgUp` | Scroll a half page |
 | `Space` | Collapse or expand the current subtree |
 | `Enter` | Open the links popup for the current comment |
@@ -92,7 +96,7 @@ Press `q` (or `Ctrl-C`) to quit.
 | Key | Action |
 |---|---|
 | `j`, `k`, `↑`, `↓` | Move |
-| `gg`, `Shift-G` | First or last link |
+| `gg`, `G` | First or last link |
 | `o`, `Enter` | Open the highlighted link |
 | `Esc`, `Backspace` | Close the popup |
 
@@ -133,7 +137,7 @@ Press `t` to toggle. The dark theme is mostly black with orange accents. The lig
 
 Press `s` on any story to save it. Saved posts get a small star next to the title and show up in the Saved tab on the right side of the tab strip. The list persists across sessions in `~/.config/hntui/saved.json` as a small JSON file. (Config from the app's `hackernuis` days is migrated automatically on first run.) Press `s` again to remove a post from the list.
 
-`Shift-S` jumps straight to the Saved list from anywhere.
+`S` jumps straight to the Saved list from anywhere.
 
 ## Development
 
@@ -164,6 +168,7 @@ git push --follow-tags
 
 - [OpenTUI](https://github.com/anomalyco/opentui) by Anomaly. The native TUI core that makes all of this possible.
 - [opentui-spinner](https://github.com/msmps/opentui-spinner) by Matt Simpson. The Knight Rider loading scanner is adapted from `examples/knight-rider/utils.ts` (MIT).
+- [Effect](https://effect.website) for empowering the data layer under the hood.
 - [Hacker News](https://news.ycombinator.com) for the content and the open API.
 
 ## License

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ahmd-sh/hntui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Beautiful Hacker News browser for the terminal, built on OpenTUI + React + Bun",
   "type": "module",
   "module": "src/index.tsx",

package/src/App.tsx

@@ -20,6 +20,7 @@ import { resolveStory } from "./api/hn"
 import type { HnError, HnItemGone } from "./api/hn"
 import { AppRuntime } from "./runtime"
 import { hnErrorMessage } from "./utils/errors"
+import { startThemeWipe } from "./utils/themeWipe"
 import { LinksPopup } from "./components/LinksPopup"
 import { HelpOverlay } from "./components/HelpOverlay"
 import { ContextMenu, type MenuItem } from "./components/ContextMenu"
@@ -360,7 +361,10 @@ export function App() {
     }
 
     if (name === "t") {
-      setTheme((cur) => (cur.name === "dark" ? lightTheme : darkTheme))
+      const next = theme.name === "dark" ? lightTheme : darkTheme
+      // snapshot the old-theme frame BEFORE React re-renders in the new theme
+      if (renderer) startThemeWipe(renderer, String(next.accent))
+      setTheme(next)
       return
     }
 

package/src/utils/themeWipe.ts

@@ -0,0 +1,109 @@
+import { RGBA } from "@opentui/core"
+import type { CliRenderer, OptimizedBuffer } from "@opentui/core"
+
+// Animated theme switch: a wave sweeps out of a random point on a random
+// screen edge and every cell flips to the new theme as the front passes it.
+//
+// It works as a renderer post-process, below React entirely: at trigger time
+// we snapshot the last OLD-theme frame (char/fg/bg/attributes per cell), let
+// React re-render the whole tree in the NEW theme underneath, and then — for
+// the duration — repaint the snapshot onto every cell the wave hasn't reached
+// yet. Cells just behind the front glow in the accent color for a beat.
+
+const DURATION_MS = 500
+const EDGE_WIDTH = 1.5
+const X_SCALE = 0.55
+
+let cancelActive: (() => void) | null = null
+
+export function startThemeWipe(renderer: CliRenderer, accentHex: string): void {
+  // re-triggering mid-wipe restarts from whatever is on screen right now
+  cancelActive?.()
+
+  const src = renderer.currentRenderBuffer
+  const width = src.width
+  const height = src.height
+  const cells = width * height
+  const snap = src.buffers
+  const snapChar = snap.char.slice(0, cells)
+  const snapAttr = snap.attributes.slice(0, cells)
+  const snapFg = snap.fg.slice(0, cells * 4)
+  const snapBg = snap.bg.slice(0, cells * 4)
+
+  // a fresh origin per wipe: anywhere along any edge (0 top, 1 right, 2 bottom, 3 left)
+  const edge = (Math.random() * 4) | 0
+  const ox = edge === 1 ? width - 1 : edge === 3 ? 0 : Math.random() * (width - 1)
+  const oy = edge === 0 ? 0 : edge === 2 ? height - 1 : Math.random() * (height - 1)
+
+  // distance of every cell from the origin
+  const dist = new Float32Array(cells)
+  let maxDist = 0
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      const dx = (x - ox) * X_SCALE
+      const dy = y - oy
+      const d = Math.sqrt(dx * dx + dy * dy)
+      dist[y * width + x] = d
+      if (d > maxDist) maxDist = d
+    }
+  }
+
+  const accent = RGBA.fromHex(accentHex)
+  const fgScratch = RGBA.fromValues(0, 0, 0, 1)
+  const bgScratch = RGBA.fromValues(0, 0, 0, 1)
+  const start = performance.now()
+
+  let fn: (buffer: OptimizedBuffer, deltaTime: number) => void
+
+  const cancel = () => {
+    renderer.removePostProcessFn(fn)
+    renderer.dropLive()
+    if (cancelActive === cancel) cancelActive = null
+  }
+
+  fn = (buffer) => {
+    // terminal resized mid-wipe: the snapshot grid no longer applies
+    if (buffer.width !== width || buffer.height !== height) return cancel()
+
+    const t = Math.min(1, (performance.now() - start) / DURATION_MS)
+    const eased = 1 - (1 - t) * (1 - t) // ease-out: fast ignition, soft landing
+    const r = eased * (maxDist + EDGE_WIDTH)
+    const live = buffer.buffers
+
+    for (let i = 0; i < cells; i++) {
+      const d = dist[i]!
+      if (d <= r - EDGE_WIDTH) continue // wave passed: new theme shows through
+
+      const x = i % width
+      const y = (i / width) | 0
+      const o = i * 4
+
+      if (d <= r) {
+        // wavefront band: the just-flipped cell glows on an accent background
+        fgScratch.buffer[0] = live.fg[o]!
+        fgScratch.buffer[1] = live.fg[o + 1]!
+        fgScratch.buffer[2] = live.fg[o + 2]!
+        fgScratch.buffer[3] = live.fg[o + 3]!
+        buffer.drawChar(live.char[i]!, x, y, fgScratch, accent, live.attributes[i]!)
+        continue
+      }
+
+      // not reached yet: hold the old-theme snapshot in place
+      fgScratch.buffer[0] = snapFg[o]!
+      fgScratch.buffer[1] = snapFg[o + 1]!
+      fgScratch.buffer[2] = snapFg[o + 2]!
+      fgScratch.buffer[3] = snapFg[o + 3]!
+      bgScratch.buffer[0] = snapBg[o]!
+      bgScratch.buffer[1] = snapBg[o + 1]!
+      bgScratch.buffer[2] = snapBg[o + 2]!
+      bgScratch.buffer[3] = snapBg[o + 3]!
+      buffer.drawChar(snapChar[i]!, x, y, fgScratch, bgScratch, snapAttr[i]!)
+    }
+
+    if (t >= 1) cancel()
+  }
+
+  cancelActive = cancel
+  renderer.addPostProcessFn(fn)
+  renderer.requestLive()
+}