- {!hasRelationship && !!familiarFollowers?.length && (
-
- {familiarFollowers.slice(0, 3).map((follower) => (
-
- ))}
+
+ {!hasRelationship && !!familiarFollowers?.length && (
+
+
+
+ {familiarFollowers.slice(0, 3).map((follower) => (
+
+ ))}
+
- )}{' '}
- {!!followersCount && (
-
-
-
- {shortenNumber(followersCount)}
- {' '}
- follower
-
- }
- other={
-
-
- {shortenNumber(followersCount)}
- {' '}
- followers
-
- }
- />
-
- )}
-
+
+ )}{' '}
+ {!!followersCount && (
+
+
+
+ {shortenNumber(followersCount)}
+ {' '}
+ follower
+
+ }
+ other={
+
+
+ {shortenNumber(followersCount)}
+ {' '}
+ followers
+
+ }
+ />
+
+ )}
)}
{!!verifiedField && (
diff --git a/src/components/account-handle-info.jsx b/src/components/account-handle-info.jsx
index f9b7e579f3..8418c98e7d 100644
--- a/src/components/account-handle-info.jsx
+++ b/src/components/account-handle-info.jsx
@@ -3,8 +3,8 @@ import punycode from 'punycode/';
function AccountHandleInfo({ acct, instance }) {
// acct = username or username@server
- let [username, server] = acct.split('@');
- if (!server) server = instance;
+ const fullAcct = acct.includes('@') ? acct : `${acct}@${instance}`;
+ let [username, server] = punycode.toUnicode(fullAcct).split('@');
const encodedAcct = punycode.toASCII(acct);
return (
diff --git a/src/components/account-info.css b/src/components/account-info.css
index 46cf0d8e13..360df44a7d 100644
--- a/src/components/account-info.css
+++ b/src/components/account-info.css
@@ -523,18 +523,30 @@
.account-container .account-metadata-box {
overflow: hidden;
border-radius: 16px;
+ @supports (corner-shape: squircle) {
+ border-radius: 32px;
+ corner-shape: squircle;
+ }
display: block;
text-decoration: none;
& > * {
margin-bottom: 2px;
border-radius: 4px;
+ @supports (corner-shape: squircle) {
+ border-radius: 8px;
+ corner-shape: squircle;
+ }
overflow: hidden;
}
&:has(+ .account-metadata-box) {
border-end-start-radius: 4px;
border-end-end-radius: 4px;
+ @supports (corner-shape: squircle) {
+ border-end-start-radius: 8px;
+ border-end-end-radius: 8px;
+ }
}
+ .account-metadata-box {
@@ -542,6 +554,12 @@
border-start-end-radius: 4px;
border-end-start-radius: 16px;
border-end-end-radius: 16px;
+ @supports (corner-shape: squircle) {
+ border-start-start-radius: 8px;
+ border-start-end-radius: 8px;
+ border-end-start-radius: 32px;
+ border-end-end-radius: 32px;
+ }
}
}
diff --git a/src/components/account-info.jsx b/src/components/account-info.jsx
index fa5cbf6744..b83d8e64fa 100644
--- a/src/components/account-info.jsx
+++ b/src/components/account-info.jsx
@@ -11,6 +11,7 @@ import {
useRef,
useState,
} from 'preact/hooks';
+import punycode from 'punycode/';
import { api } from '../utils/api';
import enhanceContent from '../utils/enhance-content';
@@ -196,6 +197,7 @@ function AccountInfo({
roles,
hideCollections,
} = info || {};
+ const unicodeAcct = acct ? punycode.toUnicode(acct) : '';
let headerIsAvatar = false;
let { header, headerStatic } = info || {};
if (!header || /missing\.png$/.test(header)) {
@@ -609,9 +611,9 @@ function AccountInfo({