From 7801c4a49150a4103e6ba1c349b3034bbc749403 Mon Sep 17 00:00:00 2001
From: Arnaud Nelissen <arnaud.nelissen@icloud.com>
Date: Fri, 17 Apr 2026 14:13:01 +0200
Subject: [PATCH] Navigate between similar targets within the detail drawer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Clicking a nearby target opens it inside the same drawer: the drawer
content switches to the new target (fetched via useTarget) and all
tabs/hooks update automatically. A '← [name]' back button appears in
the tab bar to return to the previous target. Navigation is stackable
(can chain through multiple nearby targets). Tab and filter selection
reset on each navigation step.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/components/targets/DetailDrawer.tsx   | 63 +++++++++++++++++--
 1 file changed, 57 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/targets/DetailDrawer.tsx b/frontend/src/components/targets/DetailDrawer.tsx
index a0d64a5..47d468d 100644
--- a/frontend/src/components/targets/DetailDrawer.tsx
+++ b/frontend/src/components/targets/DetailDrawer.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import type { Target, Workflow } from '../../api/types';
-import { useTargetCurve, useTargetFilters, useTargetSimilar, useTargetVisibility, useTargetWorkflow, useTargetYearly } from '../../hooks/useTargets';
+import { useTarget, useTargetCurve, useTargetFilters, useTargetSimilar, useTargetVisibility, useTargetWorkflow, useTargetYearly } from '../../hooks/useTargets';
 import { useTargetLog } from '../../hooks/useLog';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { api } from '../../api';
@@ -231,12 +231,35 @@ function ImagingCalculator({ target, filterId }: { target: Target; filterId: str
   );
 }
 
-export default function DetailDrawer({ target }: Props) {
+export default function DetailDrawer({ target: propTarget }: Props) {
   const [tab, setTab] = useState(0);
   const [selectedFilter, setSelectedFilter] = useState('sv220');
   const [notes, setNotes] = useState<string | null>(null);
+  const [navStack, setNavStack] = useState<string[]>([]); // stack of navigated target IDs
   const qc = useQueryClient();
 
+  const navId = navStack.length > 0 ? navStack[navStack.length - 1] : '';
+  const { data: navTarget } = useTarget(navId);
+  // Use navigated target when available, otherwise fall back to the prop target
+  const target = (navId && navTarget) ? navTarget : propTarget;
+
+  const navigateTo = (id: string) => {
+    setNavStack(prev => [...prev, id]);
+    setTab(0);
+    setSelectedFilter('sv220');
+    setNotes(null);
+  };
+  const navigateBack = () => {
+    setNavStack(prev => prev.slice(0, -1));
+    setTab(0);
+    setSelectedFilter('sv220');
+    setNotes(null);
+  };
+  // Name of the target we'd go back to
+  const backName = navStack.length === 1
+    ? (propTarget.common_name ?? propTarget.name)
+    : navStack.length > 1 ? navStack[navStack.length - 2] : null;
+
   const { data: tonight } = useTonight();
   const { data: visData } = useTargetVisibility(target.id);
   const { data: curveData } = useTargetCurve(target.id);
@@ -265,8 +288,24 @@ export default function DetailDrawer({ target }: Props) {
 
   return (
     <div style={{ background: 'var(--bg-panel)', border: '1px solid var(--border-hi)', borderRadius: 4, marginTop: 2 }}>
-      {/* Tabs */}
-      <div style={{ display: 'flex', borderBottom: '1px solid var(--border)' }}>
+      {/* Tabs + optional back button */}
+      <div style={{ display: 'flex', borderBottom: '1px solid var(--border)', alignItems: 'center' }}>
+        {navStack.length > 0 && (
+          <button
+            onClick={navigateBack}
+            style={{
+              padding: '8px 12px',
+              fontFamily: 'var(--font-mono)', fontSize: 11,
+              color: 'var(--text-lo)', background: 'none',
+              borderRight: '1px solid var(--border)',
+              borderBottom: '2px solid transparent',
+              cursor: 'pointer', whiteSpace: 'nowrap',
+              flexShrink: 0,
+            }}
+          >
+            ← {backName}
+          </button>
+        )}
         {TABS.map((t, i) => (
           <button
             key={t}
@@ -455,7 +494,18 @@ export default function DetailDrawer({ target }: Props) {
                 </div>
                 <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
                   {similarData!.similar.slice(0, 3).map(s => (
-                    <div key={s.id} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                    <button
+                      key={s.id}
+                      onClick={() => navigateTo(s.id)}
+                      style={{
+                        display: 'flex', alignItems: 'center', gap: 8,
+                        background: 'none', border: 'none', cursor: 'pointer',
+                        padding: '3px 6px', borderRadius: 3, textAlign: 'left',
+                        transition: 'background 0.1s',
+                      }}
+                      onMouseEnter={e => (e.currentTarget.style.background = 'var(--bg-hover)')}
+                      onMouseLeave={e => (e.currentTarget.style.background = 'none')}
+                    >
                       {s.messier_num != null && (
                         <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--amber)', fontWeight: 700, width: 28 }}>
                           M{s.messier_num}
@@ -476,7 +526,8 @@ export default function DetailDrawer({ target }: Props) {
                           {new Date(s.transit_utc).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit', timeZone: 'Europe/Paris' })}
                         </span>
                       )}
-                    </div>
+                      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-lo)' }}>→</span>
+                    </button>
                   ))}
                 </div>
               </div>