feat(web): configurable peer display name

Human peers surface as raw ids (WhatsApp `…-lid`, UUIDs). Read an
optional `display_name` from peer metadata and prefer it over the id in
the peer header and breadcrumb, with the raw id kept as a sub-caption.
An inline edit on the header writes `display_name` via useUpdatePeer
(merging existing metadata); blank clears it. Falls back to the id when
unset.

Closes #32.
This commit is contained in:
Offending Commit
2026-05-28 15:56:42 -05:00
parent dd2edbae99
commit 3de6832a5d
4 changed files with 145 additions and 9 deletions

View File

@@ -15,7 +15,11 @@ const KNOWN_SECTIONS = new Set(Object.keys(SECTION_LABELS));
type Segment = { label: string; href: string | null; mono?: boolean };
function buildSegments(pathname: string, mask: (v: string) => string): Segment[] {
function buildSegments(
pathname: string,
mask: (v: string) => string,
labels: Record<string, string>,
): Segment[] {
if (!pathname.startsWith("/workspaces")) return [];
const rest = pathname.slice("/workspaces".length); // "" | "/wid" | "/wid/peers" | ...
@@ -46,14 +50,20 @@ function buildSegments(pathname: string, mask: (v: string) => string): Segment[]
const subId = parts[2];
if (!subId) return segments;
// A friendly label override (e.g. a peer's display_name) renders in place of
// the raw id and drops the mono styling reserved for ids.
const override = labels[subId];
const subLabel = mask(override ?? subId);
const subMono = override === undefined;
if (parts.length === 3) {
segments.push({ label: mask(subId), href: null, mono: true });
segments.push({ label: subLabel, href: null, mono: subMono });
return segments;
}
segments.push({
label: mask(subId),
label: subLabel,
href: `/workspaces/${wid}/${section}/${subId}`,
mono: true,
mono: subMono,
});
const subSection = parts[3];
@@ -64,10 +74,10 @@ function buildSegments(pathname: string, mask: (v: string) => string): Segment[]
return segments;
}
export function Breadcrumb() {
export function Breadcrumb({ labels = {} }: { labels?: Record<string, string> } = {}) {
const { state } = useRouter();
const { mask } = useDemo();
const segments = buildSegments(state.location.pathname, mask);
const segments = buildSegments(state.location.pathname, mask, labels);
if (segments.length <= 1) return null;