Merge branch 'V2' into add_eslint_plugins_20250928

2025-11-16 01:21:16 +01:00 · 2025-10-02 16:37:29 +02:00 · 2025-10-02 16:37:29 +02:00 · 1b8f6d224e
commit 1b8f6d224e
parent 4332a6220c 247f82b5a7
15 changed files with 189 additions and 137 deletions
--- a/frontend/src/components/fileEditor/FileEditorThumbnail.tsx
+++ b/frontend/src/components/fileEditor/FileEditorThumbnail.tsx
@ -324,7 +324,7 @@ const FileEditorThumbnail = ({
        marginTop: '0.5rem',
        marginBottom: '0.5rem',
      }}>
-        <Text size="lg" fw={700} className={styles.title} lineClamp={2}>
+        <Text  size="lg" fw={700} className={`${styles.title}  ph-no-capture `}  lineClamp={2}>
          {file.name}
        </Text>
        <Text
@ -350,6 +350,7 @@ const FileEditorThumbnail = ({
        <div className={styles.previewPaper}>
          {file.thumbnailUrl && (
            <img
+              className="ph-no-capture"
              src={file.thumbnailUrl}
              alt={file.name}
              draggable={false}
--- a/frontend/src/components/fileManager/FileInfoCard.tsx
+++ b/frontend/src/components/fileManager/FileInfoCard.tsx
@ -26,7 +26,7 @@ const FileInfoCard: React.FC<FileInfoCardProps> = ({
      <ScrollArea style={{ flex: 1 }} p="md">
        <Stack gap="sm">
          <Group justify="space-between" py="xs">
-            <Text size="sm" c="dimmed">{t('fileManager.fileName', 'Name')}</Text>
+            <Text className='ph-no-capture' size="sm" c="dimmed">{t('fileManager.fileName', 'Name')}</Text>
            <Text size="sm" fw={500} style={{ maxWidth: '60%', textAlign: 'right' }} truncate>
              {currentFile ? currentFile.name : ''}
            </Text>
--- a/frontend/src/components/fileManager/FileListItem.tsx
+++ b/frontend/src/components/fileManager/FileListItem.tsx
@ -93,7 +93,7 @@ const FileListItem: React.FC<FileListItemProps> = ({

          <Box style={{ flex: 1, minWidth: 0 }}>
            <Group gap="xs" align="center">
-              <Text size="sm" fw={500} truncate style={{ flex: 1 }}>{file.name}</Text>
+              <Text size="sm" fw={500} className='ph-no-capture' truncate style={{ flex: 1 }}>{file.name}</Text>
              <Badge size="xs" variant="light" color={"blue"}>
                v{currentVersion}
              </Badge>
--- a/frontend/src/components/pageEditor/FileThumbnail.tsx
+++ b/frontend/src/components/pageEditor/FileThumbnail.tsx
@ -317,6 +317,7 @@ const FileThumbnail = ({
        >
          {file.thumbnail && (
            <img
+              className="ph-no-capture"
              src={file.thumbnail}
              alt={file.name}
              draggable={false}
--- a/frontend/src/components/pageEditor/PageThumbnail.tsx
+++ b/frontend/src/components/pageEditor/PageThumbnail.tsx
@ -371,6 +371,7 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
            </div>
          ) : thumbnailUrl ? (
            <img
+              className="ph-no-capture"
              src={thumbnailUrl}
              alt={`Page ${page.pageNumber}`}
              draggable={false}
--- a/frontend/src/components/shared/ToolIcon.tsx
+++ b/frontend/src/components/shared/ToolIcon.tsx
@ -0,0 +1,34 @@
+import React from "react";
+
+interface ToolIconProps {
+  icon: React.ReactNode;
+  opacity?: number;
+  color?: string;
+  marginRight?: string;
+}
+
+/**
+ * Shared icon component for consistent tool icon styling across the application.
+ * Uses the same visual pattern as ToolButton: scaled to 0.8, centered transform, consistent spacing.
+ */
+export const ToolIcon: React.FC<ToolIconProps> = ({
+  icon,
+  opacity = 1,
+  color = "var(--tools-text-and-icon-color)",
+  marginRight = "0.5rem"
+}) => {
+  return (
+    <div
+      className="tool-button-icon"
+      style={{
+        color,
+        marginRight,
+        transform: "scale(0.8)",
+        transformOrigin: "center",
+        opacity
+      }}
+    >
+      {icon}
+    </div>
+  );
+};
--- a/frontend/src/components/shared/filePreview/DocumentThumbnail.tsx
+++ b/frontend/src/components/shared/filePreview/DocumentThumbnail.tsx
@ -36,6 +36,7 @@ const DocumentThumbnail: React.FC<DocumentThumbnailProps> = ({
    return (
      <Box style={containerStyle} onClick={onClick}>
        <Image
+          className='ph-no-capture'
          src={thumbnail}
          alt={`Preview of ${file.name}`}
          fit="contain"
@ -50,6 +51,7 @@ const DocumentThumbnail: React.FC<DocumentThumbnailProps> = ({
    <Box style={containerStyle} onClick={onClick}>
      <Center style={{ width: '100%', height: '100%', backgroundColor: 'var(--mantine-color-gray-1)', borderRadius: '0.25rem' }}>
        <PictureAsPdfIcon
+          className='ph-no-capture'
          style={{
            fontSize: '2rem',
            color: 'var(--mantine-color-gray-6)'
--- a/frontend/src/components/tools/addPageNumbers/PageNumberPreview.tsx
+++ b/frontend/src/components/tools/addPageNumbers/PageNumberPreview.tsx
@ -200,7 +200,7 @@ export default function PageNumberPreview({ parameters, onParameterChange, file,
          <img
            src={pageThumbnail}
            alt="page preview"
-            className={styles.pageThumbnail}
+            className={`${styles.pageThumbnail} ph-no-capture`}
            draggable={false}
          />
        )}
--- a/frontend/src/components/tools/automate/AutomationEntry.tsx
+++ b/frontend/src/components/tools/automate/AutomationEntry.tsx
@ -1,11 +1,12 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Group, Text, ActionIcon, Menu, Box } from '@mantine/core';
+import { Group, Text, ActionIcon, Menu, Button, Box } from '@mantine/core';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/Delete';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import { Tooltip } from '../../shared/Tooltip';
+import { ToolIcon } from '../../shared/ToolIcon';
 import { ToolRegistryEntry } from '../../../data/toolsTaxonomy';

 interface AutomationEntryProps {
@ -50,8 +51,7 @@ export default function AutomationEntry({
  const [isHovered, setIsHovered] = useState(false);
  const [isMenuOpen, setIsMenuOpen] = useState(false);

-  // Keep item in hovered state if menu is open
-  const shouldShowHovered = isHovered || isMenuOpen;
+  const shouldShowMenu = isHovered || isMenuOpen;

  // Helper function to resolve tool display names
  const getToolDisplayName = (operation: string): string => {
@ -108,134 +108,135 @@ export default function AutomationEntry({
    );
  };

-  const renderContent = () => {
-    if (title) {
-      // Custom automation with title
-      return (
-        <Group gap="md" align="center" justify="flex-start" style={{ width: '100%' }}>
-          {BadgeIcon && (
-            <BadgeIcon
-              style={{
-                color: keepIconColor ? 'var(--mantine-primary-color-filled)' : 'var(--mantine-color-text)'
-              }}
-            />
-          )}
-          <Text size="xs" style={{ flex: 1, textAlign: 'left', color: 'var(--mantine-color-text)' }}>
+  const buttonContent = (
+    <>
+      {BadgeIcon && (
+        <ToolIcon
+          icon={<BadgeIcon />}
+          {...(keepIconColor && { color: 'var(--mantine-primary-color-filled)' })}
+        />
+      )}
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', flex: 1, overflow: 'visible' }}>
+        {title ? (
+          // Custom automation with title
+          <Text size="sm" style={{ textAlign: 'left' }}>
            {title}
          </Text>
-        </Group>
-      );
-    } else {
-      // Suggested automation showing tool chain
-      return (
-        <Group gap="md" align="center" justify="flex-start" style={{ width: '100%' }}>
-          {BadgeIcon && (
-            <BadgeIcon
-              style={{
-                color: keepIconColor ? 'var(--mantine-primary-color-filled)' : 'var(--mantine-color-text)'
-              }}
-            />
-          )}
+        ) : (
+          // Suggested automation showing tool chain
          <Group gap="xs" justify="flex-start" style={{ flex: 1 }}>
            {operations.map((op, index) => (
              <React.Fragment key={`${op}-${index}`}>
-                <Text size="xs" style={{ color: 'var(--mantine-color-text)' }}>
+                <Text size="sm">
                  {getToolDisplayName(op)}
                </Text>
-
                {index < operations.length - 1 && (
-                  <Text size="xs" c="dimmed" style={{ color: 'var(--mantine-color-text)' }}>
+                  <Text size="sm" c="dimmed">
                    →
                  </Text>
                )}
              </React.Fragment>
            ))}
          </Group>
-        </Group>
-      );
-    }
-  };
+        )}
+      </div>
+    </>
+  );

-  const boxContent = (
+  const wrapperContent = (
    <Box
-      style={{
-        backgroundColor: shouldShowHovered ? 'var(--mantine-color-gray-1)' : 'transparent',
-        borderRadius: 'var(--mantine-radius-md)',
-        transition: 'background-color 0.15s ease',
-        padding: '0.75rem 1rem',
-        cursor: 'pointer'
-      }}
-      onClick={onClick}
+      style={{ position: 'relative', width: '100%' }}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
-      <Group gap="md" align="center" justify="space-between" style={{ width: '100%' }}>
-        <div style={{ flex: 1, display: 'flex', justifyContent: 'flex-start' }}>
-          {renderContent()}
-        </div>
+      <Button
+        variant="subtle"
+        onClick={onClick}
+        size="sm"
+        radius="md"
+        fullWidth
+        justify="flex-start"
+        className="tool-button"
+        styles={{
+          root: {
+            borderRadius: 0,
+            color: "var(--tools-text-and-icon-color)",
+            overflow: 'visible',
+            backgroundColor: shouldShowMenu ? 'var(--automation-entry-hover-bg)' : undefined,
+            '&:hover': {
+              backgroundColor: 'var(--automation-entry-hover-bg)'
+            }
+          },
+          label: { overflow: 'visible' }
+        }}
+      >
+        {buttonContent}
+      </Button>
+      {showMenu && (
+        <Menu
+          position="bottom-end"
+          withinPortal
+          onOpen={() => setIsMenuOpen(true)}
+          onClose={() => setIsMenuOpen(false)}
+        >
+          <Menu.Target>
+            <ActionIcon
+              variant="subtle"
+              c="dimmed"
+              size="md"
+              onClick={(e) => e.stopPropagation()}
+              style={{
+                position: 'absolute',
+                right: '0.5rem',
+                top: '50%',
+                transform: 'translateY(-50%)',
+                zIndex: 1,
+                opacity: shouldShowMenu ? 1 : 0,
+                transition: 'opacity 0.2s ease',
+                pointerEvents: shouldShowMenu ? 'auto' : 'none'
+              }}
+            >
+              <MoreVertIcon style={{ fontSize: 20 }} />
+            </ActionIcon>
+          </Menu.Target>

-        {showMenu && (
-          <Menu
-            position="bottom-end"
-            withinPortal
-            onOpen={() => setIsMenuOpen(true)}
-            onClose={() => setIsMenuOpen(false)}
-          >
-            <Menu.Target>
-              <ActionIcon
-                variant="subtle"
-                c="dimmed"
-                size="md"
-                onClick={(e) => e.stopPropagation()}
-                style={{
-                  opacity: shouldShowHovered ? 1 : 0,
-                  transform: shouldShowHovered ? 'scale(1)' : 'scale(0.8)',
-                  transition: 'opacity 0.3s ease, transform 0.3s ease',
-                  pointerEvents: shouldShowHovered ? 'auto' : 'none'
+          <Menu.Dropdown>
+            {onCopy && (
+              <Menu.Item
+                leftSection={<ContentCopyIcon style={{ fontSize: 16 }} />}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onCopy();
                }}
              >
-                <MoreVertIcon style={{ fontSize: 20 }} />
-              </ActionIcon>
-            </Menu.Target>
-
-            <Menu.Dropdown>
-              {onCopy && (
-                <Menu.Item
-                  leftSection={<ContentCopyIcon style={{ fontSize: 16 }} />}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onCopy();
-                  }}
-                >
-                  {t('automate.copyToSaved', 'Copy to Saved')}
-                </Menu.Item>
-              )}
-              {onEdit && (
-                <Menu.Item
-                  leftSection={<EditIcon style={{ fontSize: 16 }} />}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onEdit();
-                  }}
-                >
-                  {t('edit', 'Edit')}
-                </Menu.Item>
-              )}
-              {onDelete && (
-                <Menu.Item
-                  leftSection={<DeleteIcon style={{ fontSize: 16 }} />}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onDelete();
-                  }}
-                >
-                  {t('delete', 'Delete')}
-                </Menu.Item>
-              )}
-            </Menu.Dropdown>
-          </Menu>
-        )}
-      </Group>
+                {t('automate.copyToSaved', 'Copy to Saved')}
+              </Menu.Item>
+            )}
+            {onEdit && (
+              <Menu.Item
+                leftSection={<EditIcon style={{ fontSize: 16 }} />}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onEdit();
+                }}
+              >
+                {t('edit', 'Edit')}
+              </Menu.Item>
+            )}
+            {onDelete && (
+              <Menu.Item
+                leftSection={<DeleteIcon style={{ fontSize: 16 }} />}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onDelete();
+                }}
+              >
+                {t('delete', 'Delete')}
+              </Menu.Item>
+            )}
+          </Menu.Dropdown>
+        </Menu>
+      )}
    </Box>
  );

@ -249,9 +250,9 @@ export default function AutomationEntry({
      arrow={true}
      delay={500}
    >
-      {boxContent}
+      {wrapperContent}
    </Tooltip>
  ) : (
-    boxContent
+    wrapperContent
  );
 }
--- a/frontend/src/components/tools/shared/ResultsPreview.tsx
+++ b/frontend/src/components/tools/shared/ResultsPreview.tsx
@ -62,6 +62,7 @@ const ResultsPreview = ({
      {/* File name at the top */}
      <Box mb="sm" style={{ minHeight: '3rem', display: 'flex', alignItems: 'flex-start' }}>
        <Text
+          className='ph-no-capture'
          size="sm"
          fw={500}
          style={{
--- a/frontend/src/components/tools/shared/SuggestedToolsSection.tsx
+++ b/frontend/src/components/tools/shared/SuggestedToolsSection.tsx
@ -2,6 +2,7 @@ import React from 'react';
 import { Stack, Text, Divider, Card, Group, Anchor } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { useSuggestedTools } from '../../../hooks/useSuggestedTools';
+import { ToolIcon } from '../../shared/ToolIcon';

 export function SuggestedToolsSection(): React.ReactElement {
  const { t } = useTranslation();
@ -31,7 +32,7 @@ export function SuggestedToolsSection(): React.ReactElement {
                style={{ cursor: 'pointer' }}
              >
                <Group gap="xs">
-                  <IconComponent fontSize="small" />
+                  <ToolIcon icon={<IconComponent />} />
                  <Text size="sm" fw={500}>
                    {tool.title}
                  </Text>
--- a/frontend/src/components/tools/toolPicker/ToolButton.tsx
+++ b/frontend/src/components/tools/toolPicker/ToolButton.tsx
@ -2,6 +2,7 @@ import React from "react";
 import { Button } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { Tooltip } from "../../shared/Tooltip";
+import { ToolIcon } from "../../shared/ToolIcon";
 import { ToolRegistryEntry } from "../../../data/toolsTaxonomy";
 import { useToolNavigation } from "../../../hooks/useToolNavigation";
 import { handleUnlessSpecialClick } from "../../../utils/clickHandlers";
@ -57,7 +58,10 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect,

  const buttonContent = (
    <>
-      <div className="tool-button-icon" style={{ color: "var(--tools-text-and-icon-color)", marginRight: "0.5rem", transform: "scale(0.8)", transformOrigin: "center", opacity: isUnavailable ? 0.25 : 1 }}>{tool.icon}</div>
+      <ToolIcon
+        icon={tool.icon}
+        opacity={isUnavailable ? 0.25 : 1}
+      />
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', flex: 1, overflow: 'visible' }}>
        <FitText
          text={tool.name}
--- a/frontend/src/components/viewer/LocalEmbedPDF.tsx
+++ b/frontend/src/components/viewer/LocalEmbedPDF.tsx
@ -182,14 +182,17 @@ export function LocalEmbedPDF({ file, url, enableAnnotations = false, onSignatur

  // Wrap your UI with the <EmbedPDF> provider
  return (
-    <div style={{
-      height: '100%',
-      width: '100%',
-      position: 'relative',
-      overflow: 'hidden',
-      flex: 1,
-      minHeight: 0,
-      minWidth: 0
+    <div
+      className='ph-no-capture'
+
+      style={{
+        height: '100%',
+        width: '100%',
+        position: 'relative',
+        overflow: 'hidden',
+        flex: 1,
+        minHeight: 0,
+        minWidth: 0,
    }}>
      <EmbedPDF
        engine={engine}
@ -310,7 +313,7 @@ export function LocalEmbedPDF({ file, url, enableAnnotations = false, onSignatur
                    <CustomSearchLayer pageIndex={pageIndex} scale={scale} />

                    {/* Selection layer for text interaction */}
-                    <SelectionLayer pageIndex={pageIndex} scale={scale} />
+                    <SelectionLayer  pageIndex={pageIndex} scale={scale} />
                    {/* Annotation layer for signatures (only when enabled) */}
                    {enableAnnotations && (
                      <AnnotationLayer
--- a/frontend/src/components/viewer/ThumbnailSidebar.tsx
+++ b/frontend/src/components/viewer/ThumbnailSidebar.tsx
@ -134,6 +134,7 @@ export function ThumbnailSidebar({ visible, onToggle: _onToggle }: ThumbnailSide
                    {/* Thumbnail Image */}
                    {thumbnails[pageIndex] && thumbnails[pageIndex] !== 'error' ? (
                      <img
+                        className='ph-no-capture'
                        src={thumbnails[pageIndex]}
                        alt={`Page ${pageIndex + 1} thumbnail`}
                        style={{
--- a/frontend/src/styles/theme.css
+++ b/frontend/src/styles/theme.css
@ -120,6 +120,7 @@
  --border-strong: #9ca3af;
  --hover-bg: #f9fafb;
  --active-bg: #f3f4f6;
+  --automation-entry-hover-bg: var(--color-gray-100);

  /* Icon colors for light mode */
  --icon-user-bg: #9CA3AF;
@ -317,6 +318,7 @@
  --border-strong: #4b5563;
  --hover-bg: #374151;
  --active-bg: #4b5563;
+  --automation-entry-hover-bg: var(--color-gray-200);

  /* Icon colors for dark mode */
  --icon-user-bg: #2A2F36;