Skip to content

Fix more Visual things #1068

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

Open
nushea wants to merge 2 commits into
base: dev
Choose a base branch
from
Open

Fix more Visual things #1068

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b2d1964
fix unclickable handles and hard to see handles
nushea Jul 12, 2026
f1cd823
fix ghost reactions through an objective hack but the sdk is the sdk
nushea Jul 13, 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
5 changes: 5 additions & 0 deletions .changeset/fix_unlickable_handles.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
default: patch
---

Fix clickable handles
50 changes: 28 additions & 22 deletions src/app/components/user-profile/UserHero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -318,28 +318,34 @@ function UserHeroNameInner({
)}
</Box>
<Box alignItems="Center" gap="100" wrap="Wrap">
<Text size="T200" className={classNames(BreakWord, LineClamp3)} title={username}>
<Chip
onClick={() => {
if (username && server) {
copyToClipboard(`@${username}:${server}`);
isSuccess.current = true;
} else isSuccess.current = false;
setCopied();
}}
style={{ backgroundColor: 'transparent', padding: '0' }}
onPointerEnter={() => setIsHovered(true)}
onPointerLeave={() => setIsHovered(false)}
before={`@${username}`}
after={
copied || isHovered ? (
profileIcon(copied ? (isSuccess ? Check : CrossIcon) : CopyIcon)
) : (
<></>
)
}
/>
</Text>
<Chip
onClick={(evt) => {
evt.stopPropagation();
if (username && server) {
copyToClipboard(`@${username}:${server}`);
isSuccess.current = true;
} else isSuccess.current = false;
setCopied();
}}
style={{ backgroundColor: 'transparent', color: 'inherit', padding: '0' }}
onPointerEnter={() => setIsHovered(true)}
onPointerLeave={() => setIsHovered(false)}
before={
<Text
size="T200"
className={classNames(BreakWord, LineClamp3)}
title={username}
truncate
>{`@${username}`}</Text>
}
after={
copied || isHovered ? (
profileIcon(copied ? (isSuccess ? Check : CrossIcon) : CopyIcon)
) : (
<></>
)
}
/>
</Box>
</Box>
);
Expand Down
2 changes: 1 addition & 1 deletion src/app/components/user-profile/UserRoomProfile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -579,7 +579,7 @@ export function UserRoomProfile({ userId, initialProfile }: Readonly<UserRoomPro
padding: showCustomHeroCard && innerColor ? config.space.S200 : config.space.S300,
}}
>
<Box gap="200" alignItems="Center" wrap="Wrap">
<Box gap="200" alignItems="Center" wrap="Wrap" style={{ color: textColor }}>
<UserHeroName
displayName={displayName}
userId={userId}
Expand Down
63 changes: 38 additions & 25 deletions src/app/hooks/timeline/useTimelineEventRenderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -437,7 +437,8 @@ export function useTimelineEventRenderer({
) : null;

const reactionRelations = getEventReactions(timelineSet, mEventId);
const reactions = reactionRelations?.getSortedAnnotationsByKey();
const annotations = reactionRelations?.getSortedAnnotationsByKey();
const reactions = annotations?.filter((annotation) => annotation[1].size > 0);
const hasReactions = reactions && reactions.length > 0;

return (
Expand Down Expand Up @@ -540,7 +541,8 @@ export function useTimelineEventRenderer({
: (threadReplyTargetId ?? rawReplyEventId);

const reactionRelations = getEventReactions(timelineSet, mEventId);
const reactions = reactionRelations?.getSortedAnnotationsByKey();
const annotations = reactionRelations?.getSortedAnnotationsByKey();
const reactions = annotations?.filter((annotation) => annotation[1].size > 0);
const hasReactions = reactions && reactions.length > 0;
const highlighted = focusItem?.index === item && focusItem.highlight;
const marked = activeReplyId === mEventId && !suppressMark;
Expand Down Expand Up @@ -645,7 +647,7 @@ export function useTimelineEventRenderer({
if (!reactionRelations && !threadChip) return undefined;
return (
<>
{reactionRelations && (
{reactionRelations && hasReactions && (
<Reactions
style={{ marginTop: config.space.S200 }}
room={room}
Expand Down Expand Up @@ -709,7 +711,8 @@ export function useTimelineEventRenderer({
: (threadReplyTargetId ?? rawReplyEventId);

const reactionRelations = getEventReactions(timelineSet, mEventId);
const reactions = reactionRelations?.getSortedAnnotationsByKey();
const annotations = reactionRelations?.getSortedAnnotationsByKey();
const reactions = annotations?.filter((annotation) => annotation[1].size > 0);
const hasReactions = reactions && reactions.length > 0;
const highlighted = focusItem?.index === item && focusItem.highlight;
const marked = activeReplyId === mEventId && !suppressMark;
Expand Down Expand Up @@ -777,7 +780,7 @@ export function useTimelineEventRenderer({
if (!reactionRelations && !threadChip) return undefined;
return (
<>
{reactionRelations && (
{reactionRelations && hasReactions && (
<Reactions
style={{ marginTop: config.space.S200 }}
room={room}
Expand Down Expand Up @@ -888,7 +891,8 @@ export function useTimelineEventRenderer({
: (threadReplyTargetId ?? rawReplyEventId);

const reactionRelations = getEventReactions(timelineSet, mEventId);
const reactions = reactionRelations?.getSortedAnnotationsByKey();
const annotations = reactionRelations?.getSortedAnnotationsByKey();
const reactions = annotations?.filter((annotation) => annotation[1].size > 0);
const hasReactions = reactions && reactions.length > 0;
const highlighted = focusItem?.index === item && focusItem.highlight;
const marked = activeReplyId === mEventId && !suppressMark;
Expand Down Expand Up @@ -949,7 +953,7 @@ export function useTimelineEventRenderer({
if (!reactionRelations && !threadChip) return undefined;
return (
<>
{reactionRelations && (
{reactionRelations && hasReactions && (
<Reactions
style={{ marginTop: config.space.S200 }}
room={room}
Expand Down Expand Up @@ -1014,7 +1018,8 @@ export function useTimelineEventRenderer({
: (threadReplyTargetId ?? rawReplyEventId);

const reactionRelations = getEventReactions(timelineSet, mEventId);
const reactions = reactionRelations?.getSortedAnnotationsByKey();
const annotations = reactionRelations?.getSortedAnnotationsByKey();
const reactions = annotations?.filter((annotation) => annotation[1].size > 0);
const hasReactions = reactions && reactions.length > 0;
const highlighted = focusItem?.index === item && focusItem.highlight;
const marked = activeReplyId === mEventId && !suppressMark;
Expand Down Expand Up @@ -1119,7 +1124,7 @@ export function useTimelineEventRenderer({
if (!reactionRelations && !threadChip) return undefined;
return (
<>
{reactionRelations && (
{reactionRelations && hasReactions && (
<Reactions
style={{ marginTop: config.space.S200 }}
room={room}
Expand Down Expand Up @@ -1186,7 +1191,8 @@ export function useTimelineEventRenderer({

const senderId = mEvent.getSender() ?? '';
const reactionRelations = getEventReactions(timelineSet, mEventId);
const reactions = reactionRelations?.getSortedAnnotationsByKey();
const annotations = reactionRelations?.getSortedAnnotationsByKey();
const reactions = annotations?.filter((annotation) => annotation[1].size > 0);
const hasReactions = reactions && reactions.length > 0;

return (
Expand Down Expand Up @@ -1226,7 +1232,7 @@ export function useTimelineEventRenderer({
if (!reactionRelations && !threadChip) return undefined;
return (
<>
{reactionRelations && (
{reactionRelations && hasReactions && (
<Reactions
style={{ marginTop: config.space.S200 }}
room={room}
Expand Down Expand Up @@ -1279,7 +1285,8 @@ export function useTimelineEventRenderer({
);

const reactionRelations = getEventReactions(timelineSet, mEventId);
const reactions = reactionRelations?.getSortedAnnotationsByKey();
const annotations = reactionRelations?.getSortedAnnotationsByKey();
const reactions = annotations?.filter((annotation) => annotation[1].size > 0);
const hasReactions = reactions && reactions.length > 0;

return (
Expand Down Expand Up @@ -1319,7 +1326,7 @@ export function useTimelineEventRenderer({
if (!reactionRelations && !threadChip) return undefined;
return (
<>
{reactionRelations && (
{reactionRelations && hasReactions && (
<Reactions
style={{ marginTop: config.space.S200 }}
room={room}
Expand Down Expand Up @@ -1374,7 +1381,8 @@ export function useTimelineEventRenderer({
);

const reactionRelations = getEventReactions(timelineSet, mEventId);
const reactions = reactionRelations?.getSortedAnnotationsByKey();
const annotations = reactionRelations?.getSortedAnnotationsByKey();
const reactions = annotations?.filter((annotation) => annotation[1].size > 0);
const hasReactions = reactions && reactions.length > 0;

return (
Expand Down Expand Up @@ -1414,7 +1422,7 @@ export function useTimelineEventRenderer({
if (!reactionRelations && !threadChip) return undefined;
return (
<>
{reactionRelations && (
{reactionRelations && hasReactions && (
<Reactions
style={{ marginTop: config.space.S200 }}
room={room}
Expand Down Expand Up @@ -1469,7 +1477,8 @@ export function useTimelineEventRenderer({
);

const reactionRelations = getEventReactions(timelineSet, mEventId);
const reactions = reactionRelations?.getSortedAnnotationsByKey();
const annotations = reactionRelations?.getSortedAnnotationsByKey();
const reactions = annotations?.filter((annotation) => annotation[1].size > 0);
const hasReactions = reactions && reactions.length > 0;

return (
Expand Down Expand Up @@ -1509,7 +1518,7 @@ export function useTimelineEventRenderer({
if (!reactionRelations && !threadChip) return undefined;
return (
<>
{reactionRelations && (
{reactionRelations && hasReactions && (
<Reactions
style={{ marginTop: config.space.S200 }}
room={room}
Expand Down Expand Up @@ -1571,7 +1580,8 @@ export function useTimelineEventRenderer({
);

const reactionRelations = getEventReactions(timelineSet, mEventId);
const reactions = reactionRelations?.getSortedAnnotationsByKey();
const annotations = reactionRelations?.getSortedAnnotationsByKey();
const reactions = annotations?.filter((annotation) => annotation[1].size > 0);
const hasReactions = reactions && reactions.length > 0;

return (
Expand Down Expand Up @@ -1611,7 +1621,7 @@ export function useTimelineEventRenderer({
if (!reactionRelations && !threadChip) return undefined;
return (
<>
{reactionRelations && (
{reactionRelations && hasReactions && (
<Reactions
style={{ marginTop: config.space.S200 }}
room={room}
Expand Down Expand Up @@ -1680,7 +1690,8 @@ export function useTimelineEventRenderer({
) : null;

const reactionRelations = getEventReactions(timelineSet, mEventId);
const reactions = reactionRelations?.getSortedAnnotationsByKey();
const annotations = reactionRelations?.getSortedAnnotationsByKey();
const reactions = annotations?.filter((annotation) => annotation[1].size > 0);
const hasReactions = reactions && reactions.length > 0;

if (mEvent.isRedacted()) {
Expand Down Expand Up @@ -1813,7 +1824,7 @@ export function useTimelineEventRenderer({
if (!reactionRelations && !threadChip) return undefined;
return (
<>
{reactionRelations && (
{reactionRelations && hasReactions && (
<Reactions
style={{ marginTop: config.space.S200 }}
room={room}
Expand Down Expand Up @@ -1895,7 +1906,8 @@ export function useTimelineEventRenderer({
) : null;

const reactionRelations = getEventReactions(timelineSet, mEventId);
const reactions = reactionRelations?.getSortedAnnotationsByKey();
const annotations = reactionRelations?.getSortedAnnotationsByKey();
const reactions = annotations?.filter((annotation) => annotation[1].size > 0);
const hasReactions = reactions && reactions.length > 0;

return (
Expand Down Expand Up @@ -1935,7 +1947,7 @@ export function useTimelineEventRenderer({
if (!reactionRelations && !threadChip) return undefined;
return (
<>
{reactionRelations && (
{reactionRelations && hasReactions && (
<Reactions
style={{ marginTop: config.space.S200 }}
room={room}
Expand Down Expand Up @@ -2003,7 +2015,8 @@ export function useTimelineEventRenderer({
);

const reactionRelations = getEventReactions(timelineSet, mEventId);
const reactions = reactionRelations?.getSortedAnnotationsByKey();
const annotations = reactionRelations?.getSortedAnnotationsByKey();
const reactions = annotations?.filter((annotation) => annotation[1].size > 0);
const hasReactions = reactions && reactions.length > 0;

return (
Expand Down Expand Up @@ -2043,7 +2056,7 @@ export function useTimelineEventRenderer({
if (!reactionRelations && !threadChip) return undefined;
return (
<>
{reactionRelations && (
{reactionRelations && hasReactions && (
<Reactions
style={{ marginTop: config.space.S200 }}
room={room}
Expand Down
4 changes: 3 additions & 1 deletion src/app/pages/client/profile/Profile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ import { UseStateProvider } from '$components/UseStateProvider';
import { FocusTrap } from 'focus-trap-react';
import { LogoutDialog } from '$components/LogoutDialog';
import { stopPropagation } from '$utils/keyboard';
import { getMxIdServer } from '$utils/mxIdHelper';

export function ProfileMobile() {
const mx = useMatrixClient();
Expand All @@ -52,6 +53,7 @@ export function ProfileMobile() {
const [oldSidebar] = useSetting(settingsAtom, 'oldSidebar');

const userId = mx.getUserId() ?? '';
const server = getMxIdServer(userId);
const profile = useUserProfile(userId);
const presence = useUserPresence(userId);
const [isSettingsOpen, setIsSettingsOpen] = useState(false);
Expand Down Expand Up @@ -167,7 +169,7 @@ export function ProfileMobile() {
/>

<Box style={{ padding: `0 ${config.space.S400}` }}>
<GlobalUserHeroName displayName={displayName} userId={userId} />
<GlobalUserHeroName displayName={displayName} userId={userId} server={server} />
</Box>
</Box>

Expand Down
4 changes: 3 additions & 1 deletion src/app/pages/client/sidebar/UserMenuTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ import {
UserIcon,
} from '@phosphor-icons/react';
import * as css from './UserMenuTab.css';
import { getMxIdServer } from '$utils/mxIdHelper';

const log = createLogger('AccountSwitcherTab');

Expand Down Expand Up @@ -643,6 +644,7 @@ export function UserMenuTab({ isBottom, isMobile }: { isBottom?: boolean; isMobi
const navigate = useNavigate();

const userId = mx.getUserId() ?? '';
const server = getMxIdServer(userId);
const profile = useUserProfile(userId);
const presence = useUserPresence(userId);
const currentPresence = presence?.presence ?? Presence.Online;
Expand Down Expand Up @@ -761,7 +763,7 @@ export function UserMenuTab({ isBottom, isMobile }: { isBottom?: boolean; isMobi
allowEditing={true}
/>
<Box style={{ padding: `0 ${config.space.S400} 0` }}>
<GlobalUserHeroName displayName={displayName} userId={userId} />
<GlobalUserHeroName displayName={displayName} userId={userId} server={server} />
</Box>
</Box>

Expand Down
2 changes: 2 additions & 0 deletions src/app/pages/client/sidebar/UserQuickTools.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,8 @@ export function UserQuickTools({
<>
<UserMenuTab isBottom />
<Box
shrink="No"
grow="No"
style={{
gap: config.space.S300,
}}
Expand Down
Loading