Improve room selector modal

- Use NcListItem component for consistency and accesibility
- Use modal size `small` as the selector is unccessarily large

Signed-off-by: fenn-cs <fenn25.fn@gmail.com>

src/components/RoomSelector.vue

@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<NcModal size="normal"
+	<NcModal :size="'small'"
 		:container="container"
 		@close="close">
 		<div id="modal-inner" class="talk-modal" :class="{ 'icon-loading': loading }">
@@ -42,13 +42,22 @@
 				</NcTextField>
 				<div id="room-list">
 					<ul v-if="!loading && availableRooms.length > 0">
-						<li v-for="room in availableRooms"
+						<NcListItem v-for="room in availableRooms"
 							:key="room.token"
-							:class="{selected: selectedRoom === room.token }"
+							:name="room.displayName"
+							:bold="false"
+							:active="selectedRoom === room.token"
+							:details="'1hr'"
+							:counter-number="room.unreadMessages"
+							counter-type="highlighted"
 							@click="selectedRoom=room.token">
-							<ConversationIcon :item="room" :hide-favorite="false" />
-							<span>{{ room.displayName }}</span>
-						</li>
+							<template #icon>
+								<ConversationIcon :item="room" :hide-favorite="false" />
+							</template>
+							<template #subname>
+								{{ room.lastMessage.message }}
+							</template>
+						</NcListItem>
 					</ul>
 					<div v-else-if="!loading" class="no-match-message">
 						<h2 class="no-match-title">
@@ -76,6 +85,7 @@
 import Magnify from 'vue-material-design-icons/Magnify.vue'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js'
 import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
@@ -88,6 +98,7 @@ export default {
 	name: 'RoomSelector',
 	components: {
 		ConversationIcon,
+		NcListItem,
 		NcModal,
 		NcButton,
 		NcTextField,
@@ -258,31 +269,6 @@ export default {
 	font-weight: normal;
 }
 
-li {
-	padding: 6px;
-	border: 1px solid transparent;
-	display: flex;
-
-	&:hover,
-	&:focus {
-		background-color: var(--color-background-dark);
-		border-radius: var(--border-radius-pill);
-	}
-
-	&.selected {
-		background-color: var(--color-primary-element-light);
-		border-radius: var(--border-radius-pill);
-	}
-
-	& > span {
-		padding: 8px 5px 8px 10px;
-		vertical-align: middle;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		overflow: hidden;
-	}
-}
-
 #modal-buttons {
 	overflow: hidden;
 	flex-shrink: 0;