{/* All-day events */} {selectedShowAllDay && (

{allDayEvents.map((evts, colIdx) => (

0 ? `1px solid ${pvBorder}` : "none", }}> {evts.map((ev) => (

{ev.title}

))}

)} {/* Day headers */}

{cols.map((day, i) => (

0 ? `1px solid ${pvBorder}` : "none" }}> {renderDayHeader(day, colDates[i], i === 0)}

))}

{/* Task columns */}

{[0, 1].map((colIdx) => (

0 ? `1px solid ${pvBorder}` : "none", background: colIdx === 0 ? pvTodayBg : "transparent", position: "relative", }}> {taskLists[colIdx].map((task, tIdx) => ( task.title ? (

{selectedShowCheckboxes && (

)}

{task.title}

) : (

) ))} {Array.from({ length: 4 }).map((_, i) => (

))} {colIdx === 0 && (

19:21

)}

))}

{/* Someday area */} {selectedShowSomeday && (

{somedayLists.map((list) => (

{list.name} {list.count}

))}

{somedayTasks.map((task) => (

{task}

{selectedLang === "de" ? "Aufgabe hinzufügen..." : "Add task..."}

))}

)}

); }; // ─── Render Steps ─── const renderStep = () => { const step = STEPS[currentStep]; if (step === "welcome") { return (

✓

{t.welcomeTitle}

{t.welcomeSubtitle}

); } if (step === "language") { return (

{t.langTitle}

{t.langSubtitle}

{LANGUAGES.map((lang) => ( ))}

{t.dateFormat}

{t.timeFormat}

{(["24H", "12H"] as const).map((fmt) => ( ))}

{t.weekStartLabel}

{([{ value: 1, label: t.monday }, { value: 0, label: t.sunday }] as const).map((opt) => ( ))}

{t.timezone}

); } if (step === "connect") { const providers = [ { key: "google", label: t.connectGoogle, icon: faGoogle, color: "#4285F4", action: () => handleOAuthConnect("/api/calendar/google/start") }, { key: "apple", label: t.connectApple, icon: faApple, color: darkMode ? "#ccc" : "#333", action: () => handleProviderConnect("apple") }, { key: "outlook", label: t.connectOutlook, icon: faMicrosoft, color: "#0078D4", action: () => handleOAuthConnect("/api/calendar/outlook/start") }, { key: "synology", label: t.connectSynology, icon: faServer, color: "#007AFF", action: () => handleProviderConnect("synology") }, { key: "notion", label: t.connectNotion, icon: faNotion, color: darkMode ? "#fff" : "#000", action: () => handleOAuthConnect("/api/calendar/notion/start") }, ]; return (

{t.connectTitle}

{t.connectSubtitle}

{providers.map((p) => { const isConnected = connectedProviders.has(p.key); return (

{p.label} {isConnected ? ( {t.connected} ) : ( )}

); })}

{t.skipConnect}

); } // ─── HEADER step ─── if (step === "header") { return (

{t.headerTitle}

{t.headerSubtitle}

{/* Weekday Font */}

{t.weekdayFont}

setSelectedWeekdayColor(e.target.value)} style={colorPickerStyle} />

setSelectedHeadlineFontSize(e.target.value)} placeholder="1.25rem" style={smallInputStyle} />

{/* Weekday Format */}

{t.weekdayFormat}

{([ { value: "full", label: t.weekdayFull }, { value: "short", label: t.weekdayShort }, { value: "narrow", label: t.weekdayNarrow }, ] as const).map((opt) => ( ))}

{/* Date */}

{t.dateSection}

setSelectedDateColor(e.target.value)} style={colorPickerStyle} /> setSelectedDateFontSize(e.target.value)} placeholder="0.65rem" style={{ ...smallInputStyle, flex: 1 }} />

{t.datePosition}

{t.dateAlignment}

{/* Preview */}

{renderPreview()}

); } // ─── TASKS step ─── if (step === "tasks") { return (

{t.tasksTitle}

{t.tasksSubtitle}

{/* Task Font */}

{t.taskFont}

setSelectedTaskColor(e.target.value)} style={colorPickerStyle} />

setSelectedTaskFontSize(e.target.value)} placeholder="0.9rem" style={smallInputStyle} />

{/* Event Font */}

{t.eventFont}

setSelectedEventFontSize(e.target.value)} placeholder="0.85rem" style={smallInputStyle} />

{/* Font size S/M/L */}

{t.fontSize}

{(["S", "M", "L"] as const).map((size) => ( ))}

{/* Preview */}

{renderPreview()}

); } // ─── DISPLAY step ─── if (step === "display") { const toggles = [ { label: t.showAllDay, value: selectedShowAllDay, setter: setSelectedShowAllDay }, { label: t.showSomeday, value: selectedShowSomeday, setter: setSelectedShowSomeday }, { label: t.showTimeGrid, value: selectedShowTimeGrid, setter: setSelectedShowTimeGrid }, { label: t.showCheckboxes, value: selectedShowCheckboxes, setter: setSelectedShowCheckboxes }, { label: t.darkMode, value: darkMode, setter: () => {}, isDarkMode: true }, ]; return (

{t.displayTitle}

{t.displaySubtitle}

{toggles.map((toggle) => (

{toggle.label}

))}

{/* Preview */}

{renderPreview()}

); } return null; }; return (

{/* Close button */} {currentStep > 0 && ( )} {/* Step content with animation */}

{renderStep()}

{/* Footer with progress + nav (not on welcome) */} {currentStep > 0 && (

{/* Progress dots */}

{STEPS.map((_, i) => (

))}

{isLastStep ? ( ) : ( )}

)}

); }