fix: correct timeframe display in screenshot gallery

- Fixed timeframe mapping logic in ScreenshotGallery component
- Improved timeframe extraction from filenames with better pattern matching
- Added fallback logic to prioritize filename-based timeframe detection
- Enhanced sorting to handle all timeframe formats (5m, 1h, 4h, 1d, 1w, 1M)
- Resolves UI bug where gallery showed incorrect timeframe descriptions

components/ScreenshotGallery.tsx

@@ -44,23 +44,50 @@ export default function ScreenshotGallery({
     if (tf.includes('2h') || tf === '120') return 120
     if (tf.includes('4h') || tf === '240') return 240
     if (tf.includes('1d') || tf === 'D') return 1440
+    if (tf.includes('1w') || tf === 'W') return 10080
+    if (tf.includes('1M') || tf === 'M') return 43200
     // Default fallback
     return parseInt(tf) || 999
   }
 
   // Extract timeframe from filename
   const extractTimeframeFromFilename = (filename: string) => {
-    const match = filename.match(/_(\d+|D)_/)
-    if (!match) return 'Unknown'
-    const tf = match[1]
-    if (tf === 'D') return '1D'
-    if (tf === '5') return '5m'
-    if (tf === '15') return '15m'
-    if (tf === '30') return '30m'
-    if (tf === '60') return '1h'
-    if (tf === '120') return '2h'
-    if (tf === '240') return '4h'
-    return `${tf}m`
+    // First try to match the pattern _timeframe_
+    const match = filename.match(/_(\d+|D|W|M)_/)
+    if (match) {
+      const tf = match[1]
+      if (tf === 'D') return '1d'
+      if (tf === 'W') return '1w'
+      if (tf === 'M') return '1M'
+      if (tf === '5') return '5m'
+      if (tf === '15') return '15m'
+      if (tf === '30') return '30m'
+      if (tf === '60') return '1h'
+      if (tf === '120') return '2h'
+      if (tf === '240') return '4h'
+      return `${tf}m`
+    }
+    
+    // Try to match timeframe patterns anywhere in the filename
+    const timeframePatterns = [
+      { pattern: /5m|_5_/i, value: '5m' },
+      { pattern: /15m|_15_/i, value: '15m' },
+      { pattern: /30m|_30_/i, value: '30m' },
+      { pattern: /1h|60m|_60_/i, value: '1h' },
+      { pattern: /2h|120m|_120_/i, value: '2h' },
+      { pattern: /4h|240m|_240_/i, value: '4h' },
+      { pattern: /1d|daily|_D_/i, value: '1d' },
+      { pattern: /1w|weekly|_W_/i, value: '1w' },
+      { pattern: /1M|monthly|_M_/i, value: '1M' }
+    ]
+    
+    for (const { pattern, value } of timeframePatterns) {
+      if (pattern.test(filename)) {
+        return value
+      }
+    }
+    
+    return 'Unknown'
   }
 
   // Helper function to detect layout from filename
@@ -76,7 +103,13 @@ export default function ScreenshotGallery({
       ? screenshot 
       : (screenshot as any)?.url || String(screenshot)
     const filename = screenshotUrl.split('/').pop() || ''
-    const timeframe = timeframes[index] || extractTimeframeFromFilename(filename)
+    
+    // Extract timeframe from filename first, then use timeframes array as fallback
+    const extractedTimeframe = extractTimeframeFromFilename(filename)
+    const timeframe = extractedTimeframe !== 'Unknown' 
+      ? extractedTimeframe 
+      : (timeframes[index] || extractedTimeframe)
+    
     const layout = detectLayout(filename)
     
     return {