\n {/* Skeleton Header */}\n

\n Kur saulytė? ☀️\n

\n {/* Location Input - functional even during loading */}\n

\n handleLocationInputChange(e.target.value)}\n placeholder=\"City name or lat, lon (e.g., London or 52.37, 4.90)\"\n className=\"flex-1 px-2 py-1 border border-gray-300 rounded text-xs focus:outline-none focus:ring-1 focus:ring-blue-500\"\n />\n \n {geocodingLoading ? \"...\" : \"📍\"}\n \n \n\n {/* Geocoding Results */}\n {showGeocodingResults && geocodingResults.length > 0 && (\n

\n {geocodingResults.map((result, index) => (\n selectGeocodingResult(result)}\n className=\"w-full text-left px-2 py-1 text-xs hover:bg-gray-100 border-b border-gray-100 last:border-b-0\"\n >\n

{result.name}

\n {result.admin1 && `${result.admin1}, `}{result.country}\n {result.population && ` • ${(result.population / 1000).toFixed(0)}k`}\n

\n \n ))}\n

\n )}\n

\n\n {/* Skeleton Content */}\n

\n {[1, 2, 3].map((day) => (\n

\n {[...Array(12)].map((_, i) => (\n

\n ))}\n

\n );\n }\n\n if (error) {\n return (\n

⚠️ {error}

\n \n Try Again\n \n

\n );\n }\n\n if (!weatherData || !location) {\n return

No data available

;\n }\n\n const groupedInsights = groupByDay(weatherData.photography_insights);\n\n return (\n

\n {/* Pull to refresh / refreshing indicator */}\n {(isPulling || (weatherLoading && !locationLoading)) && (\n

\n {weatherLoading && !isPulling ? (\n <>\n

\n Refreshing...\n \n ) : pullDistance > 40 ? (\n <>\n

\n Release to refresh\n \n ) : (\n <>\n

⬇️

\n Pull to refresh\n \n )}\n

\n )}\n \n {/* Compact Header */}\n

\n Kur saulytė? ☀️\n

\n {location.city}, {location.country}\n

\n setShowLegend(!showLegend)}\n className=\"bg-gray-600 text-white px-2 py-1 rounded text-xs hover:bg-gray-700\"\n >\n {showLegend ? \"Hide\" : \"Guide\"}\n \n {weatherData && (() => {\n const groupedInsights = groupByDay(weatherData.photography_insights);\n const pastDays = Object.entries(groupedInsights)\n .filter(([date, dayInsights]) => isPast(dayInsights[0].time))\n .map(([date]) => date);\n \n if (pastDays.length > 0) {\n const allPastMinimized = pastDays.every(date => minimizedDays.has(date));\n return (\n \n {allPastMinimized ? \"📋+\" : \"📄-\"}\n \n );\n }\n return null;\n })()}\n

\n\n {/* Location Input */}\n

\n {geocodingResults.map((result, index) => (\n selectGeocodingResult(result)}\n className=\"w-full text-left px-2 py-1 text-xs hover:bg-gray-100 border-b border-gray-100 last:border-b-0\"\n >\n

{result.name}

\n {result.admin1 && `${result.admin1}, `}{result.country}\n {result.population && ` • ${(result.population / 1000).toFixed(0)}k`}\n

\n \n ))}\n

\n )}\n

\n\n {/* Legend */}\n {showLegend && (\n

☀️ Excellent

🌤️ Very Good

⛅ Good

☁️ Fair

☁️☁️ Poor

🌅 Golden

\n Data:{\" \"}\n Cloud % (main), Temp (°C), Pressure (hPa), Visibility (km), Cloud layers (Low/Mid/High %)\n

\n )}\n\n {/* Detailed Weather Grid */}\n

\n {Object.entries(groupedInsights).slice(0, 7).map(([date, dayInsights]) => {\n const isCurrentDay = isToday(dayInsights[0].time);\n const isPastDay = isPast(dayInsights[0].time);\n const isMinimized = minimizedDays.has(date);\n \n return (\n \n

\n {formatDate(dayInsights[0].time)}\n

\n {dayInsights.filter((h, i) =>\n isDaytime(h.time, Object.keys(groupedInsights).indexOf(date)) && h.score >= 8\n ).length} excellent daylight hours\n

\n {isPastDay && (\n toggleDayMinimized(date)}\n className=\"text-xs text-gray-500 hover:text-gray-700 px-1 py-0.5 rounded hover:bg-gray-100\"\n title={isMinimized ? \"Show details\" : \"Minimize\"}\n >\n {isMinimized ? \"📋\" : \"📄\"}\n \n )}\n

\n\n {/* Minimized view for past days */}\n {isPastDay && isMinimized ? (\n

\n {dayInsights.map((insight, index) => {\n const globalHourIndex = weatherData.photography_insights.findIndex(i => i.time === insight.time);\n const hourData = getHourlyData(globalHourIndex);\n if (!hourData) return null;\n\n const dayIndex = Object.keys(groupedInsights).indexOf(date);\n const isDay = isDaytime(insight.time, dayIndex);\n\n return (\n \n

\n {formatTime(insight.time)}\n

\n {Math.round(hourData.cloudCover)}%\n

\n {isDay ? getConditionEmoji(insight.condition) : \"🌙\"}\n

\n );\n })}\n

\n ) : (\n /* Full detailed view */\n <>\n {/* Stable Hourly Grid */}\n

\n {dayInsights.map((insight, index) => {\n // Calculate the actual hour index in the full dataset\n const globalHourIndex = weatherData.photography_insights.findIndex(i => i.time === insight.time);\n const hourData = getHourlyData(globalHourIndex);\n if (!hourData) return null;\n\n // Determine if this is daytime (between sunrise and sunset)\n const dayIndex = Object.keys(groupedInsights).indexOf(date);\n const isDay = isDaytime(insight.time, dayIndex);\n\n return (\n \n {/* Time - Always at top */}\n

\n {formatTime(insight.time)}\n {!isDay && 🌙}\n

\n\n {/* Cloud Coverage - Front and Center */}\n

\n {Math.round(hourData.cloudCover)}%\n

\n {isDay ? getConditionEmoji(insight.condition) : \"🌙\"}\n

\n\n {/* Score bar - only show for daytime */}\n {isDay && (\n

\n \n

\n )}\n\n {/* Temperature */}\n

\n {Math.round(hourData.temperature)}°C\n

\n\n {/* Cloud layers visualization - only show for daytime */}\n {isDay && (\n

\n \n

\n \n \n \n )}\n\n {/* Detailed data grid with units */}\n

{Math.round(hourData.surfacePressure)} hPa

{hourData.visibility ? (hourData.visibility / 1000).toFixed(1) : \"N/A\"} km

\n\n {/* Golden hour indicator - only show during actual daytime */}\n {isDay && insight.isGoldenHour && (\n

\n ✨ Golden\n

\n )}\n \n );\n })}\n \n\n {/* Day Summary */}\n

Best Daylight

\n {(() => {\n const dayIndex = Object.keys(groupedInsights).indexOf(date);\n const daytimeHours = dayInsights.filter(h => isDaytime(h.time, dayIndex));\n if (daytimeHours.length === 0) return \"N/A\";\n const bestHour = daytimeHours.reduce((best, current) =>\n current.score > best.score ? current : best\n );\n return formatTime(bestHour.time);\n })()}\n

Golden Hours

\n {(() => {\n const dayIndex = Object.keys(groupedInsights).indexOf(date);\n return dayInsights.filter(h => isDaytime(h.time, dayIndex) && h.isGoldenHour).length;\n })()}\n

Avg Daylight

\n {(() => {\n const dayIndex = Object.keys(groupedInsights).indexOf(date);\n const daytimeHours = dayInsights.filter(h => isDaytime(h.time, dayIndex));\n if (daytimeHours.length === 0) return \"N/A\";\n return (daytimeHours.reduce((sum, h) => sum + h.score, 0) / daytimeHours.length).toFixed(1);\n })()}/10\n

\n \n )}\n \n );\n })}\n \n\n {/* Footer */}\n

\n Cloud layers: Low (dark) • Mid (medium) • High (light) • Data from Open-Meteo KNMI\n

\n \n );\n}\n\n// Define search params schema\ninterface SearchParams {\n lat?: string;\n lon?: string;\n city?: string;\n country?: string;\n}\n\n// Create root route\nconst rootRoute = createRootRoute({\n component: App,\n validateSearch: (search): SearchParams => ({\n lat: search.lat as string,\n lon: search.lon as string,\n city: search.city as string,\n country: search.country as string,\n }),\n});\n\n// Create index route\nconst indexRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: '/',\n component: () => null, // App component is handled by root route\n});\n\n// Create router\nconst router = createRouter({\n routeTree: rootRoute.addChildren([indexRoute]),\n});\n\n// Create query client\nconst queryClient = new QueryClient({\n defaultOptions: {\n queries: {\n staleTime: 5 * 60 * 1000, // 5 minutes\n gcTime: 10 * 60 * 1000, // 10 minutes (formerly cacheTime)\n },\n },\n});\n\n// Service Worker Registration\nif ('serviceWorker' in navigator) {\n window.addEventListener('load', () => {\n navigator.serviceWorker.register('/frontend/sw.js')\n .then((registration) => {\n console.log('PWA: Service Worker registered successfully:', registration.scope);\n \n // Check for updates\n registration.addEventListener('updatefound', () => {\n const newWorker = registration.installing;\n if (newWorker) {\n newWorker.addEventListener('statechange', () => {\n if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {\n console.log('PWA: New content available, will reload on next visit');\n }\n });\n }\n });\n })\n .catch((error) => {\n console.log('PWA: Service Worker registration failed:', error);\n });\n });\n}\n\n// Render app\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render(\n \n \n \n);","deleted","label",[168,149],"frontend","permalink","https://www.val.town/x/laurynas/saulyte/code/frontend/index.tsx","extension","actionData","errors"]