fix(01-code-splitting): convert StoryWriter, YouTubeCreator MUI icons

- Converted barrel imports to individual imports across 22 files
- StoryWriter (3), YouTubeCreator (19)

frontend/src/components/StoryWriter/Phases/StorySetup/AIStorySetupModal.tsx

@@ -20,7 +20,7 @@ import {
   Switch,
   FormControlLabel,
 } from '@mui/material';
-import { InfoOutlined } from '@mui/icons-material';
+import InfoOutlined from '@mui/icons-material/InfoOutlined';
 import {
   storyWriterApi,
   StorySetupOption,

frontend/src/components/StoryWriter/Phases/StorySetup/FormFieldWithTooltip.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TextField, Tooltip, IconButton, InputAdornment, Box, Typography } from '@mui/material';
-import { InfoOutlined } from '@mui/icons-material';
+import InfoOutlined from '@mui/icons-material/InfoOutlined';
 
 interface TooltipContent {
   title: string;

frontend/src/components/StoryWriter/Phases/StorySetup/SelectFieldWithTooltip.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TextField, MenuItem, Tooltip, IconButton, InputAdornment, Box, Typography } from '@mui/material';
-import { InfoOutlined } from '@mui/icons-material';
+import InfoOutlined from '@mui/icons-material/InfoOutlined';
 
 interface TooltipContent {
   title: string;

frontend/src/components/YouTubeCreator/YouTubeCreator.tsx

@@ -17,7 +17,7 @@ import {
   Button,
   Alert,
 } from '@mui/material';
-import { ArrowBack } from '@mui/icons-material';
+import ArrowBack from '@mui/icons-material/ArrowBack';
 import { motion, AnimatePresence } from 'framer-motion';
 import { useNavigate } from 'react-router-dom';
 import { youtubeApi, type VideoPlan, type Scene } from '../../services/youtubeApi';

frontend/src/components/YouTubeCreator/components/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";
 
 export type YouTubeAudioGenerationSettings = {

frontend/src/components/YouTubeCreator/components/AvatarCard.tsx

@@ -4,7 +4,10 @@
 
 import React, { useState } from 'react';
 import { Box, Typography, Dialog, DialogContent, IconButton, Paper, Stack } from '@mui/material';
-import { Close, ZoomIn, Refresh, AutoAwesome } from '@mui/icons-material';
+import Close from '@mui/icons-material/Close';
+import ZoomIn from '@mui/icons-material/ZoomIn';
+import Refresh from '@mui/icons-material/Refresh';
+import AutoAwesome from '@mui/icons-material/AutoAwesome';
 import { PlanDetailsCard } from './PlanDetailsCard';
 import { OperationButton } from '../../shared/OperationButton';
 

frontend/src/components/YouTubeCreator/components/CombinedSceneOverview.tsx

@@ -18,7 +18,15 @@ import {
   IconButton,
   Alert,
 } from '@mui/material';
-import { HelpOutline, Timeline, BarChart, AccessTime, Movie, Info, Image as ImageIcon, VolumeUp, CheckCircle } from '@mui/icons-material';
+import HelpOutline from '@mui/icons-material/HelpOutline';
+import Timeline from '@mui/icons-material/Timeline';
+import BarChart from '@mui/icons-material/BarChart';
+import AccessTime from '@mui/icons-material/AccessTime';
+import Movie from '@mui/icons-material/Movie';
+import Info from '@mui/icons-material/Info';
+import ImageIcon from '@mui/icons-material/Image';
+import VolumeUp from '@mui/icons-material/VolumeUp';
+import CheckCircle from '@mui/icons-material/CheckCircle';
 import { Scene } from '../../../services/youtubeApi';
 import { getSceneIcon, getSceneColor, getSceneTypeLabel, formatDuration } from '../utils/sceneHelpers';
 

frontend/src/components/YouTubeCreator/components/PlanStep.tsx

@@ -19,7 +19,12 @@ import {
   Grid,
   Button,
 } from '@mui/material';
-import { PlayArrow, CloudUpload, AutoAwesome, Delete, InfoOutlined, Collections } from '@mui/icons-material';
+import PlayArrow from '@mui/icons-material/PlayArrow';
+import CloudUpload from '@mui/icons-material/CloudUpload';
+import AutoAwesome from '@mui/icons-material/AutoAwesome';
+import Delete from '@mui/icons-material/Delete';
+import InfoOutlined from '@mui/icons-material/InfoOutlined';
+import Collections from '@mui/icons-material/Collections';
 import { motion } from 'framer-motion';
 import {
   inputSx,

frontend/src/components/YouTubeCreator/components/RenderStatusDisplay.tsx

@@ -13,7 +13,8 @@ import {
   LinearProgress,
   Button,
 } from '@mui/material';
-import { Download, Refresh } from '@mui/icons-material';
+import Download from '@mui/icons-material/Download';
+import Refresh from '@mui/icons-material/Refresh';
 import { TaskStatus } from '../../../services/youtubeApi';
 
 interface RenderStatusDisplayProps {

frontend/src/components/YouTubeCreator/components/RenderStep.tsx

@@ -18,7 +18,13 @@ import {
   IconButton,
   Tooltip,
 } from '@mui/material';
-import { PlayArrow, CheckCircle, Warning, ArrowBack, Visibility, Image as ImageIcon, VolumeUp } from '@mui/icons-material';
+import PlayArrow from '@mui/icons-material/PlayArrow';
+import CheckCircle from '@mui/icons-material/CheckCircle';
+import Warning from '@mui/icons-material/Warning';
+import ArrowBack from '@mui/icons-material/ArrowBack';
+import Visibility from '@mui/icons-material/Visibility';
+import ImageIcon from '@mui/icons-material/Image';
+import VolumeUp from '@mui/icons-material/VolumeUp';
 import { motion } from 'framer-motion';
 import { TaskStatus, CostEstimate, VideoPlan, Scene } from '../../../services/youtubeApi';
 import { YT_BORDER, type Resolution } from '../constants';

frontend/src/components/YouTubeCreator/components/SceneCard/GenerationButtons.tsx

@@ -6,7 +6,8 @@ import {
   LinearProgress,
   CircularProgress,
 } from '@mui/material';
-import { Image as ImageIcon, VolumeUp } from '@mui/icons-material';
+import ImageIcon from '@mui/icons-material/Image';
+import VolumeUp from '@mui/icons-material/VolumeUp';
 import { Scene } from '../../../../services/youtubeApi';
 import { AudioGenerationSettings } from '../../../../components/shared/AudioSettingsModal';
 import { YouTubeImageGenerationSettings } from '../../shared/YouTubeImageGenerationModal';

frontend/src/components/YouTubeCreator/components/SceneCard/InfoAlert.tsx

@@ -3,7 +3,7 @@ import {
   Alert,
   Typography,
 } from '@mui/material';
-import { Info } from '@mui/icons-material';
+import Info from '@mui/icons-material/Info';
 import { Scene } from '../../../../services/youtubeApi';
 
 interface InfoAlertProps {

frontend/src/components/YouTubeCreator/components/SceneCard/SceneContent.tsx

@@ -8,7 +8,12 @@ import {
   IconButton,
   CircularProgress,
 } from '@mui/material';
-import { RecordVoiceOver, Videocam, AutoAwesome, Image as ImageIcon, VolumeUp, HelpOutline } from '@mui/icons-material';
+import RecordVoiceOver from '@mui/icons-material/RecordVoiceOver';
+import Videocam from '@mui/icons-material/Videocam';
+import AutoAwesome from '@mui/icons-material/AutoAwesome';
+import ImageIcon from '@mui/icons-material/Image';
+import VolumeUp from '@mui/icons-material/VolumeUp';
+import HelpOutline from '@mui/icons-material/HelpOutline';
 import { Scene } from '../../../../services/youtubeApi';
 
 interface SceneContentProps {

frontend/src/components/YouTubeCreator/components/SceneCard/SceneEditForm.tsx

@@ -5,7 +5,8 @@ import {
   Button,
   Box,
 } from '@mui/material';
-import { Check, Close } from '@mui/icons-material';
+import Check from '@mui/icons-material/Check';
+import Close from '@mui/icons-material/Close';
 import { Scene } from '../../../../services/youtubeApi';
 import { inputSx, labelSx } from '../../styles';
 

frontend/src/components/YouTubeCreator/components/SceneCard/SceneHeader.tsx

@@ -9,7 +9,8 @@ import {
   IconButton,
   Tooltip,
 } from '@mui/material';
-import { Edit, HelpOutline } from '@mui/icons-material';
+import Edit from '@mui/icons-material/Edit';
+import HelpOutline from '@mui/icons-material/HelpOutline';
 import { Scene } from '../../../../services/youtubeApi';
 
 // Helper functions

frontend/src/components/YouTubeCreator/components/SceneGenerationStep.tsx

@@ -13,7 +13,10 @@ import {
   Box,
   Alert,
 } from '@mui/material';
-import { ArrowForward, ArrowBack, CheckCircle, Warning } from '@mui/icons-material';
+import ArrowForward from '@mui/icons-material/ArrowForward';
+import ArrowBack from '@mui/icons-material/ArrowBack';
+import CheckCircle from '@mui/icons-material/CheckCircle';
+import Warning from '@mui/icons-material/Warning';
 import { motion } from 'framer-motion';
 import { Scene, VideoPlan } from '../../../services/youtubeApi';
 import { YT_BG, YT_BORDER, YT_TEXT } from '../constants';

frontend/src/components/YouTubeCreator/components/SceneStatisticsCard.tsx

@@ -15,7 +15,9 @@ import {
   Chip,
   Divider,
 } from '@mui/material';
-import { AccessTime, Movie, Timeline } from '@mui/icons-material';
+import AccessTime from '@mui/icons-material/AccessTime';
+import Movie from '@mui/icons-material/Movie';
+import Timeline from '@mui/icons-material/Timeline';
 import { Scene } from '../../../services/youtubeApi';
 
 interface SceneStatisticsCardProps {

frontend/src/components/YouTubeCreator/components/SceneTimeline.tsx

@@ -15,7 +15,7 @@ import {
   Chip,
   Tooltip,
 } from '@mui/material';
-import { AccessTime } from '@mui/icons-material';
+import AccessTime from '@mui/icons-material/AccessTime';
 import { Scene } from '../../../services/youtubeApi';
 import { getSceneIcon, getSceneColor, getSceneTypeLabel, formatDuration } from '../utils/sceneHelpers';
 

frontend/src/components/YouTubeCreator/components/ScenesStep.tsx

@@ -9,7 +9,8 @@ import {
   Button,
   Box,
 } from '@mui/material';
-import { PlayArrow, VideoLibrary } from '@mui/icons-material';
+import PlayArrow from '@mui/icons-material/PlayArrow';
+import VideoLibrary from '@mui/icons-material/VideoLibrary';
 import { motion } from 'framer-motion';
 import { VideoPlan, Scene } from '../../../services/youtubeApi';
 import { PlanDetails } from './PlanDetails';

frontend/src/components/YouTubeCreator/components/SelectWithCustom.tsx

@@ -18,7 +18,7 @@ import {
   Tooltip,
   IconButton,
 } from '@mui/material';
-import { InfoOutlined } from '@mui/icons-material';
+import InfoOutlined from '@mui/icons-material/InfoOutlined';
 import { selectSx, labelSx, helperSx, inputSx, selectMenuProps } from '../styles';
 
 export interface SelectOption {

frontend/src/components/YouTubeCreator/components/VideoRenderQueue.tsx

@@ -1,6 +1,9 @@
 import React, { useMemo } from 'react';
 import { Box, Paper, Stack, Typography, Button, LinearProgress, Alert, Chip } from '@mui/material';
-import { PlayArrow, VideoLibrary, CheckCircle, ErrorOutline } from '@mui/icons-material';
+import PlayArrow from '@mui/icons-material/PlayArrow';
+import VideoLibrary from '@mui/icons-material/VideoLibrary';
+import CheckCircle from '@mui/icons-material/CheckCircle';
+import ErrorOutline from '@mui/icons-material/ErrorOutline';
 import { Scene, VideoPlan } from '../../../services/youtubeApi';
 import { useVideoRenderQueue, SceneVideoJob } from '../hooks/useVideoRenderQueue';
 

frontend/src/components/YouTubeCreator/utils/sceneHelpers.tsx

@@ -5,7 +5,10 @@
  */
 
 import React from 'react';
-import { Movie, CallMade, Shuffle, PlayArrow } from '@mui/icons-material';
+import Movie from '@mui/icons-material/Movie';
+import CallMade from '@mui/icons-material/CallMade';
+import Shuffle from '@mui/icons-material/Shuffle';
+import PlayArrow from '@mui/icons-material/PlayArrow';
 
 /**
  * Get icon component for scene emphasis type