@johndimm/constellations 1.0.1 → 1.0.3

package/components/AppHeader.tsx

@@ -1,70 +1,107 @@
+"use client";
 import React from 'react';
-import { ChevronRight, ChevronLeft, Key } from 'lucide-react';
+import { ChevronRight, ChevronLeft, X } from 'lucide-react';
 import { GraphNode } from '../types';
 
 interface AppHeaderProps {
     showHeader: boolean;
     panelCollapsed: boolean;
     setPanelCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
-    showBrowse: boolean;
-    handleOpenPeopleBrowser: () => void;
     selectedNode: GraphNode | null;
     sidebarCollapsed: boolean;
-    setSidebarCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
     setSidebarToggleSignal: React.Dispatch<React.SetStateAction<number>>;
-    onReset: () => void;
+    /** When set, shows a top-right control that leaves full-screen (e.g. back to player). */
+    onClose?: () => void;
+    /**
+     * When set (e.g. `/` or `/player`), the close control is a real `href` link so navigation works
+     * even if pointer-event layering blocked the old button. `onClick` can still run for cleanup.
+     */
+    closeHref?: string;
+    /**
+     * When the host app shows its own top bar (e.g. Trailer Vision nav, ~44px), set so this header
+     * does not sit at viewport top:0 and steal clicks from the host nav. Use `top-11` for 2.75rem.
+     */
+    offsetTopClass?: string;
 }
 
 const AppHeader: React.FC<AppHeaderProps> = ({
     showHeader,
     panelCollapsed,
     setPanelCollapsed,
-    showBrowse,
-    handleOpenPeopleBrowser,
     selectedNode,
     sidebarCollapsed,
-    setSidebarCollapsed,
     setSidebarToggleSignal,
-    onReset
+    onClose,
+    closeHref,
+    offsetTopClass = "top-0",
 }) => {
     if (!showHeader) return null;
 
     return (
-        <header className="fixed top-0 left-0 right-0 z-50 min-h-14 bg-slate-900/95 backdrop-blur border-b border-slate-800 flex items-center justify-between px-2 sm:px-3 py-2 gap-2 overflow-x-hidden max-w-full">
-            <div className="flex items-center gap-1.5 sm:gap-2 min-w-0">
+        <header
+            className={`absolute left-0 right-0 z-[200] h-14 max-h-14 min-h-14 shrink-0 pointer-events-auto bg-slate-900/95 backdrop-blur flex items-center justify-between px-2 sm:px-3 py-2 gap-2 overflow-x-hidden max-w-full ${offsetTopClass}`}
+        >
+            <div className="pointer-events-auto flex min-w-0 items-center gap-1.5 sm:gap-2">
                 <button
+                    type="button"
                     onClick={() => setPanelCollapsed(c => !c)}
                     className="w-9 h-9 sm:w-10 sm:h-10 bg-slate-800/80 border border-slate-700 rounded-lg flex items-center justify-center text-slate-300 hover:text-white transition flex-shrink-0"
-                    title={panelCollapsed ? "Show controls" : "Hide controls"}
+                    title={
+                        panelCollapsed
+                            ? "Show left panel — search, save/load, graph options"
+                            : "Hide left panel"
+                    }
+                    aria-label={panelCollapsed ? "Show control panel" : "Hide control panel"}
                 >
                     {panelCollapsed ? <ChevronRight size={18} /> : <ChevronLeft size={18} />}
                 </button>
-                <button
-                    onClick={(e) => {
-                        e.preventDefault();
-                        window.location.href = window.location.origin + window.location.pathname;
-                    }}
-                    className="text-base sm:text-lg font-bold text-red-500 whitespace-nowrap hover:text-red-400 transition-colors"
-                >
-                    Constellations
-                </button>
+                {closeHref ? (
+                    <a
+                        href={closeHref}
+                        title="Film & Music — return to hub"
+                        className="text-base sm:text-lg font-bold text-red-500 whitespace-nowrap hover:text-red-400 transition-colors"
+                    >
+                        Constellations
+                    </a>
+                ) : (
+                    <span className="text-base sm:text-lg font-bold text-red-500 whitespace-nowrap">
+                        Constellations
+                    </span>
+                )}
             </div>
-            <div className="flex items-center gap-3 sm:gap-4 flex-shrink-0 mr-2">
-                <button
-                    onClick={handleOpenPeopleBrowser}
-                    className={`text-sm font-bold uppercase tracking-widest transition-colors ${showBrowse ? 'text-red-500' : 'text-slate-400 hover:text-white'}`}
-                >
-                    People
-                </button>
+            <div className="flex items-center gap-2 sm:gap-3 flex-shrink-0 mr-1">
                 {selectedNode && (
                     <button
-                        onClick={() => { setSidebarCollapsed(c => !c); setSidebarToggleSignal(s => s + 1); }}
+                        type="button"
+                        onClick={() => {
+                            setSidebarToggleSignal((s) => s + 1);
+                        }}
                         className="w-9 h-9 sm:w-10 sm:h-10 bg-slate-800/80 border border-slate-700 rounded-lg flex items-center justify-center text-slate-300 hover:text-white transition flex-shrink-0"
-                        title="Toggle details"
+                        title={
+                            sidebarCollapsed
+                                ? "Show right details (selected node on graph)"
+                                : "Hide right details"
+                        }
+                        aria-label={sidebarCollapsed ? "Show details panel" : "Hide details panel"}
                     >
                         {sidebarCollapsed ? <ChevronLeft size={18} /> : <ChevronRight size={18} />}
                     </button>
                 )}
+                {!closeHref && onClose && (
+                    <button
+                        type="button"
+                        onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            onClose();
+                        }}
+                        className="w-9 h-9 sm:w-10 sm:h-10 bg-slate-800/80 border border-slate-700 rounded-lg flex items-center justify-center text-slate-300 hover:text-white hover:border-slate-600 transition flex-shrink-0"
+                        title="Leave full screen and return to Trailer Vision"
+                        aria-label="Close constellations"
+                    >
+                        <X size={20} strokeWidth={2} />
+                    </button>
+                )}
             </div>
         </header>
     );

package/components/AppNotifications.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React from 'react';
 
 interface AppNotificationsProps {

package/components/BrowsePeople.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React, { useState, useEffect, useCallback } from 'react';
 import { Search, ChevronLeft, ChevronRight, X, Filter } from 'lucide-react';
 
@@ -124,6 +125,8 @@ const BrowsePeople: React.FC<BrowsePeopleProps> = ({ baseUrl = '', onSelect, exp
     'South African', 'New Zealander', 'Israeli', 'Saudi Arabian', 'Korean', 'Thai', 'Vietnamese', 'Indonesian'
   ];
 
+  const isPureBrowse = useCallback(() => !searchTerm.trim() && !occupation && !nationality, [searchTerm, occupation, nationality]);
+
   const buildSearchQuery = useCallback(() => {
     const parts: string[] = [];