Modernize navbar and improve UX

eurunuela · claude · eurunuela · commit d6f7b72a1ace · 2025-12-14T21:13:33.000-07:00
- Add Notion-style navbar with favicon logo, pill tabs, and modern buttons - Implement click-outside-to-close for popup modals - Fix output directory path extraction from tedana log - Simplify tab component with pill-style selected state - Add version badge (v2.0) next to logo 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
diff --git a/claude-progress.txt b/claude-progress.txt
@@ -575,6 +575,50 @@ const blue2white = {
 
 ---
 
+## Session 3.4 - Modern Navbar and UX Polish (2025-12-14)
+
+### Goals
+- Modernize the top navbar with Notion-style design
+- Add click-outside-to-close functionality for popups
+- Add favicon as logo in navbar
+- Fix data path extraction for Info tab
+
+### Changes Made
+
+#### Modern Navbar (index.js)
+- **Left section**: Favicon logo (28x28px) + "Rica" text + version badge (v2.0)
+- **Center section**: Pill-style tab navigation with gray background container
+  - Selected tab has white background with subtle shadow
+  - Smooth hover effects on unselected tabs
+- **Right section**:
+  - "New" button with border and plus icon
+  - Icon-only "About" button (cleaner look)
+- Clean white background with subtle shadow
+- Better spacing and typography
+
+#### Tab Styling (TabFunctions.js)
+- Removed underline indicator animation
+- Changed to pill-style selected state (white background, rounded corners)
+- Simplified component by removing unused refs and effects
+
+#### Click-Outside-to-Close (IntroPopUp.js, AboutPopUp.js)
+- Added onClick handler on backdrop to close popup
+- Inner card uses stopPropagation() to prevent closing when clicking inside
+- Same behavior as clicking the X button
+
+#### Path Extraction Fix (IntroPopUp.js)
+- Fixed regex to properly extract output directory from tedana log
+- Now searches for "Using output directory:" and extracts full path
+- Handles paths with colons correctly
+
+### Files Modified
+- `src/index.js` - Modern navbar layout with favicon
+- `src/TabFunctions.js` - Pill-style tabs, removed underline
+- `src/PopUps/IntroPopUp.js` - Click-outside-to-close, path extraction fix
+- `src/PopUps/AboutPopUp.js` - Click-outside-to-close
+
+---
+
 ## Template for Future Sessions
 
 ```
diff --git a/features.json b/features.json
@@ -386,6 +386,46 @@
         "Verify the classification badge in the table updates"
       ],
       "passes": true
+    },
+    {
+      "id": "modern_navbar",
+      "category": "ui",
+      "description": "Display modern Notion-style navbar with logo, pill tabs, and action buttons",
+      "steps": [
+        "Load data and view the navbar",
+        "Verify favicon logo appears next to 'Rica' text",
+        "Verify version badge (v2.0) is displayed",
+        "Verify tabs are in pill-style container with gray background",
+        "Verify selected tab has white background",
+        "Verify New and About buttons have modern styling"
+      ],
+      "passes": true
+    },
+    {
+      "id": "click_outside_close_popup",
+      "category": "ui",
+      "description": "Close popups by clicking outside the modal card",
+      "steps": [
+        "Click 'New' button to open intro popup",
+        "Click outside the white card (on the gray backdrop)",
+        "Verify popup closes",
+        "Click 'About' button to open about popup",
+        "Click outside the white card",
+        "Verify popup closes"
+      ],
+      "passes": true
+    },
+    {
+      "id": "display_data_path",
+      "category": "visualization",
+      "description": "Display the correct output directory path in the Info tab",
+      "steps": [
+        "Load a tedana folder",
+        "Navigate to the 'Info' tab",
+        "Verify the output directory path is displayed in the blue badge",
+        "Verify the path matches the 'Using output directory' from tedana log"
+      ],
+      "passes": true
     }
   ]
 }
diff --git a/src/PopUps/AboutPopUp.js b/src/PopUps/AboutPopUp.js
@@ -4,8 +4,14 @@ import { faGithub } from "@fortawesome/free-brands-svg-icons";
 
 function AboutPopup({ closePopup }) {
   return (
-    <div className="fixed z-10 flex items-center justify-center w-full h-full bg-gray-500 bg-opacity-50 backdrop-blur-sm">
-      <div className="absolute z-20 w-1/3 px-16 py-10 m-auto bg-white h-fit rounded-xl drop-shadow-2xl animate-fadeIn">
+    <div
+      className="fixed z-10 flex items-center justify-center w-full h-full bg-gray-500 bg-opacity-50 backdrop-blur-sm"
+      onClick={closePopup}
+    >
+      <div
+        className="absolute z-20 w-1/3 px-16 py-10 m-auto bg-white h-fit rounded-xl drop-shadow-2xl animate-fadeIn"
+        onClick={(e) => e.stopPropagation()}
+      >
         <button
           onClick={closePopup}
           type="button"
diff --git a/src/PopUps/IntroPopUp.js b/src/PopUps/IntroPopUp.js
@@ -136,13 +136,17 @@ function IntroPopup({ onDataLoad, onLoadingStart, closePopup, isLoading }) {
           // Dataset path
           if (filename.startsWith("tedana_20") && filename.endsWith(".tsv")) {
             const text = await readFileAsText(file);
-            const parsed = Papa.parse(text, {
-              header: false,
-              skipEmptyLines: true,
-            });
-            const row = parsed.data[0];
-            const pathStr = row[row.length - 1];
-            dirPath = pathStr.includes(":") ? pathStr.split(":")[1].trim() : pathStr;
+            // Look for the line containing "Using output directory:"
+            const lines = text.split("\n");
+            for (const line of lines) {
+              if (line.includes("Using output directory:")) {
+                const match = line.match(/Using output directory:\s*(.+)/);
+                if (match) {
+                  dirPath = match[1].trim();
+                  break;
+                }
+              }
+            }
             processed++;
             setLoadingProgress((prev) => ({ ...prev, current: processed }));
           }
@@ -198,8 +202,14 @@ function IntroPopup({ onDataLoad, onLoadingStart, closePopup, isLoading }) {
   );
 
   return (
-    <div className="fixed z-10 flex items-center justify-center w-full h-full bg-gray-500 bg-opacity-50 backdrop-blur-sm">
-      <div className="absolute z-20 w-1/3 px-16 py-10 m-auto bg-white h-fit rounded-xl drop-shadow-2xl transition-all duration-300">
+    <div
+      className="fixed z-10 flex items-center justify-center w-full h-full bg-gray-500 bg-opacity-50 backdrop-blur-sm"
+      onClick={closePopup}
+    >
+      <div
+        className="absolute z-20 w-1/3 px-16 py-10 m-auto bg-white h-fit rounded-xl drop-shadow-2xl transition-all duration-300"
+        onClick={(e) => e.stopPropagation()}
+      >
         <button
           onClick={closePopup}
           type="button"
diff --git a/src/TabFunctions.js b/src/TabFunctions.js
@@ -1,94 +1,20 @@
-import React, { useRef, useState, useLayoutEffect, useCallback } from "react";
+import React, { useRef, useCallback } from "react";
 import { TabsProvider, useTabsContext } from "./TabComponents";
 
-const HORIZONTAL_PADDING = 16;
-
 function AnimatedTabs({ children, defaultIndex = 0, ...rest }) {
-  const [activeRect, setActiveRect] = useState(null);
-  const containerRef = useRef(null);
-  const [containerRect, setContainerRect] = useState(null);
-
-  // Update container rect on mount and resize
-  useLayoutEffect(() => {
-    const updateRect = () => {
-      if (containerRef.current) {
-        setContainerRect(containerRef.current.getBoundingClientRect());
-      }
-    };
-
-    updateRect();
-    window.addEventListener("resize", updateRect);
-    return () => window.removeEventListener("resize", updateRect);
-  }, []);
-
   return (
     <TabsProvider defaultIndex={defaultIndex}>
-      <TabsContextBridge setActiveRect={setActiveRect}>
-        <div
-          ref={containerRef}
-          style={{ ...rest.style, position: "relative" }}
-          {...rest}
-        >
-          {/* Animated underline indicator */}
-          <div
-            className="absolute bg-sky-500"
-            style={{
-              height: 4,
-              transition: "all 300ms ease",
-              left: activeRect && containerRect
-                ? activeRect.left - containerRect.left + HORIZONTAL_PADDING
-                : 0,
-              top: activeRect && containerRect
-                ? activeRect.bottom - containerRect.top - 3
-                : 0,
-              width: activeRect ? activeRect.width - HORIZONTAL_PADDING * 1.5 : 0,
-              opacity: activeRect ? 1 : 0,
-            }}
-          />
-          {children}
-        </div>
-      </TabsContextBridge>
+      <div style={{ ...rest.style }} {...rest}>
+        {children}
+      </div>
     </TabsProvider>
   );
 }
 
-// Helper component to access context and pass setActiveRect
-function TabsContextBridge({ children, setActiveRect }) {
-  return (
-    <ActiveRectContext.Provider value={setActiveRect}>
-      {children}
-    </ActiveRectContext.Provider>
-  );
-}
-
-const ActiveRectContext = React.createContext(null);
-
 function AnimatedTab({ index, children, style, ...props }) {
   const { selectedIndex, selectTab } = useTabsContext();
   const isSelected = selectedIndex === index;
   const tabRef = useRef(null);
-  const setActiveRect = React.useContext(ActiveRectContext);
-
-  // Update active rect when this tab becomes selected
-  useLayoutEffect(() => {
-    if (isSelected && tabRef.current) {
-      setActiveRect(tabRef.current.getBoundingClientRect());
-    }
-  }, [isSelected, setActiveRect]);
-
-  // Also update on resize
-  useLayoutEffect(() => {
-    if (!isSelected) return;
-
-    const updateRect = () => {
-      if (tabRef.current) {
-        setActiveRect(tabRef.current.getBoundingClientRect());
-      }
-    };
-
-    window.addEventListener("resize", updateRect);
-    return () => window.removeEventListener("resize", updateRect);
-  }, [isSelected, setActiveRect]);
 
   const handleClick = useCallback(() => {
     selectTab(index);
@@ -99,15 +25,33 @@ function AnimatedTab({ index, children, style, ...props }) {
       ref={tabRef}
       role="tab"
       aria-selected={isSelected}
-      className={`text-gray-500 hover:cursor-pointer focus:outline-none transition-colors duration-200 ${
-        isSelected ? "text-gray-900" : ""
-      }`}
       onClick={handleClick}
       style={{
-        ...style,
-        padding: `8px ${HORIZONTAL_PADDING}px`,
-        background: "white",
+        display: "flex",
+        alignItems: "center",
+        padding: "6px 12px",
+        fontSize: "13px",
+        fontWeight: isSelected ? "600" : "500",
+        color: isSelected ? "#1f2937" : "#6b7280",
+        backgroundColor: isSelected ? "#ffffff" : "transparent",
         border: "none",
+        borderRadius: "6px",
+        cursor: "pointer",
+        transition: "all 0.15s ease",
+        boxShadow: isSelected ? "0 1px 2px rgba(0, 0, 0, 0.05)" : "none",
+        ...style,
+      }}
+      onMouseEnter={(e) => {
+        if (!isSelected) {
+          e.currentTarget.style.color = "#374151";
+          e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.5)";
+        }
+      }}
+      onMouseLeave={(e) => {
+        if (!isSelected) {
+          e.currentTarget.style.color = "#6b7280";
+          e.currentTarget.style.backgroundColor = "transparent";
+        }
       }}
       {...props}
     >
diff --git a/src/index.js b/src/index.js
