feat: improved scrolling on all app

mbret · Sep 8, 2024 · 16aa4c5 · 16aa4c5
1 parent 72b5131
commit 16aa4c5
Show file tree

Hide file tree

Showing 18 changed files with 159 additions and 137 deletions.
diff --git a/packages/api/src/functions/covers/handler.ts b/packages/api/src/functions/covers/handler.ts
@@ -25,7 +25,7 @@ const lambda: ValidatedEventAPIGatewayProxyEvent = async (event) => {
     width: 600,
     height: 600,
     fit: "inside",
-    withoutEnlargement: true
+    withoutEnlargement: true  
   })
 
   const converted =

diff --git a/packages/web/src/books/bookList/BookListWithControls.tsx b/packages/web/src/books/bookList/BookListWithControls.tsx
@@ -9,6 +9,7 @@ export const BookListWithControls: FC<
     data: string[]
     renderEmptyList?: React.ReactNode
     ListActionsToolbarProps?: Partial<ComponentProps<typeof ListActionsToolbar>>
+    useWindowScroll?: boolean
   } & Pick<
     ComponentProps<typeof ListActionsToolbar>,
     "viewMode" | "onViewModeChange" | "sorting" | "onSortingChange"
@@ -20,42 +21,36 @@ export const BookListWithControls: FC<
   viewMode,
   onViewModeChange,
   onSortingChange,
-  ListActionsToolbarProps
+  ListActionsToolbarProps,
+  useWindowScroll
 }) => {
   const sortedData = useBookIdsSortedBy(data, sorting)
 
   return (
-    <Stack
-      style={{
-        height: "100%",
-        flex: 1,
-        overflow: "hidden"
-      }}
-    >
-      <ListActionsToolbar
-        viewMode={viewMode ?? "grid"}
-        onViewModeChange={onViewModeChange}
-        sorting={sorting ?? "alpha"}
-        onSortingChange={onSortingChange}
-        {...ListActionsToolbarProps}
-      />
-      <div
-        style={{
-          display: "flex",
-          height: "100%",
-          overflow: "scroll",
-          flex: 1
-        }}
-      >
+    <Stack flex={1}>
+      <Stack flex={1}>
         {sortedData.length === 0 && !!renderEmptyList && renderEmptyList}
         {sortedData.length > 0 && (
           <BookList
             data={sortedData}
             viewMode={viewMode}
-            style={{ height: "100%", width: "100%" }}
+            renderHeader={() => (
+              <ListActionsToolbar
+                viewMode={viewMode ?? "grid"}
+                onViewModeChange={onViewModeChange}
+                sorting={sorting ?? "alpha"}
+                onSortingChange={onSortingChange}
+                {...ListActionsToolbarProps}
+              />
+            )}
+            useWindowScroll={useWindowScroll}
+            style={{
+              height: "100%",
+              width: "100%"
+            }}
           />
         )}
-      </div>
+      </Stack>
     </Stack>
   )
 }
diff --git a/...c/collections/CollectionDetailsScreen.tsx → ...tions/details/CollectionDetailsScreen.tsx b/...c/collections/CollectionDetailsScreen.tsx → ...tions/details/CollectionDetailsScreen.tsx
@@ -1,24 +1,26 @@
-import { TopBarNavigation } from "../navigation/TopBarNavigation"
-import { Box, Stack, Typography, useMediaQuery, useTheme } from "@mui/material"
+import { TopBarNavigation } from "../../navigation/TopBarNavigation"
+import { Box, Stack, Typography, useTheme } from "@mui/material"
 import { useNavigate, useParams } from "react-router-dom"
-import EmptyLibraryAsset from "../assets/empty-library.svg"
-import CollectionBgSvg from "../assets/series-bg.svg"
-import { BookListWithControls } from "../books/bookList/BookListWithControls"
+import EmptyLibraryAsset from "../../assets/empty-library.svg"
+import CollectionBgSvg from "../../assets/series-bg.svg"
+import { BookListWithControls } from "../../books/bookList/BookListWithControls"
 import { signal, useSignalValue } from "reactjrx"
 import {
   ListActionSorting,
   ListActionViewMode
-} from "../common/lists/ListActionsToolbar"
-import { useCollectionActionsDrawer } from "./CollectionActionsDrawer/useCollectionActionsDrawer"
-import { useCollection } from "./useCollection"
-import { COLLECTION_EMPTY_ID } from "../constants.shared"
+} from "../../common/lists/ListActionsToolbar"
+import { useCollectionActionsDrawer } from "../CollectionActionsDrawer/useCollectionActionsDrawer"
+import { useCollection } from "../useCollection"
+import { COLLECTION_EMPTY_ID } from "../../constants.shared"
 import { useEffect, useMemo } from "react"
-import { useBooks } from "../books/states"
-import { useLocalSettings } from "../settings/states"
-import { Report } from "../debug/report.shared"
-import { useCollectionComputedMetadata } from "./useCollectionComputedMetadata"
-import { useCollectionCoverUri } from "./useCollectionCoverUri"
-import placeholder from "../assets/cover-placeholder.png"
+import { useBooks } from "../../books/states"
+import { useLocalSettings } from "../../settings/states"
+import { Report } from "../../debug/report.shared"
+import { useCollectionComputedMetadata } from "../useCollectionComputedMetadata"
+import { useCollectionCoverUri } from "../useCollectionCoverUri"
+import placeholder from "../../assets/cover-placeholder.png"
+import { StatusChip } from "../series/StatusChip"
+import { useWindowScroll } from "react-use"
 
 type ScreenParams = {
   id: string
@@ -63,7 +65,7 @@ export const CollectionDetailsScreen = () => {
     `calc(${theme.spacing(1)} + ${70}px)`
   ]
   const headerHeight = [
-    `calc(${headerPt[0]} + 90px)`,
+    `calc(${headerPt[0]} + 100px)`,
     `calc(${headerPt[1]} + 150px)`,
     `calc(${headerPt[2]} + 250px)`
   ]
@@ -86,6 +88,7 @@ export const CollectionDetailsScreen = () => {
       }
     }
   )
+  const { x, y } = useWindowScroll()
 
   useEffect(() => {
     Report.log({
@@ -96,16 +99,36 @@ export const CollectionDetailsScreen = () => {
 
   return (
     <>
-      <Stack flex={1}>
+      <Stack
+        flex={1}
+        sx={{
+          scrollbarWidth: "initial"
+        }}
+      >
         <TopBarNavigation
+          title={metadata.title}
           showBack={true}
           {...(id !== COLLECTION_EMPTY_ID && {
             onMoreClick: openActionDrawer
           })}
           color="transparent"
-          position="absolute"
+          sx={{
+            bgcolor: `rgba(255, 255, 255, ${Math.min(1, y / 70)})`,
+            borderBottom: `1px solid rgba(0, 0, 0, ${Math.min(1, y / 400)})`
+          }}
+          TitleProps={{
+            sx: {
+              opacity: Math.min(1, y / 100)
+            }
+          }}
+          position="fixed"
         />
-        <Stack flex={1}>
+        <Stack
+          flex={1}
+          sx={{
+            scrollbarWidth: "initial"
+          }}
+        >
           <Stack
             position="relative"
             pt={headerPt}
@@ -133,7 +156,7 @@ export const CollectionDetailsScreen = () => {
                 }}
               />
             )}
-            <Stack direction="row" gap={2}>
+            <Stack direction="row" gap={2} justifyContent="flex-start">
               {!!hasCover && (
                 <Box
                   position="relative"
@@ -148,32 +171,43 @@ export const CollectionDetailsScreen = () => {
                   }}
                 />
               )}
-              <Stack gap={1} pt={hasCover ? 0.5 : 0}>
+              <Stack
+                pt={hasCover ? 0.5 : 0}
+                position="relative"
+                alignItems="flex-start"
+              >
                 <Typography
-                  position="relative"
                   component="h1"
                   sx={{
-                    typography: { ":default": "h6", sm: "h4" }
+                    typography: ["h6", "h4"]
                   }}
-                  lineHeight={1}
                   fontWeight="bold"
                 >
                   {metadata.displayTitle}
                 </Typography>
                 <Typography
                   sx={{
-                    typography: { ":default": "body2", sm: "body1" }
+                    typography: ["body2", "body1"]
                   }}
-                  position="relative"
                   gutterBottom
                 >
                   {`${collection?.books?.length || 0} book(s)`}
                 </Typography>
+                {collection?.type === "series" && (
+                  <StatusChip
+                    rating={metadata.rating}
+                    status={metadata.status}
+                    sx={{
+                      bgcolor: "transparent"
+                    }}
+                  />
+                )}
               </Stack>
             </Stack>
           </Stack>
           <BookListWithControls
             data={visibleBookIds}
+            useWindowScroll
             sorting={sorting}
             viewMode={viewMode}
             onViewModeChange={(value) => {

diff --git a/packages/web/src/collections/lists/CollectionListItemCover.tsx b/packages/web/src/collections/lists/CollectionListItemCover.tsx
@@ -20,6 +20,7 @@ import { getCollectionComputedMetadata } from "../getCollectionComputedMetadata"
 import { CollectionListItemProgress } from "./CollectionListItemProgress"
 import { useCollectionReadingProgress } from "../useCollectionReadingProgress"
 import { useCollectionCoverUri } from "../useCollectionCoverUri"
+import { StatusChip } from "../series/StatusChip"
 
 export const CollectionListItemCover = memo(({ id }: { id: string }) => {
   const theme = useTheme()
@@ -96,45 +97,11 @@ export const CollectionListItemCover = memo(({ id }: { id: string }) => {
             }}
           />
           {item?.type === "series" && (
-            <Chip
-              label={
-                <Stack direction="row" alignItems="center" gap={1}>
-                  <Typography
-                    variant="caption"
-                    lineHeight="inherit"
-                    color="inherit"
-                  >
-                    {capitalize(metadata.status ?? "unknown")}
-                  </Typography>
-                  {metadata.rating !== undefined && (
-                    <Stack direction="row" alignItems="center">
-                      <StarRounded fontSize="small" color="warning" />
-                      <Typography
-                        color="warning"
-                        variant="caption"
-                        lineHeight="inherit"
-                        fontWeight="bold"
-                      >
-                        {metadata.rating.toFixed(1)}
-                      </Typography>
-                    </Stack>
-                  )}
-                </Stack>
-              }
-              icon={
-                <CircleRounded
-                  color={
-                    metadata.status === "ongoing"
-                      ? "success"
-                      : metadata.status === "completed"
-                        ? "info"
-                        : "warning"
-                  }
-                />
-              }
-              size="small"
+            <StatusChip
+              rating={metadata.rating}
+              status={metadata.status}
               sx={{
-                bgcolor: "white",
+                  bgcolor: "white",
                 position: "absolute",
                 right: 0,
                 bottom: 0,

diff --git a/packages/web/src/collections/series/StatusChip.tsx b/packages/web/src/collections/series/StatusChip.tsx
@@ -0,0 +1,50 @@
+import { CircleRounded, StarRounded } from "@mui/icons-material"
+import { Chip, ChipProps, Stack, Typography, capitalize } from "@mui/material"
+import { CollectionMetadata } from "@oboku/shared"
+import { memo } from "react"
+
+export const StatusChip = memo(
+  ({
+    rating,
+    status,
+    ...rest
+  }: Pick<CollectionMetadata, "status" | "rating"> & ChipProps) => {
+    return (
+      <Chip
+        label={
+          <Stack direction="row" alignItems="center" gap={1}>
+            <Typography variant="caption" lineHeight="inherit" color="inherit">
+              {capitalize(status ?? "unknown")}
+            </Typography>
+            {rating !== undefined && (
+              <Stack direction="row" alignItems="center">
+                <StarRounded fontSize="small" color="warning" />
+                <Typography
+                  color="warning"
+                  variant="caption"
+                  lineHeight="inherit"
+                  fontWeight="bold"
+                >
+                  {rating.toFixed(1)}
+                </Typography>
+              </Stack>
+            )}
+          </Stack>
+        }
+        icon={
+          <CircleRounded
+            color={
+              status === "ongoing"
+                ? "success"
+                : status === "completed"
+                  ? "info"
+                  : "warning"
+            }
+          />
+        }
+        size="small"
+        {...rest}
+      />
+    )
+  }
+)
diff --git a/packages/web/src/common/lists/ListActionsToolbar.tsx b/packages/web/src/common/lists/ListActionsToolbar.tsx
@@ -76,7 +76,6 @@ export const ListActionsToolbar = memo(
       <>
         <Toolbar
           style={{
-            borderBottom: `1px solid ${theme.palette.grey[200]}`,
             boxSizing: "border-box"
           }}
           {...rest}

diff --git a/packages/web/src/common/lists/VirtuosoList.tsx b/packages/web/src/common/lists/VirtuosoList.tsx
@@ -65,6 +65,7 @@ export const VirtuosoList = memo(
     restoreStateFrom?:
       | { type: "list"; state: StateSnapshot }
       | { type: "grid"; state: GridStateSnapshot }
+    useWindowScroll?: boolean
   }) => {
     const virtuosoRef = useRef<VirtuosoHandle>(null)
     const virtuosoGridRef = useRef<VirtuosoGridHandle>(null)
@@ -134,7 +135,6 @@ export const VirtuosoList = memo(
         {itemsPerRow > 1 ? (
           <VirtuosoGrid
             ref={virtuosoGridRef}
-            className="withScrollBar"
             style={{
               ...style,
               visibility: isReadyToBeShown ? undefined : "hidden",
@@ -179,7 +179,6 @@ export const VirtuosoList = memo(
         ) : (
           <Virtuoso
             ref={virtuosoRef}
-            className="withScrollBar"
             style={{
               ...style,
               visibility: isReadyToBeShown ? undefined : "hidden"

diff --git a/packages/web/src/dataSources/DataSourcesListScreen.tsx b/packages/web/src/dataSources/DataSourcesListScreen.tsx
@@ -40,7 +40,7 @@ export const DataSourcesListScreen = () => {
         style={{
           display: "flex",
           flex: 1,
-          overflow: "scroll",
+          overflow: "auto",
           flexFlow: "column"
         }}
       >