From ae86591ed39cf8f77bf76818fa477c8d34e2a467 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 10 Jun 2026 19:55:04 -0700
Subject: [PATCH] [eric] ui: sidebar section icons spring on row-hover,
 lightweight CSS, interaction-only no dependency

---
 frontend/src/app/components/Layout/AppShell.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/components/Layout/AppShell.tsx b/frontend/src/app/components/Layout/AppShell.tsx
index 2adad4aa..8970c416 100644
--- a/frontend/src/app/components/Layout/AppShell.tsx
+++ b/frontend/src/app/components/Layout/AppShell.tsx
@@ -618,7 +618,20 @@ const AppShell: React.FC = () => {
           flexDirection: 'column',
         }}
       >
-        <Box sx={{ flex: 1, overflow: 'auto', pt: 0.5, '&::-webkit-scrollbar': { width: 0 } }}>
+        <Box sx={{
+          flex: 1,
+          overflow: 'auto',
+          pt: 0.5,
+          '&::-webkit-scrollbar': { width: 0 },
+          // 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 .MuiSvgIcon-root': {
+            transition: 'transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1)',
+          },
+          '& .MuiListItemButton-root:hover .MuiListItemIcon-root .MuiSvgIcon-root': {
+            transform: 'scale(1.15)',
+          },
+        }}>
           <Box sx={{ px: 1, mb: 0.25 }}>
             <ListItemButton
               onClick={handleDashboardsClick}