Feature/library show number of mangas in category (#269)

* Pass optional browser tab only title

Makes it possible to have a different title for the "NavBar" and the browser tab

* Show number of items in category and library

---------

Co-authored-by: schroda <github@dasch.simplelogin.com>

src/screens/Library.tsx

@@ -5,8 +5,8 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
-import { Tab, Tabs } from '@mui/material';
-import React, { useContext, useEffect, useState } from 'react';
+import { Chip, Tab, Tabs } from '@mui/material';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
 import NavbarContext from 'components/context/NavbarContext';
 import EmptyView from 'components/util/EmptyView';
 import LoadingPlaceholder from 'components/util/LoadingPlaceholder';
@@ -19,13 +19,26 @@ import { useQuery } from 'util/client';
 import UpdateChecker from 'components/library/UpdateChecker';
 import { useTranslation } from 'react-i18next';
 import { ICategory, IManga } from 'typings';
+import { styled } from '@mui/system';
+import { useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
+
+const TitleWithSizeTag = styled('span')({
+    display: 'flex',
+    alignItems: 'center',
+});
+
+const TitleSizeTag = (props: React.ComponentProps<typeof Chip>) => (
+    <Chip {...props} size="small" sx={{ marginLeft: '5px' }} />
+);
 
 export default function Library() {
     const { t } = useTranslation();
 
+    const { options } = useLibraryOptionsContext();
     const [lastLibraryUpdate, setLastLibraryUpdate] = useState(Date.now());
     const { data: tabsData, error: tabsError, loading } = useQuery<ICategory[]>('/api/v1/category');
     const tabs = tabsData ?? [];
+    const librarySize = useMemo(() => tabs.map((tab) => tab.size).reduce((prev, curr) => prev + curr, 0), [tabs]);
 
     const [tabSearchParam, setTabSearchParam] = useQueryParam('tab', NumberParam);
 
@@ -41,7 +54,14 @@ export default function Library() {
 
     const { setTitle, setAction } = useContext(NavbarContext);
     useEffect(() => {
-        setTitle(t('library.title'));
+        const title = t('library.title');
+        const navBarTitle = (
+            <TitleWithSizeTag>
+                {title}
+                {mangaLoading || !options.showTabSize ? null : <TitleSizeTag label={librarySize} />}
+            </TitleWithSizeTag>
+        );
+        setTitle(navBarTitle, title);
         setAction(
             <>
                 <AppbarSearch />
@@ -53,7 +73,7 @@ export default function Library() {
             setTitle('');
             setAction(null);
         };
-    }, [t]);
+    }, [t, librarySize, mangaLoading, options]);
 
     const handleTabChange = (newTab: number) => {
         setTabSearchParam(newTab === 0 ? undefined : newTab);
@@ -104,7 +124,17 @@ export default function Library() {
                 allowScrollButtonsMobile
             >
                 {tabs.map((tab) => (
-                    <Tab key={tab.id} label={tab.name} value={tab.order} />
+                    <Tab
+                        sx={{ display: 'flex' }}
+                        key={tab.id}
+                        label={
+                            <TitleWithSizeTag>
+                                {tab.name}
+                                {options.showTabSize ? <TitleSizeTag label={tab.size} /> : null}
+                            </TitleWithSizeTag>
+                        }
+                        value={tab.order}
+                    />
                 ))}
             </Tabs>
             {tabs.map((tab) => (