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;
-    setTitle: (title: string) => void;
+    title: string | React.ReactNode;
+    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) => {
-            document.title = `${newTitle} - Tachidesk`;
+        (newTitle: string | React.ReactNode, browserTitle: string = typeof newTitle === 'string' ? newTitle : '') => {
+            document.title = `${browserTitle} - Tachidesk`;
             setTitle(newTitle);
         },
         [setTitle],