@tushar-br/desktop 1.0.280 → 1.0.282

package/staging_area/desktop/rilvox/src/components/layout/Topbar.tsx

@@ -1,446 +0,0 @@
-"use client";
-
-import { useSidebar } from "./sidebar-context";
-import { Search, Bell, Menu, User, Settings, LogOut, X, Check, ChevronDown, Sparkles, Code2, Palette } from "lucide-react";
-import Logo from "@/components/ui/Logo";
-import PC3DModel from "@/components/ui/PC3DModel";
-import { useState, useRef, useEffect } from "react";
-import { useRouter, useSearchParams, usePathname } from "next/navigation";
-import { cn } from "@/lib/utils";
-import Link from "next/link";
-import { allTools } from "@/lib/tools-data";
-
-interface Notification {
-    id: number;
-    title: string;
-    message: string;
-    time: string;
-    read: boolean;
-}
-
-export function Topbar() {
-    const { toggleSidebar, isOpen } = useSidebar();
-    const router = useRouter();
-    const searchParams = useSearchParams();
-    const pathname = usePathname();
-
-    const [showNotifications, setShowNotifications] = useState(false);
-    const [showProfileMenu, setShowProfileMenu] = useState(false);
-    const [showToolsMenu, setShowToolsMenu] = useState(false);
-    const [searchQuery, setSearchQuery] = useState(searchParams.get("q") || "");
-    const [showSearchResults, setShowSearchResults] = useState(false);
-    const [showProfileModal, setShowProfileModal] = useState(false);
-    const [showSettings, setShowSettings] = useState(false);
-    const [notifications, setNotifications] = useState<Notification[]>([]);
-    const [userName, setUserName] = useState("Rilvox");
-    const [userEmail, setUserEmail] = useState("rilvox.mail@gmail.com");
-
-    const notifRef = useRef<HTMLDivElement>(null);
-    const profileRef = useRef<HTMLDivElement>(null);
-    const searchRef = useRef<HTMLDivElement>(null);
-    const toolsMenuRef = useRef<HTMLDivElement>(null);
-
-    // Sync search with URL
-    useEffect(() => {
-        const q = searchParams.get("q") || "";
-        if (q !== searchQuery) setSearchQuery(q);
-    }, [searchParams]);
-
-    // Handle search
-    const handleSearchChange = (val: string) => {
-        setSearchQuery(val);
-        const params = new URLSearchParams(searchParams);
-        if (val) params.set("q", val);
-        else params.delete("q");
-        router.push(`/?${params.toString()}`);
-    };
-
-    const topFilteredTools = allTools.filter(t =>
-        t.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        t.desc.toLowerCase().includes(searchQuery.toLowerCase())
-    ).slice(0, 8);
-
-    // Click outside to close
-    useEffect(() => {
-        function handleClickOutside(event: MouseEvent) {
-            if (notifRef.current && !notifRef.current.contains(event.target as Node)) setShowNotifications(false);
-            if (profileRef.current && !profileRef.current.contains(event.target as Node)) setShowProfileMenu(false);
-            if (searchRef.current && !searchRef.current.contains(event.target as Node)) setShowSearchResults(false);
-            if (toolsMenuRef.current && !toolsMenuRef.current.contains(event.target as Node)) setShowToolsMenu(false);
-        }
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, []);
-
-    // Profile modal URL handling
-    useEffect(() => {
-        setShowProfileModal(pathname === "/profile-box");
-    }, [pathname]);
-
-    const openProfileModal = () => {
-        setShowProfileMenu(false);
-        // Small delay for smooth transition
-        setTimeout(() => {
-            router.push("/profile-box");
-        }, 100);
-    };
-
-    const closeProfileModal = () => {
-        router.back();
-    };
-
-    const markAsRead = (id: number) => {
-        setNotifications(prev => prev.map(n => n.id === id ? { ...n, read: true } : n));
-    };
-
-    const clearNotification = (id: number) => {
-        setNotifications(prev => prev.filter(n => n.id !== id));
-    };
-
-    const clearAllNotifications = () => {
-        setNotifications([]);
-    };
-
-    return (
-        <>
-            <header
-                className="fixed top-0 left-0 right-0 z-[100] h-16 border-b border-white/10 bg-black/60 backdrop-blur-xl"
-            >
-                <div className="h-full px-4 md:px-6 flex items-center justify-between gap-4">
-                    {/* Left */}
-                    <div className="flex items-center gap-3 md:gap-4">
-                        <button
-                            onClick={toggleSidebar}
-                            className="p-2 rounded-lg hover:bg-white/5 transition-colors text-neutral-400 hover:text-white"
-                        >
-                            <Menu className="w-5 h-5" />
-                        </button>
-
-                        {/* RILVOX Logo + Text */}
-                        <Link href="/" className="flex items-center gap-3 group ml-1">
-                            <Logo />
-                            <span className="text-xl md:text-2xl font-black tracking-tighter text-white group-hover:text-indigo-400 transition-colors">
-                                RILVOX
-                            </span>
-                        </Link>
-
-                        {/* Tools Mega Menu */}
-                        <div ref={toolsMenuRef} className="relative hidden lg:block ml-2">
-                            <button
-                                onClick={() => setShowToolsMenu(!showToolsMenu)}
-                                className={cn(
-                                    "flex items-center gap-2 px-4 py-1.5 rounded-full text-sm font-bold transition-all",
-                                    showToolsMenu ? "bg-white text-black" : "text-neutral-400 hover:text-white hover:bg-white/5"
-                                )}
-                            >
-                                Tools
-                                <ChevronDown className={cn("w-4 h-4 transition-transform duration-300", showToolsMenu && "rotate-180")} />
-                            </button>
-
-                            {showToolsMenu && (
-                                <div className="absolute top-full left-0 mt-4 w-[700px] bg-black/90 backdrop-blur-2xl border border-white/10 rounded-[2rem] shadow-2xl z-50 p-8 grid grid-cols-3 gap-8 animate-in fade-in slide-in-from-top-4 duration-300">
-                                    {/* Developer Column */}
-                                    <div className="space-y-4">
-                                        <div className="flex items-center gap-3 text-indigo-400">
-                                            <Code2 className="w-5 h-5" />
-                                            <span className="text-xs font-black uppercase tracking-[0.2em]">Developer</span>
-                                        </div>
-                                        <div className="flex flex-col gap-2">
-                                            {allTools.filter(t => t.cat === "Dev").slice(0, 5).map(tool => (
-                                                <Link key={tool.title} href={tool.href} onClick={() => setShowToolsMenu(false)} className="text-[13px] text-neutral-500 hover:text-white transition-colors">{tool.title}</Link>
-                                            ))}
-                                        </div>
-                                    </div>
-                                    {/* AI Column */}
-                                    <div className="space-y-4">
-                                        <div className="flex items-center gap-3 text-purple-400">
-                                            <Sparkles className="w-5 h-5" />
-                                            <span className="text-xs font-black uppercase tracking-[0.2em]">AI & Magic</span>
-                                        </div>
-                                        <div className="flex flex-col gap-2">
-                                            {allTools.filter(t => t.cat === "AI").slice(0, 5).map(tool => (
-                                                <Link key={tool.title} href={tool.href} onClick={() => setShowToolsMenu(false)} className="text-[13px] text-neutral-500 hover:text-white transition-colors">{tool.title}</Link>
-                                            ))}
-                                        </div>
-                                    </div>
-                                    {/* Visual Column */}
-                                    <div className="space-y-4">
-                                        <div className="flex items-center gap-3 text-pink-400">
-                                            <Palette className="w-5 h-5" />
-                                            <span className="text-xs font-black uppercase tracking-[0.2em]">Visual & Art</span>
-                                        </div>
-                                        <div className="flex flex-col gap-2">
-                                            {allTools.filter(t => t.cat === "Visual").slice(0, 5).map(tool => (
-                                                <Link key={tool.title} href={tool.href} onClick={() => setShowToolsMenu(false)} className="text-[13px] text-neutral-500 hover:text-white transition-colors">{tool.title}</Link>
-                                            ))}
-                                        </div>
-                                    </div>
-                                    <div className="col-span-3 pt-6 border-t border-white/5 flex items-center justify-between">
-                                        <p className="text-[11px] text-neutral-600 font-medium">Over 100+ professional tools for your daily workflow.</p>
-                                        <Link href="/" onClick={() => setShowToolsMenu(false)} className="text-[11px] font-black text-white uppercase tracking-widest hover:underline decoration-indigo-500 underline-offset-4">View All Tools</Link>
-                                    </div>
-                                </div>
-                            )}
-                        </div>
-
-                        {/* Search */}
-                        <div ref={searchRef} className="relative hidden md:block w-48 xl:w-64 ml-4">
-                            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" />
-                            <input
-                                type="text"
-                                placeholder="Search tools..."
-                                value={searchQuery}
-                                onChange={(e) => handleSearchChange(e.target.value)}
-                                onFocus={() => setShowSearchResults(true)}
-                                className="w-full pl-10 pr-3 py-1.5 bg-white/5 border border-white/10 rounded-full text-sm text-white placeholder-neutral-600 focus:outline-none focus:bg-white/10"
-                            />
-
-                            {/* Search Results Dropdown */}
-                            {showSearchResults && searchQuery.length > 1 && (
-                                <div className="absolute top-full left-0 mt-2 w-80 bg-black/95 backdrop-blur-xl border border-white/10 rounded-xl shadow-2xl z-50 max-h-96 overflow-y-auto p-2">
-                                    <div className="px-3 py-2 text-xs font-bold text-neutral-500 uppercase">
-                                        Results ({topFilteredTools.length})
-                                    </div>
-                                    {topFilteredTools.map(tool => (
-                                        <Link
-                                            key={tool.href}
-                                            href={tool.href}
-                                            onClick={() => setShowSearchResults(false)}
-                                            className="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-white/5 transition-colors"
-                                        >
-                                            <tool.icon className="w-4 h-4 text-neutral-400" />
-                                            <div className="flex-1 min-w-0">
-                                                <div className="text-sm font-medium text-white truncate">{tool.title}</div>
-                                                <div className="text-xs text-neutral-500 truncate">{tool.desc}</div>
-                                            </div>
-                                        </Link>
-                                    ))}
-                                </div>
-                            )}
-                        </div>
-                    </div>
-
-                    {/* Right */}
-                    <div className="flex items-center gap-2">
-                        {/* Notifications */}
-                        <div ref={notifRef} className="relative">
-                            <button
-                                onClick={() => setShowNotifications(!showNotifications)}
-                                className="relative p-2 rounded-lg hover:bg-white/5 transition-colors text-neutral-400 hover:text-white"
-                            >
-                                <Bell className="w-5 h-5" />
-                                {notifications.filter(n => !n.read).length > 0 && (
-                                    <span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
-                                )}
-                            </button>
-
-                            {showNotifications && (
-                                <div className="fixed md:absolute inset-x-4 md:inset-auto md:right-0 top-20 md:top-full mt-2 md:w-80 bg-black/95 backdrop-blur-2xl border border-white/10 rounded-2xl shadow-2xl z-[101] max-h-[70vh] overflow-y-auto animate-in fade-in slide-in-from-top-2 duration-200">
-                                    <div className="flex items-center justify-between px-4 py-3 border-b border-white/10 sticky top-0 bg-black/20 backdrop-blur-md z-10">
-                                        <h3 className="text-sm font-bold text-white">Notifications</h3>
-                                        {notifications.length > 0 && (
-                                            <button
-                                                onClick={clearAllNotifications}
-                                                className="text-xs text-neutral-500 hover:text-white transition-colors"
-                                            >
-                                                Clear All
-                                            </button>
-                                        )}
-                                    </div>
-                                    <div className="p-2">
-                                        {notifications.length === 0 ? (
-                                            <div className="text-center py-8 text-neutral-500 text-sm">
-                                                No notifications
-                                            </div>
-                                        ) : (
-                                            notifications.map(notif => (
-                                                <div
-                                                    key={notif.id}
-                                                    className={cn(
-                                                        "p-3 rounded-lg mb-2 transition-colors",
-                                                        notif.read ? "bg-white/5" : "bg-indigo-500/10"
-                                                    )}
-                                                >
-                                                    <div className="flex items-start justify-between gap-2">
-                                                        <div className="flex-1 min-w-0">
-                                                            <div className="text-sm font-medium text-white">{notif.title}</div>
-                                                            <div className="text-xs text-neutral-400 mt-1">{notif.message}</div>
-                                                            <div className="text-xs text-neutral-600 mt-1">{notif.time}</div>
-                                                        </div>
-                                                        <div className="flex gap-1">
-                                                            {!notif.read && (
-                                                                <button
-                                                                    onClick={() => markAsRead(notif.id)}
-                                                                    className="p-1 rounded hover:bg-white/10 text-neutral-500 hover:text-white"
-                                                                    title="Mark as read"
-                                                                >
-                                                                    <Check className="w-3 h-3" />
-                                                                </button>
-                                                            )}
-                                                            <button
-                                                                onClick={() => clearNotification(notif.id)}
-                                                                className="p-1 rounded hover:bg-white/10 text-neutral-500 hover:text-white"
-                                                                title="Clear"
-                                                            >
-                                                                <X className="w-3 h-3" />
-                                                            </button>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            ))
-                                        )}
-                                    </div>
-                                </div>
-                            )}
-                        </div>
-
-                        {/* Profile Section */}
-                        <div ref={profileRef} className="relative">
-                            <button
-                                onClick={() => setShowProfileMenu(!showProfileMenu)}
-                                className="flex items-center gap-3 p-1 rounded-full hover:bg-white/5 transition-all active:scale-95"
-                            >
-                                <Logo />
-                                <span className="hidden md:block text-sm font-bold text-white tracking-tight pr-2">{userName}</span>
-                            </button>
-
-                            {showProfileMenu && (
-                                <div className="absolute top-full right-0 mt-2 w-64 bg-black/95 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl z-[101] p-2 animate-in fade-in slide-in-from-top-2 duration-200">
-                                    <div className="px-3 py-2 border-b border-white/10 mb-2">
-                                        <div className="text-sm font-bold text-white">{userName}</div>
-                                        <div className="text-xs text-neutral-500">{userEmail}</div>
-                                    </div>
-                                    <button
-                                        onClick={openProfileModal}
-                                        className="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-white/5 transition-colors text-left"
-                                    >
-                                        <User className="w-4 h-4 text-neutral-400" />
-                                        <span className="text-sm text-white">My Profile</span>
-                                    </button>
-                                    <button
-                                        onClick={() => {
-                                            setShowSettings(true);
-                                            setShowProfileMenu(false);
-                                        }}
-                                        className="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-white/5 transition-colors text-left"
-                                    >
-                                        <Settings className="w-4 h-4 text-neutral-400" />
-                                        <span className="text-sm text-white">Settings</span>
-                                    </button>
-                                    <div className="border-t border-white/10 my-2"></div>
-                                    <button className="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-red-500/10 transition-colors text-left">
-                                        <LogOut className="w-4 h-4 text-red-400" />
-                                        <span className="text-sm text-red-400">Sign Out</span>
-                                    </button>
-                                </div>
-                            )}
-                        </div>
-                    </div>
-                </div>
-            </header>
-
-            {/* Profile Modal */}
-            {showProfileModal && (
-                <div className="fixed inset-0 z-[100] flex items-start justify-center p-4 bg-black/80 backdrop-blur-sm animate-in fade-in duration-200 overflow-y-auto pt-20 md:items-center md:pt-4">
-                    <div className="w-full max-w-2xl bg-black/60 backdrop-blur-xl border border-white/20 rounded-2xl shadow-2xl overflow-hidden flex flex-col animate-in zoom-in-95 duration-300 my-auto">
-                        {/* Header */}
-                        <div className="flex items-center justify-between px-6 py-4 border-b border-white/10">
-                            <h2 className="text-xl font-bold text-white">Profile Settings</h2>
-                            <button
-                                onClick={closeProfileModal}
-                                className="p-2 rounded-lg hover:bg-white/10 transition-colors text-neutral-400 hover:text-white"
-                            >
-                                <X className="w-5 h-5" />
-                            </button>
-                        </div>
-
-                        {/* Content */}
-                        <div className="flex-1 overflow-y-auto p-6">
-                            <div className="space-y-6">
-                                {/* Profile Picture */}
-                                <div className="flex flex-col items-center gap-4">
-                                    <div className="w-24 h-24 rounded-full bg-gradient-to-br from-indigo-500 to-purple-500 flex items-center justify-center text-white font-bold text-3xl">
-                                        {userName.charAt(0)}
-                                    </div>
-                                    <button className="text-sm text-indigo-400 hover:text-indigo-300 transition-colors">
-                                        Change Photo
-                                    </button>
-                                </div>
-
-                                {/* Form */}
-                                <div className="space-y-4">
-                                    <div>
-                                        <label className="block text-sm font-medium text-neutral-400 mb-2">Name</label>
-                                        <input
-                                            type="text"
-                                            value={userName}
-                                            onChange={(e) => setUserName(e.target.value)}
-                                            className="w-full px-4 py-2 bg-white/5 border border-white/10 rounded-lg text-white focus:outline-none focus:border-indigo-500"
-                                        />
-                                    </div>
-                                    <div>
-                                        <label className="block text-sm font-medium text-neutral-400 mb-2">Email</label>
-                                        <input
-                                            type="email"
-                                            value={userEmail}
-                                            onChange={(e) => setUserEmail(e.target.value)}
-                                            className="w-full px-4 py-2 bg-white/5 border border-white/10 rounded-lg text-white focus:outline-none focus:border-indigo-500"
-                                        />
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        {/* Footer */}
-                        <div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-white/10">
-                            <button
-                                onClick={closeProfileModal}
-                                className="px-4 py-2 rounded-lg bg-white/5 hover:bg-white/10 transition-colors text-white"
-                            >
-                                Cancel
-                            </button>
-                            <button
-                                onClick={closeProfileModal}
-                                className="px-4 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 transition-colors text-white font-medium"
-                            >
-                                Save Changes
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            )}
-
-            {/* Settings Sidebar */}
-            {showSettings && (
-                <>
-                    {/* Backdrop */}
-                    <div
-                        className="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm"
-                        onClick={() => setShowSettings(false)}
-                    />
-
-                    {/* Sidebar */}
-                    <div className="fixed top-0 right-0 bottom-0 z-50 w-80 bg-black/80 backdrop-blur-xl border-l border-white/10 shadow-2xl flex flex-col animate-in slide-in-from-right duration-300">
-                        {/* Header */}
-                        <div className="flex items-center justify-between px-6 py-4 border-b border-white/10">
-                            <h2 className="text-lg font-bold text-white">Settings</h2>
-                            <button
-                                onClick={() => setShowSettings(false)}
-                                className="p-2 rounded-lg hover:bg-white/10 transition-colors text-neutral-400 hover:text-white"
-                            >
-                                <X className="w-5 h-5" />
-                            </button>
-                        </div>
-
-                        {/* Content */}
-                        <div className="flex-1 overflow-y-auto p-6">
-                            <div className="text-center text-neutral-500 py-8">
-                                Settings coming soon...
-                            </div>
-                        </div>
-                    </div>
-                </>
-            )}
-        </>
-    );
-}

package/staging_area/desktop/rilvox/src/components/layout/sidebar-context.tsx

@@ -1,38 +0,0 @@
-"use client";
-
-import { createContext, useContext, useState, useEffect } from "react";
-
-interface SidebarContextType {
-    isOpen: boolean;
-    toggleSidebar: () => void;
-    closeSidebar: () => void;
-    openSidebar: () => void;
-}
-
-const SidebarContext = createContext<SidebarContextType | undefined>(undefined);
-
-export function SidebarProvider({ children }: { children: React.ReactNode }) {
-    const [isOpen, setIsOpen] = useState(false); // Default close as requested
-
-    const toggleSidebar = () => setIsOpen((prev) => !prev);
-    const closeSidebar = () => setIsOpen(false);
-    const openSidebar = () => setIsOpen(true);
-
-    // Close sidebar on route change is handled in the component usually, 
-    // but we can leave it to the user action for desktop.
-    // For mobile, we might want to close it.
-
-    return (
-        <SidebarContext.Provider value={{ isOpen, toggleSidebar, closeSidebar, openSidebar }}>
-            {children}
-        </SidebarContext.Provider>
-    );
-}
-
-export const useSidebar = () => {
-    const context = useContext(SidebarContext);
-    if (context === undefined) {
-        throw new Error("useSidebar must be used within a SidebarProvider");
-    }
-    return context;
-};

package/staging_area/desktop/rilvox/src/components/providers/ClientProviders.tsx

@@ -1,45 +0,0 @@
-"use client";
-
-import { SidebarProvider } from "@/components/layout/sidebar-context";
-import SecurityProvider from "@/components/providers/SecurityProvider";
-import { Sidebar } from "@/components/layout/Sidebar";
-import { Topbar } from "@/components/layout/Topbar";
-import { Footer } from "@/components/layout/Footer";
-import { Suspense } from "react";
-import { useSidebar } from "@/components/layout/sidebar-context";
-import { cn } from "@/lib/utils";
-
-export default function ClientProviders({ children }: { children: React.ReactNode }) {
-    return (
-        <SecurityProvider>
-            <SidebarProvider>
-                <div className="min-h-screen flex flex-col bg-black">
-                    <Sidebar />
-                    <div className="flex-1 transition-all duration-300 ease-in-out">
-                        <Suspense fallback={<div className="h-16 bg-black/40" />}>
-                            <Topbar />
-                        </Suspense>
-
-                        <LayoutContentWrapper>
-                            {children}
-                        </LayoutContentWrapper>
-                    </div>
-                </div>
-            </SidebarProvider>
-        </SecurityProvider>
-    );
-}
-
-function LayoutContentWrapper({ children }: { children: React.ReactNode }) {
-    const { isOpen } = useSidebar();
-
-    return (
-        <main className="relative z-0">
-            <div className="fixed inset-0 z-[-1] pointer-events-none bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-neutral-900/20 via-black to-black" />
-            {children}
-            <div className="max-w-7xl mx-auto px-4 md:px-8">
-                <Footer />
-            </div>
-        </main>
-    );
-}