Merge pull request #17 from Juliusolsson05/fix/dashboard-route-relationships

Juliusolsson05 · web-flow · commit ea8a95c1e35d · 2026-03-12T18:07:34.000+01:00
fix: preserve dashboard entity relationships in routes
diff --git a/src/features/actors/components/ActorsContent.tsx b/src/features/actors/components/ActorsContent.tsx
@@ -1,10 +1,10 @@
 'use client';
 
-import { useMemo, useState } from 'react';
+import { useCallback, useState } from 'react';
 
-import { ArrowLeft,Users } from 'lucide-react';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 
-import { track } from '@/shared/lib/analytics';
+import { ArrowLeft, Users } from 'lucide-react';
 
 import { Button } from '@/components/ui/button';
 import { ResizableHandle,ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';
@@ -16,31 +16,43 @@ import { ListDetailScreenSkeleton } from '@/shared/components/loading/screen-ske
 import { DaySelector } from '@/shared/components/shared/DaySelector';
 import { EmptyState } from '@/shared/components/shared/EmptyState';
 
+import { track } from '@/shared/lib/analytics';
 import { useConflictDay } from '@/shared/hooks/use-conflict-day';
 import { useIsLandscapePhone } from '@/shared/hooks/use-is-landscape-phone';
 import { useIsMobile } from '@/shared/hooks/use-is-mobile';
 import { useLandscapeScrollEmitter } from '@/shared/hooks/use-landscape-scroll-emitter';
 import { usePanelLayout } from '@/shared/hooks/use-panel-layout';
 
 export function ActorsContent() {
-  const initActor = useMemo(() => {
-    if (typeof window === 'undefined') return null;
-    return new URLSearchParams(window.location.search).get('actor');
-  }, []);
+  const pathname = usePathname();
+  const router = useRouter();
+  const searchParams = useSearchParams();
   const { currentDay, setDay } = useConflictDay();
   const isMobile = useIsMobile(1024);
   const isLandscapePhone = useIsLandscapePhone();
   const usePageScroll = isMobile && isLandscapePhone;
   const onLandscapeScroll = useLandscapeScrollEmitter(usePageScroll);
 
-  const [selId, setSelId] = useState<string | null>(() => initActor);
+  const selId = searchParams.get('actor');
   const [tab,   setTab]   = useState<'intel' | 'signals' | 'military'>('intel');
   const { defaultLayout, onLayoutChanged } = usePanelLayout({ id: 'actors' });
 
   const { data: actors, isLoading } = useActors(undefined, currentDay || undefined);
   const { data: actorDetail } = useActor(undefined, selId ?? undefined);
   const selected = actorDetail ?? actors?.find(a => a.id === selId) ?? null;
 
+  const handleSelect = useCallback((id: string | null) => {
+    const next = new URLSearchParams(searchParams.toString());
+    if (id) next.set('actor', id);
+    else next.delete('actor');
+    const qs = next.toString();
+    router.replace(qs ? `${pathname}?${qs}` : pathname, { scroll: false });
+    if (id) {
+      setTab('intel');
+      track('actor_selected', { actor_id: id });
+    }
+  }, [pathname, router, searchParams]);
+
   if (isLoading) return <ListDetailScreenSkeleton />;
 
   if (isMobile) {
@@ -55,7 +67,7 @@ export function ActorsContent() {
               <Button
                 variant="ghost"
                 size="xs"
-                onClick={() => setSelId(null)}
+                onClick={() => handleSelect(null)}
                 className="mono h-7 px-2 text-[9px] font-bold tracking-[0.06em]"
               >
                 <ArrowLeft size={12} />
@@ -70,7 +82,7 @@ export function ActorsContent() {
         ) : (
           <ActorList
             selectedId={selId}
-            onSelect={id => { setSelId(id); if (id) { setTab('intel'); track('actor_selected', { actor_id: id }); } }}
+            onSelect={handleSelect}
             currentDay={currentDay}
             onDayChange={setDay}
             compact={usePageScroll}
@@ -86,7 +98,7 @@ export function ActorsContent() {
       <ResizablePanel id="list" defaultSize="22%" minSize="15%" maxSize="40%" className="flex flex-col overflow-hidden min-w-[180px]">
         <ActorList
           selectedId={selId}
-          onSelect={id => { setSelId(id); if (id) { setTab('intel'); track('actor_selected', { actor_id: id }); } }}
+          onSelect={handleSelect}
           currentDay={currentDay}
           onDayChange={setDay}
         />
diff --git a/src/features/dashboard/components/MobileOverview.tsx b/src/features/dashboard/components/MobileOverview.tsx
@@ -4,7 +4,7 @@ import { useMemo, useState } from 'react';
 
 import Link from 'next/link';
 
-import { ArrowRight, BookOpen, Map as MapIcon, TrendingUp,Users, Zap } from 'lucide-react';
+import { ArrowRight, BookOpen, Map as MapIcon, TrendingUp, Users, Zap } from 'lucide-react';
 
 import { useActors } from '@/features/actors/queries';
 import { CasChip } from '@/features/dashboard/components/CasChip';
@@ -56,7 +56,21 @@ export function MobileOverview() {
   const totalStories = stories.length;
   const critCount = recentEvents.filter(e => e.severity === 'CRITICAL').length;
   const [expandedSummary, setExpandedSummary] = useState(false);
-  const [expandedEvents, setExpandedEvents] = useState<Set<string>>(new Set());
+  const feedHref = (eventId?: string) => {
+    const params = new URLSearchParams();
+    if (latestDay) params.set('day', latestDay);
+    if (eventId) params.set('event', eventId);
+    const qs = params.toString();
+    return qs ? `/dashboard/feed?${qs}` : '/dashboard/feed';
+  };
+  const mapHref = (storyId?: string) => {
+    const params = new URLSearchParams();
+    if (storyId) params.set('story', storyId);
+    const qs = params.toString();
+    return qs ? `/dashboard/map?${qs}` : '/dashboard/map';
+  };
+  const actorsHref = latestDay ? `/dashboard/actors?day=${latestDay}` : '/dashboard/actors';
+  const briefHref = latestDay ? `/dashboard/brief?day=${latestDay}` : '/dashboard/brief';
 
   return (
     <div className="flex-1 min-h-0 overflow-y-auto bg-[var(--bg-1)] safe-pb">
@@ -91,7 +105,7 @@ export function MobileOverview() {
       )}
 
       {/* ── GO TO MAP hero ── */}
-      <Link href="/dashboard/map" className="no-underline">
+      <Link href={mapHref()} className="no-underline">
         <div className="safe-px my-3 py-4 bg-[var(--blue-dim)] border border-[var(--blue)] flex items-center justify-between">
           <div className="flex items-center gap-3">
             <MapIcon size={20} strokeWidth={2} className="text-[var(--blue-l)]" />
@@ -123,15 +137,15 @@ export function MobileOverview() {
       <div className="border-t border-[var(--bd)]">
         <div className="flex items-center justify-between safe-px py-2 bg-[var(--bg-2)] border-b border-[var(--bd)]">
           <span className="section-title">Latest Events</span>
-          <Link href="/dashboard/feed" className="no-underline flex items-center gap-1">
+          <Link href={feedHref()} className="no-underline flex items-center gap-1">
             <span className="mono text-[9px] text-[var(--blue-l)] font-bold">See all</span>
             <ArrowRight size={10} className="text-[var(--blue-l)]" />
           </Link>
         </div>
         {recentEvents.map((evt, i) => {
           const sc = SEV_C[evt.severity] ?? 'var(--info)';
           return (
-            <Link key={evt.id} href={`/dashboard/feed?event=${evt.id}`} className="no-underline">
+            <Link key={evt.id} href={feedHref(evt.id)} className="no-underline">
               <div
                 className="flex gap-2.5 items-start safe-px py-2 hover:bg-[var(--bg-3)] transition-colors"
                 style={{
@@ -159,7 +173,7 @@ export function MobileOverview() {
         <div className="border-t border-[var(--bd)] mt-0">
           <div className="flex items-center justify-between safe-px py-2 bg-[var(--bg-2)] border-b border-[var(--bd)]">
             <span className="section-title">Active Stories</span>
-            <Link href="/dashboard/map" className="no-underline flex items-center gap-1">
+            <Link href={mapHref()} className="no-underline flex items-center gap-1">
               <span className="mono text-[9px] text-[var(--blue-l)] font-bold">Map</span>
               <ArrowRight size={10} className="text-[var(--blue-l)]" />
             </Link>
@@ -171,7 +185,7 @@ export function MobileOverview() {
             };
             const c = catColor[story.category] ?? 'var(--t3)';
             return (
-              <Link key={story.id} href="/dashboard/map" className="no-underline">
+              <Link key={story.id} href={mapHref(story.id)} className="no-underline">
                 <div
                   className="flex gap-2.5 items-start safe-px py-2.5 hover:bg-[var(--bg-3)] transition-colors"
                   style={{
@@ -222,8 +236,9 @@ export function MobileOverview() {
       <div className="border-t border-[var(--bd)] safe-px py-3">
         <div className="grid grid-cols-2 gap-2">
           {[
-            { href: '/dashboard/actors', label: 'ACTORS', icon: Users, color: 'var(--teal)' },
+            { href: actorsHref, label: 'ACTORS', icon: Users, color: 'var(--teal)' },
             { href: '/dashboard/predictions', label: 'PREDICTIONS', icon: TrendingUp, color: 'var(--warning)' },
+            { href: briefHref, label: 'BRIEF', icon: BookOpen, color: 'var(--info)' },
           ].map(nav => (
             <Link key={nav.href} href={nav.href} className="no-underline">
               <div className="flex items-center gap-2.5 px-3 py-3 border border-[var(--bd)] bg-[var(--bg-2)] hover:bg-[var(--bg-3)] transition-colors">
diff --git a/src/features/dashboard/components/WorkspaceDashboard.tsx b/src/features/dashboard/components/WorkspaceDashboard.tsx
@@ -39,13 +39,13 @@ import { widgetComponents } from './widgets';
 
 import { useAppDispatch,useAppSelector } from '@/shared/state';
 
-const WIDGET_LINKS: Partial<Record<WidgetKey, { href: string; label: string }>> = {
-  latest:      { href: '/dashboard/feed',        label: 'View All' },
-  actors:      { href: '/dashboard/actors',      label: 'Dossiers' },
+const WIDGET_LINKS: Partial<Record<WidgetKey, { href: string; label: string; preserveDay?: boolean }>> = {
+  latest:      { href: '/dashboard/feed',        label: 'View All', preserveDay: true },
+  actors:      { href: '/dashboard/actors',      label: 'Dossiers', preserveDay: true },
   signals:     { href: '/dashboard/signals',     label: 'All Signals' },
   map:         { href: '/dashboard/map',         label: 'Full Map' },
   predictions: { href: '/dashboard/predictions', label: 'All Markets' },
-  brief:       { href: '/dashboard/brief',       label: 'Full Brief' },
+  brief:       { href: '/dashboard/brief',       label: 'Full Brief', preserveDay: true },
 };
 
 export function WorkspaceDashboard() {
@@ -58,6 +58,14 @@ export function WorkspaceDashboard() {
   const allDays = bootstrap?.days ?? [];
   const [dashDay, setDashDay] = useState<string>('');
   const effectiveDashDay = dashDay || allDays[allDays.length - 1] || '';
+  const widgetLinks = Object.fromEntries(
+    Object.entries(WIDGET_LINKS).map(([key, value]) => {
+      const href = effectiveDashDay && value!.preserveDay
+        ? `${value!.href}?day=${effectiveDashDay}`
+        : value!.href;
+      return [key, { ...value!, href }];
+    }),
+  ) as typeof WIDGET_LINKS;
 
   const { data: conflict, isLoading: conflictLoading } = useConflict();
   const { data: snapshots, isLoading: snapshotsLoading } = useConflictDays();
@@ -257,9 +265,9 @@ export function WorkspaceDashboard() {
                               </div>
                             )}
 
-                            {!editing && WIDGET_LINKS[widget] && (
-                              <Link href={WIDGET_LINKS[widget]!.href} className="no-underline ml-auto flex items-center gap-1">
-                                <span className="text-[9px] text-[var(--blue-l)] font-semibold">{WIDGET_LINKS[widget]!.label}</span>
+                            {!editing && widgetLinks[widget] && (
+                              <Link href={widgetLinks[widget]!.href} className="no-underline ml-auto flex items-center gap-1">
+                                <span className="text-[9px] text-[var(--blue-l)] font-semibold">{widgetLinks[widget]!.label}</span>
                                 <ArrowRight size={10} strokeWidth={2} className="text-[var(--blue-l)]" />
                               </Link>
                             )}
diff --git a/src/features/dashboard/components/widgets/ActorsWidget.tsx b/src/features/dashboard/components/widgets/ActorsWidget.tsx
@@ -22,7 +22,7 @@ export function ActorsWidget() {
         const actC = ACT_C[snap.activityLevel] ?? 'var(--t2)';
         const staC = STA_C[snap.stance] ?? 'var(--t2)';
         return (
-          <Link key={actor.id} href={`/dashboard/actors?actor=${actor.id}`} className="no-underline">
+          <Link key={actor.id} href={`/dashboard/actors?day=${day}&actor=${actor.id}`} className="no-underline">
             <div
               className="flex items-start gap-2.5 px-3 py-2 cursor-pointer hover:bg-[var(--bg-3)] transition-colors"
               style={{
diff --git a/src/features/dashboard/components/widgets/BriefWidget.tsx b/src/features/dashboard/components/widgets/BriefWidget.tsx
@@ -78,7 +78,7 @@ export function BriefWidget() {
         {topEvents.map((evt, i) => {
           const sc = SEV_C[evt.severity] ?? 'var(--info)';
           return (
-            <Link key={evt.id} href={`/dashboard/feed?event=${evt.id}`} className="no-underline">
+            <Link key={evt.id} href={`/dashboard/feed?day=${day}&event=${evt.id}`} className="no-underline">
               <div
                 className="flex gap-2.5 items-start py-1.5 hover:bg-[var(--bg-3)] transition-colors"
                 style={{ borderBottom: i < topEvents.length - 1 ? '1px solid var(--bd-s)' : 'none', borderLeft: `3px solid ${sc}` }}
@@ -114,7 +114,7 @@ export function BriefWidget() {
 
       {/* link to full brief */}
       <div className="px-4 py-2.5">
-        <Link href="/dashboard/brief" className="no-underline flex items-center gap-1">
+        <Link href={`/dashboard/brief?day=${day}`} className="no-underline flex items-center gap-1">
           <span className="text-[9px] text-[var(--blue-l)] font-semibold">Read Full Brief →</span>
         </Link>
       </div>
diff --git a/src/features/dashboard/components/widgets/LatestEventsWidget.tsx b/src/features/dashboard/components/widgets/LatestEventsWidget.tsx
@@ -29,7 +29,7 @@ export function LatestEventsWidget() {
       {events.map((evt, i) => {
         const sc = SEV_C[evt.severity] ?? 'var(--info)';
         return (
-          <Link key={evt.id} href={`/dashboard/feed?event=${evt.id}`} className="no-underline">
+          <Link key={evt.id} href={`/dashboard/feed?day=${day}&event=${evt.id}`} className="no-underline">
             <div
               className="flex gap-3 items-start px-4 py-2 cursor-pointer hover:bg-[var(--bg-3)] transition-colors"
               style={{ borderBottom: i < events.length - 1 ? '1px solid var(--bd-s)' : 'none' }}
diff --git a/src/features/events/components/EventReportContent.tsx b/src/features/events/components/EventReportContent.tsx
@@ -1,5 +1,6 @@
 'use client';
 import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
 
 import { ArrowRight } from 'lucide-react';
 
@@ -34,6 +35,8 @@ type Props = {
 
 export function EventReportContent({ event, compact = false, pageScroll = false }: Props) {
   const sc = SEV_C[event.severity] ?? 'var(--info)';
+  const searchParams = useSearchParams();
+  const day = searchParams.get('day');
 
   return (
     <div className={cn(compact ? (pageScroll ? 'safe-px py-3' : 'px-3 py-3') : 'px-6 py-5')}>
@@ -103,8 +106,11 @@ export function EventReportContent({ event, compact = false, pageScroll = false
           <div className="flex flex-col gap-1.5">
             {event.actorResponses.map((r, i) => {
               const stC = STANCE_C[r.stance] ?? 'var(--t2)';
+              const actorHref = day
+                ? `/dashboard/actors?day=${day}&actor=${r.actorId}`
+                : `/dashboard/actors?actor=${r.actorId}`;
               return (
-                <Link key={i} href={`/dashboard/actors?actor=${r.actorId}`} className="no-underline">
+                <Link key={i} href={actorHref} className="no-underline">
                   <div
                     className="px-3 py-2 border border-[var(--bd)] cursor-pointer hover:bg-[var(--bg-3)] transition-colors"
                     style={{ borderLeft: `3px solid ${stC}` }}
diff --git a/src/features/events/components/FeedContent.tsx b/src/features/events/components/FeedContent.tsx
@@ -1,21 +1,22 @@
 'use client';
 
-import { useMemo,useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
-import { ArrowLeft,FileText } from 'lucide-react';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 
-import { track } from '@/shared/lib/analytics';
+import { ArrowLeft, FileText } from 'lucide-react';
 
 import { Button } from '@/components/ui/button';
 import { ResizableHandle,ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';
 
 import { EventDetail } from '@/features/events/components/EventDetail';
 import { EventLog } from '@/features/events/components/EventLog';
-import { ALL_TYPES,FeedFilterRail } from '@/features/events/components/FeedFilterRail';
+import { ALL_TYPES, FeedFilterRail } from '@/features/events/components/FeedFilterRail';
 import { useEvent, useEvents } from '@/features/events/queries';
 import { ListDetailScreenSkeleton } from '@/shared/components/loading/screen-skeletons';
 import { EmptyState } from '@/shared/components/shared/EmptyState';
 
+import { track } from '@/shared/lib/analytics';
 import { useConflictDay } from '@/shared/hooks/use-conflict-day';
 import { useIsLandscapePhone } from '@/shared/hooks/use-is-landscape-phone';
 import { useIsMobile } from '@/shared/hooks/use-is-mobile';
@@ -25,10 +26,9 @@ import { usePanelLayout } from '@/shared/hooks/use-panel-layout';
 import type { EventType,Severity } from '@/types/domain';
 
 export function FeedContent() {
-  const initEvent = useMemo(() => {
-    if (typeof window === 'undefined') return null;
-    return new URLSearchParams(window.location.search).get('event');
-  }, []);
+  const pathname = usePathname();
+  const router = useRouter();
+  const searchParams = useSearchParams();
   const isMobile = useIsMobile(1024);
   const isLandscapePhone = useIsLandscapePhone();
   const usePageScroll = isMobile && isLandscapePhone;
@@ -42,7 +42,7 @@ export function FeedContent() {
     Object.fromEntries(ALL_TYPES.map(t => [t, true])) as Record<EventType, boolean>,
   );
   const [verOnly, setVerOnly] = useState(false);
-  const [selId,   setSelId]   = useState<string | null>(() => initEvent);
+  const selId = searchParams.get('event');
   const [tab,     setTab]     = useState<'report' | 'signals'>('report');
   const [filtersOpen, setFiltersOpen] = useState(false);
   const { defaultLayout, onLayoutChanged } = usePanelLayout({ id: 'feed', panelIds: ['filters', 'log', 'detail'] });
@@ -60,6 +60,18 @@ export function FeedContent() {
 
   const selected = selectedEvent ?? allEvents?.find(e => e.id === selId) ?? null;
 
+  const handleSelect = useCallback((id: string | null) => {
+    const next = new URLSearchParams(searchParams.toString());
+    if (id) next.set('event', id);
+    else next.delete('event');
+    const qs = next.toString();
+    router.replace(qs ? `${pathname}?${qs}` : pathname, { scroll: false });
+    if (id) {
+      setTab('report');
+      track('event_selected', { event_id: id });
+    }
+  }, [pathname, router, searchParams]);
+
   if (isLoading) return <ListDetailScreenSkeleton />;
 
   if (isMobile) {
@@ -74,7 +86,7 @@ export function FeedContent() {
               <Button
                 variant="ghost"
                 size="xs"
-                onClick={() => setSelId(null)}
+                onClick={() => handleSelect(null)}
                 className="mono h-7 px-2 text-[9px] font-bold tracking-[0.06em]"
               >
                 <ArrowLeft size={12} />
@@ -129,7 +141,7 @@ export function FeedContent() {
               <EventLog
                 events={filtered}
                 selectedId={selId}
-                onSelect={id => { setSelId(id); if (id) { setTab('report'); track('event_selected', { event_id: id }); } }}
+                onSelect={handleSelect}
                 compact={usePageScroll}
                 pageScroll={usePageScroll}
               />
@@ -163,7 +175,7 @@ export function FeedContent() {
         <EventLog
           events={filtered}
           selectedId={selId}
-          onSelect={id => { setSelId(id); if (id) { setTab('report'); track('event_selected', { event_id: id }); } }}
+          onSelect={handleSelect}
         />
       </ResizablePanel>
       <ResizableHandle />
diff --git a/src/features/map/components/use-map-page.ts b/src/features/map/components/use-map-page.ts
