\n {\"Initializing Kinobi...\"}\n .\n .\n .\n

\n );\n }\n\n return (\n \n

navigate(\"/\")}>\n $\"Kinobi\"$ \n Kinobi\n

\n \n

\n \n } />\n } />\n } />\n \n }\n />\n } />\n \n

\n \n

\n \n );\n}\n\n// Wrapped App with Router\nfunction RoutedApp() {\n return (\n \n \n \n );\n}\n\nfunction ShitView() {\n const syncId = useSyncId();\n const [chores, setChores] = useState([]);\n const [config, setConfig] = useState(null);\n const [isLoading, setIsLoading] = useState(true);\n\n async function fetchChoresInternal() {\n if (!syncId) return;\n setIsLoading(true);\n try {\n const [choresResponse, configResponse] = await Promise.all([\n fetch(`/api/${syncId}/chores`),\n fetch(`/api/${syncId}/config`),\n ]);\n console.log(\"[DEBUG] Fetched choresResponse:\", choresResponse);\n console.log(\"[DEBUG] Fetched configResponse:\", configResponse);\n if (!choresResponse.ok) throw new Error(`Chores fetch error! status: ${choresResponse.status}`);\n if (!configResponse.ok) throw new Error(`Config fetch error! status: ${configResponse.status}`);\n const choresData = await choresResponse.json();\n const configData = await configResponse.json();\n console.log(\"[DEBUG] choresData:\", choresData);\n console.log(\"[DEBUG] configData:\", configData);\n setChores(Array.isArray(choresData) ? choresData : []);\n setConfig(configData);\n } catch (error) {\n console.error(\"[ERROR] Error fetching data:\", error);\n setChores([]);\n setConfig(null);\n }\n setIsLoading(false);\n }\n\n useEffect(() => {\n fetchChoresInternal();\n }, [syncId]);\n\n if (!syncId) return

Loading sync information...

;\n if (isLoading || !config)\n return

Loading chores...

;\n\n if (chores.length === 0) {\n return (\n

No chores configured

Add chores in Settings

\n );\n }\n\n // Use full screen width, distribute chores evenly\n return (\n

\n \n {chores.slice(0, 6).map((chore, index) => (\n \n ))}\n

\n \n );\n}\n\nfunction ShitPile(\n { chore, config, onTended, animationIndex = 0 }: {\n chore: Chore;\n config: ChoreConfig;\n onTended: () => void;\n animationIndex?: number;\n },\n) {\n const syncId = useSyncId();\n const [lastTended, setLastTended] = useState(null);\n const [lastTender, setLastTender] = useState(null);\n const [isLoading, setIsLoading] = useState(true);\n const [showModal, setShowModal] = useState(false);\n const [refreshKey, setRefreshKey] = useState(0);\n const [countdownState, setCountdownState] = useState(null);\n\n async function fetchLastTendedInternal() {\n if (!syncId || !chore) return;\n setIsLoading(true);\n try {\n // Fetch the history and find the last tending for this specific chore\n const response = await fetch(`/api/${syncId}/history`);\n if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);\n const allHistory = await response.json();\n\n // Filter for this chore and get the most recent\n const choreHistory = allHistory.filter((entry: any) => entry.chore_id === chore.id);\n if (choreHistory.length > 0) {\n const lastEntry = choreHistory[0]; // Already sorted by timestamp desc from API\n setLastTended(lastEntry.timestamp);\n setLastTender(lastEntry.person);\n } else {\n setLastTended(null);\n setLastTender(null);\n }\n } catch (error) {\n console.error(\"Error fetching last tended:\", error);\n setLastTended(null);\n setLastTender(null);\n }\n setIsLoading(false);\n }\n\n // Initial data fetch when component mounts or syncId/chore changes\n useEffect(() => {\n fetchLastTendedInternal();\n }, [syncId, chore]);\n\n // Calculate countdown state whenever chore data changes\n useEffect(() => {\n if (config) {\n const newCountdownState = CountdownService.calculateCountdownState(chore, config);\n setCountdownState(newCountdownState);\n }\n }, [chore, config, refreshKey]);\n\n // Set up refresh timer with background tab optimization\n useEffect(() => {\n let countdownRefreshInterval: NodeJS.Timeout | null = null;\n let dataRefreshInterval: NodeJS.Timeout | null = null;\n let isTabActive = !document.hidden;\n\n const startIntervals = () => {\n // Update countdown display every minute when tab is active\n countdownRefreshInterval = setInterval(() => {\n if (!document.hidden) {\n setRefreshKey(prev => prev + 1); // Trigger re-render with new countdown calculation\n }\n }, 60 * 1000); // Update every minute for smooth countdown\n\n // Fetch fresh data every 5 minutes\n dataRefreshInterval = setInterval(() => {\n if (!document.hidden) {\n fetchLastTendedInternal();\n }\n }, 5 * 60 * 1000);\n };\n\n const stopIntervals = () => {\n if (countdownRefreshInterval) clearInterval(countdownRefreshInterval);\n if (dataRefreshInterval) clearInterval(dataRefreshInterval);\n };\n\n // Handle visibility change (tab becomes active/inactive)\n const handleVisibilityChange = () => {\n if (document.hidden) {\n // Tab became inactive - reduce timer activity\n isTabActive = false;\n } else {\n // Tab became active - refresh immediately and resume normal timers\n isTabActive = true;\n setRefreshKey(prev => prev + 1); // Immediate refresh\n fetchLastTendedInternal(); // Fetch fresh data\n }\n };\n\n // Start intervals and listen for visibility changes\n startIntervals();\n document.addEventListener(\"visibilitychange\", handleVisibilityChange);\n\n // Clean up on unmount\n return () => {\n stopIntervals();\n document.removeEventListener(\"visibilitychange\", handleVisibilityChange);\n };\n }, [syncId, chore]); // Re-create intervals if syncId or chore changes\n\n function getTimeSinceLastTending() {\n if (lastTended === null || typeof lastTended === \"undefined\") return \"no tending logged\";\n\n const now = Date.now();\n const diff = now - Number(lastTended); // Ensure lastTended is a number\n if (isNaN(diff)) return \"Loading...\"; // Or handle error\n\n if (diff < 0) return \"Just now (check clock?)\"; // Future date\n\n // Calculate hours and days\n const hours = Math.floor(diff / (1000 * 60 * 60));\n const days = Math.floor(diff / (1000 * 60 * 60 * 24));\n\n // Show hours if less than 24 hours ago\n if (hours < 24) {\n if (hours === 0) return \"less than an hour ago\";\n if (hours === 1) return \"1 hour ago\";\n return `${hours} hours ago`;\n }\n\n // Show days for 1+ days\n if (days === 1) return \"1 day ago\";\n return `${days} days ago`;\n }\n\n function getTextColorClass() {\n if (lastTended === null || typeof lastTended === \"undefined\") return \"text-amber-600\";\n const days = Math.floor((Date.now() - Number(lastTended)) / (1000 * 60 * 60 * 24));\n\n // Calculate opacity percentage based on days (30% to 100% over 4 days)\n const opacityPercent = Math.min(30 + (70 * days / 4), 100);\n\n // Convert opacity percentage to Tailwind opacity class (30, 40, 50, 60, 70, 80, 90, 100)\n const opacityClass = `opacity-${Math.ceil(opacityPercent / 10) * 10}`;\n\n return `text-amber-800 ${opacityClass}`;\n }\n\n function getAnimationClass() {\n // Cycle through the available animation classes\n const animationClasses = [\n \"shit-float-1\",\n \"shit-float-2\",\n \"shit-float-3\",\n \"shit-float-4\",\n \"shit-float-5\",\n \"shit-float-6\",\n ];\n return animationClasses[animationIndex % animationClasses.length];\n }\n\n return (\n

\n {isLoading\n ? (\n

\n Assembling bits\n .\n .\n .\n

\n )\n : (\n <>\n {/* Progress Ring with Chore Icon */}\n

\n {countdownState\n ? (\n \n setShowModal(true)}\n >\n {chore.icon}\n

\n \n )\n : (\n setShowModal(true)}\n style={{ width: 140, height: 140 }}\n >\n {chore.icon}\n

\n )}\n \n\n {/* Chore Name */}\n

\n {chore.name}\n

\n\n {/* Countdown Status and Time Display */}\n {countdownState && (\n

\n \n

\n )}\n\n {/* Last Tended Info */}\n

\n {lastTended === null || typeof lastTended === \"undefined\"\n ? \"no tending logged\"\n : `Last: ${getTimeSinceLastTending()}${lastTender ? ` by ${lastTender}` : \"\"}`}\n

\n\n {/* Points indicator */}\n

\n ⭐\n {chore.points} points\n •\n 🔄 {chore.cycleDuration}h cycle\n

\n \n )}\n {showModal && (\n setShowModal(false)}\n onTended={() => {\n fetchLastTendedInternal();\n if (onTended) onTended(); // Also call parent's onTended to refresh chores if needed\n }}\n />\n )}\n \n );\n}\n\nfunction TenderSelectionModal(\n { chore, onClose, onTended }: { chore: Chore; onClose: () => void; onTended: () => void },\n) {\n const syncId = useSyncId();\n const [tenders, setTenders] = useState([]);\n const [recentTenders, setRecentTenders] = useState([]);\n const [newTenderName, setNewTenderName] = useState(\"\");\n const [notes, setNotes] = useState(\"\");\n const [isAdding, setIsAdding] = useState(false);\n const [selectedTender, setSelectedTender] = useState(null);\n const [sortedTenders, setSortedTenders] = useState([]);\n\n async function fetchTendersInternal() {\n if (!syncId) return;\n try {\n const response = await fetch(`/api/${syncId}/tenders`);\n if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);\n const data = await response.json();\n setTenders(Array.isArray(data) ? data : []);\n } catch (error) {\n console.error(\"Error fetching tenders:\", error);\n setTenders([]);\n }\n }\n\n async function fetchRecentTendersInternal() {\n if (!syncId) return;\n try {\n const response = await fetch(`/api/${syncId}/history`);\n if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);\n const data = await response.json();\n\n // Extract unique tender names from recent history\n const uniqueNames = Array.isArray(data)\n ? [...new Set(data.slice(0, 10).map((entry: any) => entry.person))]\n : [];\n\n setRecentTenders(uniqueNames);\n } catch (error) {\n console.error(\"Error fetching recent tenders:\", error);\n setRecentTenders([]);\n }\n }\n\n // Create a sorted tender list with recent tenders first\n useEffect(() => {\n if (tenders.length === 0) return;\n\n // Create a map of recently used tenders for faster lookups\n const recentMap = new Map();\n recentTenders.forEach((name, index) => {\n recentMap.set(name, index);\n });\n\n // Sort tenders: recent ones first (in order of recency), then others alphabetically\n const sorted = [...tenders].sort((a: any, b: any) => {\n const aIsRecent = recentMap.has(a.name);\n const bIsRecent = recentMap.has(b.name);\n\n if (aIsRecent && bIsRecent) {\n // Both are recent, sort by recency (lower index = more recent)\n return recentMap.get(a.name) - recentMap.get(b.name);\n } else if (aIsRecent) {\n // Only a is recent, it comes first\n return -1;\n } else if (bIsRecent) {\n // Only b is recent, it comes first\n return 1;\n } else {\n // Neither is recent, sort alphabetically\n return a.name.localeCompare(b.name);\n }\n });\n\n setSortedTenders(sorted);\n }, [tenders, recentTenders]);\n\n useEffect(() => {\n fetchTendersInternal();\n fetchRecentTendersInternal();\n }, [syncId]);\n\n async function handleTending() {\n const tenderName = selectedTender || newTenderName.trim();\n if (!syncId || !tenderName) return;\n\n try {\n await fetch(`/api/${syncId}/tend`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n tender: tenderName,\n choreId: chore.id,\n notes: notes.trim() || null,\n }),\n });\n\n if (newTenderName.trim() && !selectedTender) {\n // Add the new tender to the list\n await fetch(`/api/${syncId}/tenders`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ name: newTenderName.trim() }),\n });\n }\n\n onTended(); // This will call fetchLastTendedInternal in ShitPile component\n onClose();\n } catch (error) {\n console.error(\"Error tending space:\", error);\n }\n }\n\n function selectTender(name: string) {\n setSelectedTender(name);\n setNewTenderName(\"\"); // Clear the input field when selecting a tender\n }\n\n return (\n

Who's logging {chore.name}?

\n\n {/* Unified tenders list */}\n

\n {sortedTenders.map((tender: any) => (\n selectTender(tender.name)}\n >\n {tender.name}\n {recentTenders.includes(tender.name)\n && }\n \n ))}\n\n {/* New tender input styled like an option */}\n \n {\n setNewTenderName(e.target.value);\n setSelectedTender(null); // Clear selection when typing\n }}\n placeholder=\"+ Add new tender\"\n className={`w-full bg-transparent focus:outline-none ${\n !selectedTender && newTenderName\n ? \"text-white placeholder-amber-100\"\n : \"text-amber-800 placeholder-amber-400\"\n }`}\n disabled={isAdding}\n />\n

\n\n {/* Notes section */}\n

\n \n Any notes about the tending?\n \n setNotes(e.target.value)}\n className=\"w-full border border-amber-300 rounded px-2 py-1 focus:ring-amber-500 focus:border-amber-500 min-h-[80px] bg-yellow-50\"\n placeholder=\"What did you clean? Any issues found? How shitty was it? Everything is welcome.\"\n />\n

\n\n {/* Action buttons */}\n \n Log Tending {chore.icon}\n \n\n \n Cancel\n \n

\n \n );\n}\n\nfunction HistoryView() {\n const syncId = useSyncId();\n if (!syncId) return

Loading sync information...

;\n return (\n

\n \n

\n );\n}\n\nfunction LeaderboardView() {\n const syncId = useSyncId();\n if (!syncId) return

Loading sync information...

;\n return (\n

\n \n

\n );\n}\n\nfunction LeaderboardComponent() {\n const syncId = useSyncId();\n const [leaderboardData, setLeaderboardData] = useState([]);\n const [isLoading, setIsLoading] = useState(true);\n const [filterPeriod, setFilterPeriod] = useState<\"all\" | \"7d\" | \"30d\">(\"all\");\n const [sortBy, setSortBy] = useState<\"points\" | \"completions\" | \"average\">(\"points\");\n\n async function fetchLeaderboardData() {\n if (!syncId) return;\n setIsLoading(true);\n try {\n const response = await fetch(`/api/${syncId}/leaderboard`);\n if (!response.ok) throw new Error(`Leaderboard fetch error! status: ${response.status}`);\n\n const data = await response.json();\n setLeaderboardData(Array.isArray(data) ? data : []);\n } catch (error) {\n console.error(\"Error fetching leaderboard:\", error);\n setLeaderboardData([]);\n } finally {\n setIsLoading(false);\n }\n }\n\n useEffect(() => {\n fetchLeaderboardData();\n }, [syncId]);\n\n // Filter and sort leaderboard data\n const processedData = React.useMemo(() => {\n let filtered = [...leaderboardData];\n\n // Apply time period filter\n if (filterPeriod !== \"all\") {\n const cutoffTime = Date.now() - (filterPeriod === \"7d\" ? 7 * 24 * 60 * 60 * 1000 : 30 * 24 * 60 * 60 * 1000);\n filtered = filtered.map(entry => ({\n ...entry,\n recentCompletions: entry.recentCompletions.filter(completion => completion.timestamp > cutoffTime),\n score: {\n ...entry.score,\n totalPoints: entry.recentCompletions.filter(completion => completion.timestamp > cutoffTime).length * 10, // Simplified for filtering\n completionCount: entry.recentCompletions.filter(completion => completion.timestamp > cutoffTime).length,\n },\n }));\n }\n\n // Sort by selected criteria\n filtered.sort((a, b) => {\n switch (sortBy) {\n case \"points\":\n return b.score.totalPoints - a.score.totalPoints;\n case \"completions\":\n return b.score.completionCount - a.score.completionCount;\n case \"average\":\n const avgA = a.score.completionCount > 0 ? a.score.totalPoints / a.score.completionCount : 0;\n const avgB = b.score.completionCount > 0 ? b.score.totalPoints / b.score.completionCount : 0;\n return avgB - avgA;\n default:\n return b.score.totalPoints - a.score.totalPoints;\n }\n });\n\n // Reassign ranks\n filtered.forEach((entry, index) => {\n entry.rank = index + 1;\n });\n\n return filtered;\n }, [leaderboardData, filterPeriod, sortBy]);\n\n if (isLoading) {\n return (\n

\n Loading leaderboard...\n .\n .\n .\n

\n );\n }\n\n return (\n

🏆 Leaderboard

\n\n {/* Filter and Sort Controls */}\n

\n Period:\n setFilterPeriod(e.target.value as \"all\" | \"7d\" | \"30d\")}\n className=\"border border-amber-300 rounded px-2 py-1 text-sm bg-yellow-50 focus:ring-amber-500 focus:border-amber-500\"\n >\n \n \n \n \n

\n\n

\n Sort by:\n setSortBy(e.target.value as \"points\" | \"completions\" | \"average\")}\n className=\"border border-amber-300 rounded px-2 py-1 text-sm bg-yellow-50 focus:ring-amber-500 focus:border-amber-500\"\n >\n \n \n \n \n

\n\n {processedData.length === 0\n ? (\n

\n No scoring data available for the selected period. Complete some chores to get started!\n

\n )\n : (\n

\n {processedData.map((entry, index) => {\n const pointsPerCompletion = entry.score.completionCount > 0\n ? (entry.score.totalPoints / entry.score.completionCount).toFixed(1)\n : \"0.0\";\n\n return (\n \n

\n \n {index === 0 && \"🥇\"}\n {index === 1 && \"🥈\"}\n {index === 2 && \"🥉\"}\n {index > 2 && `#${entry.rank}`}\n

\n {entry.tender.name}\n {index < 3 && (\n \n Top Performer\n \n )}\n

\n {entry.score.completionCount} completions\n •\n {pointsPerCompletion} pts/completion\n •\n Last active {new Date(entry.score.lastActivity).toLocaleDateString()}\n

\n\n {/* Recent completions preview */}\n {entry.recentCompletions.length > 0 && (\n

\n Recent:{\" \"}\n {entry.recentCompletions.slice(0, 3).map((completion, i) => (\n \n {i > 0 && \", \"}\n {new Date(completion.timestamp).toLocaleDateString()}\n \n ))}\n {entry.recentCompletions.length > 3 && ` +${entry.recentCompletions.length - 3} more`}\n

\n )}\n

{entry.score.totalPoints}

points

\n {entry.score.completionCount > 0 && (\n

{pointsPerCompletion} avg

\n )}\n

\n );\n })}\n \n )}\n\n

Points are awarded for completing chores. Keep up the great work! 🌟

\n Use the filters above to view performance over different time periods\n

\n \n );\n}\n\nfunction ShitHistoryComponent() {\n const syncId = useSyncId();\n const [tenders, setTenders] = useState([]);\n const [chores, setChores] = useState([]);\n const [history, setHistory] = useState([]);\n const [isLoading, setIsLoading] = useState(true);\n const [isProcessing, setIsProcessing] = useState(false);\n const [showExactTimes, setShowExactTimes] = useState>({});\n const [clickedTimestamp, setClickedTimestamp] = useState(null);\n\n // Helper function to format relative time\n const formatRelativeTime = (timestamp: number) => {\n const now = Date.now();\n const diffMs = now - timestamp;\n const diffSecs = Math.floor(diffMs / 1000);\n const diffMins = Math.floor(diffSecs / 60);\n const diffHours = Math.floor(diffMins / 60);\n const diffDays = Math.floor(diffHours / 24);\n const diffMonths = Math.floor(diffDays / 30);\n const diffYears = Math.floor(diffDays / 365);\n\n if (diffSecs < 60) return \"just now\";\n if (diffMins < 60) return `${diffMins} ${diffMins === 1 ? \"minute\" : \"minutes\"} ago`;\n if (diffHours < 24) return `${diffHours} ${diffHours === 1 ? \"hour\" : \"hours\"} ago`;\n if (diffDays < 30) return `${diffDays} ${diffDays === 1 ? \"day\" : \"days\"} ago`;\n if (diffMonths < 12) return `${diffMonths} ${diffMonths === 1 ? \"month\" : \"months\"} ago`;\n return `${diffYears} ${diffYears === 1 ? \"year\" : \"years\"} ago`;\n };\n\n // Toggle visibility of exact timestamp for an entry\n const toggleExactTime = (entryId: string) => {\n setClickedTimestamp(entryId);\n setTimeout(() => setClickedTimestamp(null), 500);\n\n setShowExactTimes(prev => ({\n ...prev,\n [entryId]: !prev[entryId],\n }));\n };\n\n // Get chore by ID\n const getChoreById = (choreId: string): Chore | undefined => {\n return chores.find((chore) => chore.id === choreId);\n };\n\n async function fetchDataInternal() {\n if (!syncId) return;\n setIsLoading(true);\n setIsProcessing(true);\n try {\n const [tendersResponse, choresResponse, historyResponse] = await Promise.all([\n fetch(`/api/${syncId}/tenders`),\n fetch(`/api/${syncId}/chores`),\n fetch(`/api/${syncId}/history`),\n ]);\n if (!tendersResponse.ok) throw new Error(`Tenders fetch error! status: ${tendersResponse.status}`);\n if (!choresResponse.ok) throw new Error(`Chores fetch error! status: ${choresResponse.status}`);\n if (!historyResponse.ok) throw new Error(`History fetch error! status: ${historyResponse.status}`);\n\n const tendersData = await tendersResponse.json();\n const choresData = await choresResponse.json();\n const historyData = await historyResponse.json();\n\n setTenders(Array.isArray(tendersData) ? tendersData : []);\n setChores(Array.isArray(choresData) ? choresData : []);\n setHistory(Array.isArray(historyData) ? historyData : []);\n } catch (error) {\n console.error(\"Error fetching data for history:\", error);\n setTenders([]);\n setChores([]);\n setHistory([]);\n }\n setIsLoading(false);\n setIsProcessing(false);\n }\n\n useEffect(() => {\n fetchDataInternal();\n }, [syncId]);\n\n async function handleDeleteHistoryEntry(entryId: string) {\n if (!syncId || !entryId) return;\n if (!confirm(\"Are you sure you want to delete this history entry? This cannot be undone.\")) return;\n setIsProcessing(true);\n try {\n await fetch(`/api/${syncId}/history/${entryId}`, { method: \"DELETE\" });\n fetchDataInternal(); // Refresh\n } catch (error) {\n console.error(\"Error deleting history entry:\", error);\n } finally {\n setIsProcessing(false);\n }\n }\n\n if (isLoading) {\n return (\n

\n Loading history data...\n .\n .\n .\n

\n );\n }\n\n return (\n

📜 Tending History

\n {history.length === 0\n ?

No tending history yet for this Kinobi instance.

\n : (\n

\n {/* Timeline vine */}\n \n

\n\n

\n {/* Timeline dot */}\n
\n
\n
\n\n
\n
\n
\n {entry.person}\n {(() => {\n const chore = getChoreById(entry.chore_id);\n return chore\n ? (\n \n {chore.icon}\n {chore.name}\n \n )\n : null;\n })()}\n
\n\n {/* Clickable timestamp */}\n toggleExactTime(entry.id)}\n className={`text-left text-sm text-amber-600 hover:text-amber-800 mt-1 transition-colors duration-200`}\n >\n {showExactTimes[entry.id]\n ? new Date(entry.timestamp).toLocaleString()\n : formatRelativeTime(entry.timestamp)}\n \n\n {/* Display notes if they exist */}\n {entry.notes && (\n
\n
Notes:
\n
{entry.notes}
\n
\n )}\n
\n\n
\n handleDeleteHistoryEntry(entry.id)}\n className=\"text-sm text-red-400 hover:text-red-600 transition-colors duration-200\"\n disabled={isProcessing}\n >\n Delete\n \n
\n
\n

\n )}\n \n \n );\n}\n\n// --- SYNC SETTINGS COMPONENTS ---\n\nfunction SyncSettingsView({ updateAvailable, onUpdate, currentClientVersion }: {\n updateAvailable: boolean;\n onUpdate: () => void;\n currentClientVersion: string | null;\n}) {\n const syncId = useSyncId();\n if (!syncId) return

Loading sync information...

;\n return (\n

\n \n

\n );\n}\n\nfunction UpdatesComponent({ updateAvailable, onUpdate, currentClientVersion }: {\n updateAvailable: boolean;\n onUpdate: () => void;\n currentClientVersion: string | null;\n}) {\n const [latestServerVersion, setLatestServerVersion] = useState(null);\n const [isLoadingLatestVersion, setIsLoadingLatestVersion] = useState(false);\n\n useEffect(() => {\n if (updateAvailable) {\n setIsLoadingLatestVersion(true);\n fetch(\"/api/app-version\") // Assuming syncId is not needed for this global app version\n .then(res => {\n if (!res.ok) throw new Error(\"Failed to fetch latest version\");\n return res.json();\n })\n .then(data => {\n setLatestServerVersion(data.version);\n })\n .catch(error => {\n console.error(\"Error fetching latest app version:\", error);\n setLatestServerVersion(null); // Clear or set error state\n })\n .finally(() => {\n setIsLoadingLatestVersion(false);\n });\n }\n }, [updateAvailable]);\n\n return (\n

App Updates

\n\n {updateAvailable\n ? (\n

A new version is available!

\n {currentClientVersion &&

Current version: {currentClientVersion}

}\n {isLoadingLatestVersion &&

Checking for latest version...

}\n {latestServerVersion && !isLoadingLatestVersion && (\n

New version: {latestServerVersion}

\n )}\n

\n \n Update Now\n \n

\n {latestServerVersion && currentClientVersion && latestServerVersion === currentClientVersion\n && !isLoadingLatestVersion && (\n

\n You appear to have the latest code, but a service worker update is pending. Clicking update will\n refresh.\n

\n )}\n

\n )\n : (\n

You're using the latest version

\n {currentClientVersion &&

Version: {currentClientVersion}

}\n {!currentClientVersion &&

Shitty is up to date!

}\n

\n \n \n \n

\n )}\n

\n );\n}\n\nfunction ManageChoresComponent() {\n const syncId = useSyncId();\n const [chores, setChores] = useState([]);\n const [isLoading, setIsLoading] = useState(true);\n const [newChoreName, setNewChoreName] = useState(\"\");\n const [newChoreIcon, setNewChoreIcon] = useState(\"\");\n const [newCycleDuration, setNewCycleDuration] = useState(24);\n const [newPoints, setNewPoints] = useState(10);\n const [isProcessing, setIsProcessing] = useState(false);\n\n async function fetchChoresInternal() {\n if (!syncId) return;\n setIsLoading(true);\n setIsProcessing(true);\n try {\n const choresResponse = await fetch(`/api/${syncId}/chores`);\n console.log(\"[DEBUG] Fetched choresResponse:\", choresResponse);\n if (!choresResponse.ok) throw new Error(`Chores fetch error! status: ${choresResponse.status}`);\n const choresData = await choresResponse.json();\n console.log(\"[DEBUG] choresData:\", choresData);\n setChores(Array.isArray(choresData) ? choresData : []);\n } catch (error) {\n console.error(\"[ERROR] Error fetching chores:\", error);\n setChores([]);\n }\n setIsLoading(false);\n setIsProcessing(false);\n }\n\n useEffect(() => {\n fetchChoresInternal();\n }, [syncId]);\n\n async function handleAddChore() {\n if (!syncId || !newChoreName.trim() || !newChoreIcon.trim()) return;\n setIsProcessing(true);\n try {\n const response = await fetch(`/api/${syncId}/chores`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n name: newChoreName.trim(),\n icon: newChoreIcon.trim(),\n cycleDuration: newCycleDuration,\n points: newPoints,\n }),\n });\n if (!response.ok) {\n const errorData = await response.json();\n throw new Error(errorData.error || `HTTP error! status: ${response.status}`);\n }\n setNewChoreName(\"\");\n setNewChoreIcon(\"\");\n setNewCycleDuration(24);\n setNewPoints(10);\n fetchChoresInternal(); // Refresh chores\n } catch (error) {\n console.error(\"Error adding chore:\", error);\n } finally {\n setIsProcessing(false);\n }\n }\n\n async function handleRenameChore(choreId: string, currentName: string, currentIcon: string) {\n if (!syncId || !choreId) return;\n const newName = prompt(\"Enter new name for \" + currentName + \":\", currentName);\n if (newName && newName.trim() && newName.trim() !== currentName) {\n setIsProcessing(true);\n try {\n await fetch(`/api/${syncId}/chores/${choreId}`, {\n method: \"PUT\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ name: newName.trim(), icon: currentIcon }),\n });\n fetchChoresInternal(); // Refresh\n } catch (error) {\n console.error(\"Error renaming chore:\", error);\n } finally {\n setIsProcessing(false);\n }\n }\n }\n\n async function handleChangeIcon(choreId: string, currentName: string, currentIcon: string) {\n if (!syncId || !choreId) return;\n const newIcon = prompt(\"Enter new icon for \" + currentName + \":\", currentIcon);\n if (newIcon && newIcon.trim() && newIcon.trim() !== currentIcon) {\n setIsProcessing(true);\n try {\n await fetch(`/api/${syncId}/chores/${choreId}`, {\n method: \"PUT\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ name: currentName, icon: newIcon.trim() }),\n });\n fetchChoresInternal(); // Refresh\n } catch (error) {\n console.error(\"Error changing chore icon:\", error);\n } finally {\n setIsProcessing(false);\n }\n }\n }\n\n async function handleEditCycle(choreId: string, currentCycleDuration: number) {\n if (!syncId || !choreId) return;\n const newCycleStr = prompt(`Enter new cycle duration in hours for this chore:`, currentCycleDuration.toString());\n if (newCycleStr) {\n const newCycle = parseInt(newCycleStr);\n if (!isNaN(newCycle) && newCycle > 0 && newCycle !== currentCycleDuration) {\n setIsProcessing(true);\n try {\n await fetch(`/api/${syncId}/chores/${choreId}`, {\n method: \"PUT\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ cycleDuration: newCycle }),\n });\n fetchChoresInternal(); // Refresh\n } catch (error) {\n console.error(\"Error updating cycle duration:\", error);\n } finally {\n setIsProcessing(false);\n }\n }\n }\n }\n\n async function handleEditPoints(choreId: string, currentPoints: number) {\n if (!syncId || !choreId) return;\n const newPointsStr = prompt(`Enter new points value for this chore:`, currentPoints.toString());\n if (newPointsStr) {\n const newPoints = parseInt(newPointsStr);\n if (!isNaN(newPoints) && newPoints > 0 && newPoints !== currentPoints) {\n setIsProcessing(true);\n try {\n await fetch(`/api/${syncId}/chores/${choreId}`, {\n method: \"PUT\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ points: newPoints }),\n });\n fetchChoresInternal(); // Refresh\n } catch (error) {\n console.error(\"Error updating points:\", error);\n } finally {\n setIsProcessing(false);\n }\n }\n }\n }\n\n async function handleDeleteChore(choreId: string, choreName: string) {\n if (!syncId || !choreId) return;\n if (\n !confirm(\n `Are you sure you want to delete the chore \"${choreName}\"? This will also delete all tending history for this chore.`,\n )\n ) return;\n setIsProcessing(true);\n try {\n await fetch(`/api/${syncId}/chores/${choreId}`, { method: \"DELETE\" });\n fetchChoresInternal(); // Refresh\n } catch (error) {\n console.error(\"Error deleting chore:\", error);\n } finally {\n setIsProcessing(false);\n }\n }\n\n if (isLoading) {\n return (\n

\n Loading chores...\n .\n .\n .\n

\n );\n }\n\n return (\n

🎯 Manage Chores

\n {chores.length === 0 && !isLoading\n ?

No chores added yet.

\n : null}\n

\n {chore.icon}\n

\n {chore.name}\n

\n 🔄 {chore.cycleDuration || 24}h cycle\n ⭐ {chore.points || 10} points\n

\n handleEditCycle(chore.id, chore.cycleDuration || 24)}\n className=\"text-sm text-green-500 hover:text-green-700\"\n disabled={isProcessing}\n >\n 🕐 Cycle\n \n handleEditPoints(chore.id, chore.points || 10)}\n className=\"text-sm text-purple-500 hover:text-purple-700\"\n disabled={isProcessing}\n >\n ⭐ Points\n \n handleChangeIcon(chore.id, chore.name, chore.icon)}\n className=\"text-sm text-blue-500 hover:text-blue-700\"\n disabled={isProcessing}\n >\n 🎨 Icon\n \n handleRenameChore(chore.id, chore.name, chore.icon)}\n className=\"text-sm text-blue-500 hover:text-blue-700\"\n disabled={isProcessing}\n >\n ✏️ Rename\n \n handleDeleteChore(chore.id, chore.name)}\n className=\"text-sm text-red-500 hover:text-red-700\"\n disabled={isProcessing}\n >\n ❌ Delete\n \n

\n \n ))}\n

\n setNewChoreIcon(e.target.value)}\n placeholder=\"Icon\"\n className=\"w-20 border border-amber-300 rounded px-2 py-1 focus:ring-amber-500 focus:border-amber-500 bg-yellow-50 text-center text-2xl\"\n disabled={isProcessing}\n maxLength={2}\n />\n setNewChoreName(e.target.value)}\n placeholder=\"New chore name\"\n className=\"flex-grow border border-amber-300 rounded px-2 py-1 focus:ring-amber-500 focus:border-amber-500 bg-yellow-50\"\n disabled={isProcessing}\n />\n

\n Cycle Duration (hours)\n setNewCycleDuration(Math.max(1, parseInt(e.target.value) || 1))}\n placeholder=\"24\"\n min=\"1\"\n max=\"8760\"\n className=\"w-full border border-amber-300 rounded px-2 py-1 focus:ring-amber-500 focus:border-amber-500 bg-yellow-50\"\n disabled={isProcessing}\n />\n

\n Points\n setNewPoints(Math.max(1, parseInt(e.target.value) || 1))}\n placeholder=\"10\"\n min=\"1\"\n max=\"1000\"\n className=\"w-full border border-amber-300 rounded px-2 py-1 focus:ring-amber-500 focus:border-amber-500 bg-yellow-50\"\n disabled={isProcessing}\n />\n

\n \n {isProcessing ? \"Adding...\" : \"Add Chore\"}\n \n

\n );\n}\n\nfunction ManageTendersComponent() {\n const syncId = useSyncId();\n const [tenders, setTenders] = useState([]);\n const [isLoading, setIsLoading] = useState(true);\n const [newTenderName, setNewTenderName] = useState(\"\");\n const [isProcessing, setIsProcessing] = useState(false);\n\n async function fetchTendersInternal() {\n if (!syncId) return;\n setIsLoading(true);\n setIsProcessing(true);\n try {\n const tendersResponse = await fetch(`/api/${syncId}/tenders`);\n if (!tendersResponse.ok) throw new Error(`Tenders fetch error! status: ${tendersResponse.status}`);\n\n const tendersData = await tendersResponse.json();\n setTenders(Array.isArray(tendersData) ? tendersData : []);\n } catch (error) {\n console.error(\"Error fetching tenders:\", error);\n setTenders([]);\n }\n setIsLoading(false);\n setIsProcessing(false);\n }\n\n useEffect(() => {\n fetchTendersInternal();\n }, [syncId]);\n\n async function handleAddTender() {\n if (!syncId || !newTenderName.trim()) return;\n setIsProcessing(true);\n try {\n const response = await fetch(`/api/${syncId}/tenders`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ name: newTenderName.trim() }),\n });\n if (!response.ok) {\n const errorData = await response.json();\n throw new Error(errorData.error || `HTTP error! status: ${response.status}`);\n }\n setNewTenderName(\"\");\n fetchTendersInternal(); // Refresh tenders\n } catch (error) {\n console.error(\"Error adding tender:\", error);\n } finally {\n setIsProcessing(false);\n }\n }\n\n async function handleRenameTender(tenderId: string, currentName: string) {\n if (!syncId || !tenderId) return;\n const newName = prompt(\"Enter new name for \" + currentName + \":\", currentName);\n if (newName && newName.trim() && newName.trim() !== currentName) {\n setIsProcessing(true);\n try {\n await fetch(`/api/${syncId}/tenders/${tenderId}`, {\n method: \"PUT\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ name: newName.trim() }),\n });\n fetchTendersInternal(); // Refresh\n } catch (error) {\n console.error(\"Error renaming tender:\", error);\n } finally {\n setIsProcessing(false);\n }\n }\n }\n\n async function handleDeleteTender(tenderId: string, tenderName: string) {\n if (!syncId || !tenderId) return;\n if (!confirm(`Are you sure you want to delete tender \"${tenderName}\"? This cannot be undone.`)) return;\n setIsProcessing(true);\n try {\n await fetch(`/api/${syncId}/tenders/${tenderId}`, { method: \"DELETE\" });\n fetchTendersInternal(); // Refresh\n } catch (error) {\n console.error(\"Error deleting tender:\", error);\n } finally {\n setIsProcessing(false);\n }\n }\n\n if (isLoading) {\n return (\n

\n Loading tenders...\n .\n .\n .\n

\n );\n }\n\n return (\n

👥 Manage Tenders

\n {tenders.length === 0 && !isLoading\n ?

No tenders added yet.

\n : null}\n

\n {tender.name}\n

\n handleRenameTender(tender.id, tender.name)}\n className=\"text-sm text-blue-500 hover:text-blue-700\"\n disabled={isProcessing}\n >\n ✏️ Rename\n \n handleDeleteTender(tender.id, tender.name)}\n className=\"text-sm text-red-500 hover:text-red-700\"\n disabled={isProcessing}\n >\n ❌ Delete\n \n

\n \n ))}\n

\n setNewTenderName(e.target.value)}\n placeholder=\"New tender name\"\n className=\"flex-grow border border-amber-300 rounded-l px-2 py-1 focus:ring-amber-500 focus:border-amber-500 bg-yellow-50\"\n disabled={isProcessing}\n />\n \n {isProcessing ? \"Adding...\" : \"Add Tender\"}\n \n

\n );\n}\n\nfunction SyncSettingsComponent({ currentSyncId }: { currentSyncId: string }) {\n const [newCodeInput, setNewCodeInput] = useState(\"\");\n const [copied, setCopied] = useState(false);\n const [error, setError] = useState(\"\");\n const [isApplying, setIsApplying] = useState(false);\n\n const handleCopy = () => {\n navigator.clipboard.writeText(currentSyncId);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n };\n\n const handleApplyNewCode = (e: React.FormEvent) => {\n e.preventDefault();\n setError(\"\");\n const trimmedCode = newCodeInput.trim();\n\n if (!trimmedCode) {\n setError(\"Sync code cannot be empty.\");\n return;\n }\n if (trimmedCode.length < 6) {\n setError(\"Sync code should be at least 6 characters long.\");\n return;\n }\n if (trimmedCode === currentSyncId) {\n setError(\"This is already your current sync code.\");\n return;\n }\n\n setIsApplying(true);\n setSyncIdInLocalStorage(trimmedCode);\n\n setTimeout(() => {\n window.location.reload();\n }, 500);\n };\n\n const handleGenerateNew = () => {\n if (\n window.confirm(\n \"Generating a new code will create a new sync instance. Your current data will remain but will no longer be associated with this view until you re-enter the old code. Continue?\",\n )\n ) {\n setIsApplying(true);\n const newGeneratedSyncId = generateNewSyncIdInternal();\n setSyncIdInLocalStorage(newGeneratedSyncId);\n setTimeout(() => {\n window.location.reload();\n }, 500);\n }\n };\n\n if (isApplying) {\n return (\n

Applying new sync code...

The view will reload with the new instance.

\n );\n }\n\n return (\n

Your Current Sync Code:

\n {currentSyncId}\n

\n \n {copied ? \"Copied!\" : \"📋 Copy\"}\n \n

\n This code links your browser to a specific Shitty data instance.\n

\n\n

How Syncing Works Here:

The Sync Code is stored in your browser's local storage.
Changing the code switches to a different data set.
To use Shitty on another device with the SAME data, enter this exact Sync Code there.
Generating a new code effectively creates a fresh, empty Shitty instance for this browser.

\n\n

\n );\n}\n\n// --- END SYNC SETTINGS COMPONENTS ---\n\nfunction client() {\n const rootElement = document.getElementById(\"root\");\n if (rootElement) {\n createRoot(rootElement).render();\n } else {\n console.error(\"Root element not found!\");\n }\n}\n\nif (typeof document !== \"undefined\") {\n // Wait for DOM to be ready\n if (document.readyState === \"loading\") {\n document.addEventListener(\"DOMContentLoaded\", client);\n } else {\n client();\n }\n}\n\n// --- Countdown Calculation Service ---\nclass CountdownService {\n static calculateCountdownState(chore: Chore, config: ChoreConfig): CountdownState {\n const now = Date.now();\n\n // If no last completion, show as good (new chore)\n if (!chore.lastCompleted || !chore.dueDate) {\n return {\n progress: 0,\n status: \"good\",\n timeRemaining: chore.cycleDuration,\n };\n }\n\n const timeSinceCompletion = now - chore.lastCompleted;\n const cycleDurationMs = chore.cycleDuration * 60 * 60 * 1000; // Convert hours to ms\n const progress = timeSinceCompletion / cycleDurationMs;\n\n // Calculate hours remaining (can be negative if overdue)\n const timeRemainingMs = chore.dueDate - now;\n const timeRemainingHours = timeRemainingMs / (60 * 60 * 1000);\n\n let status: CountdownState[\"status\"];\n if (progress >= 1) {\n status = \"overdue\";\n } else if (progress >= (config.urgentThreshold / 100)) {\n status = \"urgent\";\n } else if (progress >= (config.warningThreshold / 100)) {\n status = \"warning\";\n } else {\n status = \"good\";\n }\n\n return {\n progress: Math.max(0, progress), // Ensure progress is at least 0\n status,\n timeRemaining: timeRemainingHours,\n };\n }\n\n static formatTimeRemaining(hours: number): string {\n if (hours < 0) {\n const overdue = Math.abs(hours);\n if (overdue < 1) return \"overdue\";\n if (overdue < 24) return `${Math.round(overdue)}h overdue`;\n const days = Math.floor(overdue / 24);\n const remainingHours = Math.round(overdue % 24);\n if (remainingHours === 0) return `${days}d overdue`;\n return `${days}d ${remainingHours}h overdue`;\n }\n\n if (hours < 1) return \"due soon\";\n if (hours < 24) return `${Math.round(hours)}h left`;\n const days = Math.floor(hours / 24);\n const remainingHours = Math.round(hours % 24);\n if (remainingHours === 0) return `${days}d left`;\n return `${days}d ${remainingHours}h left`;\n }\n\n static getStatusColor(status: CountdownState[\"status\"]): string {\n switch (status) {\n case \"good\":\n return \"#22c55e\"; // green-500\n case \"warning\":\n return \"#eab308\"; // yellow-500\n case \"urgent\":\n return \"#f97316\"; // orange-500\n case \"overdue\":\n return \"#ef4444\"; // red-500\n default:\n return \"#22c55e\";\n }\n }\n\n static interpolateColor(fromColor: string, toColor: string, factor: number): string {\n // Simple RGB interpolation\n const fromRgb = fromColor.match(/\\w\\w/g)?.map(x => parseInt(x, 16)) || [0, 0, 0];\n const toRgb = toColor.match(/\\w\\w/g)?.map(x => parseInt(x, 16)) || [0, 0, 0];\n\n const r = Math.round(fromRgb[0] + (toRgb[0] - fromRgb[0]) * factor);\n const g = Math.round(fromRgb[1] + (toRgb[1] - fromRgb[1]) * factor);\n const b = Math.round(fromRgb[2] + (toRgb[2] - fromRgb[2]) * factor);\n\n return `rgb(${r}, ${g}, ${b})`;\n }\n}\n\n// --- Progress Ring Component ---\ninterface ProgressRingProps {\n progress: number; // 0-1\n status: CountdownState[\"status\"];\n size: number; // Diameter in pixels\n strokeWidth?: number;\n children?: React.ReactNode;\n}\n\nfunction ProgressRing({ progress, status, size, strokeWidth = 4, children }: ProgressRingProps) {\n const radius = (size - strokeWidth) / 2;\n const circumference = 2 * Math.PI * radius;\n const strokeDashoffset = circumference - (progress * circumference);\n\n const color = CountdownService.getStatusColor(status);\n\n // Background circle color (light version)\n const bgColor = status === \"good\"\n ? \"#dcfce7\"\n : status === \"warning\"\n ? \"#fef3c7\"\n : status === \"urgent\"\n ? \"#fed7aa\"\n : \"#fecaca\";\n\n // Add pulse animation for urgent and overdue states\n const ringClasses = `transform -rotate-90 ${\n status === \"overdue\"\n ? \"animate-pulse\"\n : status === \"urgent\"\n ? \"animate-pulse\"\n : \"\"\n }`;\n\n return (\n

\n \n {/* Background circle */}\n \n {/* Progress circle */}\n \n\n {/* Additional glow effect for overdue items */}\n {status === \"overdue\" && (\n \n )}\n \n {/* Content in center */}\n \n {children}\n

\n \n );\n}\n\n// --- Time Display Component ---\ninterface TimeDisplayProps {\n countdownState: CountdownState;\n format?: \"compact\" | \"full\";\n}\n\nfunction TimeDisplay({ countdownState, format = \"compact\" }: TimeDisplayProps) {\n const timeText = CountdownService.formatTimeRemaining(countdownState.timeRemaining);\n const color = CountdownService.getStatusColor(countdownState.status);\n\n if (format === \"compact\") {\n return (\n \n {timeText}\n \n );\n }\n\n return (\n

\n \n {timeText}\n

\n {countdownState.status}\n

\n \n );\n}","deleted","label",[170,171,151],"src","client","permalink","https://www.val.town/x/omniharmonic/Kinobi/code/src/client/main.tsx","extension","actionData","errors"]