= await res.json();\n if (data.success && data.data) {\n setSections(prev => [...prev, data.data!]);\n }\n } catch (error) {\n console.error('Failed to create section:', error);\n }\n }, []);\n\n const handleSectionUpdate = useCallback(async (id: string, updates: Partial

) => {\n try {\n await fetch(`/api/sections/${id}`, {\n method: 'PATCH',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(updates),\n });\n setSections(prev => prev.map(s => s.id === id ? { ...s, ...updates } : s));\n } catch (error) {\n console.error('Failed to update section:', error);\n }\n }, []);\n\n const handleSectionDelete = useCallback(async (id: string) => {\n try {\n await fetch(`/api/sections/${id}`, { method: 'DELETE' });\n setSections(prev => prev.filter(s => s.id !== id));\n setGoals(prev => prev.filter(g => g.sectionId !== id));\n } catch (error) {\n console.error('Failed to delete section:', error);\n }\n }, []);\n\n const handleGoalCreate = useCallback(async (sectionId: string, name: string) => {\n try {\n const res = await fetch('/api/goals', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ sectionId, name }),\n });\n const data: ApiResponse = await res.json();\n if (data.success && data.data) {\n setGoals(prev => [...prev, data.data!]);\n }\n } catch (error) {\n console.error('Failed to create goal:', error);\n }\n }, []);\n\n const handleGoalUpdate = useCallback(async (id: string, updates: Partial) => {\n try {\n await fetch(`/api/goals/${id}`, {\n method: 'PATCH',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(updates),\n });\n setGoals(prev => prev.map(g => g.id === id ? { ...g, ...updates } : g));\n } catch (error) {\n console.error('Failed to update goal:', error);\n }\n }, []);\n\n const handleGoalDelete = useCallback(async (id: string) => {\n try {\n await fetch(`/api/goals/${id}`, { method: 'DELETE' });\n setGoals(prev => prev.filter(g => g.id !== id));\n setEntries(prev => prev.filter(e => e.goalId !== id));\n } catch (error) {\n console.error('Failed to delete goal:', error);\n }\n }, []);\n\n function navigatePrev() {\n const newDate = new Date(currentDate);\n if (viewMode === 'week') {\n newDate.setDate(newDate.getDate() - 7);\n } else if (viewMode === 'month') {\n newDate.setMonth(newDate.getMonth() - 1);\n } else {\n newDate.setFullYear(newDate.getFullYear() - 1);\n }\n setCurrentDate(newDate);\n }\n\n function navigateNext() {\n const newDate = new Date(currentDate);\n if (viewMode === 'week') {\n newDate.setDate(newDate.getDate() + 7);\n } else if (viewMode === 'month') {\n newDate.setMonth(newDate.getMonth() + 1);\n } else {\n newDate.setFullYear(newDate.getFullYear() + 1);\n }\n setCurrentDate(newDate);\n }\n\n function navigateToday() {\n setCurrentDate(new Date());\n }\n\n function getDateLabel(): string {\n const options: Intl.DateTimeFormatOptions = {};\n if (viewMode === 'week') {\n const startOfWeek = new Date(currentDate);\n const day = startOfWeek.getDay();\n startOfWeek.setDate(startOfWeek.getDate() - day);\n const endOfWeek = new Date(startOfWeek);\n endOfWeek.setDate(endOfWeek.getDate() + 6);\n return `${startOfWeek.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })} - ${endOfWeek.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}`;\n } else if (viewMode === 'month') {\n return currentDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });\n } else {\n return currentDate.getFullYear().toString();\n }\n }\n\n // Filter visible sections and goals based on sharing mode\n const visibleSections = sharingMode \n ? sections.filter(s => !s.isHidden)\n : sections;\n \n const visibleGoals = sharingMode\n ? goals.filter(g => !g.isHidden && visibleSections.some(s => s.id === g.sectionId))\n : goals;\n\n if (loading) {\n return (\n

\n );\n }\n\n if (!user) {\n return ;\n }\n\n return (\n

\n {/* Header */}\n

\n \n

Mosaic

Personal Care Index

\n \n

\n {/* Sharing mode toggle */}\n setSharingMode(!sharingMode)}\n className={`px-3 py-2 rounded-lg text-sm font-medium transition-all ${\n sharingMode \n ? 'bg-purple-500/20 text-purple-300 border border-purple-500/30' \n : 'bg-white/5 text-gray-400 hover:bg-white/10'\n }`}\n title={sharingMode ? 'Exit sharing mode' : 'Enter sharing mode (hides selected items)'}\n >\n {sharingMode ? '📷 Sharing' : '👁️ Share'}\n \n \n {/* Settings/Manager toggle */}\n {!sharingMode && (\n setShowManager(!showManager)}\n className={`px-3 py-2 rounded-lg text-sm font-medium transition-all ${\n showManager\n ? 'bg-blue-500/20 text-blue-300 border border-blue-500/30'\n : 'bg-white/5 text-gray-400 hover:bg-white/10'\n }`}\n >\n ⚙️ Manage\n \n )}\n \n {/* User info & logout */}\n

\n {user.avatarUrl && (\n $\"\"$ \n )}\n \n \n Sign out\n \n

\n\n {/* Manager Panel */}\n {showManager && !sharingMode && (\n setShowManager(false)}\n />\n )}\n\n {/* View Controls */}\n

\n {/* View Mode Tabs */}\n

\n {(['week', 'month', 'year'] as ViewMode[]).map((mode) => (\n setViewMode(mode)}\n className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${\n viewMode === mode\n ? 'bg-white/10 text-white'\n : 'text-gray-400 hover:text-gray-300'\n }`}\n >\n {mode.charAt(0).toUpperCase() + mode.slice(1)}\n \n ))}\n

\n \n {/* Date Navigation */}\n

\n \n ←\n \n \n {getDateLabel()}\n \n \n →\n \n

\n\n {/* Main Content */}\n {visibleSections.length === 0 ? (\n

🎯

No goals yet

Create sections and goals to start tracking your progress

\n setShowManager(true)}\n className=\"px-6 py-3 rounded-xl bg-green-500/20 text-green-300 font-medium hover:bg-green-500/30 transition-all\"\n >\n + Add Your First Goal\n \n

\n ) : (\n

\n {viewMode === 'week' && (\n \n )}\n {viewMode === 'month' && (\n \n )}\n {viewMode === 'year' && (\n \n )}\n

\n )}\n

\n );\n}\n\n","deleted","label",[175,176,157],"frontend","components","permalink","https://www.val.town/x/shapedlines/mosaic/code/frontend/components/App.tsx","extension","actionData","errors"]