From 51d8b9a1adf7c9554492111a00f6f6aabfbceb26 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 9 Jan 2025 10:19:51 +0100
Subject: [PATCH 1/3] feat(calendar): add schedule meeting API handling

- align capabilities mock with Capabilities.php reference

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/__mocks__/capabilities.ts    | 23 ++++++++++++++++++-----
 src/services/groupwareService.ts | 25 +++++++++++++++++++++++++
 src/stores/groupware.ts          |  8 ++++++++
 src/types/index.ts               |  3 +++
 4 files changed, 54 insertions(+), 5 deletions(-)

diff --git a/src/__mocks__/capabilities.ts b/src/__mocks__/capabilities.ts
index ce56a841562..36a4f3a9794 100644
--- a/src/__mocks__/capabilities.ts
+++ b/src/__mocks__/capabilities.ts
@@ -84,11 +84,13 @@ export const mockedCapabilities: Capabilities = {
 			'chat-reference-id',
 			'mention-permissions',
 			'edit-messages-note-to-self',
-			'archived-conversations',
-			'talk-polls-drafts',
 			'archived-conversations-v2',
+			'talk-polls-drafts',
 			'download-call-participants',
 			'email-csv-import',
+			'conversation-creation-password',
+			'call-notification-state-api',
+			'schedule-meeting',
 		],
 		'features-local': [
 			'favorites',
@@ -100,9 +102,10 @@ export const mockedCapabilities: Capabilities = {
 			'avatar',
 			'remind-me-later',
 			'note-to-self',
-			'archived-conversations',
 			'archived-conversations-v2',
 			'chat-summary-api',
+			'call-notification-state-api',
+			'schedule-meeting',
 		],
 		config: {
 			attachments: {
@@ -147,6 +150,7 @@ export const mockedCapabilities: Capabilities = {
 			},
 			signaling: {
 				'session-ping-limit': 200,
+				'hello-v2-token-key': '123',
 			},
 		},
 		'config-local': {
@@ -163,17 +167,26 @@ export const mockedCapabilities: Capabilities = {
 			chat: [
 				'read-privacy',
 				'has-translation-providers',
+				'has-translation-task-providers',
 				'typing-privacy',
 				'summary-threshold',
 			],
 			conversations: [
 				'can-create',
 			],
-			federation: [],
+			federation: [
+				'enabled',
+				'incoming-enabled',
+				'outgoing-enabled',
+				'only-trusted-servers',
+			],
 			previews: [
 				'max-gif-size',
 			],
-			signaling: [],
+			signaling: [
+				'session-ping-limit',
+				'hello-v2-token-key',
+			],
 		},
 		version: '20.0.0-dev.0',
 	}
diff --git a/src/services/groupwareService.ts b/src/services/groupwareService.ts
index 4a1a9cd53e9..23c737ca336 100644
--- a/src/services/groupwareService.ts
+++ b/src/services/groupwareService.ts
@@ -9,6 +9,8 @@ import { generateOcsUrl } from '@nextcloud/router'
 import type {
 	OutOfOfficeResponse,
 	UpcomingEventsResponse,
+	scheduleMeetingParams,
+	scheduleMeetingResponse,
 } from '../types/index.ts'
 
 /**
@@ -31,7 +33,30 @@ const getUserAbsence = async (userId: string): OutOfOfficeResponse => {
 	return axios.get(generateOcsUrl('/apps/dav/api/v1/outOfOffice/{userId}/now', { userId }))
 }
 
+/**
+ * Schedule a new meeting for a given conversation.
+ *
+ * @param token The conversation token
+ * @param payload Function payload
+ * @param payload.calendarUri Last part of the calendar URI as seen by the participant
+ * @param payload.start Unix timestamp when the meeting starts
+ * @param payload.end Unix timestamp when the meeting ends, falls back to 60 minutes after start
+ * @param payload.title Title or summary of the event, falling back to the conversation name if none is given
+ * @param payload.description Description of the event, falling back to the conversation description if none is given
+ * @param options options object destructured
+ */
+const scheduleMeeting = async function(token: string, { calendarUri, start, end, title, description }: scheduleMeetingParams, options?: object): scheduleMeetingResponse {
+	return axios.post(generateOcsUrl('apps/spreed/api/v4/room/{token}/meeting', { token }, options), {
+		calendarUri,
+		start,
+		end,
+		title,
+		description,
+	} as scheduleMeetingParams, options)
+}
+
 export {
 	getUpcomingEvents,
 	getUserAbsence,
+	scheduleMeeting,
 }
diff --git a/src/stores/groupware.ts b/src/stores/groupware.ts
index c5e75c41294..1bc3d030746 100644
--- a/src/stores/groupware.ts
+++ b/src/stores/groupware.ts
@@ -18,11 +18,13 @@ import {
 import {
 	getUpcomingEvents,
 	getUserAbsence,
+	scheduleMeeting,
 } from '../services/groupwareService.ts'
 import type {
 	DavCalendar,
 	OutOfOfficeResult,
 	UpcomingEvent,
+	scheduleMeetingParams,
 } from '../types/index.ts'
 
 type State = {
@@ -111,6 +113,12 @@ export const useGroupwareStore = defineStore('groupware', {
 			}
 		},
 
+		async scheduleMeeting(token: string, payload: scheduleMeetingParams) {
+			await scheduleMeeting(token, payload)
+			// Fetch updated list of events for this conversation
+			await this.getUpcomingEvents(token)
+		},
+
 		/**
 		 * Drop an absence status from the store
 		 * @param token The conversation token
diff --git a/src/types/index.ts b/src/types/index.ts
index 5ad8b0c96b3..efb308e5b87 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -300,6 +300,9 @@ export type OutOfOfficeResult = {
 }
 export type OutOfOfficeResponse = ApiResponseUnwrapped<OutOfOfficeResult>
 
+export type scheduleMeetingParams = Required<operations['room-schedule-meeting']>['requestBody']['content']['application/json']
+export type scheduleMeetingResponse = ApiResponse<operations['room-schedule-meeting']['responses'][200]['content']['application/json']>
+
 // User preferences response
 // from https://docs.nextcloud.com/server/latest/developer_manual/client_apis/OCS/ocs-user-preferences-api.html
 export type UserPreferencesResponse = ApiResponseUnwrapped<unknown>

From 7e3b52b8c8348799b91b788ebe6a49e923388184 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 9 Jan 2025 13:03:44 +0100
Subject: [PATCH 2/3] feat(calendar): allow moderators to schedule meeting

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/CalendarEventsDialog.vue | 195 +++++++++++++++++++++++-
 1 file changed, 194 insertions(+), 1 deletion(-)

diff --git a/src/components/CalendarEventsDialog.vue b/src/components/CalendarEventsDialog.vue
index 96953325de9..911491b1549 100644
--- a/src/components/CalendarEventsDialog.vue
+++ b/src/components/CalendarEventsDialog.vue
@@ -4,20 +4,27 @@
 -->
 
 <script setup lang="ts">
-import { computed, onBeforeMount, ref } from 'vue'
+import { computed, onBeforeMount, ref, watch } from 'vue'
 
 import IconCalendarBlank from 'vue-material-design-icons/CalendarBlank.vue'
 import IconCalendarRefresh from 'vue-material-design-icons/CalendarRefresh.vue'
+import IconCheck from 'vue-material-design-icons/Check.vue'
 
 import { t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcDateTimePickerNative from '@nextcloud/vue/dist/Components/NcDateTimePickerNative.js'
 import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
+import NcTextArea from '@nextcloud/vue/dist/Components/NcTextArea.js'
+import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 import usernameToColor from '@nextcloud/vue/dist/Functions/usernameToColor.js'
 
+import { useStore } from '../composables/useStore.js'
+import { hasTalkFeature } from '../services/CapabilitiesManager.ts'
 import { useGroupwareStore } from '../stores/groupware.ts'
 
 const props = defineProps<{
@@ -28,10 +35,12 @@ const emit = defineEmits<{
 	(event: 'close'): void,
 }>()
 
+const store = useStore()
 const groupwareStore = useGroupwareStore()
 
 const open = ref(false)
 const loading = ref(Object.keys(groupwareStore.calendars).length === 0)
+const submitting = ref(false)
 
 const calendars = computed(() => groupwareStore.calendars)
 const upcomingEvents = computed(() => {
@@ -48,10 +57,60 @@ const upcomingEvents = computed(() => {
 		})
 })
 
+type CalendarOption = { value: string, label: string, color: string }
+const calendarOptions = computed<CalendarOption[]>(() => groupwareStore.writeableCalendars.map(calendar => ({
+	value: calendar.uri,
+	label: calendar.displayname,
+	color: calendar.color ?? usernameToColor(calendar.uri).color
+})))
+const canScheduleMeeting = computed(() => {
+	return hasTalkFeature(props.token, 'schedule-meeting') && store.getters.isModerator && calendarOptions.value.length
+})
+
+const selectedCalendar = ref<CalendarOption | null>(null)
+const selectedDateTimeStart = ref(new Date(moment().add(1, 'hours').startOf('hour')))
+const selectedDateTimeEnd = ref(new Date(moment().add(2, 'hours').startOf('hour')))
+const newMeetingTitle = ref('')
+const newMeetingDescription = ref('')
+const invalid = ref<string|null>(null)
+const invalidHint = computed(() => {
+	switch (invalid.value) {
+	case null:
+		return ''
+	case 'calendar':
+		return t('spreed', 'Error: Invalid calendar selected')
+	case 'start':
+		return t('spreed', 'Error: Invalid start time selected')
+	case 'end':
+		return t('spreed', 'Error: Invalid end time selected')
+	case 'unknown':
+	default:
+		return t('spreed', 'Error: Unknown error occurred')
+	}
+})
+
 onBeforeMount(() => {
 	getCalendars()
 })
 
+watch(open, (value) => {
+	if (!value) {
+		return
+	}
+
+	// Reset the default form values
+	selectedCalendar.value = calendarOptions.value.find(o => o.value === groupwareStore.defaultCalendarUri) ?? null
+	selectedDateTimeStart.value = new Date(moment().add(1, 'hours').startOf('hour'))
+	selectedDateTimeEnd.value = new Date(moment().add(2, 'hours').startOf('hour'))
+	newMeetingTitle.value = ''
+	newMeetingDescription.value = ''
+	invalid.value = null
+})
+
+watch([selectedCalendar, selectedDateTimeStart, selectedDateTimeEnd], () => {
+	invalid.value = null
+})
+
 /**
  * Show upcoming events dialog
  */
@@ -63,9 +122,44 @@ function openDialog() {
  * Get user's calendars to identify belonging of known and future events
  */
 async function getCalendars() {
+	await groupwareStore.getDefaultCalendarUri()
 	await groupwareStore.getPersonalCalendars()
 	loading.value = false
 }
+
+/**
+ * Get user's calendars to identify belonging of known and future events
+ */
+async function submitNewMeeting() {
+	if (!selectedCalendar.value) {
+		invalid.value = 'calendar'
+		return
+	}
+	if (selectedDateTimeStart.value < new Date()) {
+		invalid.value = 'start'
+		return
+	}
+	if (selectedDateTimeEnd.value < new Date() || selectedDateTimeEnd.value < selectedDateTimeStart.value) {
+		invalid.value = 'end'
+		return
+	}
+
+	try {
+		submitting.value = true
+		await groupwareStore.scheduleMeeting(props.token, {
+			calendarUri: selectedCalendar.value.value,
+			start: selectedDateTimeStart.value.getTime() / 1000,
+			end: selectedDateTimeEnd.value.getTime() / 1000,
+			title: newMeetingTitle.value || null,
+			description: newMeetingDescription.value || null,
+		})
+	} catch (error) {
+		// @ts-expect-error Vue: Property response does not exist
+		invalid.value = error?.response?.data?.ocs?.data?.error ?? 'unknown'
+	} finally {
+		submitting.value = false
+	}
+}
 </script>
 
 <template>
@@ -118,6 +212,63 @@ async function getCalendars() {
 					<p>{{ loading ? t('spreed', 'Loading …') : t('spreed', 'No upcoming events') }}</p>
 				</template>
 			</NcEmptyContent>
+
+			<div v-if="canScheduleMeeting" class="calendar-meeting">
+				<h4 class="calendar-meeting__header">
+					{{ t('spreed', 'Schedule new meeting') }}
+				</h4>
+				<NcTextField v-model="newMeetingTitle"
+					:label="t('spreed', 'Meeting title')"
+					label-visible />
+				<NcTextArea v-model="newMeetingDescription"
+					:label="t('spreed', 'Description')"
+					resize="vertical"
+					label-visible />
+				<div class="calendar-meeting__flex-wrapper">
+					<NcDateTimePickerNative id="schedule_meeting_input"
+						v-model="selectedDateTimeStart"
+						:class="{ 'invalid-time': invalid === 'start' }"
+						:min="new Date()"
+						:step="300"
+						:label="t('spreed', 'From')"
+						type="datetime-local" />
+					<NcDateTimePickerNative id="schedule_meeting_input"
+						v-model="selectedDateTimeEnd"
+						:class="{ 'invalid-time': invalid === 'end' }"
+						:min="new Date()"
+						:step="300"
+						:label="t('spreed', 'To')"
+						type="datetime-local" />
+				</div>
+				<NcSelect id="schedule_meeting_select"
+					v-model="selectedCalendar"
+					:options="calendarOptions"
+					:input-label="t('spreed', 'Calendar')">
+					<template #selected-option="option">
+						<span class="calendar-badge" :style="{ backgroundColor: option.color }" />
+						{{ option.label }}
+					</template>
+					<template #option="option">
+						<span class="calendar-badge" :style="{ backgroundColor: option.color }" />
+						{{ option.label }}
+					</template>
+				</NcSelect>
+				<p v-if="invalidHint" class="calendar-meeting__invalid-hint">
+					{{ invalidHint }}
+				</p>
+			</div>
+
+			<template v-if="canScheduleMeeting" #actions>
+				<NcButton type="primary"
+					:disabled="!selectedCalendar || submitting || !!invalid"
+					@click="submitNewMeeting">
+					<template #icon>
+						<NcLoadingIcon v-if="submitting" :size="20" />
+						<IconCheck v-else :size="20" />
+					</template>
+					{{ t('spreed', 'Save') }}
+				</NcButton>
+			</template>
 		</NcDialog>
 	</div>
 </template>
@@ -173,10 +324,52 @@ async function getCalendars() {
 	}
 }
 
+.calendar-meeting {
+	display: flex;
+	flex-direction: column;
+	margin: calc(var(--default-grid-baseline) / 2);
+	gap: var(--default-grid-baseline);
+
+	&__header {
+		margin-block: calc(var(--default-grid-baseline) * 3);
+		text-align: center;
+	}
+
+	&__invalid-hint {
+		color: var(--color-error);
+	}
+
+	&__flex-wrapper {
+		display: flex;
+		gap: calc(var(--default-grid-baseline) * 2);
+	}
+
+	// Overwrite default NcDateTimePickerNative styles
+	:deep(.native-datetime-picker) {
+		width: calc(50% - var(--default-grid-baseline));
+		margin-bottom: var(--default-grid-baseline);
+
+		label {
+			margin-bottom: 2px;
+		}
+
+		input {
+			margin: 0;
+			border-width: 1px;
+		}
+
+		&.invalid-time input {
+			border-width: 2px;
+			border-color: var(--color-error);
+		}
+	}
+}
+
 .calendar-badge {
 	display: inline-block;
 	width: var(--default-font-size);
 	height: var(--default-font-size);
+	margin-inline: calc((var(--default-clickable-area) - var(--default-font-size)) / 2);
 	border-radius: 50%;
 	background-color: var(--primary-color);
 }

From 1f61bc0b3fbe8649ea622eaca8ff6874a4316b94 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 9 Jan 2025 14:42:07 +0100
Subject: [PATCH 3/3] fix(calendar): move upcoming event to popover

- get rid of slot #trigger

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/CalendarEventsDialog.vue | 197 +++++++++++++++---------
 src/components/TopBar/TopBar.vue        |  74 +--------
 2 files changed, 130 insertions(+), 141 deletions(-)

diff --git a/src/components/CalendarEventsDialog.vue b/src/components/CalendarEventsDialog.vue
index 911491b1549..eb78b8bde7d 100644
--- a/src/components/CalendarEventsDialog.vue
+++ b/src/components/CalendarEventsDialog.vue
@@ -7,8 +7,9 @@
 import { computed, onBeforeMount, ref, watch } from 'vue'
 
 import IconCalendarBlank from 'vue-material-design-icons/CalendarBlank.vue'
-import IconCalendarRefresh from 'vue-material-design-icons/CalendarRefresh.vue'
 import IconCheck from 'vue-material-design-icons/Check.vue'
+import IconPlus from 'vue-material-design-icons/Plus.vue'
+import IconReload from 'vue-material-design-icons/Reload.vue'
 
 import { t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
@@ -18,9 +19,11 @@ import NcDateTimePickerNative from '@nextcloud/vue/dist/Components/NcDateTimePic
 import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import NcPopover from '@nextcloud/vue/dist/Components/NcPopover.js'
 import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 import NcTextArea from '@nextcloud/vue/dist/Components/NcTextArea.js'
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
+import { useIsMobile } from '@nextcloud/vue/dist/Composables/useIsMobile.js'
 import usernameToColor from '@nextcloud/vue/dist/Functions/usernameToColor.js'
 
 import { useStore } from '../composables/useStore.js'
@@ -35,10 +38,13 @@ const emit = defineEmits<{
 	(event: 'close'): void,
 }>()
 
+const hideTriggers = (triggers: string[]) => [...triggers, 'click']
+
 const store = useStore()
 const groupwareStore = useGroupwareStore()
+const isMobile = useIsMobile()
 
-const open = ref(false)
+const isFormOpen = ref(false)
 const loading = ref(Object.keys(groupwareStore.calendars).length === 0)
 const submitting = ref(false)
 
@@ -93,7 +99,7 @@ onBeforeMount(() => {
 	getCalendars()
 })
 
-watch(open, (value) => {
+watch(isFormOpen, (value) => {
 	if (!value) {
 		return
 	}
@@ -111,13 +117,6 @@ watch([selectedCalendar, selectedDateTimeStart, selectedDateTimeEnd], () => {
 	invalid.value = null
 })
 
-/**
- * Show upcoming events dialog
- */
-function openDialog() {
-	open.value = true
-}
-
 /**
  * Get user's calendars to identify belonging of known and future events
  */
@@ -153,6 +152,7 @@ async function submitNewMeeting() {
 			title: newMeetingTitle.value || null,
 			description: newMeetingDescription.value || null,
 		})
+		isFormOpen.value = false
 	} catch (error) {
 		// @ts-expect-error Vue: Property response does not exist
 		invalid.value = error?.response?.data?.ocs?.data?.error ?? 'unknown'
@@ -164,59 +164,75 @@ async function submitNewMeeting() {
 
 <template>
 	<div>
-		<slot name="trigger" :on-click="openDialog">
-			<NcButton :title="t('spreed', 'Upcoming events')"
-				:aria-label="t('spreed', 'Upcoming events')"
-				@click="openDialog">
-				<template #icon>
-					<IconCalendarBlank :size="20" />
+		<NcPopover :container="container"
+			:popper-hide-triggers="hideTriggers"
+			popup-role="dialog">
+			<template #trigger>
+				<NcButton class="upcoming-meeting"
+					:title="t('spreed', 'Upcoming meetings')"
+					:aria-label="t('spreed', 'Upcoming meetings')">
+					<template #icon>
+						<IconCalendarBlank :size="20" />
+					</template>
+					<template v-if="upcomingEvents[0] && !isMobile" #default>
+						<span class="upcoming-meeting__header">
+							{{ t('spreed', 'Next meeting') }}
+						</span>
+						<span> {{ upcomingEvents[0].start }} </span>
+					</template>
+				</NcButton>
+			</template>
+			<template #default>
+				<template v-if="!loading && upcomingEvents.length">
+					<ul class="calendar-events__list">
+						<!-- Upcoming event -->
+						<li v-for="event in upcomingEvents" :key="event.uri">
+							<a class="calendar-events__item"
+								:class="{ 'calendar-events__item--thumb': !event.href }"
+								:href="event.href"
+								:title="t('spreed', 'Open Calendar')"
+								target="_blank">
+								<span class="calendar-badge" :style="{ backgroundColor: event.color }" />
+								<span class="calendar-events__content">
+									<span class="calendar-events__header">
+										<span class="calendar-events__header-text">{{ event.summary }}</span>
+										<IconReload v-if="event.recurrenceId" :size="13" />
+									</span>
+									<span>{{ event.start }}</span>
+								</span>
+							</a>
+						</li>
+					</ul>
 				</template>
-			</NcButton>
-		</slot>
+				<NcEmptyContent v-else class="calendar-events__empty-content">
+					<template #icon>
+						<NcLoadingIcon v-if="loading" />
+						<IconCalendarBlank v-else />
+					</template>
 
-		<NcDialog :open.sync="open"
+					<template #description>
+						<p>{{ loading ? t('spreed', 'Loading …') : t('spreed', 'No upcoming events') }}</p>
+					</template>
+				</NcEmptyContent>
+				<div v-if="canScheduleMeeting" class="calendar-events__buttons">
+					<NcButton wide @click="isFormOpen = true">
+						<template #icon>
+							<IconPlus :size="20" />
+						</template>
+						{{ t('spreed', 'Schedule a meeting') }}
+					</NcButton>
+				</div>
+			</template>
+		</NcPopover>
+
+		<NcDialog v-if="canScheduleMeeting"
+			:open.sync="isFormOpen"
 			class="calendar-events"
-			:name="t('spreed', 'Upcoming events')"
+			:name="t('spreed', 'Schedule a meeting')"
 			size="normal"
 			close-on-click-outside
 			:container="container">
-			<template v-if="!loading && upcomingEvents.length">
-				<ul class="calendar-events__list">
-					<!-- Upcoming event -->
-					<li v-for="event in upcomingEvents" :key="event.uri">
-						<a class="calendar-events__item"
-							:class="{ 'calendar-events__item--thumb': !event.href }"
-							:href="event.href"
-							:title="t('spreed', 'Open Calendar')"
-							target="_blank">
-							<IconCalendarRefresh v-if="event.recurrenceId" :size="20" />
-							<IconCalendarBlank v-else :size="20" />
-							<div class="calendar-badge" :style="{ backgroundColor: event.color }" />
-							<div class="calendar-events__content">
-								<p class="calendar-events__header">
-									{{ event.summary }}
-								</p>
-								<p>{{ event.start }}</p>
-							</div>
-						</a>
-					</li>
-				</ul>
-			</template>
-			<NcEmptyContent v-else>
-				<template #icon>
-					<NcLoadingIcon v-if="loading" />
-					<IconCalendarBlank v-else />
-				</template>
-
-				<template #description>
-					<p>{{ loading ? t('spreed', 'Loading …') : t('spreed', 'No upcoming events') }}</p>
-				</template>
-			</NcEmptyContent>
-
-			<div v-if="canScheduleMeeting" class="calendar-meeting">
-				<h4 class="calendar-meeting__header">
-					{{ t('spreed', 'Schedule new meeting') }}
-				</h4>
+			<div class="calendar-meeting">
 				<NcTextField v-model="newMeetingTitle"
 					:label="t('spreed', 'Meeting title')"
 					label-visible />
@@ -258,7 +274,7 @@ async function submitNewMeeting() {
 				</p>
 			</div>
 
-			<template v-if="canScheduleMeeting" #actions>
+			<template #actions>
 				<NcButton type="primary"
 					:disabled="!selectedCalendar || submitting || !!invalid"
 					@click="submitNewMeeting">
@@ -285,31 +301,34 @@ async function submitNewMeeting() {
 		--item-height: calc(2lh + var(--default-grid-baseline) * 3);
 		display: flex;
 		flex-direction: column;
-		margin: var(--default-grid-baseline);
-		gap: var(--default-grid-baseline);
+		margin: calc(var(--default-grid-baseline) / 2);
 		line-height: 20px;
 		max-height: calc(4.5 * var(--item-height) + 4 * var(--default-grid-baseline));
 		overflow-y: auto;
+
+		& > * {
+			margin-inline: calc(var(--default-grid-baseline) / 2);
+			&:not(:last-child) {
+				border-bottom: 1px solid var(--color-border-dark);
+			}
+		}
 	}
 
 	&__item {
 		display: flex;
 		flex-direction: row;
 		align-items: center;
-		gap: calc(var(--default-grid-baseline) * 2);
-		margin: calc(var(--default-grid-baseline) / 2);
-		padding: var(--default-grid-baseline);
-		color: var(--color-primary-element-light-text);
-		background-color: var(--color-primary-element-light);
+		margin-block: var(--default-grid-baseline);
+		padding-inline: var(--default-grid-baseline);
 		height: 100%;
 		border-radius: var(--border-radius);
 
-    &--thumb {
-      cursor: default;
-    }
+		&--thumb {
+			cursor: default;
+		}
 
 		&:hover {
-			background-color: var(--color-primary-element-light-hover);
+			background-color: var(--color-background-hover);
 		}
 	}
 
@@ -320,7 +339,30 @@ async function submitNewMeeting() {
 	}
 
 	&__header {
+		display: flex;
+		gap: var(--default-grid-baseline);
+		max-width: 150px;
 		font-weight: 500;
+
+		&-text {
+			display: inline-block;
+			width: 100%;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+
+		:deep(.material-design-icon) {
+			margin-top: 2px;
+		}
+	}
+
+	&__empty-content {
+		margin-top: calc(var(--default-grid-baseline) * 3);
+	}
+
+	&__buttons {
+		padding: var(--default-grid-baseline);
 	}
 }
 
@@ -365,6 +407,23 @@ async function submitNewMeeting() {
 	}
 }
 
+.upcoming-meeting {
+	// Overwrite default NcButton styles
+	:deep(.button-vue__text) {
+		padding-block: 0;
+		margin: 0;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		line-height: 20px;
+		font-weight: 400;
+	}
+
+	&__header {
+		font-weight: 500;
+	}
+}
+
 .calendar-badge {
 	display: inline-block;
 	width: var(--default-font-size);
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index fc17f4074c1..57b41902f21 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -56,25 +56,8 @@
 
 			<TasksCounter v-if="conversation.type === CONVERSATION.TYPE.NOTE_TO_SELF" />
 
-			<!-- Upcoming events -->
-			<CalendarEventsDialog v-if="showCalendarEvents" :token="token">
-				<template v-if="showUpcomingEvent" #trigger="{ onClick }">
-					<a class="upcoming-event"
-						role="button"
-						:title="t('spreed', 'Upcoming events')"
-						@click="onClick">
-						<div class="icon">
-							<IconCalendarBlank :size="20" />
-						</div>
-						<div class="event-info">
-							<p class="event-info__header">
-								{{ t('spreed', 'Next call') }}
-							</p>
-							<p> {{ eventInfo }} </p>
-						</div>
-					</a>
-				</template>
-			</CalendarEventsDialog>
+			<!-- Upcoming meetings -->
+			<CalendarEventsDialog v-if="showCalendarEvents" :token="token" />
 
 			<!-- Call time -->
 			<CallTime v-if="isInCall"
@@ -124,15 +107,12 @@
 
 <script>
 import IconAccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
-import IconCalendarBlank from 'vue-material-design-icons/CalendarBlank.vue'
 
 import { emit } from '@nextcloud/event-bus'
 import { t, n } from '@nextcloud/l10n'
-import moment from '@nextcloud/moment'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcPopover from '@nextcloud/vue/dist/Components/NcPopover.js'
-import { useIsMobile } from '@nextcloud/vue/dist/Composables/useIsMobile.js'
 import richEditor from '@nextcloud/vue/dist/Mixins/richEditor.js'
 
 import CallButton from './CallButton.vue'
@@ -171,7 +151,6 @@ export default {
 		ReactionMenu,
 		// Icons
 		IconAccountMultiple,
-		IconCalendarBlank,
 	},
 
 	mixins: [richEditor],
@@ -200,7 +179,6 @@ export default {
 			localMediaModel,
 			groupwareStore: useGroupwareStore(),
 			sidebarStore: useSidebarStore(),
-			isMobile: useIsMobile(),
 			CONVERSATION,
 		}
 	},
@@ -288,32 +266,11 @@ export default {
 			return this.isInCall && this.supportedReactions?.length > 0
 		},
 
-		nextEvent() {
-			return this.groupwareStore.getNextEvent(this.token)
-		},
-
-		eventInfo() {
-			if (!this.nextEvent) {
-				return null
-			}
-
-			// If timestamp is in the past, show "now"
-			if (this.nextEvent.start <= moment().unix()) {
-				return t('spreed', 'Now')
-			}
-
-			return moment(this.nextEvent.start * 1000).calendar()
-		},
-
 		showCalendarEvents() {
 			return this.getUserId && !this.isInCall && !this.isSidebar
 				&& this.conversation.type !== CONVERSATION.TYPE.NOTE_TO_SELF
 		},
 
-		showUpcomingEvent() {
-			return this.nextEvent && !this.isMobile
-		},
-
 		getUserId() {
 			return this.$store.getters.getUserId()
 		},
@@ -456,31 +413,4 @@ export default {
 .icon {
 	display: flex;
 }
-
-.upcoming-event {
-	display: flex;
-	flex-direction: row;
-	gap: calc(var(--default-grid-baseline) * 2);
-	padding: 0 calc(var(--default-grid-baseline) * 2);
-	color: var(--color-primary-element-light-text);
-	background-color: var(--color-primary-element-light);
-	height: 100%;
-	border-radius: var(--border-radius);
-
-	&:hover {
-		background-color: var(--color-primary-element-light-hover);
-	}
-}
-
-.event-info {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	line-height: 20px;
-
-	&__header {
-		font-weight: 500;
-	}
-}
-
 </style>