feat: implement frontend for calendar integration (Phase 3 & 4)

## Frontend Implementation

### Meeting Selection & Management
- Created MeetingSelection component for choosing between multiple active meetings
- Shows both active meetings and upcoming calendar events (30 min ahead)
- Displays meeting metadata with privacy controls (owner-only details)
- Supports creation of unscheduled meetings alongside calendar meetings

### Waiting Room
- Added waiting page for users joining before scheduled start time
- Shows countdown timer until meeting begins
- Auto-transitions to meeting when calendar event becomes active
- Handles early joining with proper routing

### Meeting Info Panel
- Created collapsible info panel showing meeting details
- Displays calendar metadata (title, description, attendees)
- Shows participant count and duration
- Privacy-aware: sensitive info only visible to room owners

### ICS Configuration UI
- Integrated ICS settings into room configuration dialog
- Test connection functionality with immediate feedback
- Manual sync trigger with detailed results
- Shows last sync time and ETag for monitoring
- Configurable sync intervals (1 min to 1 hour)

### Routing & Navigation
- New /room/{roomName} route for meeting selection
- Waiting room at /room/{roomName}/wait?eventId={id}
- Classic room page at /{roomName} with meeting info
- Uses sessionStorage to pass selected meeting between pages

### API Integration
- Added new endpoints for active/upcoming meetings
- Regenerated TypeScript client with latest OpenAPI spec
- Proper error handling and loading states
- Auto-refresh every 30 seconds for live updates

### UI/UX Improvements
- Color-coded badges for meeting status
- Attendee status indicators (accepted/declined/tentative)
- Responsive design with Chakra UI components
- Clear visual hierarchy between active and upcoming meetings
- Smart truncation for long attendee lists

This completes the frontend implementation for calendar integration,
enabling users to seamlessly join scheduled meetings from their
calendar applications.
This commit is contained in:
2025-08-18 19:29:56 -06:00
parent f286f0882c
commit 311d453e41
12 changed files with 2082 additions and 42 deletions

View File

@@ -30,6 +30,108 @@ export const $Body_transcript_record_upload_v1_transcripts__transcript_id__recor
"Body_transcript_record_upload_v1_transcripts__transcript_id__record_upload_post",
} as const;
export const $CalendarEventResponse = {
properties: {
id: {
type: "string",
title: "Id",
},
room_id: {
type: "string",
title: "Room Id",
},
ics_uid: {
type: "string",
title: "Ics Uid",
},
title: {
anyOf: [
{
type: "string",
},
{
type: "null",
},
],
title: "Title",
},
description: {
anyOf: [
{
type: "string",
},
{
type: "null",
},
],
title: "Description",
},
start_time: {
type: "string",
format: "date-time",
title: "Start Time",
},
end_time: {
type: "string",
format: "date-time",
title: "End Time",
},
attendees: {
anyOf: [
{
items: {
additionalProperties: true,
type: "object",
},
type: "array",
},
{
type: "null",
},
],
title: "Attendees",
},
location: {
anyOf: [
{
type: "string",
},
{
type: "null",
},
],
title: "Location",
},
last_synced: {
type: "string",
format: "date-time",
title: "Last Synced",
},
created_at: {
type: "string",
format: "date-time",
title: "Created At",
},
updated_at: {
type: "string",
format: "date-time",
title: "Updated At",
},
},
type: "object",
required: [
"id",
"room_id",
"ics_uid",
"start_time",
"end_time",
"last_synced",
"created_at",
"updated_at",
],
title: "CalendarEventResponse",
} as const;
export const $CreateParticipant = {
properties: {
speaker: {
@@ -91,6 +193,27 @@ export const $CreateRoom = {
type: "boolean",
title: "Is Shared",
},
ics_url: {
anyOf: [
{
type: "string",
},
{
type: "null",
},
],
title: "Ics Url",
},
ics_fetch_interval: {
type: "integer",
title: "Ics Fetch Interval",
default: 300,
},
ics_enabled: {
type: "boolean",
title: "Ics Enabled",
default: false,
},
},
type: "object",
required: [
@@ -687,6 +810,112 @@ export const $HTTPValidationError = {
title: "HTTPValidationError",
} as const;
export const $ICSStatus = {
properties: {
status: {
type: "string",
title: "Status",
},
last_sync: {
anyOf: [
{
type: "string",
format: "date-time",
},
{
type: "null",
},
],
title: "Last Sync",
},
next_sync: {
anyOf: [
{
type: "string",
format: "date-time",
},
{
type: "null",
},
],
title: "Next Sync",
},
last_etag: {
anyOf: [
{
type: "string",
},
{
type: "null",
},
],
title: "Last Etag",
},
events_count: {
type: "integer",
title: "Events Count",
default: 0,
},
},
type: "object",
required: ["status"],
title: "ICSStatus",
} as const;
export const $ICSSyncResult = {
properties: {
status: {
type: "string",
title: "Status",
},
hash: {
anyOf: [
{
type: "string",
},
{
type: "null",
},
],
title: "Hash",
},
events_found: {
type: "integer",
title: "Events Found",
default: 0,
},
events_created: {
type: "integer",
title: "Events Created",
default: 0,
},
events_updated: {
type: "integer",
title: "Events Updated",
default: 0,
},
events_deleted: {
type: "integer",
title: "Events Deleted",
default: 0,
},
error: {
anyOf: [
{
type: "string",
},
{
type: "null",
},
],
title: "Error",
},
},
type: "object",
required: ["status"],
title: "ICSSyncResult",
} as const;
export const $Meeting = {
properties: {
id: {
@@ -950,6 +1179,50 @@ export const $Room = {
type: "boolean",
title: "Is Shared",
},
ics_url: {
anyOf: [
{
type: "string",
},
{
type: "null",
},
],
title: "Ics Url",
},
ics_fetch_interval: {
type: "integer",
title: "Ics Fetch Interval",
default: 300,
},
ics_enabled: {
type: "boolean",
title: "Ics Enabled",
default: false,
},
ics_last_sync: {
anyOf: [
{
type: "string",
format: "date-time",
},
{
type: "null",
},
],
title: "Ics Last Sync",
},
ics_last_etag: {
anyOf: [
{
type: "string",
},
{
type: "null",
},
],
title: "Ics Last Etag",
},
},
type: "object",
required: [
@@ -1294,54 +1567,139 @@ export const $UpdateParticipant = {
export const $UpdateRoom = {
properties: {
name: {
type: "string",
anyOf: [
{
type: "string",
},
{
type: "null",
},
],
title: "Name",
},
zulip_auto_post: {
type: "boolean",
anyOf: [
{
type: "boolean",
},
{
type: "null",
},
],
title: "Zulip Auto Post",
},
zulip_stream: {
type: "string",
anyOf: [
{
type: "string",
},
{
type: "null",
},
],
title: "Zulip Stream",
},
zulip_topic: {
type: "string",
anyOf: [
{
type: "string",
},
{
type: "null",
},
],
title: "Zulip Topic",
},
is_locked: {
type: "boolean",
anyOf: [
{
type: "boolean",
},
{
type: "null",
},
],
title: "Is Locked",
},
room_mode: {
type: "string",
anyOf: [
{
type: "string",
},
{
type: "null",
},
],
title: "Room Mode",
},
recording_type: {
type: "string",
anyOf: [
{
type: "string",
},
{
type: "null",
},
],
title: "Recording Type",
},
recording_trigger: {
type: "string",
anyOf: [
{
type: "string",
},
{
type: "null",
},
],
title: "Recording Trigger",
},
is_shared: {
type: "boolean",
anyOf: [
{
type: "boolean",
},
{
type: "null",
},
],
title: "Is Shared",
},
ics_url: {
anyOf: [
{
type: "string",
},
{
type: "null",
},
],
title: "Ics Url",
},
ics_fetch_interval: {
anyOf: [
{
type: "integer",
},
{
type: "null",
},
],
title: "Ics Fetch Interval",
},
ics_enabled: {
anyOf: [
{
type: "boolean",
},
{
type: "null",
},
],
title: "Ics Enabled",
},
},
type: "object",
required: [
"name",
"zulip_auto_post",
"zulip_stream",
"zulip_topic",
"is_locked",
"room_mode",
"recording_type",
"recording_trigger",
"is_shared",
],
title: "UpdateRoom",
} as const;

View File

@@ -16,6 +16,18 @@ import type {
V1RoomsDeleteResponse,
V1RoomsCreateMeetingData,
V1RoomsCreateMeetingResponse,
V1RoomsSyncIcsData,
V1RoomsSyncIcsResponse,
V1RoomsIcsStatusData,
V1RoomsIcsStatusResponse,
V1RoomsListMeetingsData,
V1RoomsListMeetingsResponse,
V1RoomsListUpcomingMeetingsData,
V1RoomsListUpcomingMeetingsResponse,
V1RoomsListActiveMeetingsData,
V1RoomsListActiveMeetingsResponse,
V1RoomsJoinMeetingData,
V1RoomsJoinMeetingResponse,
V1TranscriptsListData,
V1TranscriptsListResponse,
V1TranscriptsCreateData,
@@ -227,6 +239,146 @@ export class DefaultService {
});
}
/**
* Rooms Sync Ics
* @param data The data for the request.
* @param data.roomName
* @returns ICSSyncResult Successful Response
* @throws ApiError
*/
public v1RoomsSyncIcs(
data: V1RoomsSyncIcsData,
): CancelablePromise<V1RoomsSyncIcsResponse> {
return this.httpRequest.request({
method: "POST",
url: "/v1/rooms/{room_name}/ics/sync",
path: {
room_name: data.roomName,
},
errors: {
422: "Validation Error",
},
});
}
/**
* Rooms Ics Status
* @param data The data for the request.
* @param data.roomName
* @returns ICSStatus Successful Response
* @throws ApiError
*/
public v1RoomsIcsStatus(
data: V1RoomsIcsStatusData,
): CancelablePromise<V1RoomsIcsStatusResponse> {
return this.httpRequest.request({
method: "GET",
url: "/v1/rooms/{room_name}/ics/status",
path: {
room_name: data.roomName,
},
errors: {
422: "Validation Error",
},
});
}
/**
* Rooms List Meetings
* @param data The data for the request.
* @param data.roomName
* @returns CalendarEventResponse Successful Response
* @throws ApiError
*/
public v1RoomsListMeetings(
data: V1RoomsListMeetingsData,
): CancelablePromise<V1RoomsListMeetingsResponse> {
return this.httpRequest.request({
method: "GET",
url: "/v1/rooms/{room_name}/meetings",
path: {
room_name: data.roomName,
},
errors: {
422: "Validation Error",
},
});
}
/**
* Rooms List Upcoming Meetings
* @param data The data for the request.
* @param data.roomName
* @param data.minutesAhead
* @returns CalendarEventResponse Successful Response
* @throws ApiError
*/
public v1RoomsListUpcomingMeetings(
data: V1RoomsListUpcomingMeetingsData,
): CancelablePromise<V1RoomsListUpcomingMeetingsResponse> {
return this.httpRequest.request({
method: "GET",
url: "/v1/rooms/{room_name}/meetings/upcoming",
path: {
room_name: data.roomName,
},
query: {
minutes_ahead: data.minutesAhead,
},
errors: {
422: "Validation Error",
},
});
}
/**
* Rooms List Active Meetings
* List all active meetings for a room (supports multiple active meetings)
* @param data The data for the request.
* @param data.roomName
* @returns Meeting Successful Response
* @throws ApiError
*/
public v1RoomsListActiveMeetings(
data: V1RoomsListActiveMeetingsData,
): CancelablePromise<V1RoomsListActiveMeetingsResponse> {
return this.httpRequest.request({
method: "GET",
url: "/v1/rooms/{room_name}/meetings/active",
path: {
room_name: data.roomName,
},
errors: {
422: "Validation Error",
},
});
}
/**
* Rooms Join Meeting
* Join a specific meeting by ID
* @param data The data for the request.
* @param data.roomName
* @param data.meetingId
* @returns Meeting Successful Response
* @throws ApiError
*/
public v1RoomsJoinMeeting(
data: V1RoomsJoinMeetingData,
): CancelablePromise<V1RoomsJoinMeetingResponse> {
return this.httpRequest.request({
method: "POST",
url: "/v1/rooms/{room_name}/meetings/{meeting_id}/join",
path: {
room_name: data.roomName,
meeting_id: data.meetingId,
},
errors: {
422: "Validation Error",
},
});
}
/**
* Transcripts List
* @param data The data for the request.

View File

@@ -9,6 +9,23 @@ export type Body_transcript_record_upload_v1_transcripts__transcript_id__record_
chunk: Blob | File;
};
export type CalendarEventResponse = {
id: string;
room_id: string;
ics_uid: string;
title?: string | null;
description?: string | null;
start_time: string;
end_time: string;
attendees?: Array<{
[key: string]: unknown;
}> | null;
location?: string | null;
last_synced: string;
created_at: string;
updated_at: string;
};
export type CreateParticipant = {
speaker?: number | null;
name: string;
@@ -24,6 +41,9 @@ export type CreateRoom = {
recording_type: string;
recording_trigger: string;
is_shared: boolean;
ics_url?: string | null;
ics_fetch_interval?: number;
ics_enabled?: boolean;
};
export type CreateTranscript = {
@@ -123,6 +143,24 @@ export type HTTPValidationError = {
detail?: Array<ValidationError>;
};
export type ICSStatus = {
status: string;
last_sync?: string | null;
next_sync?: string | null;
last_etag?: string | null;
events_count?: number;
};
export type ICSSyncResult = {
status: string;
hash?: string | null;
events_found?: number;
events_created?: number;
events_updated?: number;
events_deleted?: number;
error?: string | null;
};
export type Meeting = {
id: string;
room_name: string;
@@ -174,6 +212,11 @@ export type Room = {
recording_type: string;
recording_trigger: string;
is_shared: boolean;
ics_url?: string | null;
ics_fetch_interval?: number;
ics_enabled?: boolean;
ics_last_sync?: string | null;
ics_last_etag?: string | null;
};
export type RtcOffer = {
@@ -266,15 +309,18 @@ export type UpdateParticipant = {
};
export type UpdateRoom = {
name: string;
zulip_auto_post: boolean;
zulip_stream: string;
zulip_topic: string;
is_locked: boolean;
room_mode: string;
recording_type: string;
recording_trigger: string;
is_shared: boolean;
name?: string | null;
zulip_auto_post?: boolean | null;
zulip_stream?: string | null;
zulip_topic?: string | null;
is_locked?: boolean | null;
room_mode?: string | null;
recording_type?: string | null;
recording_trigger?: string | null;
is_shared?: boolean | null;
ics_url?: string | null;
ics_fetch_interval?: number | null;
ics_enabled?: boolean | null;
};
export type UpdateTranscript = {
@@ -371,6 +417,44 @@ export type V1RoomsCreateMeetingData = {
export type V1RoomsCreateMeetingResponse = Meeting;
export type V1RoomsSyncIcsData = {
roomName: string;
};
export type V1RoomsSyncIcsResponse = ICSSyncResult;
export type V1RoomsIcsStatusData = {
roomName: string;
};
export type V1RoomsIcsStatusResponse = ICSStatus;
export type V1RoomsListMeetingsData = {
roomName: string;
};
export type V1RoomsListMeetingsResponse = Array<CalendarEventResponse>;
export type V1RoomsListUpcomingMeetingsData = {
minutesAhead?: number;
roomName: string;
};
export type V1RoomsListUpcomingMeetingsResponse = Array<CalendarEventResponse>;
export type V1RoomsListActiveMeetingsData = {
roomName: string;
};
export type V1RoomsListActiveMeetingsResponse = Array<Meeting>;
export type V1RoomsJoinMeetingData = {
meetingId: string;
roomName: string;
};
export type V1RoomsJoinMeetingResponse = Meeting;
export type V1TranscriptsListData = {
/**
* Page number
@@ -670,6 +754,96 @@ export type $OpenApiTs = {
};
};
};
"/v1/rooms/{room_name}/ics/sync": {
post: {
req: V1RoomsSyncIcsData;
res: {
/**
* Successful Response
*/
200: ICSSyncResult;
/**
* Validation Error
*/
422: HTTPValidationError;
};
};
};
"/v1/rooms/{room_name}/ics/status": {
get: {
req: V1RoomsIcsStatusData;
res: {
/**
* Successful Response
*/
200: ICSStatus;
/**
* Validation Error
*/
422: HTTPValidationError;
};
};
};
"/v1/rooms/{room_name}/meetings": {
get: {
req: V1RoomsListMeetingsData;
res: {
/**
* Successful Response
*/
200: Array<CalendarEventResponse>;
/**
* Validation Error
*/
422: HTTPValidationError;
};
};
};
"/v1/rooms/{room_name}/meetings/upcoming": {
get: {
req: V1RoomsListUpcomingMeetingsData;
res: {
/**
* Successful Response
*/
200: Array<CalendarEventResponse>;
/**
* Validation Error
*/
422: HTTPValidationError;
};
};
};
"/v1/rooms/{room_name}/meetings/active": {
get: {
req: V1RoomsListActiveMeetingsData;
res: {
/**
* Successful Response
*/
200: Array<Meeting>;
/**
* Validation Error
*/
422: HTTPValidationError;
};
};
};
"/v1/rooms/{room_name}/meetings/{meeting_id}/join": {
post: {
req: V1RoomsJoinMeetingData;
res: {
/**
* Successful Response
*/
200: Meeting;
/**
* Validation Error
*/
422: HTTPValidationError;
};
};
};
"/v1/transcripts": {
get: {
req: V1TranscriptsListData;