diff --git a/frontend/src/app/components/Layout/AppShell.tsx b/frontend/src/app/components/Layout/AppShell.tsx
index fc20e932..e7339486 100644
--- a/frontend/src/app/components/Layout/AppShell.tsx
+++ b/frontend/src/app/components/Layout/AppShell.tsx
@@ -679,7 +679,6 @@ const AppShell: React.FC = () => {
ml: 2,
mt: 0.25,
mb: 0.5,
- borderLeft: `1px solid ${c.border.medium}`,
maxHeight: 240,
overflow: 'auto',
'&::-webkit-scrollbar': { width: 3 },
@@ -707,12 +706,13 @@ const AppShell: React.FC = () => {
pl: 1.25,
pr: 1,
py: isRenaming ? 0.25 : 0.5,
- ml: '-0.5px',
+ mx: 0.5,
cursor: isRenaming ? 'default' : 'pointer',
- borderLeft: isActive ? `1.5px solid ${c.accent.primary}` : '1.5px solid transparent',
- bgcolor: isActive ? `${c.accent.primary}0C` : 'transparent',
- '&:hover': { bgcolor: `${c.text.tertiary}0A` },
- transition: 'background-color 0.12s, border-color 0.12s',
+ // Finder-style selection: the rounded fill is the one active cue, no rail marker.
+ borderRadius: `${c.radius.md}px`,
+ bgcolor: isActive ? `${c.accent.primary}40` : 'transparent',
+ '&:hover': { bgcolor: isActive ? `${c.accent.primary}55` : `${c.text.tertiary}0A` },
+ transition: 'background-color 0.12s',
}}
>
{isRenaming ? (
@@ -770,7 +770,8 @@ const AppShell: React.FC = () => {
-
+ {/* Sections separate with air, not lines. */}
+
{
-
+
{CUSTOMIZATION_ITEMS.map((item) => {
// Manual click handler instead of NavLink: NavLink's internal navigate bypasses our startTransition wrapper.
const isActive = location.pathname === item.path;
@@ -869,7 +870,8 @@ const AppShell: React.FC = () => {
-
+ {/* Sections separate with air, not lines. */}
+
{
ml: 2,
mt: 0.25,
mb: 0.5,
- borderLeft: `1px solid ${c.border.medium}`,
maxHeight: 240,
overflow: 'auto',
'&::-webkit-scrollbar': { width: 3 },