From 59c29bfb3a6d6f447db3d30910c3ef860234503e Mon Sep 17 00:00:00 2001 From: JOELNATHAN544 Date: Mon, 21 Jul 2025 10:08:57 +0100 Subject: [PATCH 01/34] refactor: simplify Layout component by removing unused theme toggle and mobile navigation, and integrating Sidebar and ProfileDropdown for improved user experience --- my-link-uploader/src/components/Layout.tsx | 242 +++------------------ 1 file changed, 27 insertions(+), 215 deletions(-) diff --git a/my-link-uploader/src/components/Layout.tsx b/my-link-uploader/src/components/Layout.tsx index c17be42..7195eb1 100644 --- a/my-link-uploader/src/components/Layout.tsx +++ b/my-link-uploader/src/components/Layout.tsx @@ -2,158 +2,54 @@ import type { ReactNode } from "react" import { Link, useLocation } from "react-router-dom" -import { useTheme } from "../hooks/useTheme" import { motion } from "framer-motion" -import { - Sun, - Moon, - LinkIcon, - Upload, - LayoutDashboard, - LogOut, - LogIn, - UserPlus, - User -} from "lucide-react" +import { LinkIcon, LogIn, UserPlus } from "lucide-react" import { useAuth } from "../hooks/useAuth" +import Sidebar from "./Sidebar" +import ProfileDropdown from "./ProfileDropdown" interface LayoutProps { children: ReactNode } export default function Layout({ children }: LayoutProps) { - const { isDark, toggleTheme } = useTheme() const location = useLocation() - const { user, logout } = useAuth() - - const isActive = (path: string) => location.pathname === path - - const handleLogout = async () => { - try { - await logout(); - } catch (error) { - console.error('Logout failed:', error); - } - }; + const { user } = useAuth() return ( -
-
-
- -
- - -
-
-

- LinkSphere -

- -
- - - - -
- +
+
+
+
+ {user && } + +
+ +
+
+

+ LinkSphere +

+
+ +
+
{user ? ( -
- - Welcome, {user.username} - - -
+ ) : (
{location.pathname !== "/register" && ( - + Sign Up )} {location.pathname !== "/login" && ( - + Login - + )}
)} @@ -161,7 +57,7 @@ export default function Layout({ children }: LayoutProps) {
-
+
-
+

© {new Date().getFullYear()} LinkSphere. All rights reserved.

- - {/* Mobile Navigation */} -
-
- {user ? ( - <> - } label="Dashboard" isDark={isDark} /> - } label="Upload" isDark={isDark} /> - } label="Account" isDark={isDark} /> - - - ) : ( - <> - } label="Home" isDark={isDark} /> - {location.pathname !== "/register" && ( - } label="Sign Up" isDark={isDark} /> - )} - {location.pathname !== "/login" && ( - } label="Login" isDark={isDark} /> - )} - - )} -
-
) } - -function NavLink({ to, current, children, isDark }: { to: string; current: boolean; children: ReactNode; isDark: boolean }) { - return ( - - {children} - - ) -} - -function MobileNavLink({ to, icon, label, isDark }: { to: string; icon: ReactNode; label: string; isDark: boolean }) { - const location = useLocation() - const isActive = location.pathname === to - - return ( - - {icon} - {label} - - ) -} From 0d5e9847f576eb1e7f6313607cb9e1aa110b288e Mon Sep 17 00:00:00 2001 From: JOELNATHAN544 Date: Mon, 21 Jul 2025 10:09:11 +0100 Subject: [PATCH 02/34] feat: add ProfileDropdown component for user account management with theme toggle and logout functionality --- .../src/components/ProfileDropdown.tsx | 54 +++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 my-link-uploader/src/components/ProfileDropdown.tsx diff --git a/my-link-uploader/src/components/ProfileDropdown.tsx b/my-link-uploader/src/components/ProfileDropdown.tsx new file mode 100644 index 0000000..93a55d3 --- /dev/null +++ b/my-link-uploader/src/components/ProfileDropdown.tsx @@ -0,0 +1,54 @@ +import React, { useState } from 'react'; +import { Link } from 'react-router-dom'; +import { motion, AnimatePresence } from 'framer-motion'; +import { Sun, Moon, User, LogOut, Settings } from 'lucide-react'; +import { useAuth } from '../hooks/useAuth'; +import { useTheme } from '../hooks/useTheme'; + +export default function ProfileDropdown() { + const [isOpen, setIsOpen] = useState(false); + const { user, logout } = useAuth(); + const { isDark, toggleTheme } = useTheme(); + + if (!user) return null; + + const userInitial = user.username ? user.username.charAt(0).toUpperCase() : '?'; + + return ( +
+ + + + {isOpen && ( + +
+

{user.username}

+

{user.email}

+
+
+ setIsOpen(false)} className="flex items-center space-x-3 px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700"> + + My Account + + + +
+ + )} + +
+ ); +} From 4285e0a5786ccdcae93e6c5c9fdfe94b0c26f36f Mon Sep 17 00:00:00 2001 From: JOELNATHAN544 Date: Mon, 21 Jul 2025 10:09:18 +0100 Subject: [PATCH 03/34] feat: implement Sidebar component for navigation with user-specific links and animated transitions --- my-link-uploader/src/components/Sidebar.tsx | 73 +++++++++++++++++++++ 1 file changed, 73 insertions(+) create mode 100644 my-link-uploader/src/components/Sidebar.tsx diff --git a/my-link-uploader/src/components/Sidebar.tsx b/my-link-uploader/src/components/Sidebar.tsx new file mode 100644 index 0000000..77b0de1 --- /dev/null +++ b/my-link-uploader/src/components/Sidebar.tsx @@ -0,0 +1,73 @@ +import React, { useState } from 'react'; +import { Link, useLocation } from 'react-router-dom'; +import { motion, AnimatePresence } from 'framer-motion'; +import { Menu, X, LayoutDashboard, Upload, User } from 'lucide-react'; +import { useAuth } from '../hooks/useAuth'; + +export default function Sidebar() { + const [isOpen, setIsOpen] = useState(false); + const { user } = useAuth(); + const location = useLocation(); + + const isActive = (path: string) => location.pathname === path; + + const navLinks = user ? [ + { path: '/dashboard', label: 'Dashboard', icon: }, + { path: '/dashboard/upload', label: 'Upload', icon: }, + { path: '/dashboard/my-account', label: 'My Account', icon: }, + ] : []; + + return ( +
+ + + + {isOpen && ( + setIsOpen(false)} + > + e.stopPropagation()} + > +
+

Menu

+ +
+ + + + + )} + +
+ ); +} From e3fbee3585f8c9eb96fb08e4145aa7f51898df82 Mon Sep 17 00:00:00 2001 From: JOELNATHAN544 Date: Mon, 21 Jul 2025 10:23:12 +0100 Subject: [PATCH 04/34] feat: enhance Layout component with search bar and notifications bell for improved user interaction --- my-link-uploader/src/components/Layout.tsx | 35 ++++++++++++++++------ 1 file changed, 26 insertions(+), 9 deletions(-) diff --git a/my-link-uploader/src/components/Layout.tsx b/my-link-uploader/src/components/Layout.tsx index 7195eb1..0974581 100644 --- a/my-link-uploader/src/components/Layout.tsx +++ b/my-link-uploader/src/components/Layout.tsx @@ -3,7 +3,7 @@ import type { ReactNode } from "react" import { Link, useLocation } from "react-router-dom" import { motion } from "framer-motion" -import { LinkIcon, LogIn, UserPlus } from "lucide-react" +import { LinkIcon, LogIn, UserPlus, Bell } from "lucide-react" import { useAuth } from "../hooks/useAuth" import Sidebar from "./Sidebar" import ProfileDropdown from "./ProfileDropdown" @@ -20,21 +20,38 @@ export default function Layout({ children }: LayoutProps) {
-
+ {/* Left: Sidebar */} +
{user && } +
+ + {/* Center: Logo */} +
-
-

- LinkSphere -

-
+

+ LinkSphere +

-
+ {/* Right: Search, Notifications, Profile */} +
+ {/* Search Bar */} +
+ +
+ {/* Notifications Bell */} + + {/* Profile Dropdown or Auth Links */} {user ? ( ) : ( @@ -49,7 +66,7 @@ export default function Layout({ children }: LayoutProps) { Login - + )}
)} From ddb24970c4eb2f12b0e383009a09549754d642ae Mon Sep 17 00:00:00 2001 From: JOELNATHAN544 Date: Mon, 21 Jul 2025 10:30:51 +0100 Subject: [PATCH 05/34] refactor: adjust Layout component structure by removing max-width constraint for improved responsiveness --- my-link-uploader/src/components/Layout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/my-link-uploader/src/components/Layout.tsx b/my-link-uploader/src/components/Layout.tsx index 0974581..faaccd0 100644 --- a/my-link-uploader/src/components/Layout.tsx +++ b/my-link-uploader/src/components/Layout.tsx @@ -19,7 +19,7 @@ export default function Layout({ children }: LayoutProps) { return (
-
+
{/* Left: Sidebar */}
{user && } From 70ca3d6fa044070d81a702572064dad563857989 Mon Sep 17 00:00:00 2001 From: JOELNATHAN544 Date: Mon, 21 Jul 2025 10:34:56 +0100 Subject: [PATCH 06/34] style: update button styles in Sidebar component for improved accessibility and visual consistency --- my-link-uploader/src/components/Sidebar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/my-link-uploader/src/components/Sidebar.tsx b/my-link-uploader/src/components/Sidebar.tsx index 77b0de1..6872847 100644 --- a/my-link-uploader/src/components/Sidebar.tsx +++ b/my-link-uploader/src/components/Sidebar.tsx @@ -19,7 +19,7 @@ export default function Sidebar() { return (
- From 0f6e9dae1fc41c68ba3e7c08684f0cd0ce3ff862 Mon Sep 17 00:00:00 2001 From: JOELNATHAN544 Date: Mon, 21 Jul 2025 10:39:12 +0100 Subject: [PATCH 07/34] style: refine button hover styles in Sidebar component for enhanced visual feedback --- my-link-uploader/src/components/Sidebar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/my-link-uploader/src/components/Sidebar.tsx b/my-link-uploader/src/components/Sidebar.tsx index 6872847..77b0de1 100644 --- a/my-link-uploader/src/components/Sidebar.tsx +++ b/my-link-uploader/src/components/Sidebar.tsx @@ -19,7 +19,7 @@ export default function Sidebar() { return (
- From cc85e9c068d534cff3d38fbe679256fc4b748cb7 Mon Sep 17 00:00:00 2001 From: JOELNATHAN544 Date: Mon, 21 Jul 2025 10:44:39 +0100 Subject: [PATCH 08/34] feat: add Header component with search bar, notifications bell, and profile dropdown for enhanced user navigation --- my-link-uploader/src/components/Header.tsx | 29 ++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 my-link-uploader/src/components/Header.tsx diff --git a/my-link-uploader/src/components/Header.tsx b/my-link-uploader/src/components/Header.tsx new file mode 100644 index 0000000..ff442af --- /dev/null +++ b/my-link-uploader/src/components/Header.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { Bell } from 'lucide-react'; +import ProfileDropdown from './ProfileDropdown'; + +export default function Header() { + return ( +
+
+ {/* Right: Search, Notifications, Profile */} +
+ {/* Search Bar */} +
+ +
+ {/* Notifications Bell */} + + {/* Profile Dropdown */} + +
+
+
+ ); +} From 42939430e8f96a27e431f4e5b3a9135f5d01f8b4 Mon Sep 17 00:00:00 2001 From: JOELNATHAN544 Date: Mon, 21 Jul 2025 10:44:47 +0100 Subject: [PATCH 09/34] refactor: restructure Layout component to include Header and simplify layout for logged-out users --- my-link-uploader/src/components/Layout.tsx | 92 ++++++---------------- 1 file changed, 26 insertions(+), 66 deletions(-) diff --git a/my-link-uploader/src/components/Layout.tsx b/my-link-uploader/src/components/Layout.tsx index faaccd0..000268f 100644 --- a/my-link-uploader/src/components/Layout.tsx +++ b/my-link-uploader/src/components/Layout.tsx @@ -1,12 +1,11 @@ "use client" import type { ReactNode } from "react" -import { Link, useLocation } from "react-router-dom" import { motion } from "framer-motion" -import { LinkIcon, LogIn, UserPlus, Bell } from "lucide-react" import { useAuth } from "../hooks/useAuth" import Sidebar from "./Sidebar" -import ProfileDropdown from "./ProfileDropdown" +import Header from "./Header" // We will create this new component +import { useLocation } from "react-router-dom" interface LayoutProps { children: ReactNode @@ -16,67 +15,12 @@ export default function Layout({ children }: LayoutProps) { const location = useLocation() const { user } = useAuth() - return ( -
-
-
- {/* Left: Sidebar */} -
- {user && } -
- - {/* Center: Logo */} -
- -
- -
-

- LinkSphere -

- -
- - {/* Right: Search, Notifications, Profile */} -
- {/* Search Bar */} -
- -
- {/* Notifications Bell */} - - {/* Profile Dropdown or Auth Links */} - {user ? ( - - ) : ( -
- {location.pathname !== "/register" && ( - - - Sign Up - - )} - {location.pathname !== "/login" && ( - - - Login - - )} -
- )} -
-
-
- -
+ if (!user) { + // Render a simple layout for logged-out users + return ( +
+ ) + } -
-

© {new Date().getFullYear()} LinkSphere. All rights reserved.

-
+ return ( +
+ +
+
+
+ + {children} + +
+
) } From e5106c776ff2819b2e8f3ba0c7cb5a14fce21c24 Mon Sep 17 00:00:00 2001 From: JOELNATHAN544 Date: Mon, 21 Jul 2025 10:44:55 +0100 Subject: [PATCH 10/34] refactor: update Sidebar component to include collapsible functionality and improve navigation layout --- my-link-uploader/src/components/Sidebar.tsx | 93 +++++++++------------ 1 file changed, 41 insertions(+), 52 deletions(-) diff --git a/my-link-uploader/src/components/Sidebar.tsx b/my-link-uploader/src/components/Sidebar.tsx index 77b0de1..e855064 100644 --- a/my-link-uploader/src/components/Sidebar.tsx +++ b/my-link-uploader/src/components/Sidebar.tsx @@ -1,13 +1,12 @@ import React, { useState } from 'react'; import { Link, useLocation } from 'react-router-dom'; -import { motion, AnimatePresence } from 'framer-motion'; -import { Menu, X, LayoutDashboard, Upload, User } from 'lucide-react'; +import { Menu, LayoutDashboard, Upload, User, LinkIcon } from 'lucide-react'; import { useAuth } from '../hooks/useAuth'; export default function Sidebar() { - const [isOpen, setIsOpen] = useState(false); const { user } = useAuth(); const location = useLocation(); + const [collapsed, setCollapsed] = useState(false); const isActive = (path: string) => location.pathname === path; @@ -18,56 +17,46 @@ export default function Sidebar() { ] : []; return ( -
- +
+ {link.icon} + {!collapsed && {link.label}} + + ))} + + ); } From 1939c9151cb19c4bb125ab7291d7f3c9cc0836bf Mon Sep 17 00:00:00 2001 From: JOELNATHAN544 Date: Mon, 21 Jul 2025 10:49:09 +0100 Subject: [PATCH 11/34] refactor: enhance Sidebar component layout and improve collapse button positioning for better user experience --- my-link-uploader/src/components/Sidebar.tsx | 30 +++++++++++---------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/my-link-uploader/src/components/Sidebar.tsx b/my-link-uploader/src/components/Sidebar.tsx index e855064..e8eb9ad 100644 --- a/my-link-uploader/src/components/Sidebar.tsx +++ b/my-link-uploader/src/components/Sidebar.tsx @@ -17,11 +17,11 @@ export default function Sidebar() { ] : []; return ( -
From bc68fed80df6f5f3e254528d88392fa4751f7582 Mon Sep 17 00:00:00 2001 From: JOELNATHAN544 Date: Thu, 24 Jul 2025 15:48:27 +0100 Subject: [PATCH 23/34] feat: add settings submenu to ProfileDropdown component for enhanced user customization options --- .../src/components/ProfileDropdown.tsx | 67 +++++++++++++++++-- 1 file changed, 60 insertions(+), 7 deletions(-) diff --git a/my-link-uploader/src/components/ProfileDropdown.tsx b/my-link-uploader/src/components/ProfileDropdown.tsx index 93a55d3..90bb5ec 100644 --- a/my-link-uploader/src/components/ProfileDropdown.tsx +++ b/my-link-uploader/src/components/ProfileDropdown.tsx @@ -7,6 +7,7 @@ import { useTheme } from '../hooks/useTheme'; export default function ProfileDropdown() { const [isOpen, setIsOpen] = useState(false); + const [settingsOpen, setSettingsOpen] = useState(false); const { user, logout } = useAuth(); const { isDark, toggleTheme } = useTheme(); @@ -16,12 +17,18 @@ export default function ProfileDropdown() { return (
- - {isOpen && ( + {isOpen && !settingsOpen && ( {user.email}

- setIsOpen(false)} className="flex items-center space-x-3 px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700"> + setIsOpen(false)} + className="flex items-center space-x-3 px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700" + > My Account - - @@ -49,6 +69,39 @@ export default function ProfileDropdown() { )} + + {/* Settings Submenu */} + + {isOpen && settingsOpen && ( + +
+ Settings + +
+
+ + {/* Add more settings options here if needed */} +
+ + )} +
); } From 9e0d42740f7072b4434eb86240a24a2a5a76b316 Mon Sep 17 00:00:00 2001 From: JOELNATHAN544 Date: Thu, 24 Jul 2025 15:48:37 +0100 Subject: [PATCH 24/34] feat: add logout button to ProfileDropdown component for improved user session management --- my-link-uploader/src/components/ProfileDropdown.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/my-link-uploader/src/components/ProfileDropdown.tsx b/my-link-uploader/src/components/ProfileDropdown.tsx index 90bb5ec..ae5c974 100644 --- a/my-link-uploader/src/components/ProfileDropdown.tsx +++ b/my-link-uploader/src/components/ProfileDropdown.tsx @@ -97,6 +97,17 @@ export default function ProfileDropdown() { {isDark ? : } {isDark ? 'Light Mode' : 'Dark Mode'} + {/* Add more settings options here if needed */}
From ca6efc443f2ce0230e367fa9af37b952bbb78d19 Mon Sep 17 00:00:00 2001 From: JOELNATHAN544 Date: Thu, 24 Jul 2025 15:55:17 +0100 Subject: [PATCH 25/34] refactor: remove notification button from Header component to streamline layout --- my-link-uploader/src/components/Header.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/my-link-uploader/src/components/Header.tsx b/my-link-uploader/src/components/Header.tsx index 18c76b9..63dad4f 100644 --- a/my-link-uploader/src/components/Header.tsx +++ b/my-link-uploader/src/components/Header.tsx @@ -62,9 +62,6 @@ export default function Header() {
{/* Right: Notifications, Profile */}
-
From b87c47c34d20de960fcca4c8acb3d71d8433bfd9 Mon Sep 17 00:00:00 2001 From: JOELNATHAN544 Date: Thu, 24 Jul 2025 15:55:25 +0100 Subject: [PATCH 26/34] refactor: update Sidebar component width for improved layout responsiveness --- my-link-uploader/src/components/Sidebar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/my-link-uploader/src/components/Sidebar.tsx b/my-link-uploader/src/components/Sidebar.tsx index 8c36681..366f099 100644 --- a/my-link-uploader/src/components/Sidebar.tsx +++ b/my-link-uploader/src/components/Sidebar.tsx @@ -17,7 +17,7 @@ export default function Sidebar() { ] : []; return ( -
diff --git a/my-link-uploader/src/components/Sidebar.tsx b/my-link-uploader/src/components/Sidebar.tsx index 366f099..8c36681 100644 --- a/my-link-uploader/src/components/Sidebar.tsx +++ b/my-link-uploader/src/components/Sidebar.tsx @@ -17,7 +17,7 @@ export default function Sidebar() { ] : []; return ( -