fix: use short usernames in options dialog (#1576)

src/routes/_components/dialog/components/AccountProfileOptionsDialog.html

@@ -35,25 +35,26 @@ export default {
     followRequested: ({ relationship }) => relationship && relationship.requested,
     accountId: ({ account }) => account && account.id,
     acct: ({ account }) => account.acct,
+    username: ({ account }) => account.username,
     muting: ({ relationship }) => relationship && relationship.muting,
     blocking: ({ relationship }) => relationship && relationship.blocking,
-    followLabel: ({ following, followRequested, account, acct }) => {
+    followLabel: ({ following, followRequested, account, username }) => {
       if (typeof following === 'undefined' || !account) {
         return ''
       }
       return (following || followRequested)
-        ? `Unfollow @${acct}`
-        : `Follow @${acct}`
+        ? `Unfollow @${username}`
+        : `Follow @${username}`
     },
     followIcon: ({ following, followRequested }) => (
       following ? '#fa-user-times' : followRequested ? '#fa-hourglass' : '#fa-user-plus'
     ),
-    blockLabel: ({ blocking, acct }) => (
-      blocking ? `Unblock @${acct}` : `Block @${acct}`
+    blockLabel: ({ blocking, username }) => (
+      blocking ? `Unblock @${username}` : `Block @${username}`
     ),
     blockIcon: ({ blocking }) => blocking ? '#fa-unlock' : '#fa-ban',
-    muteLabel: ({ muting, acct }) => (
-      muting ? `Unmute @${acct}` : `Mute @${acct}`
+    muteLabel: ({ muting, username }) => (
+      muting ? `Unmute @${username}` : `Mute @${username}`
     ),
     muteIcon: ({ muting }) => muting ? '#fa-volume-up' : '#fa-volume-off',
     isUser: ({ accountId, verifyCredentialsId }) => accountId === verifyCredentialsId,
@@ -61,10 +62,10 @@ export default {
     // end copypasta (StatusOptionsDialog.html / AccountProfileOptionsDialog.html)
     //
     showingReblogs: ({ relationship }) => relationship ? relationship.showing_reblogs : true,
-    showReblogsLabel: ({ showingReblogs, acct }) => (
+    showReblogsLabel: ({ showingReblogs, username }) => (
       showingReblogs
-        ? `Hide boosts from @${acct}`
-        : `Show boosts from @${acct}`
+        ? `Hide boosts from @${username}`
+        : `Show boosts from @${username}`
     ),
     domain: ({ acct }) => acct.split('@')[1],
     blockingDomain: ({ relationship }) => relationship && relationship.domain_blocking,
@@ -73,16 +74,16 @@ export default {
         ? `Unhide ${domain}`
         : `Hide ${domain}`
     ),
-    reportLabel: ({ acct }) => `Report @${acct}`,
+    reportLabel: ({ username }) => `Report @${username}`,
     items: ({
       blockLabel, blocking, blockIcon, muteLabel, muteIcon,
       followLabel, followIcon, following, followRequested,
-      accountId, verifyCredentialsId, acct, isUser, showReblogsLabel,
+      accountId, verifyCredentialsId, username, isUser, showReblogsLabel,
       domain, blockDomainLabel, reportLabel
     }) => ([
       !isUser && {
         key: 'mention',
-        label: `Mention @${acct}`,
+        label: `Mention @${username}`,
         icon: '#fa-comments'
       },
       !isUser && !blocking && {

src/routes/_components/dialog/components/StatusOptionsDialog.html

@@ -48,26 +48,26 @@ export default {
     following: ({ relationship }) => relationship && relationship.following,
     followRequested: ({ relationship }) => relationship && relationship.requested,
     accountId: ({ account }) => account && account.id,
-    acct: ({ account }) => account.acct,
+    username: ({ account }) => account.username,
     muting: ({ relationship }) => relationship.muting,
     blocking: ({ relationship }) => relationship.blocking,
-    followLabel: ({ following, followRequested, account, acct }) => {
+    followLabel: ({ following, followRequested, account, username }) => {
       if (typeof following === 'undefined' || !account) {
         return ''
       }
       return (following || followRequested)
-        ? `Unfollow @${acct}`
-        : `Follow @${acct}`
+        ? `Unfollow @${username}`
+        : `Follow @${username}`
     },
     followIcon: ({ following, followRequested }) => (
       following ? '#fa-user-times' : followRequested ? '#fa-hourglass' : '#fa-user-plus'
     ),
-    blockLabel: ({ blocking, acct }) => (
-      blocking ? `Unblock @${acct}` : `Block @${acct}`
+    blockLabel: ({ blocking, username }) => (
+      blocking ? `Unblock @${username}` : `Block @${username}`
     ),
     blockIcon: ({ blocking }) => blocking ? '#fa-unlock' : '#fa-ban',
-    muteLabel: ({ muting, acct }) => (
-      muting ? `Unmute @${acct}` : `Mute @${acct}`
+    muteLabel: ({ muting, username }) => (
+      muting ? `Unmute @${username}` : `Mute @${username}`
     ),
     muteIcon: ({ muting }) => muting ? '#fa-volume-up' : '#fa-volume-off',
     isUser: ({ accountId, verifyCredentialsId }) => accountId === verifyCredentialsId,