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:
dwindown
2025-11-13 11:55:27 +07:00
parent 5320773eef
commit 38f5e1ff74
2 changed files with 14 additions and 4 deletions

View File

@@ -340,7 +340,7 @@ export default function EditTemplate() {
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
onClick={() => navigate(-1)} onClick={() => navigate(`/settings/notifications?tab=${channelId}&event=${eventId}`)}
className="gap-2" className="gap-2"
title={__('Back')} title={__('Back')}
> >

View File

@@ -1,5 +1,5 @@
import React from 'react'; import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate, useSearchParams } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import { api } from '@/lib/api'; import { api } from '@/lib/api';
import { SettingsCard } from '../components/SettingsCard'; import { SettingsCard } from '../components/SettingsCard';
@@ -25,6 +25,16 @@ interface NotificationChannel {
export default function NotificationTemplates() { export default function NotificationTemplates() {
const navigate = useNavigate(); const navigate = useNavigate();
const [searchParams] = useSearchParams();
const [openAccordion, setOpenAccordion] = useState<string | undefined>();
// Check for query params to open specific accordion
useEffect(() => {
const eventParam = searchParams.get('event');
if (eventParam) {
setOpenAccordion(eventParam);
}
}, [searchParams]);
// Fetch channels // Fetch channels
const { data: channels, isLoading: channelsLoading } = useQuery({ const { data: channels, isLoading: channelsLoading } = useQuery({
@@ -102,7 +112,7 @@ export default function NotificationTemplates() {
title={__('Templates by Channel')} title={__('Templates by Channel')}
description={__('Customize notification templates for each channel')} description={__('Customize notification templates for each channel')}
> >
<Accordion type="single" collapsible className="w-full"> <Accordion type="single" collapsible className="w-full" value={openAccordion} onValueChange={setOpenAccordion}>
{channels?.map((channel: NotificationChannel) => { {channels?.map((channel: NotificationChannel) => {
const channelTemplates = allEvents.filter((event: any) => { const channelTemplates = allEvents.filter((event: any) => {
const templateKey = `${event.id}_${channel.id}`; const templateKey = `${event.id}_${channel.id}`;