feat: added unlock button on tab bar

packages/web/src/auth/UnlockContentsDialog.tsx

@@ -51,6 +51,7 @@ export const UnlockContentsDialog = ({
         ...state,
         isLibraryUnlocked: true
       }))
+
       closeModalWithNavigation()
     } else {
       setError(

packages/web/src/home/HomeScreen.tsx

@@ -18,7 +18,12 @@ export const HomeScreen = memo(() => {
 
   return (
     <Box display="flex" flex={1} overflow="hidden" flexDirection="column">
-      <TopBarNavigation title={"Home"} showBack={false} hasSearch />
+      <TopBarNavigation
+        title={"Home"}
+        showBack={false}
+        hasSearch
+        hasLockLibrary
+      />
       <Box height="100%" overflow="scroll">
         <CommunicationPane />
         {continueReadingBooks.length === 0 && !isPending && (

packages/web/src/library/LibraryBooksScreen.tsx

@@ -10,15 +10,7 @@ import {
   Box
 } from "@mui/material"
 import makeStyles from "@mui/styles/makeStyles"
-import {
-  AppsRounded,
-  TuneRounded,
-  ListRounded,
-  SortRounded,
-  NoEncryptionRounded,
-  BlurOffRounded,
-  FormatListBulletedRounded
-} from "@mui/icons-material"
+import { TuneRounded, SortRounded } from "@mui/icons-material"
 import { LibraryFiltersDrawer } from "./LibraryFiltersDrawer"
 import EmptyLibraryAsset from "../assets/empty-library.svg"
 import { useCSS, useMeasureElement } from "../common/utils"
@@ -28,7 +20,6 @@ import {
 } from "./states"
 import { UploadBookDrawer } from "./UploadBookDrawer"
 import { SortByDialog } from "../books/bookList/SortByDialog"
-import { useLocalSettings } from "../settings/states"
 import { useCallback } from "react"
 import { useTranslation } from "react-i18next"
 import { useBooks } from "./useBooks"
@@ -38,14 +29,12 @@ import { ViewModeIconButton } from "../common/lists/ListActionsToolbar"
 
 export const LibraryBooksScreen = () => {
   const styles = useStyles()
-  const classes = useClasses()
   const theme = useTheme()
   const [isFiltersDrawerOpened, setIsFiltersDrawerOpened] = useState(false)
   const isUploadBookDrawerOpened = useSignalValue(
     isUploadBookDrawerOpenedStateSignal
   )
   const [isSortingDialogOpened, setIsSortingDialogOpened] = useState(false)
-  const localSettings = useLocalSettings()
   const library = useSignalValue(libraryStateSignal)
   let numberOfFiltersApplied = 0
 
@@ -138,25 +127,6 @@ export const LibraryBooksScreen = () => {
                 : "Date added"}
           </Button>
         </div>
-        {library.isLibraryUnlocked && (
-          <div className={classes.extraInfo}>
-            {localSettings.unBlurWhenProtectedVisible && (
-              <BlurOffRounded fontSize="small" />
-            )}
-            <IconButton
-              onClick={() => {
-                libraryStateSignal.setValue((state) => ({
-                  ...state,
-                  isLibraryUnlocked: false
-                }))
-              }}
-              color="primary"
-              size="large"
-            >
-              <NoEncryptionRounded fontSize="small" />
-            </IconButton>
-          </div>
-        )}
         <ViewModeIconButton
           viewMode={library.viewMode}
           onViewModeChange={(value) => {
@@ -269,16 +239,3 @@ const useStyles = () => {
     []
   )
 }
-
-const useClasses = makeStyles((theme) => ({
-  extraInfo: {
-    display: "flex",
-    flexFlow: "row",
-    alignItems: "center",
-    marginLeft: theme.spacing(1),
-    overflow: "hidden",
-    "@media (max-width:370px)": {
-      display: "none"
-    }
-  }
-}))

packages/web/src/library/LibraryTopTabNavigator.tsx

@@ -50,6 +50,7 @@ export const LibraryTopTabNavigator = () => {
         title="Library"
         showBack={false}
         hasSearch
+        hasLockLibrary
         rightComponent={TopBarNavigationRightComponent}
       />
       <Tabs

packages/web/src/navigation/TopBarNavigation.tsx

@@ -5,15 +5,18 @@ import Typography from "@mui/material/Typography"
 import IconButton from "@mui/material/IconButton"
 import {
   ArrowBackIosRounded,
+  LockOpenRounded,
   MoreVertRounded,
   Search
 } from "@mui/icons-material"
-import { alpha, InputBase, useTheme } from "@mui/material"
+import { alpha, Box, InputBase, useTheme } from "@mui/material"
 import makeStyles from "@mui/styles/makeStyles"
 import { useSafeGoBack } from "./useSafeGoBack"
 import { ROUTES } from "../constants"
 import { useCSS } from "../common/utils"
 import { useNavigate } from "react-router-dom"
+import { libraryStateSignal } from "../library/states"
+import { useSignalValue } from "reactjrx"
 
 export const TopBarNavigation: FC<{
   title?: string
@@ -22,6 +25,7 @@ export const TopBarNavigation: FC<{
   color?: ComponentProps<typeof AppBar>["color"]
   rightComponent?: React.ReactNode
   hasSearch?: boolean
+  hasLockLibrary?: boolean
   goBackDefaultTo?: string
   onMoreClick?: () => void
 }> = memo(
@@ -33,8 +37,13 @@ export const TopBarNavigation: FC<{
     rightComponent,
     hasSearch = false,
     onMoreClick,
-    goBackDefaultTo
+    goBackDefaultTo,
+    hasLockLibrary
   }) => {
+    const isLibraryUnlocked = useSignalValue(
+      libraryStateSignal,
+      ({ isLibraryUnlocked }) => isLibraryUnlocked
+    )
     const { styles, classes } = useStyles({ color })
     const { goBack } = useSafeGoBack()
     const navigate = useNavigate()
@@ -46,21 +55,21 @@ export const TopBarNavigation: FC<{
             {showBack && (
               <IconButton
                 edge="start"
-                style={styles.menuButton}
                 onClick={() => goBack(goBackDefaultTo)}
                 size="large"
+                color="inherit"
               >
                 <ArrowBackIosRounded />
               </IconButton>
             )}
-            <div style={{ flexGrow: 1 }}>
+            <Box flexGrow={1}>
               {!hasSearch && (
                 <Typography variant="h6" style={{ flexGrow: 1 }}>
                   {title}
                 </Typography>
               )}
               {hasSearch && (
-                <div
+                <Box
                   className={classes.search}
                   onClick={() => {
                     navigate(ROUTES.SEARCH)
@@ -78,20 +87,31 @@ export const TopBarNavigation: FC<{
                     }}
                     inputProps={{ "aria-label": "search" }}
                   />
-                </div>
+                </Box>
               )}
-            </div>
-            {rightComponent}
-            {!rightComponent && !!onMoreClick && (
-              <IconButton
-                edge="end"
-                style={styles.menuButtonEnd}
-                onClick={onMoreClick}
-                size="large"
-              >
-                <MoreVertRounded />
-              </IconButton>
-            )}
+            </Box>
+            <Box display="flex" alignItems="center" ml={2}>
+              {hasLockLibrary && isLibraryUnlocked && (
+                <IconButton
+                  onClick={() => {
+                    libraryStateSignal.setValue((state) => ({
+                      ...state,
+                      isLibraryUnlocked: false
+                    }))
+                  }}
+                  size="large"
+                  color="inherit"
+                >
+                  <LockOpenRounded />
+                </IconButton>
+              )}
+              {rightComponent}
+              {!rightComponent && !!onMoreClick && (
+                <IconButton onClick={onMoreClick} size="large" color="inherit">
+                  <MoreVertRounded />
+                </IconButton>
+              )}
+            </Box>
           </>
         </Toolbar>
       </AppBar>
@@ -132,7 +152,7 @@ const useStyles = ({
   const styles = useCSS(
     () => ({
       menuButton: {
-        marginRight: theme.spacing(1),
+        // marginRight: theme.spacing(1),
         color: color === "transparent" ? "white" : "inherit"
       },
       menuButtonEnd: {

packages/web/src/navigation/useModalNavigationControl.ts

@@ -38,7 +38,9 @@ export const useModalNavigationControl = (
   useEffect(() => {
     if (id) {
       const hash = `#modal-${uuidv4()}`
+
       setCurrentHash(hash)
+
       navigate(
         {
           hash: window.location.hash,