BuzzbeeSCD/ProjectE
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: R3 bugs - TipTap focus leak to search, Quick Captured opens palette, Calendar day view switching

Browse Source
This commit is contained in:
Hermes
2026-08-01 12:46:41 +00:00
parent 085f552c4b
commit 35d063ea82
1 changed files with 37 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/routes/_app/calendar.tsx
+16 -115
View File
@@ -63,13 +63,11 @@ function EventComponent({ event }: { event: CalendarEvent }) {
}
// Custom toolbar
function CustomToolbar({ date, onNavigate, onView, currentView, label }: any) {
function CustomToolbar({ date, onNavigate, label }: any) {
const goToBack = () => onNavigate(Navigate.PREVIOUS);
const goToNext = () => onNavigate(Navigate.NEXT);
const goToToday = () => onNavigate(Navigate.TODAY);
const viewNames = ["month", "week", "day", "agenda"];
return (
<div className="flex items-center justify-between mb-3 flex-wrap gap-2">
<div className="flex items-center gap-1">
@@ -84,19 +82,6 @@ function CustomToolbar({ date, onNavigate, onView, currentView, label }: any) {
</Button>
<span className="ml-2 text-lg font-semibold">{label}</span>
</div>
<div className="flex items-center gap-1">
{viewNames.map((name) => (
<Button
key={name}
variant={currentView === name ? "default" : "outline"}
size="sm"
onClick={() => onView(name)}
className="capitalize"
>
{name}
</Button>
))}
</div>
</div>
);
}
@@ -254,9 +239,22 @@ function CalendarPage() {
</Dialog>
</div>
<div className="flex items-center justify-end gap-1 mb-2">
{["month", "week", "day", "agenda"].map((name) => (
<Button
key={name}
variant={view === name ? "default" : "outline"}
size="sm"
onClick={() => setView(name)}
className="capitalize"
>
{name}
</Button>
))}
</div>
<div className="rbc-calendar-container" style={{ minHeight: isMobile ? 400 : 600 }}>
{view === "month" && (
<Calendar
key={view}
localizer={localizer}
events={calendarEvents}
startAccessor="start"
@@ -271,110 +269,13 @@ function CalendarPage() {
showMultiDayTimes
components={{
event: EventComponent,
toolbar: (props: any) => (
<CustomToolbar
{...props}
currentView={view}
onView={(newView: string) => setView(newView)}
/>
),
toolbar: (props: any) => <CustomToolbar {...props} />,
}}
views={["month", "week", "work_week", "day", "agenda"]}
step={30}
timeslots={2}
style={{ height: isMobile ? 400 : 600 }}
/>
)}
{view === "week" && (
<Calendar
localizer={localizer}
events={calendarEvents}
startAccessor="start"
endAccessor="end"
date={date}
view={view}
onNavigate={handleNavigate}
onSelectEvent={handleSelectEvent}
onSelectSlot={handleSelectSlot}
selectable
popup
showMultiDayTimes
components={{
event: EventComponent,
toolbar: (props: any) => (
<CustomToolbar
{...props}
currentView={view}
onView={(newView: string) => setView(newView)}
/>
),
}}
views={["month", "week", "work_week", "day", "agenda"]}
step={30}
timeslots={2}
style={{ height: isMobile ? 400 : 600 }}
/>
)}
{view === "day" && (
<Calendar
localizer={localizer}
events={calendarEvents}
startAccessor="start"
endAccessor="end"
date={date}
view={view}
onNavigate={handleNavigate}
onSelectEvent={handleSelectEvent}
onSelectSlot={handleSelectSlot}
selectable
popup
showMultiDayTimes
components={{
event: EventComponent,
toolbar: (props: any) => (
<CustomToolbar
{...props}
currentView={view}
onView={(newView: string) => setView(newView)}
/>
),
}}
views={["month", "week", "work_week", "day", "agenda"]}
step={30}
timeslots={2}
style={{ height: isMobile ? 400 : 600 }}
/>
)}
{view === "agenda" && (
<Calendar
localizer={localizer}
events={calendarEvents}
startAccessor="start"
endAccessor="end"
date={date}
view={view}
onNavigate={handleNavigate}
onSelectEvent={handleSelectEvent}
onSelectSlot={handleSelectSlot}
selectable
popup
showMultiDayTimes
components={{
event: EventComponent,
toolbar: (props: any) => (
<CustomToolbar
{...props}
currentView={view}
onView={(newView: string) => setView(newView)}
/>
),
}}
views={["month", "week", "work_week", "day", "agenda"]}
step={30}
timeslots={2}
style={{ height: isMobile ? 400 : 600 }}
/>
)}
</div>
{/* Event detail dialog */}