Change profile handle part to a button that copies it by nushea · Pull Request #981 · SableClient/Sable · GitHub
Skip to content

Change profile handle part to a button that copies it #981

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
nushea merged 1 commit into from
Jun 22, 2026
Merged

Change profile handle part to a button that copies it #981

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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/feat_add_easy_copy_user.md
View file
Open in desktop
41 changes: 37 additions & 4 deletions src/app/components/user-profile/UserHero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useMemo, useState } from 'react';
import { useMemo, useRef, useState } from 'react';
import type { CSSProperties } from 'react';
import {
Avatar,
Expand All @@ -12,6 +12,7 @@ import {
Text,
Tooltip,
toRem,
Chip,
} from 'folds';
import classNames from 'classnames';
import FocusTrap from 'focus-trap-react';
Expand All @@ -27,11 +28,20 @@ import { useBlobCache } from '$hooks/useBlobCache';
import { ImageViewer } from '$components/image-viewer';
import { AvatarPresence, PresenceBadge } from '$components/presence';
import { UserAvatar } from '$components/user-avatar';
import { CaretDown, CaretUp, profileIcon, userFallbackIcon } from '$components/icons/phosphor';
import {
CaretDown,
CaretUp,
Check,
profileIcon,
userFallbackIcon,
} from '$components/icons/phosphor';
import { ClientSideHoverFreeze } from '$components/ClientSideHoverFreeze';
import { useUserProfile } from '$hooks/useUserProfile';
import { shadeColor, areColorsTooSimilar } from '$utils/shadeColor';
import * as css from './styles.css';
import { copyToClipboard } from '$utils/dom';
import { useTimeoutToggle } from '$hooks/useTimeoutToggle';
import { CopyIcon, CrossIcon } from '@phosphor-icons/react';

type UserHeroProps = {
userId: string;
Expand Down Expand Up @@ -228,11 +238,15 @@ export function UserHero({ userId, avatarUrl, bannerUrl, presence, autoplayGifs
type UserHeroNameProps = {
displayName?: string;
userId: string;
server?: string;
customHeroCards?: boolean;
};
export function UserHeroName({ displayName, userId, customHeroCards }: UserHeroNameProps) {
export function UserHeroName({ displayName, userId, server, customHeroCards }: UserHeroNameProps) {
const username = getMxIdLocalPart(userId);
const nick = useNickname(userId);
const [copied, setCopied] = useTimeoutToggle();
const [isHovered, setIsHovered] = useState(false);
const isSuccess = useRef(false);

// Sable username color and fonts
const { color, font } = useSableCosmetics(userId, useRoom(), customHeroCards);
Expand All @@ -257,7 +271,26 @@ export function UserHeroName({ displayName, userId, customHeroCards }: UserHeroN
</Box>
<Box alignItems="Center" gap="100" wrap="Wrap">
<Text size="T200" className={classNames(BreakWord, LineClamp3)} title={username}>
@{username}
<Chip
onClick={() => {
if (username && server) {
copyToClipboard(`@${username}:${server}`);
isSuccess.current = true;
} else isSuccess.current = false;
setCopied();
}}
style={{ backgroundColor: '#0000', padding: '0' }}
onPointerEnter={() => setIsHovered(true)}
onPointerLeave={() => setIsHovered(false)}
before={`@${username}`}
after={
copied || isHovered ? (
profileIcon(copied ? (isSuccess ? Check : CrossIcon) : CopyIcon)
) : (
<></>
)
}
/>
</Text>
</Box>
</Box>
Expand Down
1 change: 1 addition & 0 deletions src/app/components/user-profile/UserRoomProfile.tsx
View file
Open in desktop
Loading