diff --git a/src/components/account-info.css b/src/components/account-info.css index 6399e582..688d9587 100644 --- a/src/components/account-info.css +++ b/src/components/account-info.css @@ -831,3 +831,58 @@ } } } + +.handle-info { + .handle-handle { + display: inline-block; + margin-block: 5px; + + b { + font-weight: 600; + padding: 2px 4px; + border-radius: 4px; + display: inline-block; + box-shadow: 0 0 0 5px var(--bg-blur-color); + + &.handle-username { + color: var(--orange-fg-color); + background-color: var(--orange-bg-color); + } + + &.handle-server { + color: var(--purple-fg-color); + background-color: var(--purple-bg-color); + } + } + } + + .handle-at { + display: inline-block; + margin-inline: -3px; + position: relative; + z-index: 1; + } + + .handle-legend { + margin-top: 0.25em; + } + + .handle-legend-icon { + overflow: hidden; + display: inline-block; + width: 14px; + height: 14px; + border: 4px solid transparent; + border-radius: 8px; + background-clip: padding-box; + + &.username { + background-color: var(--orange-fg-color); + border-color: var(--orange-bg-color); + } + &.server { + background-color: var(--purple-fg-color); + border-color: var(--purple-bg-color); + } + } +} diff --git a/src/components/account-info.jsx b/src/components/account-info.jsx index 6ad26e91..5f25dd87 100644 --- a/src/components/account-info.jsx +++ b/src/components/account-info.jsx @@ -541,13 +541,51 @@ function AccountInfo({ /> )}
- + {standalone ? ( + + {}} + /> + + } + > +
+ +
+ { + const handle = `@${acct}`; + try { + navigator.clipboard.writeText(handle); + showToast('Handle copied'); + } catch (e) { + console.error(e); + showToast('Unable to copy handle'); + } + }} + > + + Copy handle + + + + Go to original profile page + +
+ ) : ( + + )}