cheogram-www

Show what account is in use for a call on the modals rss

created pr with cheogram-www/call-show-account.1 on 2026-10-27T03:40:44Z · by 9e834e0d

changed pr name to Show what account is in use for a call on the modals on 2026-10-27T03:41:28Z · by 9e834e0d

cmds

checkout latest patchset:

ssh pr.pico.sh pull cheogram-www:call-show-account | git am -3

checkout specific patchset revision:

ssh pr.pico.sh pull cheogram-www:call-show-account [rev] | git am -3

add changes to patch request:

git format-patch main --stdout | ssh pr.pico.sh cheogram-www:call-show-account

add comment to patch request:

ssh pr.pico.sh comment cheogram-www:call-show-account "lgtm!"

Patchset `cheogram-www/call-show-account.1` on 2026-10-27T03:40:44Z · commit b4b3f11

Support other children in AvatarWithPlaceholder

Stephen Paul Weber 2026-10-27T03:40:02Z

→ Show what account is in use for a call on the modals

Stephen Paul Weber 2026-10-27T03:40:19Z

Show what account is in use for a call on the modals

Stephen Paul Weber 2026-10-27T03:40:19Z

Semantic diff summary

0 added, 5 modified, 0 signature changed, 0 removed across 1 analyzed file (1 file skipped: unsupported file type)

src/components/Call.tsx

chunk lines 189-209 modified
chunk lines 483-492 modified
chunk lines 496-510 modified
chunk lines 583-589 modified
chunk lines 642-648 modified

+33 -0 src/App.scss #

......@@ -1392,6 +1392,7 @@ section.cs-message {
	h2 {
		padding: 0;
		font-size: 1.5em;
		margin-bottom: 0;
	}

	img {

......@@ -1427,6 +1428,27 @@ section.cs-message {
		justify-content: center;
		margin-top: 1.5em;
	}

	.call-account {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5em;
		font-size: 0.85em;
		line-height: 1;
	}

	.call-participant {
		display: inline-block;
		margin-right: 1em;

		.call-participant-account {
			position: absolute;
			right: -1.5px;
			bottom: calc(3% - 0.5px);
			animation: call-indicator-pulse 1.5s ease-in-out infinite;
		}
	}
}

.h-card.profile {

......@@ -1715,6 +1737,17 @@ button.MuiFab-root {
	}
}

@keyframes call-indicator-pulse {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.2;
	}
}

#ios {
	img {
		max-width: 80%;

+27 -2 src/components/Call.tsx #

......@@ -189,6 +189,21 @@ export const Call = ({
			: null;
	const callStatus = call?.callStatus();

	const callAccountSelfChat = callAccountId
		? accounts[callAccountId]?.client?.getChat(callAccountId)
		: null;
	const callAccountIndicator = callAccountId ? (
		<div className="call-account" title={`Account: ${callAccountId}`}>
			<AvatarWithPlaceholder
				aria-hidden={true}
				size="xs"
				placeholderUri={callAccountSelfChat?.getPlaceholder()}
				photoUri={callAccountSelfChat?.getPhoto()}
			/>
			<span>for {callAccountSelfChat?.getDisplayName()}</span>
		</div>
	) : null;

	const getCallMedia = useEffectEvent(
		async (
			session: borogove.calls.InitiatedSession,

......@@ -468,10 +483,10 @@ export const Call = ({
								style={{ marginRight: "1em" }}
							/>
							<AvatarWithPlaceholder
								className="call-participant"
								photoUri={callChat.getPhoto()}
								placeholderUri={callChat.getPlaceholder()}
								displayName={callChat.getDisplayName()}
								style={{ display: "inline-block", marginRight: "1em" }}
								onClick={() =>
									navigate(
										href(

......@@ -481,7 +496,15 @@ export const Call = ({
										),
									)
								}
							/>
							>
								<AvatarWithPlaceholder
									className="call-participant-account"
									size="xs"
									displayName={`Account: ${callAccountId}`}
									placeholderUri={callAccountSelfChat?.getPlaceholder()}
									photoUri={callAccountSelfChat?.getPhoto()}
								/>
							</AvatarWithPlaceholder>
							<span
								style={{
									display: "inline-block",

......@@ -560,6 +583,7 @@ export const Call = ({
									{callStatus === borogove.calls.CallStatus.Failed &&
										"Failed to connect"}
								</h2>
								{callAccountIndicator}

								<div className="h-card">
									<AvatarWithPlaceholder

......@@ -618,6 +642,7 @@ export const Call = ({
								/>

								<h2>Incoming call</h2>
								{callAccountIndicator}

								<div className="h-card">
									<AvatarWithPlaceholder

...	...		@@ -1392,6 +1392,7 @@ section.cs-message {
1392	1392		h2 {
1393	1393		padding: 0;
1394	1394		font-size: 1.5em;
	1395	+	margin-bottom: 0;
1395	1396		}
1396	1397
1397	1398		img {

...	...		@@ -1427,6 +1428,27 @@ section.cs-message {
1427	1428		justify-content: center;
1428	1429		margin-top: 1.5em;
1429	1430		}
	1431	+
	1432	+	.call-account {
	1433	+	display: flex;
	1434	+	align-items: center;
	1435	+	justify-content: center;
	1436	+	gap: 0.5em;
	1437	+	font-size: 0.85em;
	1438	+	line-height: 1;
	1439	+	}
	1440	+
	1441	+	.call-participant {
	1442	+	display: inline-block;
	1443	+	margin-right: 1em;
	1444	+
	1445	+	.call-participant-account {
	1446	+	position: absolute;
	1447	+	right: -1.5px;
	1448	+	bottom: calc(3% - 0.5px);
	1449	+	animation: call-indicator-pulse 1.5s ease-in-out infinite;
	1450	+	}
	1451	+	}
1430	1452		}
1431	1453
1432	1454		.h-card.profile {

...	...		@@ -1715,6 +1737,17 @@ button.MuiFab-root {
1715	1737		}
1716	1738		}
1717	1739
	1740	+	@keyframes call-indicator-pulse {
	1741	+	0%,
	1742	+	100% {
	1743	+	opacity: 1;
	1744	+	}
	1745	+
	1746	+	50% {
	1747	+	opacity: 0.2;
	1748	+	}
	1749	+	}
	1750	+
1718	1751		#ios {
1719	1752		img {
1720	1753		max-width: 80%;

...	...		@@ -189,6 +189,21 @@ export const Call = ({
189	189		: null;
190	190		const callStatus = call?.callStatus();
191	191
	192	+	const callAccountSelfChat = callAccountId
	193	+	? accounts[callAccountId]?.client?.getChat(callAccountId)
	194	+	: null;
	195	+	const callAccountIndicator = callAccountId ? (
	196	+	<div className="call-account" title={`Account: ${callAccountId}`}>
	197	+	<AvatarWithPlaceholder
	198	+	aria-hidden={true}
	199	+	size="xs"
	200	+	placeholderUri={callAccountSelfChat?.getPlaceholder()}
	201	+	photoUri={callAccountSelfChat?.getPhoto()}
	202	+	/>
	203	+	<span>for {callAccountSelfChat?.getDisplayName()}</span>
	204	+	</div>
	205	+	) : null;
	206	+
192	207		const getCallMedia = useEffectEvent(
193	208		async (
194	209		session: borogove.calls.InitiatedSession,

...	...		@@ -468,10 +483,10 @@ export const Call = ({
468	483		style={{ marginRight: "1em" }}
469	484		/>
470	485		<AvatarWithPlaceholder
	486	+	className="call-participant"
471	487		photoUri={callChat.getPhoto()}
472	488		placeholderUri={callChat.getPlaceholder()}
473	489		displayName={callChat.getDisplayName()}
474		-	style={{ display: "inline-block", marginRight: "1em" }}
475	490		onClick={() =>
476	491		navigate(
477	492		href(

...	...		@@ -481,7 +496,15 @@ export const Call = ({
481	496		),
482	497		)
483	498		}
484		-	/>
	499	+	>
	500	+	<AvatarWithPlaceholder
	501	+	className="call-participant-account"
	502	+	size="xs"
	503	+	displayName={`Account: ${callAccountId}`}
	504	+	placeholderUri={callAccountSelfChat?.getPlaceholder()}
	505	+	photoUri={callAccountSelfChat?.getPhoto()}
	506	+	/>
	507	+	</AvatarWithPlaceholder>
485	508		<span
486	509		style={{
487	510		display: "inline-block",

...	...		@@ -560,6 +583,7 @@ export const Call = ({
560	583		{callStatus === borogove.calls.CallStatus.Failed &&
561	584		"Failed to connect"}
562	585		</h2>
	586	+	{callAccountIndicator}
563	587
564	588		<div className="h-card">
565	589		<AvatarWithPlaceholder

...	...		@@ -618,6 +642,7 @@ export const Call = ({
618	642		/>
619	643
620	644		<h2>Incoming call</h2>
	645	+	{callAccountIndicator}
621	646
622	647		<div className="h-card">
623	648		<AvatarWithPlaceholder

cheogram-www

Patchset cheogram-www/call-show-account.1 on 2026-10-27T03:40:44Z · commit b4b3f11

Patchset `cheogram-www/call-show-account.1` on 2026-10-27T03:40:44Z · commit b4b3f11