mirror of
https://github.com/mountain-loop/yaak.git
synced 2026-11-13 12:13:42 +01:00
Gregory SchierandClaude Fable 5.2
35058cc3be
Apply the approved wording table: labels stay short, explanations are one full sentence about the user's traffic, and detail moves behind an info icon on the first-run card, the body banners, the Settings Helper row and the rejected card. One word per thing: traffic and flows, recorded, truncated, domains, searches, the CLI, Retry. Backend messages that reach the window change with them, with the tests and harness fixtures that assert on the old text. The two working files for the pass are removed from the branch. Co-Authored-By: Claude Fable 5.2 <noreply@anthropic.com>
64 lines
2.4 KiB
TypeScript
64 lines
2.4 KiB
TypeScript
import type { ProxyLock } from "@yaakapp-internal/proxy-lib";
|
|
import { Button, Icon, LoadingIcon } from "@yaakapp-internal/ui";
|
|
import { useAtomValue } from "jotai";
|
|
import { useRpcMutation } from "../hooks/useRpcMutation";
|
|
import { encryptingPercent } from "../lib/encrypting";
|
|
import { lockedLine } from "../lib/locked";
|
|
import { proxyStateAtom } from "../lib/store";
|
|
import { getOsType } from "../lib/tauri";
|
|
|
|
/**
|
|
* Over the list and the detail pane while captured traffic can't be read: its key is
|
|
* unavailable, or traffic from before encryption is being encrypted. Retry reads the key again
|
|
* and opens it.
|
|
*/
|
|
export function LockedState({ lock }: { lock: ProxyLock }) {
|
|
const proxyState = useAtomValue(proxyStateAtom);
|
|
const retry = useRpcMutation("take_over");
|
|
const encrypting = encryptingPercent(proxyState);
|
|
|
|
return (
|
|
<div className="grid place-items-center h-full px-10 pb-16">
|
|
<div className="flex flex-col items-center text-center gap-2 max-w-[28rem]">
|
|
{encrypting != null ? (
|
|
<LoadingIcon size="lg" className="text-text-subtle mb-1" />
|
|
) : (
|
|
<Icon icon="lock" size="lg" className="text-text-subtle mb-1" />
|
|
)}
|
|
<div className="text-lg font-semibold whitespace-nowrap">
|
|
{encrypting != null ? (
|
|
<>
|
|
Encrypting recorded traffic,{" "}
|
|
{/* Sized for "100%" and right-aligned, so the centred line never changes width as
|
|
the number ticks: a changing width re-rasterizes every glyph at a new
|
|
sub-pixel offset, and the line shakes */}
|
|
<span className="inline-block w-[4.5ch] text-right tabular-nums">{encrypting}</span>
|
|
</>
|
|
) : (
|
|
"Traffic is locked"
|
|
)}
|
|
</div>
|
|
<div className="text-sm text-text-subtle">
|
|
{encrypting != null
|
|
? "Earlier traffic shows here once it's encrypted."
|
|
: lockedLine(lock, getOsType())}
|
|
</div>
|
|
{encrypting == null && (
|
|
<Button
|
|
size="xs"
|
|
variant="border"
|
|
className="mt-2"
|
|
isLoading={retry.isPending}
|
|
onClick={() => retry.mutate({})}
|
|
>
|
|
Retry
|
|
</Button>
|
|
)}
|
|
{encrypting == null && retry.error != null && (
|
|
<div className="text-xs text-danger">{retry.error.message}</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|