Add route name to document title

src/util/nostr.ts

@@ -80,6 +80,8 @@ export const displayPerson = p => {
   }
 }
 
+export const displayRelay = ({url}) => last(url.split('://'))
+
 export const isLike = content => ['', '+', '🤙', '👍', '❤️', '😎', '🏅'].includes(content)
 
 export const isAlert = (e, pubkey) => {

src/views/Debug.svelte

@@ -4,6 +4,8 @@
   import {logs} from 'src/util/logger.js'
   import {formatTimestamp} from 'src/util/misc'
   import Content from 'src/partials/Content.svelte'
+
+  document.title = "Debug"
 </script>
 
 <Content>

src/views/Keys.svelte

@@ -30,6 +30,8 @@
       return navigate("/login")
     }
   })
+
+  document.title = 'Keys'
 </script>
 
 <div in:fly={{y: 20}}>

src/views/Profile.svelte

@@ -32,6 +32,8 @@
     publishWithToast(getUserWriteRelays(), cmd.updateUser(values))
     navigate(routes.person(user.getPubkey(), 'profile'))
   }
+
+  document.title = "Profile"
 </script>
 
 <form on:submit={submit} in:fly={{y: 20}}>

src/views/Settings.svelte

@@ -25,6 +25,8 @@
 
     toast.show("info", "Your settings have been saved!")
   }
+
+  document.title = "Settings"
 </script>
 
 <form on:submit={submit} in:fly={{y: 20}}>

src/views/alerts/Alerts.svelte

@@ -15,6 +15,8 @@
   let notes = null
 
   onMount(() => {
+    document.title = "Notifications"
+
     lastChecked.update(assoc('alerts', now()))
 
     return createScroller(async () => {

src/views/chat/ChatDetail.svelte

@@ -46,6 +46,8 @@
     return event
   }
 
+  document.title = $room.name
+
   lastChecked.update(updateIn(assoc(id, now())))
 </script>
 

src/views/chat/ChatList.svelte

@@ -20,6 +20,7 @@
   $: search = fuzzy($otherRooms, {keys: ['name', 'about']})
   $: results = search(q).slice(0, 50)
 
+  document.title = 'Chat'
 
   onMount(() => {
     const sub = network.listen({

src/views/login/Login.svelte

@@ -25,6 +25,8 @@
   const pubkeyLogIn = () => {
     modal.set({type: 'login/pubkey'})
   }
+
+  document.title = "Log In"
 </script>
 
 <div in:fly={{y: 20}}>

src/views/login/Logout.svelte

@@ -20,6 +20,8 @@
       window.location.href = '/login'
     }, 1000)
   }
+
+  document.title = "Log Out"
 </script>
 
 <Content size="lg" class="text-center">

src/views/messages/MessagesDetail.svelte

@@ -68,6 +68,8 @@
     // Return unencrypted content so we can display it immediately
     return {...event, content}
   }
+
+  document.title = `DMs with ${displayPerson($person)}`
 </script>
 
 <Channel {loadMessages} {listenForMessages} {sendMessage}>

src/views/messages/MessagesList.svelte

@@ -20,6 +20,8 @@
 
   const getDisplay = tab =>
     ({title: toTitle(tab), badge: getContacts(tab).length})
+
+  document.title = 'Direct Messages'
 </script>
 
 <Content>

src/views/notes/NotesList.svelte

@@ -1,5 +1,6 @@
 <script>
   import {navigate} from 'svelte-routing'
+  import {toTitle} from 'hurdak/lib/hurdak'
   import Anchor from "src/partials/Anchor.svelte"
   import Content from "src/partials/Content.svelte"
   import Tabs from "src/partials/Tabs.svelte"
@@ -11,6 +12,8 @@
   export let activeTab
 
   const setActiveTab = tab => navigate(`/notes/${tab}`)
+
+  document.title = toTitle(activeTab)
 </script>
 
 <Content>

src/views/person/PersonDetail.svelte

@@ -69,6 +69,8 @@
   onMount(async () => {
     log('Person', npub, person)
 
+    document.title = displayPerson(person)
+
     // Refresh our person
     network.loadPeople([pubkey], {force: true}).then(() => {
       person = database.getPersonWithFallback(pubkey)

src/views/relays/RelayDetail.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-  import {last, find, propEq} from 'ramda'
+  import {find, propEq} from 'ramda'
   import {onMount} from 'svelte'
   import {poll, stringToColor} from "src/util/misc"
+  import {displayRelay} from "src/util/nostr"
   import {between} from 'hurdak/lib/hurdak'
   import Content from "src/partials/Content.svelte"
   import Anchor from "src/partials/Anchor.svelte"
@@ -35,6 +36,8 @@
       }
     })
   })
+
+  document.title = displayRelay(relay)
 </script>
 
 <Content>
@@ -44,7 +47,7 @@
       <span
         class="border-b border-solid"
         style={`border-color: ${stringToColor(relay.url)}`}>
-        {last(relay.url.split('://'))}
+        {displayRelay(relay)}
       </span>
       <span
         on:mouseout={() => {showStatus = false}}

src/views/relays/RelayList.svelte

@@ -8,6 +8,8 @@
   import {modal} from "src/app/ui"
 
   const {relays} = user
+
+  document.title = 'Relays'
 </script>
 
 <div in:fly={{y: 20}}>

src/views/search/Search.svelte

@@ -8,6 +8,8 @@
   export let activeTab
 
   const setActiveTab = tab => navigate(`/search/${tab}`)
+
+  document.title = "Search"
 </script>
 
 <Content>