fix: add missing @ prefix for federated usernames in profile cards

Add showAt prop to Username component and use it in both UserProfilePopout
and UserProfileModal to consistently display @username for all users.
Also move avatar ring styling into Avatar component's ring prop.

packages/web/src/components/ui/Username.tsx

@@ -3,21 +3,23 @@ import { Tooltip } from './Tooltip';
 
 interface UsernameProps {
   username: string;
+  showAt?: boolean;
   className?: string;
   style?: React.CSSProperties;
 }
 
-export function Username({ username, className, style }: UsernameProps) {
+export function Username({ username, showAt, className, style }: UsernameProps) {
   const atIndex = username.indexOf('@');
+  const prefix = showAt ? '@' : '';
   if (atIndex === -1) {
-    return <span className={className} style={style}>{username}</span>;
+    return <span className={className} style={style}>{prefix}{username}</span>;
   }
   const name = username.slice(0, atIndex);
   const domain = username.slice(atIndex + 1);
   return (
-    <Tooltip content={username} position="top">
+    <Tooltip content={`${prefix}${username}`} position="top">
       <span className={className} style={style}>
-        {name}
+        {prefix}{name}
         <span className="text-txt-tertiary text-[0.8em] ml-0.5 font-normal">@{domain}</span>
       </span>
     </Tooltip>