diff --git a/frontend/eslint.config.mjs b/frontend/eslint.config.mjs index c4c826183..89928251b 100644 --- a/frontend/eslint.config.mjs +++ b/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', { diff --git a/frontend/src/core/components/shared/LocalIcon.tsx b/frontend/src/core/components/shared/LocalIcon.tsx index 25f85688c..a9b7198fc 100644 --- a/frontend/src/core/components/shared/LocalIcon.tsx +++ b/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 = ({ icon, ...props }) => { +export const LocalIcon: React.FC = ({ 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 = ({ 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 ; + return ; }; export default LocalIcon; diff --git a/frontend/src/core/components/tools/ToolPanel.css b/frontend/src/core/components/tools/ToolPanel.css index b8b50ae3d..0e6861abd 100644 --- a/frontend/src/core/components/tools/ToolPanel.css +++ b/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%; diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index c8e9081c1..c52fb3753 100644 --- a/frontend/src/index.tsx +++ b/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';