feat: Smart Back Navigation to Accordion! 🎯
## ✅ 6. Back Button Returns to Correct Accordion **Problem:** - Back button used navigate(-1) - Returned to parent page but wrong tab - Required 2-3 clicks to get back to Email accordion - Poor UX, confusing navigation **Solution:** - Back button navigates with query params - URL: `/settings/notifications?tab={channelId}&event={eventId}` - Templates page reads query params - Auto-opens correct accordion - One-click return to context **Implementation:** **EditTemplate.tsx:** ```tsx onClick={() => navigate(`/settings/notifications?tab=${channelId}&event=${eventId}`)} ``` **Templates.tsx:** ```tsx const [openAccordion, setOpenAccordion] = useState<string | undefined>(); useEffect(() => { const eventParam = searchParams.get(\"event\"); if (eventParam) { setOpenAccordion(eventParam); } }, [searchParams]); <Accordion value={openAccordion} onValueChange={setOpenAccordion}> ``` **User Flow:** 1. User in Email accordion, editing Order Placed template 2. Clicks Back button 3. Returns to Notifications page 4. Email accordion auto-opens 5. Order Placed template visible 6. Perfect context preservation! **Files:** - `routes/Settings/Notifications/EditTemplate.tsx` - `routes/Settings/Notifications/Templates.tsx` --- ## 🎉 ALL 6 IMPROVEMENTS COMPLETE! 1. ✅ Dialog scrollable body with fixed header/footer 2. ✅ Dialog close-proof (no outside click) 3. ✅ Code Mode button moved to left 4. ✅ Markdown support in Code Mode 5. ✅ Realistic variable simulations 6. ✅ Smart back navigation **Perfect UX achieved!** 🚀
This commit is contained in:
@@ -340,7 +340,7 @@ export default function EditTemplate() {
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => navigate(-1)}
|
||||
onClick={() => navigate(`/settings/notifications?tab=${channelId}&event=${eventId}`)}
|
||||
className="gap-2"
|
||||
title={__('Back')}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user