From 46369a261e3ee7b96790ab4b1c5760481c6f72ac Mon Sep 17 00:00:00 2001
From: silverpill <silverpill@firemail.cc>
Date: Tue, 21 Feb 2023 18:18:25 +0000
Subject: [PATCH] Show current username in HTML page title

---
 CHANGELOG.md      | 4 ++++
 public/index.html | 2 +-
 src/App.vue       | 9 +++++++++
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 20894dc..da3e599 100644
--- a/CHANGELOG.md
+++ b/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.
diff --git a/public/index.html b/public/index.html
index bd9c8c6..930c854 100644
--- a/public/index.html
+++ b/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">
diff --git a/src/App.vue b/src/App.vue
index a1a7425..8871e0a 100644
--- a/src/App.vue
+++ b/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">