Sheets

package.json

@@ -31,22 +31,24 @@
     "classnames": "^2.5.1",
     "debounce": "^2.2.0",
     "json-templates": "^5.1.0",
-    "next": "15.1.1",
+    "next": "15.1.4",
     "react": "^19.0.0",
-    "react-aria-components": "^1.5.0",
+    "react-aria-components": "^1.6.0",
     "react-dom": "^19.0.0",
-    "react-redux": "^9.2.0"
+    "react-redux": "^9.2.0",
+    "react-resizable-panels": "^2.1.7",
+    "react-spring-bottom-sheet": "^3.4.1"
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",
     "@types/json-templates": "^3.0.3",
-    "@types/node": "^22.10.2",
-    "@types/react": "^19.0.1",
-    "@types/react-dom": "^19.0.2",
-    "eslint": "^9.17.0",
-    "eslint-config-next": "15.1.1",
+    "@types/node": "^22.10.7",
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
+    "eslint": "^9.18.0",
+    "eslint-config-next": "15.1.4",
     "readium-css": "github:readium/readium-css",
-    "typescript": "^5.7.2",
+    "typescript": "^5.7.3",
     "vercel": "39.1.1"
   },
   "overrides": {

src/components/Actions.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+import { ActionComponentVariant, IActions } from "@/models/actions";
+
+export const Actions = ({
+  items,
+  className,
+  label
+}: IActions) => {
+
+  return (
+    <>
+    <div 
+      className={ className } 
+      aria-label={ label }
+    >
+      { items.map(({ Comp, key, associatedKey, ...props }) => 
+        <Comp 
+          key={ key } 
+          variant={ ActionComponentVariant.button } 
+          { ...(associatedKey ? { associatedKey: associatedKey } : {}) } 
+          { ...props }
+        />) }
+    </div>
+    </>
+  )
+}

src/components/ActionsWithCollapsibility.tsx

@@ -0,0 +1,51 @@
+import { ActionComponentVariant, IActionsWithCollapsibility } from "@/models/actions";
+
+import { OverflowMenu } from "./OverflowMenu";
+
+import { useCollapsibility } from "@/hooks/useCollapsibility";
+
+export const ActionsWithCollapsibility = ({
+  id, 
+  items,
+  prefs,
+  className,
+  overflowActionCallback,
+  overflowMenuClassName,
+  overflowMenuDisplay,
+  label,
+}: IActionsWithCollapsibility) => {
+  const Actions = useCollapsibility(items, prefs);
+
+  return (
+    <>
+    <div 
+      className={ className } 
+      aria-label={ label }
+    >
+      { Actions.ActionIcons.map(({ Comp, key, associatedKey, ...props }) => 
+          <Comp 
+            key={ key } 
+            variant={ ActionComponentVariant.button }
+            { ...(associatedKey ? { associatedKey: associatedKey } : {}) } 
+            { ...props }
+          />) 
+      }
+
+      <OverflowMenu 
+        id={ id }
+        display={ overflowMenuDisplay || true }
+        className={ overflowMenuClassName } 
+        actionFallback={ overflowActionCallback }
+      >
+        { Actions.MenuItems.map(({ Comp, key, associatedKey, ...props }) => 
+          <Comp 
+            key={ key } 
+            variant={ ActionComponentVariant.menu }
+            { ...(associatedKey ? { associatedKey: associatedKey } : {}) } 
+            { ...props }
+          />) }
+      </OverflowMenu> 
+    </div>
+    </>
+  )
+}

src/components/ArrowButton.tsx

@@ -1,5 +1,9 @@
 import React, { useEffect, useRef, useState } from "react";
 
+import { IReaderArrow } from "@/models/layout";
+import { StaticBreakpoints } from "@/models/staticBreakpoints";
+import { ActionsStateKeys } from "@/models/state/actionsState";
+
 import Locale from "../resources/locales/en.json";
 
 import arrowStyles from "./assets/styles/arrowButton.module.css";
@@ -12,34 +16,32 @@ import RightArrow from "./assets/icons/arrow_forward.svg";
 import { Button, PressEvent, Tooltip, TooltipTrigger } from "react-aria-components";
 
 import { useAppSelector } from "@/lib/hooks";
+import { useActions } from "@/hooks/useActions";
 
-import classNames from "classnames";
 import { isActiveElement } from "@/helpers/focus";
-import { StaticBreakpoints } from "@/hooks/useBreakpoints";
-
-export interface ReaderArrowProps {
-  direction: "left" | "right";
-  className?: string;
-  disabled: boolean;
-  onPressCallback: () => void;
-}
+import classNames from "classnames";
 
-export const ArrowButton = (props: ReaderArrowProps) => {
+export const ArrowButton = (props: IReaderArrow) => {
   const button = useRef<HTMLButtonElement>(null);
   const isImmersive = useAppSelector(state => state.reader.isImmersive);
   const isFullscreen = useAppSelector(state => state.reader.isFullscreen);
   const hasReachedDynamicBreakpoint = useAppSelector(state => state.theming.hasReachedDynamicBreakpoint);
   const staticBreakpoint = useAppSelector(state => state.theming.staticBreakpoint);
   const isRTL = useAppSelector(state => state.publication.isRTL);
   const isFXL = useAppSelector(state => state.publication.isFXL);
+  const actions = useActions();
 
   const [isHovering, setIsHovering] = useState(false);
 
   const label = (props.direction === "right" && !isRTL || props.direction === "left" && isRTL) ? Locale.reader.navigation.goForward : Locale.reader.navigation.goBackward;
 
   const handleClassNameFromState = () => {
     let className = "";
-    if (isImmersive && !hasReachedDynamicBreakpoint || isFullscreen) {
+    if (
+        isImmersive && !hasReachedDynamicBreakpoint || 
+        isFullscreen ||
+        !actions.everyOpenDocked()
+      ) {
       className = readerStateStyles.immersiveHidden;
     } else if (isImmersive) {
       className = readerStateStyles.immersive;

src/components/CloseButton.tsx

@@ -0,0 +1,56 @@
+import { RSPrefs } from "@/preferences";
+import Locale from "../resources/locales/en.json";
+
+import { ICloseButton } from "@/models/actions";
+
+import readerSharedUI from "./assets/styles/readerSharedUI.module.css";
+
+import Close from "./assets/icons/close.svg";
+
+import { Button, Tooltip, TooltipTrigger } from "react-aria-components";
+
+export const CloseButton = ({
+  ref,
+  className,
+  label,
+  onPressCallback,
+  withTooltip
+}: ICloseButton) => {
+
+  if (withTooltip) {
+    return (
+      <>
+      <TooltipTrigger>
+        <Button 
+          ref={ ref }
+          className={ className || readerSharedUI.closeButton } 
+          aria-label={ label || Locale.reader.app.docker.close.trigger } 
+          onPress={ onPressCallback }
+        >
+          <Close aria-hidden="true" focusable="false" />  
+        </Button>
+        <Tooltip
+          className={ readerSharedUI.tooltip }
+          placement="bottom" 
+          offset={ RSPrefs.theming.icon.tooltipOffset || 0 }
+        >
+          { withTooltip }
+        </Tooltip>
+      </TooltipTrigger>
+      </>
+    )
+  } else {
+    return (
+      <>
+      <Button 
+        ref={ ref }
+        className={ className || readerSharedUI.closeButton } 
+        aria-label={ label || Locale.reader.app.docker.close.trigger } 
+        onPress={ onPressCallback }
+      >
+        <Close aria-hidden="true" focusable="false" />
+      </Button>
+      </>
+    )
+  }
+}

src/components/FullscreenAction.tsx

@@ -1,7 +1,10 @@
 import React from "react";
 
-import Locale from "../resources/locales/en.json";
 import { RSPrefs } from "@/preferences";
+import Locale from "../resources/locales/en.json";
+
+import { ActionComponentVariant, ActionKeys, IActionComponent } from "@/models/actions";
+
 import readerSharedUI from "./assets/styles/readerSharedUI.module.css";
 
 import FullscreenCorners from "./assets/icons/fullscreen.svg";
@@ -11,7 +14,6 @@ import { OverflowMenuItem } from "./Templates/OverflowMenuItem";
 import { ActionIcon } from "./Templates/ActionIcon";
 
 import { useFullscreen } from "@/hooks/useFullscreen";
-import { ActionComponentVariant, ActionKeys, IActionComponent } from "./Templates/ActionComponent";
 
 import { useAppDispatch } from "@/lib/hooks";
 import { setHovering } from "@/lib/readerReducer";
@@ -43,7 +45,7 @@ export const FullscreenAction: React.FC<IActionComponent> = ({ variant }) => {
       <OverflowMenuItem 
         label={ Locale.reader.fullscreen.trigger }
         SVG={ FullscreenCorners } 
-        shortcut={ RSPrefs.actions.fullscreen.shortcut }
+        shortcut={ RSPrefs.actions.keys[ActionKeys.fullscreen].shortcut }
         onActionCallback={ fs.handleFullscreen } 
         id={ ActionKeys.fullscreen }
       />
@@ -54,7 +56,7 @@ export const FullscreenAction: React.FC<IActionComponent> = ({ variant }) => {
       <>
       <ActionIcon 
         className={ readerSharedUI.iconCompSm }
-        visibility={ RSPrefs.actions[ActionKeys.fullscreen].visibility }  
+        visibility={ RSPrefs.actions.keys[ActionKeys.fullscreen].visibility }  
         ariaLabel={ fs.isFullscreen ? Locale.reader.fullscreen.close : Locale.reader.fullscreen.trigger }
         SVG={ fs.isFullscreen ? FullscreenExit : FullscreenCorners } 
         placement="bottom" 

src/components/JumpToPositionAction.tsx

@@ -1,13 +1,14 @@
 import React from "react";
 
-import Locale from "../resources/locales/en.json";
 import { RSPrefs } from "@/preferences";
+import Locale from "../resources/locales/en.json";
+
+import { ActionComponentVariant, ActionKeys, IActionComponent } from "@/models/actions";
 
 import TargetIcon from "./assets/icons/point_scan.svg";
 
 import { ActionIcon } from "./Templates/ActionIcon";
 import { OverflowMenuItem } from "./Templates/OverflowMenuItem";
-import { ActionComponentVariant, ActionKeys, IActionComponent } from "./Templates/ActionComponent";
 
 export const JumpToPositionAction: React.FC<IActionComponent> = ({ variant }) => {
   if (variant && variant === ActionComponentVariant.menu) {
@@ -16,7 +17,7 @@ export const JumpToPositionAction: React.FC<IActionComponent> = ({ variant }) =>
       <OverflowMenuItem 
         label={ Locale.reader.jumpToPosition.trigger }
         SVG={ TargetIcon }
-        shortcut={ RSPrefs.actions.jumpToPosition.shortcut }
+        shortcut={ RSPrefs.actions.keys[ActionKeys.jumpToPosition].shortcut }
         id={ ActionKeys.jumpToPosition }
       />
       </>
@@ -25,7 +26,7 @@ export const JumpToPositionAction: React.FC<IActionComponent> = ({ variant }) =>
     return(
       <>
       <ActionIcon
-        visibility={ RSPrefs.actions[ActionKeys.jumpToPosition].visibility } 
+        visibility={ RSPrefs.actions.keys[ActionKeys.jumpToPosition].visibility } 
         ariaLabel={ Locale.reader.jumpToPosition.trigger }
         SVG={ TargetIcon } 
         placement="bottom" 

src/components/OverflowMenu.tsx

@@ -1,32 +1,42 @@
-import React, { ReactNode } from "react";
+import React from "react";
 
 import Locale from "../resources/locales/en.json";
+
+import { ActionVisibility, IOverflowMenu } from "@/models/actions";
+
 import overflowMenuStyles from "./assets/styles/overflowMenu.module.css";
 
 import MenuIcon from "./assets/icons/more_vert.svg";
 
 import { Key, Menu, MenuTrigger, Popover } from "react-aria-components";
 import { ActionIcon } from "./Templates/ActionIcon";
-import { useAppDispatch, useAppSelector } from "@/lib/hooks";
-import { setOverflowMenuOpen, toggleImmersive } from "@/lib/readerReducer";
-import { ActionVisibility } from "./Templates/ActionComponent";
 
-export const OverflowMenu = ({ children }: { children?: ReactNode }) => {
-  const isImmersive = useAppSelector(state => state.reader.isImmersive);
-  const isHovered = useAppSelector(state => state.reader.isHovering);
+import { useAppDispatch } from "@/lib/hooks";
+import { toggleImmersive } from "@/lib/readerReducer";
+import { setOverflow } from "@/lib/actionsReducer";
+
+export const OverflowMenu = ({ 
+    id,
+    className, 
+    actionFallback,
+    display,
+    children 
+  }: IOverflowMenu) => {
   const dispatch = useAppDispatch();
 
   const toggleMenuState = (value: boolean) => {
-    dispatch(setOverflowMenuOpen(value));
+    dispatch(setOverflow({
+      key: id,
+      isOpen: value
+    }));
   }
-
-  return(
-    <>
-    { React.Children.toArray(children).length > 0 && (!isImmersive || isHovered) ? 
+
+  if (React.Children.toArray(children).length > 0 && (display)) {
+    return (
       <>
       <MenuTrigger onOpenChange={ (val) => toggleMenuState(val) }>
         <ActionIcon 
-          className={ overflowMenuStyles.activeButton }
+          className={ className ? className : overflowMenuStyles.activeButton }
           ariaLabel={ Locale.reader.overflowMenu.active.trigger }
           SVG={ MenuIcon } 
           placement="bottom"
@@ -38,18 +48,23 @@ export const OverflowMenu = ({ children }: { children?: ReactNode }) => {
           className={ overflowMenuStyles.overflowPopover }
         >
           <Menu 
+            id={ id }
             selectionMode="none" 
-            onAction={ (key: Key) => { console.log(key) } 
-
-          }>
+            onAction={ (key: Key) => { console.log(key) } } 
+            className={ overflowMenuStyles.overflowMenu }
+          >
             { children }
           </Menu>
         </Popover>
       </MenuTrigger>
       </>
-      : <>
+    )
+  } else {
+    if (actionFallback) {
+      return(
+        <>
         <ActionIcon 
-          className={ overflowMenuStyles.hintButton } 
+          className={ className ? className : overflowMenuStyles.hintButton } 
           ariaLabel={ Locale.reader.overflowMenu.hint.trigger }
           SVG={ MenuIcon } 
           placement="bottom"
@@ -59,7 +74,9 @@ export const OverflowMenu = ({ children }: { children?: ReactNode }) => {
           preventFocusOnPress={ true }
         />
       </>
+      )
+    } else {
+      return(<></>)
     }
-    </>
-  )
+  }
 }