Show current username in HTML page title

CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## [Unreleased]
 
+### Added
+
+- Show current username in HTML page title.
+
 ### Changed
 
 - Remove invisible characters from display names.

public/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title>Mitra</title>
+    <title>Mitra | Federated social network</title>
     <meta name="description" content="Federated social network">
     <meta name="application-name" content="mitra-web v<%= process.env.VUE_APP_VERSION %>">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">

src/App.vue

@@ -3,14 +3,23 @@
 </template>
 
 <script setup lang="ts">
+import { watch } from "vue"
+import { $, $$ } from "vue/macros"
 import { useRoute } from "vue-router"
 
 import { useInstanceInfo } from "@/store/instance"
+import { useCurrentUser } from "@/store/user"
 
 const route = useRoute()
+const { currentUser } = $(useCurrentUser())
 const { loadInstanceInfo } = useInstanceInfo()
 
 loadInstanceInfo()
+
+watch($$(currentUser), () => {
+  const title = currentUser ? `@${currentUser.username}` : "Federated social network"
+  document.title = `Mitra | ${title}`
+}, { immediate: true })
 </script>
 
 <style lang="scss">