feat: make calendar invitation banner collapsible

This commit is contained in:
Linus Rath
2026-05-06 00:49:09 +02:00
parent 2903e56cf6
commit 904a62ce79
+11 -14
View File
@@ -378,7 +378,7 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
const pickerTriggerRef = useRef<HTMLButtonElement>(null); const pickerTriggerRef = useRef<HTMLButtonElement>(null);
const [selectedCalendarId, setSelectedCalendarId] = useState<string>(''); const [selectedCalendarId, setSelectedCalendarId] = useState<string>('');
const [rawIcsMethod, setRawIcsMethod] = useState<InvitationMethod>('unknown'); const [rawIcsMethod, setRawIcsMethod] = useState<InvitationMethod>('unknown');
const [isCollapsed, setIsCollapsed] = useState(true); const [isCollapsed, setIsCollapsed] = useState(false);
const attachment = findCalendarAttachment(email); const attachment = findCalendarAttachment(email);
@@ -460,8 +460,7 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
const summary = parsedEvent ? formatEventSummary(parsedEvent) : null; const summary = parsedEvent ? formatEventSummary(parsedEvent) : null;
const isCancellation = method === 'cancel'; const isCancellation = method === 'cancel';
const isResponseOnly = method === 'reply' || method === 'refresh' || method === 'counter' || method === 'declinecounter'; const isResponseOnly = method === 'reply' || method === 'refresh' || method === 'counter' || method === 'declinecounter';
const canCollapse = method === 'reply'; const showDetails = !isCollapsed;
const showDetails = !canCollapse || !isCollapsed;
const allowsRsvp = method === 'request'; const allowsRsvp = method === 'request';
const allowsImport = method === 'request' || method === 'publish' || method === 'add' || method === 'unknown'; const allowsImport = method === 'request' || method === 'publish' || method === 'add' || method === 'unknown';
@@ -817,17 +816,15 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
{t('event_updated', { sequence: parsedEvent.sequence })} {t('event_updated', { sequence: parsedEvent.sequence })}
</span> </span>
)} )}
{canCollapse && ( <button
<button type="button"
type="button" onClick={() => setIsCollapsed((prev) => !prev)}
onClick={() => setIsCollapsed((prev) => !prev)} aria-expanded={!isCollapsed}
aria-expanded={!isCollapsed} className="text-xs text-muted-foreground hover:text-foreground flex items-center gap-0.5 transition-colors"
className="text-xs text-muted-foreground hover:text-foreground flex items-center gap-0.5 transition-colors" >
> {isCollapsed ? <ChevronDown className="w-3 h-3" /> : <ChevronUp className="w-3 h-3" />}
{isCollapsed ? <ChevronDown className="w-3 h-3" /> : <ChevronUp className="w-3 h-3" />} {isCollapsed ? t('expand') : t('collapse')}
{isCollapsed ? t('expand') : t('collapse')} </button>
</button>
)}
</div> </div>
</div> </div>