update

frontend/src/components/campaigns/CampaignSequenceBuilder.jsx

@@ -11,13 +11,6 @@ import {
     X,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from '@/components/ui/select';
 
 function uid() {
     return typeof crypto !== 'undefined' && crypto.randomUUID
@@ -209,9 +202,8 @@ function ActionCard({
     senderHint,
     accountHint,
     emailAccountHint,
-    emailMailboxAccounts,
-    emailMailboxSelectValue,
-    onEmailMailboxChange,
+    mailboxChevronCycles,
+    onMailboxChevronClick,
 }) {
     const sender = (senderHint || '').trim();
     const account = (accountHint || '').trim();
@@ -219,9 +211,7 @@ function ActionCard({
     const showLiMeta = step.channel === 'linkedin' && (showSender || account);
     const mailbox = (emailAccountHint || '').trim();
     const showEmailMeta = step.channel === 'gmail' && !!mailbox;
-    const mailAccounts = emailMailboxAccounts || [];
-    const showEmailMailboxSelect =
-        step.channel === 'gmail' && mailAccounts.length > 1 && typeof onEmailMailboxChange === 'function';
+    const chevronSwitchable = mailboxChevronCycles && typeof onMailboxChevronClick === 'function';
     return (
         <div className="relative w-full max-w-md">
             <div className="flex w-full items-center gap-3 rounded-xl border border-slate-200 bg-white px-4 py-3 text-left shadow-sm">
@@ -243,39 +233,26 @@ function ActionCard({
                             {account ? <span>Profile: {account}</span> : null}
                         </p>
                     ) : null}
-                    {showEmailMailboxSelect ? (
-                        <div
-                            className="mt-2 space-y-1"
-                            onClick={(e) => e.stopPropagation()}
-                            onPointerDown={(e) => e.stopPropagation()}
-                        >
-                            <p className="text-[10px] font-medium uppercase tracking-wide text-slate-500">
-                                Mailbox
-                            </p>
-                            <Select
-                                value={String(emailMailboxSelectValue ?? mailAccounts[0]?.id ?? '')}
-                                onValueChange={(v) => onEmailMailboxChange(Number(v))}
-                            >
-                                <SelectTrigger className="h-9 w-full max-w-[240px] border-slate-200 text-xs">
-                                    <SelectValue placeholder="Choose mailbox" />
-                                </SelectTrigger>
-                                <SelectContent>
-                                    {mailAccounts.map((a) => {
-                                        const label = (a.display_name || a.label || 'Mailbox').trim();
-                                        return (
-                                            <SelectItem key={a.id} value={String(a.id)}>
-                                                {label}
-                                            </SelectItem>
-                                        );
-                                    })}
-                                </SelectContent>
-                            </Select>
-                        </div>
-                    ) : showEmailMeta ? (
+                    {showEmailMeta ? (
                         <p className="mt-1 text-[11px] leading-snug text-violet-700">Mailbox: {mailbox}</p>
                     ) : null}
                 </div>
-                <ChevronRight className="h-5 w-5 shrink-0 text-slate-300" aria-hidden />
+                {chevronSwitchable ? (
+                    <button
+                        type="button"
+                        className="shrink-0 rounded-lg p-1 text-slate-400 transition hover:bg-violet-50 hover:text-violet-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-300"
+                        aria-label="Switch mailbox"
+                        title="Switch mailbox"
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            onMailboxChevronClick();
+                        }}
+                    >
+                        <ChevronRight className="h-5 w-5" aria-hidden />
+                    </button>
+                ) : (
+                    <ChevronRight className="h-5 w-5 shrink-0 text-slate-300" aria-hidden />
+                )}
             </div>
             {onRemove ? (
                 <button
@@ -439,12 +416,26 @@ export default function CampaignSequenceBuilder({ value, onChange, linkedinDefau
                                 ? step.unipile_account_ref_id ?? defaultMailRef
                                 : null;
                         const mailIdSet = new Set(mailAccts.map((a) => Number(a.id)));
-                        const emailSelectValue =
+                        const effectiveMailboxId =
                             effMailRef != null && mailIdSet.has(Number(effMailRef))
                                 ? Number(effMailRef)
                                 : mailAccts[0]?.id != null
                                   ? Number(mailAccts[0].id)
                                   : null;
+                        const cycleMailbox =
+                            step.type === 'action' &&
+                            step.channel === 'gmail' &&
+                            mailAccts.length > 1 &&
+                            effectiveMailboxId != null
+                                ? () => {
+                                      const ids = mailAccts.map((a) => Number(a.id));
+                                      const cur = effectiveMailboxId;
+                                      const idx = ids.indexOf(cur);
+                                      const from = idx >= 0 ? idx : 0;
+                                      const nextId = ids[(from + 1) % ids.length];
+                                      updateStepMailbox(index, nextId);
+                                  }
+                                : undefined;
                         return (
                         <React.Fragment key={step.id}>
                             {step.type === 'wait' ? (
@@ -487,15 +478,10 @@ export default function CampaignSequenceBuilder({ value, onChange, linkedinDefau
                                               )
                                             : ''
                                     }
-                                    emailMailboxAccounts={step.channel === 'gmail' ? mailAccts : []}
-                                    emailMailboxSelectValue={
-                                        step.channel === 'gmail' ? emailSelectValue : null
-                                    }
-                                    onEmailMailboxChange={
+                                    mailboxChevronCycles={
                                         step.channel === 'gmail' && mailAccts.length > 1
-                                            ? (id) => updateStepMailbox(index, id)
-                                            : undefined
                                     }
+                                    onMailboxChevronClick={cycleMailbox}
                                     onRemove={() => removeAt(index)}
                                 />
                             )}

frontend/src/components/layout/AppShell.jsx

@@ -34,9 +34,12 @@ export default function AppShell({ title, subtitle, rightContent, children }) {
 
     const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
         try {
-            return typeof window !== 'undefined' && localStorage.getItem(SIDEBAR_COLLAPSED_KEY) === '1';
+            if (typeof window === 'undefined') return true;
+            const v = localStorage.getItem(SIDEBAR_COLLAPSED_KEY);
+            if (v === null || v === '') return true;
+            return v === '1';
         } catch {
-            return false;
+            return true;
         }
     });
 
@@ -49,9 +52,9 @@ export default function AppShell({ title, subtitle, rightContent, children }) {
     }, [sidebarCollapsed]);
 
     return (
-        <div className="flex min-h-screen flex-col bg-gradient-to-br from-slate-50 via-white to-violet-50">
+        <div className="flex h-[100dvh] max-h-[100dvh] flex-col overflow-hidden bg-gradient-to-br from-slate-50 via-white to-violet-50">
             {/* Single full-width rule under branding + page title */}
-            <header className="sticky top-0 z-40 flex flex-col border-b border-slate-200 bg-white/80 backdrop-blur-sm">
+            <header className="z-40 flex shrink-0 flex-col border-b border-slate-200 bg-white/80 backdrop-blur-sm">
                 <div className="flex min-h-[4.25rem] items-stretch">
                     <div
                         className={cn(
@@ -109,10 +112,10 @@ export default function AppShell({ title, subtitle, rightContent, children }) {
                 </nav>
             </header>
 
-            <div className="flex min-h-0 flex-1">
+            <div className="flex min-h-0 flex-1 overflow-hidden">
                 <aside
                     className={cn(
-                        'hidden md:flex min-h-0 shrink-0 flex-col self-stretch border-r border-slate-200 bg-white py-4 transition-[width] duration-200 ease-out',
+                        'hidden md:flex h-full min-h-0 shrink-0 flex-col border-r border-slate-200 bg-white py-4 transition-[width] duration-200 ease-out',
                         sidebarCollapsed ? 'w-16 items-stretch px-2' : 'w-72 px-4'
                     )}
                 >
@@ -125,6 +128,7 @@ export default function AppShell({ title, subtitle, rightContent, children }) {
                         {NAV_ITEMS.map((item) => {
                             const Icon = item.icon;
                             const active = pathMatches(location.pathname, item.href);
+                            const activeHighlight = active && !sidebarCollapsed;
                             return (
                                 <Link
                                     to={item.href}
@@ -135,7 +139,7 @@ export default function AppShell({ title, subtitle, rightContent, children }) {
                                         sidebarCollapsed
                                             ? 'w-12 justify-center px-0'
                                             : 'items-center gap-3 px-3',
-                                        active
+                                        activeHighlight
                                             ? 'bg-violet-100 text-violet-700'
                                             : 'text-slate-700 hover:bg-slate-50'
                                     )}
@@ -143,7 +147,7 @@ export default function AppShell({ title, subtitle, rightContent, children }) {
                                     <div
                                         className={cn(
                                             'flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border',
-                                            active
+                                            activeHighlight
                                                 ? 'border-violet-200 bg-white text-violet-600'
                                                 : 'border-slate-200 bg-white text-slate-500'
                                         )}
@@ -154,7 +158,7 @@ export default function AppShell({ title, subtitle, rightContent, children }) {
                                         <span
                                             className={cn(
                                                 'text-base font-medium',
-                                                active ? 'text-violet-700' : 'text-slate-700'
+                                                activeHighlight ? 'text-violet-700' : 'text-slate-700'
                                             )}
                                         >
                                             {item.label}
@@ -187,7 +191,7 @@ export default function AppShell({ title, subtitle, rightContent, children }) {
                     </div>
                 </aside>
 
-                <div className="min-w-0 flex-1 overflow-auto">
+                <div className="min-h-0 min-w-0 flex-1 overflow-y-auto overflow-x-hidden">
                     <main className="mx-auto w-full min-w-0 max-w-none px-4 sm:px-5 md:px-6 lg:px-8 xl:px-10 2xl:px-12 py-6 md:py-8">
                         {children}
                     </main>