fix: change page titles (#2211)

Co-authored-by: Gabriel de Perthuis <g2p.code@gmail.com>

src/intl/de.js

@@ -170,12 +170,12 @@ export default {
       true {({count})}
       other {}
     }
+    {name}
+    ·
     {showInstanceName, select,
       true {{instanceName}}
       other {Pinafore}
     }
-    ·
-    {name}
   `,
   pinLabel: `{label} {pinnable, select,
     true {

src/intl/en-US.js

@@ -174,12 +174,12 @@ export default {
       true {({count})}
       other {}
     }
+    {name}
+    ·
     {showInstanceName, select,
       true {{instanceName}}
       other {Pinafore}
     }
-    ·
-    {name}
   `,
   pinLabel: `{label} {pinnable, select,
     true {

src/intl/fr.js

@@ -171,12 +171,12 @@ export default {
       true {({count})}
       other {}
     }
+    {name}
+    ·
     {showInstanceName, select,
       true {{instanceName}}
       other {Pinafore}
     }
-    ·
-    {name}
   `,
   pinLabel: `{label} {pinnable, select,
     true {

src/routes/accounts/[accountId]/followers.html

@@ -1,4 +1,5 @@
-<Title name="{intl.followers}" />
+<!-- TODO: this should probably be formatted as intl rather than concatenated -->
+<Title name="{profileName}{intl.followers}" />
 
   <LazyPage {pageComponent} {params} />
 
@@ -15,6 +16,11 @@
     },
     data: () => ({
       pageComponent
-    })
+    }),
+    computed: {
+      profileName: ({ $currentAccountProfile }) => {
+        return ($currentAccountProfile && ('@' + $currentAccountProfile.acct + ' · ')) || ''
+      }
+    }
   }
 </script>

src/routes/accounts/[accountId]/follows.html

@@ -1,4 +1,5 @@
-<Title name="{intl.follows}" />
+<!-- TODO: this should probably be formatted as intl rather than concatenated -->
+<Title name="{profileName}{intl.follows}" />
 
   <LazyPage {pageComponent} {params} />
 
@@ -15,6 +16,11 @@
     },
     data: () => ({
       pageComponent
-    })
+    }),
+    computed: {
+      profileName: ({ $currentAccountProfile }) => {
+        return ($currentAccountProfile && ('@' + $currentAccountProfile.acct + ' · ')) || ''
+      }
+    }
   }
 </script>

src/routes/accounts/[accountId]/index.html

@@ -1,4 +1,5 @@
-<Title name="{intl.profile}" />
+<!-- TODO: this should probably be formatted as intl rather than concatenated -->
+<Title name="{profileName}{intl.profile}" />
 
   <LazyPage {pageComponent} {params} />
 
@@ -15,6 +16,11 @@
     },
     data: () => ({
       pageComponent
-    })
+    }),
+    computed: {
+      profileName: ({ $currentAccountProfile }) => {
+        return ($currentAccountProfile && ('@' + $currentAccountProfile.acct + ' · ')) || ''
+      }
+    }
   }
 </script>

src/routes/accounts/[accountId]/media.html

@@ -1,4 +1,5 @@
-<Title name="{intl.profileWithMedia}" />
+<!-- TODO: this should probably be formatted as intl rather than concatenated -->
+<Title name="{profileName}{intl.profileWithMedia}" />
 
   <LazyPage {pageComponent} {params} />
 
@@ -15,6 +16,11 @@
     },
     data: () => ({
       pageComponent
-    })
+    }),
+    computed: {
+      profileName: ({ $currentAccountProfile }) => {
+        return ($currentAccountProfile && ('@' + $currentAccountProfile.acct + ' · ')) || ''
+      }
+    }
   }
 </script>

src/routes/accounts/[accountId]/with_replies.html

@@ -1,4 +1,5 @@
-<Title name="{intl.profileWithReplies}" />
+<!-- TODO: this should probably be formatted as intl rather than concatenated -->
+<Title name="{profileName}{intl.profileWithReplies}" />
 
   <LazyPage {pageComponent} {params} />
 
@@ -15,6 +16,11 @@
     },
     data: () => ({
       pageComponent
-    })
+    }),
+    computed: {
+      profileName: ({ $currentAccountProfile }) => {
+        return ($currentAccountProfile && ('@' + $currentAccountProfile.acct + ' · ')) || ''
+      }
+    }
   }
 </script>

tests/spec/102-notifications.js

@@ -12,7 +12,7 @@ test('shows unread notification', async t => {
   await loginAsFoobar(t)
   await t
     .expect(notificationsNavButton.getAttribute('aria-label')).eql('Notifications')
-    .expect(getTitleText()).eql('localhost:3000 · Home')
+    .expect(getTitleText()).eql('Home · localhost:3000')
     .expect(getNthStatusContent(1).innerText).contains('somebody please favorite this to validate me', {
       timeout: 20000
     })
@@ -21,17 +21,17 @@ test('shows unread notification', async t => {
     .expect(notificationsNavButton.getAttribute('aria-label')).eql('Notifications (1 notification)', {
       timeout: 20000
     })
-    .expect(getTitleText()).eql('(1) localhost:3000 · Home')
+    .expect(getTitleText()).eql('(1) Home · localhost:3000')
     .click(notificationsNavButton)
     .expect(getUrl()).contains('/notifications')
     .expect(notificationsNavButton.getAttribute('aria-label')).eql('Notifications (current page)')
-    .expect(getTitleText()).eql('localhost:3000 · Notifications')
+    .expect(getTitleText()).eql('Notifications · localhost:3000')
     .expect(getNthStatus(1).innerText).contains('somebody please favorite this to validate me')
     .expect(getNthStatus(1).innerText).match(/admin\s+favorited your toot/)
   await t
     .click(homeNavButton)
     .expect(notificationsNavButton.getAttribute('aria-label')).eql('Notifications')
-    .expect(getTitleText()).eql('localhost:3000 · Home')
+    .expect(getTitleText()).eql('Home · localhost:3000')
 })
 
 test('shows unread notifications, more than one', async t => {
@@ -39,7 +39,7 @@ test('shows unread notifications, more than one', async t => {
   await loginAsFoobar(t)
   await t
     .expect(notificationsNavButton.getAttribute('aria-label')).eql('Notifications')
-    .expect(getTitleText()).eql('localhost:3000 · Home')
+    .expect(getTitleText()).eql('Home · localhost:3000')
     .expect(getNthStatusContent(1).innerText).contains('I need lots of favorites on this one', {
       timeout: 20000
     })
@@ -49,14 +49,14 @@ test('shows unread notifications, more than one', async t => {
     .expect(notificationsNavButton.getAttribute('aria-label')).eql('Notifications (2 notifications)', {
       timeout: 20000
     })
-    .expect(getTitleText()).eql('(2) localhost:3000 · Home')
+    .expect(getTitleText()).eql('(2) Home · localhost:3000')
     .click(notificationsNavButton)
     .expect(getUrl()).contains('/notifications')
     .expect(notificationsNavButton.getAttribute('aria-label')).eql('Notifications (current page)')
-    .expect(getTitleText()).eql('localhost:3000 · Notifications')
+    .expect(getTitleText()).eql('Notifications · localhost:3000')
     .expect(getNthStatus(1).innerText).contains('I need lots of favorites on this one')
   await t
     .click(homeNavButton)
     .expect(notificationsNavButton.getAttribute('aria-label')).eql('Notifications')
-    .expect(getTitleText()).eql('localhost:3000 · Home')
+    .expect(getTitleText()).eql('Home · localhost:3000')
 })