From 492cb5d8c8933601df82ec9a5c51cbca7991bf4c Mon Sep 17 00:00:00 2001
From: NFriedo <69233063+NFriedo@users.noreply.github.com>
Date: Fri, 8 Nov 2024 12:02:02 +0100
Subject: [PATCH 1/3] BC-8353 -  UX adjustments remove participant dialog
 (#3439)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR improves the remove dialog on the participants table.

* change german common.actions.remove value from "Löschen" to "Entfernen"
* make Spanish language keys for room consistent (sala instead of habitación)
* make vCustomDialog responsive

remove participant confirmation dialog:
* change button label to be "Remove" instead of "Confirm"
* adjust the remove dialog text for en, es, uk

participants page:
* adjust the info text on the participant page for all languages
* replace remove icon in the table with icon button
---
 src/components/molecules/TaskItemMenu.vue     |  4 ++--
 src/components/organisms/vCustomDialog.vue    | 23 +++++++------------
 src/locales/de.ts                             |  4 ++--
 src/locales/en.ts                             |  4 ++--
 src/locales/es.ts                             | 22 +++++++++---------
 src/locales/uk.ts                             |  4 ++--
 .../media-shelf/MediaBoardLineMenu.unit.ts    |  2 +-
 .../media-shelf/MediaBoardLineMenu.vue        |  2 +-
 src/modules/feature/news-form/FormNews.vue    |  2 +-
 .../RoomParticipants/ParticipantsTable.vue    |  7 +++---
 .../page/room/RoomParticipants.page.vue       |  8 ++++---
 .../administration/ClassOverview.page.vue     |  1 +
 .../course-rooms/CourseRoomDetails.page.vue   |  2 +-
 .../tools/RoomExternalToolsSection.vue        |  1 +
 14 files changed, 41 insertions(+), 45 deletions(-)

diff --git a/src/components/molecules/TaskItemMenu.vue b/src/components/molecules/TaskItemMenu.vue
index 9ba35459d0..4d85ac0e3b 100644
--- a/src/components/molecules/TaskItemMenu.vue
+++ b/src/components/molecules/TaskItemMenu.vue
@@ -81,7 +81,7 @@
 		>
 			<v-list-item-title>
 				<v-icon :icon="mdiTrashCanOutline" class="task-action-icon" />
-				{{ $t("common.actions.remove") }}
+				{{ $t("common.actions.delete") }}
 			</v-list-item-title>
 		</v-list-item>
 	</KebabMenu>
@@ -89,7 +89,7 @@
 		v-model:isOpen="confirmDeleteDialogIsOpen"
 		:size="375"
 		has-buttons
-		confirm-btn-title-key="common.actions.remove"
+		confirm-btn-title-key="common.actions.delete"
 		@dialog-confirmed="handleDelete"
 	>
 		<template #title>
diff --git a/src/components/organisms/vCustomDialog.vue b/src/components/organisms/vCustomDialog.vue
index d1a1b2192e..8e503755e0 100644
--- a/src/components/organisms/vCustomDialog.vue
+++ b/src/components/organisms/vCustomDialog.vue
@@ -13,8 +13,7 @@
 			<v-card-text class="text--primary">
 				<slot name="content" />
 			</v-card-text>
-			<v-card-actions v-if="hasButtons" class="pe-6">
-				<v-spacer />
+			<v-card-actions v-if="hasButtons" class="action-buttons px-6">
 				<div class="button-section button-left">
 					<v-btn
 						v-if="checkButtons('back')"
@@ -33,6 +32,7 @@
 						{{ $t("common.actions.edit") }}
 					</v-btn>
 				</div>
+				<v-spacer />
 				<div class="button-section button-right">
 					<v-btn
 						v-if="checkButtons('cancel')"
@@ -151,22 +151,15 @@ const checkButtons = (buttonName: string) => {
 </script>
 
 <style lang="scss" scoped>
-.button-left {
-	width: 25%;
-	text-align: left;
-}
-
-.button-right {
-	display: inline-block;
-	width: 75%;
-	text-align: right;
-}
-.button-section {
+.action-buttons {
+	display: flex;
+	flex-direction: row;
 	margin-bottom: calc(var(--space-base-vuetify) * 2);
 }
 
-.button-section > button {
-	margin-left: calc(var(--space-base-vuetify) * 2);
+.button-section {
+	display: flex;
+	gap: calc(var(--space-base-vuetify) * 2);
 }
 
 .dialog-title {
diff --git a/src/locales/de.ts b/src/locales/de.ts
index 6a92239a44..bafe6927d6 100644
--- a/src/locales/de.ts
+++ b/src/locales/de.ts
@@ -16,7 +16,7 @@ export default {
 	"common.actions.logout": "Abmelden",
 	"common.actions.ok": "OK",
 	"common.actions.pickColor": "Hintergrundfarbe auswählen",
-	"common.actions.remove": "Löschen",
+	"common.actions.remove": "Entfernen",
 	"common.actions.rename": "Umbenennen",
 	"common.actions.save": "Speichern",
 	"common.actions.scrollToTop": "Nach oben scrollen",
@@ -1681,7 +1681,7 @@ export default {
 	"pages.rooms.participant.delete.confirmation":
 		"{memberName} wirklich aus dem Raum entfernen?",
 	"pages.rooms.participant.infoText":
-		'Füge Teilnehmende zum Raum hinzu. Lehrkräfte anderer Schulen können hinzugefügt werden, wenn sie die Sichtbarkeit im zentralen Verzeichnis im eigenen Profil aktiviert haben	<a href="https://docs.dbildungscloud.de/display/SCDOK/Teameinladung+freigeben">(weitere Informationen)</a>.',
+		'Füge Teilnehmende zum Raum hinzu. Lehrkräfte anderer Schulen können hinzugefügt werden, wenn sie in ihrem Profil die Sichtbarkeit im zentralen Verzeichnis aktiviert haben	(<a href="https://docs.dbildungscloud.de/display/SCDOK/Teameinladung+freigeben">weitere Informationen</a>).',
 	"pages.rooms.participant.label": "Teilnehmer:in",
 	"pages.rooms.participants.label": "Teilnehmende",
 	"pages.rooms.participants.addParticipants": "Teilnehmende hinzufügen",
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 87f9a3cf79..46fbf1909f 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -1649,9 +1649,9 @@ export default {
 	"pages.rooms.participant.error.add": "Adding participants failed.",
 	"pages.rooms.participant.error.delete": "Deleting participants failed.",
 	"pages.rooms.participant.delete.confirmation":
-		"Really remove {memberName} from the room?",
+		"Remove {memberName} from the room?",
 	"pages.rooms.participant.infoText":
-		'Add participants to the room. Teachers from other schools can be added if they have activated visibility in the central directory in their own profile <a href="https://docs.dbildungscloud.de/display/SCDOK/Teameinladung+freigeben">(more information)</a>.',
+		'Add participants to the room. Teachers from other schools can be added if they have activated visibility in the central directory in their profile (<a href="https://docs.dbildungscloud.de/display/SCDOK/Teameinladung+freigeben">more information</a>).',
 	"pages.rooms.participant.label": "Participant",
 	"pages.rooms.participants.label": "Participants",
 	"pages.rooms.participants.addParticipants": "Add participants",
diff --git a/src/locales/es.ts b/src/locales/es.ts
index 614cb96a6a..0789116020 100644
--- a/src/locales/es.ts
+++ b/src/locales/es.ts
@@ -1680,22 +1680,22 @@ export default {
 		"Common Cartridge versión 1.1 (p. ej. compatible con Moodle)",
 	"pages.room.modal.course.export.version1.3": "Common Cartridge versión 1.3",
 	// new rooms
-	"pages.roomCreate.title": "Crear habitación",
-	"pages.roomEdit.title": "Editar habitación",
-	"pages.roomDetails.title": "Habitación",
-	"pages.roomDetails.ariaLabels.menu": "Menú de la habitación",
-	"pages.roomDetails.ariaLabels.menu.action.edit": "Editar habitación",
-	"pages.roomDetails.ariaLabels.menu.action.delete": "Borrar habitación",
-	"pages.rooms.emptyState": "Actualmente no hay habitaciones aquí.",
-	"pages.rooms.fab.title": "Crear habitación",
+	"pages.roomCreate.title": "Crear sala",
+	"pages.roomEdit.title": "Editar sala",
+	"pages.roomDetails.title": "Sala",
+	"pages.roomDetails.ariaLabels.menu": "Menú de la sala",
+	"pages.roomDetails.ariaLabels.menu.action.edit": "Editar sala",
+	"pages.roomDetails.ariaLabels.menu.action.delete": "Borrar sala",
+	"pages.rooms.emptyState": "Actualmente no hay salas aquí.",
+	"pages.rooms.fab.title": "Crear sala",
 	"pages.rooms.participant.error.load":
 		"No se pudo cargar la lista de participantes.",
 	"pages.rooms.participant.error.add": "Error al agregar participantes.",
 	"pages.rooms.participant.error.delete": "Error al eliminar participantes.",
 	"pages.rooms.participant.delete.confirmation":
-		"¿De verdad quieres borrar a {memberName} de la sala?",
+		"¿Eliminar {memberName} de la sala?",
 	"pages.rooms.participant.infoText":
-		'Añade participantes a la sala. Se pueden añadir profesores de otros centros educativos si tienen activada la visibilidad en el directorio central en su propio perfil <a href="https://docs.dbildungscloud.de/display/SCDOK/Teameinladung+freigeben">(más información)</a>.',
+		'Añadir participantes a la sala. Se pueden añadir profesores de otros centros si tienen activada la visibilidad en el directorio central en su perfil (<a href="https://docs.dbildungscloud.de/display/SCDOK/Teameinladung+freigeben">más información</a>).',
 	"pages.rooms.participant.label": "Partícipe",
 	"pages.rooms.participants.label": "Participantes",
 	"pages.rooms.participants.addParticipants": "Añadir participantes",
@@ -1705,7 +1705,7 @@ export default {
 		"Entradas por página",
 	"pages.rooms.participants.roles.editor": "Editor de salas",
 	"pages.rooms.participants.roles.viewer": "Visor de salas",
-	"pages.rooms.title": "Habitaciones",
+	"pages.rooms.title": "Salas",
 	"pages.taskCard.addElement": "Añadir artículo",
 	"pages.taskCard.deleteElement.text":
 		"¿Estás seguro de que deseas eliminar este elemento?",
diff --git a/src/locales/uk.ts b/src/locales/uk.ts
index 4d00ae77a4..0623e2c8e2 100644
--- a/src/locales/uk.ts
+++ b/src/locales/uk.ts
@@ -1671,9 +1671,9 @@ export default {
 	"pages.rooms.participant.error.add": "Не вдалося додати учасників.",
 	"pages.rooms.participant.error.delete": "Не вдалося видалити учасників.",
 	"pages.rooms.participant.delete.confirmation":
-		"Справді видалити {memberName} з кімнати?",
+		"{memberName} буде видалено з цієї кімнати. Ви впевнені, що хочете видалити?",
 	"pages.rooms.participant.infoText":
-		'Додайте учасників до кімнати. Вчителів з інших шкіл можна додавати, якщо вони активували видимість у центральному каталозі у власному профілі <a href="https://docs.dbildungscloud.de/display/SCDOK/Teameinladung+freigeben">(більше інформації)</a>.',
+		'Додайте учасників до кімнати. Вчителі з інших шкіл можуть бути додані, якщо вони активували видимість у центральному каталозі у своєму профілі (<a href="https://docs.dbildungscloud.de/display/SCDOK/Teameinladung+freigeben">більше інформації</a>).',
 	"pages.rooms.participant.label": "Учасник",
 	"pages.rooms.participants.label": "Учасники",
 	"pages.rooms.participants.addParticipants": "Додайте учасників",
diff --git a/src/modules/feature/media-shelf/MediaBoardLineMenu.unit.ts b/src/modules/feature/media-shelf/MediaBoardLineMenu.unit.ts
index 207e81c8b3..7e8396478c 100644
--- a/src/modules/feature/media-shelf/MediaBoardLineMenu.unit.ts
+++ b/src/modules/feature/media-shelf/MediaBoardLineMenu.unit.ts
@@ -54,7 +54,7 @@ describe("MediaBoardLineMenu", () => {
 			expect(menuItems.length).toEqual(3);
 			expect(menuItems[0].text()).toEqual("common.actions.rename");
 			expect(menuItems[1].text()).toEqual("common.actions.pickColor");
-			expect(menuItems[2].text()).toEqual("common.actions.remove");
+			expect(menuItems[2].text()).toEqual("common.actions.delete");
 		});
 	});
 
diff --git a/src/modules/feature/media-shelf/MediaBoardLineMenu.vue b/src/modules/feature/media-shelf/MediaBoardLineMenu.vue
index 5fa4f35622..3df529468b 100644
--- a/src/modules/feature/media-shelf/MediaBoardLineMenu.vue
+++ b/src/modules/feature/media-shelf/MediaBoardLineMenu.vue
@@ -53,7 +53,7 @@
 			data-testid="action-delete-line"
 		>
 			<VListItemTitle>
-				<span>{{ $t("common.actions.remove") }}</span>
+				<span>{{ $t("common.actions.delete") }}</span>
 			</VListItemTitle>
 		</VListItem>
 	</KebabMenu>
diff --git a/src/modules/feature/news-form/FormNews.vue b/src/modules/feature/news-form/FormNews.vue
index 772402f682..d3f4c5468d 100644
--- a/src/modules/feature/news-form/FormNews.vue
+++ b/src/modules/feature/news-form/FormNews.vue
@@ -68,7 +68,7 @@
 								@click="remove"
 							>
 								<v-icon size="20" class="mr-1">{{ mdiDelete }}</v-icon>
-								{{ $t("common.actions.remove") }}
+								{{ $t("common.actions.delete") }}
 							</v-btn>
 							<v-btn variant="text" @click="cancel">
 								<v-icon size="20" class="mr-1">{{ mdiClose }}</v-icon>
diff --git a/src/modules/feature/room/RoomParticipants/ParticipantsTable.vue b/src/modules/feature/room/RoomParticipants/ParticipantsTable.vue
index e211a81a0b..e9c33368fa 100644
--- a/src/modules/feature/room/RoomParticipants/ParticipantsTable.vue
+++ b/src/modules/feature/room/RoomParticipants/ParticipantsTable.vue
@@ -34,11 +34,10 @@
 			@update:current-items="onUpdateFilter"
 		>
 			<template #[`item.actions`]="{ item }">
-				<v-icon
-					class="cursor-pointer"
-					:icon="mdiTrashCanOutline"
+				<v-btn
+					variant="text"
 					:aria-label="t('pages.rooms.participants.removeParticipants')"
-					:title="t('pages.rooms.participants.removeParticipants')"
+					:icon="mdiTrashCanOutline"
 					@click="onRemoveParticipant(item)"
 				/>
 			</template>
diff --git a/src/modules/page/room/RoomParticipants.page.vue b/src/modules/page/room/RoomParticipants.page.vue
index 0d811d7c93..6c0bc30f94 100644
--- a/src/modules/page/room/RoomParticipants.page.vue
+++ b/src/modules/page/room/RoomParticipants.page.vue
@@ -60,7 +60,6 @@ import { RoleName, RoomMemberResponse } from "@/serverApi/v3";
 import {
 	ConfirmationDialog,
 	useConfirmationDialog,
-	useDeleteConfirmationDialog,
 } from "@ui-confirmation-dialog";
 import { RenderHTML } from "@feature-render-html";
 import { useDisplay } from "vuetify";
@@ -85,7 +84,6 @@ const {
 } = useParticipants(roomId);
 
 const participantsList: Ref<RoomMemberResponse[]> = ref(participants);
-const { askDeleteConfirmation } = useDeleteConfirmationDialog();
 
 const pageTitle = computed(() =>
 	buildPageTitle(
@@ -135,7 +133,11 @@ const onRemoveParticipant = async (participant: ParticipantType) => {
 	const message = t("pages.rooms.participant.delete.confirmation", {
 		memberName: `${participant.firstName} ${participant.lastName}`,
 	});
-	const shouldDelete = await askConfirmation({ message });
+
+	const shouldDelete = await askConfirmation({
+		message,
+		confirmActionLangKey: "common.actions.remove",
+	});
 
 	if (!shouldDelete) return;
 	await removeParticipants([participant.userId]);
diff --git a/src/pages/administration/ClassOverview.page.vue b/src/pages/administration/ClassOverview.page.vue
index d436a96abb..c21768f9a0 100644
--- a/src/pages/administration/ClassOverview.page.vue
+++ b/src/pages/administration/ClassOverview.page.vue
@@ -129,6 +129,7 @@
 			max-width="360"
 			data-testid="delete-dialog"
 			has-buttons
+			confirmBtnTitleKey="common.actions.delete"
 			:buttons="['cancel', 'confirm']"
 			@dialog-closed="onCancelClassDeletion"
 			@dialog-confirmed="onConfirmClassDeletion"
diff --git a/src/pages/course-rooms/CourseRoomDetails.page.vue b/src/pages/course-rooms/CourseRoomDetails.page.vue
index 5fd0d38418..eaa5b56cdd 100644
--- a/src/pages/course-rooms/CourseRoomDetails.page.vue
+++ b/src/pages/course-rooms/CourseRoomDetails.page.vue
@@ -394,7 +394,7 @@ export default defineComponent({
 					name:
 						this.$t("common.actions.edit") +
 						"/" +
-						this.$t("common.actions.remove"),
+						this.$t("common.actions.delete"),
 					dataTestId: "room-menu-edit-delete",
 				},
 			];
diff --git a/src/pages/course-rooms/tools/RoomExternalToolsSection.vue b/src/pages/course-rooms/tools/RoomExternalToolsSection.vue
index 5a93b35961..04c26d979f 100644
--- a/src/pages/course-rooms/tools/RoomExternalToolsSection.vue
+++ b/src/pages/course-rooms/tools/RoomExternalToolsSection.vue
@@ -23,6 +23,7 @@
 		<v-custom-dialog
 			:is-open="isDeleteDialogOpen"
 			:has-buttons="true"
+			confirmBtnTitleKey="common.actions.remove"
 			:buttons="['cancel', 'confirm']"
 			max-width="360"
 			data-testId="delete-dialog"

From 1fb2bc04d16cb814f4b401b8bb5dd22f4110db73 Mon Sep 17 00:00:00 2001
From: Uwe Ilgenstein <uwe.ilgenstein@dataport.de>
Date: Fri, 8 Nov 2024 15:31:28 +0100
Subject: [PATCH 2/3] BC-8187 - Create and use Boards in Rooms (#3436)

* add simple grid of room boards

* add board layout display

* implement board room creation

* add draft state to room tile

* fix board breadcrumbs

* fix tests

* re-generate api

---------

Co-authored-by: odalys-dataport <82401838+odalys-dataport@users.noreply.github.com>
---
 src/components/icons/material/index.ts        |   2 +
 src/locales/de.ts                             |   1 +
 src/locales/en.ts                             |   1 +
 src/locales/es.ts                             |   1 +
 src/locales/uk.ts                             |   1 +
 src/modules/data/board/BoardApi.composable.ts |  29 +++-
 .../data/board/BoardApi.composable.unit.ts    |  10 +-
 .../board/BoardPageInformation.composable.ts  |  81 +++++----
 src/modules/data/room/RoomDetails.store.ts    |   7 +-
 src/modules/feature/board/board/Board.unit.ts |   8 +-
 src/modules/feature/room/BoardGrid.vue        |  25 +++
 src/modules/feature/room/BoardTile.vue        |  85 +++++++++
 src/modules/feature/room/RoomDetails.vue      |  22 +--
 src/modules/page/room/RoomDetails.page.vue    | 108 +++++++++++-
 .../SidebarSelection.composable.unit.ts       |  38 ++---
 src/modules/ui/room-details/RoomBoardCard.vue |   5 +-
 .../room-details/SelectBoardLayoutDialog.vue  |   4 +-
 src/serverApi/v3/api.ts                       | 161 +++++++++++++++++-
 src/types/room/Room.ts                        |   2 +
 19 files changed, 501 insertions(+), 90 deletions(-)
 create mode 100644 src/modules/feature/room/BoardGrid.vue
 create mode 100644 src/modules/feature/room/BoardTile.vue

diff --git a/src/components/icons/material/index.ts b/src/components/icons/material/index.ts
index 5a910ee05a..df6eaf1fb1 100644
--- a/src/components/icons/material/index.ts
+++ b/src/components/icons/material/index.ts
@@ -136,6 +136,7 @@ import {
 	mdiTune,
 	mdiUndo,
 	mdiUndoVariant,
+	mdiViewAgendaOutline,
 	mdiViewDashboard,
 	mdiViewDashboardOutline,
 	mdiViewGridOutline,
@@ -280,6 +281,7 @@ export {
 	mdiTune,
 	mdiUndo,
 	mdiUndoVariant,
+	mdiViewAgendaOutline,
 	mdiViewDashboard,
 	mdiViewDashboardOutline,
 	mdiViewGridOutline,
diff --git a/src/locales/de.ts b/src/locales/de.ts
index bafe6927d6..37dd8d571e 100644
--- a/src/locales/de.ts
+++ b/src/locales/de.ts
@@ -1670,6 +1670,7 @@ export default {
 	"pages.roomDetails.ariaLabels.menu": "Raum-Menü",
 	"pages.roomDetails.ariaLabels.menu.action.edit": "Raum bearbeiten",
 	"pages.roomDetails.ariaLabels.menu.action.delete": "Raum löschen",
+	"pages.roomDetails.board.defaultName": "Raum-Bereich",
 	"pages.rooms.emptyState": "Aktuell gibt es hier noch keine Räume.",
 	"pages.rooms.fab.title": "Raum erstellen",
 	"pages.rooms.participant.error.load":
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 46fbf1909f..7cf97ba1fd 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -1642,6 +1642,7 @@ export default {
 	"pages.roomDetails.ariaLabels.menu": "Room menu",
 	"pages.roomDetails.ariaLabels.menu.action.edit": "Edit room",
 	"pages.roomDetails.ariaLabels.menu.action.delete": "Delete room",
+	"pages.roomDetails.board.defaultName": "Room Board",
 	"pages.rooms.emptyState": "Currently there are no rooms here.",
 	"pages.rooms.fab.title": "Create room",
 	"pages.rooms.participant.error.load":
diff --git a/src/locales/es.ts b/src/locales/es.ts
index 0789116020..371ea3996e 100644
--- a/src/locales/es.ts
+++ b/src/locales/es.ts
@@ -1686,6 +1686,7 @@ export default {
 	"pages.roomDetails.ariaLabels.menu": "Menú de la sala",
 	"pages.roomDetails.ariaLabels.menu.action.edit": "Editar sala",
 	"pages.roomDetails.ariaLabels.menu.action.delete": "Borrar sala",
+	"pages.roomDetails.board.defaultName": "Tablero de la sala",
 	"pages.rooms.emptyState": "Actualmente no hay salas aquí.",
 	"pages.rooms.fab.title": "Crear sala",
 	"pages.rooms.participant.error.load":
diff --git a/src/locales/uk.ts b/src/locales/uk.ts
index 0623e2c8e2..070e25a6b4 100644
--- a/src/locales/uk.ts
+++ b/src/locales/uk.ts
@@ -1664,6 +1664,7 @@ export default {
 	"pages.roomDetails.ariaLabels.menu": "Меню кімнати",
 	"pages.roomDetails.ariaLabels.menu.action.edit": "Кімната редагування",
 	"pages.roomDetails.ariaLabels.menu.action.delete": "Видалити кімнату",
+	"pages.roomDetails.board.defaultName": "Космічна дошка",
 	"pages.rooms.emptyState": "Зараз тут немає кімнат",
 	"pages.rooms.fab.title": "Створити кімнату",
 	"pages.rooms.participant.error.load":
diff --git a/src/modules/data/board/BoardApi.composable.ts b/src/modules/data/board/BoardApi.composable.ts
index 055bf46f22..f3e1d06ce2 100644
--- a/src/modules/data/board/BoardApi.composable.ts
+++ b/src/modules/data/board/BoardApi.composable.ts
@@ -15,6 +15,7 @@ import {
 	FileElementContentBody,
 	LinkElementContentBody,
 	RichTextElementContentBody,
+	RoomApiFactory,
 	SubmissionContainerElementContentBody,
 } from "@/serverApi/v3";
 import { BoardContextType } from "@/types/board/BoardContext";
@@ -29,7 +30,8 @@ export const useBoardApi = () => {
 	const cardsApi = BoardCardApiFactory(undefined, "/v3", $axios);
 	const elementApi = BoardElementApiFactory(undefined, "/v3", $axios);
 
-	const roomApi = CourseRoomsApiFactory(undefined, "/v3", $axios);
+	const roomApi = RoomApiFactory(undefined, "/v3", $axios);
+	const courseRoomApi = CourseRoomsApiFactory(undefined, "/v3", $axios);
 
 	const fetchBoardCall = async (id: string): Promise<BoardResponse> => {
 		try {
@@ -186,6 +188,19 @@ export const useBoardApi = () => {
 		});
 	};
 
+	const fetchRoomName = async (
+		type: BoardContextType,
+		id: string
+	): Promise<string | undefined> => {
+		const name =
+			type === BoardContextType.Room
+				? (await roomApi.roomControllerGetRoomDetails(id)).data.name
+				: (await courseRoomApi.courseRoomsControllerGetRoomBoard(id)).data
+						.title;
+
+		return name;
+	};
+
 	type ContextInfo = { id: string; type: BoardContextType; name: string };
 
 	const getContextInfo = async (
@@ -197,17 +212,17 @@ export const useBoardApi = () => {
 			return undefined;
 		}
 		const context = contextResponse.data;
-		const roomResponse = await roomApi.courseRoomsControllerGetRoomBoard(
-			context.id
-		);
 
-		if (roomResponse.status !== 200) {
+		const roomName = await fetchRoomName(context.type, context.id);
+
+		if (roomName === undefined) {
 			return undefined;
 		}
+
 		return {
-			id: roomResponse.data.roomId,
+			id: context.id,
 			type: context.type,
-			name: roomResponse.data.title,
+			name: roomName,
 		};
 	};
 
diff --git a/src/modules/data/board/BoardApi.composable.unit.ts b/src/modules/data/board/BoardApi.composable.unit.ts
index e260bf9713..2d6a275dd5 100644
--- a/src/modules/data/board/BoardApi.composable.unit.ts
+++ b/src/modules/data/board/BoardApi.composable.unit.ts
@@ -480,10 +480,11 @@ describe("BoardApi.composable", () => {
 			const { getContextInfo } = useBoardApi();
 
 			const FAKE_BOARD_ID = "MY_BOARD_ID123";
-			const FAKE_RESPONSE = {
+			const FAKE_CONTEXT_RESPONSE = {
 				status: 200,
 				data: {
 					id: "someid",
+					type: "course",
 				},
 			};
 
@@ -497,7 +498,7 @@ describe("BoardApi.composable", () => {
 
 			boardApi.boardControllerGetBoardContext = jest
 				.fn()
-				.mockResolvedValueOnce(FAKE_RESPONSE);
+				.mockResolvedValueOnce(FAKE_CONTEXT_RESPONSE);
 			roomsApi.courseRoomsControllerGetRoomBoard = jest
 				.fn()
 				.mockResolvedValueOnce(FAKE_ROOM_RESPONSE);
@@ -509,12 +510,13 @@ describe("BoardApi.composable", () => {
 			);
 
 			expect(roomsApi.courseRoomsControllerGetRoomBoard).toHaveBeenCalledWith(
-				FAKE_RESPONSE.data.id
+				FAKE_CONTEXT_RESPONSE.data.id
 			);
 
 			expect(result).toEqual(
 				expect.objectContaining({
-					id: FAKE_ROOM_RESPONSE.data.roomId,
+					id: FAKE_CONTEXT_RESPONSE.data.id,
+					type: FAKE_CONTEXT_RESPONSE.data.type,
 					name: FAKE_ROOM_RESPONSE.data.title,
 				})
 			);
diff --git a/src/modules/data/board/BoardPageInformation.composable.ts b/src/modules/data/board/BoardPageInformation.composable.ts
index 4612de5f09..f34c2a96d0 100644
--- a/src/modules/data/board/BoardPageInformation.composable.ts
+++ b/src/modules/data/board/BoardPageInformation.composable.ts
@@ -1,53 +1,72 @@
 import { Breadcrumb } from "@/components/templates/default-wireframe.types";
+import { BoardContextType } from "@/types/board/BoardContext";
 import { buildPageTitle } from "@/utils/pageTitle";
 import { createSharedComposable } from "@vueuse/core";
-import { ref, Ref } from "vue";
+import { computed, ref, unref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useBoardApi } from "./BoardApi.composable";
-import { BoardContextType } from "@/types/board/BoardContext";
 
 const useBoardPageInformation = () => {
 	const { t } = useI18n();
 
 	const { getContextInfo } = useBoardApi();
 
-	const getPageTitle = (courseName?: string): string => {
+	const boardContext = ref<Awaited<ReturnType<typeof getContextInfo>>>();
+
+	const pageTitle = computed(() => {
+		const courseName = boardContext.value?.name;
 		const courseNameForPageTitle = courseName ? ", " + courseName : "";
+
 		return buildPageTitle(
 			`${t("pages.room.boardCard.label.courseBoard")}${courseNameForPageTitle}`
 		);
-	};
+	});
+
+	const roomId = computed(() => boardContext.value?.id);
+	const contextType = computed(() => boardContext.value?.type);
+
+	const breadcrumbs = computed((): Breadcrumb[] => {
+		const id = unref(boardContext)?.id;
+		const type = unref(boardContext)?.type;
+		const name = unref(boardContext)?.name;
 
-	const pageTitle: Ref<string> = ref(getPageTitle());
-	const roomId: Ref<string | undefined> = ref(undefined);
-	const breadcrumbs: Ref<Breadcrumb[]> = ref([]);
-	const contextType: Ref<BoardContextType | undefined> = ref();
+		if (!id || !type) {
+			return [];
+		}
 
-	function getBreadcrumbs(
-		contextInfo: { id: string; name: string } | undefined
-	): Breadcrumb[] {
-		return contextInfo
-			? [
-					{
-						title: t("common.words.courses"),
-						to: "/rooms/courses-overview",
-						disabled: false,
-					},
-					{
-						title: contextInfo.name ?? t("common.labels.course"),
-						to: `/rooms/${contextInfo.id}`,
-						disabled: false,
-					},
-				]
-			: [];
-	}
+		if (type === BoardContextType.Course) {
+			return [
+				{
+					title: t("common.words.courses"),
+					to: "/rooms/courses-overview",
+					disabled: false,
+				},
+				{
+					title: name ?? t("common.labels.course"),
+					to: `/rooms/${id}`,
+					disabled: false,
+				},
+			];
+		}
+		if (type === BoardContextType.Room) {
+			return [
+				{
+					title: t("pages.rooms.title"),
+					to: "/rooms",
+					disabled: false,
+				},
+				{
+					title: name ?? t("common.labels.room"),
+					to: `/rooms/${id}`,
+					disabled: false,
+				},
+			];
+		}
+		return [];
+	});
 
 	const createPageInformation = async (id: string): Promise<void> => {
-		const contextInfo = await getContextInfo(id);
-		pageTitle.value = getPageTitle(contextInfo?.name);
-		breadcrumbs.value = getBreadcrumbs(contextInfo);
-		contextType.value = contextInfo?.type;
-		roomId.value = contextInfo?.id;
+		boardContext.value = await getContextInfo(id);
 	};
 
 	return {
diff --git a/src/modules/data/room/RoomDetails.store.ts b/src/modules/data/room/RoomDetails.store.ts
index 12b81cf0fb..02a288c5a0 100644
--- a/src/modules/data/room/RoomDetails.store.ts
+++ b/src/modules/data/room/RoomDetails.store.ts
@@ -1,4 +1,4 @@
-import { RoomDetails } from "@/types/room/Room";
+import { RoomBoardItem, RoomDetails } from "@/types/room/Room";
 import { ref } from "vue";
 import { defineStore } from "pinia";
 import { RoomApiFactory } from "@/serverApi/v3";
@@ -14,6 +14,7 @@ export const useRoomDetailsStore = defineStore("roomDetailsStore", () => {
 	const isLoading = ref(true);
 	const room = ref<RoomDetails>();
 	const roomVariant = ref<RoomVariant>();
+	const roomBoards = ref<RoomBoardItem[]>([]);
 
 	const roomApi = RoomApiFactory(undefined, "/v3", $axios);
 
@@ -21,6 +22,9 @@ export const useRoomDetailsStore = defineStore("roomDetailsStore", () => {
 		try {
 			room.value = (await roomApi.roomControllerGetRoomDetails(id)).data;
 			roomVariant.value = RoomVariant.ROOM;
+			roomBoards.value = (
+				await roomApi.roomControllerGetRoomBoards(id)
+			).data.data;
 		} catch (error) {
 			const responseError = mapAxiosErrorToResponseError(error);
 
@@ -51,5 +55,6 @@ export const useRoomDetailsStore = defineStore("roomDetailsStore", () => {
 		resetState,
 		room,
 		roomVariant,
+		roomBoards,
 	};
 });
diff --git a/src/modules/feature/board/board/Board.unit.ts b/src/modules/feature/board/board/Board.unit.ts
index 5f011d618b..425ae99558 100644
--- a/src/modules/feature/board/board/Board.unit.ts
+++ b/src/modules/feature/board/board/Board.unit.ts
@@ -148,10 +148,10 @@ describe("Board", () => {
 
 		mockedUseSharedBoardPageInformation.mockReturnValue({
 			createPageInformation: jest.fn(),
-			breadcrumbs: ref([]),
-			contextType: ref(),
-			pageTitle: ref("page-title"),
-			roomId: ref("room-id"),
+			breadcrumbs: computed(() => []),
+			contextType: computed(() => undefined),
+			pageTitle: computed(() => "page-title"),
+			roomId: computed(() => "room-id"),
 		});
 
 		mockedUseEditMode.mockReturnValue({
diff --git a/src/modules/feature/room/BoardGrid.vue b/src/modules/feature/room/BoardGrid.vue
new file mode 100644
index 0000000000..0439c5bdc0
--- /dev/null
+++ b/src/modules/feature/room/BoardGrid.vue
@@ -0,0 +1,25 @@
+<template>
+	<v-row class="mt-4" data-testid="board-grid">
+		<v-col
+			v-for="(board, index) in boards"
+			:key="board.id"
+			cols="12"
+			md="4"
+			xl="3"
+		>
+			<BoardTile :board="board" :index="index" />
+		</v-col>
+	</v-row>
+</template>
+
+<script setup lang="ts">
+import { RoomBoardItem } from "@/types/room/Room";
+import { PropType, toRef } from "vue";
+import BoardTile from "./BoardTile.vue";
+
+const props = defineProps({
+	boards: { type: Array as PropType<RoomBoardItem[]> },
+});
+
+const boards = toRef(props, "boards");
+</script>
diff --git a/src/modules/feature/room/BoardTile.vue b/src/modules/feature/room/BoardTile.vue
new file mode 100644
index 0000000000..48e747c211
--- /dev/null
+++ b/src/modules/feature/room/BoardTile.vue
@@ -0,0 +1,85 @@
+<template>
+	<VCard
+		class="board-tile pa-4"
+		:class="{ 'board-is-draft': isDraft }"
+		hover
+		:data-testid="`board-tile-${props.index}`"
+		:to="boardPath"
+	>
+		<VCardSubtitle
+			class="board-tile-subtitle"
+			:data-testid="`board-tile-subtitle-${props.index}`"
+		>
+			<VIcon size="14" class="mr-1" :icon="subtitleIcon" />
+			{{ subtitleText }}
+		</VCardSubtitle>
+		<VCardTitle
+			class="board-tile-title text-h6 my-2"
+			:data-testid="`board-tile-title-${props.index}`"
+		>
+			{{ board.title }}
+		</VCardTitle>
+	</VCard>
+</template>
+
+<script setup lang="ts">
+import { BoardLayout } from "@/serverApi/v3";
+import { RoomBoardItem } from "@/types/room/Room";
+import { mdiViewAgendaOutline, mdiViewDashboardOutline } from "@icons/material";
+import { computed, PropType, toRef } from "vue";
+import { useI18n } from "vue-i18n";
+
+const props = defineProps({
+	board: { type: Object as PropType<RoomBoardItem>, required: true },
+	index: { type: Number, required: true },
+});
+
+const { t } = useI18n();
+
+const board = toRef(props, "board");
+
+const isListBoard = computed(() => {
+	return board.value?.layout === BoardLayout.List;
+});
+
+const isDraft = computed(() => {
+	return board.value?.isVisible === false;
+});
+
+const subtitleIcon = computed(() => {
+	const icon = isListBoard.value
+		? mdiViewAgendaOutline
+		: mdiViewDashboardOutline;
+	return icon;
+});
+
+const subtitleText = computed(() => {
+	const text = isListBoard.value
+		? t("pages.room.boardCard.label.listBoard")
+		: t("pages.room.boardCard.label.columnBoard");
+
+	if (isDraft.value) {
+		const suffix = ` - ${t("common.words.draft")}`;
+		return text + suffix;
+	}
+	return text;
+});
+
+const boardPath = computed(() => {
+	return `/boards/${board.value.id}`;
+});
+</script>
+
+<style lang="scss" scoped>
+@import "@/styles/settings.scss";
+
+.board-tile {
+	background-color: map-get($grey, lighten-5);
+	border: 1px solid map-get($grey, lighten-2);
+
+	&.board-is-draft .board-tile-subtitle,
+	&.board-is-draft .board-tile-title {
+		opacity: 0.5;
+	}
+}
+</style>
diff --git a/src/modules/feature/room/RoomDetails.vue b/src/modules/feature/room/RoomDetails.vue
index 83e20d566d..943590ae5e 100644
--- a/src/modules/feature/room/RoomDetails.vue
+++ b/src/modules/feature/room/RoomDetails.vue
@@ -1,24 +1,18 @@
 <template>
-	<template v-if="room">
-		<div>
-			<!-- content goes here-->
-		</div>
-	</template>
+	<div class="room-details">
+		<BoardGrid :boards="roomBoards" />
+	</div>
 </template>
 
 <script setup lang="ts">
-import { RoomDetails } from "@/types/room/Room";
+import { RoomBoardItem, RoomDetails } from "@/types/room/Room";
 import { PropType, toRef } from "vue";
+import BoardGrid from "./BoardGrid.vue";
 
 const props = defineProps({
-	room: { type: Object as PropType<RoomDetails> },
+	room: { type: Object as PropType<RoomDetails>, required: true },
+	roomBoards: { type: Array as PropType<RoomBoardItem[]> },
 });
 
-const room = toRef(props, "room");
+const roomBoards = toRef(props, "roomBoards");
 </script>
-
-<style scoped>
-.margin-bottom {
-	margin-bottom: var(--space-md);
-}
-</style>
diff --git a/src/modules/page/room/RoomDetails.page.vue b/src/modules/page/room/RoomDetails.page.vue
index dbc3a04ca3..7f9fd61e01 100644
--- a/src/modules/page/room/RoomDetails.page.vue
+++ b/src/modules/page/room/RoomDetails.page.vue
@@ -2,7 +2,12 @@
 	<div v-if="isLoading" />
 	<template v-else>
 		<template v-if="isRoom">
-			<DefaultWireframe max-width="short" :breadcrumbs="breadcrumbs">
+			<DefaultWireframe
+				max-width="full"
+				:breadcrumbs="breadcrumbs"
+				:fabItems="fabItems"
+				@onFabItemClick="fabItemClickHandler"
+			>
 				<template #header v-if="room">
 					<div class="d-flex align-items-center">
 						<h1 class="text-h3 mb-4" data-testid="room-title">
@@ -60,8 +65,14 @@
 						</KebabMenu>
 					</div>
 				</template>
-				<RoomDetails :room="room" />
+				<RoomDetails v-if="room" :room="room" :room-boards="roomBoards" />
 				<ConfirmationDialog />
+				<SelectBoardLayoutDialog
+					v-if="boardLayoutsEnabled"
+					v-model="boardLayoutDialogIsOpen"
+					@select:multi-column="createBoard(BoardLayout.Columns)"
+					@select:single-column="createBoard(BoardLayout.List)"
+				/>
 			</DefaultWireframe>
 		</template>
 		<template v-else>
@@ -74,7 +85,11 @@
 import { Breadcrumb } from "@/components/templates/default-wireframe.types";
 import DefaultWireframe from "@/components/templates/DefaultWireframe.vue";
 import CourseRoomDetailsPage from "@/pages/course-rooms/CourseRoomDetails.page.vue";
-import { ENV_CONFIG_MODULE_KEY, injectStrict } from "@/utils/inject";
+import {
+	AUTH_MODULE_KEY,
+	ENV_CONFIG_MODULE_KEY,
+	injectStrict,
+} from "@/utils/inject";
 import { buildPageTitle } from "@/utils/pageTitle";
 import { RoomVariant, useRoomDetailsStore, useRoomsState } from "@data-room";
 import { RoomDetails } from "@feature-room";
@@ -88,19 +103,35 @@ import {
 	useDeleteConfirmationDialog,
 } from "@ui-confirmation-dialog";
 import { KebabMenu } from "@ui-kebab-menu";
+import { SelectBoardLayoutDialog } from "@ui-room-details";
 import { useTitle } from "@vueuse/core";
 import { storeToRefs } from "pinia";
-import { computed, ComputedRef, onUnmounted, watch } from "vue";
+import { computed, ComputedRef, onUnmounted, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRoute, useRouter } from "vue-router";
+import {
+	mdiPlus,
+	mdiViewGridPlusOutline,
+	mdiViewDashboardOutline,
+} from "@icons/material";
+import {
+	BoardApiFactory,
+	BoardLayout,
+	BoardParentType,
+	CreateBoardBodyParams,
+	ImportUserResponseRoleNamesEnum as Roles,
+} from "@/serverApi/v3";
+import { $axios } from "@/utils/api";
 
 const envConfigModule = injectStrict(ENV_CONFIG_MODULE_KEY);
+const authModule = injectStrict(AUTH_MODULE_KEY);
 
 const route = useRoute();
 const router = useRouter();
 
 const roomDetailsStore = useRoomDetailsStore();
-const { isLoading, room, roomVariant } = storeToRefs(roomDetailsStore);
+const { isLoading, room, roomVariant, roomBoards } =
+	storeToRefs(roomDetailsStore);
 const { deactivateRoom, fetchRoom, resetState } = roomDetailsStore;
 
 const { t } = useI18n();
@@ -128,6 +159,73 @@ const breadcrumbs: ComputedRef<Breadcrumb[]> = computed(() => {
 	return [];
 });
 
+const boardLayoutsEnabled = computed(
+	() => envConfigModule.getEnv.FEATURE_BOARD_LAYOUT_ENABLED
+);
+
+const boardLayoutDialogIsOpen = ref(false);
+
+const createBoard = async (layout: BoardLayout) => {
+	if (!room.value) return;
+
+	const boardApi = BoardApiFactory(undefined, "/v3", $axios);
+
+	const params: CreateBoardBodyParams = {
+		title: t("pages.roomDetails.board.defaultName"),
+		parentId: room.value.id,
+		parentType: BoardParentType.Room,
+		layout,
+	};
+	const boardId = (await boardApi.boardControllerCreateBoard(params)).data.id;
+
+	router.push(`/boards/${boardId}`);
+};
+
+const fabItems = computed(() => {
+	const actions = [];
+	// TODO refine permissions
+	if (
+		authModule.getUserPermissions.includes("COURSE_EDIT".toLowerCase()) &&
+		authModule.getUserRoles.includes(Roles.Teacher)
+	) {
+		if (boardLayoutsEnabled.value) {
+			actions.push({
+				label: t("pages.courseRoomDetails.fab.add.board"),
+				icon: mdiViewGridPlusOutline,
+				customEvent: "board-type-dialog-open",
+				dataTestId: "fab_button_add_board",
+				ariaLabel: t("pages.courseRoomDetails.fab.add.board"),
+			});
+		} else {
+			actions.push({
+				label: t("pages.courseRoomDetails.fab.add.columnBoard"),
+				icon: mdiViewDashboardOutline,
+				customEvent: "board-create",
+				dataTestId: "fab_button_add_column_board",
+				ariaLabel: t("pages.courseRoomDetails.fab.add.columnBoard"),
+			});
+		}
+	}
+
+	const items = {
+		icon: mdiPlus,
+		title: t("common.actions.create"),
+		ariaLabel: t("common.actions.create"),
+		dataTestId: "add-content-button",
+		actions: actions,
+	};
+
+	return items;
+});
+
+const fabItemClickHandler = (event: string) => {
+	if (event === "board-type-dialog-open") {
+		boardLayoutDialogIsOpen.value = true;
+	} else if (event === "board-create") {
+		createBoard(BoardLayout.Columns);
+	}
+};
+
 watch(
 	() => route.params.id,
 	async () => {
diff --git a/src/modules/ui/layout/sidebar/SidebarSelection.composable.unit.ts b/src/modules/ui/layout/sidebar/SidebarSelection.composable.unit.ts
index fa3cffabc3..bce6e8b3f0 100644
--- a/src/modules/ui/layout/sidebar/SidebarSelection.composable.unit.ts
+++ b/src/modules/ui/layout/sidebar/SidebarSelection.composable.unit.ts
@@ -1,13 +1,13 @@
+import { BoardContextType } from "@/types/board/BoardContext";
+import { useSharedBoardPageInformation } from "@data-board";
+import { RoomVariant, useRoomDetailsStore } from "@data-room";
+import { createMock } from "@golevelup/ts-jest";
+import { createTestingPinia } from "@pinia/testing";
+import { setActivePinia, storeToRefs } from "pinia";
+import { computed } from "vue";
 import { RouteLocationNormalized, useRoute } from "vue-router";
 import { SidebarSingleItem } from "../types";
 import { useSidebarSelection } from "./SidebarSelection.composable";
-import { createMock } from "@golevelup/ts-jest";
-import { setActivePinia, storeToRefs } from "pinia";
-import { createTestingPinia } from "@pinia/testing";
-import { useSharedBoardPageInformation } from "@data-board";
-import { ref } from "vue";
-import { RoomVariant, useRoomDetailsStore } from "@data-room";
-import { BoardContextType } from "@/types/board/BoardContext";
 
 jest.mock("vue-router");
 const useRouteMock = <jest.Mock>useRoute;
@@ -29,10 +29,10 @@ describe("@ui/layout/sidebar/SidebarSelection.composable", () => {
 
 		mockedUseSharedBoardPageInformation.mockReturnValue({
 			createPageInformation: jest.fn(),
-			breadcrumbs: ref([]),
-			contextType: ref(),
-			pageTitle: ref("page-title"),
-			roomId: ref("room-id"),
+			breadcrumbs: computed(() => []),
+			contextType: computed(() => undefined),
+			pageTitle: computed(() => "page-title"),
+			roomId: computed(() => "room-id"),
 		});
 	});
 
@@ -260,10 +260,10 @@ describe("@ui/layout/sidebar/SidebarSelection.composable", () => {
 				const setupCourseContext = () => {
 					mockedUseSharedBoardPageInformation.mockReturnValue({
 						createPageInformation: jest.fn(),
-						breadcrumbs: ref([]),
-						contextType: ref(BoardContextType.Course),
-						pageTitle: ref("page-title"),
-						roomId: ref("room-id"),
+						breadcrumbs: computed(() => []),
+						contextType: computed(() => BoardContextType.Course),
+						pageTitle: computed(() => "page-title"),
+						roomId: computed(() => "room-id"),
 					});
 
 					return setupBoardDetailsRoute();
@@ -281,10 +281,10 @@ describe("@ui/layout/sidebar/SidebarSelection.composable", () => {
 				const setupUserContext = () => {
 					mockedUseSharedBoardPageInformation.mockReturnValue({
 						createPageInformation: jest.fn(),
-						breadcrumbs: ref([]),
-						contextType: ref(BoardContextType.User),
-						pageTitle: ref("page-title"),
-						roomId: ref("room-id"),
+						breadcrumbs: computed(() => []),
+						contextType: computed(() => BoardContextType.User),
+						pageTitle: computed(() => "page-title"),
+						roomId: computed(() => "room-id"),
 					});
 
 					return setupBoardDetailsRoute();
diff --git a/src/modules/ui/room-details/RoomBoardCard.vue b/src/modules/ui/room-details/RoomBoardCard.vue
index 84ac1983f4..31853f306c 100644
--- a/src/modules/ui/room-details/RoomBoardCard.vue
+++ b/src/modules/ui/room-details/RoomBoardCard.vue
@@ -67,6 +67,7 @@ import {
 	mdiShareVariantOutline,
 	mdiTrashCanOutline,
 	mdiUndoVariant,
+	mdiViewAgendaOutline,
 	mdiViewDashboardOutline,
 } from "@icons/material";
 import {
@@ -129,7 +130,9 @@ const isListBoard = computed(() => {
 });
 
 const titleIcon = computed(() => {
-	const icon = isListBoard.value ? "$gridOutline" : mdiViewDashboardOutline;
+	const icon = isListBoard.value
+		? mdiViewAgendaOutline
+		: mdiViewDashboardOutline;
 	return icon;
 });
 
diff --git a/src/modules/ui/room-details/SelectBoardLayoutDialog.vue b/src/modules/ui/room-details/SelectBoardLayoutDialog.vue
index f14fd8fc77..0357e63671 100644
--- a/src/modules/ui/room-details/SelectBoardLayoutDialog.vue
+++ b/src/modules/ui/room-details/SelectBoardLayoutDialog.vue
@@ -36,7 +36,7 @@
 import { useI18n } from "vue-i18n";
 import { PickerOption } from "./types";
 import { ExtendedIconBtn } from "@ui-extended-icon-btn";
-import { mdiViewDashboardOutline } from "@icons/material";
+import { mdiViewAgendaOutline, mdiViewDashboardOutline } from "@icons/material";
 
 const { t } = useI18n();
 
@@ -50,7 +50,7 @@ const boardLayouts: PickerOption[] = [
 	},
 	{
 		label: t("pages.room.dialog.boardLayout.singleColumn"),
-		icon: "$gridOutline",
+		icon: mdiViewAgendaOutline,
 		eventName: "select:single-column",
 		dataTestId: "dialog-add-single-column-board",
 		ariaLabel: t("pages.room.dialog.boardLayout.singleColumn"),
diff --git a/src/serverApi/v3/api.ts b/src/serverApi/v3/api.ts
index 71529d8a49..8eca4a4509 100644
--- a/src/serverApi/v3/api.ts
+++ b/src/serverApi/v3/api.ts
@@ -504,10 +504,10 @@ export interface BoardColumnBoardResponse {
     columnBoardId: string;
     /**
      * 
-     * @type {string}
+     * @type {BoardLayout}
      * @memberof BoardColumnBoardResponse
      */
-    layout: string;
+    layout: BoardLayout;
 }
 /**
  * 
@@ -565,6 +565,7 @@ export enum BoardElementResponseTypeEnum {
  */
 export enum BoardExternalReferenceType {
     Course = 'course',
+    Room = 'room',
     User = 'user'
 }
 
@@ -647,6 +648,7 @@ export interface BoardLessonResponse {
  */
 export enum BoardParentType {
     Course = 'course',
+    Room = 'room',
     User = 'user'
 }
 
@@ -6845,6 +6847,80 @@ export enum RoleName {
     User = 'user'
 }
 
+/**
+ * 
+ * @export
+ * @interface RoomBoardItemResponse
+ */
+export interface RoomBoardItemResponse {
+    /**
+     * 
+     * @type {string}
+     * @memberof RoomBoardItemResponse
+     */
+    id: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof RoomBoardItemResponse
+     */
+    title: string;
+    /**
+     * 
+     * @type {BoardLayout}
+     * @memberof RoomBoardItemResponse
+     */
+    layout: BoardLayout;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof RoomBoardItemResponse
+     */
+    isVisible: boolean;
+    /**
+     * 
+     * @type {string}
+     * @memberof RoomBoardItemResponse
+     */
+    createdAt: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof RoomBoardItemResponse
+     */
+    updatedAt: string;
+}
+/**
+ * 
+ * @export
+ * @interface RoomBoardListResponse
+ */
+export interface RoomBoardListResponse {
+    /**
+     * The items for the current page.
+     * @type {Array<RoomBoardItemResponse>}
+     * @memberof RoomBoardListResponse
+     */
+    data: Array<RoomBoardItemResponse>;
+    /**
+     * The total amount of items.
+     * @type {number}
+     * @memberof RoomBoardListResponse
+     */
+    total: number;
+    /**
+     * The amount of items skipped from the start.
+     * @type {number}
+     * @memberof RoomBoardListResponse
+     */
+    skip: number;
+    /**
+     * The page size of the response.
+     * @type {number}
+     * @memberof RoomBoardListResponse
+     */
+    limit: number;
+}
 /**
  * 
  * @export
@@ -20023,6 +20099,44 @@ export const RoomApiAxiosParamCreator = function (configuration?: Configuration)
 
 
     
+            setSearchParams(localVarUrlObj, localVarQueryParameter, options.query);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @summary Get the boards of a room
+         * @param {string} roomId 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        roomControllerGetRoomBoards: async (roomId: string, options: any = {}): Promise<RequestArgs> => {
+            // verify required parameter 'roomId' is not null or undefined
+            assertParamExists('roomControllerGetRoomBoards', 'roomId', roomId)
+            const localVarPath = `/rooms/{roomId}/boards`
+                .replace(`{${"roomId"}}`, encodeURIComponent(String(roomId)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
             setSearchParams(localVarUrlObj, localVarQueryParameter, options.query);
             let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
             localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
@@ -20257,6 +20371,17 @@ export const RoomApiFp = function(configuration?: Configuration) {
             const localVarAxiosArgs = await localVarAxiosParamCreator.roomControllerGetMembers(roomId, options);
             return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
         },
+        /**
+         * 
+         * @summary Get the boards of a room
+         * @param {string} roomId 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async roomControllerGetRoomBoards(roomId: string, options?: any): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<RoomBoardListResponse>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.roomControllerGetRoomBoards(roomId, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
         /**
          * 
          * @summary Get the details of a room
@@ -20355,6 +20480,16 @@ export const RoomApiFactory = function (configuration?: Configuration, basePath?
         roomControllerGetMembers(roomId: string, options?: any): AxiosPromise<RoomMemberListResponse> {
             return localVarFp.roomControllerGetMembers(roomId, options).then((request) => request(axios, basePath));
         },
+        /**
+         * 
+         * @summary Get the boards of a room
+         * @param {string} roomId 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        roomControllerGetRoomBoards(roomId: string, options?: any): AxiosPromise<RoomBoardListResponse> {
+            return localVarFp.roomControllerGetRoomBoards(roomId, options).then((request) => request(axios, basePath));
+        },
         /**
          * 
          * @summary Get the details of a room
@@ -20448,6 +20583,16 @@ export interface RoomApiInterface {
      */
     roomControllerGetMembers(roomId: string, options?: any): AxiosPromise<RoomMemberListResponse>;
 
+    /**
+     * 
+     * @summary Get the boards of a room
+     * @param {string} roomId 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof RoomApiInterface
+     */
+    roomControllerGetRoomBoards(roomId: string, options?: any): AxiosPromise<RoomBoardListResponse>;
+
     /**
      * 
      * @summary Get the details of a room
@@ -20549,6 +20694,18 @@ export class RoomApi extends BaseAPI implements RoomApiInterface {
         return RoomApiFp(this.configuration).roomControllerGetMembers(roomId, options).then((request) => request(this.axios, this.basePath));
     }
 
+    /**
+     * 
+     * @summary Get the boards of a room
+     * @param {string} roomId 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof RoomApi
+     */
+    public roomControllerGetRoomBoards(roomId: string, options?: any) {
+        return RoomApiFp(this.configuration).roomControllerGetRoomBoards(roomId, options).then((request) => request(this.axios, this.basePath));
+    }
+
     /**
      * 
      * @summary Get the details of a room
diff --git a/src/types/room/Room.ts b/src/types/room/Room.ts
index 8ad9a1079c..71cef7d891 100644
--- a/src/types/room/Room.ts
+++ b/src/types/room/Room.ts
@@ -1,5 +1,6 @@
 import {
 	CreateRoomBodyParams,
+	RoomBoardItemResponse,
 	RoomDetailsResponse,
 	RoomItemResponse,
 	UpdateRoomBodyParams,
@@ -7,6 +8,7 @@ import {
 
 export type RoomItem = RoomItemResponse;
 export type RoomDetails = RoomDetailsResponse;
+export type RoomBoardItem = RoomBoardItemResponse;
 
 export type RoomCreateParams = CreateRoomBodyParams;
 export type RoomUpdateParams = UpdateRoomBodyParams;

From e85ec462a81a32144f52ea3ff3a7952051d7e11e Mon Sep 17 00:00:00 2001
From: NFriedo <69233063+NFriedo@users.noreply.github.com>
Date: Mon, 11 Nov 2024 13:54:44 +0100
Subject: [PATCH 3/3] BC-8357 - add mobile view for participants data table 
 (#3441)

Adds a data-table mobile view for devices <600px for the manage participants table in rooms.

* add mobile view for participants table
* make table header bold for mobile view
---
 .../feature/room/RoomParticipants/ParticipantsTable.vue  | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/modules/feature/room/RoomParticipants/ParticipantsTable.vue b/src/modules/feature/room/RoomParticipants/ParticipantsTable.vue
index e9c33368fa..e188f7e584 100644
--- a/src/modules/feature/room/RoomParticipants/ParticipantsTable.vue
+++ b/src/modules/feature/room/RoomParticipants/ParticipantsTable.vue
@@ -31,6 +31,8 @@
 				t('pages.rooms.participants.participantTable.itemsPerPage')
 			"
 			:no-data-text="t('common.nodata')"
+			:mobile="null"
+			mobile-breakpoint="sm"
 			@update:current-items="onUpdateFilter"
 		>
 			<template #[`item.actions`]="{ item }">
@@ -109,8 +111,13 @@ const tableHeader = [
 </script>
 
 <style lang="scss" scoped>
-:deep .v-data-table-header__content {
+:deep(.v-data-table-header__content) {
 	color: rgba(var(--v-theme-primary-darken-1));
 	font-weight: bold;
 }
+
+/* table header for mobile view */
+:deep(.v-data-table__td-title) {
+	font-weight: bold;
+}
 </style>