Merge branch 'V2' of github.com:Stirling-Tools/Stirling-PDF into feature/V2/compareTool

frontend/eslint.config.mjs

@@ -27,6 +27,15 @@ export default defineConfig(
   tseslint.configs.recommended,
   {
     rules: {
+      'no-restricted-imports': [
+        'error',
+        {
+          patterns: [
+            ".*", // Disallow any relative imports (they should be '@app/x/y/z' or similar)
+            "src/*", // Disallow any absolute imports (they should be '@app/x/y/z' or similar)
+          ],
+        },
+      ],
       '@typescript-eslint/no-empty-object-type': [
         'error',
         {

frontend/src/core/components/shared/LocalIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { addCollection, Icon } from '@iconify/react';
-import iconSet from '../../../assets/material-symbols-icons.json';
+import iconSet from '../../../assets/material-symbols-icons.json'; // eslint-disable-line no-restricted-imports -- Outside app paths
 
 // Load icons synchronously at import time - guaranteed to be ready on first render
 let iconsLoaded = false;
@@ -29,7 +29,7 @@ interface LocalIconProps {
  * LocalIcon component that uses our locally bundled Material Symbols icons
  * instead of loading from CDN
  */
-export const LocalIcon: React.FC<LocalIconProps> = ({ icon, ...props }) => {
+export const LocalIcon: React.FC<LocalIconProps> = ({ icon, width, height, style, ...props }) => {
   // Convert our icon naming convention to the local collection format
   const iconName = icon.startsWith('material-symbols:')
     ? icon
@@ -45,8 +45,20 @@ export const LocalIcon: React.FC<LocalIconProps> = ({ icon, ...props }) => {
     }
   }
 
+  const iconStyle: React.CSSProperties = { ...style };
+
+  // Use width if provided, otherwise fall back to height
+  const size = width || height;
+  if (size && typeof size === 'string') {
+    // If it's a CSS unit string (like '1.5rem'), use it as fontSize
+    iconStyle.fontSize = size;
+  } else if (typeof size === 'number') {
+    // If it's a number, treat it as pixels
+    iconStyle.fontSize = `${size}px`;
+  }
+
   // Always render the icon - Iconify will use local if available, CDN if not
-  return <Icon icon={iconName} {...props} />;
+  return <Icon icon={iconName} style={iconStyle} {...props} />;
 };
 
 export default LocalIcon;

frontend/src/core/components/tools/ToolPanel.css

@@ -187,7 +187,6 @@
   border: 1px solid var(--fullscreen-border-subtle-65);
   box-shadow: 0 14px 32px var(--fullscreen-shadow-group);
   break-inside: avoid;
-  backdrop-filter: blur(10px);
 }
 
 .tool-panel__fullscreen-section-header {
@@ -230,7 +229,6 @@
   border: 1px solid var(--fullscreen-border-subtle-70);
   border-radius: 0.95rem;
   background: var(--fullscreen-bg-item);
-  backdrop-filter: blur(6px);
   cursor: pointer;
   transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
   width: 100%;

frontend/src/index.tsx

@@ -1,6 +1,6 @@
 import '@mantine/core/styles.css';
 import '@mantine/dates/styles.css';
-import '../vite-env.d.ts';
+import '../vite-env.d.ts'; // eslint-disable-line no-restricted-imports -- Outside app paths
 import '@app/styles/index.css'; // Import global styles
 import React from 'react';
 import ReactDOM from 'react-dom/client';