Compare commits
4 Commits
d2f6c5c525
...
4a94ff5910
| Author | SHA1 | Date | |
|---|---|---|---|
| 4a94ff5910 | |||
| 2e69868ffc | |||
| 491a736c32 | |||
| 12bd6be4bc |
10
.github/workflows/release.yml
vendored
10
.github/workflows/release.yml
vendored
@@ -66,12 +66,14 @@ jobs:
|
||||
env:
|
||||
DIST_TAR: podtui-${{ matrix.plat }}-${{ matrix.arch }}.tar.gz
|
||||
run: |
|
||||
# The embedded runtime reads the launching process's CWD bunfig.toml.
|
||||
# This repo's bunfig lists a preload the standalone can't resolve
|
||||
# ("preload not found"), so kicking the binary from the workspace root
|
||||
# would falsely fail every build. cd into a clean dir first.
|
||||
# The binary is compiled with bunfig autoload disabled
|
||||
# (autoloadBunfig: false in build.ts), so it must boot even from a
|
||||
# directory holding a bunfig.toml with a top-level preload the
|
||||
# standalone can't resolve. Plant one to make this a real regression
|
||||
# test for "preload not found".
|
||||
SMOKE_DIR=$(mktemp -d)
|
||||
tar -xzf "dist/$DIST_TAR" -C "$SMOKE_DIR"
|
||||
printf 'preload = ["./definitely-missing.ts"]\n' > "$SMOKE_DIR/bunfig.toml"
|
||||
cd "$SMOKE_DIR"
|
||||
./podtui-*/podtui --version
|
||||
|
||||
|
||||
@@ -38,6 +38,7 @@ The app is a TUI — it expects a real terminal (Ghostty, kitty, iTerm2,
|
||||
| `bun run lint` | Type-check |
|
||||
| `bun run build` | Bundle JS into `dist/` + copy native libs (the `podtui` npm script path) |
|
||||
| `make dist` | Compile the standalone binary + make the current platform's tarball |
|
||||
| `make dist-mac` / `make dist-linux` | Aliases for `dist` on their platform (CI runs these) |
|
||||
| `make clean` | Remove `dist/` |
|
||||
|
||||
## Repository layout
|
||||
@@ -90,19 +91,21 @@ Cavacore smoke test: `bun tests/cavacore-smoke.ts`
|
||||
|
||||
## Gotchas (read before touching anything)
|
||||
|
||||
1. **Never add a top-level `preload` to `bunfig.toml`.**
|
||||
A compiled PodTui binary's embedded runtime reads the *launching process's*
|
||||
CWD `bunfig.toml`, and a `preload` entry points at a module the standalone
|
||||
can't resolve (`@opentui/solid/preload`) → the binary dies at startup with
|
||||
`preload not found`. This is why `bunfig.toml` has **no** top-level
|
||||
`preload`; dev-mode preloading happens via explicit `--preload` flags in
|
||||
`package.json`. The `[test]` section *does* keep a preload — that only
|
||||
affects `bun test`.
|
||||
1. **The compiled binary must keep bunfig autoload disabled.**
|
||||
`build.ts` compiles the standalone with `autoloadBunfig: false`, so its
|
||||
embedded runtime *never* reads the launching CWD's `bunfig.toml`. Without
|
||||
that flag, a top-level `preload` in the CWD bunfig (common in Bun project
|
||||
dirs) resolves against the CWD rather than the binary and kills startup
|
||||
with `preload not found`. Don't remove the flag. Preloads for dev/test
|
||||
belong in the explicit `--preload` flags in `package.json` and the
|
||||
`[test]` section of `bunfig.toml` — not as a top-level entry.
|
||||
|
||||
2. **Smoke-test the compiled binary from a bunfig-free dir.**
|
||||
Because of (1), `./dist/podtui --version` run from the repo root launched
|
||||
inside CI would fail. CI always unpacks the tarball into a `mktemp` dir
|
||||
before booting. Do the same when testing a release build locally.
|
||||
2. **Smoke-test the binary from a dir with a poisoned bunfig.**
|
||||
The CI smoke test unpacks the tarball into a `mktemp` dir, drops a
|
||||
`bunfig.toml` containing an unresolvable top-level `preload` next to it,
|
||||
and boots the binary — proving bunfig autoload stayed disabled. `./dist/
|
||||
podtui --version` must work from any directory, including the repo root;
|
||||
do the same check when testing a release build locally.
|
||||
|
||||
3. **Homebrew's dylib-repair warning is benign.**
|
||||
`brew install` may print “load commands do not fit in the header … needs
|
||||
@@ -166,7 +169,7 @@ Releases are built and published from **tags**
|
||||
test: `brew install mikefreno/tap/podtui`.
|
||||
5. **AUR packaging** (`packaging/aur/PKGBUILD`): the `podtui-bin` package is
|
||||
staged, not yet published (AUR account registrations are closed; see the
|
||||
README note in section 3). On each release, keep the AUR sources in sync
|
||||
README's Installation section). On each release, keep the AUR sources in sync
|
||||
with the new tag: bump `pkgver`, recompute the two tarball `sha256sums`
|
||||
entries, keep the `LICENSE` asset source (the workflow above uploads
|
||||
`LICENSE` to every release), and regenerate `packaging/aur/.SRCINFO` with
|
||||
@@ -190,13 +193,36 @@ make dist # builds the binary + tarball for THIS machine only
|
||||
|
||||
Bun cannot cross-compile — the other platforms come from CI.
|
||||
|
||||
## Distribution & packaging
|
||||
|
||||
A release tarball is three files sitting side by side: the `podtui` binary
|
||||
plus its two FFI libraries (`libopentui.<dylib|so>`,
|
||||
`libcavacore.<dylib|so>`). The sibling rule above is why they ship together.
|
||||
|
||||
PodTui deliberately ships **no** `.deb`, `.rpm`, Flatpak, or Snap packages:
|
||||
for a terminal app that's overwhelmingly installed through repositories or
|
||||
archives, those formats add desktop-sandboxing overhead and a packaging tax
|
||||
with little benefit. Instead:
|
||||
|
||||
- **GitHub Release tarballs** are the universal path — one upload per
|
||||
OS/arch, works on any distro with `curl` + `tar`.
|
||||
- **AUR (`podtui-bin`)** covers Arch/Manjaro with the same binary through the
|
||||
native package manager.
|
||||
- **Nix / cross-distro** users build from source (or a Nix flake can be added
|
||||
later).
|
||||
|
||||
This keeps maintenance to a single build per OS/arch while still reaching the
|
||||
vast majority of desktop Linux users. The AUR PKGBUILD lives in
|
||||
`packaging/aur/` and can be built locally to test before publication:
|
||||
|
||||
```bash
|
||||
cd packaging/aur && makepkg -si
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Open items / things to sort out
|
||||
|
||||
- **LICENSE**: `README.md` says "TBD — choose and document a license before
|
||||
the first release". Pick one (MIT/BSD-3) and add `LICENSE` + update the
|
||||
README footer.
|
||||
- **Native libs in `dist/` still need committing?** No — they're built from
|
||||
sources kept in the repo (`cava/`, `node_modules/@opentui/core-*`). Only
|
||||
`src/native/libcavacore.dylib` is a committed binary artifact; macOS arm64
|
||||
|
||||
5
Makefile
5
Makefile
@@ -47,9 +47,8 @@ native:
|
||||
scripts/build-cavacore.sh
|
||||
|
||||
## Standalone binary + native-libs tarball for the current platform.
|
||||
## Unaffected by bunfig.toml at build time. Note: the compiled runtime reads
|
||||
## the launching process's CWD bunfig.toml, so smoke tests must run the binary
|
||||
## from a bunfig-free dir (see release.yml).
|
||||
## Built with bunfig autoload disabled (build.ts sets autoloadBunfig: false),
|
||||
## so the embedded runtime ignores any bunfig.toml in the launching directory.
|
||||
dist:
|
||||
bun run build.ts --compile
|
||||
|
||||
|
||||
208
README.md
208
README.md
@@ -1,7 +1,6 @@
|
||||
# PodTui
|
||||
|
||||
A keyboard-first, yazi-style terminal podcast client written in TypeScript and
|
||||
built on [OpenTUI](https://github.com/opentui/opentui). Subscribe to RSS feeds,
|
||||
A keyboard-first, terminal podcast client built on [OpenTUI](https://github.com/opentui/opentui). Subscribe to RSS feeds,
|
||||
browse episodes in a three-pane file-manager layout, and play audio through an
|
||||
external player with full transport control — all from your terminal.
|
||||
|
||||
@@ -11,8 +10,7 @@ external player with full transport control — all from your terminal.
|
||||
`Enter` to open, `1–6` / `[` `]` to switch tabs. The tab list is the app root:
|
||||
at launch it fills the current pane, and drilling into a tab's contents slides
|
||||
it into the parent pane.
|
||||
- **Three-pane view** — parent / current / preview (Up | Current | Preview),
|
||||
mirroring yazi's pane model.
|
||||
- **Three-pane view** — parent / current / preview (Up | Current | Preview).
|
||||
- **Podcast feeds** — add feeds, browse episodes, and manage your library
|
||||
(My Shows, Discover, Feed tabs).
|
||||
- **Search** across your subscribed shows.
|
||||
@@ -22,13 +20,28 @@ external player with full transport control — all from your terminal.
|
||||
- Ships as a **standalone compiled binary** — no runtime or install step beyond
|
||||
a system audio player.
|
||||
|
||||
## Quick start
|
||||
|
||||
1. Install PodTui ([Installation](#installation)) and make sure **mpv** is in
|
||||
your `PATH`.
|
||||
2. Run `podtui` in your terminal.
|
||||
3. Press `3` to open **Discover** (or `4` to open **Search**, then `s`), drill
|
||||
in with `Enter`, and press `Enter` on a show to subscribe.
|
||||
4. Press `1` (**Feed**) or `2` (**My Shows**), open an episode with `Enter`,
|
||||
and use `P` to play/pause, `N`/`B` for next/previous, and `shift-.` /
|
||||
`shift-,` to seek.
|
||||
|
||||
Press `~` any time for in-app help. All keys are remappable — see
|
||||
[Keybindings](#keybindings).
|
||||
|
||||
## Requirements
|
||||
|
||||
- A terminal with UTF-8 and modern color support (kitty, iTerm2, WezTerm,
|
||||
tmux, GNOME Terminal, etc.).
|
||||
Ghostty, tmux etc.).
|
||||
- **mpv** on `PATH` for audio playback. PodTui drives mpv over JSON IPC, so
|
||||
seek, speed, and position tracking all work. Without `mpv` on `PATH`,
|
||||
playback is a silent no-op (the `none` backend).
|
||||
playback is a silent no-op (the `none` backend) — see
|
||||
[Troubleshooting](#troubleshooting).
|
||||
|
||||
## Installation
|
||||
|
||||
@@ -41,10 +54,6 @@ Linux (arm64/x64). Pick whichever fits your platform.
|
||||
brew install mikefreno/tap/podtui
|
||||
```
|
||||
|
||||
> The formula installs the standalone binary plus its two native libraries
|
||||
> side by side (see [Packaging model](#packaging-model)). It does **not**
|
||||
> depend on Bun.
|
||||
|
||||
### 2. Standalone tarball (all platforms)
|
||||
|
||||
Grab `podtui-<platform>-<arch>.tar.gz` from the latest
|
||||
@@ -62,68 +71,29 @@ sudo ln -sf /opt/podtui/podtui /usr/local/bin/podtui
|
||||
> The tarball contains `podtui` plus `libopentui.<ext>` and
|
||||
> `libcavacore.<ext>` **beside it** — keep them together (don't move just the
|
||||
> binary alone), or the native FFI libraries won't load.
|
||||
>
|
||||
> One caveat: the embedded runtime reads a `bunfig.toml` from the directory
|
||||
> you launch from. If that file has a `preload` entry (as Bun project
|
||||
> directories often do), startup fails with `preload not found`. Launching
|
||||
> from a normal directory (home, `~/bin`, …) works fine.
|
||||
|
||||
### 3. Arch Linux (AUR)
|
||||
|
||||
```bash
|
||||
# Status: PKGBUILD ready, not yet on the AUR (see note below)
|
||||
yay -S podtui-bin # once published
|
||||
```
|
||||
|
||||
Requires an AUR helper ([paru](https://github.com/morgan/paru)). The AUR
|
||||
package (PKGBUILD lives in `packaging/aur/`) installs the released binary and
|
||||
its two FFI sibling libraries into `/usr/lib/podtui/` with a `/usr/bin/podtui`
|
||||
symlink, and pulls in `mpv` (the sole audio backend) as a dependency.
|
||||
Requires an AUR helper ([paru](https://github.com/morgan/paru)); the package
|
||||
pulls in `mpv` as a dependency.
|
||||
|
||||
> **Not yet on the AUR.** The `podtui-bin` PKGBUILD and `.SRCINFO` are ready
|
||||
> in `packaging/aur/` and can be built locally today:
|
||||
>
|
||||
> ```bash
|
||||
> cd packaging/aur && makepkg -si
|
||||
> ```
|
||||
>
|
||||
> Publishing is on hold until [AUR account registrations](https://aur.archlinux.org)
|
||||
> reopen (suspended while the AUR team works on suspicious-package
|
||||
> moderation).
|
||||
> **Not yet on the AUR.** The `podtui-bin` package is staged and awaiting
|
||||
> publication (AUR account registrations are currently suspended). Until it
|
||||
> lands, use the standalone tarball above.
|
||||
|
||||
### 4. From source
|
||||
|
||||
Requires [Bun](https://bun.sh) ≥ 1.2.
|
||||
|
||||
```bash
|
||||
git clone https://github.com/mikefreno/podtui.git
|
||||
cd podtui
|
||||
bun install
|
||||
bun run build:native # build the cavacore FFI lib from C source
|
||||
bun run dev # run with hot reload, or: bun start
|
||||
```
|
||||
|
||||
## Linux distribution notes
|
||||
|
||||
PodTUI deliberately does **not** ship `.deb`, `.rpm`, Flatpak, or Snap
|
||||
packages. For a terminal application that's overwhelmingly installed through
|
||||
repositories or archives, those formats add desktop-sandboxing overhead and a
|
||||
packaging tax with little benefit. Instead:
|
||||
|
||||
- **GitHub Release tarballs** are the universal path — one upload, works on
|
||||
any distro with `curl` + `tar`.
|
||||
- **AUR (`podtui-bin`)** covers Arch. Anyone on Arch/Manjaro gets the same
|
||||
binary through their native package manager.
|
||||
- **Nix / cross-distro** users can build from source (or a Nix flake can be
|
||||
added later).
|
||||
|
||||
This keeps maintenance to a single build per OS/arch and still reaches the
|
||||
vast majority of desktop Linux users through their preferred path.
|
||||
PodTui is written in TypeScript and runs on [Bun](https://bun.sh). To build
|
||||
from source (development, distro packaging, unreleased versions), see
|
||||
[CONTRIBUTING.md](CONTRIBUTING.md).
|
||||
|
||||
## Usage
|
||||
|
||||
Launch `podtui` (or `bun src/index.tsx` from the source tree). Press `~`
|
||||
for the in-app help.
|
||||
Launch `podtui`. Press `~` for the in-app help.
|
||||
|
||||
### Command-line flags
|
||||
|
||||
@@ -135,30 +105,70 @@ for the in-app help.
|
||||
|
||||
### Keybindings
|
||||
|
||||
All keys are remappable — edit `~/.config/podtui/keybinds.jsonc`.
|
||||
All keys are remappable — edit `keybinds.jsonc` in your config directory
|
||||
(see [Configuration](#configuration)).
|
||||
|
||||
**Movement**
|
||||
|
||||
| Keys | Action |
|
||||
|------|--------|
|
||||
| `j` / `k` | Move cursor down / up |
|
||||
| `J` / `K` | Jump 5 lines |
|
||||
| `j` / `k` (or `down` / `up`) | Move down / up |
|
||||
| `J` / `K` | Jump 5 lines down / up |
|
||||
| `ctrl-d` / `ctrl-u` | Page down / up |
|
||||
| `ctrl-f` / `ctrl-b` | Full page down / up |
|
||||
| `gg` / `G` | Go to top / bottom |
|
||||
| `h` / `l` | Swipe to parent pane / preview pane |
|
||||
|
||||
**Panes**
|
||||
|
||||
| Keys | Action |
|
||||
|------|--------|
|
||||
| `h` / `l` (or `left` / `right`) | Focus parent pane / preview pane |
|
||||
| `Enter` | Open the item under the cursor (a tab, episode, show…) |
|
||||
| `Space` | Select / toggle selection |
|
||||
| `shift-enter` | Open with the interactive variant |
|
||||
|
||||
**Selection**
|
||||
|
||||
| Keys | Action |
|
||||
|------|--------|
|
||||
| `Space` | Toggle selection |
|
||||
| `v` | Visual mode (multi-select) |
|
||||
| `ctrl-a` | Select / deselect all |
|
||||
| `ctrl-r` | Invert selection |
|
||||
| `Esc` | Cancel / escape |
|
||||
|
||||
**Tabs**
|
||||
|
||||
| Keys | Action |
|
||||
|------|--------|
|
||||
| `1`–`6` | Jump to tab 1–6 (Feed, My Shows, Discover, Search, Player, Settings) |
|
||||
| `[` / `]` | Previous / next tab |
|
||||
| `P` (shift) | Play / pause |
|
||||
|
||||
**Commands, help, quit**
|
||||
|
||||
| Keys | Action |
|
||||
|------|--------|
|
||||
| `:` or `q` | Open the command palette (type `q` + `Enter` there to quit) |
|
||||
| `Q` or `ctrl-c` | Quit |
|
||||
| `~` or `f1` | In-app help |
|
||||
|
||||
**Lists**
|
||||
|
||||
| Keys | Action |
|
||||
|------|--------|
|
||||
| `s` | Search |
|
||||
| `f` | Filter |
|
||||
| `,` | Sort |
|
||||
| `.` | Toggle hidden |
|
||||
| `r` | Refresh |
|
||||
| `x` | Unsubscribe the focused show (My Shows) |
|
||||
|
||||
**Audio**
|
||||
|
||||
| Keys | Action |
|
||||
|------|--------|
|
||||
| `P` | Play / pause |
|
||||
| `N` / `B` | Next / previous episode |
|
||||
| `shift-.` / `shift-,` | Seek forward / backward |
|
||||
| `s` | Search (in a list) |
|
||||
| `f` | Filter |
|
||||
| `r` | Refresh |
|
||||
| `:` | Command bar |
|
||||
| `~`, `f1` | Help |
|
||||
| `q`, `ctrl-c` | Quit |
|
||||
| `Esc` | Escape / cancel |
|
||||
|
||||
## Configuration
|
||||
|
||||
@@ -175,50 +185,32 @@ default (`$XDG_CONFIG_HOME/podtui` if set).
|
||||
Legacy `feeds.json`, `sources.json`, and `app-state.json` are auto-migrated
|
||||
into `config.json` on first run.
|
||||
|
||||
Env overrides: `PODTUI_AUDIO_BACKEND`, `XDG_CONFIG_HOME`. Startup also reads
|
||||
the same OpenTUI environment variables.
|
||||
Env overrides: `PODTUI_AUDIO_BACKEND`, `XDG_CONFIG_HOME`.
|
||||
|
||||
## Development
|
||||
## Troubleshooting
|
||||
|
||||
```bash
|
||||
bun install # install dependencies
|
||||
bun run dev # run with hot reload
|
||||
bun test # run the test suite
|
||||
bun run build # bundle JS + copy native libs into dist/
|
||||
make native # rebuild cavacore from C source
|
||||
make lint # type-check (tsc)
|
||||
```
|
||||
**`preload not found` at startup** — this used to happen when the binary was
|
||||
launched from a Bun project directory whose `bunfig.toml` had a `preload`
|
||||
entry. Releases are compiled with bunfig autoload disabled
|
||||
(`autoloadBunfig: false`), so current binaries ignore the CWD's `bunfig.toml`
|
||||
entirely. If you still hit it, you're on an old release — upgrade.
|
||||
|
||||
### Releasing
|
||||
**No audio — playback is a silent no-op** — PodTui needs **mpv** on your
|
||||
`PATH`. Install it (`brew install mpv`, `pacman -S mpv`, …) and relaunch.
|
||||
|
||||
Tag a release (e.g. `v0.1.0`); CI builds and uploads the per-platform tarballs
|
||||
to your GitHub Release automatically:
|
||||
**Homebrew prints a dylib warning** — “load commands do not fit in the header
|
||||
… needs `-headerpad`” is benign: the app loads its libraries by path, the
|
||||
install completes, and the app boots normally.
|
||||
|
||||
```bash
|
||||
make dist # build the standalone binary + tarball for THIS platform
|
||||
make dist-mac # (run on macOS) → podtui-darwin-<arch>.tar.gz
|
||||
make dist-linux # (run on Linux) → podtui-linux-<arch>.tar.gz
|
||||
```
|
||||
**The app won't start / no spectrum after moving files** — `podtui` loads its
|
||||
two native libraries relative to the binary, so keep `podtui`,
|
||||
`libopentui.*`, and `libcavacore.*` together in the same directory (the
|
||||
tarball unpacks them side by side).
|
||||
|
||||
`make dist` emits a config-independent binary: Bun does not bake bunfig
|
||||
settings into `--compile` output, and the solid JSX transform is registered in
|
||||
`build.ts` itself. The binary then embeds the `preload`-free runtime, so launch
|
||||
it from any normal directory.
|
||||
## Building from source / contributing
|
||||
|
||||
## Packaging model
|
||||
|
||||
A release tarball is three files sitting side by side:
|
||||
|
||||
```
|
||||
podtui # standalone compiled binary (embeds the Bun runtime)
|
||||
libopentui.<dylib|so> # OpenTUI native renderer FFI library
|
||||
libcavacore.<dylib|so> # cavacore spectrum FFI library (built from C)
|
||||
```
|
||||
|
||||
PodTui loads its native libraries relative to the binary, so **keep them in
|
||||
the same directory**. The compiled binary embeds the Bun runtime, so it runs
|
||||
with no Bun installed. Each release builds one tarball per OS/arch in CI; there
|
||||
is no cross-compilation.
|
||||
Development setup, the test suite, packaging, and the release process are
|
||||
documented in [CONTRIBUTING.md](CONTRIBUTING.md).
|
||||
|
||||
## License
|
||||
|
||||
|
||||
6
build.ts
6
build.ts
@@ -82,6 +82,12 @@ if (COMPILE) {
|
||||
plugins: [solidPlugin],
|
||||
compile: {
|
||||
outfile,
|
||||
// Don't let the embedded runtime autoload the launching CWD's
|
||||
// bunfig.toml. A top-level `preload` there (common in Bun project
|
||||
// dirs) resolves against the CWD, not the binary, so startup dies
|
||||
// with "preload not found". With autoload disabled, the binary is
|
||||
// config-independent and boots from any directory.
|
||||
autoloadBunfig: false,
|
||||
},
|
||||
});
|
||||
console.log(`Compiled standalone binary: ${outfile}`);
|
||||
|
||||
11
bunfig.toml
11
bunfig.toml
@@ -1,9 +1,8 @@
|
||||
# NO top-level `preload` here — intentional. A compiled PodTUI binary's
|
||||
# embedded Bun runtime reads the launching process's CWD bunfig.toml, and a
|
||||
# top-level `preload` entry (e.g. "@opentui/solid/preload", which the
|
||||
# standalone cannot resolve) makes the binary die at startup with
|
||||
# "preload not found". Dev/test still get the solid transform via explicit
|
||||
# `--preload` flags in package.json and the [test] section below.
|
||||
# No top-level `preload` here — dev/test get the solid JSX transform via the
|
||||
# explicit `--preload` flags in package.json and the [test] section below.
|
||||
# Releases don't read this file at all: build.ts compiles the standalone with
|
||||
# `autoloadBunfig: false`, so its embedded runtime ignores any bunfig.toml in
|
||||
# the launching directory — no more "preload not found" from CWD bunfigs.
|
||||
|
||||
[test]
|
||||
preload = "@opentui/solid/preload"
|
||||
|
||||
@@ -1,23 +1,30 @@
|
||||
import { createSignal, createMemo, onCleanup } from "solid-js";
|
||||
import { createSignal, createMemo, Show, onCleanup } from "solid-js";
|
||||
import { useTheme } from "@/context/ThemeContext";
|
||||
|
||||
const spinnerChars = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
|
||||
|
||||
export function LoadingIndicator() {
|
||||
const { theme } = useTheme();
|
||||
const [index, setIndex] = createSignal(0);
|
||||
/**
|
||||
* Animated braille spinner with an optional label (e.g. "Refreshing…").
|
||||
* The spinner is rendered in the theme primary color; the label in muted.
|
||||
*/
|
||||
export function LoadingIndicator(props: { label?: string }) {
|
||||
const { theme } = useTheme();
|
||||
const [index, setIndex] = createSignal(0);
|
||||
|
||||
const interval = setInterval(() => {
|
||||
setIndex((i) => (i + 1) % spinnerChars.length);
|
||||
}, 65);
|
||||
const interval = setInterval(() => {
|
||||
setIndex((i) => (i + 1) % spinnerChars.length);
|
||||
}, 65);
|
||||
|
||||
onCleanup(() => clearInterval(interval));
|
||||
onCleanup(() => clearInterval(interval));
|
||||
|
||||
const currentChar = createMemo(() => spinnerChars[index()]);
|
||||
const currentChar = createMemo(() => spinnerChars[index()]);
|
||||
|
||||
return (
|
||||
<box flexDirection="row" justifyContent="flex-end" alignItems="flex-start">
|
||||
<text fg={theme.primary} content={currentChar()} />
|
||||
</box>
|
||||
);
|
||||
return (
|
||||
<box flexDirection="row" gap={1} alignItems="flex-start">
|
||||
<text fg={theme.primary} content={currentChar()} />
|
||||
<Show when={props.label}>
|
||||
<text fg={theme.muted || theme.text} content={props.label} />
|
||||
</Show>
|
||||
</box>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,39 +1,42 @@
|
||||
/**
|
||||
* PaneRow — the shared parent | current | preview 3-pane layout primitive.
|
||||
*
|
||||
* Implements yazi's `mgr.ratio = [1, 2, 2]` contract: three bordered columns
|
||||
* grow at 1/5 : 2/5 : 2/5 of the row width via Yoga `flexGrow`, so every list
|
||||
* tab renders an identical, layout-stable shell. Columns use `flexBasis={0}`
|
||||
* so the ratio is exact regardless of content width — a column's content can
|
||||
* Implements yazi's `mgr.ratio = [1, 2, 2]` contract: three columns grow at
|
||||
* 1/5 : 2/5 : 2/5 of the row width via Yoga `flexGrow`, so every list tab
|
||||
* renders an identical, layout-stable shell. Columns use `flexBasis={0}` so
|
||||
* the ratio is exact regardless of content width — a column's content can
|
||||
* never stretch its slot.
|
||||
*
|
||||
* Column semantics (per the yazi depth model):
|
||||
* parent — the previous-depth list. Renders a muted `—` placeholder and
|
||||
* KEEPS its 1/5 slot when blank (never collapses to width 0).
|
||||
* Borderless (no left/right/top/bottom edge). Carries the single
|
||||
* header row: the CURRENT column's title renders top-left in the
|
||||
* parent's slot (the panes above current/preview were removed).
|
||||
* current — the current-depth list. The only focusable content column; it
|
||||
* carries the active-border focus ring when `focused` is truthy.
|
||||
* preview — detail of the hovered item in `current`; always muted border.
|
||||
* is the ONLY bordered column — left/right edges only, always
|
||||
* muted (no active-border highlight, focused or not).
|
||||
* preview — detail of the hovered item in `current`. Borderless, no header.
|
||||
*
|
||||
* The primitive is purely structural: callers pass their own JSX per column
|
||||
* (static elements or accessors) plus header labels. Theme colors are resolved
|
||||
* internally via `useTheme()`. Only the current column's `<scrollbox>` receives
|
||||
* `focused`, so scroll focus follows the cursor (j/k stay in the current pane).
|
||||
* (static elements or accessors) plus the current-column title. Theme colors
|
||||
* are resolved internally via `useTheme()`. Only the current column's
|
||||
* `<scrollbox>` receives `focused`, so scroll focus follows the cursor (j/k
|
||||
* stay in the current pane).
|
||||
*
|
||||
* Example:
|
||||
* <PaneRow
|
||||
* parent={parentList}
|
||||
* current={currentList}
|
||||
* preview={detail}
|
||||
* parentLabel="Up"
|
||||
* currentLabel="List · 42"
|
||||
* previewLabel="Detail"
|
||||
* focused={isActive}
|
||||
* />
|
||||
*/
|
||||
|
||||
import { createMemo, Show } from "solid-js";
|
||||
import type { JSX } from "solid-js";
|
||||
import type { RGBA } from "@opentui/core";
|
||||
import type { RGBA, BorderSides } from "@opentui/core";
|
||||
import { useTheme } from "@/context/ThemeContext";
|
||||
import { PANE_RATIO } from "@/utils/navigation";
|
||||
|
||||
@@ -50,12 +53,12 @@ export type PaneRowProps = {
|
||||
/** Preview column content (detail of the hovered item). Omit/undefined
|
||||
* together with `panes={2}` to render a 2-pane parent|current row. */
|
||||
preview?: PaneContent;
|
||||
parentLabel?: PaneLabel;
|
||||
/** Title of the current column — rendered once, top-left in the parent
|
||||
* pane's header slot (the per-pane Up/Detail headers are gone). */
|
||||
currentLabel?: PaneLabel;
|
||||
previewLabel?: PaneLabel;
|
||||
/** Whether the current column carries the active-border focus ring. Defaults to
|
||||
* true; pass `false` (or a signal) when the row is inactive. Parent and
|
||||
* preview columns always render muted borders. */
|
||||
/** Whether the current column's `<scrollbox>` receives scroll focus. Defaults to
|
||||
* true; pass `false` (or a signal) when the row is inactive. Does NOT change
|
||||
* border colors — the current column's border is always muted. */
|
||||
focused?: boolean | (() => boolean);
|
||||
/** Number of visible columns. `3` (default) = parent|current|preview;
|
||||
* `2` = parent|current (preview omitted, current grows to fill). */
|
||||
@@ -96,16 +99,15 @@ function Pane(props: {
|
||||
grow: number;
|
||||
label: () => string;
|
||||
content: () => JSX.Element | undefined;
|
||||
borderColor: () => RGBA;
|
||||
border: boolean | BorderSides[];
|
||||
scrollFocused: () => boolean;
|
||||
}) {
|
||||
const themeContext = useTheme();
|
||||
const theme = themeContext.theme;
|
||||
const muted = () => theme.muted ?? theme.textMuted ?? theme.text;
|
||||
|
||||
// Memoize accessor results so the prop expressions below stay reactive
|
||||
// when the underlying signals (e.g. `focused`) change.
|
||||
const borderColor = createMemo(() => props.borderColor());
|
||||
// Memoize the scroll-focus accessor result so the prop expression below
|
||||
// stays reactive when the underlying signal (e.g. `focused`) changes.
|
||||
const scrollFocused = createMemo(() => props.scrollFocused());
|
||||
|
||||
return (
|
||||
@@ -115,24 +117,32 @@ function Pane(props: {
|
||||
flexBasis={0}
|
||||
height="100%"
|
||||
>
|
||||
{/* ── slim header label row ─────────────────────────────────────────── */}
|
||||
<box
|
||||
height={1}
|
||||
paddingLeft={1}
|
||||
backgroundColor={
|
||||
themeContext.transparentBackground()
|
||||
? "transparent"
|
||||
: theme.background
|
||||
}
|
||||
>
|
||||
<text fg={theme.textSecondary}>{props.label()}</text>
|
||||
</box>
|
||||
{/* ── bordered scrollbox ────────────────────────────────────────────── */}
|
||||
{/* ── title row: rendered only when the pane carries a label ────────── */}
|
||||
<Show when={props.label() !== ""}>
|
||||
<box
|
||||
height={1}
|
||||
paddingLeft={1}
|
||||
backgroundColor={
|
||||
themeContext.transparentBackground()
|
||||
? "transparent"
|
||||
: theme.background
|
||||
}
|
||||
>
|
||||
<text fg={theme.textSecondary}>{props.label()}</text>
|
||||
</box>
|
||||
</Show>
|
||||
{/* ── scrollbox; border always muted (focused or not) ──────────────── */}
|
||||
<scrollbox
|
||||
height="100%"
|
||||
focused={scrollFocused()}
|
||||
border
|
||||
borderColor={borderColor()}
|
||||
border={props.border}
|
||||
// Only supply colors when a border is requested — opentui flips a
|
||||
// borderless box to bordered when borderColor/focusedBorderColor
|
||||
// are passed, which would frame the parent/preview panes too.
|
||||
borderColor={props.border === false ? undefined : theme.border}
|
||||
focusedBorderColor={
|
||||
props.border === false ? undefined : theme.border
|
||||
}
|
||||
backgroundColor={
|
||||
themeContext.transparentBackground()
|
||||
? "transparent"
|
||||
@@ -147,9 +157,7 @@ function Pane(props: {
|
||||
|
||||
// ── Row primitive ───────────────────────────────────────────────────────────
|
||||
export function PaneRow(props: PaneRowProps) {
|
||||
const { theme } = useTheme();
|
||||
|
||||
/** true → the current column gets the active-border focus ring. */
|
||||
/** true → the current column's scrollbox is focused (scroll follows cursor). */
|
||||
const focused = createMemo(() => {
|
||||
const f = props.focused;
|
||||
return typeof f === "function" ? f() : (f ?? true);
|
||||
@@ -161,9 +169,9 @@ export function PaneRow(props: PaneRowProps) {
|
||||
const currentContent = normalizeContent(props.current);
|
||||
const previewContent = normalizeContent(props.preview);
|
||||
|
||||
const parentLabel = createMemo(() => resolveLabel(props.parentLabel));
|
||||
// The single title: the CURRENT column's label, rendered in the parent
|
||||
// pane's header slot (top-left). Current/preview panes have no headers.
|
||||
const currentLabel = createMemo(() => resolveLabel(props.currentLabel));
|
||||
const previewLabel = createMemo(() => resolveLabel(props.previewLabel));
|
||||
|
||||
// 2-pane mode (parent|current) grows the current column to fill the
|
||||
// preview slot. Defaults to 3 (parent|current|preview).
|
||||
@@ -176,29 +184,29 @@ export function PaneRow(props: PaneRowProps) {
|
||||
|
||||
return (
|
||||
<box flexDirection="row" flexGrow={1} width="100%" height="100%">
|
||||
{/* ── parent (1/5) — previous-depth list; always muted ─────────────── */}
|
||||
{/* ── parent (1/5) — previous-depth list; title row top-left ───────── */}
|
||||
<Pane
|
||||
grow={PANE_RATIO.parent}
|
||||
label={parentLabel}
|
||||
label={currentLabel}
|
||||
content={parentContent}
|
||||
borderColor={() => theme.border}
|
||||
border={false}
|
||||
scrollFocused={() => false}
|
||||
/>
|
||||
{/* ── current — the focused list; active-border ring when focused ──────────── */}
|
||||
{/* ── current — the focused list; left/right borders only ─────────── */}
|
||||
<Pane
|
||||
grow={currentGrow()}
|
||||
label={currentLabel}
|
||||
label={() => ""}
|
||||
content={currentContent}
|
||||
borderColor={() => (focused() ? theme.borderActive : theme.border)}
|
||||
border={["left", "right"]}
|
||||
scrollFocused={() => focused()}
|
||||
/>
|
||||
{/* ── preview (2/5) — hovered-item detail; always muted ────────────── */}
|
||||
{/* ── preview (2/5) — hovered-item detail; no border, no header ────── */}
|
||||
<Show when={panes() === 3}>
|
||||
<Pane
|
||||
grow={PANE_RATIO.preview}
|
||||
label={previewLabel}
|
||||
label={() => ""}
|
||||
content={previewContent}
|
||||
borderColor={() => theme.border}
|
||||
border={false}
|
||||
scrollFocused={() => false}
|
||||
/>
|
||||
</Show>
|
||||
|
||||
@@ -23,20 +23,11 @@ import { useAppStore } from "@/stores/app";
|
||||
import { useToast } from "@/ui/toast";
|
||||
import { emit, on } from "@/utils/event-bus";
|
||||
import { LayerGraph } from "@/utils/layer-graph";
|
||||
import { TABS, TabPaneCount } from "@/utils/navigation";
|
||||
import { TABS } from "@/utils/navigation";
|
||||
import { createDispatcher } from "@/utils/dispatch";
|
||||
import { TabListPane } from "@/components/TabPanel";
|
||||
import { PaneRow } from "@/components/PaneRow";
|
||||
|
||||
const TAB_LABEL: Record<TABS, string> = {
|
||||
[TABS.FEED]: "Feed",
|
||||
[TABS.MYSHOWS]: "My Shows",
|
||||
[TABS.DISCOVER]: "Discover",
|
||||
[TABS.SEARCH]: "Search",
|
||||
[TABS.PLAYER]: "Player",
|
||||
[TABS.SETTINGS]: "Settings",
|
||||
};
|
||||
|
||||
export function Shell() {
|
||||
const theme = useTheme();
|
||||
const t = theme.theme;
|
||||
@@ -271,9 +262,7 @@ export function Shell() {
|
||||
<text fg={t.textMuted}>j/k move · l/Enter open a tab</text>
|
||||
</box>
|
||||
}
|
||||
parentLabel="Up"
|
||||
currentLabel="Tabs"
|
||||
previewLabel=""
|
||||
focused
|
||||
/>
|
||||
</Show>
|
||||
@@ -296,15 +285,6 @@ export function Shell() {
|
||||
<text fg={t.accent} paddingLeft={1}>
|
||||
{modeLabel()}
|
||||
</text>
|
||||
<text fg={t.textMuted} paddingLeft={1}>
|
||||
{nav.atRootTab()
|
||||
? "Tabs · root"
|
||||
: `${TAB_LABEL[nav.activeTab()]} · ${
|
||||
nav.isDepthTab()
|
||||
? `depth ${nav.currentDepth()}`
|
||||
: `pane ${nav.activePane()}/${TabPaneCount[nav.activeTab()]}`
|
||||
}`}
|
||||
</text>
|
||||
<Show when={nav.selectedIds().length > 0}>
|
||||
<text fg={t.warning} paddingLeft={1}>
|
||||
● {nav.selectedIds().length}
|
||||
|
||||
@@ -30,6 +30,7 @@ import { on, off } from "@/utils/event-bus";
|
||||
import type { KeybindActionName } from "@/context/KeybindContext";
|
||||
import { PaneRow } from "@/components/PaneRow";
|
||||
import { TabListPane } from "@/components/TabPanel";
|
||||
import { LoadingIndicator } from "@/components/LoadingIndicator";
|
||||
import { useScrollIntoView } from "@/hooks/useScrollIntoView";
|
||||
|
||||
export const DiscoverPaneCount = 1;
|
||||
@@ -226,7 +227,14 @@ function DiscoverPage() {
|
||||
when={podcasts().length > 0}
|
||||
fallback={
|
||||
<box padding={1}>
|
||||
<text fg={muted()}>No podcasts found. :refresh</text>
|
||||
<Show
|
||||
when={discoverStore.isLoading()}
|
||||
fallback={
|
||||
<text fg={muted()}>No podcasts found. :refresh</text>
|
||||
}
|
||||
>
|
||||
<LoadingIndicator label="Discovering…" />
|
||||
</Show>
|
||||
</box>
|
||||
}
|
||||
>
|
||||
@@ -274,6 +282,11 @@ function DiscoverPage() {
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
<Show when={discoverStore.isLoading()}>
|
||||
<box paddingLeft={2} paddingTop={1}>
|
||||
<LoadingIndicator label="Refreshing…" />
|
||||
</box>
|
||||
</Show>
|
||||
</Show>
|
||||
</Show>
|
||||
</>
|
||||
@@ -376,9 +389,7 @@ function DiscoverPage() {
|
||||
parent={parentContent}
|
||||
current={currentContent}
|
||||
preview={previewContent}
|
||||
parentLabel={() => (depth() >= 1 ? "Categories" : "Up")}
|
||||
currentLabel={currentLabel}
|
||||
previewLabel="Detail"
|
||||
focused={isActive}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -16,9 +16,10 @@
|
||||
* everything over `nav.action`; this page only handles list/preview data.
|
||||
*/
|
||||
|
||||
import { createMemo, For, Show, onMount, onCleanup } from "solid-js";
|
||||
import { createMemo, createEffect, For, Show, onMount, onCleanup } from "solid-js";
|
||||
import { useFeedStore } from "@/stores/feed";
|
||||
import { useDownloadStore } from "@/stores/download";
|
||||
import { useAppStore } from "@/stores/app";
|
||||
import { DownloadStatus } from "@/types/episode";
|
||||
import { format } from "date-fns";
|
||||
import { useTheme } from "@/context/ThemeContext";
|
||||
@@ -56,18 +57,48 @@ function FeedPage() {
|
||||
const episodes = createMemo<EpItem[]>(
|
||||
() => feedStore.getAllEpisodesChronological() as EpItem[],
|
||||
);
|
||||
|
||||
// ── Fetch More ───────────────────────────────────────────────────────────
|
||||
// A "[Fetch More]" row at the bottom of the list advances every feed's
|
||||
// loaded window by 50 episodes. manual mode: Enter on the row. auto mode:
|
||||
// reaching the bottom row fetches automatically (see the effect below).
|
||||
const app = useAppStore();
|
||||
const fetchMoreMode = () => app.state().preferences.fetchMoreMode ?? "manual";
|
||||
const showFetchMore = () => feedStore.hasMoreAcrossAll();
|
||||
// Total navigable rows: episodes + the optional Fetch More row.
|
||||
const rowCount = () => episodes().length + (showFetchMore() ? 1 : 0);
|
||||
const focus = () => nav.depthFocus(0);
|
||||
const focusedRow = () =>
|
||||
rowCount() === 0 ? 0 : Math.min(focus(), rowCount() - 1);
|
||||
const focusedOnMore = () =>
|
||||
showFetchMore() && focusedRow() === episodes().length;
|
||||
// -1 while the Fetch More row is focused so no episode row renders the
|
||||
// cursor/highlight (the button is the focused row, not the last episode).
|
||||
const focusedEpIdx = () =>
|
||||
episodes().length === 0 ? 0 : Math.min(focus(), episodes().length - 1);
|
||||
const focusedItem = (): EpItem | undefined => episodes()[focusedEpIdx()];
|
||||
const curLen = () => episodes().length;
|
||||
focusedOnMore()
|
||||
? -1
|
||||
: Math.min(focusedRow(), Math.max(episodes().length - 1, 0));
|
||||
const focusedItem = (): EpItem | undefined =>
|
||||
focusedOnMore() ? undefined : episodes()[focusedEpIdx()];
|
||||
const curLen = () => rowCount();
|
||||
const moreRef = useScrollIntoView(() => focusedOnMore());
|
||||
|
||||
const ensureFocus = () => {
|
||||
if (episodes().length > 0 && focus() >= episodes().length)
|
||||
nav.setDepthFocus(episodes().length - 1, 0);
|
||||
if (rowCount() > 0 && focus() >= rowCount())
|
||||
nav.setDepthFocus(rowCount() - 1, 0);
|
||||
};
|
||||
onMount(ensureFocus);
|
||||
|
||||
// Auto mode: reaching the bottom row loads the next batch. Guarded by
|
||||
// isLoadingMore so concurrent loads never stack.
|
||||
createEffect(() => {
|
||||
if (fetchMoreMode() !== "auto") return;
|
||||
if (!showFetchMore()) return;
|
||||
if (feedStore.isLoadingMore()) return;
|
||||
if (focusedRow() < rowCount() - 1) return;
|
||||
feedStore.loadMoreAllFeeds().catch(() => {});
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
nav.registerResolver(
|
||||
`${nav.activeTab()}:${DEPTH_CENTER_PANE}`,
|
||||
@@ -118,6 +149,10 @@ function FeedPage() {
|
||||
|
||||
// ── open ───────────────────────────────────────────────────────────────────
|
||||
function open() {
|
||||
if (focusedOnMore()) {
|
||||
feedStore.loadMoreAllFeeds().catch(() => {});
|
||||
return;
|
||||
}
|
||||
playEpisode(focusedItem());
|
||||
}
|
||||
|
||||
@@ -185,7 +220,16 @@ function FeedPage() {
|
||||
when={episodes().length > 0}
|
||||
fallback={
|
||||
<box padding={1}>
|
||||
<text fg={muted()}>No feeds. Subscribe from Discover/Search.</text>
|
||||
<Show
|
||||
when={feedStore.isLoadingFeeds()}
|
||||
fallback={
|
||||
<text fg={muted()}>
|
||||
No feeds. Subscribe from Discover/Search.
|
||||
</text>
|
||||
}
|
||||
>
|
||||
<LoadingIndicator label="Refreshing…" />
|
||||
</Show>
|
||||
</box>
|
||||
}
|
||||
>
|
||||
@@ -240,60 +284,106 @@ function FeedPage() {
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
<Show when={showFetchMore()}>
|
||||
<box
|
||||
ref={moreRef}
|
||||
flexDirection="row"
|
||||
gap={1}
|
||||
paddingLeft={1}
|
||||
paddingRight={1}
|
||||
backgroundColor={focusBg(episodes().length, focusedRow(), isActive())}
|
||||
onMouseDown={() => {
|
||||
nav.setActivePane(DEPTH_CENTER_PANE);
|
||||
nav.setDepthFocus(episodes().length, 0);
|
||||
}}
|
||||
>
|
||||
<text fg={focusFg(episodes().length, focusedRow(), isActive())}>
|
||||
{focusedOnMore() ? "❯" : " "}
|
||||
</text>
|
||||
<Show
|
||||
when={!feedStore.isLoadingMore()}
|
||||
fallback={<LoadingIndicator label="Fetching…" />}
|
||||
>
|
||||
<text fg={focusFg(episodes().length, focusedRow(), isActive())}>
|
||||
[Fetch More]
|
||||
</text>
|
||||
</Show>
|
||||
</box>
|
||||
</Show>
|
||||
<Show when={feedStore.isLoadingFeeds()}>
|
||||
<box paddingLeft={2} paddingTop={1}>
|
||||
<LoadingIndicator />
|
||||
<LoadingIndicator label="Refreshing…" />
|
||||
</box>
|
||||
</Show>
|
||||
</Show>
|
||||
);
|
||||
|
||||
// ── preview pane: hovered-episode detail ───────────────────────────────────
|
||||
// ── preview pane: hovered-episode detail (or the Fetch More row) ──────────
|
||||
const previewContent = () => (
|
||||
<Show
|
||||
when={focusedItem()}
|
||||
fallback={
|
||||
<box padding={1}>
|
||||
<text fg={muted()}>No episode focused</text>
|
||||
</box>
|
||||
}
|
||||
>
|
||||
{(item) => (
|
||||
<>
|
||||
<Show when={focusedOnMore()}>
|
||||
<box flexDirection="column" gap={1} padding={1}>
|
||||
<text fg={theme.textPrimary ?? theme.text}>
|
||||
<strong>
|
||||
{item().episode.episodeNumber
|
||||
? `#${item().episode.episodeNumber} `
|
||||
: ""}
|
||||
{item().episode.title}
|
||||
</strong>
|
||||
<strong>[Fetch More]</strong>
|
||||
</text>
|
||||
<box flexDirection="row" gap={2}>
|
||||
<text fg={theme.info}>{formatDate(item().episode.pubDate)}</text>
|
||||
<text fg={muted()}>{formatDuration(item().episode.duration)}</text>
|
||||
<Show when={downloadLabel(item().episode.id)}>
|
||||
<text fg={downloadColor(item().episode.id)}>
|
||||
{downloadLabel(item().episode.id)}
|
||||
</text>
|
||||
</Show>
|
||||
</box>
|
||||
<text fg={muted()}>
|
||||
{item().feed.customName || item().feed.podcast.title}
|
||||
</text>
|
||||
<Show when={item().feed.podcast.author}>
|
||||
<text fg={muted()}>by {item().feed.podcast.author}</text>
|
||||
</Show>
|
||||
<box height={1} />
|
||||
<text fg={theme.textSecondary}>
|
||||
{item().episode.description?.slice(0, 400) ??
|
||||
"No description available."}
|
||||
{(item().episode.description?.length ?? 0) > 400 ? "…" : ""}
|
||||
{feedStore.isLoadingMore()
|
||||
? "Loading the next batch of episodes…"
|
||||
: fetchMoreMode() === "auto"
|
||||
? "Auto mode: the next batch loads automatically at the bottom of the list."
|
||||
: "Load the next batch of older episodes across all feeds (Enter)."}
|
||||
</text>
|
||||
<box height={1} />
|
||||
<text fg={muted()}>enter: play · space: select · h back</text>
|
||||
<text fg={muted()}>enter: load more · h back</text>
|
||||
</box>
|
||||
)}
|
||||
</Show>
|
||||
</Show>
|
||||
<Show when={!focusedOnMore()}>
|
||||
<Show
|
||||
when={focusedItem()}
|
||||
fallback={
|
||||
<box padding={1}>
|
||||
<text fg={muted()}>No episode focused</text>
|
||||
</box>
|
||||
}
|
||||
>
|
||||
{(item) => (
|
||||
<box flexDirection="column" gap={1} padding={1}>
|
||||
<text fg={theme.textPrimary ?? theme.text}>
|
||||
<strong>
|
||||
{item().episode.episodeNumber
|
||||
? `#${item().episode.episodeNumber} `
|
||||
: ""}
|
||||
{item().episode.title}
|
||||
</strong>
|
||||
</text>
|
||||
<box flexDirection="row" gap={2}>
|
||||
<text fg={theme.info}>{formatDate(item().episode.pubDate)}</text>
|
||||
<text fg={muted()}>{formatDuration(item().episode.duration)}</text>
|
||||
<Show when={downloadLabel(item().episode.id)}>
|
||||
<text fg={downloadColor(item().episode.id)}>
|
||||
{downloadLabel(item().episode.id)}
|
||||
</text>
|
||||
</Show>
|
||||
</box>
|
||||
<text fg={muted()}>
|
||||
{item().feed.customName || item().feed.podcast.title}
|
||||
</text>
|
||||
<Show when={item().feed.podcast.author}>
|
||||
<text fg={muted()}>by {item().feed.podcast.author}</text>
|
||||
</Show>
|
||||
<box height={1} />
|
||||
<text fg={theme.textSecondary}>
|
||||
{item().episode.description?.slice(0, 400) ??
|
||||
"No description available."}
|
||||
{(item().episode.description?.length ?? 0) > 400 ? "…" : ""}
|
||||
</text>
|
||||
<box height={1} />
|
||||
<text fg={muted()}>enter: play · space: select · h back</text>
|
||||
</box>
|
||||
)}
|
||||
</Show>
|
||||
</Show>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
@@ -301,9 +391,7 @@ function FeedPage() {
|
||||
parent={parentContent}
|
||||
current={currentContent}
|
||||
preview={previewContent}
|
||||
parentLabel="Up"
|
||||
currentLabel={currentLabel}
|
||||
previewLabel="Detail"
|
||||
focused={isActive}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -346,7 +346,7 @@ export function MyShowsPage() {
|
||||
</For>
|
||||
<Show when={feedStore.isLoadingMore()}>
|
||||
<box paddingLeft={2} paddingTop={1}>
|
||||
<LoadingIndicator />
|
||||
<LoadingIndicator label="Loading more…" />
|
||||
</box>
|
||||
</Show>
|
||||
</Show>
|
||||
@@ -432,9 +432,7 @@ export function MyShowsPage() {
|
||||
parent={parentContent}
|
||||
current={currentContent}
|
||||
preview={previewContent}
|
||||
parentLabel={() => (depth() >= 1 ? "Shows" : "Up")}
|
||||
currentLabel={currentLabel}
|
||||
previewLabel="Detail"
|
||||
focused={isActive}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -119,7 +119,6 @@ export function PlayerPage() {
|
||||
<PaneRow
|
||||
parent={parentContent}
|
||||
current={currentContent}
|
||||
parentLabel="Up"
|
||||
currentLabel="Player"
|
||||
panes={2}
|
||||
focused={isActive}
|
||||
|
||||
@@ -40,6 +40,7 @@ import type { KeybindActionName } from "@/context/KeybindContext";
|
||||
import type { SearchResult } from "@/types/source";
|
||||
import { PaneRow } from "@/components/PaneRow";
|
||||
import { TabListPane } from "@/components/TabPanel";
|
||||
import { LoadingIndicator } from "@/components/LoadingIndicator";
|
||||
import { useScrollIntoView } from "@/hooks/useScrollIntoView";
|
||||
|
||||
export const SearchPaneCount = 1;
|
||||
@@ -241,7 +242,7 @@ function SearchPage() {
|
||||
/>
|
||||
</box>
|
||||
<Show when={searchStore.isSearching()}>
|
||||
<text fg={theme.warning}>Searching...</text>
|
||||
<LoadingIndicator label="Searching…" />
|
||||
</Show>
|
||||
<Show when={searchStore.error()}>
|
||||
<text fg={theme.error}>{searchStore.error()}</text>
|
||||
@@ -298,11 +299,18 @@ function SearchPage() {
|
||||
when={results().length > 0}
|
||||
fallback={
|
||||
<box padding={1}>
|
||||
<text fg={muted()}>
|
||||
{searchStore.query()
|
||||
? "No results found"
|
||||
: "Enter a search term to find podcasts"}
|
||||
</text>
|
||||
<Show
|
||||
when={searchStore.isSearching()}
|
||||
fallback={
|
||||
<text fg={muted()}>
|
||||
{searchStore.query()
|
||||
? "No results found"
|
||||
: "Enter a search term to find podcasts"}
|
||||
</text>
|
||||
}
|
||||
>
|
||||
<LoadingIndicator label="Searching…" />
|
||||
</Show>
|
||||
</box>
|
||||
}
|
||||
>
|
||||
@@ -431,9 +439,7 @@ function SearchPage() {
|
||||
parent={parentContent}
|
||||
current={currentContent}
|
||||
preview={previewContent}
|
||||
parentLabel={() => (depth() >= 1 ? "Query" : "Up")}
|
||||
currentLabel={currentLabel}
|
||||
previewLabel="Detail"
|
||||
focused={isActive}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -115,5 +115,19 @@ export function usePreferencesItems(): SettingItem[] {
|
||||
autoJumpToPlayer: !prefs().autoJumpToPlayer,
|
||||
}),
|
||||
},
|
||||
{
|
||||
id: "fetchMore",
|
||||
label: "Fetch More",
|
||||
kind: "select",
|
||||
display: () => (prefs().fetchMoreMode === "auto" ? "Auto" : "Manual"),
|
||||
help: () =>
|
||||
`How the Feed list loads older episodes.\nManual: a "[Fetch More]" button at the bottom of the list.\nAuto: fetches automatically when reaching the bottom.\nType: select\nDefault: manual\nCurrent: ${prefs().fetchMoreMode === "auto" ? "Auto" : "Manual"}\nCycle with j/k; Enter to apply.`,
|
||||
cycle: (dir) => {
|
||||
const modes: Array<"manual" | "auto"> = ["manual", "auto"];
|
||||
const idx = modes.indexOf(prefs().fetchMoreMode ?? "manual");
|
||||
const next = modes[(idx + dir + modes.length) % modes.length];
|
||||
app.updatePreferences({ fetchMoreMode: next });
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
@@ -267,12 +267,6 @@ export function SettingsPage() {
|
||||
if (d === 1) return sectionForDepth1()?.label ?? "Items";
|
||||
return editorItem()?.label ?? "Editor";
|
||||
};
|
||||
const parentLabel = () => {
|
||||
const d = depth();
|
||||
if (d === 1) return "Sections";
|
||||
if (d === 2) return sectionForDepth1()?.label ?? "";
|
||||
return "Up";
|
||||
};
|
||||
|
||||
// ── parent pane: previous-depth list (blank at depth 0) ────────────────
|
||||
// Sibling <Show> blocks per depth (mirrors the preview pane) so Solid
|
||||
@@ -384,9 +378,7 @@ export function SettingsPage() {
|
||||
parent={parentContent}
|
||||
current={currentContent}
|
||||
preview={previewContent}
|
||||
parentLabel={parentLabel}
|
||||
currentLabel={currentLabel}
|
||||
previewLabel="Detail"
|
||||
focused={isActive}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -37,6 +37,7 @@ const defaultPreferences: UserPreferences = {
|
||||
showExplicit: false,
|
||||
autoDownload: false,
|
||||
autoJumpToPlayer: true,
|
||||
fetchMoreMode: "manual",
|
||||
};
|
||||
|
||||
const defaultState: AppState = {
|
||||
|
||||
@@ -399,52 +399,79 @@ function createFeedStore() {
|
||||
return loaded < cached.length;
|
||||
};
|
||||
|
||||
/** Load the next chunk of episodes for one feed from the cache.
|
||||
* No global guard — callers own the `isLoadingMore` flag so batches
|
||||
* (loadMoreAllFeeds) can loop over multiple feeds in one go. */
|
||||
const loadMoreEpisodesForFeed = async (feedId: string) => {
|
||||
const feed = getFeed(feedId);
|
||||
if (!feed) return;
|
||||
|
||||
let cached = fullEpisodeCache.get(feedId);
|
||||
|
||||
// If no cache, re-fetch and parse the full feed
|
||||
if (!cached) {
|
||||
const response = await fetch(feed.podcast.feedUrl, {
|
||||
headers: {
|
||||
"Accept-Encoding": "identity",
|
||||
Accept: "application/rss+xml, application/xml, text/xml, */*",
|
||||
},
|
||||
});
|
||||
if (!response.ok) return;
|
||||
const xml = await response.text();
|
||||
const parsed = parseRSSFeed(xml, feed.podcast.feedUrl);
|
||||
cached = parsed.episodes;
|
||||
fullEpisodeCache.set(feedId, cached);
|
||||
// Set current load count to match what's already displayed
|
||||
episodeLoadCount.set(feedId, feed.episodes.length);
|
||||
}
|
||||
|
||||
const currentCount = episodeLoadCount.get(feedId) ?? feed.episodes.length;
|
||||
const newCount = Math.min(
|
||||
currentCount + MAX_EPISODES_REFRESH,
|
||||
cached.length,
|
||||
);
|
||||
|
||||
if (newCount <= currentCount) return; // nothing more to load
|
||||
|
||||
episodeLoadCount.set(feedId, newCount);
|
||||
const episodes = cached.slice(0, newCount);
|
||||
|
||||
setFeeds((prev) => {
|
||||
const updated = prev.map((f) =>
|
||||
f.id === feedId ? { ...f, episodes } : f,
|
||||
);
|
||||
saveFeeds(updated);
|
||||
return updated;
|
||||
});
|
||||
};
|
||||
|
||||
/** Load the next chunk of episodes for a feed from the cache.
|
||||
* If no cache exists (e.g. app restart), re-fetches from the RSS feed. */
|
||||
const loadMoreEpisodes = async (feedId: string) => {
|
||||
if (isLoadingMore()) return;
|
||||
const feed = getFeed(feedId);
|
||||
if (!feed) return;
|
||||
|
||||
setIsLoadingMore(true);
|
||||
try {
|
||||
let cached = fullEpisodeCache.get(feedId);
|
||||
await loadMoreEpisodesForFeed(feedId);
|
||||
} finally {
|
||||
setIsLoadingMore(false);
|
||||
}
|
||||
};
|
||||
|
||||
// If no cache, re-fetch and parse the full feed
|
||||
if (!cached) {
|
||||
const response = await fetch(feed.podcast.feedUrl, {
|
||||
headers: {
|
||||
"Accept-Encoding": "identity",
|
||||
Accept: "application/rss+xml, application/xml, text/xml, */*",
|
||||
},
|
||||
});
|
||||
if (!response.ok) return;
|
||||
const xml = await response.text();
|
||||
const parsed = parseRSSFeed(xml, feed.podcast.feedUrl);
|
||||
cached = parsed.episodes;
|
||||
fullEpisodeCache.set(feedId, cached);
|
||||
// Set current load count to match what's already displayed
|
||||
episodeLoadCount.set(feedId, feed.episodes.length);
|
||||
/** True if any feed still has cached episodes beyond its loaded window. */
|
||||
const hasMoreAcrossAll = (): boolean => {
|
||||
return feeds().some((f) => hasMoreEpisodes(f.id));
|
||||
};
|
||||
|
||||
/** Advance the loaded window by MAX_EPISODES_REFRESH for every feed that
|
||||
* still has cached episodes — powers the Feed page's "[Fetch More]". */
|
||||
const loadMoreAllFeeds = async () => {
|
||||
if (isLoadingMore()) return;
|
||||
setIsLoadingMore(true);
|
||||
try {
|
||||
const pending = feeds().filter((f) => hasMoreEpisodes(f.id));
|
||||
for (const feed of pending) {
|
||||
await loadMoreEpisodesForFeed(feed.id);
|
||||
}
|
||||
|
||||
const currentCount = episodeLoadCount.get(feedId) ?? feed.episodes.length;
|
||||
const newCount = Math.min(
|
||||
currentCount + MAX_EPISODES_REFRESH,
|
||||
cached.length,
|
||||
);
|
||||
|
||||
if (newCount <= currentCount) return; // nothing more to load
|
||||
|
||||
episodeLoadCount.set(feedId, newCount);
|
||||
const episodes = cached.slice(0, newCount);
|
||||
|
||||
setFeeds((prev) => {
|
||||
const updated = prev.map((f) =>
|
||||
f.id === feedId ? { ...f, episodes } : f,
|
||||
);
|
||||
saveFeeds(updated);
|
||||
return updated;
|
||||
});
|
||||
} finally {
|
||||
setIsLoadingMore(false);
|
||||
}
|
||||
@@ -487,6 +514,8 @@ function createFeedStore() {
|
||||
refreshFeed,
|
||||
refreshAllFeeds,
|
||||
loadMoreEpisodes,
|
||||
loadMoreAllFeeds,
|
||||
hasMoreAcrossAll,
|
||||
addSource,
|
||||
removeSource,
|
||||
toggleSource,
|
||||
|
||||
@@ -84,11 +84,16 @@ export type AppSettings = {
|
||||
visualizer: VisualizerSettings;
|
||||
};
|
||||
|
||||
/** How the Feed list loads older episodes (default: manual "[Fetch More]"). */
|
||||
export type FetchMoreMode = "manual" | "auto";
|
||||
|
||||
export type UserPreferences = {
|
||||
showExplicit: boolean;
|
||||
autoDownload: boolean;
|
||||
/** Jump to the Player view automatically when playback starts (default: true) */
|
||||
autoJumpToPlayer: boolean;
|
||||
/** Load older episodes from the Feed list: manual button or automatic at the bottom (default: manual). */
|
||||
fetchMoreMode: FetchMoreMode;
|
||||
};
|
||||
|
||||
export type AppState = {
|
||||
|
||||
@@ -40,6 +40,7 @@ const defaultPreferences: UserPreferences = {
|
||||
showExplicit: false,
|
||||
autoDownload: false,
|
||||
autoJumpToPlayer: true,
|
||||
fetchMoreMode: "manual",
|
||||
};
|
||||
|
||||
const defaultState: AppState = {
|
||||
|
||||
@@ -3,13 +3,14 @@
|
||||
*
|
||||
* Verified through the opentui test renderer's captured frames (the same
|
||||
* mechanism the `.harness` drive uses), since `flexGrow` ratios are only
|
||||
* observable as rendered column widths and border colors.
|
||||
* observable as rendered column widths.
|
||||
*
|
||||
* • Unit: three columns render at 1:2:2 (e.g. 20/40/40 of 100) even when the
|
||||
* parent and preview children are null, and the blank parent keeps its
|
||||
* slot with a muted placeholder.
|
||||
* • Integration: toggling `focused` moves the accent focus ring onto/off the
|
||||
* current column; parent & preview borders stay muted either way.
|
||||
* • Integration: the current pane renders muted left/right border edges
|
||||
* only (no full box, no accent ring) — `focused` toggles scroll-following
|
||||
* but never changes the border; parent and preview stay borderless.
|
||||
*
|
||||
* Runs via `bun test`. The `[test] preload = "@opentui/solid/preload"` entry
|
||||
* in bunfig.toml registers the solid JSX transform for the test runner, so
|
||||
@@ -21,52 +22,40 @@ import { testRender } from "@opentui/solid";
|
||||
import { ThemeProvider } from "../src/context/ThemeContext";
|
||||
import { PaneRow } from "../src/components/PaneRow";
|
||||
|
||||
type Span = { text: string; fg: { buffer: ArrayLike<number> } | null };
|
||||
type Frame = { lines: { spans: Span[] }[] };
|
||||
type Span = { text: string };
|
||||
type Frame = { cols: number; lines: { spans: Span[] }[] };
|
||||
|
||||
// ── Frame introspection helpers ─────────────────────────────────────────────
|
||||
function hexOf(fg: Span["fg"]): string | null {
|
||||
if (!fg?.buffer) return null;
|
||||
const b = fg.buffer;
|
||||
if (b[3] === 0) return null;
|
||||
return (
|
||||
"#" +
|
||||
[0, 1, 2]
|
||||
.map((i) =>
|
||||
Math.max(0, Math.min(255, Math.round(b[i] * 255)))
|
||||
.toString(16)
|
||||
.padStart(2, "0"),
|
||||
)
|
||||
.join("")
|
||||
/** Positions of all `│` border glyphs in the first body line that has any. */
|
||||
function borderColumns(frame: Frame): number[] {
|
||||
const line = frame.lines.find((l) =>
|
||||
l.spans.some((s) => s.text.includes("│")),
|
||||
);
|
||||
}
|
||||
|
||||
/** Column border colors, scanned from the top border row (`┌───┐…`). */
|
||||
function columnBorders(spans: Frame): string[] {
|
||||
const line = spans.lines[1];
|
||||
if (!line) return [];
|
||||
const out: string[] = [];
|
||||
const cols: number[] = [];
|
||||
let col = 0;
|
||||
for (const sp of line.spans) {
|
||||
for (const ch of sp.text) {
|
||||
if (ch === "┌") out.push(hexOf(sp.fg) ?? "default");
|
||||
if (ch === "│") cols.push(col);
|
||||
col++;
|
||||
}
|
||||
}
|
||||
return out;
|
||||
return cols;
|
||||
}
|
||||
|
||||
/** Column widths (including borders), from the top border row. */
|
||||
/**
|
||||
* Column widths, measured from the current pane's left/right border glyphs:
|
||||
* the parent runs from column 0 to the left border, the current pane spans
|
||||
* both borders, the preview runs from the right border to the frame's edge.
|
||||
*/
|
||||
function columnWidths(spans: Frame): number[] {
|
||||
const line = spans.lines[1];
|
||||
if (!line) return [];
|
||||
const widths: number[] = [];
|
||||
for (const sp of line.spans) {
|
||||
for (const ch of sp.text) {
|
||||
if (ch === "┌") widths.push(0);
|
||||
else if (widths.length && ch === "─") widths[widths.length - 1]++;
|
||||
else if (widths.length && ch === "┐") widths[widths.length - 1] += 2;
|
||||
}
|
||||
}
|
||||
return widths;
|
||||
const [a, b] = borderColumns(spans);
|
||||
if (b === undefined) return [];
|
||||
return [a, b - a + 1, spans.cols - b - 1];
|
||||
}
|
||||
|
||||
/** Entire frame as plain text — used to assert no border glyphs remain. */
|
||||
function frameText(spans: Frame): string {
|
||||
return spans.lines.map((l) => l.spans.map((s) => s.text).join("")).join("\n");
|
||||
}
|
||||
|
||||
// Element children must be accessors (`() => JSX`): JSX elements are only
|
||||
@@ -92,20 +81,25 @@ async function renderPaneRow(props: TestPaneProps): Promise<{
|
||||
parent={props.parent as any}
|
||||
current={props.current as any}
|
||||
preview={props.preview as any}
|
||||
parentLabel="Up"
|
||||
currentLabel="List"
|
||||
previewLabel="Detail"
|
||||
focused={props.focused as any}
|
||||
/>
|
||||
</ThemeProvider>
|
||||
),
|
||||
{ width: props.width ?? 100, height: props.height ?? 8, useThread: false },
|
||||
);
|
||||
for (let i = 0; i < 6; i++) {
|
||||
// ThemeProvider only mounts its children once the theme resolves (async
|
||||
// palette/theme loading). Poll the title row until it renders, so the
|
||||
// captured frame below is actually a mounted PaneRow.
|
||||
let spans: Frame | null = null;
|
||||
for (let i = 0; i < 40 && !spans; i++) {
|
||||
await setup.renderOnce();
|
||||
await new Promise((r) => setTimeout(r, 40));
|
||||
const frame = setup.captureSpans() as unknown as Frame;
|
||||
const head = frame.lines[0]?.spans.map((s) => s.text).join("") ?? "";
|
||||
if (head.includes("List")) spans = frame;
|
||||
else await new Promise((r) => setTimeout(r, 100));
|
||||
}
|
||||
const spans = setup.captureSpans() as unknown as Frame;
|
||||
if (!spans) throw new Error("PaneRow did not render before timeout");
|
||||
return {
|
||||
spans,
|
||||
destroy: async () => {
|
||||
@@ -138,7 +132,7 @@ describe("PaneRow layout", () => {
|
||||
const widths = columnWidths(spans);
|
||||
expect(widths).toHaveLength(3);
|
||||
const [p, c, v] = widths;
|
||||
// 100-wide row splits as 20 / 40 / 40 (1/5 : 2/5 : 2/5, borders included).
|
||||
// 100-wide row splits as 20 / 40 / 40 (1/5 : 2/5 : 2/5).
|
||||
expect(p).toBe(20);
|
||||
expect(c).toBe(40);
|
||||
expect(v).toBe(40);
|
||||
@@ -171,9 +165,14 @@ describe("PaneRow layout", () => {
|
||||
});
|
||||
});
|
||||
|
||||
// ── Integration: focused toggles the accent ring on the current column ─────
|
||||
describe("PaneRow focus ring", () => {
|
||||
test("focused=true puts the accent border on current; parent/preview stay muted", async () => {
|
||||
// ── Integration: the current pane carries muted left/right borders only ────
|
||||
describe("PaneRow current-pane borders", () => {
|
||||
// The current column renders left/right edge glyphs (│) only — never a
|
||||
// full box. `focused` gates scroll-following but never changes the border
|
||||
// (always muted — no accent ring), and parent/preview stay borderless.
|
||||
const boxGlyphs = /[┌┐└┘─]/;
|
||||
|
||||
test("focused=true renders left/right borders on the current pane only", async () => {
|
||||
const { spans, destroy } = await renderPaneRow({
|
||||
parent: null,
|
||||
current: () => <text>ITEM</text>,
|
||||
@@ -182,14 +181,13 @@ describe("PaneRow focus ring", () => {
|
||||
});
|
||||
cleanups.push(destroy);
|
||||
|
||||
const [parent, current, preview] = columnBorders(spans);
|
||||
// parent & preview are muted; current is the (different) accent color.
|
||||
expect(parent).toBe(preview);
|
||||
expect(current).not.toBe(parent);
|
||||
expect(current).not.toBe("default");
|
||||
// 100-wide row splits as 20 / 40 / 40: the current pane's edges sit at
|
||||
// columns 20 and 59. No horizontal or corner glyphs — edges only.
|
||||
expect(borderColumns(spans)).toEqual([20, 59]);
|
||||
expect(frameText(spans)).not.toMatch(boxGlyphs);
|
||||
});
|
||||
|
||||
test("focused=false mutes the current column (no accent ring anywhere)", async () => {
|
||||
test("focused=false renders the same muted borders (no accent ring)", async () => {
|
||||
const { spans, destroy } = await renderPaneRow({
|
||||
parent: null,
|
||||
current: () => <text>ITEM</text>,
|
||||
@@ -198,9 +196,8 @@ describe("PaneRow focus ring", () => {
|
||||
});
|
||||
cleanups.push(destroy);
|
||||
|
||||
const [parent, current, preview] = columnBorders(spans);
|
||||
expect(current).toBe(parent);
|
||||
expect(preview).toBe(parent);
|
||||
expect(borderColumns(spans)).toEqual([20, 59]);
|
||||
expect(frameText(spans)).not.toMatch(boxGlyphs);
|
||||
});
|
||||
|
||||
test("accepts an accessor for focused (reactive boolean)", async () => {
|
||||
@@ -211,9 +208,8 @@ describe("PaneRow focus ring", () => {
|
||||
focused: () => true,
|
||||
});
|
||||
cleanups.push(destroy);
|
||||
|
||||
const [parent, current] = columnBorders(spans);
|
||||
expect(current).not.toBe(parent); // accessor resolves true → accent ring
|
||||
expect(borderColumns(spans)).toEqual([20, 59]);
|
||||
expect(frameText(spans)).not.toMatch(boxGlyphs);
|
||||
|
||||
const { spans: spans2, destroy: destroy2 } = await renderPaneRow({
|
||||
parent: null,
|
||||
@@ -222,18 +218,18 @@ describe("PaneRow focus ring", () => {
|
||||
focused: () => false,
|
||||
});
|
||||
cleanups.push(destroy2);
|
||||
const [p2, c2] = columnBorders(spans2);
|
||||
expect(c2).toBe(p2); // accessor resolves false → muted
|
||||
expect(borderColumns(spans2)).toEqual([20, 59]);
|
||||
expect(frameText(spans2)).not.toMatch(boxGlyphs);
|
||||
});
|
||||
|
||||
test("defaults to focused (current column carries the accent ring)", async () => {
|
||||
test("defaults to focused (same muted borders)", async () => {
|
||||
const { spans, destroy } = await renderPaneRow({
|
||||
parent: null,
|
||||
current: () => <text>ITEM</text>,
|
||||
preview: null,
|
||||
});
|
||||
cleanups.push(destroy);
|
||||
const [parent, current] = columnBorders(spans);
|
||||
expect(current).not.toBe(parent);
|
||||
expect(borderColumns(spans)).toEqual([20, 59]);
|
||||
expect(frameText(spans)).not.toMatch(boxGlyphs);
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user