Skip to content

feat(ui): split replay and quality settings into tabs #128

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Palawizard merged 3 commits into from
Oct 27, 2026
Merged

feat(ui): split replay and quality settings into tabs #128

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
24438d8
feat(ui): split replay and quality settings into tabs
Palawizard Oct 27, 2026
175ae02
test(scripts): check the quality tabs in the isolated app
Palawizard Oct 27, 2026
23871cf
docs(docs): describe the replay and quality tabs
Palawizard Oct 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 8 additions & 3 deletions app/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,10 @@ import { QualityButton, StatusBanner } from "./components/StatusBanner.tsx";
import { type DraftRequest, addDrafts } from "./lib/compressDrafts.ts";
import { useT } from "./lib/i18n.ts";
import { onboardingNeeded } from "./lib/ipc.ts";
import { type QualityTab, rememberTab } from "./lib/qualityTabs.ts";
import { useEngine } from "./lib/useEngine.ts";

export type Destination = { view: View; section?: SectionId; focus?: boolean };
export type Destination = { view: View; section?: SectionId; focus?: boolean; tab?: QualityTab };

export default function App() {
return (
Expand Down Expand Up @@ -53,8 +54,12 @@ function Shell() {
[engine.config],
);

const open = ({ view: nextView, section: nextSection, focus }: Destination) => {
const focusQuality = () => focus && setQualityFocus((count) => count + 1);
const open = ({ view: nextView, section: nextSection, focus, tab }: Destination) => {
const focusQuality = () => {
if (!focus) return;
if (tab) rememberTab(tab);
setQualityFocus((count) => count + 1);
};
if (nextView === view && (!nextSection || nextSection === section)) {
focusQuality();
return;
Expand Down
19 changes: 14 additions & 5 deletions app/src/components/StatusBanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@ function ReplayWitness({ phase }: { phase: ReplayPhase }) {
);
}

const QUALITY: Destination = { view: "settings", section: "replay", focus: true };
const QUALITY: Destination = { view: "settings", section: "replay", focus: true, tab: "replay" };
const RECORDING_QUALITY: Destination = { ...QUALITY, tab: "recording" };

export function QualityButton({ onOpen }: { onOpen: (destination: Destination) => void }) {
const t = useT();
Expand All @@ -61,13 +62,21 @@ export function QualityButton({ onOpen }: { onOpen: (destination: Destination) =
);
}

function QualityLink({ summary, onOpen }: { summary: string; onOpen: (destination: Destination) => void }) {
function QualityLink({
summary,
destination,
onOpen,
}: {
summary: string;
destination: Destination;
onOpen: (destination: Destination) => void;
}) {
const t = useT();
const cut = summary.lastIndexOf(" ") + 1;
return (
<button
type="button"
onClick={() => onOpen(QUALITY)}
onClick={() => onOpen(destination)}
aria-label={t("status.qualityLink", { summary })}
className="pressable group -mx-1.5 self-start rounded-md px-1.5 py-0.5 text-left text-ink-2 hover:bg-surface-hover hover:text-ink"
>
Expand Down Expand Up @@ -158,7 +167,7 @@ export function StatusBanner({ engine, onOpen }: { engine: Engine; onOpen: (dest
{t("status.inRam")}
</p>
</div>
{replaySummary && <QualityLink summary={replaySummary} onOpen={onOpen} />}
{replaySummary && <QualityLink summary={replaySummary} destination={QUALITY} onOpen={onOpen} />}
{clipEndsAt !== null && <ClipInProgress endsAt={clipEndsAt} />}
<div className="mt-1 flex flex-wrap items-center gap-2">
<button
Expand Down Expand Up @@ -213,7 +222,7 @@ export function StatusBanner({ engine, onOpen }: { engine: Engine; onOpen: (dest
<span className="score text-[15px] font-medium text-ink-2">{bytes(status?.recording_bytes ?? 0)}</span>
)}
</p>
{recordSummary && <QualityLink summary={recordSummary} onOpen={onOpen} />}
{recordSummary && <QualityLink summary={recordSummary} destination={RECORDING_QUALITY} onOpen={onOpen} />}
<button
type="button"
onClick={recording ? engine.stopRecording : engine.record}
Expand Down
Loading
Loading