From f46465cd97f1c22b3b4ee8c7c943fbca1a2c57b8 Mon Sep 17 00:00:00 2001 From: ajaysi Date: Fri, 8 May 2026 12:07:24 +0530 Subject: [PATCH] fix(01-code-splitting): convert PodcastMaker, ProductMarketing, Research, Scheduler, SEO, shared MUI icons - Converted barrel imports to individual imports across 44 files - Covers CreateStep, ScriptEditor, RenderQueue, ProductMarketing, Scheduler, SEO, shared components --- .../components/PodcastMaker/CreateModal.tsx | 2 +- .../CreateStep/ConfigurationInfoModals.tsx | 6 ++++- .../CreateStep/PodcastConfiguration.tsx | 7 +++++- .../CreateStep/PodcastModeInfoModal.tsx | 3 ++- .../PodcastMaker/CreateStep/TopicUrlInput.tsx | 12 +++++++++- .../src/components/PodcastMaker/FactCard.tsx | 5 ++++- .../PodcastMaker/InlineAudioPlayer.tsx | 5 ++++- .../PodcastDashboard/EstimateCard.tsx | 2 +- .../PodcastDashboard/QuerySelection.tsx | 12 +++++++++- .../PodcastMaker/RecentEpisodesPreview.tsx | 4 +++- .../RenderQueue/GuidancePanel.tsx | 2 +- .../RenderQueue/VideoRegenerateModal.tsx | 2 +- .../ScriptEditor/AudioRegenerateModal.tsx | 3 ++- .../SceneEditor/SceneEditorMediaPanel.tsx | 2 +- .../ScriptEditor/ScriptEditor.tsx | 6 ++++- .../ScriptEditor/ScriptEditorLayout.tsx | 6 ++++- .../ScriptEditor/parts/BrollInfoPanel.tsx | 9 +++++++- .../parts/ScriptEditorApprovalPanel.tsx | 3 ++- .../parts/ScriptEditorAudioPanel.tsx | 2 +- .../parts/ScriptEditorDownloadPanel.tsx | 3 ++- .../parts/ScriptEditorInfoPanel.tsx | 4 +++- .../CampaignFlowIndicator.tsx | 3 ++- .../ProductMarketing/CampaignWizard.tsx | 16 ++++++-------- .../ProductInfoForm.tsx | 3 ++- .../ProductVariations.tsx | 3 ++- .../ProductPhotoshootStudio/StyleSelector.tsx | 5 ++++- .../components/PersonalizationIndicator.tsx | 3 ++- .../components/ResearchInputContainer.tsx | 4 +++- .../components/AIInsightsPanel.tsx | 2 +- .../SEODashboard/components/HealthScore.tsx | 3 ++- .../SEODashboard/components/MetricCard.tsx | 3 ++- .../SchedulerDashboard/SchedulerCharts.tsx | 3 ++- .../components/shared/AudioSettingsModal.tsx | 4 +++- .../shared/ComponentErrorBoundary.tsx | 2 +- .../shared/CopilotKitDegradedBanner.tsx | 3 ++- .../src/components/shared/DashboardHeader.tsx | 2 +- .../components/shared/ErrorBoundaryTest.tsx | 2 +- .../components/shared/GscSuggestionsPanel.tsx | 5 ++++- .../components/shared/PlatformAnalytics.tsx | 22 +++++++++---------- .../src/components/shared/ProtectedRoute.tsx | 11 +++++----- .../components/shared/RefreshQueuePanel.tsx | 4 +++- .../components/shared/TextToSpeechButton.tsx | 5 ++++- .../shared/TopPagesInsightsPanel.tsx | 6 ++++- .../components/PresetsCard.tsx | 2 +- 44 files changed, 149 insertions(+), 67 deletions(-) diff --git a/frontend/src/components/PodcastMaker/CreateModal.tsx b/frontend/src/components/PodcastMaker/CreateModal.tsx index c640ba9f..5c940201 100644 --- a/frontend/src/components/PodcastMaker/CreateModal.tsx +++ b/frontend/src/components/PodcastMaker/CreateModal.tsx @@ -1,6 +1,6 @@ import React, { useState, useEffect, useMemo, useCallback } from "react"; import { Stack, Paper, Box, Chip, Typography, Dialog, DialogTitle, DialogContent, DialogActions, CircularProgress } from "@mui/material"; -import { AutoAwesome as AutoAwesomeIcon } from "@mui/icons-material"; +import AutoAwesomeIcon from "@mui/icons-material/AutoAwesome"; import { CreateProjectPayload, Knobs, PodcastMode } from "./types"; import { useSubscription } from "../../contexts/SubscriptionContext"; import { podcastApi } from "../../services/podcastApi"; diff --git a/frontend/src/components/PodcastMaker/CreateStep/ConfigurationInfoModals.tsx b/frontend/src/components/PodcastMaker/CreateStep/ConfigurationInfoModals.tsx index 8c351254..e722e223 100644 --- a/frontend/src/components/PodcastMaker/CreateStep/ConfigurationInfoModals.tsx +++ b/frontend/src/components/PodcastMaker/CreateStep/ConfigurationInfoModals.tsx @@ -10,7 +10,11 @@ import { Divider, alpha, } from "@mui/material"; -import { Close as CloseIcon, Mic as MicIcon, Person as PersonIcon, AutoAwesome as AutoAwesomeIcon, Settings as SettingsIcon } from "@mui/icons-material"; +import CloseIcon from "@mui/icons-material/Close"; +import MicIcon from "@mui/icons-material/Mic"; +import PersonIcon from "@mui/icons-material/Person"; +import AutoAwesomeIcon from "@mui/icons-material/AutoAwesome"; +import SettingsIcon from "@mui/icons-material/Settings"; export const DurationInfoModal: React.FC<{ open: boolean; onClose: () => void }> = ({ open, onClose }) => { return ( diff --git a/frontend/src/components/PodcastMaker/CreateStep/PodcastConfiguration.tsx b/frontend/src/components/PodcastMaker/CreateStep/PodcastConfiguration.tsx index aeeec8a6..8314e415 100644 --- a/frontend/src/components/PodcastMaker/CreateStep/PodcastConfiguration.tsx +++ b/frontend/src/components/PodcastMaker/CreateStep/PodcastConfiguration.tsx @@ -1,6 +1,11 @@ import React, { useState } from "react"; import { Stack, Box, Typography, TextField, ToggleButton, ToggleButtonGroup, alpha, IconButton, Tooltip } from "@mui/material"; -import { Person as PersonIcon, Group as GroupIcon, Settings as SettingsIcon, HelpOutline as HelpOutlineIcon, Headphones as HeadphonesIcon, Videocam as VideocamIcon } from "@mui/icons-material"; +import PersonIcon from "@mui/icons-material/Person"; +import GroupIcon from "@mui/icons-material/Group"; +import SettingsIcon from "@mui/icons-material/Settings"; +import HelpOutlineIcon from "@mui/icons-material/HelpOutline"; +import HeadphonesIcon from "@mui/icons-material/Headphones"; +import VideocamIcon from "@mui/icons-material/Videocam"; import { PodcastMode } from "../types"; import { PodcastModeInfoModal } from "./PodcastModeInfoModal"; diff --git a/frontend/src/components/PodcastMaker/CreateStep/PodcastModeInfoModal.tsx b/frontend/src/components/PodcastMaker/CreateStep/PodcastModeInfoModal.tsx index d72ae96f..10513ee5 100644 --- a/frontend/src/components/PodcastMaker/CreateStep/PodcastModeInfoModal.tsx +++ b/frontend/src/components/PodcastMaker/CreateStep/PodcastModeInfoModal.tsx @@ -11,7 +11,8 @@ import { Divider, alpha, } from "@mui/material"; -import { Close as CloseIcon, HelpOutline as HelpOutlineIcon } from "@mui/icons-material"; +import CloseIcon from "@mui/icons-material/Close"; +import HelpOutlineIcon from "@mui/icons-material/HelpOutline"; export const PodcastModeInfoModal: React.FC<{ open: boolean; onClose: () => void }> = ({ open, onClose }) => { return ( diff --git a/frontend/src/components/PodcastMaker/CreateStep/TopicUrlInput.tsx b/frontend/src/components/PodcastMaker/CreateStep/TopicUrlInput.tsx index 6c9a5776..8e793001 100644 --- a/frontend/src/components/PodcastMaker/CreateStep/TopicUrlInput.tsx +++ b/frontend/src/components/PodcastMaker/CreateStep/TopicUrlInput.tsx @@ -1,6 +1,16 @@ import React, { useState, useCallback, useEffect, useRef } from "react"; import { Box, Typography, TextField, Tooltip, Button, CircularProgress, alpha, Stack, Chip, IconButton, Collapse } from "@mui/material"; -import { AutoAwesome as AutoAwesomeIcon, AttachMoney as AttachMoneyIcon, TrendingUp as TrendingUpIcon, Mic as MicIcon, Stop as StopIcon, Language as LanguageIcon, Newspaper as NewspaperIcon, ShowChart as ShowChartIcon, School as SchoolIcon, Public as PublicIcon, Lightbulb as LightbulbIcon } from "@mui/icons-material"; +import AutoAwesomeIcon from "@mui/icons-material/AutoAwesome"; +import AttachMoneyIcon from "@mui/icons-material/AttachMoney"; +import TrendingUpIcon from "@mui/icons-material/TrendingUp"; +import MicIcon from "@mui/icons-material/Mic"; +import StopIcon from "@mui/icons-material/Stop"; +import LanguageIcon from "@mui/icons-material/Language"; +import NewspaperIcon from "@mui/icons-material/Newspaper"; +import ShowChartIcon from "@mui/icons-material/ShowChart"; +import SchoolIcon from "@mui/icons-material/School"; +import PublicIcon from "@mui/icons-material/Public"; +import LightbulbIcon from "@mui/icons-material/Lightbulb"; import { Knobs } from "../types"; import { podcastApi } from "../../../services/podcastApi"; import { WebsitePreviewModal } from "./WebsitePreviewModal"; diff --git a/frontend/src/components/PodcastMaker/FactCard.tsx b/frontend/src/components/PodcastMaker/FactCard.tsx index 14b76b0e..9ecdb9f4 100644 --- a/frontend/src/components/PodcastMaker/FactCard.tsx +++ b/frontend/src/components/PodcastMaker/FactCard.tsx @@ -1,6 +1,9 @@ import React, { useMemo, useState } from "react"; import { Stack, Typography, Divider, Chip, Tooltip, IconButton, alpha, Box } from "@mui/material"; -import { OpenInNew as OpenInNewIcon, ContentCopy as ContentCopyIcon, ExpandMore as ExpandMoreIcon, ExpandLess as ExpandLessIcon } from "@mui/icons-material"; +import OpenInNewIcon from "@mui/icons-material/OpenInNew"; +import ContentCopyIcon from "@mui/icons-material/ContentCopy"; +import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; +import ExpandLessIcon from "@mui/icons-material/ExpandLess"; import { Fact } from "./types"; import { GlassyCard, glassyCardSx } from "./ui"; import { TextToSpeechButton } from "../shared/TextToSpeechButton"; diff --git a/frontend/src/components/PodcastMaker/InlineAudioPlayer.tsx b/frontend/src/components/PodcastMaker/InlineAudioPlayer.tsx index aa44f538..799d1515 100644 --- a/frontend/src/components/PodcastMaker/InlineAudioPlayer.tsx +++ b/frontend/src/components/PodcastMaker/InlineAudioPlayer.tsx @@ -1,6 +1,9 @@ import React, { useEffect, useState } from "react"; import { Paper, Stack, Typography, IconButton, Tooltip, alpha, Alert } from "@mui/material"; -import { VolumeUp as VolumeUpIcon, PlayCircle as PlayCircleIcon, PauseCircle as PauseCircleIcon, Download as DownloadIcon } from "@mui/icons-material"; +import VolumeUpIcon from "@mui/icons-material/VolumeUp"; +import PlayCircleIcon from "@mui/icons-material/PlayCircle"; +import PauseCircleIcon from "@mui/icons-material/PauseCircle"; +import DownloadIcon from "@mui/icons-material/Download"; import { aiApiClient } from "../../api/client"; interface InlineAudioPlayerProps { diff --git a/frontend/src/components/PodcastMaker/PodcastDashboard/EstimateCard.tsx b/frontend/src/components/PodcastMaker/PodcastDashboard/EstimateCard.tsx index 32857a89..e0f27d18 100644 --- a/frontend/src/components/PodcastMaker/PodcastDashboard/EstimateCard.tsx +++ b/frontend/src/components/PodcastMaker/PodcastDashboard/EstimateCard.tsx @@ -1,6 +1,6 @@ import React from "react"; import { Stack, Typography, Chip, Divider } from "@mui/material"; -import { Insights as InsightsIcon } from "@mui/icons-material"; +import InsightsIcon from "@mui/icons-material/Insights"; import { PodcastEstimate } from "../types"; import { GlassyCard, glassyCardSx } from "../ui"; diff --git a/frontend/src/components/PodcastMaker/PodcastDashboard/QuerySelection.tsx b/frontend/src/components/PodcastMaker/PodcastDashboard/QuerySelection.tsx index e70aec58..66ac5741 100644 --- a/frontend/src/components/PodcastMaker/PodcastDashboard/QuerySelection.tsx +++ b/frontend/src/components/PodcastMaker/PodcastDashboard/QuerySelection.tsx @@ -29,7 +29,17 @@ import { useMediaQuery, useTheme, } from "@mui/material"; -import { Search as SearchIcon, AutoAwesome as AutoAwesomeIcon, Refresh as RefreshIcon, Edit as EditIcon, Delete as DeleteIcon, CheckCircle as CheckCircleIcon, Help as HelpIcon, TrendingUp as TrendingUpIcon, Psychology as PsychologyIcon, FactCheck as FactCheckIcon, MenuBook as MenuBookIcon } from "@mui/icons-material"; +import SearchIcon from "@mui/icons-material/Search"; +import AutoAwesomeIcon from "@mui/icons-material/AutoAwesome"; +import RefreshIcon from "@mui/icons-material/Refresh"; +import EditIcon from "@mui/icons-material/Edit"; +import DeleteIcon from "@mui/icons-material/Delete"; +import CheckCircleIcon from "@mui/icons-material/CheckCircle"; +import HelpIcon from "@mui/icons-material/Help"; +import TrendingUpIcon from "@mui/icons-material/TrendingUp"; +import PsychologyIcon from "@mui/icons-material/Psychology"; +import FactCheckIcon from "@mui/icons-material/FactCheck"; +import MenuBookIcon from "@mui/icons-material/MenuBook"; import { ResearchProvider } from "../../../services/blogWriterApi"; import { Query } from "../types"; import { GlassyCard, glassyCardSx, PrimaryButton, SecondaryButton } from "../ui"; diff --git a/frontend/src/components/PodcastMaker/RecentEpisodesPreview.tsx b/frontend/src/components/PodcastMaker/RecentEpisodesPreview.tsx index 56a10a43..6b327bdd 100644 --- a/frontend/src/components/PodcastMaker/RecentEpisodesPreview.tsx +++ b/frontend/src/components/PodcastMaker/RecentEpisodesPreview.tsx @@ -1,6 +1,8 @@ import React from "react"; import { Stack, Box, Typography, Paper, Chip, alpha } from "@mui/material"; -import { LibraryMusic as LibraryMusicIcon, OpenInNew as OpenInNewIcon, VolumeUp as VolumeUpIcon } from "@mui/icons-material"; +import LibraryMusicIcon from "@mui/icons-material/LibraryMusic"; +import OpenInNewIcon from "@mui/icons-material/OpenInNew"; +import VolumeUpIcon from "@mui/icons-material/VolumeUp"; import { useNavigate } from "react-router-dom"; import { useContentAssets } from "../../hooks/useContentAssets"; import { GlassyCard, glassyCardSx, SecondaryButton } from "./ui"; diff --git a/frontend/src/components/PodcastMaker/RenderQueue/GuidancePanel.tsx b/frontend/src/components/PodcastMaker/RenderQueue/GuidancePanel.tsx index 80cab700..23bb80e0 100644 --- a/frontend/src/components/PodcastMaker/RenderQueue/GuidancePanel.tsx +++ b/frontend/src/components/PodcastMaker/RenderQueue/GuidancePanel.tsx @@ -1,6 +1,6 @@ import React from "react"; import { Box, Stack, Typography, Alert, Paper, alpha } from "@mui/material"; -import { PlayArrow as PlayArrowIcon } from "@mui/icons-material"; +import PlayArrowIcon from "@mui/icons-material/PlayArrow"; import { Script } from "../types"; interface GuidancePanelProps { diff --git a/frontend/src/components/PodcastMaker/RenderQueue/VideoRegenerateModal.tsx b/frontend/src/components/PodcastMaker/RenderQueue/VideoRegenerateModal.tsx index 63b66c52..25e0fc75 100644 --- a/frontend/src/components/PodcastMaker/RenderQueue/VideoRegenerateModal.tsx +++ b/frontend/src/components/PodcastMaker/RenderQueue/VideoRegenerateModal.tsx @@ -15,7 +15,7 @@ import { Radio, Tooltip, } from "@mui/material"; -import { Info as InfoIcon } from "@mui/icons-material"; +import InfoIcon from "@mui/icons-material/Info"; import { PrimaryButton, SecondaryButton } from "../ui"; import type { VideoGenerationSettings } from "../types"; diff --git a/frontend/src/components/PodcastMaker/ScriptEditor/AudioRegenerateModal.tsx b/frontend/src/components/PodcastMaker/ScriptEditor/AudioRegenerateModal.tsx index 1f66d076..e5161851 100644 --- a/frontend/src/components/PodcastMaker/ScriptEditor/AudioRegenerateModal.tsx +++ b/frontend/src/components/PodcastMaker/ScriptEditor/AudioRegenerateModal.tsx @@ -19,7 +19,8 @@ import { alpha, TextField, } from "@mui/material"; -import { HelpOutline as HelpOutlineIcon, Close as CloseIcon } from "@mui/icons-material"; +import HelpOutlineIcon from "@mui/icons-material/HelpOutline"; +import CloseIcon from "@mui/icons-material/Close"; import { PrimaryButton, SecondaryButton } from "../ui"; import { VoiceSelector } from "../../shared/VoiceSelector"; diff --git a/frontend/src/components/PodcastMaker/ScriptEditor/SceneEditor/SceneEditorMediaPanel.tsx b/frontend/src/components/PodcastMaker/ScriptEditor/SceneEditor/SceneEditorMediaPanel.tsx index d295ca48..041b4742 100644 --- a/frontend/src/components/PodcastMaker/ScriptEditor/SceneEditor/SceneEditorMediaPanel.tsx +++ b/frontend/src/components/PodcastMaker/ScriptEditor/SceneEditor/SceneEditorMediaPanel.tsx @@ -1,6 +1,6 @@ import React from "react"; import { Box, Divider, Stack, Typography, CircularProgress } from "@mui/material"; -import { VolumeUp as VolumeUpIcon } from "@mui/icons-material"; +import VolumeUpIcon from "@mui/icons-material/VolumeUp"; interface SceneEditorMediaPanelProps { hasAudio: boolean; diff --git a/frontend/src/components/PodcastMaker/ScriptEditor/ScriptEditor.tsx b/frontend/src/components/PodcastMaker/ScriptEditor/ScriptEditor.tsx index 00a5f5f8..b1af47dd 100644 --- a/frontend/src/components/PodcastMaker/ScriptEditor/ScriptEditor.tsx +++ b/frontend/src/components/PodcastMaker/ScriptEditor/ScriptEditor.tsx @@ -1,6 +1,10 @@ import React, { useEffect, useState, useCallback } from "react"; import { Box, Stack, Typography, Alert, Paper, LinearProgress, CircularProgress, alpha, IconButton, Divider, Chip, Tooltip } from "@mui/material"; - import { CheckCircle as CheckCircleIcon, PlayArrow as PlayArrowIcon, ArrowBack as ArrowBackIcon, Download as DownloadIcon, Refresh as RefreshIcon } from "@mui/icons-material"; +import CheckCircleIcon from "@mui/icons-material/CheckCircle"; +import PlayArrowIcon from "@mui/icons-material/PlayArrow"; +import ArrowBackIcon from "@mui/icons-material/ArrowBack"; +import DownloadIcon from "@mui/icons-material/Download"; +import RefreshIcon from "@mui/icons-material/Refresh"; import { Script, Knobs, Scene } from "../types"; import { BlogResearchResponse } from "../../../services/blogWriterApi"; import { podcastApi } from "../../../services/podcastApi"; diff --git a/frontend/src/components/PodcastMaker/ScriptEditor/ScriptEditorLayout.tsx b/frontend/src/components/PodcastMaker/ScriptEditor/ScriptEditorLayout.tsx index d7ab54a4..f2ceaee1 100644 --- a/frontend/src/components/PodcastMaker/ScriptEditor/ScriptEditorLayout.tsx +++ b/frontend/src/components/PodcastMaker/ScriptEditor/ScriptEditorLayout.tsx @@ -1,6 +1,10 @@ import React from "react"; import { Box, Stack, Typography, Tabs, Tab, Chip } from "@mui/material"; -import { EditNote as EditNoteIcon, ArrowBack as ArrowBackIcon, AudioFile as AudioFileIcon, Videocam as VideocamIcon, Mic as MicIcon } from "@mui/icons-material"; +import EditNoteIcon from "@mui/icons-material/EditNote"; +import ArrowBackIcon from "@mui/icons-material/ArrowBack"; +import AudioFileIcon from "@mui/icons-material/AudioFile"; +import VideocamIcon from "@mui/icons-material/Videocam"; +import MicIcon from "@mui/icons-material/Mic"; import { PodcastMode, Knobs } from "../types"; import { SecondaryButton } from "../ui"; import { useScriptEditor } from "./ScriptEditorContext"; diff --git a/frontend/src/components/PodcastMaker/ScriptEditor/parts/BrollInfoPanel.tsx b/frontend/src/components/PodcastMaker/ScriptEditor/parts/BrollInfoPanel.tsx index d058ef16..d0c74713 100644 --- a/frontend/src/components/PodcastMaker/ScriptEditor/parts/BrollInfoPanel.tsx +++ b/frontend/src/components/PodcastMaker/ScriptEditor/parts/BrollInfoPanel.tsx @@ -1,6 +1,13 @@ import React, { useState } from "react"; import { Stack, Box, Typography, Paper, Button, CircularProgress, Chip, IconButton, Tooltip, Accordion, AccordionSummary, AccordionDetails, Dialog, DialogContent, DialogTitle } from "@mui/material"; -import { BarChart as BarChartIcon, AutoAwesome as AutoAwesomeIcon, Refresh as RefreshIcon, DeleteOutline as DeleteIcon, Fullscreen as FullscreenIcon, ExpandMore as ExpandMoreIcon, Close as CloseIcon, ZoomOutMap as ZoomOutMapIcon } from "@mui/icons-material"; +import BarChartIcon from "@mui/icons-material/BarChart"; +import AutoAwesomeIcon from "@mui/icons-material/AutoAwesome"; +import RefreshIcon from "@mui/icons-material/Refresh"; +import DeleteIcon from "@mui/icons-material/DeleteOutline"; +import FullscreenIcon from "@mui/icons-material/Fullscreen"; +import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; +import CloseIcon from "@mui/icons-material/Close"; +import ZoomOutMapIcon from "@mui/icons-material/ZoomOutMap"; import { useScriptEditor } from "../ScriptEditorContext"; import { Script } from "../../types"; diff --git a/frontend/src/components/PodcastMaker/ScriptEditor/parts/ScriptEditorApprovalPanel.tsx b/frontend/src/components/PodcastMaker/ScriptEditor/parts/ScriptEditorApprovalPanel.tsx index a6c6a6b3..4f2fe567 100644 --- a/frontend/src/components/PodcastMaker/ScriptEditor/parts/ScriptEditorApprovalPanel.tsx +++ b/frontend/src/components/PodcastMaker/ScriptEditor/parts/ScriptEditorApprovalPanel.tsx @@ -1,6 +1,7 @@ import React from "react"; import { Stack, Box, Typography, Paper, LinearProgress } from "@mui/material"; -import { CheckCircle as CheckCircleIcon, PlayArrow as PlayArrowIcon } from "@mui/icons-material"; +import CheckCircleIcon from "@mui/icons-material/CheckCircle"; +import PlayArrowIcon from "@mui/icons-material/PlayArrow"; import { Script } from "../../types"; import { useScriptEditor } from "../ScriptEditorContext"; import { PrimaryButton } from "../../ui"; diff --git a/frontend/src/components/PodcastMaker/ScriptEditor/parts/ScriptEditorAudioPanel.tsx b/frontend/src/components/PodcastMaker/ScriptEditor/parts/ScriptEditorAudioPanel.tsx index c6a30f2b..48a29c7e 100644 --- a/frontend/src/components/PodcastMaker/ScriptEditor/parts/ScriptEditorAudioPanel.tsx +++ b/frontend/src/components/PodcastMaker/ScriptEditor/parts/ScriptEditorAudioPanel.tsx @@ -1,6 +1,6 @@ import React from "react"; import { Stack, Box, Typography, Paper, LinearProgress } from "@mui/material"; -import { AudioFile as AudioFileIcon } from "@mui/icons-material"; +import AudioFileIcon from "@mui/icons-material/AudioFile"; import { useScriptEditor } from "../ScriptEditorContext"; import { PrimaryButton } from "../../ui"; diff --git a/frontend/src/components/PodcastMaker/ScriptEditor/parts/ScriptEditorDownloadPanel.tsx b/frontend/src/components/PodcastMaker/ScriptEditor/parts/ScriptEditorDownloadPanel.tsx index 89708f8b..62f087a8 100644 --- a/frontend/src/components/PodcastMaker/ScriptEditor/parts/ScriptEditorDownloadPanel.tsx +++ b/frontend/src/components/PodcastMaker/ScriptEditor/parts/ScriptEditorDownloadPanel.tsx @@ -1,6 +1,7 @@ import React from "react"; import { Stack, Typography, Paper, Alert, alpha } from "@mui/material"; -import { Download as DownloadIcon, Refresh as RefreshIcon } from "@mui/icons-material"; +import DownloadIcon from "@mui/icons-material/Download"; +import RefreshIcon from "@mui/icons-material/Refresh"; import { useScriptEditor } from "../ScriptEditorContext"; import { PrimaryButton, SecondaryButton } from "../../ui"; import { InlineAudioPlayer } from "../../InlineAudioPlayer"; diff --git a/frontend/src/components/PodcastMaker/ScriptEditor/parts/ScriptEditorInfoPanel.tsx b/frontend/src/components/PodcastMaker/ScriptEditor/parts/ScriptEditorInfoPanel.tsx index 3703e8d3..ba1460b6 100644 --- a/frontend/src/components/PodcastMaker/ScriptEditor/parts/ScriptEditorInfoPanel.tsx +++ b/frontend/src/components/PodcastMaker/ScriptEditor/parts/ScriptEditorInfoPanel.tsx @@ -1,6 +1,8 @@ import React from "react"; import { Stack, Box, Typography, Alert, Paper } from "@mui/material"; -import { Info as InfoIcon, ExpandMore as ExpandMoreIcon, ExpandLess as ExpandLessIcon } from "@mui/icons-material"; +import InfoIcon from "@mui/icons-material/Info"; +import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; +import ExpandLessIcon from "@mui/icons-material/ExpandLess"; import { useScriptEditor } from "../ScriptEditorContext"; interface FormatItem { diff --git a/frontend/src/components/ProductMarketing/CampaignFlowIndicator.tsx b/frontend/src/components/ProductMarketing/CampaignFlowIndicator.tsx index a15d0ec7..823779a7 100644 --- a/frontend/src/components/ProductMarketing/CampaignFlowIndicator.tsx +++ b/frontend/src/components/ProductMarketing/CampaignFlowIndicator.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { Box, Stepper, Step, StepLabel, Typography, Chip } from '@mui/material'; -import { CheckCircle, RadioButtonUnchecked } from '@mui/icons-material'; +import CheckCircle from '@mui/icons-material/CheckCircle'; +import RadioButtonUnchecked from '@mui/icons-material/RadioButtonUnchecked'; interface CampaignFlowIndicatorProps { currentStep: 'blueprint' | 'proposals' | 'review' | 'generate' | 'complete'; diff --git a/frontend/src/components/ProductMarketing/CampaignWizard.tsx b/frontend/src/components/ProductMarketing/CampaignWizard.tsx index 0aaa72c0..9980a603 100644 --- a/frontend/src/components/ProductMarketing/CampaignWizard.tsx +++ b/frontend/src/components/ProductMarketing/CampaignWizard.tsx @@ -22,14 +22,12 @@ import { Tooltip, IconButton, } from '@mui/material'; -import { - ArrowBack, - ArrowForward, - CheckCircle, - Campaign, - AutoAwesome, - TrendingUp, -} from '@mui/icons-material'; +import ArrowBack from '@mui/icons-material/ArrowBack'; +import ArrowForward from '@mui/icons-material/ArrowForward'; +import CheckCircle from '@mui/icons-material/CheckCircle'; +import Campaign from '@mui/icons-material/Campaign'; +import AutoAwesome from '@mui/icons-material/AutoAwesome'; +import TrendingUp from '@mui/icons-material/TrendingUp'; import { motion } from 'framer-motion'; import { ImageStudioLayout } from '../ImageStudio/ImageStudioLayout'; import { GlassyCard } from '../ImageStudio/ui/GlassyCard'; @@ -39,7 +37,7 @@ import { PreflightValidationAlert } from './PreflightValidationAlert'; import { CampaignPreview } from './CampaignPreview'; import { useCampaignCreator } from '../../hooks/useCampaignCreator'; import { getSimpleTerm, getTooltipText, getTermExamples, getTermDescription } from '../../utils/terminology'; -import { Info as InfoIcon } from '@mui/icons-material'; +import InfoIcon from '@mui/icons-material/Info'; const MotionBox = motion.create(Box); diff --git a/frontend/src/components/ProductMarketing/ProductPhotoshootStudio/ProductInfoForm.tsx b/frontend/src/components/ProductMarketing/ProductPhotoshootStudio/ProductInfoForm.tsx index 1e03aa5d..e9e3d180 100644 --- a/frontend/src/components/ProductMarketing/ProductPhotoshootStudio/ProductInfoForm.tsx +++ b/frontend/src/components/ProductMarketing/ProductPhotoshootStudio/ProductInfoForm.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { Box, TextField, Stack, Typography, Tooltip, IconButton } from '@mui/material'; -import { Inventory2 as ProductIcon, Info as InfoIcon } from '@mui/icons-material'; +import ProductIcon from '@mui/icons-material/Inventory2'; +import InfoIcon from '@mui/icons-material/Info'; import { getTooltipText } from '../../../utils/terminology'; interface ProductInfoFormProps { diff --git a/frontend/src/components/ProductMarketing/ProductPhotoshootStudio/ProductVariations.tsx b/frontend/src/components/ProductMarketing/ProductPhotoshootStudio/ProductVariations.tsx index 26f573e7..fb890c0d 100644 --- a/frontend/src/components/ProductMarketing/ProductPhotoshootStudio/ProductVariations.tsx +++ b/frontend/src/components/ProductMarketing/ProductPhotoshootStudio/ProductVariations.tsx @@ -10,7 +10,8 @@ import { Typography, Stack, } from '@mui/material'; -import { AspectRatio, Colorize } from '@mui/icons-material'; +import AspectRatio from '@mui/icons-material/AspectRatio'; +import Colorize from '@mui/icons-material/Colorize'; interface ProductVariationsProps { productVariant: string; diff --git a/frontend/src/components/ProductMarketing/ProductPhotoshootStudio/StyleSelector.tsx b/frontend/src/components/ProductMarketing/ProductPhotoshootStudio/StyleSelector.tsx index 5fed6a5d..cf0e2106 100644 --- a/frontend/src/components/ProductMarketing/ProductPhotoshootStudio/StyleSelector.tsx +++ b/frontend/src/components/ProductMarketing/ProductPhotoshootStudio/StyleSelector.tsx @@ -10,7 +10,10 @@ import { Chip, Stack, } from '@mui/material'; -import { Palette, LightMode, Style as StyleIcon, PhotoCamera } from '@mui/icons-material'; +import Palette from '@mui/icons-material/Palette'; +import LightMode from '@mui/icons-material/LightMode'; +import StyleIcon from '@mui/icons-material/Style'; +import PhotoCamera from '@mui/icons-material/PhotoCamera'; interface StyleSelectorProps { environment: string; diff --git a/frontend/src/components/Research/steps/components/PersonalizationIndicator.tsx b/frontend/src/components/Research/steps/components/PersonalizationIndicator.tsx index cdde7f29..09f6d709 100644 --- a/frontend/src/components/Research/steps/components/PersonalizationIndicator.tsx +++ b/frontend/src/components/Research/steps/components/PersonalizationIndicator.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { Tooltip } from '@mui/material'; -import { InfoOutlined, AutoAwesome } from '@mui/icons-material'; +import InfoOutlined from '@mui/icons-material/InfoOutlined'; +import AutoAwesome from '@mui/icons-material/AutoAwesome'; interface PersonalizationIndicatorProps { type: 'placeholder' | 'keywords' | 'presets' | 'angles' | 'provider' | 'mode'; diff --git a/frontend/src/components/Research/steps/components/ResearchInputContainer.tsx b/frontend/src/components/Research/steps/components/ResearchInputContainer.tsx index ab731aa9..bc80cac0 100644 --- a/frontend/src/components/Research/steps/components/ResearchInputContainer.tsx +++ b/frontend/src/components/Research/steps/components/ResearchInputContainer.tsx @@ -1,6 +1,8 @@ import React, { useState, useEffect } from 'react'; import { Tooltip, CircularProgress, Select, MenuItem, FormControl, InputLabel } from '@mui/material'; -import { Psychology as BrainIcon, Settings as SettingsIcon, Info as InfoIcon } from '@mui/icons-material'; +import BrainIcon from '@mui/icons-material/Psychology'; +import SettingsIcon from '@mui/icons-material/Settings'; +import InfoIcon from '@mui/icons-material/Info'; import { ResearchPurpose, ContentOutput, ResearchDepthLevel } from '../../types/intent.types'; interface ResearchInputContainerProps { diff --git a/frontend/src/components/SEODashboard/components/AIInsightsPanel.tsx b/frontend/src/components/SEODashboard/components/AIInsightsPanel.tsx index 3210ef58..1bdd4114 100644 --- a/frontend/src/components/SEODashboard/components/AIInsightsPanel.tsx +++ b/frontend/src/components/SEODashboard/components/AIInsightsPanel.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Box, Typography, Button, Avatar } from '@mui/material'; -import { CheckCircle as CheckCircleIcon } from '@mui/icons-material'; +import CheckCircleIcon from '@mui/icons-material/CheckCircle'; import { AIInsightsPanel as StyledAIInsightsPanel } from '../../shared/styled'; import { AIInsight } from '../../../api/seoDashboard'; diff --git a/frontend/src/components/SEODashboard/components/HealthScore.tsx b/frontend/src/components/SEODashboard/components/HealthScore.tsx index 28e928e4..bc724179 100644 --- a/frontend/src/components/SEODashboard/components/HealthScore.tsx +++ b/frontend/src/components/SEODashboard/components/HealthScore.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { Box, Typography, Chip, LinearProgress } from '@mui/material'; -import { TrendingUp as TrendingUpIcon, TrendingDown as TrendingDownIcon } from '@mui/icons-material'; +import TrendingUpIcon from '@mui/icons-material/TrendingUp'; +import TrendingDownIcon from '@mui/icons-material/TrendingDown'; import { EnhancedGlassCard } from '../../shared/styled'; import { SEOHealthScore } from '../../../api/seoDashboard'; diff --git a/frontend/src/components/SEODashboard/components/MetricCard.tsx b/frontend/src/components/SEODashboard/components/MetricCard.tsx index a52898a7..6aff4fd4 100644 --- a/frontend/src/components/SEODashboard/components/MetricCard.tsx +++ b/frontend/src/components/SEODashboard/components/MetricCard.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { Box, Typography } from '@mui/material'; -import { TrendingUp as TrendingUpIcon, TrendingDown as TrendingDownIcon } from '@mui/icons-material'; +import TrendingUpIcon from '@mui/icons-material/TrendingUp'; +import TrendingDownIcon from '@mui/icons-material/TrendingDown'; import { GlassCard } from '../../shared/styled'; import { SEOMetric } from '../../../api/seoDashboard'; diff --git a/frontend/src/components/SchedulerDashboard/SchedulerCharts.tsx b/frontend/src/components/SchedulerDashboard/SchedulerCharts.tsx index 6b515baf..c051fd84 100644 --- a/frontend/src/components/SchedulerDashboard/SchedulerCharts.tsx +++ b/frontend/src/components/SchedulerDashboard/SchedulerCharts.tsx @@ -17,7 +17,8 @@ import { ResponsiveContainer } from 'recharts'; import { Box, Paper, CircularProgress, Modal, IconButton } from '@mui/material'; -import { Close as CloseIcon, OpenInFull as MaximizeIcon } from '@mui/icons-material'; +import CloseIcon from '@mui/icons-material/Close'; +import MaximizeIcon from '@mui/icons-material/OpenInFull'; import { TerminalTypography, TerminalPaper, terminalColors } from './terminalTheme'; import { getSchedulerEventHistory, SchedulerEvent } from '../../api/schedulerDashboard'; diff --git a/frontend/src/components/shared/AudioSettingsModal.tsx b/frontend/src/components/shared/AudioSettingsModal.tsx index fd9b3b0f..2672000e 100644 --- a/frontend/src/components/shared/AudioSettingsModal.tsx +++ b/frontend/src/components/shared/AudioSettingsModal.tsx @@ -19,7 +19,9 @@ import { alpha, TextField, } from "@mui/material"; -import { HelpOutline as HelpOutlineIcon, Close as CloseIcon, VolumeUp } from "@mui/icons-material"; +import HelpOutlineIcon from "@mui/icons-material/HelpOutline"; +import CloseIcon from "@mui/icons-material/Close"; +import VolumeUp from "@mui/icons-material/VolumeUp"; import { Button } from "@mui/material"; // Import language-aware voice mapping (optional - only used in YouTube Creator context) diff --git a/frontend/src/components/shared/ComponentErrorBoundary.tsx b/frontend/src/components/shared/ComponentErrorBoundary.tsx index 82c29e58..fa2b50cb 100644 --- a/frontend/src/components/shared/ComponentErrorBoundary.tsx +++ b/frontend/src/components/shared/ComponentErrorBoundary.tsx @@ -1,6 +1,6 @@ import React, { Component, ErrorInfo, ReactNode } from 'react'; import { Typography, Button, Alert, Stack } from '@mui/material'; -import { Refresh as RefreshIcon } from '@mui/icons-material'; +import RefreshIcon from '@mui/icons-material/Refresh'; interface ComponentErrorBoundaryProps { children: ReactNode; diff --git a/frontend/src/components/shared/CopilotKitDegradedBanner.tsx b/frontend/src/components/shared/CopilotKitDegradedBanner.tsx index 97c9bdab..bafdbcbe 100644 --- a/frontend/src/components/shared/CopilotKitDegradedBanner.tsx +++ b/frontend/src/components/shared/CopilotKitDegradedBanner.tsx @@ -1,6 +1,7 @@ import React, { useState } from 'react'; import { Alert, AlertTitle, IconButton, Collapse } from '@mui/material'; -import { Close as CloseIcon, Warning as WarningIcon } from '@mui/icons-material'; +import CloseIcon from '@mui/icons-material/Close'; +import WarningIcon from '@mui/icons-material/Warning'; import { useCopilotKitHealth } from '../../hooks/useCopilotKitHealth'; interface CopilotKitDegradedBannerProps { diff --git a/frontend/src/components/shared/DashboardHeader.tsx b/frontend/src/components/shared/DashboardHeader.tsx index 4aff4207..5d34831b 100644 --- a/frontend/src/components/shared/DashboardHeader.tsx +++ b/frontend/src/components/shared/DashboardHeader.tsx @@ -1,6 +1,6 @@ import React, { useState, useEffect } from 'react'; import { Box, Typography, Chip, Button, Tooltip } from '@mui/material'; -import { PlayArrow } from '@mui/icons-material'; +import PlayArrow from '@mui/icons-material/PlayArrow'; import { ShimmerHeader } from './styled'; import HeaderControls from './HeaderControls'; import { DashboardHeaderProps } from './types'; diff --git a/frontend/src/components/shared/ErrorBoundaryTest.tsx b/frontend/src/components/shared/ErrorBoundaryTest.tsx index 08232809..6e8c6727 100644 --- a/frontend/src/components/shared/ErrorBoundaryTest.tsx +++ b/frontend/src/components/shared/ErrorBoundaryTest.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import { Box, Button, Typography, Stack, Alert, Paper } from '@mui/material'; -import { BugReport as BugReportIcon } from '@mui/icons-material'; +import BugReportIcon from '@mui/icons-material/BugReport'; import ErrorBoundary from './ErrorBoundary'; import ComponentErrorBoundary from './ComponentErrorBoundary'; diff --git a/frontend/src/components/shared/GscSuggestionsPanel.tsx b/frontend/src/components/shared/GscSuggestionsPanel.tsx index 9ca97cf9..412c6606 100644 --- a/frontend/src/components/shared/GscSuggestionsPanel.tsx +++ b/frontend/src/components/shared/GscSuggestionsPanel.tsx @@ -1,6 +1,9 @@ import React from 'react'; import { Card, CardContent, Box, Typography, Tooltip, Chip, Button, List, ListItem, ListItemText, Paper } from '@mui/material'; -import { Info, Visibility, TrendingDown, BarChart } from '@mui/icons-material'; +import Info from '@mui/icons-material/Info'; +import Visibility from '@mui/icons-material/Visibility'; +import TrendingDown from '@mui/icons-material/TrendingDown'; +import BarChart from '@mui/icons-material/BarChart'; import ChipLegend from './ChipLegend'; interface Suggestion { diff --git a/frontend/src/components/shared/PlatformAnalytics.tsx b/frontend/src/components/shared/PlatformAnalytics.tsx index 9666c02f..02e6d3c4 100644 --- a/frontend/src/components/shared/PlatformAnalytics.tsx +++ b/frontend/src/components/shared/PlatformAnalytics.tsx @@ -27,18 +27,16 @@ import { TextField, Stack, } from '@mui/material'; -import { - Visibility, - MouseOutlined, - Search, - Web, - Refresh, - Info, - CheckCircle, - Error as ErrorIcon, - Warning, -} from '@mui/icons-material'; -import { TrendingUp } from '@mui/icons-material'; +import Visibility from '@mui/icons-material/Visibility'; +import MouseOutlined from '@mui/icons-material/MouseOutlined'; +import Search from '@mui/icons-material/Search'; +import Web from '@mui/icons-material/Web'; +import Refresh from '@mui/icons-material/Refresh'; +import Info from '@mui/icons-material/Info'; +import CheckCircle from '@mui/icons-material/CheckCircle'; +import ErrorIcon from '@mui/icons-material/Error'; +import Warning from '@mui/icons-material/Warning'; +import TrendingUp from '@mui/icons-material/TrendingUp'; import { Button } from '@mui/material'; import { PlatformAnalytics as PlatformAnalyticsType, AnalyticsSummary, PlatformConnectionStatus } from '../../api/analytics'; import { cachedAnalyticsAPI } from '../../api/cachedAnalytics'; diff --git a/frontend/src/components/shared/ProtectedRoute.tsx b/frontend/src/components/shared/ProtectedRoute.tsx index b43074ba..f6c92ca2 100644 --- a/frontend/src/components/shared/ProtectedRoute.tsx +++ b/frontend/src/components/shared/ProtectedRoute.tsx @@ -2,9 +2,9 @@ import React, { useEffect } from 'react'; import { Navigate } from 'react-router-dom'; import { useAuth } from '@clerk/clerk-react'; import { Box, CircularProgress, Typography, Alert, Button } from '@mui/material'; -import { Refresh as RefreshIcon } from '@mui/icons-material'; +import RefreshIcon from '@mui/icons-material/Refresh'; import { useOnboarding } from '../../contexts/OnboardingContext'; -import { shouldSkipOnboarding } from '../../utils/demoMode'; +import { shouldSkipOnboarding, getDefaultLandingRoute } from '../../utils/demoMode'; import { useLocation } from 'react-router-dom'; interface ProtectedRouteProps { @@ -36,9 +36,10 @@ const ProtectedRoute: React.FC = ({ children }) => { const localComplete = (() => { try { return localStorage.getItem('onboarding_complete') === 'true'; } catch { return false; } })(); - const isPodcastMode = shouldSkipOnboarding(); - const podcastMakerPath = typeof location?.pathname === 'string' && location.pathname.startsWith('/podcast-maker'); - const allowAccess = isOnboardingComplete || localComplete || (isPodcastMode && podcastMakerPath); + const isFeatureLimited = shouldSkipOnboarding(); + const defaultRoute = getDefaultLandingRoute(); + const isOnDefaultRoute = typeof location?.pathname === 'string' && location.pathname.startsWith(defaultRoute); + const allowAccess = isOnboardingComplete || localComplete || (isFeatureLimited && isOnDefaultRoute); // Wait for Clerk to load before any redirect decisions if (!isLoaded) { diff --git a/frontend/src/components/shared/RefreshQueuePanel.tsx b/frontend/src/components/shared/RefreshQueuePanel.tsx index 34f8af63..b62b5e11 100644 --- a/frontend/src/components/shared/RefreshQueuePanel.tsx +++ b/frontend/src/components/shared/RefreshQueuePanel.tsx @@ -1,6 +1,8 @@ import React from 'react'; import { Card, CardContent, Box, Typography, Tooltip, Chip, Button, Grid, List, ListItem, Paper } from '@mui/material'; -import { Info, MouseOutlined, Visibility } from '@mui/icons-material'; +import Info from '@mui/icons-material/Info'; +import MouseOutlined from '@mui/icons-material/MouseOutlined'; +import Visibility from '@mui/icons-material/Visibility'; import ChipLegend from './ChipLegend'; interface DeltaQuery { diff --git a/frontend/src/components/shared/TextToSpeechButton.tsx b/frontend/src/components/shared/TextToSpeechButton.tsx index 887a0f10..32c1ce1e 100644 --- a/frontend/src/components/shared/TextToSpeechButton.tsx +++ b/frontend/src/components/shared/TextToSpeechButton.tsx @@ -1,6 +1,9 @@ import React from 'react'; import { IconButton, Tooltip, CircularProgress, Box, Menu, MenuItem, ListItemIcon, ListItemText, FormControl, Select, Slider, Typography } from '@mui/material'; -import { VolumeUp as VolumeUpIcon, Stop as StopIcon, PlayArrow as PlayArrowIcon, Settings as SettingsIcon } from '@mui/icons-material'; +import VolumeUpIcon from '@mui/icons-material/VolumeUp'; +import StopIcon from '@mui/icons-material/Stop'; +import PlayArrowIcon from '@mui/icons-material/PlayArrow'; +import SettingsIcon from '@mui/icons-material/Settings'; import { useTextToSpeech, SpeechSynthesisOptions } from '../../hooks/useTextToSpeech'; interface TextToSpeechButtonProps { diff --git a/frontend/src/components/shared/TopPagesInsightsPanel.tsx b/frontend/src/components/shared/TopPagesInsightsPanel.tsx index 24991167..19107b2a 100644 --- a/frontend/src/components/shared/TopPagesInsightsPanel.tsx +++ b/frontend/src/components/shared/TopPagesInsightsPanel.tsx @@ -1,6 +1,10 @@ import React from 'react'; import { Card, CardContent, Box, Typography, Tooltip, Chip, Button, List, ListItem, ListItemText, Paper, IconButton } from '@mui/material'; -import { Info, MouseOutlined, Visibility, TrendingUp, OpenInNew } from '@mui/icons-material'; +import Info from '@mui/icons-material/Info'; +import MouseOutlined from '@mui/icons-material/MouseOutlined'; +import Visibility from '@mui/icons-material/Visibility'; +import TrendingUp from '@mui/icons-material/TrendingUp'; +import OpenInNew from '@mui/icons-material/OpenInNew'; import ChipLegend from './ChipLegend'; type Query = { query: string; clicks: number; impressions: number; ctr: number }; diff --git a/frontend/src/pages/ResearchDashboard/components/PresetsCard.tsx b/frontend/src/pages/ResearchDashboard/components/PresetsCard.tsx index 14c648cc..d1dfa6ba 100644 --- a/frontend/src/pages/ResearchDashboard/components/PresetsCard.tsx +++ b/frontend/src/pages/ResearchDashboard/components/PresetsCard.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Tooltip } from '@mui/material'; -import { AutoAwesome } from '@mui/icons-material'; +import AutoAwesome from '@mui/icons-material/AutoAwesome'; import { ResearchPreset } from '../types'; interface PresetsCardProps {