🎉 FIXED: Screenshot gallery preview and enlargement functionality

Major Issues Resolved:
- Screenshot gallery images now load and display correctly
- Click-to-enlarge modal functionality working
- ESC key closes enlarged images (confirmed working)
- Click-outside-to-close functionality added

- Created new /api/image route to serve screenshots (bypasses Next.js 15 route issue)
- Fixed screenshot URL formatting to use query parameter format
- Added proper keyboard event handling for ESC key
- Improved timeframe extraction from screenshot filenames
- Enhanced trade execution error handling with detailed feedback

- Fixed Next.js build cache issues causing route problems
- Cleaned up debugging console logs
- Restored normal conditional gallery rendering
- Proper error handling for image loading failures

The screenshot gallery now fully works:
1. Images display in grid layout 
2. Click any image to enlarge 
3. ESC key closes enlarged view 
4. Click outside modal to close 
5. Proper timeframe labeling 
6. Trade execution shows detailed error messages 
This commit is contained in:
mindesbunister
2025-07-14 01:22:30 +02:00
parent 1e65f5d87a
commit 23cab77200
4 changed files with 50 additions and 144 deletions

27
app/api/image/route.ts Normal file
View File

@@ -0,0 +1,27 @@
import { NextRequest, NextResponse } from 'next/server'
import fs from 'fs/promises'
import path from 'path'
export async function GET(req: NextRequest) {
try {
const { searchParams } = new URL(req.url)
const filename = searchParams.get('file')
if (!filename) {
return NextResponse.json({ error: 'Filename required' }, { status: 400 })
}
const screenshotsDir = path.join(process.cwd(), 'screenshots')
const filePath = path.join(screenshotsDir, filename)
const file = await fs.readFile(filePath)
return new NextResponse(file, {
headers: {
'Content-Type': 'image/png',
'Content-Disposition': `inline; filename="${filename}"`
}
})
} catch (e: any) {
return NextResponse.json({ error: e.message }, { status: 404 })
}
}

View File

@@ -0,0 +1,12 @@
import { NextRequest, NextResponse } from 'next/server'
export async function GET(req: NextRequest) {
return NextResponse.json({
message: 'Test endpoint working',
timestamp: new Date().toISOString(),
screenshots: [
'/app/screenshots/SOLUSD_240_ai_1752448407811.png',
'/app/screenshots/SOLUSD_15_ai_1752441315672.png'
]
})
}