This PR adds comprehensive photo management features, duplicate detection, attempt limits, penalty system improvements, and admin photo deletion capabilities to the MirrorMatch application. (#1)

# Photo Management and Game Features

## Summary
This PR adds comprehensive photo management features, duplicate detection, attempt limits, penalty system improvements, and admin photo deletion capabilities to the MirrorMatch application.

## Features Added

### 1. Duplicate Photo Detection
- **File-based duplicates**: Calculates SHA256 hash of uploaded files to detect duplicate content
- **URL-based duplicates**: Checks for duplicate photo URLs
- Prevents users from uploading the same photo multiple times
- Returns HTTP 409 (Conflict) with clear error messages

### 2. Maximum Attempts Per Photo
- Uploaders can set a maximum number of guesses allowed per user for each photo
- Default: unlimited (null or 0)
- UI displays remaining attempts counter
- API enforces attempt limits before allowing guesses
- Shows warning message when max attempts reached

### 3. Penalty System Improvements
- **Simplified UI**: Removed checkbox - penalty automatically enabled when penalty points > 0
- **Score protection**: Scores cannot go below 0, even with large penalties
- If penalty would result in negative score, only deducts available points and sets to 0

### 4. Admin Photo Deletion
- Admins can delete photos from:
  - Photos list page (hover to reveal delete icon)
  - Individual photo detail page (delete button in header)
- Deletes associated guesses automatically
- Deletes local uploaded files from filesystem
- Confirmation dialog before deletion
- Proper error handling and user feedback

### 5. Navigation Improvements
- Logout button always visible in side menu (hamburger menu)
- Improved side menu layout with fixed footer for logout button
- Better mobile responsiveness

### 6. Self-Guess Prevention
- Users cannot guess on their own uploaded photos
- Shows informative message with answer for photo owners

## Technical Changes

### Database Schema
- Added `fileHash` field (String?) to Photo model for duplicate detection
- Added `maxAttempts` field (Int?) to Photo model for attempt limits
- Added indexes on `url` and `fileHash` for performance

### API Routes
- `POST /api/photos/upload-multiple`: Enhanced with duplicate checking and maxAttempts
- `POST /api/photos/[photoId]/guess`: Added maxAttempts enforcement and score floor protection
- `DELETE /api/photos/[photoId]`: New route for admin photo deletion

### Components
- `DeletePhotoButton`: New reusable component for photo deletion
- Updated upload form to remove penalty checkbox
- Enhanced photo display pages with attempt counters and admin controls

## Database Migrations
- Run `npm run db:push` to apply schema changes
- Run `npm run db:generate` to regenerate Prisma client

## Testing
- Test duplicate detection with same file and different filenames
- Test duplicate detection with same URL
- Test max attempts enforcement
- Test penalty system with various point values
- Test score floor (cannot go below 0)
- Test admin photo deletion
- Test self-guess prevention

## Breaking Changes
None - all changes are backward compatible. Existing photos will have `null` for `maxAttempts` (unlimited) and `fileHash` (for URL uploads).

Reviewed-on: #1

components/Navigation.tsx

@@ -29,14 +29,14 @@ export default function Navigation() {
 
   return (
     <>
-      <nav className="sticky top-0 z-50 bg-gradient-to-r from-purple-600 to-indigo-600 text-white shadow-lg">
+      <nav className="sticky top-0 z-50 bg-gradient-to-r from-purple-600 to-indigo-600 text-white shadow-lg relative">
         <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"
+                className="menu-button p-2 rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-white relative z-10"
                 aria-label="Toggle menu"
               >
                 <svg
@@ -51,29 +51,31 @@ export default function Navigation() {
                   <path d="M4 6h16M4 12h16M4 18h16" />
                 </svg>
               </button>
-              <Link href="/" className="text-xl font-bold">
+              <Link href="/" className="text-xl font-bold relative z-10">
                 MirrorMatch
               </Link>
             </div>
 
             {/* Main Actions - Always Visible */}
-            <div className="flex items-center space-x-4">
+            <div className="flex items-center space-x-4 relative z-10">
               <Link
                 href="/upload"
-                className="hover:bg-purple-700 px-3 py-2 rounded-md text-sm font-medium transition whitespace-nowrap"
+                className="hover:bg-purple-700 px-3 py-2 rounded-md text-sm font-medium transition whitespace-nowrap relative z-10"
+                onClick={() => setSideMenuOpen(false)}
               >
                 Upload
               </Link>
               <Link
                 href="/leaderboard"
-                className="hover:bg-purple-700 px-3 py-2 rounded-md text-sm font-medium transition whitespace-nowrap"
+                className="hover:bg-purple-700 px-3 py-2 rounded-md text-sm font-medium transition whitespace-nowrap relative z-10"
+                onClick={() => setSideMenuOpen(false)}
               >
                 Leaderboard
               </Link>
             </div>
 
             {/* User Info */}
-            <div className="flex items-center">
+            <div className="flex items-center relative z-10">
               <span className="text-sm">Hello, {session.user.name}</span>
             </div>
           </div>
@@ -82,7 +84,7 @@ export default function Navigation() {
 
       {/* 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 ${
+        className={`side-menu fixed top-16 left-0 h-[calc(100vh-4rem)] w-64 bg-white shadow-xl z-30 transform transition-transform duration-300 ease-in-out flex flex-col ${
           sideMenuOpen ? "translate-x-0" : "-translate-x-full"
         }`}
       >
@@ -154,7 +156,7 @@ export default function Navigation() {
       {/* Overlay for mobile */}
       {sideMenuOpen && (
         <div
-          className="fixed inset-0 bg-black bg-opacity-50 z-30 sm:hidden"
+          className="fixed inset-0 bg-black bg-opacity-50 z-20 sm:hidden"
           onClick={() => setSideMenuOpen(false)}
         />
       )}