) => void;\n onSectionDelete: (id: string) => void;\n onGoalCreate: (sectionId: string, name: string) => void;\n onGoalUpdate: (id: string, updates: Partial) => void;\n onGoalDelete: (id: string) => void;\n onClose: () => void;\n}\n\nexport function SectionManager({\n sections,\n goals,\n onSectionCreate,\n onSectionUpdate,\n onSectionDelete,\n onGoalCreate,\n onGoalUpdate,\n onGoalDelete,\n onClose,\n}: SectionManagerProps) {\n const [newSectionName, setNewSectionName] = useState('');\n const [newGoalNames, setNewGoalNames] = useState>({});\n const [editingSection, setEditingSection] = useState(null);\n const [editingSectionName, setEditingSectionName] = useState('');\n const [editingGoal, setEditingGoal] = useState(null);\n const [editingGoalName, setEditingGoalName] = useState('');\n\n const goalsBySection = new Map();\n sections.forEach((section) => {\n goalsBySection.set(\n section.id,\n goals.filter((g) => g.sectionId === section.id).sort((a, b) => a.sortOrder - b.sortOrder)\n );\n });\n\n const handleCreateSection = () => {\n if (newSectionName.trim()) {\n onSectionCreate(newSectionName.trim());\n setNewSectionName('');\n }\n };\n\n const handleCreateGoal = (sectionId: string) => {\n const name = newGoalNames[sectionId];\n if (name?.trim()) {\n onGoalCreate(sectionId, name.trim());\n setNewGoalNames((prev) => ({ ...prev, [sectionId]: '' }));\n }\n };\n\n const startEditingSection = (section: Section) => {\n setEditingSection(section.id);\n setEditingSectionName(section.name);\n };\n\n const saveEditingSection = () => {\n if (editingSection && editingSectionName.trim()) {\n onSectionUpdate(editingSection, { name: editingSectionName.trim() });\n }\n setEditingSection(null);\n setEditingSectionName('');\n };\n\n const startEditingGoal = (goal: Goal) => {\n setEditingGoal(goal.id);\n setEditingGoalName(goal.name);\n };\n\n const saveEditingGoal = () => {\n if (editingGoal && editingGoalName.trim()) {\n onGoalUpdate(editingGoal, { name: editingGoalName.trim() });\n }\n setEditingGoal(null);\n setEditingGoalName('');\n };\n\n return (\n

Manage Sections & Goals

\n \n ✕\n \n

\n\n {/* Add new section */}\n

\n setNewSectionName(e.target.value)}\n onKeyDown={(e) => e.key === 'Enter' && handleCreateSection()}\n placeholder=\"New section name...\"\n className=\"flex-1 px-4 py-2 rounded-lg bg-white/10 text-white placeholder-gray-500 outline-none focus:ring-1 focus:ring-white/30\"\n />\n \n + Add Section\n \n

\n\n {/* Sections list */}\n

\n {sections.sort((a, b) => a.sortOrder - b.sortOrder).map((section) => {\n const sectionGoals = goalsBySection.get(section.id) || [];\n \n return (\n

\n {/* Section header */}\n

\n {editingSection === section.id ? (\n setEditingSectionName(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') saveEditingSection();\n if (e.key === 'Escape') setEditingSection(null);\n }}\n onBlur={saveEditingSection}\n className=\"flex-1 px-3 py-1 rounded-lg bg-white/10 text-white outline-none focus:ring-1 focus:ring-white/30 mr-2\"\n autoFocus\n />\n ) : (\n

\n {section.name}\n

\n )}\n \n

\n {/* Toggle visibility for sharing */}\n onSectionUpdate(section.id, { isHidden: !section.isHidden })}\n className={`p-2 rounded-lg transition-all ${\n section.isHidden\n ? 'bg-purple-500/20 text-purple-300'\n : 'bg-white/5 text-gray-400 hover:bg-white/10'\n }`}\n title={section.isHidden ? 'Hidden in sharing mode' : 'Visible in sharing mode'}\n >\n {section.isHidden ? '👁️‍🗨️' : '👁️'}\n \n \n {/* Edit */}\n startEditingSection(section)}\n className=\"p-2 rounded-lg bg-white/5 text-gray-400 hover:bg-white/10 transition-all\"\n >\n ✏️\n \n \n {/* Delete */}\n {\n if (confirm(`Delete \"${section.name}\" and all its goals?`)) {\n onSectionDelete(section.id);\n }\n }}\n className=\"p-2 rounded-lg bg-white/5 text-gray-400 hover:bg-red-500/20 hover:text-red-300 transition-all\"\n >\n 🗑️\n \n

\n\n {/* Goals list */}\n

\n {sectionGoals.map((goal) => (\n \n {editingGoal === goal.id ? (\n setEditingGoalName(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') saveEditingGoal();\n if (e.key === 'Escape') setEditingGoal(null);\n }}\n onBlur={saveEditingGoal}\n className=\"flex-1 px-3 py-1 rounded-lg bg-white/10 text-white outline-none focus:ring-1 focus:ring-white/30 mr-2\"\n autoFocus\n />\n ) : (\n {goal.name}\n )}\n \n

\n {/* Toggle visibility for sharing */}\n onGoalUpdate(goal.id, { isHidden: !goal.isHidden })}\n className={`p-1.5 rounded-lg transition-all text-sm ${\n goal.isHidden\n ? 'bg-purple-500/20 text-purple-300'\n : 'bg-white/5 text-gray-400 hover:bg-white/10'\n }`}\n title={goal.isHidden ? 'Hidden in sharing mode' : 'Visible in sharing mode'}\n >\n {goal.isHidden ? '👁️‍🗨️' : '👁️'}\n \n \n {/* Edit */}\n startEditingGoal(goal)}\n className=\"p-1.5 rounded-lg bg-white/5 text-gray-400 hover:bg-white/10 transition-all text-sm\"\n >\n ✏️\n \n \n {/* Delete */}\n {\n if (confirm(`Delete \"${goal.name}\"?`)) {\n onGoalDelete(goal.id);\n }\n }}\n className=\"p-1.5 rounded-lg bg-white/5 text-gray-400 hover:bg-red-500/20 hover:text-red-300 transition-all text-sm\"\n >\n 🗑️\n \n

\n ))}\n

\n\n {/* Add new goal */}\n

\n \n setNewGoalNames((prev) => ({ ...prev, [section.id]: e.target.value }))\n }\n onKeyDown={(e) => e.key === 'Enter' && handleCreateGoal(section.id)}\n placeholder=\"New goal...\"\n className=\"flex-1 px-3 py-1.5 rounded-lg bg-white/10 text-white text-sm placeholder-gray-500 outline-none focus:ring-1 focus:ring-white/30\"\n />\n handleCreateGoal(section.id)}\n disabled={!newGoalNames[section.id]?.trim()}\n className=\"px-3 py-1.5 rounded-lg bg-blue-500/20 text-blue-300 text-sm font-medium hover:bg-blue-500/30 transition-all disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n + Goal\n \n

\n );\n })}\n

\n\n {sections.length === 0 && (\n

No sections yet. Create your first section above!

\n )}\n\n {/* Help text */}\n

\n 💡 Tips:\n

Click the 👁️ icon to hide items when sharing screenshots
Sections group related goals together
Each goal appears as a row in your mosaic grid

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