increase prettier line length to 120 (#233)

* [Prettier] Increase max line length to 120

100 is quite low, especially on modern monitors.
The length is also reached quite quickly with 4 spaces per tab depending on the indentation depth

* [Prettier] Increase max line length to 120 - Fix formatting

src/components/navbar/DefaultNavBar.tsx

@@ -100,9 +100,7 @@ export default function DefaultNavBar() {
     let navbar = <></>;
     if (isMobileWidth) {
         if (isMainRoute) {
-            navbar = (
-                <MobileBottomBar navBarItems={navbarItems.filter((it) => it.show !== 'desktop')} />
-            );
+            navbar = <MobileBottomBar navBarItems={navbarItems.filter((it) => it.show !== 'desktop')} />;
         }
     } else {
         navbar = <DesktopSideBar navBarItems={navbarItems.filter((it) => it.show !== 'mobile')} />;

src/components/navbar/ReaderNavBar.tsx

@@ -126,9 +126,7 @@ export default function ReaderNavBar(props: IProps) {
     const [updateDrawerOnRender, setUpdateDrawerOnRender] = useState(true);
     const [hideOpenButton, setHideOpenButton] = useState(settings.staticNav || prevDrawerOpen);
     const [prevScrollPos, setPrevScrollPos] = useState(0);
-    const [settingsCollapseOpen, setSettingsCollapseOpen] = useState(
-        prevSettingsCollapseOpen ?? true,
-    );
+    const [settingsCollapseOpen, setSettingsCollapseOpen] = useState(prevSettingsCollapseOpen ?? true);
 
     const updateSettingValue = (key: keyof IReaderSettings, value: string | boolean) => {
         // prevent closing the navBar when updating the "staticNav" setting
@@ -181,14 +179,7 @@ export default function ReaderNavBar(props: IProps) {
 
     return (
         <>
-            <Slide
-                direction="right"
-                in={drawerOpen}
-                timeout={200}
-                appear={false}
-                mountOnEnter
-                unmountOnExit
-            >
+            <Slide direction="right" in={drawerOpen} timeout={200} appear={false} mountOnEnter unmountOnExit>
                 <Root
                     sx={{
                         position: settings.staticNav ? 'sticky' : 'fixed',
@@ -207,12 +198,7 @@ export default function ReaderNavBar(props: IProps) {
                                 <KeyboardArrowLeftIcon />
                             </IconButton>
                         )}
-                        <Typography
-                            variant="h1"
-                            textOverflow="ellipsis"
-                            overflow="hidden"
-                            sx={{ py: 1 }}
-                        >
+                        <Typography variant="h1" textOverflow="ellipsis" overflow="hidden" sx={{ py: 1 }}>
                             {chapter.name}
                         </Typography>
                         <IconButton

src/components/navbar/action/CategorySelect.tsx

@@ -25,9 +25,7 @@ interface IProps {
 export default function CategorySelect(props: IProps) {
     const { open, setOpen, mangaId } = props;
 
-    const { data: mangaCategoriesData, mutate } = useQuery<ICategory[]>(
-        `/api/v1/manga/${mangaId}/category`,
-    );
+    const { data: mangaCategoriesData, mutate } = useQuery<ICategory[]>(`/api/v1/manga/${mangaId}/category`);
     const { data: categoriesData } = useQuery<ICategory[]>('/api/v1/category');
 
     const allCategories = useMemo(() => {

src/components/navbar/action/LangSelect.tsx

@@ -40,9 +40,7 @@ interface IProps {
 export default function LangSelect(props: IProps) {
     const { shownLangs, setShownLangs, allLangs, forcedLangs } = props;
     // hold a copy and only sate state on parent when OK pressed, improves performance
-    const [mShownLangs, setMShownLangs] = useState(
-        removeAll(cloneObject(shownLangs), forcedLangs!),
-    );
+    const [mShownLangs, setMShownLangs] = useState(removeAll(cloneObject(shownLangs), forcedLangs!));
     const [open, setOpen] = useState<boolean>(false);
 
     const handleCancel = () => {

src/components/navbar/navigation/DesktopSideBar.tsx

@@ -35,10 +35,7 @@ export default function DesktopSideBar({ navBarItems }: IProps) {
         if (location.pathname === path)
             return <SelectedIconComponent sx={{ color: 'primary.main' }} fontSize="large" />;
         return (
-            <IconComponent
-                sx={{ color: theme.palette.mode === 'dark' ? 'grey.A400' : 'grey.600' }}
-                fontSize="large"
-            />
+            <IconComponent sx={{ color: theme.palette.mode === 'dark' ? 'grey.A400' : 'grey.600' }} fontSize="large" />
         );
     };
 
@@ -46,23 +43,17 @@ export default function DesktopSideBar({ navBarItems }: IProps) {
         <SideNavBarContainer>
             {
                 // eslint-disable-next-line react/destructuring-assignment
-                navBarItems.map(
-                    ({ path, title, IconComponent, SelectedIconComponent }: NavbarItem) => (
-                        <Link
-                            to={path}
-                            style={{ color: 'inherit', textDecoration: 'none' }}
-                            key={path}
-                        >
-                            <ListItem disableRipple button key={title}>
-                                <ListItemIcon sx={{ minWidth: '0' }}>
-                                    <Tooltip placement="right" title={title}>
-                                        {iconFor(path, IconComponent, SelectedIconComponent)}
-                                    </Tooltip>
-                                </ListItemIcon>
-                            </ListItem>
-                        </Link>
-                    ),
-                )
+                navBarItems.map(({ path, title, IconComponent, SelectedIconComponent }: NavbarItem) => (
+                    <Link to={path} style={{ color: 'inherit', textDecoration: 'none' }} key={path}>
+                        <ListItem disableRipple button key={title}>
+                            <ListItemIcon sx={{ minWidth: '0' }}>
+                                <Tooltip placement="right" title={title}>
+                                    {iconFor(path, IconComponent, SelectedIconComponent)}
+                                </Tooltip>
+                            </ListItemIcon>
+                        </ListItem>
+                    </Link>
+                ))
             }
         </SideNavBarContainer>
     );

src/components/navbar/navigation/MobileBottomBar.tsx

@@ -44,45 +44,35 @@ export default function MobileBottomBar({ navBarItems }: IProps) {
         if (location.pathname === path)
             return <SelectedIconComponent sx={{ color: 'primary.main' }} fontSize="medium" />;
         return (
-            <IconComponent
-                sx={{ color: theme.palette.mode === 'dark' ? 'grey.A400' : 'grey.600' }}
-                fontSize="medium"
-            />
+            <IconComponent sx={{ color: theme.palette.mode === 'dark' ? 'grey.A400' : 'grey.600' }} fontSize="medium" />
         );
     };
 
     return (
         <BottomNavContainer>
-            {navBarItems.map(
-                ({ path, title, IconComponent, SelectedIconComponent }: NavbarItem) => (
-                    <Link to={path} key={path}>
-                        <ListItem
-                            disableRipple
-                            button
-                            sx={{ justifyContent: 'center', padding: '8px' }}
-                            key={title}
-                        >
-                            <Box display="flex" flexDirection="column" alignItems="center">
-                                {iconFor(path, IconComponent, SelectedIconComponent)}
-                                <Box
-                                    sx={{
-                                        fontSize: '0.65rem',
-                                        color:
-                                            // eslint-disable-next-line no-nested-ternary
-                                            location.pathname === path
-                                                ? 'primary.main'
-                                                : theme.palette.mode === 'dark'
-                                                ? 'grey.A400'
-                                                : 'grey.600',
-                                    }}
-                                >
-                                    {title}
-                                </Box>
+            {navBarItems.map(({ path, title, IconComponent, SelectedIconComponent }: NavbarItem) => (
+                <Link to={path} key={path}>
+                    <ListItem disableRipple button sx={{ justifyContent: 'center', padding: '8px' }} key={title}>
+                        <Box display="flex" flexDirection="column" alignItems="center">
+                            {iconFor(path, IconComponent, SelectedIconComponent)}
+                            <Box
+                                sx={{
+                                    fontSize: '0.65rem',
+                                    color:
+                                        // eslint-disable-next-line no-nested-ternary
+                                        location.pathname === path
+                                            ? 'primary.main'
+                                            : theme.palette.mode === 'dark'
+                                            ? 'grey.A400'
+                                            : 'grey.600',
+                                }}
+                            >
+                                {title}
                             </Box>
-                        </ListItem>
-                    </Link>
-                ),
-            )}
+                        </Box>
+                    </ListItem>
+                </Link>
+            ))}
         </BottomNavContainer>
     );
 }