From 37e0d002145f09ce6b6150297559100666143e3e Mon Sep 17 00:00:00 2001
From: Norbert Maciaszek <norbert@ambiscale.com>
Date: Fri, 22 Aug 2025 00:48:08 +0200
Subject: [PATCH] feat: enhance layout and navbar components for improved user
 experience; add padding to main content, update navbar structure with
 floating navigation, and refine search functionality

---
 src/app/layout.tsx                            |   2 +-
 .../molecules/TrackedMovies/index.tsx         |   2 +-
 .../Navbar/components/Search/index.tsx        | 211 ++++++++--------
 src/components/organisms/Navbar/index.tsx     | 236 +++++++-----------
 4 files changed, 190 insertions(+), 261 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 7d7a638..b65d589 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -26,7 +26,7 @@ export default async function RootLayout({
         <GlobalStoreProvider initialMovies={movies}>
           <AuroraBackground />
           <Navbar />
-          <main className="relative">{children}</main>
+          <main className="relative pb-10">{children}</main>
         </GlobalStoreProvider>
       </body>
     </html>
diff --git a/src/components/molecules/TrackedMovies/index.tsx b/src/components/molecules/TrackedMovies/index.tsx
index e14068d..7cb2bed 100644
--- a/src/components/molecules/TrackedMovies/index.tsx
+++ b/src/components/molecules/TrackedMovies/index.tsx
@@ -54,7 +54,7 @@ export const TrackedMovies: FC<Props> = ({
   );
 
   return (
-    <section className="bg-gray-900/50 border-b border-gray-800">
+    <section className="blockp bg-gray-900/50 border-b border-gray-800">
       <div className="container py-6">
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
           {/* Currently in cinemas. */}
diff --git a/src/components/organisms/Navbar/components/Search/index.tsx b/src/components/organisms/Navbar/components/Search/index.tsx
index 94610a5..f1640b2 100644
--- a/src/components/organisms/Navbar/components/Search/index.tsx
+++ b/src/components/organisms/Navbar/components/Search/index.tsx
@@ -1,20 +1,22 @@
 "use client";
-import { IoClose, IoSearch } from "react-icons/io5";
-import { useEffect, useState } from "react";
+import { IoClose } from "react-icons/io5";
+import { FC, useEffect, useState } from "react";
 import { SearchResult } from "@/lib/tmdb/types";
 import { TMDB } from "@/lib/tmdb";
 import { SearchInput } from "@/components/atoms/SearchInput";
 import { useKeyListener } from "@/hooks/useKeyListener";
 import { useRef } from "react";
-import { useOutsideClick } from "@/hooks/useOutsideClick";
 import { Button } from "@/components/atoms/Button";
 import { MovieList } from "@/components/molecules/MovieList";
 import { Spinner } from "@/components/atoms/Spinner";
 import { usePathname } from "next/navigation";
 
-export const Search = () => {
+type Props = {
+  onClose: () => void;
+};
+
+export const Search: FC<Props> = ({ onClose }) => {
   const ref = useRef<HTMLDivElement>(null);
-  const [isSearchOpen, setIsSearchOpen] = useState(false);
   const [response, setResponse] = useState<SearchResult | null>(null);
   const [query, setQuery] = useState("");
   const isLoading = query.length > 2 && !response;
@@ -22,7 +24,7 @@ export const Search = () => {
   const pathname = usePathname();
 
   useEffect(() => {
-    setIsSearchOpen(false);
+    query && onClose();
   }, [pathname]);
 
   const handleSearch = async (query: string) => {
@@ -39,127 +41,110 @@ export const Search = () => {
   };
 
   const handleClose = () => {
-    setIsSearchOpen(false);
-    setResponse(null);
+    onClose();
   };
 
   useKeyListener("Escape", handleClose);
-  useOutsideClick(ref, handleClose);
 
   return (
-    <>
+    <div className="fixed inset-0 z-[60] overflow-y-auto">
+      {/* Close button */}
       <Button
-        theme="secondary"
+        theme="glass"
         size="icon"
-        className="group relative"
-        onClick={() => setIsSearchOpen(!isSearchOpen)}
+        className="absolute top-6 right-6 z-10 group hover:!bg-red-500/50"
+        onClick={handleClose}
       >
-        <IoSearch className="text-white" />
+        <IoClose className="text-white transition-transform duration-300 group-hover:rotate-90" />
       </Button>
 
-      {isSearchOpen && (
-        <div className="fixed inset-0 z-[60] overflow-y-auto">
-          {/* Aurora Background */}
-          <div className="fixed inset-0 bg-gradient-to-tr from-purple-900/98 via-blue-900/98 to-teal-900/98 brightness-75"></div>
+      <div className="relative min-h-full flex flex-col py-20" ref={ref}>
+        <div className="container mx-auto px-4 flex-1">
+          {/* Header Section */}
+          <div className="text-center mb-12">
+            <h2 className="text-4xl lg:text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-purple-200 to-cyan-200 mb-4">
+              Znajdź Filmy
+            </h2>
+            <p className="text-lg text-gray-300 mb-8">
+              Odkryj niesamowite filmy z całego świata
+            </p>
 
-          {/* Close button */}
-          <Button
-            theme="glass"
-            size="icon"
-            className="absolute top-6 right-6 z-10 group hover:!bg-red-500/50"
-            onClick={handleClose}
-          >
-            <IoClose className="text-white transition-transform duration-300 group-hover:rotate-90" />
-          </Button>
-
-          <div className="relative min-h-full flex flex-col py-20" ref={ref}>
-            <div className="container mx-auto px-4 flex-1">
-              {/* Header Section */}
-              <div className="text-center mb-12">
-                <h2 className="text-4xl lg:text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-purple-200 to-cyan-200 mb-4">
-                  Znajdź Filmy
-                </h2>
-                <p className="text-lg text-gray-300 mb-8">
-                  Odkryj niesamowite filmy z całego świata
-                </p>
-
-                {/* Enhanced Search Input */}
-                <div className="relative max-w-2xl mx-auto">
-                  <div className="absolute inset-0 bg-gradient-to-r from-purple-500/30 to-cyan-500/30 rounded-2xl"></div>
-                  <div className="relative bg-gradient-to-br from-white/15 via-white/8 to-white/12 border border-white/20 rounded-2xl p-2 shadow-2xl shadow-purple-500/10">
-                    <SearchInput
-                      className="w-full px-3 bg-transparent border-none text-lg lg:text-xl placeholder-gray-400 text-white focus:outline-none"
-                      onChange={handleSearch}
-                      placeholder="Wpisz tytuł filmu..."
-                      autoFocus={true}
-                    />
-                  </div>
-                </div>
+            {/* Enhanced Search Input */}
+            <div className="relative max-w-2xl mx-auto">
+              <div className="absolute inset-0 bg-gradient-to-r from-purple-500/30 to-cyan-500/30 rounded-2xl"></div>
+              <div className="relative bg-gradient-to-br from-white/15 via-white/8 to-white/12 border border-white/20 rounded-2xl p-2 shadow-2xl shadow-purple-500/10">
+                <SearchInput
+                  className="w-full px-3 bg-transparent border-none text-lg lg:text-xl placeholder-gray-400 text-white focus:outline-none"
+                  onChange={handleSearch}
+                  placeholder="Wpisz tytuł filmu..."
+                  autoFocus={true}
+                />
               </div>
-
-              {/* Loading State */}
-              {isLoading && (
-                <div className="text-center py-20">
-                  <div className="relative inline-block">
-                    <Spinner />
-                    <div className="absolute inset-0 bg-gradient-to-r from-purple-400 to-cyan-400 rounded-full opacity-30 animate-pulse"></div>
-                  </div>
-                  <p className="text-gray-300 mt-4 text-lg">Szukam filmów...</p>
-                </div>
-              )}
-
-              {/* Results Header */}
-              {results && (
-                <div className="mb-8">
-                  <p className="text-white font-semibold flex items-center justify-center">
-                    <span className="mr-2 w-2 h-2 bg-gradient-to-r from-green-400 to-emerald-400 rounded-full animate-pulse"></span>
-                    Znaleziono {total_results} filmów
-                  </p>
-                </div>
-              )}
-
-              {/* Results */}
-              {results && (
-                <div className="mb-12">
-                  <MovieList
-                    overrideMovies={results.slice(0, 4).map((m) => ({
-                      ...m,
-                      favorite: false,
-                      seen: false,
-                      genre_ids: JSON.stringify(m.genre_ids),
-                    }))}
-                    fluid
-                  />
-                </div>
-              )}
-
-              {/* Show More Button */}
-              {total_results > 4 && (
-                <div className="text-center">
-                  <div className="inline-block">
-                    <Button href={`/search?s=${query}`}>
-                      <span className="flex items-center gap-2">
-                        Zobacz wszystkie ({total_results})
-                      </span>
-                    </Button>
-                  </div>
-                </div>
-              )}
-
-              {/* No Results */}
-              {query.length >= 3 && results && results.length === 0 && (
-                <div className="text-center py-20">
-                  <div className="text-6xl mb-4">🎬</div>
-                  <h3 className="text-2xl font-bold text-white mb-2">
-                    Brak wyników
-                  </h3>
-                  <p className="text-gray-400">Spróbuj wyszukać inny tytuł</p>
-                </div>
-              )}
             </div>
           </div>
+
+          {/* Loading State */}
+          {isLoading && (
+            <div className="text-center py-20">
+              <div className="relative inline-block">
+                <Spinner />
+                <div className="absolute inset-0 bg-gradient-to-r from-purple-400 to-cyan-400 rounded-full opacity-30 animate-pulse"></div>
+              </div>
+              <p className="text-gray-300 mt-4 text-lg">Szukam filmów...</p>
+            </div>
+          )}
+
+          {/* Results Header */}
+          {results && (
+            <div className="mb-8">
+              <p className="text-white font-semibold flex items-center justify-center">
+                <span className="mr-2 w-2 h-2 bg-gradient-to-r from-green-400 to-emerald-400 rounded-full animate-pulse"></span>
+                Znaleziono {total_results} filmów
+              </p>
+            </div>
+          )}
+
+          {/* Results */}
+          {results && (
+            <div className="mb-12">
+              <MovieList
+                showFilters={false}
+                overrideMovies={results.slice(0, 4).map((m) => ({
+                  ...m,
+                  favorite: false,
+                  seen: false,
+                  genre_ids: JSON.stringify(m.genre_ids),
+                }))}
+                fluid
+              />
+            </div>
+          )}
+
+          {/* Show More Button */}
+          {total_results > 4 && (
+            <div className="text-center">
+              <div className="inline-block">
+                <Button href={`/search?s=${query}`}>
+                  <span className="flex items-center gap-2">
+                    Zobacz wszystkie ({total_results})
+                  </span>
+                </Button>
+              </div>
+            </div>
+          )}
+
+          {/* No Results */}
+          {query.length >= 3 && results && results.length === 0 && (
+            <div className="text-center py-20">
+              <div className="text-6xl mb-4">🎬</div>
+              <h3 className="text-2xl font-bold text-white mb-2">
+                Brak wyników
+              </h3>
+              <p className="text-gray-400">Spróbuj wyszukać inny tytuł</p>
+            </div>
+          )}
         </div>
-      )}
-    </>
+      </div>
+    </div>
   );
 };
diff --git a/src/components/organisms/Navbar/index.tsx b/src/components/organisms/Navbar/index.tsx
index f2ccf19..5d73f36 100644
--- a/src/components/organisms/Navbar/index.tsx
+++ b/src/components/organisms/Navbar/index.tsx
@@ -1,180 +1,124 @@
 "use client";
 import Link from "next/link";
-import { useEffect, useState } from "react";
-import { HiMenuAlt3, HiX, HiSparkles } from "react-icons/hi";
+import { useState } from "react";
+import { HiSearch, HiHome, HiViewGrid } from "react-icons/hi";
 import { Search } from "./components/Search";
 import { usePathname } from "next/navigation";
-import { Button } from "@/components/atoms/Button";
 
-const links = [
+const navigationItems = [
+  {
+    label: "Strona Główna",
+    href: "/",
+    icon: HiHome,
+    emoji: "🏠",
+    color: "from-blue-500 to-purple-600",
+    description: "Twoja lista filmów",
+  },
   {
     label: "Odkrywaj",
     href: "/odkrywaj",
-    icon: "🎬",
-  },
-  {
-    label: "Moja Lista",
-    href: "/",
-    icon: "📚",
+    icon: HiViewGrid,
+    emoji: "🎬",
+    color: "from-purple-500 to-pink-600",
+    description: "Znajdź nowe filmy",
   },
 ];
 
 export const Navbar = () => {
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [searchOpen, setSearchOpen] = useState(false);
   const pathname = usePathname();
 
-  useEffect(() => {
-    setIsMobileMenuOpen(false);
-  }, [pathname]);
-
-  const toggleMobileMenu = () => {
-    setIsMobileMenuOpen(!isMobileMenuOpen);
-  };
-
   return (
     <>
-      {/* Main Navbar */}
-      <header className="sticky top-0 w-full z-50 transition-all duration-300">
-        {/* Aurora background effect */}
-        <div className="absolute inset-0 bg-gradient-to-r from-slate-900/95 via-slate-800/98 to-slate-900/95"></div>
+      {/* Elegant Floating Navigation */}
+      <nav className="fixed bottom-0 left-0 right-0 z-50 pointer-events-none bg-black/90 lg:bg-transparent">
+        <div className="relative h-24 flex items-center justify-between px-6">
+          {/* Brand Name - Floating Left */}
+          <div className="pointer-events-auto">
+            <Link href="/" className="group flex items-center gap-3">
+              <div className="relative">
+                <h1 className="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-purple-200 to-cyan-200 group-hover:from-purple-300 group-hover:to-cyan-300 transition-all duration-500">
+                  MovieBox
+                </h1>
+              </div>
+            </Link>
+          </div>
 
-        {/* Border glow */}
-        <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-purple-400/50 to-transparent"></div>
-
-        <div className="relative">
-          <div className=" mx-auto px-4 max-w-[1500px]">
-            <div className="flex items-center justify-between h-16 lg:h-20">
-              {/* Logo */}
-              <Link
-                href="/"
-                className="group flex items-center gap-3 transition-all duration-300 hover:scale-105"
-              >
-                <div className="relative">
-                  <img
-                    src="/logo.svg"
-                    alt="MovieBox"
-                    className="w-10 h-10 lg:w-12 lg:h-12 transition-all duration-300 group-hover:brightness-110"
-                  />
-                  <div className="absolute inset-0 bg-gradient-to-r from-purple-400 to-cyan-400 rounded-full opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
-                </div>
-                <div className="hidden sm:block">
-                  <h1 className="text-xl lg:text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-white to-gray-300 group-hover:from-purple-200 group-hover:to-cyan-200 transition-all duration-300">
-                    MovieBox
-                  </h1>
-                  <div className="flex items-center gap-1">
-                    <HiSparkles className="w-3 h-3 text-purple-400 animate-pulse" />
-                    <span className="text-xs text-gray-400 font-medium">
-                      Premium Experience
-                    </span>
-                  </div>
-                </div>
-              </Link>
-
-              {/* Desktop Navigation */}
-              <nav className="hidden md:flex items-center gap-8">
-                {links.map((link) => (
+          {/* Navigation & Action Orbs - Right Side */}
+          <div className="flex items-center gap-3 pointer-events-auto">
+            {/* Desktop Navigation Orbs */}
+            <div className="flex items-center gap-3">
+              {navigationItems.map((item, index) => {
+                const isActive = pathname === item.href;
+                return (
                   <Link
-                    key={link.href}
-                    href={link.href}
-                    className="group relative px-4 py-2 rounded-xl transition-all duration-300 hover:bg-gradient-to-r hover:from-white/10 hover:to-white/5 border border-transparent hover:border-white/10"
+                    key={item.href}
+                    href={item.href}
+                    className="relative group cursor-pointer"
                   >
-                    <div className="flex items-center gap-2">
-                      <span className="text-lg">{link.icon}</span>
-                      <span className="font-medium text-gray-300 group-hover:text-white transition-colors duration-300">
-                        {link.label}
-                      </span>
+                    {/* Main orb */}
+                    <div
+                      className={`relative w-12 h-12 rounded-full border border-white/20 shadow-lg transition-all duration-300 hover:scale-105
+                      ${
+                        isActive
+                          ? "bg-gradient-to-br from-purple-500/80 to-cyan-500/80 shadow-purple-500/40"
+                          : "bg-gradient-to-br from-slate-800/95 to-slate-900/95 shadow-slate-500/20"
+                      }`}
+                    >
+                      {/* Icon */}
+                      <div className="w-full h-full flex items-center justify-center">
+                        <item.icon
+                          className={`w-5 h-5 transition-colors duration-300 
+                          ${
+                            isActive
+                              ? "text-white"
+                              : "text-gray-300 group-hover:text-white"
+                          }`}
+                        />
+                      </div>
+                    </div>
+
+                    {/* Tooltip */}
+                    <div className="absolute -bottom-12 left-1/2 transform -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none">
+                      <div className="bg-black/90 text-white text-xs px-3 py-1 rounded-lg whitespace-nowrap border border-white/10">
+                        {item.label}
+                      </div>
                     </div>
-                    <div className="absolute inset-0 bg-gradient-to-r from-purple-500/20 to-cyan-500/20 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                   </Link>
-                ))}
-              </nav>
+                );
+              })}
+            </div>
 
-              {/* Search and Mobile Menu */}
-              <div className="flex items-center gap-4">
-                <Search />
+            {/* Search Orb */}
+            <div className="relative group">
+              <div className="absolute inset-0 bg-gradient-to-r from-cyan-500/30 to-purple-500/30 rounded-full transition-all duration-300"></div>
+              <button
+                onClick={() => setSearchOpen(true)}
+                className="relative w-12 h-12 rounded-full bg-gradient-to-br from-slate-800/95 to-slate-900/95 border border-white/20 shadow-lg shadow-cyan-500/20 hover:shadow-cyan-500/40 transition-all duration-300 hover:scale-105"
+              >
+                <HiSearch className="w-5 h-5 text-cyan-400 mx-auto" />
+              </button>
 
-                {/* Mobile Menu Button */}
-                <Button
-                  theme="glass"
-                  size="icon"
-                  onClick={toggleMobileMenu}
-                  className="md:hidden"
-                >
-                  {isMobileMenuOpen ? (
-                    <HiX className="text-white" />
-                  ) : (
-                    <HiMenuAlt3 className="text-white" />
-                  )}
-                </Button>
+              {/* Tooltip */}
+              <div className="absolute -bottom-12 left-1/2 transform -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none">
+                <div className="bg-black/90 text-white text-xs px-3 py-1 rounded-lg whitespace-nowrap border border-white/10">
+                  Szukaj filmów
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </header>
+      </nav>
 
-      {/* Mobile Menu Overlay */}
-      {isMobileMenuOpen && (
-        <div className="fixed inset-0 z-40 md:hidden">
-          {/* Backdrop */}
-          <div
-            className="absolute inset-0 bg-gradient-to-br from-black/85 via-slate-900/90 to-black/85 transition-opacity duration-300"
-            onClick={toggleMobileMenu}
-          />
-
-          {/* Menu Panel */}
-          <div className="absolute top-0 right-0 w-80 max-w-[85vw] h-full">
-            {/* Aurora background */}
-            <div className="absolute inset-0 bg-gradient-to-br from-slate-800/98 via-slate-850/99 to-slate-900/98"></div>
-            <div className="absolute inset-0 bg-gradient-to-br from-purple-500/8 via-transparent to-cyan-500/8"></div>
-            <div className="absolute inset-0 bg-gradient-to-br from-purple-500/10 via-transparent to-cyan-500/10"></div>
-
-            <div className="relative h-full flex flex-col p-6 pt-24">
-              {/* Menu Items */}
-              <nav className="flex-1">
-                <div className="space-y-4">
-                  {links.map((link, index) => (
-                    <Link
-                      key={link.href}
-                      href={link.href}
-                      onClick={toggleMobileMenu}
-                      className="group relative block p-4 rounded-2xl bg-white/5 border border-white/10 transition-all duration-300 hover:bg-white/10 hover:border-white/20 hover:scale-105"
-                      style={{
-                        animationDelay: `${index * 100}ms`,
-                        animation: "slideInRight 0.3s ease-out forwards",
-                      }}
-                    >
-                      <div className="flex items-center gap-4">
-                        <div className="w-12 h-12 rounded-xl bg-gradient-to-r from-purple-500/25 via-purple-400/15 to-cyan-500/25 flex items-center justify-center text-2xl border border-white/10 shadow-lg shadow-purple-500/10">
-                          {link.icon}
-                        </div>
-                        <div>
-                          <h3 className="font-semibold text-white group-hover:text-purple-200 transition-colors duration-300">
-                            {link.label}
-                          </h3>
-                        </div>
-                      </div>
-                      <div className="absolute inset-0 bg-gradient-to-r from-purple-500/10 to-cyan-500/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-                    </Link>
-                  ))}
-                </div>
-              </nav>
-            </div>
+      {/* Enhanced Search Modal */}
+      {searchOpen && (
+        <div className="fixed inset-0 z-60 flex items-center justify-center">
+          <div className="absolute inset-0 bg-gradient-to-br from-black/80 via-slate-900/90 to-black/80" />
+          <div className="relative w-full max-w-2xl mx-4">
+            <Search onClose={() => setSearchOpen(false)} />
           </div>
         </div>
       )}
-
-      <style jsx>{`
-        @keyframes slideInRight {
-          from {
-            opacity: 0;
-            transform: translateX(30px);
-          }
-          to {
-            opacity: 1;
-            transform: translateX(0);
-          }
-        }
-      `}</style>
     </>
   );
 };