Update Page editor styling

DeveloperGuide.md

@@ -246,7 +246,7 @@ Stirling-PDF uses different Docker images for various configurations. The build
 
 Note: The `--no-cache` and `--pull` flags ensure that the build process uses the latest base images and doesn't use cached layers, which is useful for testing and ensuring reproducible builds. however to improve build times these can often be removed depending on your usecase
 
-## 6. Testing
+## 7. Testing
 
 ### Comprehensive Testing Script
 
@@ -311,7 +311,7 @@ Important notes:
 - There are currently no automated unit tests. All testing is done manually through the UI or API calls. (You are welcome to add JUnits!)
 - Always verify your changes in the full Docker environment before submitting pull requests, as some integrations and features will only work in the complete setup.
 
-## 7. Contributing
+## 8. Contributing
 
 1. Fork the repository on GitHub.
 2. Create a new branch for your feature or bug fix.
@@ -336,11 +336,11 @@ When you raise a PR:
 
 Address any issues that arise from these checks before finalizing your pull request.
 
-## 8. API Documentation
+## 9. API Documentation
 
 API documentation is available at `/swagger-ui/index.html` when running the application. You can also view the latest API documentation [here](https://app.swaggerhub.com/apis-docs/Stirling-Tools/Stirling-PDF/).
 
-## 9. Customization
+## 10. Customization
 
 Stirling-PDF can be customized through environment variables or a `settings.yml` file. Key customization options include:
 
@@ -359,7 +359,7 @@ docker run -p 8080:8080 -e APP_NAME="My PDF Tool" stirling-pdf:full
 
 Refer to the main README for a full list of customization options.
 
-## 10. Language Translations
+## 11. Language Translations
 
 For managing language translations that affect multiple files, Stirling-PDF provides a helper script:
 

frontend/src/commands/pageCommands.ts

@@ -43,7 +43,7 @@ export class RotatePagesCommand extends PageCommand {
   execute(): void {
     const updatedPages = this.pdfDocument.pages.map(page => {
       if (this.pageIds.includes(page.id)) {
-        return { ...page, rotation: (page.rotation + this.rotation) % 360 };
+        return { ...page, rotation: page.rotation + this.rotation };
       }
       return page;
     });

frontend/src/components/PageEditor.tsx

@@ -58,6 +58,7 @@ const PageEditor: React.FC<PageEditorProps> = ({
   const [showPageSelect, setShowPageSelect] = useState(false);
   const [filename, setFilename] = useState<string>("");
   const [draggedPage, setDraggedPage] = useState<string | null>(null);
+  const [dropTarget, setDropTarget] = useState<string | null>(null);
   const [exportLoading, setExportLoading] = useState(false);
   const [showExportModal, setShowExportModal] = useState(false);
   const [exportPreview, setExportPreview] = useState<{pageCount: number; splitCount: number; estimatedSize: string} | null>(null);
@@ -162,14 +163,55 @@ const PageEditor: React.FC<PageEditorProps> = ({
 
   const handleDragOver = useCallback((e: React.DragEvent) => {
     e.preventDefault();
+    
+    if (!draggedPage) return;
+    
+    // Get the element under the mouse cursor
+    const elementUnderCursor = document.elementFromPoint(e.clientX, e.clientY);
+    if (!elementUnderCursor) return;
+    
+    // Find the closest page container
+    const pageContainer = elementUnderCursor.closest('[data-page-id]');
+    if (pageContainer) {
+      const pageId = pageContainer.getAttribute('data-page-id');
+      if (pageId && pageId !== draggedPage) {
+        setDropTarget(pageId);
+        return;
+      }
+    }
+    
+    // Check if over the end zone
+    const endZone = elementUnderCursor.closest('[data-drop-zone="end"]');
+    if (endZone) {
+      setDropTarget('end');
+      return;
+    }
+    
+    // If not over any valid drop target, clear it
+    setDropTarget(null);
+  }, [draggedPage]);
+
+  const handleDragEnter = useCallback((pageId: string) => {
+    if (draggedPage && pageId !== draggedPage) {
+      setDropTarget(pageId);
+    }
+  }, [draggedPage]);
+
+  const handleDragLeave = useCallback(() => {
+    // Don't clear drop target on drag leave - let dragover handle it
   }, []);
 
-  const handleDrop = useCallback((e: React.DragEvent, targetPageId: string) => {
+  const handleDrop = useCallback((e: React.DragEvent, targetPageId: string | 'end') => {
     e.preventDefault();
     if (!draggedPage || !pdfDocument || draggedPage === targetPageId) return;
 
-    const targetIndex = pdfDocument.pages.findIndex(p => p.id === targetPageId);
+    let targetIndex: number;
-    if (targetIndex === -1) return;
+    if (targetPageId === 'end') {
+      targetIndex = pdfDocument.pages.length;
+    } else {
+      targetIndex = pdfDocument.pages.findIndex(p => p.id === targetPageId);
+      if (targetIndex === -1) return;
+    }
 
     const command = new ReorderPageCommand(
       pdfDocument,
@@ -180,9 +222,16 @@ const PageEditor: React.FC<PageEditorProps> = ({
 
     executeCommand(command);
     setDraggedPage(null);
+    setDropTarget(null);
     setStatus('Page reordered');
   }, [draggedPage, pdfDocument, executeCommand]);
 
+  const handleEndZoneDragEnter = useCallback(() => {
+    if (draggedPage) {
+      setDropTarget('end');
+    }
+  }, [draggedPage]);
+
   const handleRotate = useCallback((direction: 'left' | 'right') => {
     if (!pdfDocument || selectedPages.length === 0) return;
 
@@ -293,15 +342,10 @@ const PageEditor: React.FC<PageEditorProps> = ({
 
   if (!pdfDocument) {
     return (
-      <Container>
+      <Box pos="relative" h="100vh" style={{ overflow: 'auto' }}>
-        <Paper shadow="xs" radius="md" p="md" pos="relative">
+        <LoadingOverlay visible={loading || pdfLoading} />
-          <LoadingOverlay visible={loading || pdfLoading} />
-          
-          <Group mb="md">
-            <ConstructionIcon />
-            <Text size="lg" fw={600}>PDF Multitool</Text>
-          </Group>
 
+        <Box p="xl">
           {error && (
             <Alert color="red" mb="md" onClose={() => setError(null)}>
               {error}
@@ -312,48 +356,68 @@ const PageEditor: React.FC<PageEditorProps> = ({
             onDrop={(files) => files[0] && handleFileUpload(files[0])}
             accept={["application/pdf"]}
             multiple={false}
-            h={300}
+            h="60vh"
+            style={{ minHeight: 400 }}
           >
-            <Center h={250}>
+            <Center h="100%">
               <Stack align="center" gap="md">
-                <UploadFileIcon style={{ fontSize: 48 }} />
+                <UploadFileIcon style={{ fontSize: 64 }} />
-                <Text size="lg" fw={500}>
+                <Text size="xl" fw={500}>
                   Drop a PDF file here or click to upload
                 </Text>
-                <Text size="sm" c="dimmed">
+                <Text size="md" c="dimmed">
                   Supports PDF files only
                 </Text>
               </Stack>
             </Center>
           </Dropzone>
-        </Paper>
+        </Box>
-      </Container>
+      </Box>
     );
   }
 
   return (
-    <Container>
+    <Box pos="relative" h="100vh" style={{ overflow: 'auto' }}>
-      <Paper shadow="xs" radius="md" p="md" pos="relative">
+      <style>
-        <LoadingOverlay visible={loading || pdfLoading} />
+        {`
+          .page-container:hover .page-number {
+            opacity: 1 !important;
+          }
+          .page-container:hover .page-hover-controls {
+            opacity: 1 !important;
+          }
+          .page-container {
+            transition: transform 0.2s ease-in-out;
+          }
+          .page-container:hover {
+            transform: scale(1.02);
+          }
+          @keyframes pulse {
+            0%, 100% {
+              opacity: 1;
+            }
+            50% {
+              opacity: 0.5;
+            }
+          }
+        `}
+      </style>
+      <LoadingOverlay visible={loading || pdfLoading} />
 
-        <Group mb="md">
+        <Box p="md">
-          <ConstructionIcon />
+          <Group mb="md">
-          <Text size="lg" fw={600}>PDF Multitool</Text>
+            <TextInput
-        </Group>
+              value={filename}
-        
+              onChange={(e) => setFilename(e.target.value)}
-        <Group mb="md">
+              placeholder="Enter filename"
-          <TextInput
+              style={{ minWidth: 200 }}
-            value={filename}
+            />
-            onChange={(e) => setFilename(e.target.value)}
+            <Button onClick={() => setShowPageSelect(!showPageSelect)}>
-            placeholder="Enter filename"
+              Select Pages
-            style={{ minWidth: 200 }}
+            </Button>
-          />
+            <Button onClick={selectAll}>Select All</Button>
-          <Button onClick={() => setShowPageSelect(!showPageSelect)}>
+            <Button onClick={deselectAll}>Deselect All</Button>
-            Select Pages
+          </Group>
-          </Button>
-          <Button onClick={selectAll}>Select All</Button>
-          <Button onClick={deselectAll}>Deselect All</Button>
-        </Group>
 
         {showPageSelect && (
           <Paper p="md" mb="md" withBorder>
@@ -412,118 +476,305 @@ const PageEditor: React.FC<PageEditorProps> = ({
           </Tooltip>
         </Group>
 
-        <SimpleGrid cols={{ base: 2, sm: 3, md: 4, lg: 6 }} spacing="md">
+        <div
-          {pdfDocument.pages.map((page) => (
+          style={{
-            <Box
+            display: 'flex',
-              key={page.id}
+            flexWrap: 'wrap',
-              style={{
+            gap: '1.5rem',
-                borderRadius: 8,
+            justifyContent: 'flex-start'
-                padding: 8,
+          }}
-                position: 'relative',
+        >
-                cursor: 'grab',
+          {pdfDocument.pages.map((page, index) => (
-                ...(selectedPages.includes(page.id) 
+            <React.Fragment key={page.id}>
-                  ? { border: '2px solid blue' }
+              {page.splitBefore && index > 0 && (
-                  : { border: '1px solid #ccc' }
+                <div
-                ),
+                  style={{
-                ...(page.splitBefore 
+                    width: '4px',
-                  ? { borderLeft: '4px dashed orange' }
+                    height: '15rem',
-                  : {}
+                    border: '2px dashed #3b82f6',
-                )
+                    backgroundColor: 'transparent',
-              }}
+                    borderRadius: '2px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    marginLeft: '-0.75rem',
+                    marginRight: '-0.75rem',
+                    position: 'relative',
+                    flexShrink: 0
+                  }}
+                >
+                  <ContentCutIcon 
+                    style={{
+                      fontSize: 18,
+                      color: '#3b82f6',
+                      backgroundColor: 'white',
+                      borderRadius: '50%',
+                      padding: '3px'
+                    }}
+                  />
+                </div>
+              )}
+              <div
+                data-page-id={page.id}
+                className={`
+        !rounded-lg
+        cursor-grab
+        select-none
+        w-[15rem]
+        h-[15rem]
+        flex items-center justify-center
+        flex-shrink-0
+        shadow-sm
+        hover:shadow-md
+        transition-all
+        relative
+              ${selectedPages.includes(page.id)
+          ? 'ring-2 ring-blue-500 bg-blue-50'
+          : 'bg-white hover:bg-gray-50'}
+              ${draggedPage === page.id ? 'opacity-50 scale-95' : ''}
+      `}
+                style={{
+                  transform: (() => {
+                    if (!draggedPage || page.id === draggedPage) return 'translateX(0)';
+                    
+                    if (dropTarget === page.id) {
+                      return 'translateX(20px)'; // Move slightly right to indicate drop position
+                    }
+                    return 'translateX(0)';
+                  })(),
+                  transition: 'transform 0.2s ease-in-out'
+                }}
               draggable
               onDragStart={() => handleDragStart(page.id)}
               onDragOver={handleDragOver}
+              onDragEnter={() => handleDragEnter(page.id)}
+              onDragLeave={handleDragLeave}
               onDrop={(e) => handleDrop(e, page.id)}
             >
-              <Stack align="center" gap={4}>
+              <div className="page-container w-[90%] h-[90%]">
-                {showPageSelect && (
+                <img
-                  <Checkbox
+                  src={page.thumbnail}
-                    checked={selectedPages.includes(page.id)}
+                  alt={`Page ${page.pageNumber}`}
-                    onChange={() => togglePage(page.id)}
+                  style={{
-                    size="sm"
+                    width: '100%',
-                  />
+                    height: '100%',
-                )}
+                    objectFit: 'contain',
+                    borderRadius: 4,
+                    transform: `rotate(${page.rotation}deg)`,
+                    transition: 'transform 0.3s ease-in-out'
+                  }}
+                />
 
-                <Box w={120} h={160} pos="relative">
+                {/* Page number overlay - shows on hover */}
-                  <img
+                <Text
-                    src={page.thumbnail}
+                  className="page-number"
-                    alt={`Page ${page.pageNumber}`}
+                  size="sm"
-                    style={{
+                  fw={500}
-                      width: '100%',
+                  c="white"
-                      height: '100%',
+                  style={{
-                      objectFit: 'contain',
+                    position: 'absolute',
-                      borderRadius: 4,
+                    top: 5,
-                      transform: `rotate(${page.rotation}deg)`
+                    left: 5,
-                    }}
+                    background: 'rgba(162, 201, 255, 0.8)',
-                  />
+                    padding: '6px 8px',
-                  
+                    borderRadius: 8,
-                  <Text
+                    zIndex: 2,
-                    size="xs"
+                    opacity: 0,
-                    fw={500}
+                    transition: 'opacity 0.2s ease-in-out'
-                    c="white"
+                  }}
-                    style={{
+                >
-                      position: 'absolute',
+                  {page.pageNumber}
-                      top: 4,
-                      left: 4,
-                      background: 'rgba(0,0,0,0.7)',
-                      padding: '2px 6px',
-                      borderRadius: 4
-                    }}
-                  >
-                    {page.pageNumber}
-                  </Text>
-                  
-                  <DragIndicatorIcon
-                    style={{
-                      position: 'absolute',
-                      bottom: 4,
-                      right: 4,
-                      color: 'rgba(0,0,0,0.5)',
-                      fontSize: 16
-                    }}
-                  />
-                </Box>
-                
-                <Text size="xs" c="dimmed">
-                  Page {page.pageNumber}
                 </Text>
-              </Stack>
+
-            </Box>
+                {/* Hover controls */}
+                <div
+                  className="page-hover-controls"
+                  style={{
+                    position: 'absolute',
+                    bottom: 8,
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                    background: 'rgba(0, 0, 0, 0.8)',
+                    padding: '6px 12px',
+                    borderRadius: 20,
+                    opacity: 0,
+                    transition: 'opacity 0.2s ease-in-out',
+                    zIndex: 3,
+                    display: 'flex',
+                    gap: '8px',
+                    alignItems: 'center',
+                    whiteSpace: 'nowrap'
+                  }}
+                >
+                  <Tooltip label="Rotate Left">
+                    <ActionIcon
+                      size="md"
+                      variant="subtle"
+                      c="white"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        const command = new RotatePagesCommand(
+                          pdfDocument,
+                          setPdfDocument,
+                          [page.id],
+                          -90
+                        );
+                        executeCommand(command);
+                        setStatus(`Rotated page ${page.pageNumber} left`);
+                      }}
+                    >
+                      <RotateLeftIcon style={{ fontSize: 20 }} />
+                    </ActionIcon>
+                  </Tooltip>
+
+                  <Tooltip label="Rotate Right">
+                    <ActionIcon
+                      size="md"
+                      variant="subtle"
+                      c="white"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        const command = new RotatePagesCommand(
+                          pdfDocument,
+                          setPdfDocument,
+                          [page.id],
+                          90
+                        );
+                        executeCommand(command);
+                        setStatus(`Rotated page ${page.pageNumber} right`);
+                      }}
+                    >
+                      <RotateRightIcon style={{ fontSize: 20 }} />
+                    </ActionIcon>
+                  </Tooltip>
+
+                  <Tooltip label="Delete Page">
+                    <ActionIcon
+                      size="md"
+                      variant="subtle"
+                      c="red"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        const command = new DeletePagesCommand(
+                          pdfDocument,
+                          setPdfDocument,
+                          [page.id]
+                        );
+                        executeCommand(command);
+                        setStatus(`Deleted page ${page.pageNumber}`);
+                      }}
+                    >
+                      <DeleteIcon style={{ fontSize: 20 }} />
+                    </ActionIcon>
+                  </Tooltip>
+
+                  <Tooltip label="Split Here">
+                    <ActionIcon
+                      size="md"
+                      variant="subtle"
+                      c="white"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        const command = new ToggleSplitCommand(
+                          pdfDocument,
+                          setPdfDocument,
+                          [page.id]
+                        );
+                        executeCommand(command);
+                        setStatus(`Split marker toggled for page ${page.pageNumber}`);
+                      }}
+                    >
+                      <ContentCutIcon style={{ fontSize: 20 }} />
+                    </ActionIcon>
+                  </Tooltip>
+
+                  <Tooltip label="Select Page">
+                    <Checkbox
+                      size="md"
+                      checked={selectedPages.includes(page.id)}
+                      onChange={() => togglePage(page.id)}
+                      styles={{
+                        input: { backgroundColor: 'white' }
+                      }}
+                    />
+                  </Tooltip>
+                </div>
+
+                <DragIndicatorIcon
+                  style={{
+                    position: 'absolute',
+                    bottom: 4,
+                    right: 4,
+                    color: 'rgba(0,0,0,0.3)',
+                    fontSize: 16,
+                    zIndex: 1
+                  }}
+                />
+              </div>
+            </div>
+            </React.Fragment>
           ))}
-        </SimpleGrid>
           
-        <Group justify="space-between" mt="md">
+          {/* Landing zone at the end */}
-          <Button 
+          <div
-            color="red" 
+            data-drop-zone="end"
-            variant="light" 
+            style={{
-            onClick={() => {
+              width: '15rem',
-              setPdfDocument(null);
+              height: '15rem',
-              setFile && setFile(null);
+              border: '2px dashed #9ca3af',
+              borderRadius: '8px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              flexShrink: 0,
+              backgroundColor: dropTarget === 'end' ? '#ecfdf5' : 'transparent',
+              borderColor: dropTarget === 'end' ? '#10b981' : '#9ca3af',
+              transition: 'all 0.2s ease-in-out'
             }}
+            onDragOver={handleDragOver}
+            onDragEnter={handleEndZoneDragEnter}
+            onDragLeave={handleDragLeave}
+            onDrop={(e) => handleDrop(e, 'end')}
           >
-            Close PDF
+            <Text c="dimmed" size="sm" ta="center">
-          </Button>
+              Drop here to<br />move to end
+            </Text>
+          </div>
+        </div>
 
-          <Group>
+          <Group justify="space-between" mt="md">
             <Button
-              leftSection={<DownloadIcon />}
+              color="red"
-              disabled={selectedPages.length === 0 || exportLoading}
+              variant="light"
-              loading={exportLoading}
+              onClick={() => {
-              onClick={() => showExportPreview(true)}
+                setPdfDocument(null);
+                setFile && setFile(null);
+              }}
             >
-              Download Selected
+              Close PDF
-            </Button>
-            <Button
-              leftSection={<DownloadIcon />}
-              color="green"
-              disabled={exportLoading}
-              loading={exportLoading}
-              onClick={() => showExportPreview(false)}
-            >
-              Download All
             </Button>
+
+            <Group>
+              <Button
+                leftSection={<DownloadIcon />}
+                disabled={selectedPages.length === 0 || exportLoading}
+                loading={exportLoading}
+                onClick={() => showExportPreview(true)}
+              >
+                Download Selected
+              </Button>
+              <Button
+                leftSection={<DownloadIcon />}
+                color="green"
+                disabled={exportLoading}
+                loading={exportLoading}
+                onClick={() => showExportPreview(false)}
+              >
+                Download All
+              </Button>
+            </Group>
           </Group>
-        </Group>
+        </Box>
 
         <Modal
           opened={showExportModal}
@@ -584,19 +835,18 @@ const PageEditor: React.FC<PageEditorProps> = ({
           onChange={(file) => file && handleFileUpload(file)}
           style={{ display: 'none' }}
         />
-      </Paper>
 
-      {status && (
+        {status && (
-        <Notification 
+          <Notification
-          color="blue" 
+            color="blue"
-          mt="md" 
+            mt="md"
-          onClose={() => setStatus(null)}
+            onClose={() => setStatus(null)}
-          style={{ position: 'fixed', bottom: 20, right: 20, zIndex: 1000 }}
+            style={{ position: 'fixed', bottom: 20, right: 20, zIndex: 1000 }}
-        >
+          >
-          {status}
+            {status}
-        </Notification>
+          </Notification>
-      )}
+        )}
-    </Container>
+      </Box>
   );
 };
 

frontend/src/index.tsx

@@ -1,4 +1,5 @@
 import '@mantine/core/styles.css';
+import './index.css'; // Import Tailwind CSS
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { ColorSchemeScript, MantineProvider, mantineHtmlProps } from '@mantine/core';