\n\n {/* Sidebar */}\n

\n {/* Header */}\n

{UI_TEXT.CALENDARS}

\n\n {/* Calendar list */}\n

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

\n {UI_TEXT.NO_CALENDARS}\n

\n ) : (\n calendars.map((cal) => {\n const isSelected = preferences.selectedCalendarIds.includes(cal.id);\n const savedColor = preferences.calendarColors[cal.id] || cal.color;\n const displayColor = pendingColors[cal.id] ?? savedColor;\n return (\n

\n onToggleCalendar(cal.id, e.target.checked)}\n />\n \n {cal.name}\n \n \n

\n {\n // Update local state immediately for responsive UI\n setPendingColors((prev) => ({ ...prev, [cal.id]: e.target.value }));\n }}\n onBlur={(e) => {\n // Save to server only when color picker closes\n const newColor = e.target.value;\n if (newColor !== savedColor) {\n onChangeColor(cal.id, newColor);\n }\n // Clear pending state\n setPendingColors((prev) => {\n const next = { ...prev };\n delete next[cal.id];\n return next;\n });\n }}\n title={`${UI_TEXT.COLOR_FOR} ${cal.name}`}\n />\n \n handleDelete(cal.id, cal.name)}\n title={UI_TEXT.REMOVE_CALENDAR}\n >\n ✕\n \n

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

\n\n {/* Settings */}\n

\n \n onToggleShowDaysOfWeek(e.target.checked)}\n />\n {UI_TEXT.SHOW_DAYS_OF_WEEK}\n \n

\n {UI_TEXT.LAST_UPDATED}: {formatLastUpdated(lastUpdated)}\n

\n\n {/* Add calendar form */}\n

\n\n {/* Footer */}\n

\n \n {UI_TEXT.SIGN_OUT}\n \n

\n \n );\n}\n\nexport default Sidebar;\n","deleted","label",[178,179,159],"frontend","components","permalink","https://www.val.town/x/dervondenbergen/jahreskalender/code/frontend/components/Sidebar.tsx","extension","actionData","errors"]