feat: Add photo management features, duplicate detection, attempt limits, and admin deletion

- Add duplicate photo detection (file hash and URL checking) - Add max attempts per photo with UI counter - Simplify penalty system (auto-enable when points > 0) - Prevent scores from going below 0 - Add admin photo deletion functionality - Improve navigation with always-visible logout - Prevent users from guessing their own photos
2026-01-02 14:57:30 -05:00
commit 9640627972
69 changed files with 20858 additions and 0 deletions
@@ -0,0 +1,163 @@
+"use client"
+
+import Link from "next/link"
+import { useSession, signOut } from "next-auth/react"
+import { useState, useEffect } from "react"
+
+export default function Navigation() {
+  const { data: session } = useSession()
+  const [sideMenuOpen, setSideMenuOpen] = useState(false)
+
+  // Close side menu when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as HTMLElement
+      if (sideMenuOpen && !target.closest('.side-menu') && !target.closest('.menu-button')) {
+        setSideMenuOpen(false)
+      }
+    }
+
+    if (sideMenuOpen) {
+      document.addEventListener('click', handleClickOutside)
+      return () => document.removeEventListener('click', handleClickOutside)
+    }
+  }, [sideMenuOpen])
+
+  if (!session) {
+    return null
+  }
+
+  return (
+    <>
+      <nav className="sticky top-0 z-50 bg-gradient-to-r from-purple-600 to-indigo-600 text-white shadow-lg">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center h-16">
+            {/* Logo and Menu Button */}
+            <div className="flex items-center space-x-4">
+              <button
+                onClick={() => setSideMenuOpen(!sideMenuOpen)}
+                className="menu-button p-2 rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-white"
+                aria-label="Toggle menu"
+              >
+                <svg
+                  className="h-6 w-6"
+                  fill="none"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path d="M4 6h16M4 12h16M4 18h16" />
+                </svg>
+              </button>
+              <Link href="/" className="text-xl font-bold">
+                MirrorMatch
+              </Link>
+            </div>
+
+            {/* Main Actions - Always Visible */}
+            <div className="flex items-center space-x-4">
+              <Link
+                href="/upload"
+                className="hover:bg-purple-700 px-3 py-2 rounded-md text-sm font-medium transition whitespace-nowrap"
+              >
+                Upload
+              </Link>
+              <Link
+                href="/leaderboard"
+                className="hover:bg-purple-700 px-3 py-2 rounded-md text-sm font-medium transition whitespace-nowrap"
+              >
+                Leaderboard
+              </Link>
+            </div>
+
+            {/* User Info */}
+            <div className="flex items-center">
+              <span className="text-sm">Hello, {session.user.name}</span>
+            </div>
+          </div>
+        </div>
+      </nav>
+
+      {/* Side Menu */}
+      <div
+        className={`side-menu fixed top-16 left-0 h-[calc(100vh-4rem)] w-64 bg-white shadow-xl z-40 transform transition-transform duration-300 ease-in-out flex flex-col ${
+          sideMenuOpen ? "translate-x-0" : "-translate-x-full"
+        }`}
+      >
+        <div className="p-4 border-b border-gray-200 flex-shrink-0">
+          <div className="flex items-center justify-between">
+            <h2 className="text-lg font-semibold text-gray-900">Menu</h2>
+            <button
+              onClick={() => setSideMenuOpen(false)}
+              className="p-1 rounded-md hover:bg-gray-100 text-gray-500"
+              aria-label="Close menu"
+            >
+              <svg
+                className="h-5 w-5"
+                fill="none"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        <nav className="p-4 flex-1 overflow-y-auto">
+          <div className="flex flex-col space-y-2">
+            <Link
+              href="/photos"
+              className="px-4 py-3 rounded-md text-gray-700 hover:bg-purple-50 hover:text-purple-700 transition font-medium"
+              onClick={() => setSideMenuOpen(false)}
+            >
+              Photos
+            </Link>
+            <Link
+              href="/profile"
+              className="px-4 py-3 rounded-md text-gray-700 hover:bg-purple-50 hover:text-purple-700 transition font-medium"
+              onClick={() => setSideMenuOpen(false)}
+            >
+              Profile
+            </Link>
+            {session.user.role === "ADMIN" && (
+              <Link
+                href="/admin"
+                className="px-4 py-3 rounded-md text-gray-700 hover:bg-purple-50 hover:text-purple-700 transition font-medium"
+                onClick={() => setSideMenuOpen(false)}
+              >
+                Admin
+              </Link>
+            )}
+          </div>
+        </nav>
+
+        {/* Logout button in side menu - always visible at bottom */}
+        <div className="p-4 border-t border-gray-200 flex-shrink-0 bg-white">
+          <button
+            onClick={() => {
+              setSideMenuOpen(false)
+              signOut({ callbackUrl: "/login" })
+            }}
+            className="w-full bg-red-500 hover:bg-red-600 px-4 py-2 rounded-md text-sm font-medium text-white transition"
+          >
+            Logout
+          </button>
+        </div>
+      </div>
+
+      {/* Overlay for mobile */}
+      {sideMenuOpen && (
+        <div
+          className="fixed inset-0 bg-black bg-opacity-50 z-30 sm:hidden"
+          onClick={() => setSideMenuOpen(false)}
+        />
+      )}
+    </>
+  )
+}