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/components/context/LibraryOptionsContext.tsx

@@ -29,6 +29,8 @@ export const DefaultLibraryOptions: LibraryOptions = {
     sortDesc: undefined,
     sorts: undefined,
     unread: undefined,
+
+    showTabSize: false,
 };
 
 const LibraryOptionsContext = React.createContext<ContextType>({

src/components/context/NavbarContext.tsx

@@ -14,8 +14,8 @@ type ContextType = {
     setDefaultBackTo: React.Dispatch<React.SetStateAction<string | undefined>>;
 
     // AppBar title
-    title: string;
+    title: string | React.ReactNode;
-    setTitle: (title: string) => void;
+    setTitle: (title: ContextType['title'], browserTitle?: string) => void;
 
     // AppBar action buttons
     action: any;

src/components/library/LibraryOptionsPanel.tsx

@@ -81,7 +81,7 @@ const LibraryOptionsPanel: React.FC<IProps> = ({ open, onClose }) => {
                     ));
                 }
                 if (key === 'display') {
-                    const { gridLayout, showDownloadBadge, showUnreadBadge } = options;
+                    const { gridLayout, showDownloadBadge, showUnreadBadge, showTabSize } = options;
                     return (
                         <>
                             <FormLabel>{t('global.grid_layout.title')}</FormLabel>
@@ -117,6 +117,13 @@ const LibraryOptionsPanel: React.FC<IProps> = ({ open, onClose }) => {
                                 checked={showDownloadBadge === true}
                                 onChange={() => handleFilterChange('showDownloadBadge', !showDownloadBadge)}
                             />
+
+                            <FormLabel sx={{ mt: 2 }}>{t('library.option.display.tab.title')}</FormLabel>
+                            <CheckboxInput
+                                label={t('library.option.display.tab.label.show_number_of_items')}
+                                checked={showTabSize}
+                                onChange={() => handleFilterChange('showTabSize', !showTabSize)}
+                            />
                         </>
                     );
                 }

src/components/navbar/NavBarContextProvider.tsx

@@ -15,7 +15,7 @@ interface IProps {
 
 export default function NavBarProvider({ children }: IProps) {
     const [defaultBackTo, setDefaultBackTo] = useState<string | undefined>();
-    const [title, setTitle] = useState<string>('Tachidesk');
+    const [title, setTitle] = useState<string | React.ReactNode>('Tachidesk');
     const [action, setAction] = useState<any>(<div />);
     const [override, setOverride] = useState<INavbarOverride>({
         status: false,
@@ -23,8 +23,8 @@ export default function NavBarProvider({ children }: IProps) {
     });
 
     const updateTitle = useCallback(
-        (newTitle: string) => {
+        (newTitle: string | React.ReactNode, browserTitle: string = typeof newTitle === 'string' ? newTitle : '') => {
-            document.title = `${newTitle} - Tachidesk`;
+            document.title = `${browserTitle} - Tachidesk`;
             setTitle(newTitle);
         },
         [setTitle],

src/i18n/locale/en.json

@@ -268,6 +268,12 @@
             "unread_badges": "Unread Badges"
           },
           "title": "Badges"
+        },
+        "tab": {
+          "title": "Tabs",
+          "label": {
+            "show_number_of_items": "Show number of items"
+          }
         }
       },
       "sort": {

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 { Chip, Tab, Tabs } from '@mui/material';
-import React, { useContext, useEffect, useState } from 'react';
+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) => (

src/typings.ts

@@ -179,6 +179,7 @@ export interface ICategory {
     name: string;
     default: boolean;
     meta: Metadata;
+    size: number;
 }
 
 export interface INavbarOverride {
@@ -361,6 +362,7 @@ export interface LibraryOptions {
     unread: NullAndUndefined<boolean>;
     sorts: NullAndUndefined<LibrarySortMode>;
     sortDesc: NullAndUndefined<boolean>;
+    showTabSize: boolean;
 }
 
 export interface BatchChaptersChange {