Compare commits
22
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
92697b11c5 | ||
|
|
b409c57296 | ||
|
|
00191c8d7a | ||
|
|
56c363a517 | ||
|
|
5ad91b4ab6 | ||
|
|
1843522b45 | ||
|
|
41ddecf5a7 | ||
|
|
b06c37affa | ||
|
|
b4912f5879 | ||
|
|
27f2558193 | ||
|
|
3a9bf1b7ce | ||
|
|
dd5760c436 | ||
|
|
eee3630f04 | ||
|
|
b31790ff48 | ||
|
|
2f4973ed70 | ||
|
|
26b00608b2 | ||
|
|
c2455bb08c | ||
|
|
22ff1349f3 | ||
|
|
8b72573521 | ||
|
|
f64032dcbe | ||
|
|
8fd1761688 | ||
|
|
7022f20b76 |
@@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"name": "trx-rs SDK",
|
||||||
|
"image": "git.haxx.space/sjg/trx-rs/sdk:latest",
|
||||||
|
"workspaceFolder": "/work",
|
||||||
|
"workspaceMount": "source=${localWorkspaceFolder},target=/work,type=bind",
|
||||||
|
"mounts": [
|
||||||
|
"source=trx-rs-sccache,target=/sccache,type=volume"
|
||||||
|
],
|
||||||
|
"containerEnv": {
|
||||||
|
"RUSTC_WRAPPER": "sccache",
|
||||||
|
"CARGO_INCREMENTAL": "0",
|
||||||
|
"SCCACHE_DIR": "/sccache"
|
||||||
|
},
|
||||||
|
"customizations": {
|
||||||
|
"vscode": {
|
||||||
|
"extensions": [
|
||||||
|
"rust-lang.rust-analyzer",
|
||||||
|
"tamasfe.even-better-toml"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+24
-14
@@ -2,10 +2,11 @@
|
|||||||
#
|
#
|
||||||
# SPDX-License-Identifier: GPL-2.0-or-later
|
# SPDX-License-Identifier: GPL-2.0-or-later
|
||||||
|
|
||||||
# CI for the self-hosted, host-executor Podman runners (see container/).
|
# CI for the Docker-executor runner (VM). The lint, test and frontend jobs run
|
||||||
# The runner image bakes in the Rust toolchain and all build dependencies,
|
# inside the shared trx-rs SDK image (container/Containerfile), which bakes in
|
||||||
# so jobs go straight to cargo — no apt/rustup setup steps (which also
|
# the pinned Rust toolchain, Node.js, Chromium and all build dependencies. The
|
||||||
# collided on the dpkg lock when jobs ran concurrently in the same runner).
|
# reuse job uses the upstream Docker action, which the Docker executor launches
|
||||||
|
# as a sibling container.
|
||||||
|
|
||||||
name: CI
|
name: CI
|
||||||
|
|
||||||
@@ -16,28 +17,44 @@ on:
|
|||||||
|
|
||||||
env:
|
env:
|
||||||
CARGO_TERM_COLOR: always
|
CARGO_TERM_COLOR: always
|
||||||
|
# sccache: shared compilation cache persisted on the runner host (see the
|
||||||
|
# -v mount in runner-config.example.yaml). CARGO_INCREMENTAL=0 because
|
||||||
|
# sccache cannot cache incremental artifacts.
|
||||||
|
RUSTC_WRAPPER: sccache
|
||||||
|
CARGO_INCREMENTAL: "0"
|
||||||
|
SCCACHE_DIR: /sccache
|
||||||
|
SCCACHE_CACHE_SIZE: "20G"
|
||||||
|
|
||||||
jobs:
|
jobs:
|
||||||
lint:
|
lint:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
|
container: git.haxx.space/sjg/trx-rs/sdk:latest
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v4
|
- uses: actions/checkout@v4
|
||||||
- name: rustfmt
|
- name: rustfmt
|
||||||
run: cargo fmt --all -- --check
|
run: cargo fmt --all -- --check
|
||||||
- name: clippy
|
- name: clippy
|
||||||
run: cargo clippy --workspace --all-targets --all-features -- -D warnings
|
run: cargo clippy --workspace --all-targets --all-features -- -D warnings
|
||||||
|
- name: sccache stats
|
||||||
|
if: always()
|
||||||
|
run: sccache --show-stats
|
||||||
|
|
||||||
test:
|
test:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
|
container: git.haxx.space/sjg/trx-rs/sdk:latest
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v4
|
- uses: actions/checkout@v4
|
||||||
- name: Build
|
- name: Build
|
||||||
run: cargo build --workspace --all-targets --locked
|
run: cargo build --workspace --all-targets --locked
|
||||||
- name: Test
|
- name: Test
|
||||||
run: cargo test --workspace --locked
|
run: cargo test --workspace --locked
|
||||||
|
- name: sccache stats
|
||||||
|
if: always()
|
||||||
|
run: sccache --show-stats
|
||||||
|
|
||||||
frontend:
|
frontend:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
|
container: git.haxx.space/sjg/trx-rs/sdk:latest
|
||||||
defaults:
|
defaults:
|
||||||
run:
|
run:
|
||||||
working-directory: src/trx-client/trx-frontend/trx-frontend-http/frontend
|
working-directory: src/trx-client/trx-frontend/trx-frontend-http/frontend
|
||||||
@@ -58,22 +75,15 @@ jobs:
|
|||||||
run: npm run lint
|
run: npm run lint
|
||||||
- name: Test
|
- name: Test
|
||||||
run: npm test
|
run: npm test
|
||||||
- name: Install browser smoke dependency
|
# Chromium comes from the SDK image at the path the smoke test defaults
|
||||||
run: command -v chromium >/dev/null || (sudo apt-get update && sudo apt-get install -y --no-install-recommends chromium)
|
# to, so there is nothing to install here.
|
||||||
- name: Browser smoke test
|
- name: Browser smoke test
|
||||||
run: npm run test:browser
|
run: npm run test:browser
|
||||||
- name: Verify generated assets
|
- name: Verify generated assets
|
||||||
run: npm run verify-generated
|
run: npm run verify-generated
|
||||||
- name: Verify generated-file licensing
|
|
||||||
working-directory: .
|
|
||||||
run: reuse lint
|
|
||||||
|
|
||||||
reuse:
|
reuse:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v4
|
- uses: actions/checkout@v4
|
||||||
- name: REUSE compliance
|
- uses: fsfe/reuse-action@v5
|
||||||
# `reuse` CLI instead of fsfe/reuse-action: the latter is a Docker
|
|
||||||
# action, which the host-executor runners cannot run. `reuse` is baked
|
|
||||||
# into the runner image (see container/Containerfile).
|
|
||||||
run: reuse lint
|
|
||||||
|
|||||||
@@ -12,6 +12,8 @@ path = [
|
|||||||
"trx-rs.toml.example",
|
"trx-rs.toml.example",
|
||||||
"docs/**",
|
"docs/**",
|
||||||
"aidocs/**",
|
"aidocs/**",
|
||||||
|
"container/**",
|
||||||
|
".devcontainer/**",
|
||||||
"src/decoders/trx-ftx/README.md",
|
"src/decoders/trx-ftx/README.md",
|
||||||
"src/decoders/trx-wxsat/README.md",
|
"src/decoders/trx-wxsat/README.md",
|
||||||
"assets/trx-logo.png",
|
"assets/trx-logo.png",
|
||||||
|
|||||||
+44
-37
@@ -2,60 +2,67 @@
|
|||||||
#
|
#
|
||||||
# SPDX-License-Identifier: GPL-2.0-or-later
|
# SPDX-License-Identifier: GPL-2.0-or-later
|
||||||
|
|
||||||
# Gitea Actions runner image for trx-rs CI (host-executor / "Pattern B").
|
# trx-rs SDK / build image.
|
||||||
#
|
#
|
||||||
# All build dependencies, the Rust toolchain, Node.js (for JS actions such as
|
# Single source of truth for the build environment. Used two ways:
|
||||||
# actions/checkout and actions/cache) and the `reuse` tool are baked in, so CI
|
# * CI — as the job container for the lint/test jobs (Docker executor).
|
||||||
# runs skip the per-run apt/rustup install cost. `sudo` is present so the
|
# * Dev — run locally or via .devcontainer for a reproducible toolchain.
|
||||||
# existing workflow's `sudo apt-get ...` / rustup steps remain valid — they
|
#
|
||||||
# just become fast no-ops because everything is already installed.
|
# Pinning the Rust version here (and in rust-toolchain.toml) means CI and every
|
||||||
|
# developer share the exact same rustc/clippy, so "works locally, fails in CI"
|
||||||
|
# cannot happen.
|
||||||
FROM docker.io/library/debian:bookworm-slim
|
FROM docker.io/library/debian:bookworm-slim
|
||||||
|
|
||||||
ARG ACT_RUNNER_VERSION=0.2.11
|
# Keep in sync with rust-toolchain.toml.
|
||||||
|
ARG RUST_VERSION=1.97.1
|
||||||
ARG NODE_MAJOR=20
|
ARG NODE_MAJOR=20
|
||||||
|
|
||||||
ENV DEBIAN_FRONTEND=noninteractive \
|
ENV DEBIAN_FRONTEND=noninteractive \
|
||||||
RUSTUP_HOME=/opt/rustup \
|
RUSTUP_HOME=/usr/local/rustup \
|
||||||
CARGO_HOME=/opt/cargo \
|
CARGO_HOME=/usr/local/cargo \
|
||||||
PATH=/opt/cargo/bin:/usr/local/bin:/usr/bin:/bin
|
PATH=/usr/local/cargo/bin:/usr/local/bin:/usr/bin:/bin
|
||||||
|
|
||||||
# Base tooling + trx-rs build dependencies (mirrors .gitea/workflows/ci.yml).
|
# Build dependencies (mirror README's manual instructions).
|
||||||
RUN apt-get update && apt-get install -y --no-install-recommends \
|
RUN apt-get update && apt-get install -y --no-install-recommends \
|
||||||
ca-certificates curl xz-utils git sudo pipx \
|
ca-certificates curl git \
|
||||||
build-essential pkg-config cmake clang libclang-dev \
|
build-essential pkg-config cmake clang libclang-dev \
|
||||||
libopus-dev libasound2-dev libsoapysdr-dev chromium \
|
libopus-dev libasound2-dev libsoapysdr-dev chromium \
|
||||||
&& rm -rf /var/lib/apt/lists/*
|
&& rm -rf /var/lib/apt/lists/*
|
||||||
|
|
||||||
# Node.js (JS-based actions need node in PATH under the host executor).
|
# Node.js — JS-based actions (actions/checkout, actions/cache) run *inside*
|
||||||
|
# the job container under the Docker executor, so node must be present.
|
||||||
RUN curl -fsSL https://deb.nodesource.com/setup_${NODE_MAJOR}.x | bash - \
|
RUN curl -fsSL https://deb.nodesource.com/setup_${NODE_MAJOR}.x | bash - \
|
||||||
&& apt-get install -y --no-install-recommends nodejs \
|
&& apt-get install -y --no-install-recommends nodejs \
|
||||||
&& rm -rf /var/lib/apt/lists/*
|
&& rm -rf /var/lib/apt/lists/*
|
||||||
|
|
||||||
# REUSE >= 3 (Debian's packaged reuse is too old for REUSE.toml).
|
# Pinned Rust toolchain, installed world-readable so any UID the runner or a
|
||||||
# The [charset-normalizer] extra provides an encoding-detection backend;
|
# devcontainer uses can invoke cargo.
|
||||||
# without it (and without libmagic) reuse fails to import at runtime.
|
|
||||||
RUN PIPX_HOME=/opt/pipx PIPX_BIN_DIR=/usr/local/bin pipx install 'reuse[charset-normalizer]'
|
|
||||||
|
|
||||||
# Rust stable with rustfmt + clippy, installed system-wide.
|
|
||||||
RUN curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs \
|
RUN curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs \
|
||||||
| sh -s -- -y --no-modify-path --profile minimal \
|
| sh -s -- -y --no-modify-path \
|
||||||
|
--default-toolchain "${RUST_VERSION}" --profile minimal \
|
||||||
--component rustfmt --component clippy \
|
--component rustfmt --component clippy \
|
||||||
&& chmod -R a+rwX "$CARGO_HOME" "$RUSTUP_HOME"
|
&& chmod -R a+rwX "$RUSTUP_HOME" "$CARGO_HOME"
|
||||||
|
|
||||||
# act_runner binary.
|
# sccache — shared compilation cache. Enabled at build time via
|
||||||
RUN arch="$(dpkg --print-architecture)"; \
|
# RUSTC_WRAPPER (see the CI workflow and .devcontainer), not repo-wide, so
|
||||||
case "$arch" in amd64) rarch=amd64;; arm64) rarch=arm64;; *) echo "unsupported arch $arch" >&2; exit 1;; esac; \
|
# non-SDK builds are unaffected. musl build is static and runs anywhere.
|
||||||
curl -fsSL -o /usr/local/bin/act_runner \
|
#
|
||||||
"https://gitea.com/gitea/act_runner/releases/download/v${ACT_RUNNER_VERSION}/act_runner-${ACT_RUNNER_VERSION}-linux-${rarch}" \
|
# The release asset is per-architecture, so resolve it from `uname -m` rather
|
||||||
&& chmod +x /usr/local/bin/act_runner
|
# than hardcoding one triple: everything else in this image is arch-agnostic,
|
||||||
|
# and a pinned x86_64 URL is what forces an amd64 build (and Rosetta or qemu)
|
||||||
|
# on an arm64 host. `uname -m` reflects the build platform under plain
|
||||||
|
# docker/podman build as well as buildx, unlike the BuildKit-only TARGETARCH.
|
||||||
|
ARG SCCACHE_VERSION=0.8.2
|
||||||
|
RUN set -eux; \
|
||||||
|
case "$(uname -m)" in \
|
||||||
|
x86_64) sccache_arch=x86_64 ;; \
|
||||||
|
aarch64|arm64) sccache_arch=aarch64 ;; \
|
||||||
|
*) echo "unsupported architecture for sccache: $(uname -m)" >&2; exit 1 ;; \
|
||||||
|
esac; \
|
||||||
|
sccache_dist="sccache-v${SCCACHE_VERSION}-${sccache_arch}-unknown-linux-musl"; \
|
||||||
|
curl -fsSL "https://github.com/mozilla/sccache/releases/download/v${SCCACHE_VERSION}/${sccache_dist}.tar.gz" \
|
||||||
|
| tar -xz -C /tmp; \
|
||||||
|
install -m755 "/tmp/${sccache_dist}/sccache" /usr/local/bin/sccache; \
|
||||||
|
rm -rf /tmp/sccache-*
|
||||||
|
|
||||||
# Default config template (seeded into the /data volume on first boot).
|
WORKDIR /work
|
||||||
COPY config.yaml /etc/act_runner/config.yaml
|
|
||||||
COPY entrypoint.sh /usr/local/bin/entrypoint.sh
|
|
||||||
RUN chmod +x /usr/local/bin/entrypoint.sh
|
|
||||||
|
|
||||||
# /data holds the .runner registration, cache and workflow workspaces.
|
|
||||||
VOLUME /data
|
|
||||||
WORKDIR /data
|
|
||||||
|
|
||||||
ENTRYPOINT ["/usr/local/bin/entrypoint.sh"]
|
|
||||||
|
|||||||
+156
-81
@@ -3,116 +3,191 @@ SPDX-FileCopyrightText: 2026 Stan Grams <sjg@haxx.space>
|
|||||||
SPDX-License-Identifier: GPL-2.0-or-later
|
SPDX-License-Identifier: GPL-2.0-or-later
|
||||||
-->
|
-->
|
||||||
|
|
||||||
# Podman-based Gitea Actions runners
|
# trx-rs SDK image
|
||||||
|
|
||||||
Run two independent Gitea Actions runners on one host as rootless Podman
|
A single container image that is the canonical build environment for trx-rs,
|
||||||
containers managed by systemd (Quadlet) — one per project — instead of two
|
used **both** by CI and by developers. It bakes in the pinned Rust toolchain
|
||||||
VMs. Uses the **host executor**: workflow steps run directly inside a
|
(matching `rust-toolchain.toml`) and every build dependency, so the compiler
|
||||||
purpose-built runner image that already has the Rust toolchain and all build
|
and `clippy` are identical everywhere — no "works on my machine".
|
||||||
dependencies baked in, so CI runs skip the per-run install cost and no
|
|
||||||
Docker/Podman socket is needed.
|
|
||||||
|
|
||||||
## Files
|
|
||||||
|
|
||||||
| File | Purpose |
|
| File | Purpose |
|
||||||
|------|---------|
|
|------|---------|
|
||||||
| `Containerfile` | Runner image: Debian + build deps + clang + Rust + Node + `reuse` + `act_runner`. |
|
| `Containerfile` | The SDK image (Debian + build deps + pinned Rust + Node + git). |
|
||||||
| `entrypoint.sh` | Registers on first boot (if needed), then runs the daemon. |
|
| `runner-config.example.yaml` | Example act_runner config for the CI VM (Docker executor). |
|
||||||
| `config.yaml` | act_runner config template (seeded into each runner's volume). |
|
|
||||||
| `trx-rs-runner.container` | Quadlet unit for the trx-rs runner. |
|
|
||||||
| `project2-runner.container` | Quadlet unit for the second project's runner. |
|
|
||||||
|
|
||||||
## Prerequisites (once per host)
|
## Build and publish
|
||||||
|
|
||||||
Rootless Podman with cgroups v2 (default on modern distros). As the unprivileged
|
Nothing in the image is architecture-specific: the base image, the Debian build
|
||||||
user that will own the runners:
|
dependencies, Node.js, `rustup` and the `sccache` release all resolve per
|
||||||
|
architecture, so the same `Containerfile` builds natively on x86_64 and arm64.
|
||||||
|
|
||||||
|
Single architecture — the tag then only works on the architecture you built it
|
||||||
|
on:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# Survive logout / start on boot without an interactive session.
|
# from the repo root
|
||||||
loginctl enable-linger "$USER"
|
podman build -t git.haxx.space/sjg/trx-rs/sdk:latest container
|
||||||
|
podman login git.haxx.space
|
||||||
|
podman push git.haxx.space/sjg/trx-rs/sdk:latest
|
||||||
```
|
```
|
||||||
|
|
||||||
No `podman.socket` is required for the host executor.
|
**Both architectures without emulation.** The CI runner is x86_64 and Apple
|
||||||
|
Silicon developer machines are arm64, so `:latest` has to be a manifest list —
|
||||||
## 1. Build the image
|
a single-architecture tag makes the other side fall back to Rosetta or qemu.
|
||||||
|
Build each half natively on a host of that architecture, then join them:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
cd container
|
# on an x86_64 host
|
||||||
podman build -t trx-rs-ci:latest .
|
podman build --platform linux/amd64 -t git.haxx.space/sjg/trx-rs/sdk:latest-amd64 container
|
||||||
|
podman push git.haxx.space/sjg/trx-rs/sdk:latest-amd64
|
||||||
|
|
||||||
|
# on an arm64 host
|
||||||
|
podman build --platform linux/arm64 -t git.haxx.space/sjg/trx-rs/sdk:latest-arm64 container
|
||||||
|
podman push git.haxx.space/sjg/trx-rs/sdk:latest-arm64
|
||||||
|
|
||||||
|
# from either, once both are pushed
|
||||||
|
podman manifest create git.haxx.space/sjg/trx-rs/sdk:latest \
|
||||||
|
git.haxx.space/sjg/trx-rs/sdk:latest-amd64 \
|
||||||
|
git.haxx.space/sjg/trx-rs/sdk:latest-arm64
|
||||||
|
podman manifest push --all git.haxx.space/sjg/trx-rs/sdk:latest
|
||||||
```
|
```
|
||||||
|
|
||||||
## 2. Get a registration token
|
Building both from one machine is a single command
|
||||||
|
(`podman build --platform linux/amd64,linux/arm64 --manifest ...`), but the
|
||||||
|
foreign half runs under emulation and is slow — the two-host flow above is
|
||||||
|
what keeps every build native.
|
||||||
|
|
||||||
For **each** repo: *Settings → Actions → Runners → Create new Runner* and copy
|
Tag with the Rust version too (e.g. `:1.97.1`) if you want reproducible pins.
|
||||||
the token. (Org- or instance-level tokens work too if you prefer wider scope.)
|
Make the package **public** (Gitea → Packages → the image → Settings) so the CI
|
||||||
|
runner and developers can pull it without credentials. If you keep it private,
|
||||||
|
add `credentials:` under the workflow's `container:` and log the runner into the
|
||||||
|
registry.
|
||||||
|
|
||||||
## 3. Install and start the runners
|
Pushing a rebuilt image is not enough on its own: `:latest` is a moving tag, and
|
||||||
|
act_runner reuses whatever it cached the first time unless `force_pull: true` is
|
||||||
|
set (see `runner-config.example.yaml`). Without it the job log says
|
||||||
|
`Image exists? true` and the run behaves as though the image were never
|
||||||
|
rebuilt — a tool added to the `Containerfile` reads as missing from the image.
|
||||||
|
Either set `force_pull`, or refresh the VM's copy by hand:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
mkdir -p ~/.config/containers/systemd
|
docker pull git.haxx.space/sjg/trx-rs/sdk:latest
|
||||||
cp trx-rs-runner.container project2-runner.container ~/.config/containers/systemd/
|
docker run --rm git.haxx.space/sjg/trx-rs/sdk:latest sccache --version
|
||||||
|
|
||||||
# Paste each repo's token for the FIRST boot only:
|
|
||||||
# Environment=GITEA_RUNNER_REGISTRATION_TOKEN=xxxx…
|
|
||||||
$EDITOR ~/.config/containers/systemd/trx-rs-runner.container
|
|
||||||
$EDITOR ~/.config/containers/systemd/project2-runner.container
|
|
||||||
|
|
||||||
systemctl --user daemon-reload
|
|
||||||
systemctl --user start trx-rs-runner
|
|
||||||
systemctl --user start project2-runner
|
|
||||||
|
|
||||||
systemctl --user status trx-rs-runner
|
|
||||||
podman logs -f gitea-runner-trx-rs
|
|
||||||
```
|
```
|
||||||
|
|
||||||
Once each runner shows **online** in the repo's runner list, blank out the
|
### macOS note
|
||||||
`GITEA_RUNNER_REGISTRATION_TOKEN` line again (the registration is persisted in
|
|
||||||
the `…-data` volume) and `systemctl --user daemon-reload`.
|
|
||||||
|
|
||||||
## Required workflow change: the `reuse` job
|
Apple's `container` CLI builds through a BuildKit helper VM that is configured
|
||||||
|
with Rosetta whether or not the target is x86_64, so `container build` fails
|
||||||
|
with *"Rosetta is not installed"* on a clean machine. That is a property of the
|
||||||
|
builder, not of this image — `container run` works natively without it. Either
|
||||||
|
install Rosetta once (`softwareupdate --install-rosetta`, after which an arm64
|
||||||
|
build still produces a native arm64 image), or build with Podman, whose arm64
|
||||||
|
BuildKit needs no emulation.
|
||||||
|
|
||||||
The host executor runs steps directly in the container and therefore **cannot
|
## Developer use
|
||||||
run Docker-based actions**. The current `reuse` job uses `fsfe/reuse-action@v5`,
|
|
||||||
which is a Docker action. `reuse` is baked into the image, so replace that job
|
|
||||||
with a plain command:
|
|
||||||
|
|
||||||
```yaml
|
Reproducible one-off build, no local toolchain needed:
|
||||||
reuse:
|
|
||||||
runs-on: ubuntu-latest
|
```bash
|
||||||
steps:
|
podman run --rm -it -v "$PWD":/work -w /work \
|
||||||
- uses: actions/checkout@v4
|
git.haxx.space/sjg/trx-rs/sdk:latest \
|
||||||
- name: REUSE compliance
|
cargo build --release
|
||||||
run: reuse lint
|
|
||||||
```
|
```
|
||||||
|
|
||||||
The `lint` and `test` jobs need no changes: their `sudo apt-get …` and rustup
|
Or open the repo in the image via VS Code / JetBrains "Reopen in Container"
|
||||||
steps still run, but become fast no-ops because the image already has those
|
(`.devcontainer/devcontainer.json` points at the same image).
|
||||||
packages and the toolchain. (`sudo` is included in the image for exactly this
|
|
||||||
reason.)
|
|
||||||
|
|
||||||
> If you would rather keep Docker-based actions and per-run images, use the
|
Building outside the container? `rust-toolchain.toml` pins the same rustc, so
|
||||||
> **Docker executor** instead: drop the `:host` suffix from the label in
|
`rustup` installs the matching toolchain automatically.
|
||||||
> `config.yaml`, enable `systemctl --user --now enable podman.socket`, mount it
|
|
||||||
> into the container, and set `container.docker_host` to the socket path. That
|
|
||||||
> trades the baked-in speed for stronger per-job isolation.
|
|
||||||
|
|
||||||
## Tuning
|
## CI use
|
||||||
|
|
||||||
- **`capacity`** (in `config.yaml`) — concurrent jobs per runner. Rust builds
|
`.gitea/workflows/ci.yml` runs the `lint`, `test` and `frontend` jobs *inside*
|
||||||
are heavy; 1–2 is sensible when two runners share a host.
|
this image via the `container:` key, so they skip all setup and go straight to
|
||||||
- **`PodmanArgs=--cpus/--memory`** (in each `.container`) — hard resource caps
|
`cargo` and `npm`. The frontend job needs three things from the image beyond
|
||||||
so one project cannot starve the other.
|
Rust: Node.js for the toolchain, Chromium at `/usr/bin/chromium` for the
|
||||||
- **SELinux** — the `:Z` volume flag is already set; keep it if SELinux is
|
browser smoke test, and `cargo` — `npm run verify-generated` regenerates the
|
||||||
enforcing.
|
Rust wire contracts before checking for drift.
|
||||||
|
|
||||||
## Committing these files
|
The `reuse` job stays on the upstream `fsfe/reuse-action` (a Docker action the
|
||||||
|
Docker executor launches as a sibling container) — nothing REUSE-related is
|
||||||
|
baked into the SDK, and it lints the whole repository, so no job runs its own
|
||||||
|
licence check.
|
||||||
|
|
||||||
If you add this directory to a REUSE-checked repo, register the markdown in
|
## Compilation cache (sccache)
|
||||||
`REUSE.toml` (the other files carry inline SPDX headers):
|
|
||||||
|
|
||||||
```toml
|
The SDK image ships [`sccache`](https://github.com/mozilla/sccache). It is
|
||||||
[[annotations]]
|
enabled via `RUSTC_WRAPPER=sccache` in CI and the devcontainer (not repo-wide,
|
||||||
path = ["container/**"]
|
so plain `cargo` builds outside the SDK are unaffected).
|
||||||
SPDX-FileCopyrightText = "2026 Stan Grams <sjg@haxx.space>"
|
|
||||||
SPDX-License-Identifier = "GPL-2.0-or-later"
|
- **CI** persists the cache on the runner host — create the dir once:
|
||||||
|
`mkdir -p /var/cache/sccache`. It is bind-mounted into each job container at
|
||||||
|
`/sccache` (see `runner-config.example.yaml`), so cache survives across runs
|
||||||
|
and is shared between the lint/test jobs and both projects.
|
||||||
|
- **Devcontainer** uses a named volume (`trx-rs-sccache`).
|
||||||
|
- Check effectiveness with `sccache --show-stats` (the CI jobs print it).
|
||||||
|
|
||||||
|
`CARGO_INCREMENTAL=0` is set wherever sccache is on, since sccache cannot cache
|
||||||
|
incremental artifacts.
|
||||||
|
|
||||||
|
## CI runner (Alpine / OpenRC)
|
||||||
|
|
||||||
|
The runner uses the **Docker executor** (not the host executor): per-job
|
||||||
|
container isolation and standard `ubuntu-latest` semantics. `act_runner` runs
|
||||||
|
as an OpenRC service. Files provided:
|
||||||
|
|
||||||
|
| File | Purpose |
|
||||||
|
|------|---------|
|
||||||
|
| `act_runner.openrc` | OpenRC init script (`supervise-daemon`, depends on docker). |
|
||||||
|
| `act_runner.confd.example` | Per-instance `conf.d` settings for multi-runner hosts. |
|
||||||
|
|
||||||
|
**Cap the thread budget.** In a VM, pin its vCPUs to specific host threads
|
||||||
|
(libvirt/KVM):
|
||||||
|
|
||||||
|
```xml
|
||||||
|
<vcpu placement='static'>2</vcpu>
|
||||||
|
<cputune>
|
||||||
|
<vcpupin vcpu='0' cpuset='4'/>
|
||||||
|
<vcpupin vcpu='1' cpuset='5'/>
|
||||||
|
</cputune>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
On bare metal, the `container.options: "--cpus=2"` and `capacity: 1` in
|
||||||
|
`runner-config.example.yaml` already bound each runner.
|
||||||
|
|
||||||
|
**Set it up:**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 1. Docker + a dedicated user with socket access
|
||||||
|
apk add docker docker-cli
|
||||||
|
rc-update add docker default && rc-service docker start
|
||||||
|
adduser -S -D -H -h /var/lib/act_runner act
|
||||||
|
addgroup act docker
|
||||||
|
|
||||||
|
# 2. act_runner binary (static Go build, works on musl)
|
||||||
|
# Upstream publishes per-architecture builds; pick the host's.
|
||||||
|
case "$(uname -m)" in x86_64) arch=amd64 ;; aarch64) arch=arm64 ;; esac
|
||||||
|
curl -fsSL -o /usr/local/bin/act_runner \
|
||||||
|
"https://gitea.com/gitea/act_runner/releases/download/v0.2.11/act_runner-0.2.11-linux-${arch}"
|
||||||
|
chmod +x /usr/local/bin/act_runner
|
||||||
|
|
||||||
|
# 3. Config + register one runner per project (scope keeps their jobs apart)
|
||||||
|
install -Dm644 container/runner-config.example.yaml /etc/act_runner/trx-rs.yaml
|
||||||
|
install -d -o act /var/lib/act_runner/trx-rs
|
||||||
|
su act -s /bin/sh -c 'cd /var/lib/act_runner/trx-rs && \
|
||||||
|
act_runner register --no-interactive \
|
||||||
|
--instance https://git.haxx.space --token <TOKEN> \
|
||||||
|
--name trx-rs-ci \
|
||||||
|
--labels "ubuntu-latest:docker://catthehacker/ubuntu:act-latest"'
|
||||||
|
|
||||||
|
# 4. OpenRC service (repeat the symlink+conf.d for the second project)
|
||||||
|
install -m755 container/act_runner.openrc /etc/init.d/act_runner
|
||||||
|
ln -s act_runner /etc/init.d/act_runner.trx-rs
|
||||||
|
install -m644 container/act_runner.confd.example /etc/conf.d/act_runner.trx-rs
|
||||||
|
rc-update add act_runner.trx-rs default
|
||||||
|
rc-service act_runner.trx-rs start
|
||||||
|
```
|
||||||
|
|
||||||
|
Check it with `rc-service act_runner.trx-rs status` and
|
||||||
|
`tail -f /var/log/act_runner.trx-rs.log`.
|
||||||
|
|||||||
@@ -0,0 +1,14 @@
|
|||||||
|
# SPDX-FileCopyrightText: 2026 Stan Grams <sjg@haxx.space>
|
||||||
|
# SPDX-License-Identifier: GPL-2.0-or-later
|
||||||
|
#
|
||||||
|
# Per-instance settings for an act_runner OpenRC service.
|
||||||
|
# Copy to /etc/conf.d/<service-name>, e.g. /etc/conf.d/act_runner.trx-rs
|
||||||
|
# (the name must match the /etc/init.d/ symlink).
|
||||||
|
|
||||||
|
# User that runs the daemon. Must be a member of the `docker` group.
|
||||||
|
runner_user="act"
|
||||||
|
|
||||||
|
# Per-instance state dir (holds the .runner registration) and config file,
|
||||||
|
# so two runners on one host stay independent.
|
||||||
|
runner_dir="/var/lib/act_runner/trx-rs"
|
||||||
|
runner_config="/etc/act_runner/trx-rs.yaml"
|
||||||
@@ -0,0 +1,44 @@
|
|||||||
|
#!/sbin/openrc-run
|
||||||
|
# SPDX-FileCopyrightText: 2026 Stan Grams <sjg@haxx.space>
|
||||||
|
# SPDX-License-Identifier: GPL-2.0-or-later
|
||||||
|
#
|
||||||
|
# OpenRC service for a Gitea act_runner (Docker executor) on Alpine.
|
||||||
|
#
|
||||||
|
# Install as /etc/init.d/act_runner (chmod +x). Single instance uses
|
||||||
|
# /etc/act_runner/config.yaml. For one runner per project, symlink this script
|
||||||
|
# and add a matching conf.d file:
|
||||||
|
#
|
||||||
|
# ln -s act_runner /etc/init.d/act_runner.trx-rs
|
||||||
|
# cp container/act_runner.confd.example /etc/conf.d/act_runner.trx-rs
|
||||||
|
# $EDITOR /etc/conf.d/act_runner.trx-rs # set runner_dir / runner_config
|
||||||
|
# rc-update add act_runner.trx-rs default
|
||||||
|
# rc-service act_runner.trx-rs start
|
||||||
|
|
||||||
|
description="Gitea Actions runner"
|
||||||
|
|
||||||
|
: "${runner_user:=act}"
|
||||||
|
: "${runner_dir:=/var/lib/act_runner}"
|
||||||
|
: "${runner_config:=/etc/act_runner/config.yaml}"
|
||||||
|
|
||||||
|
command="/usr/local/bin/act_runner"
|
||||||
|
command_args="daemon --config ${runner_config}"
|
||||||
|
# No group given, so supplementary groups (incl. docker) are initialised.
|
||||||
|
command_user="${runner_user}"
|
||||||
|
directory="${runner_dir}"
|
||||||
|
|
||||||
|
supervisor="supervise-daemon"
|
||||||
|
respawn_delay=5
|
||||||
|
respawn_max=0
|
||||||
|
pidfile="/run/${RC_SVCNAME}.pid"
|
||||||
|
output_log="/var/log/${RC_SVCNAME}.log"
|
||||||
|
error_log="/var/log/${RC_SVCNAME}.log"
|
||||||
|
|
||||||
|
depend() {
|
||||||
|
need docker
|
||||||
|
use net dns
|
||||||
|
}
|
||||||
|
|
||||||
|
start_pre() {
|
||||||
|
checkpath -d -m 0750 -o "${runner_user}" "${runner_dir}"
|
||||||
|
checkpath -f -m 0640 -o "${runner_user}" "${output_log}"
|
||||||
|
}
|
||||||
@@ -1,32 +0,0 @@
|
|||||||
# SPDX-FileCopyrightText: 2026 Stan Grams <sjg@haxx.space>
|
|
||||||
#
|
|
||||||
# SPDX-License-Identifier: GPL-2.0-or-later
|
|
||||||
#
|
|
||||||
# act_runner configuration template. Seeded into /data/config.yaml on first
|
|
||||||
# boot; edit the copy inside the volume to change settings per runner.
|
|
||||||
|
|
||||||
log:
|
|
||||||
level: info
|
|
||||||
|
|
||||||
runner:
|
|
||||||
# Registration state. Relative to the daemon's working directory (/data).
|
|
||||||
file: .runner
|
|
||||||
# Concurrent jobs this runner will pick up. Rust builds are heavy — keep this
|
|
||||||
# modest, especially if two runners share one host. The trx-rs workflow has
|
|
||||||
# three parallel jobs (lint, test, reuse); capacity 2 lets two overlap.
|
|
||||||
capacity: 2
|
|
||||||
timeout: 3h
|
|
||||||
# Map the workflow's `runs-on: ubuntu-latest` to the HOST executor, i.e. run
|
|
||||||
# steps directly inside THIS container (which already has all the toolchain).
|
|
||||||
# No Docker/Podman socket is required in this mode.
|
|
||||||
labels:
|
|
||||||
- "ubuntu-latest:host"
|
|
||||||
|
|
||||||
cache:
|
|
||||||
# Built-in actions cache server (used by actions/cache). Stored in the volume.
|
|
||||||
enabled: true
|
|
||||||
dir: "/data/cache"
|
|
||||||
|
|
||||||
host:
|
|
||||||
# Where per-job workspaces are created.
|
|
||||||
workdir_parent: /data/workflows
|
|
||||||
@@ -1,38 +0,0 @@
|
|||||||
#!/usr/bin/env bash
|
|
||||||
# SPDX-FileCopyrightText: 2026 Stan Grams <sjg@haxx.space>
|
|
||||||
#
|
|
||||||
# SPDX-License-Identifier: GPL-2.0-or-later
|
|
||||||
#
|
|
||||||
# Registers the runner on first boot (if no .runner state exists in /data),
|
|
||||||
# then runs the act_runner daemon. Idempotent: on subsequent boots it reuses
|
|
||||||
# the stored registration and ignores the token.
|
|
||||||
set -euo pipefail
|
|
||||||
|
|
||||||
CONFIG_FILE="${CONFIG_FILE:-/data/config.yaml}"
|
|
||||||
|
|
||||||
cd /data
|
|
||||||
|
|
||||||
# Seed the config from the image's template on first boot so it lives in the
|
|
||||||
# persistent volume and can be edited there.
|
|
||||||
if [ ! -f "$CONFIG_FILE" ]; then
|
|
||||||
cp /etc/act_runner/config.yaml "$CONFIG_FILE"
|
|
||||||
fi
|
|
||||||
|
|
||||||
# runner.file in config.yaml is ".runner" (relative to this CWD => /data/.runner).
|
|
||||||
if [ ! -f /data/.runner ]; then
|
|
||||||
if [ -z "${GITEA_RUNNER_REGISTRATION_TOKEN:-}" ]; then
|
|
||||||
echo "ERROR: no /data/.runner registration and GITEA_RUNNER_REGISTRATION_TOKEN is empty." >&2
|
|
||||||
echo " Grab a token from the repo's Settings -> Actions -> Runners and set it" >&2
|
|
||||||
echo " in the Quadlet unit for the first boot only." >&2
|
|
||||||
exit 1
|
|
||||||
fi
|
|
||||||
echo "Registering runner '${GITEA_RUNNER_NAME:-podman}' with ${GITEA_INSTANCE_URL} ..."
|
|
||||||
act_runner register --no-interactive \
|
|
||||||
--config "$CONFIG_FILE" \
|
|
||||||
--instance "${GITEA_INSTANCE_URL:?set GITEA_INSTANCE_URL}" \
|
|
||||||
--token "$GITEA_RUNNER_REGISTRATION_TOKEN" \
|
|
||||||
--name "${GITEA_RUNNER_NAME:-podman}" \
|
|
||||||
--labels "${GITEA_RUNNER_LABELS:-ubuntu-latest:host}"
|
|
||||||
fi
|
|
||||||
|
|
||||||
exec act_runner daemon --config "$CONFIG_FILE"
|
|
||||||
@@ -1,40 +0,0 @@
|
|||||||
# SPDX-FileCopyrightText: 2026 Stan Grams <sjg@haxx.space>
|
|
||||||
#
|
|
||||||
# SPDX-License-Identifier: GPL-2.0-or-later
|
|
||||||
#
|
|
||||||
# Rootless Podman Quadlet for the SECOND project's Gitea Actions runner,
|
|
||||||
# co-located on the same host as the trx-rs runner.
|
|
||||||
#
|
|
||||||
# It has its own name, its own data volume and its own registration token, so
|
|
||||||
# the two runners are fully independent. They share the `ubuntu-latest` label,
|
|
||||||
# but registration SCOPE (which repo each token came from) keeps their jobs
|
|
||||||
# separate — neither will pick up the other's work.
|
|
||||||
#
|
|
||||||
# If project 2 needs different build dependencies, build it its own image from
|
|
||||||
# an adjusted Containerfile and point Image= at that instead of reusing the
|
|
||||||
# trx-rs image below.
|
|
||||||
|
|
||||||
[Unit]
|
|
||||||
Description=Gitea Actions runner — project 2
|
|
||||||
After=network-online.target
|
|
||||||
Wants=network-online.target
|
|
||||||
|
|
||||||
[Container]
|
|
||||||
Image=localhost/gitea-act-runner:latest
|
|
||||||
ContainerName=gitea-runner-project2
|
|
||||||
Volume=gitea-runner-project2-data:/data:Z
|
|
||||||
|
|
||||||
Environment=CONFIG_FILE=/data/config.yaml
|
|
||||||
Environment=GITEA_INSTANCE_URL=https://git.haxx.space
|
|
||||||
Environment=GITEA_RUNNER_NAME=project2-podman
|
|
||||||
Environment=GITEA_RUNNER_LABELS=ubuntu-latest:host
|
|
||||||
Environment=GITEA_RUNNER_REGISTRATION_TOKEN=
|
|
||||||
|
|
||||||
PodmanArgs=--cpus=4.0 --memory=6g
|
|
||||||
|
|
||||||
[Service]
|
|
||||||
Restart=always
|
|
||||||
TimeoutStartSec=0
|
|
||||||
|
|
||||||
[Install]
|
|
||||||
WantedBy=default.target
|
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
# SPDX-FileCopyrightText: 2026 Stan Grams <sjg@haxx.space>
|
||||||
|
#
|
||||||
|
# SPDX-License-Identifier: GPL-2.0-or-later
|
||||||
|
#
|
||||||
|
# Example act_runner config for the Docker-executor runner that lives in the
|
||||||
|
# CI VM. This is NOT the SDK image — it configures the runner that launches
|
||||||
|
# per-job containers (including the trx-rs SDK image referenced by the
|
||||||
|
# workflow's `container:` key). Copy to the VM and pass with
|
||||||
|
# `act_runner daemon --config`.
|
||||||
|
|
||||||
|
log:
|
||||||
|
level: info
|
||||||
|
|
||||||
|
runner:
|
||||||
|
file: .runner
|
||||||
|
# One concurrent job. With one runner per project on a 2-vCPU VM this keeps
|
||||||
|
# total CI usage at ~2 threads.
|
||||||
|
capacity: 1
|
||||||
|
timeout: 3h
|
||||||
|
# Docker executor: no ":host" suffix. Maps runs-on labels to base images
|
||||||
|
# (the workflow overrides these per job via `container:`).
|
||||||
|
labels:
|
||||||
|
- "ubuntu-latest:docker://catthehacker/ubuntu:act-latest"
|
||||||
|
|
||||||
|
cache:
|
||||||
|
enabled: true
|
||||||
|
|
||||||
|
container:
|
||||||
|
# Cap every job container's CPU so CI stays within the 2-thread budget even
|
||||||
|
# if capacity is raised later. The -v mount persists the sccache cache on the
|
||||||
|
# host (create it first: `mkdir -p /var/cache/sccache`), matching SCCACHE_DIR
|
||||||
|
# in the workflow.
|
||||||
|
options: "--cpus=2 -v /var/cache/sccache:/sccache"
|
||||||
|
# act_runner rejects every bind mount unless it is listed here — the default
|
||||||
|
# is an empty allowlist, so the -v above is dropped with only a
|
||||||
|
# "[...] is not a valid volume, will be ignored" line in the job log, and
|
||||||
|
# SCCACHE_DIR then points at a directory that does not outlive the job.
|
||||||
|
valid_volumes:
|
||||||
|
- /var/cache/sccache
|
||||||
|
# Reuse the host VM's Docker network for the built-in cache/artifact server.
|
||||||
|
network: "host"
|
||||||
|
# The workflow pulls the SDK image by the moving `:latest` tag. Without this
|
||||||
|
# the runner logs "Image exists? true" and reuses whatever it cached the
|
||||||
|
# first time, so pushing a rebuilt image has no effect until someone pulls
|
||||||
|
# on the VM by hand — which looks like the image is missing a tool it in
|
||||||
|
# fact has. The extra registry round-trip per job is nothing next to a build.
|
||||||
|
force_pull: true
|
||||||
@@ -1,41 +0,0 @@
|
|||||||
# SPDX-FileCopyrightText: 2026 Stan Grams <sjg@haxx.space>
|
|
||||||
#
|
|
||||||
# SPDX-License-Identifier: GPL-2.0-or-later
|
|
||||||
#
|
|
||||||
# Rootless Podman Quadlet for the trx-rs Gitea Actions runner.
|
|
||||||
# Install to ~/.config/containers/systemd/trx-rs-runner.container then:
|
|
||||||
# systemctl --user daemon-reload
|
|
||||||
# systemctl --user start trx-rs-runner
|
|
||||||
#
|
|
||||||
# First boot only: paste a registration token (repo Settings -> Actions ->
|
|
||||||
# Runners) into GITEA_RUNNER_REGISTRATION_TOKEN. After the runner appears
|
|
||||||
# online you can blank it again — the registration is persisted in the volume.
|
|
||||||
|
|
||||||
[Unit]
|
|
||||||
Description=Gitea Actions runner — trx-rs
|
|
||||||
After=network-online.target
|
|
||||||
Wants=network-online.target
|
|
||||||
|
|
||||||
[Container]
|
|
||||||
Image=localhost/trx-rs-ci:latest
|
|
||||||
ContainerName=gitea-runner-trx-rs
|
|
||||||
# Persistent state: .runner registration, cache, workspaces.
|
|
||||||
Volume=gitea-runner-trx-rs-data:/data:Z
|
|
||||||
|
|
||||||
Environment=CONFIG_FILE=/data/config.yaml
|
|
||||||
Environment=GITEA_INSTANCE_URL=https://git.haxx.space
|
|
||||||
Environment=GITEA_RUNNER_NAME=trx-rs-podman
|
|
||||||
Environment=GITEA_RUNNER_LABELS=ubuntu-latest:host
|
|
||||||
Environment=GITEA_RUNNER_REGISTRATION_TOKEN=
|
|
||||||
|
|
||||||
# Resource caps so a heavy Rust build here cannot starve the other project's
|
|
||||||
# runner on the same host. Tune to your box.
|
|
||||||
PodmanArgs=--cpus=4.0 --memory=6g
|
|
||||||
|
|
||||||
[Service]
|
|
||||||
Restart=always
|
|
||||||
# A cold Rust build can be slow; don't let systemd consider startup failed.
|
|
||||||
TimeoutStartSec=0
|
|
||||||
|
|
||||||
[Install]
|
|
||||||
WantedBy=default.target
|
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
# SPDX-FileCopyrightText: 2026 Stan Grams <sjg@haxx.space>
|
||||||
|
#
|
||||||
|
# SPDX-License-Identifier: GPL-2.0-or-later
|
||||||
|
#
|
||||||
|
# Pins the Rust toolchain for reproducible builds. Keep in sync with the
|
||||||
|
# SDK image (container/Containerfile, ARG RUST_VERSION). rustup honours this
|
||||||
|
# automatically for local builds outside the SDK container.
|
||||||
|
|
||||||
|
[toolchain]
|
||||||
|
channel = "1.97.1"
|
||||||
|
components = ["rustfmt", "clippy"]
|
||||||
@@ -637,6 +637,22 @@ function elementById(id) {
|
|||||||
};
|
};
|
||||||
const layoutCapabilities = { broadcast: false, digital: false };
|
const layoutCapabilities = { broadcast: false, digital: false };
|
||||||
let activeRigId = null;
|
let activeRigId = null;
|
||||||
|
const layoutSections = [
|
||||||
|
{ id: "advanced-radio-controls", key: "advanced" },
|
||||||
|
{ id: "audio-controls", key: "audio" },
|
||||||
|
{ id: "scheduler-controls", key: "scheduler" }
|
||||||
|
];
|
||||||
|
const seededSections = /* @__PURE__ */ new Set();
|
||||||
|
let appliedLayoutName = null;
|
||||||
|
function seedLayoutSections(layout, layoutChanged) {
|
||||||
|
layoutSections.forEach(({ id, key }) => {
|
||||||
|
const section = document.getElementById(id);
|
||||||
|
if (!section) return;
|
||||||
|
if (!layoutChanged && seededSections.has(id)) return;
|
||||||
|
seededSections.add(id);
|
||||||
|
section.open = layout[key];
|
||||||
|
});
|
||||||
|
}
|
||||||
function layoutStorageKey() {
|
function layoutStorageKey() {
|
||||||
return activeRigId ? `trxOperatorLayout:${activeRigId}` : "trxOperatorLayout";
|
return activeRigId ? `trxOperatorLayout:${activeRigId}` : "trxOperatorLayout";
|
||||||
}
|
}
|
||||||
@@ -690,12 +706,9 @@ function elementById(id) {
|
|||||||
const layout = layouts[permittedName];
|
const layout = layouts[permittedName];
|
||||||
document.body.dataset.operatorLayout = permittedName in layouts ? permittedName : "compact";
|
document.body.dataset.operatorLayout = permittedName in layouts ? permittedName : "compact";
|
||||||
if (options.persist !== false) localStorage.setItem(layoutStorageKey(), permittedName);
|
if (options.persist !== false) localStorage.setItem(layoutStorageKey(), permittedName);
|
||||||
const details = document.getElementById("advanced-radio-controls");
|
const layoutChanged = appliedLayoutName !== permittedName;
|
||||||
if (details) details.open = layout.advanced;
|
appliedLayoutName = permittedName;
|
||||||
const audioDetails = document.getElementById("audio-controls");
|
seedLayoutSections(layout, layoutChanged);
|
||||||
if (audioDetails) audioDetails.open = layout.audio;
|
|
||||||
const schedulerDetails = document.getElementById("scheduler-controls");
|
|
||||||
if (schedulerDetails) schedulerDetails.open = layout.scheduler;
|
|
||||||
if (options.navigate && typeof browserWindow.navigateToTab === "function") {
|
if (options.navigate && typeof browserWindow.navigateToTab === "function") {
|
||||||
browserWindow.navigateToTab(layout.preferredTab);
|
browserWindow.navigateToTab(layout.preferredTab);
|
||||||
}
|
}
|
||||||
@@ -734,6 +747,95 @@ function elementById(id) {
|
|||||||
api.applyLayout(savedLayoutName(), { persist: false });
|
api.applyLayout(savedLayoutName(), { persist: false });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
const overflowOrder = [".operator-layout-picker", ".header-style-pick", "#theme-toggle"];
|
||||||
|
function anchorMenu(button, menu) {
|
||||||
|
const rect = button.getBoundingClientRect();
|
||||||
|
if (menu.parentElement !== document.body) document.body.appendChild(menu);
|
||||||
|
menu.style.position = "fixed";
|
||||||
|
menu.style.zIndex = "9700";
|
||||||
|
menu.style.top = "0px";
|
||||||
|
menu.style.bottom = "auto";
|
||||||
|
menu.style.right = "auto";
|
||||||
|
const width = menu.offsetWidth || 200;
|
||||||
|
const height = menu.offsetHeight || 0;
|
||||||
|
menu.style.left = `${String(Math.round(Math.min(Math.max(8, rect.right - width), window.innerWidth - width - 8)))}px`;
|
||||||
|
const below = rect.bottom + 8;
|
||||||
|
if (below + height <= window.innerHeight - 8) {
|
||||||
|
menu.style.top = `${String(Math.round(below))}px`;
|
||||||
|
} else {
|
||||||
|
menu.style.top = "auto";
|
||||||
|
menu.style.bottom = `${String(Math.round(window.innerHeight - rect.top + 8))}px`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function installTopBarOverflow() {
|
||||||
|
const actions = document.querySelector(".top-bar-actions");
|
||||||
|
if (!actions || document.getElementById("top-bar-more")) return;
|
||||||
|
const wrap = document.createElement("div");
|
||||||
|
wrap.id = "top-bar-more";
|
||||||
|
wrap.className = "top-bar-more";
|
||||||
|
const button = document.createElement("button");
|
||||||
|
button.type = "button";
|
||||||
|
button.id = "top-bar-more-btn";
|
||||||
|
button.className = "header-bar-btn top-bar-more-btn";
|
||||||
|
button.textContent = "⋯";
|
||||||
|
button.setAttribute("aria-haspopup", "menu");
|
||||||
|
button.setAttribute("aria-expanded", "false");
|
||||||
|
button.setAttribute("aria-label", "More controls");
|
||||||
|
button.title = "More controls";
|
||||||
|
const menu = document.createElement("div");
|
||||||
|
menu.id = "top-bar-more-menu";
|
||||||
|
menu.className = "top-bar-more-menu";
|
||||||
|
menu.setAttribute("role", "menu");
|
||||||
|
button.setAttribute("aria-controls", menu.id);
|
||||||
|
wrap.append(button, menu);
|
||||||
|
actions.appendChild(wrap);
|
||||||
|
const closeMenu = () => {
|
||||||
|
menu.classList.remove("is-open");
|
||||||
|
button.setAttribute("aria-expanded", "false");
|
||||||
|
};
|
||||||
|
button.addEventListener("click", () => {
|
||||||
|
const open = menu.classList.toggle("is-open");
|
||||||
|
button.setAttribute("aria-expanded", String(open));
|
||||||
|
if (open) anchorMenu(button, menu);
|
||||||
|
});
|
||||||
|
document.addEventListener("click", (event) => {
|
||||||
|
if (!(event.target instanceof Node)) {
|
||||||
|
closeMenu();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!wrap.contains(event.target) && !menu.contains(event.target)) closeMenu();
|
||||||
|
});
|
||||||
|
document.addEventListener("keydown", (event) => {
|
||||||
|
if (event.key === "Escape") closeMenu();
|
||||||
|
});
|
||||||
|
const barFits = () => {
|
||||||
|
const bar = actions.closest(".tab-bar");
|
||||||
|
if (!bar) return true;
|
||||||
|
const identity = bar.querySelector(".header-main");
|
||||||
|
const nav = bar.querySelector(".tab-bar-nav");
|
||||||
|
const gutters = 48;
|
||||||
|
const needed = (identity?.offsetWidth ?? 0) + (nav?.scrollWidth ?? 0) + actions.scrollWidth + gutters;
|
||||||
|
return needed <= bar.clientWidth;
|
||||||
|
};
|
||||||
|
const reflowOverflow = () => {
|
||||||
|
overflowOrder.forEach((selector) => {
|
||||||
|
const element = menu.querySelector(selector);
|
||||||
|
if (element) actions.insertBefore(element, wrap);
|
||||||
|
});
|
||||||
|
wrap.hidden = true;
|
||||||
|
for (const selector of overflowOrder) {
|
||||||
|
if (barFits()) break;
|
||||||
|
const element = actions.querySelector(selector);
|
||||||
|
if (!element) continue;
|
||||||
|
wrap.hidden = false;
|
||||||
|
menu.appendChild(element);
|
||||||
|
}
|
||||||
|
wrap.hidden = menu.children.length === 0;
|
||||||
|
if (wrap.hidden) closeMenu();
|
||||||
|
};
|
||||||
|
reflowOverflow();
|
||||||
|
window.addEventListener("resize", reflowOverflow);
|
||||||
|
}
|
||||||
function installMobileMore() {
|
function installMobileMore() {
|
||||||
const nav = document.querySelector(".tab-bar-nav");
|
const nav = document.querySelector(".tab-bar-nav");
|
||||||
if (!nav || document.getElementById("mobile-more-btn")) return;
|
if (!nav || document.getElementById("mobile-more-btn")) return;
|
||||||
@@ -741,7 +843,8 @@ function elementById(id) {
|
|||||||
more.id = "mobile-more-btn";
|
more.id = "mobile-more-btn";
|
||||||
more.className = "tab mobile-more-btn";
|
more.className = "tab mobile-more-btn";
|
||||||
more.type = "button";
|
more.type = "button";
|
||||||
more.innerHTML = '<span class="tab-more-icon" aria-hidden="true">•••</span><span class="tab-label">More</span>';
|
more.innerHTML = '<span class="tab-more-icon" aria-hidden="true">•••</span><span class="tab-label">Tools</span>';
|
||||||
|
more.setAttribute("aria-label", "Tools and settings");
|
||||||
more.setAttribute("aria-haspopup", "menu");
|
more.setAttribute("aria-haspopup", "menu");
|
||||||
more.setAttribute("aria-expanded", "false");
|
more.setAttribute("aria-expanded", "false");
|
||||||
const menu = document.createElement("div");
|
const menu = document.createElement("div");
|
||||||
@@ -773,7 +876,10 @@ function elementById(id) {
|
|||||||
more.addEventListener("click", () => {
|
more.addEventListener("click", () => {
|
||||||
const open = menu.classList.toggle("is-open");
|
const open = menu.classList.toggle("is-open");
|
||||||
more.setAttribute("aria-expanded", String(open));
|
more.setAttribute("aria-expanded", String(open));
|
||||||
if (open) menu.querySelector('[role="menuitem"]')?.focus();
|
if (open) {
|
||||||
|
anchorMenu(more, menu);
|
||||||
|
menu.querySelector('[role="menuitem"]')?.focus();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
document.addEventListener("click", (event) => {
|
document.addEventListener("click", (event) => {
|
||||||
if (!(event.target instanceof Node) || !menu.contains(event.target) && !more.contains(event.target)) closeMore();
|
if (!(event.target instanceof Node) || !menu.contains(event.target) && !more.contains(event.target)) closeMore();
|
||||||
@@ -840,6 +946,7 @@ function elementById(id) {
|
|||||||
api.init = function init() {
|
api.init = function init() {
|
||||||
ensureLiveRegions();
|
ensureLiveRegions();
|
||||||
installLayoutControls();
|
installLayoutControls();
|
||||||
|
installTopBarOverflow();
|
||||||
installMobileMore();
|
installMobileMore();
|
||||||
installDecoderPicker();
|
installDecoderPicker();
|
||||||
installDecoderBadges();
|
installDecoderBadges();
|
||||||
@@ -1934,7 +2041,6 @@ var signalSplitValueEl = document.getElementById("signal-split-value");
|
|||||||
var overviewPeakHoldEl = document.getElementById("overview-peak-hold");
|
var overviewPeakHoldEl = document.getElementById("overview-peak-hold");
|
||||||
var themeToggleBtn = document.getElementById("theme-toggle");
|
var themeToggleBtn = document.getElementById("theme-toggle");
|
||||||
var headerRigSwitchSelect = document.getElementById("header-rig-switch-select");
|
var headerRigSwitchSelect = document.getElementById("header-rig-switch-select");
|
||||||
var headerRigSummary = document.getElementById("header-rig-summary");
|
|
||||||
var headerStylePickSelect = document.getElementById("header-style-pick-select");
|
var headerStylePickSelect = document.getElementById("header-style-pick-select");
|
||||||
var rdsPsOverlay = document.getElementById("rds-ps-overlay");
|
var rdsPsOverlay = document.getElementById("rds-ps-overlay");
|
||||||
var tabMainEl = document.getElementById("tab-main");
|
var tabMainEl = document.getElementById("tab-main");
|
||||||
@@ -2651,19 +2757,6 @@ function populateRigPicker(selectEl, rigIds, activeRigId, disabled) {
|
|||||||
}
|
}
|
||||||
selectEl.disabled = disabled;
|
selectEl.disabled = disabled;
|
||||||
}
|
}
|
||||||
function updateRigIdentitySummary(rigId, pending = false) {
|
|
||||||
if (!headerRigSummary) return;
|
|
||||||
const rig = serverRigs.find((entry) => entry?.remote === rigId);
|
|
||||||
if (!rig) {
|
|
||||||
headerRigSummary.textContent = pending ? "Switching rigs…" : "No rig details available";
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const hardware = [rig.manufacturer, rig.model].map((value) => String(value || "").trim()).filter(Boolean).join(" ") || rig.remote;
|
|
||||||
const modes = Array.isArray(rig.supported_modes) ? rig.supported_modes.map(normalizeMode).filter(Boolean) : [];
|
|
||||||
const features = [rig.tx ? "TX" : "RX", rig.filter_controls ? "SDR filters" : null, ...modes.slice(0, 5)];
|
|
||||||
if (modes.length > 5) features.push(`+${modes.length - 5} modes`);
|
|
||||||
headerRigSummary.textContent = `${pending ? "Switching to " : ""}${hardware} · ${features.filter(Boolean).join(" · ")}`;
|
|
||||||
}
|
|
||||||
function updateRigSubtitle(activeRigId) {
|
function updateRigSubtitle(activeRigId) {
|
||||||
if (!rigSubtitle) return;
|
if (!rigSubtitle) return;
|
||||||
const name = activeRigId && lastRigDisplayNames[activeRigId] || activeRigId || "--";
|
const name = activeRigId && lastRigDisplayNames[activeRigId] || activeRigId || "--";
|
||||||
@@ -2694,7 +2787,6 @@ function applyRigList(activeRigId, rigIds, displayNames = {}) {
|
|||||||
const disableSwitch = lastRigIds.length === 0 || !authRole || authRole === "rx";
|
const disableSwitch = lastRigIds.length === 0 || !authRole || authRole === "rx";
|
||||||
populateRigPicker(headerRigSwitchSelect, lastRigIds, lastActiveRigId, disableSwitch);
|
populateRigPicker(headerRigSwitchSelect, lastRigIds, lastActiveRigId, disableSwitch);
|
||||||
updateRigSubtitle(lastActiveRigId);
|
updateRigSubtitle(lastActiveRigId);
|
||||||
updateRigIdentitySummary(lastActiveRigId);
|
|
||||||
window.trxUi?.setActiveRig(lastActiveRigId);
|
window.trxUi?.setActiveRig(lastActiveRigId);
|
||||||
if (rigListChanged) {
|
if (rigListChanged) {
|
||||||
window.trx.modules.scheduler?.setRig(lastActiveRigId);
|
window.trx.modules.scheduler?.setRig(lastActiveRigId);
|
||||||
@@ -4955,7 +5047,7 @@ async function switchRigFromSelect(selectEl) {
|
|||||||
rigSwitchInProgress = true;
|
rigSwitchInProgress = true;
|
||||||
setControlPending(selectEl, true);
|
setControlPending(selectEl, true);
|
||||||
selectEl.closest(".header-rig-switch")?.classList.add("is-switching");
|
selectEl.closest(".header-rig-switch")?.classList.add("is-switching");
|
||||||
updateRigIdentitySummary(nextRig, true);
|
showHint(`Switching to ${lastRigDisplayNames[nextRig] || nextRig}…`);
|
||||||
showHint(`Switching to ${lastRigDisplayNames[nextRig] || nextRig}…`);
|
showHint(`Switching to ${lastRigDisplayNames[nextRig] || nextRig}…`);
|
||||||
try {
|
try {
|
||||||
const sidParam = sseSessionId ? `&session_id=${encodeURIComponent(sseSessionId)}` : "";
|
const sidParam = sseSessionId ? `&session_id=${encodeURIComponent(sseSessionId)}` : "";
|
||||||
@@ -4963,7 +5055,6 @@ async function switchRigFromSelect(selectEl) {
|
|||||||
lastActiveRigId = nextRig;
|
lastActiveRigId = nextRig;
|
||||||
resetDecoderStateOnRigSwitch();
|
resetDecoderStateOnRigSwitch();
|
||||||
updateRigSubtitle(lastActiveRigId);
|
updateRigSubtitle(lastActiveRigId);
|
||||||
updateRigIdentitySummary(lastActiveRigId);
|
|
||||||
window.trxUi?.setActiveRig(lastActiveRigId);
|
window.trxUi?.setActiveRig(lastActiveRigId);
|
||||||
window.trx.modules.scheduler?.setRig(lastActiveRigId);
|
window.trx.modules.scheduler?.setRig(lastActiveRigId);
|
||||||
window.trx.modules.backgroundDecode?.setRig(lastActiveRigId);
|
window.trx.modules.backgroundDecode?.setRig(lastActiveRigId);
|
||||||
@@ -4982,7 +5073,6 @@ async function switchRigFromSelect(selectEl) {
|
|||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error("select_rig failed:", err);
|
console.error("select_rig failed:", err);
|
||||||
selectEl.value = prevRig || "";
|
selectEl.value = prevRig || "";
|
||||||
updateRigIdentitySummary(prevRig);
|
|
||||||
window.trxUi?.notify("Rig could not be switched", { kind: "error" });
|
window.trxUi?.notify("Rig could not be switched", { kind: "error" });
|
||||||
} finally {
|
} finally {
|
||||||
rigSwitchInProgress = false;
|
rigSwitchInProgress = false;
|
||||||
@@ -5502,6 +5592,8 @@ function navigateToTab(name, options = {}) {
|
|||||||
_activeTab = name;
|
_activeTab = name;
|
||||||
document.querySelectorAll(".tab-bar .tab").forEach((t) => t.classList.remove("active"));
|
document.querySelectorAll(".tab-bar .tab").forEach((t) => t.classList.remove("active"));
|
||||||
btn.classList.add("active");
|
btn.classList.add("active");
|
||||||
|
const toolsBtn = document.getElementById("mobile-more-btn");
|
||||||
|
if (toolsBtn) toolsBtn.classList.toggle("active", getComputedStyle(btn).display === "none");
|
||||||
window.trxUi?.syncSelectedTab(document.querySelector(".tab-bar-nav"), btn);
|
window.trxUi?.syncSelectedTab(document.querySelector(".tab-bar-nav"), btn);
|
||||||
document.querySelectorAll(".tab-panel").forEach((p) => p.style.display = "none");
|
document.querySelectorAll(".tab-panel").forEach((p) => p.style.display = "none");
|
||||||
const panel = document.getElementById(`tab-${name}`);
|
const panel = document.getElementById(`tab-${name}`);
|
||||||
|
|||||||
@@ -46,7 +46,7 @@ SPDX-License-Identifier: GPL-2.0-or-later
|
|||||||
<div class="tab-bar-nav" aria-label="Primary navigation">
|
<div class="tab-bar-nav" aria-label="Primary navigation">
|
||||||
<button class="tab active" data-tab="main">
|
<button class="tab active" data-tab="main">
|
||||||
<svg class="tab-icon" aria-hidden="true"><use href="#icon-home"/></svg>
|
<svg class="tab-icon" aria-hidden="true"><use href="#icon-home"/></svg>
|
||||||
<span class="tab-label">Main</span>
|
<span class="tab-label">Radio</span>
|
||||||
</button>
|
</button>
|
||||||
<button class="tab" data-tab="bookmarks">
|
<button class="tab" data-tab="bookmarks">
|
||||||
<svg class="tab-icon" aria-hidden="true"><use href="#icon-bookmark"/></svg>
|
<svg class="tab-icon" aria-hidden="true"><use href="#icon-bookmark"/></svg>
|
||||||
@@ -85,7 +85,6 @@ SPDX-License-Identifier: GPL-2.0-or-later
|
|||||||
<button id="header-rec-btn" class="header-bar-btn header-rec-btn" type="button" aria-label="Toggle recording" title="Toggle recording">REC</button>
|
<button id="header-rec-btn" class="header-bar-btn header-rec-btn" type="button" aria-label="Toggle recording" title="Toggle recording">REC</button>
|
||||||
<div class="header-rig-switch">
|
<div class="header-rig-switch">
|
||||||
<select id="header-rig-switch-select" aria-label="Select active rig"></select>
|
<select id="header-rig-switch-select" aria-label="Select active rig"></select>
|
||||||
<span id="header-rig-summary" class="header-rig-summary" aria-live="polite"></span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="header-style-pick">
|
<div class="header-style-pick">
|
||||||
<select id="header-style-pick-select" aria-label="Select UI style">
|
<select id="header-style-pick-select" aria-label="Select UI style">
|
||||||
@@ -1052,6 +1051,7 @@ SPDX-License-Identifier: GPL-2.0-or-later
|
|||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<div id="tab-statistics" class="tab-panel" style="display:none;">
|
<div id="tab-statistics" class="tab-panel" style="display:none;">
|
||||||
|
<h2 class="section-heading">Statistics</h2>
|
||||||
<template id="tmpl-statistics">
|
<template id="tmpl-statistics">
|
||||||
<div class="stats-controls">
|
<div class="stats-controls">
|
||||||
<div class="stats-control-group">
|
<div class="stats-control-group">
|
||||||
@@ -1192,6 +1192,7 @@ SPDX-License-Identifier: GPL-2.0-or-later
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
<div id="tab-settings" class="tab-panel" style="display:none;">
|
<div id="tab-settings" class="tab-panel" style="display:none;">
|
||||||
|
<h2 class="section-heading">Settings</h2>
|
||||||
<div class="sub-tab-bar">
|
<div class="sub-tab-bar">
|
||||||
<button class="sub-tab active" data-subtab="settings-scheduler">Scheduler</button>
|
<button class="sub-tab active" data-subtab="settings-scheduler">Scheduler</button>
|
||||||
<button class="sub-tab" data-subtab="settings-background-decode">Background Decode</button>
|
<button class="sub-tab" data-subtab="settings-background-decode">Background Decode</button>
|
||||||
@@ -1487,6 +1488,7 @@ SPDX-License-Identifier: GPL-2.0-or-later
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="tab-about" class="tab-panel" style="display:none;">
|
<div id="tab-about" class="tab-panel" style="display:none;">
|
||||||
|
<h2 class="section-heading">About</h2>
|
||||||
<div id="auth-badge" style="display:none; margin-bottom: 1rem; padding: 0.5rem; background: var(--bg-secondary); border-radius: 0.25rem; color: var(--text-muted); font-size: 0.85rem;">Authenticated as: <strong id="auth-role-badge">--</strong></div>
|
<div id="auth-badge" style="display:none; margin-bottom: 1rem; padding: 0.5rem; background: var(--bg-secondary); border-radius: 0.25rem; color: var(--text-muted); font-size: 0.85rem;">Authenticated as: <strong id="auth-role-badge">--</strong></div>
|
||||||
<template id="tmpl-about">
|
<template id="tmpl-about">
|
||||||
<div class="sub-tab-bar">
|
<div class="sub-tab-bar">
|
||||||
|
|||||||
@@ -1229,12 +1229,20 @@ small { color: var(--text-muted); }
|
|||||||
gap: 0;
|
gap: 0;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
/* One row, always. Controls that do not fit are moved into the overflow menu
|
||||||
|
* by ui-core rather than wrapping: wrapping made the header's height depend on
|
||||||
|
* the viewport width in a way that was not even monotonic (112px at 1440,
|
||||||
|
* 169px at 1100, 131px at 900), which is what made the bar feel unstable. */
|
||||||
.top-bar-actions {
|
.top-bar-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: center;
|
||||||
gap: 0.45rem 0.6rem;
|
gap: 0.4rem;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
flex-wrap: wrap;
|
flex-wrap: nowrap;
|
||||||
|
}
|
||||||
|
/* Every control in the bar is the same height and none of them stretch. */
|
||||||
|
.top-bar-actions > * {
|
||||||
|
flex: 0 0 auto;
|
||||||
}
|
}
|
||||||
.header-bar-btn.header-audio-btn {
|
.header-bar-btn.header-audio-btn {
|
||||||
width: 2rem;
|
width: 2rem;
|
||||||
@@ -1403,21 +1411,13 @@ small { color: var(--text-muted); }
|
|||||||
gap: 0.8rem;
|
gap: 0.8rem;
|
||||||
padding: 0.9rem 0.2rem 0;
|
padding: 0.9rem 0.2rem 0;
|
||||||
}
|
}
|
||||||
|
/* Inline, not stacked: the summary used to sit under the select, making this
|
||||||
|
* the only 54px control in a bar of 32px ones. */
|
||||||
.header-rig-switch {
|
.header-rig-switch {
|
||||||
display: grid;
|
display: flex;
|
||||||
grid-template-columns: minmax(0, 1fr);
|
align-items: center;
|
||||||
align-items: start;
|
gap: 0.4rem;
|
||||||
gap: 0.35rem;
|
min-width: 0;
|
||||||
}
|
|
||||||
.header-rig-summary {
|
|
||||||
display: block;
|
|
||||||
max-width: 20rem;
|
|
||||||
color: var(--text-muted);
|
|
||||||
font-size: var(--fs-xs);
|
|
||||||
line-height: 1.35;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
}
|
||||||
.header-rig-switch select {
|
.header-rig-switch select {
|
||||||
min-width: 8rem;
|
min-width: 8rem;
|
||||||
@@ -1531,7 +1531,19 @@ small { color: var(--text-muted); }
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.2rem;
|
gap: 0.2rem;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
flex-wrap: wrap;
|
/* Never wraps. It must still be able to shrink below its content, or it
|
||||||
|
* overlaps the controls; the menus it anchors are reparented to the body on
|
||||||
|
* open, so clipping here no longer reaches them. */
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.tab-bar-nav .tab { flex: 0 0 auto; }
|
||||||
|
/* Icons before scrolling: every tab already carries one, and four icons plus
|
||||||
|
* More always fit, so the strip never has to hide a destination. */
|
||||||
|
@media (max-width: 1360px) and (min-width: 701px) {
|
||||||
|
.tab-bar-nav .tab .tab-label { display: none; }
|
||||||
|
.tab-bar-nav .tab .tab-icon, .tab-bar-nav .tab .tab-more-icon { display: block; }
|
||||||
|
.tab-bar-nav .tab { padding: 0.5rem 0.6rem; }
|
||||||
}
|
}
|
||||||
.tab {
|
.tab {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
@@ -1554,6 +1566,7 @@ small { color: var(--text-muted); }
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
.tab-label { display: block; }
|
.tab-label { display: block; }
|
||||||
|
.tab-more-icon { display: none; }
|
||||||
.about-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
|
.about-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
|
||||||
.about-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 0.5rem; padding: 0; overflow: hidden; }
|
.about-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 0.5rem; padding: 0; overflow: hidden; }
|
||||||
.about-card-title { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.75rem; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-heading); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--card-bg) 50%, var(--bg)); }
|
.about-card-title { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.75rem; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-heading); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--card-bg) 50%, var(--bg)); }
|
||||||
@@ -2964,7 +2977,10 @@ button.is-active {
|
|||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
.operator-layout-picker::before { content: "Layout"; }
|
/* The prefix made the least-used control the widest in the bar; the
|
||||||
|
* select carries its own aria-label and title instead. */
|
||||||
|
.operator-layout-picker { padding-left: 0; }
|
||||||
|
.operator-layout-picker select { max-width: 8rem; }
|
||||||
.operator-layout-picker select {
|
.operator-layout-picker select {
|
||||||
width: auto;
|
width: auto;
|
||||||
min-height: 2rem;
|
min-height: 2rem;
|
||||||
@@ -3060,9 +3076,22 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay {
|
|||||||
body[data-operator-layout="broadcast"] .controls-row { grid-template-columns: 1fr auto; }
|
body[data-operator-layout="broadcast"] .controls-row { grid-template-columns: 1fr auto; }
|
||||||
body[data-operator-layout="broadcast"] #wfm-controls-col { grid-column: 1 / -1; }
|
body[data-operator-layout="broadcast"] #wfm-controls-col { grid-column: 1 / -1; }
|
||||||
}
|
}
|
||||||
.mobile-more-btn, .mobile-more-menu, .decoder-tab-select { display: none; }
|
/* One navigation model at every width. Statistics, Recorder, Settings and
|
||||||
|
* About are occasional destinations: they live behind More rather than
|
||||||
|
* competing with the operating tabs for the row and then scrolling out of
|
||||||
|
* reach. The mobile layout already grouped them this way; the desktop strip
|
||||||
|
* now matches it, which is why the tab strip no longer needs to scroll. */
|
||||||
|
.tab-bar-nav .tab[data-tab="statistics"],
|
||||||
|
.tab-bar-nav .tab[data-tab="recorder"],
|
||||||
|
.tab-bar-nav .tab[data-tab="settings"],
|
||||||
|
.tab-bar-nav .tab[data-tab="about"] { display: none; }
|
||||||
|
.mobile-more-btn { display: flex; flex: 0 0 auto; }
|
||||||
|
.mobile-more-menu, .decoder-tab-select { display: none; }
|
||||||
|
.tab-bar-nav { position: relative; }
|
||||||
.mobile-more-menu {
|
.mobile-more-menu {
|
||||||
position: fixed;
|
position: absolute;
|
||||||
|
top: calc(100% + 0.4rem);
|
||||||
|
right: 0;
|
||||||
right: max(0.75rem, env(safe-area-inset-right));
|
right: max(0.75rem, env(safe-area-inset-right));
|
||||||
bottom: calc(5.4rem + env(safe-area-inset-bottom));
|
bottom: calc(5.4rem + env(safe-area-inset-bottom));
|
||||||
z-index: 80;
|
z-index: 80;
|
||||||
@@ -3251,7 +3280,7 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay {
|
|||||||
color: var(--text);
|
color: var(--text);
|
||||||
box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
|
box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
|
||||||
}
|
}
|
||||||
.tab-icon { display: block; }
|
.tab-icon, .tab-more-icon { display: block; }
|
||||||
/* Shorten long tab labels to keep bottom nav compact */
|
/* Shorten long tab labels to keep bottom nav compact */
|
||||||
.tab[data-tab="bookmarks"] .tab-label { font-size: 0.6rem; }
|
.tab[data-tab="bookmarks"] .tab-label { font-size: 0.6rem; }
|
||||||
.tab[data-tab="digital-modes"] .tab-label { font-size: 0.6rem; }
|
.tab[data-tab="digital-modes"] .tab-label { font-size: 0.6rem; }
|
||||||
@@ -3259,6 +3288,12 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay {
|
|||||||
.tab[data-tab="statistics"], .tab[data-tab="recorder"],
|
.tab[data-tab="statistics"], .tab[data-tab="recorder"],
|
||||||
.tab[data-tab="settings"], .tab[data-tab="about"] { display: none; }
|
.tab[data-tab="settings"], .tab[data-tab="about"] { display: none; }
|
||||||
.mobile-more-btn { display: flex; }
|
.mobile-more-btn { display: flex; }
|
||||||
|
.mobile-more-menu {
|
||||||
|
position: fixed;
|
||||||
|
top: auto;
|
||||||
|
right: max(0.75rem, env(safe-area-inset-right));
|
||||||
|
bottom: calc(5.4rem + env(safe-area-inset-bottom));
|
||||||
|
}
|
||||||
.mobile-more-btn[aria-expanded="true"] {
|
.mobile-more-btn[aria-expanded="true"] {
|
||||||
color: var(--accent-text);
|
color: var(--accent-text);
|
||||||
background: color-mix(in srgb, var(--accent-green) 10%, transparent);
|
background: color-mix(in srgb, var(--accent-green) 10%, transparent);
|
||||||
@@ -3282,24 +3317,24 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay {
|
|||||||
.toast-region { bottom: calc(5.7rem + env(safe-area-inset-bottom)); }
|
.toast-region { bottom: calc(5.7rem + env(safe-area-inset-bottom)); }
|
||||||
.top-bar-actions {
|
.top-bar-actions {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
justify-content: flex-start;
|
justify-content: flex-end;
|
||||||
flex-wrap: wrap;
|
flex-wrap: nowrap;
|
||||||
gap: 0.45rem;
|
gap: 0.4rem;
|
||||||
}
|
}
|
||||||
.operator-layout-picker { max-width: 100%; }
|
.operator-layout-picker { max-width: 100%; }
|
||||||
.operator-layout-picker select { max-width: 10rem; }
|
.operator-layout-picker select { max-width: 10rem; }
|
||||||
.header-rig-switch,
|
.header-rig-switch,
|
||||||
.header-style-pick {
|
.header-style-pick {
|
||||||
flex: 1 1 12rem;
|
flex: 0 0 auto;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
.header-rig-switch select,
|
.header-rig-switch select,
|
||||||
.header-style-pick select {
|
.header-style-pick select {
|
||||||
width: 100%;
|
width: auto;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
.header-bar-btn {
|
.header-bar-btn {
|
||||||
flex: 1 1 calc(50% - 0.3rem);
|
flex: 0 0 auto;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
#tab-main,
|
#tab-main,
|
||||||
@@ -5153,7 +5188,6 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
padding: 1rem;
|
|
||||||
}
|
}
|
||||||
.stats-controls {
|
.stats-controls {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -5379,3 +5413,51 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay {
|
|||||||
font-size: max(0.75rem, 12px);
|
font-size: max(0.75rem, 12px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* --- Top bar overflow menu ------------------------------------------------ */
|
||||||
|
.top-bar-more { position: relative; }
|
||||||
|
.top-bar-more[hidden] { display: none; }
|
||||||
|
.top-bar-more-btn {
|
||||||
|
width: 2rem;
|
||||||
|
height: 2rem;
|
||||||
|
min-height: 2rem;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
.top-bar-more-menu {
|
||||||
|
position: absolute;
|
||||||
|
top: calc(100% + 0.35rem);
|
||||||
|
right: 0;
|
||||||
|
z-index: 40;
|
||||||
|
display: none;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.4rem;
|
||||||
|
min-width: 12rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
border: 1px solid var(--border-light);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
background: var(--surface);
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
|
||||||
|
}
|
||||||
|
.top-bar-more-menu.is-open { display: flex; }
|
||||||
|
.top-bar-more-menu > * { width: 100%; }
|
||||||
|
.top-bar-more-menu select { width: 100%; max-width: none; }
|
||||||
|
|
||||||
|
|
||||||
|
/* Page title for destinations reached through the Tools menu. The tab strip
|
||||||
|
* cannot show which of them is active, so each states its own name.
|
||||||
|
*
|
||||||
|
* The margin is the spacing on the plain block panels; #tab-statistics is a
|
||||||
|
* flex column with its own `gap`, where the margin lands on top of that gap
|
||||||
|
* and doubles the space under the title. */
|
||||||
|
.section-heading {
|
||||||
|
margin: 0 0 var(--space-3);
|
||||||
|
font-size: 1.15rem;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
#tab-statistics > .section-heading { margin-bottom: 0; }
|
||||||
|
|||||||
@@ -724,7 +724,6 @@ const signalSplitValueEl = document.getElementById("signal-split-value");
|
|||||||
const overviewPeakHoldEl = document.getElementById("overview-peak-hold") as HTMLInputElement | null;
|
const overviewPeakHoldEl = document.getElementById("overview-peak-hold") as HTMLInputElement | null;
|
||||||
const themeToggleBtn = document.getElementById("theme-toggle") as HTMLButtonElement | null;
|
const themeToggleBtn = document.getElementById("theme-toggle") as HTMLButtonElement | null;
|
||||||
const headerRigSwitchSelect = document.getElementById("header-rig-switch-select") as HTMLSelectElement | null;
|
const headerRigSwitchSelect = document.getElementById("header-rig-switch-select") as HTMLSelectElement | null;
|
||||||
const headerRigSummary = document.getElementById("header-rig-summary");
|
|
||||||
const headerStylePickSelect = document.getElementById("header-style-pick-select") as HTMLSelectElement | null;
|
const headerStylePickSelect = document.getElementById("header-style-pick-select") as HTMLSelectElement | null;
|
||||||
const rdsPsOverlay = document.getElementById("rds-ps-overlay");
|
const rdsPsOverlay = document.getElementById("rds-ps-overlay");
|
||||||
const tabMainEl = document.getElementById("tab-main");
|
const tabMainEl = document.getElementById("tab-main");
|
||||||
@@ -1371,20 +1370,6 @@ function populateRigPicker(selectEl: HTMLSelectElement | null, rigIds: string[],
|
|||||||
selectEl.disabled = disabled;
|
selectEl.disabled = disabled;
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateRigIdentitySummary(rigId: string | null, pending = false) {
|
|
||||||
if (!headerRigSummary) return;
|
|
||||||
const rig = serverRigs.find((entry) => entry?.remote === rigId);
|
|
||||||
if (!rig) {
|
|
||||||
headerRigSummary.textContent = pending ? "Switching rigs…" : "No rig details available";
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const hardware = [rig.manufacturer, rig.model].map(value => String(value || "").trim()).filter(Boolean).join(" ") || rig.remote;
|
|
||||||
const modes = Array.isArray(rig.supported_modes) ? rig.supported_modes.map(normalizeMode).filter(Boolean) : [];
|
|
||||||
const features = [rig.tx ? "TX" : "RX", rig.filter_controls ? "SDR filters" : null, ...modes.slice(0, 5)];
|
|
||||||
if (modes.length > 5) features.push(`+${modes.length - 5} modes`);
|
|
||||||
headerRigSummary.textContent = `${pending ? "Switching to " : ""}${hardware} · ${features.filter(Boolean).join(" · ")}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateRigSubtitle(activeRigId: string | null) {
|
function updateRigSubtitle(activeRigId: string | null) {
|
||||||
if (!rigSubtitle) return;
|
if (!rigSubtitle) return;
|
||||||
const name = (activeRigId && lastRigDisplayNames[activeRigId]) || activeRigId || "--";
|
const name = (activeRigId && lastRigDisplayNames[activeRigId]) || activeRigId || "--";
|
||||||
@@ -1421,7 +1406,6 @@ function applyRigList(activeRigId: string | null, rigIds: string[], displayNames
|
|||||||
const disableSwitch = lastRigIds.length === 0 || !authRole || authRole === "rx";
|
const disableSwitch = lastRigIds.length === 0 || !authRole || authRole === "rx";
|
||||||
populateRigPicker(headerRigSwitchSelect, lastRigIds, lastActiveRigId, disableSwitch);
|
populateRigPicker(headerRigSwitchSelect, lastRigIds, lastActiveRigId, disableSwitch);
|
||||||
updateRigSubtitle(lastActiveRigId);
|
updateRigSubtitle(lastActiveRigId);
|
||||||
updateRigIdentitySummary(lastActiveRigId);
|
|
||||||
window.trxUi?.setActiveRig(lastActiveRigId);
|
window.trxUi?.setActiveRig(lastActiveRigId);
|
||||||
if (rigListChanged) {
|
if (rigListChanged) {
|
||||||
window.trx.modules.scheduler?.setRig(lastActiveRigId);
|
window.trx.modules.scheduler?.setRig(lastActiveRigId);
|
||||||
@@ -4023,7 +4007,7 @@ async function switchRigFromSelect(selectEl: HTMLSelectElement) {
|
|||||||
rigSwitchInProgress = true;
|
rigSwitchInProgress = true;
|
||||||
setControlPending(selectEl, true);
|
setControlPending(selectEl, true);
|
||||||
selectEl.closest(".header-rig-switch")?.classList.add("is-switching");
|
selectEl.closest(".header-rig-switch")?.classList.add("is-switching");
|
||||||
updateRigIdentitySummary(nextRig, true);
|
showHint(`Switching to ${lastRigDisplayNames[nextRig] || nextRig}…`);
|
||||||
showHint(`Switching to ${lastRigDisplayNames[nextRig] || nextRig}…`);
|
showHint(`Switching to ${lastRigDisplayNames[nextRig] || nextRig}…`);
|
||||||
try {
|
try {
|
||||||
const sidParam = sseSessionId ? `&session_id=${encodeURIComponent(sseSessionId)}` : "";
|
const sidParam = sseSessionId ? `&session_id=${encodeURIComponent(sseSessionId)}` : "";
|
||||||
@@ -4031,7 +4015,6 @@ async function switchRigFromSelect(selectEl: HTMLSelectElement) {
|
|||||||
lastActiveRigId = nextRig;
|
lastActiveRigId = nextRig;
|
||||||
resetDecoderStateOnRigSwitch();
|
resetDecoderStateOnRigSwitch();
|
||||||
updateRigSubtitle(lastActiveRigId);
|
updateRigSubtitle(lastActiveRigId);
|
||||||
updateRigIdentitySummary(lastActiveRigId);
|
|
||||||
window.trxUi?.setActiveRig(lastActiveRigId);
|
window.trxUi?.setActiveRig(lastActiveRigId);
|
||||||
window.trx.modules.scheduler?.setRig(lastActiveRigId);
|
window.trx.modules.scheduler?.setRig(lastActiveRigId);
|
||||||
window.trx.modules.backgroundDecode?.setRig(lastActiveRigId);
|
window.trx.modules.backgroundDecode?.setRig(lastActiveRigId);
|
||||||
@@ -4050,7 +4033,6 @@ async function switchRigFromSelect(selectEl: HTMLSelectElement) {
|
|||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error("select_rig failed:", err);
|
console.error("select_rig failed:", err);
|
||||||
selectEl.value = prevRig || "";
|
selectEl.value = prevRig || "";
|
||||||
updateRigIdentitySummary(prevRig);
|
|
||||||
window.trxUi?.notify("Rig could not be switched", { kind: "error" });
|
window.trxUi?.notify("Rig could not be switched", { kind: "error" });
|
||||||
} finally {
|
} finally {
|
||||||
rigSwitchInProgress = false;
|
rigSwitchInProgress = false;
|
||||||
@@ -4618,6 +4600,12 @@ function navigateToTab(name: TabName, options: { updateHistory?: boolean; replac
|
|||||||
_activeTab = name;
|
_activeTab = name;
|
||||||
document.querySelectorAll(".tab-bar .tab").forEach((t) => t.classList.remove("active"));
|
document.querySelectorAll(".tab-bar .tab").forEach((t) => t.classList.remove("active"));
|
||||||
btn.classList.add("active");
|
btn.classList.add("active");
|
||||||
|
// A destination the strip hides is reached through Tools, so mark that
|
||||||
|
// button instead — otherwise the strip looks identical on all four of them.
|
||||||
|
// Derived from what is actually hidden rather than from a second copy of the
|
||||||
|
// grouping, which would drift from the one ui-core installs.
|
||||||
|
const toolsBtn = document.getElementById("mobile-more-btn");
|
||||||
|
if (toolsBtn) toolsBtn.classList.toggle("active", getComputedStyle(btn).display === "none");
|
||||||
window.trxUi?.syncSelectedTab(document.querySelector(".tab-bar-nav"), btn);
|
window.trxUi?.syncSelectedTab(document.querySelector(".tab-bar-nav"), btn);
|
||||||
document.querySelectorAll<HTMLElement>(".tab-panel").forEach((p) => p.style.display = "none");
|
document.querySelectorAll<HTMLElement>(".tab-panel").forEach((p) => p.style.display = "none");
|
||||||
const panel = document.getElementById(`tab-${name}`);
|
const panel = document.getElementById(`tab-${name}`);
|
||||||
|
|||||||
@@ -195,6 +195,31 @@ function elementById<T extends HTMLElement>(id: string): T {
|
|||||||
const layoutCapabilities: Record<LayoutCapability, boolean> = { broadcast: false, digital: false };
|
const layoutCapabilities: Record<LayoutCapability, boolean> = { broadcast: false, digital: false };
|
||||||
let activeRigId: string | null = null;
|
let activeRigId: string | null = null;
|
||||||
|
|
||||||
|
// A layout seeds the collapsible sections; it does not hold them there.
|
||||||
|
// applyLayout runs on every rig-state refresh, so re-applying the disclosure
|
||||||
|
// state unconditionally would reopen or close sections under the operator
|
||||||
|
// once a second — the reason a section could not be expanded while a layout
|
||||||
|
// that collapses it was selected. Sections are therefore written only when
|
||||||
|
// the layout actually changes, or the first time each one appears in the DOM
|
||||||
|
// (the advanced controls are built after the first applyLayout call).
|
||||||
|
const layoutSections: { id: string; key: "advanced" | "audio" | "scheduler" }[] = [
|
||||||
|
{ id: "advanced-radio-controls", key: "advanced" },
|
||||||
|
{ id: "audio-controls", key: "audio" },
|
||||||
|
{ id: "scheduler-controls", key: "scheduler" },
|
||||||
|
];
|
||||||
|
const seededSections = new Set<string>();
|
||||||
|
let appliedLayoutName: LayoutName | null = null;
|
||||||
|
|
||||||
|
function seedLayoutSections(layout: OperatorLayout, layoutChanged: boolean) {
|
||||||
|
layoutSections.forEach(({ id, key }) => {
|
||||||
|
const section = document.getElementById(id) as HTMLDetailsElement | null;
|
||||||
|
if (!section) return;
|
||||||
|
if (!layoutChanged && seededSections.has(id)) return;
|
||||||
|
seededSections.add(id);
|
||||||
|
section.open = layout[key];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function layoutStorageKey() {
|
function layoutStorageKey() {
|
||||||
return activeRigId ? `trxOperatorLayout:${activeRigId}` : "trxOperatorLayout";
|
return activeRigId ? `trxOperatorLayout:${activeRigId}` : "trxOperatorLayout";
|
||||||
}
|
}
|
||||||
@@ -255,12 +280,9 @@ function elementById<T extends HTMLElement>(id: string): T {
|
|||||||
const layout = layouts[permittedName];
|
const layout = layouts[permittedName];
|
||||||
document.body.dataset.operatorLayout = permittedName in layouts ? permittedName : "compact";
|
document.body.dataset.operatorLayout = permittedName in layouts ? permittedName : "compact";
|
||||||
if (options.persist !== false) localStorage.setItem(layoutStorageKey(), permittedName);
|
if (options.persist !== false) localStorage.setItem(layoutStorageKey(), permittedName);
|
||||||
const details = document.getElementById("advanced-radio-controls") as HTMLDetailsElement | null;
|
const layoutChanged = appliedLayoutName !== permittedName;
|
||||||
if (details) details.open = layout.advanced;
|
appliedLayoutName = permittedName;
|
||||||
const audioDetails = document.getElementById("audio-controls") as HTMLDetailsElement | null;
|
seedLayoutSections(layout, layoutChanged);
|
||||||
if (audioDetails) audioDetails.open = layout.audio;
|
|
||||||
const schedulerDetails = document.getElementById("scheduler-controls") as HTMLDetailsElement | null;
|
|
||||||
if (schedulerDetails) schedulerDetails.open = layout.scheduler;
|
|
||||||
if (options.navigate && typeof browserWindow.navigateToTab === "function") {
|
if (options.navigate && typeof browserWindow.navigateToTab === "function") {
|
||||||
browserWindow.navigateToTab(layout.preferredTab);
|
browserWindow.navigateToTab(layout.preferredTab);
|
||||||
}
|
}
|
||||||
@@ -300,6 +322,125 @@ function elementById<T extends HTMLElement>(id: string): T {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Secondary controls, in the order they leave the bar when it gets tight.
|
||||||
|
// Audio, record and the rig picker are the operating controls and stay.
|
||||||
|
const overflowOrder = [".operator-layout-picker", ".header-style-pick", "#theme-toggle"];
|
||||||
|
|
||||||
|
// Anchored at paint time in fixed coordinates. An absolutely positioned
|
||||||
|
// dropdown is clipped by any scrolling ancestor and trapped inside the
|
||||||
|
// stacking context its ancestors create, so it can end up squashed inside
|
||||||
|
// the bar or painted underneath page content. Fixed positioning answers to
|
||||||
|
// the viewport instead, and the menu flips above its button near the bottom
|
||||||
|
// edge.
|
||||||
|
function anchorMenu(button: HTMLElement, menu: HTMLElement) {
|
||||||
|
const rect = button.getBoundingClientRect();
|
||||||
|
// Reparent to the body. Fixed positioning escapes clipping but not
|
||||||
|
// stacking: the header sets `z-index: 2`, which makes it a stacking
|
||||||
|
// context, so any z-index the menu carries is confined below every panel
|
||||||
|
// that paints above level 2 — the spectrum overlays reach 9600. Only
|
||||||
|
// leaving that subtree lets the menu sit above the page.
|
||||||
|
if (menu.parentElement !== document.body) document.body.appendChild(menu);
|
||||||
|
menu.style.position = "fixed";
|
||||||
|
menu.style.zIndex = "9700";
|
||||||
|
menu.style.top = "0px";
|
||||||
|
menu.style.bottom = "auto";
|
||||||
|
// The stylesheet pins these menus to the right of their anchor; leaving
|
||||||
|
// that in place while setting a left would stretch them across the bar.
|
||||||
|
menu.style.right = "auto";
|
||||||
|
const width = menu.offsetWidth || 200;
|
||||||
|
const height = menu.offsetHeight || 0;
|
||||||
|
menu.style.left = `${String(Math.round(Math.min(Math.max(8, rect.right - width), window.innerWidth - width - 8)))}px`;
|
||||||
|
const below = rect.bottom + 8;
|
||||||
|
if (below + height <= window.innerHeight - 8) {
|
||||||
|
menu.style.top = `${String(Math.round(below))}px`;
|
||||||
|
} else {
|
||||||
|
menu.style.top = "auto";
|
||||||
|
menu.style.bottom = `${String(Math.round(window.innerHeight - rect.top + 8))}px`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function installTopBarOverflow() {
|
||||||
|
const actions = document.querySelector<HTMLElement>(".top-bar-actions");
|
||||||
|
if (!actions || document.getElementById("top-bar-more")) return;
|
||||||
|
const wrap = document.createElement("div");
|
||||||
|
wrap.id = "top-bar-more";
|
||||||
|
wrap.className = "top-bar-more";
|
||||||
|
const button = document.createElement("button");
|
||||||
|
button.type = "button";
|
||||||
|
button.id = "top-bar-more-btn";
|
||||||
|
button.className = "header-bar-btn top-bar-more-btn";
|
||||||
|
button.textContent = "⋯";
|
||||||
|
button.setAttribute("aria-haspopup", "menu");
|
||||||
|
button.setAttribute("aria-expanded", "false");
|
||||||
|
button.setAttribute("aria-label", "More controls");
|
||||||
|
button.title = "More controls";
|
||||||
|
const menu = document.createElement("div");
|
||||||
|
menu.id = "top-bar-more-menu";
|
||||||
|
menu.className = "top-bar-more-menu";
|
||||||
|
menu.setAttribute("role", "menu");
|
||||||
|
button.setAttribute("aria-controls", menu.id);
|
||||||
|
wrap.append(button, menu);
|
||||||
|
actions.appendChild(wrap);
|
||||||
|
|
||||||
|
const closeMenu = () => {
|
||||||
|
menu.classList.remove("is-open");
|
||||||
|
button.setAttribute("aria-expanded", "false");
|
||||||
|
};
|
||||||
|
button.addEventListener("click", () => {
|
||||||
|
const open = menu.classList.toggle("is-open");
|
||||||
|
button.setAttribute("aria-expanded", String(open));
|
||||||
|
if (open) anchorMenu(button, menu);
|
||||||
|
});
|
||||||
|
document.addEventListener("click", (event) => {
|
||||||
|
if (!(event.target instanceof Node)) { closeMenu(); return; }
|
||||||
|
if (!wrap.contains(event.target) && !menu.contains(event.target)) closeMenu();
|
||||||
|
});
|
||||||
|
document.addEventListener("keydown", (event) => { if (event.key === "Escape") closeMenu(); });
|
||||||
|
|
||||||
|
// Measured against the bar, not the actions container: the actions are
|
||||||
|
// sized by their content, so their own scrollWidth never exceeds their
|
||||||
|
// clientWidth. A viewport-width threshold is not enough either — how much
|
||||||
|
// fits depends on the rig name and the translated labels, so a bar that is
|
||||||
|
// wide enough on one rig clips a control on another.
|
||||||
|
// `bar.scrollWidth > bar.clientWidth` is true even when nothing is clipped,
|
||||||
|
// so it cannot be the test. What actually matters is that the controls stay
|
||||||
|
// inside the bar and the page tabs are not squeezed into a scroller: seeing
|
||||||
|
// every tab beats keeping the style picker inline.
|
||||||
|
// Compare natural widths against the space available. Rendered widths
|
||||||
|
// cannot answer this: the nav has min-width 0 and scrolls, so it always
|
||||||
|
// shrinks to the leftover space and always reports "scrolling", while the
|
||||||
|
// bar reports overflow even when nothing is clipped. scrollWidth on a
|
||||||
|
// scroll container is its unconstrained content width, which is what a fit
|
||||||
|
// test needs.
|
||||||
|
const barFits = () => {
|
||||||
|
const bar = actions.closest<HTMLElement>(".tab-bar");
|
||||||
|
if (!bar) return true;
|
||||||
|
const identity = bar.querySelector<HTMLElement>(".header-main");
|
||||||
|
const nav = bar.querySelector<HTMLElement>(".tab-bar-nav");
|
||||||
|
const gutters = 48;
|
||||||
|
const needed = (identity?.offsetWidth ?? 0) + (nav?.scrollWidth ?? 0) + actions.scrollWidth + gutters;
|
||||||
|
return needed <= bar.clientWidth;
|
||||||
|
};
|
||||||
|
const reflowOverflow = () => {
|
||||||
|
overflowOrder.forEach((selector) => {
|
||||||
|
const element = menu.querySelector<HTMLElement>(selector);
|
||||||
|
if (element) actions.insertBefore(element, wrap);
|
||||||
|
});
|
||||||
|
wrap.hidden = true;
|
||||||
|
for (const selector of overflowOrder) {
|
||||||
|
if (barFits()) break;
|
||||||
|
const element = actions.querySelector<HTMLElement>(selector);
|
||||||
|
if (!element) continue;
|
||||||
|
wrap.hidden = false;
|
||||||
|
menu.appendChild(element);
|
||||||
|
}
|
||||||
|
wrap.hidden = menu.children.length === 0;
|
||||||
|
if (wrap.hidden) closeMenu();
|
||||||
|
};
|
||||||
|
reflowOverflow();
|
||||||
|
window.addEventListener("resize", reflowOverflow);
|
||||||
|
}
|
||||||
|
|
||||||
function installMobileMore() {
|
function installMobileMore() {
|
||||||
const nav = document.querySelector(".tab-bar-nav");
|
const nav = document.querySelector(".tab-bar-nav");
|
||||||
if (!nav || document.getElementById("mobile-more-btn")) return;
|
if (!nav || document.getElementById("mobile-more-btn")) return;
|
||||||
@@ -307,7 +448,8 @@ function elementById<T extends HTMLElement>(id: string): T {
|
|||||||
more.id = "mobile-more-btn";
|
more.id = "mobile-more-btn";
|
||||||
more.className = "tab mobile-more-btn";
|
more.className = "tab mobile-more-btn";
|
||||||
more.type = "button";
|
more.type = "button";
|
||||||
more.innerHTML = '<span class="tab-more-icon" aria-hidden="true">•••</span><span class="tab-label">More</span>';
|
more.innerHTML = '<span class="tab-more-icon" aria-hidden="true">•••</span><span class="tab-label">Tools</span>';
|
||||||
|
more.setAttribute("aria-label", "Tools and settings");
|
||||||
more.setAttribute("aria-haspopup", "menu");
|
more.setAttribute("aria-haspopup", "menu");
|
||||||
more.setAttribute("aria-expanded", "false");
|
more.setAttribute("aria-expanded", "false");
|
||||||
const menu = document.createElement("div");
|
const menu = document.createElement("div");
|
||||||
@@ -339,7 +481,10 @@ function elementById<T extends HTMLElement>(id: string): T {
|
|||||||
more.addEventListener("click", () => {
|
more.addEventListener("click", () => {
|
||||||
const open = menu.classList.toggle("is-open");
|
const open = menu.classList.toggle("is-open");
|
||||||
more.setAttribute("aria-expanded", String(open));
|
more.setAttribute("aria-expanded", String(open));
|
||||||
if (open) menu.querySelector<HTMLElement>('[role="menuitem"]')?.focus();
|
if (open) {
|
||||||
|
anchorMenu(more, menu);
|
||||||
|
menu.querySelector<HTMLElement>('[role="menuitem"]')?.focus();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
document.addEventListener("click", (event) => {
|
document.addEventListener("click", (event) => {
|
||||||
if (!(event.target instanceof Node) || (!menu.contains(event.target) && !more.contains(event.target))) closeMore();
|
if (!(event.target instanceof Node) || (!menu.contains(event.target) && !more.contains(event.target))) closeMore();
|
||||||
@@ -404,6 +549,7 @@ function elementById<T extends HTMLElement>(id: string): T {
|
|||||||
api.init = function init() {
|
api.init = function init() {
|
||||||
ensureLiveRegions();
|
ensureLiveRegions();
|
||||||
installLayoutControls();
|
installLayoutControls();
|
||||||
|
installTopBarOverflow();
|
||||||
installMobileMore();
|
installMobileMore();
|
||||||
installDecoderPicker();
|
installDecoderPicker();
|
||||||
installDecoderBadges();
|
installDecoderBadges();
|
||||||
|
|||||||
@@ -9,6 +9,9 @@ import path from "node:path";
|
|||||||
import { fileURLToPath } from "node:url";
|
import { fileURLToPath } from "node:url";
|
||||||
import { chromium } from "playwright-core";
|
import { chromium } from "playwright-core";
|
||||||
|
|
||||||
|
// page.evaluate callbacks run in the browser, not in this Node process.
|
||||||
|
/* global document */
|
||||||
|
|
||||||
const frontendDir = path.dirname(path.dirname(fileURLToPath(import.meta.url)));
|
const frontendDir = path.dirname(path.dirname(fileURLToPath(import.meta.url)));
|
||||||
const webDir = path.resolve(frontendDir, "../assets/web");
|
const webDir = path.resolve(frontendDir, "../assets/web");
|
||||||
const generatedDir = path.join(webDir, "generated");
|
const generatedDir = path.join(webDir, "generated");
|
||||||
@@ -184,7 +187,10 @@ try {
|
|||||||
await page.locator('.tab[data-tab="main"]').click();
|
await page.locator('.tab[data-tab="main"]').click();
|
||||||
assert.equal(new URL(page.url()).pathname, "/");
|
assert.equal(new URL(page.url()).pathname, "/");
|
||||||
|
|
||||||
await page.locator('.tab[data-tab="about"]').click();
|
// About is an occasional destination, so it lives behind More at every
|
||||||
|
// width rather than in the operating tab strip.
|
||||||
|
await page.locator("#mobile-more-btn").click();
|
||||||
|
await page.locator('[data-navigate-tab="about"]').click();
|
||||||
await page.locator("#tab-about").waitFor({ state: "visible" });
|
await page.locator("#tab-about").waitFor({ state: "visible" });
|
||||||
assert.equal(new URL(page.url()).pathname, "/about");
|
assert.equal(new URL(page.url()).pathname, "/about");
|
||||||
|
|
||||||
@@ -192,6 +198,55 @@ try {
|
|||||||
await page.locator("#tab-main").waitFor({ state: "visible" });
|
await page.locator("#tab-main").waitFor({ state: "visible" });
|
||||||
assert.equal(new URL(page.url()).pathname, "/");
|
assert.equal(new URL(page.url()).pathname, "/");
|
||||||
assert.deepEqual(runtimeErrors, []);
|
assert.deepEqual(runtimeErrors, []);
|
||||||
|
|
||||||
|
// --- Layout regressions -------------------------------------------------
|
||||||
|
// Every fault below shipped at some point while the rest of this file
|
||||||
|
// passed, because nothing here looked at geometry: a header whose height
|
||||||
|
// tracked the viewport, controls that stretched, a tab strip that ran under
|
||||||
|
// the controls, and a dropdown that opened underneath the spectrum.
|
||||||
|
for (const width of [1440, 1280, 1100, 900]) {
|
||||||
|
await page.setViewportSize({ width, height: 900 });
|
||||||
|
await page.waitForTimeout(250);
|
||||||
|
const header = await page.evaluate(() => {
|
||||||
|
const bar = document.querySelector(".tab-bar");
|
||||||
|
const nav = document.querySelector(".tab-bar-nav");
|
||||||
|
const actions = document.querySelector(".top-bar-actions");
|
||||||
|
const controls = [...actions.children]
|
||||||
|
.filter((el) => !el.hidden && el.getBoundingClientRect().height > 0)
|
||||||
|
.map((el) => Math.round(el.getBoundingClientRect().height));
|
||||||
|
return {
|
||||||
|
barHeight: Math.round(bar.getBoundingClientRect().height),
|
||||||
|
// The tabs, not the strip: with the strip allowed to overflow its box
|
||||||
|
// shrinks while its content paints across the controls, so the
|
||||||
|
// container's own rect never registers the collision.
|
||||||
|
overlap: Math.round(Math.max(...[...nav.querySelectorAll(".tab")]
|
||||||
|
.filter((tab) => tab.offsetParent !== null)
|
||||||
|
.map((tab) => tab.getBoundingClientRect().right))
|
||||||
|
- actions.getBoundingClientRect().left),
|
||||||
|
heights: [...new Set(controls)],
|
||||||
|
pageScrollsSideways: document.documentElement.scrollWidth > document.documentElement.clientWidth + 1,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
assert.ok(header.barHeight <= 96, `header is ${header.barHeight}px at ${width}px; it should stay one row`);
|
||||||
|
assert.ok(header.overlap <= 0, `tab strip overlaps the controls by ${header.overlap}px at ${width}px`);
|
||||||
|
assert.ok(header.heights.length <= 2, `controls have heights ${header.heights.join(", ")} at ${width}px`);
|
||||||
|
assert.equal(header.pageScrollsSideways, false, `page scrolls sideways at ${width}px`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// A dropdown must paint over the page, not inside the header: fixed
|
||||||
|
// positioning escapes clipping but not the header's stacking context.
|
||||||
|
await page.setViewportSize({ width: 1280, height: 900 });
|
||||||
|
await page.waitForTimeout(250);
|
||||||
|
const menu = await page.evaluate(() => {
|
||||||
|
document.getElementById("mobile-more-btn").click();
|
||||||
|
const element = document.getElementById("mobile-more-menu");
|
||||||
|
const rect = element.getBoundingClientRect();
|
||||||
|
const hit = document.elementFromPoint(rect.left + rect.width / 2, rect.top + rect.height / 2);
|
||||||
|
return { width: Math.round(rect.width), height: Math.round(rect.height), onTop: element.contains(hit) };
|
||||||
|
});
|
||||||
|
assert.ok(menu.height > 40 && menu.width > 80, `menu rendered ${menu.width}x${menu.height}`);
|
||||||
|
assert.ok(menu.onTop, "menu is painted underneath the page");
|
||||||
|
|
||||||
} finally {
|
} finally {
|
||||||
await browser.close();
|
await browser.close();
|
||||||
await new Promise((resolve, reject) => server.close((error) => error ? reject(error) : resolve()));
|
await new Promise((resolve, reject) => server.close((error) => error ? reject(error) : resolve()));
|
||||||
|
|||||||
@@ -143,4 +143,31 @@ ui.applyLayout("digital");
|
|||||||
assert.equal(document.body.dataset.operatorLayout, "compact");
|
assert.equal(document.body.dataset.operatorLayout, "compact");
|
||||||
assert.equal(localStorage.getItem("trxOperatorLayout:rig-b"), "compact");
|
assert.equal(localStorage.getItem("trxOperatorLayout:rig-b"), "compact");
|
||||||
|
|
||||||
|
// A layout seeds the collapsible sections but must not hold them there:
|
||||||
|
// applyLayout runs on every rig-state refresh, so an operator who expands a
|
||||||
|
// section a layout collapses by default had it shut again about once a second.
|
||||||
|
const schedulerSection = new Element("details", document);
|
||||||
|
schedulerSection.id = "scheduler-controls";
|
||||||
|
const audioSection = new Element("details", document);
|
||||||
|
audioSection.id = "audio-controls";
|
||||||
|
|
||||||
|
ui.setActiveRig("rig-c");
|
||||||
|
ui.applyLayout("compact");
|
||||||
|
assert.equal(schedulerSection.open, false, "compact seeds the scheduler section closed");
|
||||||
|
|
||||||
|
schedulerSection.open = true; // operator expands it
|
||||||
|
ui.applyLayout("compact"); // the next rig-state refresh
|
||||||
|
assert.equal(schedulerSection.open, true, "re-applying the same layout leaves sections alone");
|
||||||
|
ui.setActiveRig("rig-c");
|
||||||
|
assert.equal(schedulerSection.open, true, "a rig-state refresh leaves sections alone");
|
||||||
|
|
||||||
|
// Choosing a different layout is an explicit request for its defaults.
|
||||||
|
ui.applyLayout("full");
|
||||||
|
assert.equal(schedulerSection.open, true, "full seeds the scheduler section open");
|
||||||
|
assert.equal(audioSection.open, true, "full seeds the audio section open");
|
||||||
|
audioSection.open = false;
|
||||||
|
ui.applyLayout("compact");
|
||||||
|
assert.equal(audioSection.open, false, "compact seeds the audio section closed");
|
||||||
|
assert.equal(schedulerSection.open, false, "switching layout reseeds every section");
|
||||||
|
|
||||||
console.log("ui-core component tests passed");
|
console.log("ui-core component tests passed");
|
||||||
|
|||||||
@@ -95,6 +95,18 @@ pub(crate) async fn about_index(req: HttpRequest) -> impl Responder {
|
|||||||
static_asset_response(&req, "text/html; charset=utf-8", c)
|
static_asset_response(&req, "text/html; charset=utf-8", c)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#[get("/statistics")]
|
||||||
|
pub(crate) async fn statistics_index(req: HttpRequest) -> impl Responder {
|
||||||
|
let c = gz_index_html();
|
||||||
|
static_asset_response(&req, "text/html; charset=utf-8", c)
|
||||||
|
}
|
||||||
|
|
||||||
|
#[get("/bookmarks")]
|
||||||
|
pub(crate) async fn bookmarks_index(req: HttpRequest) -> impl Responder {
|
||||||
|
let c = gz_index_html();
|
||||||
|
static_asset_response(&req, "text/html; charset=utf-8", c)
|
||||||
|
}
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
// Favicon & logo
|
// Favicon & logo
|
||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
|
|||||||
@@ -637,6 +637,8 @@ pub fn configure(cfg: &mut web::ServiceConfig) {
|
|||||||
.service(assets::recorder_index)
|
.service(assets::recorder_index)
|
||||||
.service(assets::settings_index)
|
.service(assets::settings_index)
|
||||||
.service(assets::about_index)
|
.service(assets::about_index)
|
||||||
|
.service(assets::statistics_index)
|
||||||
|
.service(assets::bookmarks_index)
|
||||||
.service(assets::favicon)
|
.service(assets::favicon)
|
||||||
.service(assets::favicon_png)
|
.service(assets::favicon_png)
|
||||||
.service(assets::logo)
|
.service(assets::logo)
|
||||||
|
|||||||
Reference in New Issue
Block a user