From 583c39e65ca11c89a4a4e54f043f9f47771b6e1b Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 10 Jun 2026 22:51:09 -0700
Subject: [PATCH] [eric] ui: per-glyph hover animations (gear spins, palette
 tilts, plus rotates, arrows slide) + toolbar/settings icons to lucide

---
 .../src/app/components/Layout/AppShell.tsx    | 39 +++++++++++++------
 .../Settings/sections/SettingsHeader.tsx      |  6 +--
 2 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/frontend/src/app/components/Layout/AppShell.tsx b/frontend/src/app/components/Layout/AppShell.tsx
index dce4d87c..5eadca46 100644
--- a/frontend/src/app/components/Layout/AppShell.tsx
+++ b/frontend/src/app/components/Layout/AppShell.tsx
@@ -21,12 +21,9 @@ import BuildIcon from '@mui/icons-material/BuildOutlined';
 import TuneIcon from '@mui/icons-material/TuneOutlined';
 import { LayoutGrid } from 'lucide-react';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import AddIcon from '@mui/icons-material/Add';
 import { Settings as LucideSettings } from 'lucide-react';
 import { Palette } from 'lucide-react';
-import { PanelLeft } from 'lucide-react';
-import ArrowBackOutlinedIcon from '@mui/icons-material/ArrowBackOutlined';
-import ArrowForwardOutlinedIcon from '@mui/icons-material/ArrowForwardOutlined';
+import { PanelLeft, ArrowLeft, ArrowRight, Plus } from 'lucide-react';
 import RestartAltIcon from '@mui/icons-material/RestartAlt';
 import SystemUpdateAltIcon from '@mui/icons-material/SystemUpdateAlt';
 import CloseIcon from '@mui/icons-material/Close';
@@ -395,7 +392,9 @@ const AppShell: React.FC = () => {
               color: c.text.tertiary,
               p: 0.5,
               borderRadius: 1,
+              '& svg': { transition: 'transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)' },
               '&:hover': { color: c.text.secondary, bgcolor: `${c.text.tertiary}14` },
+              '&:hover svg': { transform: 'translateX(-1.5px) scale(1.08)' },
             }}
           >
             <PanelLeft size={18} />
@@ -410,10 +409,12 @@ const AppShell: React.FC = () => {
               color: c.text.tertiary,
               p: 0.5,
               borderRadius: 1,
+              '& svg': { transition: 'transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)' },
               '&:hover': { color: c.text.secondary, bgcolor: `${c.text.tertiary}14` },
+              '&:hover svg': { transform: 'translateX(-2px)' },
             }}
           >
-            <ArrowBackOutlinedIcon sx={{ fontSize: 18 }} />
+            <ArrowLeft size={18} />
           </IconButton>
         </Tooltip>
         <Tooltip title="Forward">
@@ -425,10 +426,12 @@ const AppShell: React.FC = () => {
               color: c.text.tertiary,
               p: 0.5,
               borderRadius: 1,
+              '& svg': { transition: 'transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)' },
               '&:hover': { color: c.text.secondary, bgcolor: `${c.text.tertiary}14` },
+              '&:hover svg': { transform: 'translateX(2px)' },
             }}
           >
-            <ArrowForwardOutlinedIcon sx={{ fontSize: 18 }} />
+            <ArrowRight size={18} />
           </IconButton>
         </Tooltip>
 
@@ -625,10 +628,18 @@ const AppShell: React.FC = () => {
           // Tactile hover: the leading section icon springs once on row-hover, then settles.
           // Interaction-only, never ambient. Scoped to ListItemIcon so the +/chevron stay put.
           '& .MuiListItemIcon-root svg': {
-            transition: 'transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1)',
+            transition: 'transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1)',
           },
-          '& .MuiListItemButton-root:hover .MuiListItemIcon-root svg': {
-            transform: 'scale(1.15)',
+          // Per-glyph hover choreography: each section icon reacts in its own way,
+          // springy then settles. Interaction-only, never ambient.
+          '& [data-onboarding="sidebar-dashboards"]:hover .MuiListItemIcon-root svg': {
+            transform: 'scale(1.14)',
+          },
+          '& [data-onboarding="sidebar-customization"]:hover .MuiListItemIcon-root svg': {
+            transform: 'rotate(-14deg) scale(1.06)',
+          },
+          '& [data-onboarding="sidebar-apps"]:hover .MuiListItemIcon-root svg': {
+            transform: 'rotate(8deg) scale(1.08)',
           },
         }}>
           <Box sx={{ px: 1, mb: 0.25 }}>
@@ -669,10 +680,12 @@ const AppShell: React.FC = () => {
                     p: 0.25,
                     mr: 0.25,
                     borderRadius: 1,
+                    '& svg': { transition: 'transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)' },
                     '&:hover': { color: c.accent.primary, bgcolor: `${c.accent.primary}14` },
+                    '&:hover svg': { transform: 'rotate(90deg)' },
                   }}
                 >
-                  <AddIcon sx={{ fontSize: 15 }} />
+                  <Plus size={15} />
                 </IconButton>
               </Tooltip>
               {dashboardList.length > 0 && (
@@ -926,10 +939,12 @@ const AppShell: React.FC = () => {
                     p: 0.25,
                     mr: 0.25,
                     borderRadius: 1,
+                    '& svg': { transition: 'transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)' },
                     '&:hover': { color: c.accent.primary, bgcolor: `${c.accent.primary}14` },
+                    '&:hover svg': { transform: 'rotate(90deg)' },
                   }}
                 >
-                  <AddIcon sx={{ fontSize: 15 }} />
+                  <Plus size={15} />
                 </IconButton>
               </Tooltip>
               {appsList.length > 0 && (
@@ -1016,7 +1031,9 @@ const AppShell: React.FC = () => {
               borderRadius: 1.5,
               py: 0.6,
               px: 1.25,
+              '& .MuiListItemIcon-root svg': { transition: 'transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)' },
               '&:hover': { bgcolor: `${c.text.tertiary}0A` },
+              '&:hover .MuiListItemIcon-root svg': { transform: 'rotate(90deg)' },
               transition: 'background-color 0.15s',
             }}
           >
diff --git a/frontend/src/app/pages/Settings/sections/SettingsHeader.tsx b/frontend/src/app/pages/Settings/sections/SettingsHeader.tsx
index e929f190..a6315d53 100644
--- a/frontend/src/app/pages/Settings/sections/SettingsHeader.tsx
+++ b/frontend/src/app/pages/Settings/sections/SettingsHeader.tsx
@@ -5,7 +5,7 @@ import IconButton from '@mui/material/IconButton';
 import Tab from '@mui/material/Tab';
 import Tabs from '@mui/material/Tabs';
 import DialogTitle from '@mui/material/DialogTitle';
-import CloseIcon from '@mui/icons-material/Close';
+import { X } from 'lucide-react';
 import { useClaudeTokens } from '@/shared/styles/ThemeContext';
 
 const SettingsHeader: React.FC<{
@@ -25,8 +25,8 @@ const SettingsHeader: React.FC<{
         <Typography sx={{ color: c.text.primary, fontWeight: 600, fontSize: '1rem' }}>
           Settings
         </Typography>
-        <IconButton onClick={onClose} size="small" data-onboarding="settings-close-button" sx={{ color: c.text.tertiary, '&:hover': { color: c.text.primary } }}>
-          <CloseIcon sx={{ fontSize: 18 }} />
+        <IconButton onClick={onClose} size="small" data-onboarding="settings-close-button" sx={{ color: c.text.tertiary, '& svg': { transition: 'transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)' }, '&:hover': { color: c.text.primary }, '&:hover svg': { transform: 'rotate(90deg)' } }}>
+          <X size={18} />
         </IconButton>
       </Box>
       <Tabs