add rotation buttons

ui2/src/components/Viewer/ActionButtons.tsx

@@ -1,20 +1,27 @@
 import {useContext, useRef, useEffect} from "react"
 import {Group} from "@mantine/core"
 import {useViewportSize} from "@mantine/hooks"
-import {useDispatch} from "react-redux"
+import {useDispatch, useSelector} from "react-redux"
 import ToggleSecondaryPanel from "@/components/DualPanel/ToggleSecondaryPanel"
 import {updateActionPanel} from "@/slices/sizes"
 import PanelContext from "@/contexts/PanelContext"
 import EditTitleButton from "./EditTitleButton"
 
 import type {PanelMode} from "@/types"
+import type {RootState} from "@/app/types"
 import DownloadButton from "./DownloadButton/DownloadButton"
+import {selectSelectedPages} from "@/slices/dualPanel/dualPanel"
+import RotateCCButton from "./RotateCCButton"
+import RotateButton from "./RotateButton"
 
 export default function ActionButtons() {
   const {height, width} = useViewportSize()
   const dispatch = useDispatch()
   const ref = useRef<HTMLDivElement>(null)
   const mode: PanelMode = useContext(PanelContext)
+  const selectedPages = useSelector((state: RootState) =>
+    selectSelectedPages(state, mode)
+  )
 
   useEffect(() => {
     if (ref?.current) {
@@ -34,6 +41,8 @@ export default function ActionButtons() {
       <Group>
         <EditTitleButton />
         <DownloadButton />
+        {selectedPages.length > 0 && <RotateButton />}
+        {selectedPages.length > 0 && <RotateCCButton />}
       </Group>
       <Group>
         <ToggleSecondaryPanel />

ui2/src/components/Viewer/RotateButton.tsx

@@ -0,0 +1,14 @@
+import {Tooltip, ActionIcon} from "@mantine/core"
+import {IconRotateClockwise} from "@tabler/icons-react"
+
+export default function RotateCCButton() {
+  const onClick = () => {}
+
+  return (
+    <Tooltip label="Rotate selected pages clockwise" withArrow>
+      <ActionIcon size={"lg"} variant="default" onClick={onClick}>
+        <IconRotateClockwise stroke={1.4} />
+      </ActionIcon>
+    </Tooltip>
+  )
+}

ui2/src/components/Viewer/RotateCCButton.tsx

@@ -0,0 +1,14 @@
+import {Tooltip, ActionIcon} from "@mantine/core"
+import {IconRotate} from "@tabler/icons-react"
+
+export default function RotateCCButton() {
+  const onClick = () => {}
+
+  return (
+    <Tooltip label="Rotate selected pages counter-clockwise" withArrow>
+      <ActionIcon size={"lg"} variant="default" onClick={onClick}>
+        <IconRotate stroke={1.4} />
+      </ActionIcon>
+    </Tooltip>
+  )
+}

ui2/src/components/Viewer/Thumbnail/Thumbnail.tsx

@@ -167,7 +167,6 @@ export default function Thumbnail({page}: Args) {
       className={`${classes.thumbnail} ${cssClassNames.join(" ")}`}
       align="center"
       gap={"xs"}
-      onClick={onClick}
       draggable
       onDragStart={onDragStart}
       onDragEnd={onDragEnd}
@@ -181,7 +180,7 @@ export default function Thumbnail({page}: Args) {
         checked={selectedIds && selectedIds.includes(page.id)}
         className={classes.checkbox}
       />
-      <img src={protectedImage.data || ""} />
+      <img onClick={onClick} src={protectedImage.data || ""} />
       {page.number}
     </Stack>
   )