set browser tab title (#220)

* Update the browser tab title

The tab title will be set to the same title as the "NavigationBar" with "- Tachidesk" as the suffix

* Set the manga title and chapter name as browser tab title in the reader

While the reader is still loading the "mangaId" and the "chapterIndex" will be set as the title.

src/components/context/NavbarContext.tsx

@@ -14,7 +14,7 @@ type ContextType = {
 
     // AppBar title
     title: string
-    setTitle: React.Dispatch<React.SetStateAction<string>>
+    setTitle: (title: string) => void
 
     // AppBar action buttons
     action: any

src/components/navbar/NavBarContextProvider.tsx

@@ -21,11 +21,16 @@ export default function NavBarProvider({ children }:IProps) {
         value: <div />,
     });
 
+    const updateTitle = (newTitle: string) => {
+        document.title = `${newTitle} - Tachidesk`;
+        setTitle(newTitle);
+    };
+
     const value = {
         defaultBackTo,
         setDefaultBackTo,
         title,
-        setTitle,
+        setTitle: updateTitle,
         action,
         setAction,
         override,

src/screens/Reader.tsx

@@ -85,6 +85,14 @@ export default function Reader() {
         requestUpdateMangaMetadata(manga, [[key, value]]).catch(() => makeToast('Failed to save the reader settings to the server', 'warning'));
     };
 
+    useEffect(() => {
+        if (!manga?.title || (chapter as IChapter)?.name === 'Loading...') {
+            setTitle(`Reader - Manga ${mangaId} Chapter ${chapterIndex}`);
+        } else {
+            setTitle(`${manga.title}: ${(chapter as IChapter).name}`);
+        }
+    }, [manga, chapter]);
+
     useEffect(() => {
         if (!areDefaultSettingsLoading && !isMangaLoading) {
             checkAndHandleMissingStoredReaderSettings(manga, 'manga', defaultSettings).catch(() => {});
@@ -115,12 +123,10 @@ export default function Reader() {
 
     useEffect(() => {
         setIsMangaLoading(true);
-        setTitle('Reader');
         client.get(`/api/v1/manga/${mangaId}/`)
             .then((response) => response.data)
             .then((data: IManga) => {
                 setManga(data);
-                setTitle(data.title);
                 setIsMangaLoading(false);
             });
     }, [mangaId]);