feat: Google-style top bar + smart FAB visibility

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs_tailwind_shadcn_ts",
-  "version": "0.2.13",
+  "version": "0.2.14",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3000 2>&1 | tee dev.log",

src/app/categories/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState, useCallback, Suspense } from 'react';
+import { useEffect, useState, useCallback, useRef, Suspense } from 'react';
 import { useSearchParams, useRouter } from 'next/navigation';
 import { api, formatPrice, type Product } from '@/lib/api';
 import { Card } from '@/components/ui/card';
@@ -55,6 +55,24 @@ function CategoriesContent() {
   const [showSortMenu, setShowSortMenu] = useState(false);
   const [showSearch, setShowSearch] = useState(false);
 
+  // Ref for the top search bar — dispatches visibility events to GlobalSpotlight
+  const searchBarRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const el = searchBarRef.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        window.dispatchEvent(
+          new CustomEvent('searchbar-visibility', { detail: { visible: entry.isIntersecting } })
+        );
+      },
+      { threshold: 0 }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
   const load = useCallback(async () => {
     setLoading(true);
     if (searchQuery.trim()) {
@@ -143,7 +161,7 @@ function CategoriesContent() {
       {/* === MOBILE LAYOUT === */}
       <div className="md:hidden">
         {/* Search bar — full width with back arrow */}
-        <div className="sticky top-0 z-30 bg-white px-3 pt-3 pb-2 border-b border-slate-100">
+        <div ref={searchBarRef} className="sticky top-0 z-30 bg-white px-3 pt-3 pb-2 border-b border-slate-100">
           <div className="flex items-center gap-2">
             <Link href="/" className="shrink-0">
               <ChevronLeft className="w-5 h-5 text-black" />

src/app/page.tsx

@@ -48,6 +48,31 @@ export default function HomePage() {
   const [following, setFollowing] = useState<Set<string>>(new Set());
   const [liveCount, setLiveCount] = useState(0);
 
+  // Ref for the top search bar — used to detect when it's scrolled out of view
+  // so the GlobalSpotlight floating search button can appear.
+  const searchBarRef = useRef<HTMLDivElement>(null);
+
+  // IntersectionObserver: when the top search bar leaves the viewport,
+  // dispatch an event that GlobalSpotlight listens for to show/hide the FAB.
+  useEffect(() => {
+    const el = searchBarRef.current;
+    if (!el) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        window.dispatchEvent(
+          new CustomEvent('searchbar-visibility', {
+            detail: { visible: entry.isIntersecting },
+          })
+        );
+      },
+      { threshold: 0 }
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
   useEffect(() => {
     (async () => {
       try {
@@ -205,16 +230,38 @@ export default function HomePage() {
 
   return (
     <div className="bg-white min-h-screen max-w-xl mx-auto">
-      {/* Search trigger */}
-      <div className="px-3 pt-3 pb-2 bg-white sticky top-0 z-30">
+      {/* Top bar: Logo + Search + Messenger (Google-style) */}
+      <div
+        ref={searchBarRef}
+        className="px-3 pt-3 pb-2 bg-white sticky top-0 z-30 flex items-center gap-2"
+      >
+        {/* Logo (left side) */}
+        <Link href="/" className="shrink-0 flex items-center gap-1.5">
+          <div className="w-8 h-8 rounded-lg bg-black flex items-center justify-center">
+            <span className="text-white font-extrabold text-base" style={{ fontFamily: 'var(--font-geist-mono)' }}>C</span>
+          </div>
+        </Link>
+
+        {/* Search bar (center, flex-1) */}
         <button
           onClick={() => window.dispatchEvent(new CustomEvent('open-spotlight'))}
-          className="w-full flex items-center bg-neutral-100 rounded-full px-4 py-2.5 hover:bg-neutral-200 transition-colors group"
+          className="flex-1 flex items-center bg-neutral-100 rounded-full px-4 py-2.5 hover:bg-neutral-200 transition-colors group"
         >
           <Search className="w-4 h-4 text-neutral-400 mr-2 group-hover:text-black transition-colors" />
           <span className="flex-1 text-left text-sm text-neutral-400">Search products, categories...</span>
           <kbd className="hidden sm:flex px-1.5 py-0.5 bg-white rounded text-[9px] font-bold text-neutral-400 border border-neutral-200">⌘K</kbd>
         </button>
+
+        {/* Messenger icon (right side) */}
+        <Link
+          href="/ai-chat"
+          className="shrink-0 w-10 h-10 rounded-full hover:bg-neutral-100 flex items-center justify-center transition-colors relative"
+          aria-label="Messages"
+        >
+          <MessageCircle className="w-5 h-5 text-black" />
+          {/* Unread indicator dot */}
+          <span className="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full border border-white" />
+        </Link>
       </div>
 
       {/* Stories bar */}

src/app/search/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState, useCallback, Suspense } from 'react';
+import { useEffect, useState, useCallback, useRef, Suspense } from 'react';
 import { useSearchParams, useRouter } from 'next/navigation';
 import { api, formatPrice, type Product, API_BASE } from '@/lib/api';
 import { Card } from '@/components/ui/card';
@@ -27,6 +27,24 @@ function SearchContent() {
   const [followUpLoading, setFollowUpLoading] = useState(false);
   const [view, setView] = useState<'ai' | 'products' | 'videos'>('ai');
 
+  // Ref for the top search bar — dispatches visibility events to GlobalSpotlight
+  const searchBarRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const el = searchBarRef.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        window.dispatchEvent(
+          new CustomEvent('searchbar-visibility', { detail: { visible: entry.isIntersecting } })
+        );
+      },
+      { threshold: 0 }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
   const doSearch = useCallback(async (q: string) => {
     if (!q.trim()) return;
     setLoading(true);
@@ -122,7 +140,7 @@ function SearchContent() {
   return (
     <div className="bg-white min-h-screen">
       {/* Header */}
-      <div className="border-b border-neutral-200 sticky top-0 z-40 bg-white/95 backdrop-blur-xl">
+      <div ref={searchBarRef} className="border-b border-neutral-200 sticky top-0 z-40 bg-white/95 backdrop-blur-xl">
         <div className="max-w-3xl mx-auto px-4 py-3 flex items-center gap-3">
           <button onClick={() => router.back()} className="shrink-0 w-9 h-9 rounded-full hover:bg-neutral-100 flex items-center justify-center transition-colors">
             <ChevronLeft className="w-5 h-5 text-black" />

src/components/global-spotlight.tsx

@@ -3,6 +3,7 @@
 import { useSpotlight, SpotlightSearch } from '@/components/spotlight-search';
 import { usePathname } from 'next/navigation';
 import { Search } from 'lucide-react';
+import { useEffect, useState } from 'react';
 
 /**
  * GlobalSpotlight — renders the SpotlightSearch overlay + a floating search trigger.
@@ -11,12 +12,18 @@ import { Search } from 'lucide-react';
  * - Shows a floating search button on mobile (bottom-right, above nav)
  * - The floating button is HIDDEN on pages where search doesn't make sense:
  *   login, checkout, payment, seller dashboard (has its own nav)
+ * - The floating button is ALSO hidden when a top search bar is visible on
+ *   the current page (e.g. the homepage's sticky search bar). When the user
+ *   scrolls past the top search bar, the floating button appears.
+ *   This is controlled via a 'searchbar-visibility' CustomEvent that pages
+ *   dispatch from an IntersectionObserver on their search bar element.
  */
 export function GlobalSpotlight() {
   const { isOpen, setIsOpen } = useSpotlight();
   const pathname = usePathname();
+  const [searchBarVisible, setSearchBarVisible] = useState(false);
 
-  // Pages where the floating search button should NOT appear
+  // Pages where the floating search button should NOT appear at all
   const hideOnRoutes = [
     '/login',
     '/checkout',
@@ -30,12 +37,30 @@ export function GlobalSpotlight() {
     pathname === route || pathname.startsWith(route + '/')
   );
 
+  // Listen for search-bar visibility events from pages that have a top search bar.
+  // When the bar is visible on screen, hide the FAB. When scrolled past, show it.
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const detail = (e as CustomEvent<{ visible: boolean }>).detail;
+      setSearchBarVisible(detail?.visible ?? false);
+    };
+    window.addEventListener('searchbar-visibility', handler);
+    return () => window.removeEventListener('searchbar-visibility', handler);
+  }, []);
+
+  // Reset visibility state when navigating to a new page
+  useEffect(() => {
+    setSearchBarVisible(false);
+  }, [pathname]);
+
+  const showFloatingButton = !isOpen && !shouldHideButton && !searchBarVisible;
+
   return (
     <>
       <SpotlightSearch isOpen={isOpen} onClose={() => setIsOpen(false)} />
 
-      {/* Floating search trigger (mobile only, hidden on auth/seller/checkout pages) */}
-      {!isOpen && !shouldHideButton && (
+      {/* Floating search trigger (mobile only) */}
+      {showFloatingButton && (
         <button
           onClick={() => setIsOpen(true)}
           className="fixed bottom-20 right-4 z-40 w-12 h-12 rounded-full bg-black shadow-lg flex items-center justify-center md:hidden hover:scale-105 transition-transform"