Improve new group conversation modal

src/components/ConversationSettings/ListableSettings.vue

@@ -22,29 +22,22 @@
 <template>
 	<div class="app-settings-subsection">
 		<div>
-			<input id="listable_settings_registered_users_checkbox"
-				aria-describedby="listable_settings_listable_conversation_hint"
-				type="checkbox"
-				class="checkbox"
-				name="listable_settings_registered_users_checkbox"
-				:checked="listable !== LISTABLE.NONE"
+			<NcCheckboxRadioSwitch :checked="listable !== LISTABLE.NONE"
 				:disabled="isListableLoading"
-				@change="toggleListableUsers">
-			<label for="listable_settings_registered_users_checkbox">{{ t('spreed', 'Open conversation to registered users') }}</label>
+				@update:checked="toggleListableUsers">
+				{{ t('spreed', 'Open conversation to registered users') }}
+			</NcCheckboxRadioSwitch>
 		</div>
 		<div v-if="listable !== LISTABLE.NONE" class="indent">
 			<div id="moderation_settings_listable_conversation_hint" class="app-settings-section__hint">
 				{{ t('spreed', 'This conversation will be shown in search results') }}
 			</div>
 			<div v-if="listable !== LISTABLE.NONE && isGuestsAccountsEnabled">
-				<input id="listable_settings_guestapp_users_checkbox"
-					type="checkbox"
-					class="checkbox"
-					name="listable_settings_guestapp_users_checkbox"
-					:checked="listable === LISTABLE.ALL"
+				<NcCheckboxRadioSwitch :checked="listable === LISTABLE.ALL"
 					:disabled="isListableLoading"
-					@change="toggleListableGuests">
-				<label for="listable_settings_guestapp_users_checkbox">{{ t('spreed', 'Also open to guest app users') }}</label>
+					@update:checked="toggleListableGuests">
+					{{ t('spreed', 'Also open to guest app users') }}
+				</NcCheckboxRadioSwitch>
 			</div>
 		</div>
 	</div>
@@ -54,10 +47,15 @@
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { CONVERSATION } from '../../constants.js'
 import { loadState } from '@nextcloud/initial-state'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 
 export default {
 	name: 'ListableSettings',
 
+	components: {
+		NcCheckboxRadioSwitch,
+	},
+
 	props: {
 		token: {
 			type: String,
@@ -108,12 +106,12 @@ export default {
 	},
 
 	methods: {
-		async toggleListableUsers(event) {
-			await this.saveListable(event.target.checked ? this.LISTABLE.USERS : this.LISTABLE.NONE)
+		async toggleListableUsers(checked) {
+			await this.saveListable(checked ? this.LISTABLE.USERS : this.LISTABLE.NONE)
 		},
 
-		async toggleListableGuests(input) {
-			await this.saveListable(event.target.checked ? this.LISTABLE.ALL : this.LISTABLE.USERS)
+		async toggleListableGuests(checked) {
+			await this.saveListable(checked ? this.LISTABLE.ALL : this.LISTABLE.USERS)
 		},
 
 		async saveListable(listable) {

src/components/LeftSidebar/LeftSidebar.vue

@@ -514,7 +514,8 @@ export default {
 
 .new-conversation {
 	display: flex;
-	padding: 8px 8px 8px 4px;
+	padding: 4px;
+	align-items: center;
 	&--scrolled-down {
 		border-bottom: 1px solid var(--color-border);
 	}

src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue

@@ -38,22 +38,22 @@
 			@close="closeModal">
 			<!-- Wrapper for content & navigation -->
 			<div class="new-group-conversation talk-modal">
+				<h2>{{ t('spreed', 'Create a new group conversation') }}</h2>
 				<!-- Content -->
 				<div class="new-group-conversation__content">
 					<!-- First page -->
 					<template v-if="page === 0">
 						<SetConversationName v-model="conversationNameInput"
 							@click-enter="handleEnter" />
-						<SetConversationType v-model="isPublic"
-							:conversation-name="conversationName" />
+						<NcCheckboxRadioSwitch :checked.sync="isPublic">
+							{{ t('spreed', 'Allow guests to join via link') }}
+						</NcCheckboxRadioSwitch>
 						<!-- Password protection -->
 						<template v-if="isPublic">
-							<input id="password-checkbox"
-								type="checkbox"
-								class="checkbox"
-								:checked="passwordProtect"
-								@input="handleCheckboxInput">
-							<label for="password-checkbox">{{ t('spreed', 'Password protect') }}</label>
+							<NcCheckboxRadioSwitch :checked.sync="passwordProtect"
+								@checked="handleCheckboxInput">
+								{{ t('spreed', 'Password protect') }}
+							</NcCheckboxRadioSwitch>
 							<PasswordProtect v-if="passwordProtect"
 								v-model="password" />
 						</template>
@@ -118,13 +118,13 @@
 <script>
 
 import { CONVERSATION } from '../../../constants.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import SetContacts from './SetContacts/SetContacts.vue'
 import SetConversationName from './SetConversationName/SetConversationName.vue'
-import SetConversationType from './SetConversationType/SetConversationType.vue'
 import Confirmation from './Confirmation/Confirmation.vue'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import { addParticipant } from '../../../services/participantsService.js'
 import {
 	createPublicConversation,
@@ -151,8 +151,8 @@ export default {
 		NcModal,
 		SetContacts,
 		SetConversationName,
-		SetConversationType,
 		NcButton,
+		NcCheckboxRadioSwitch,
 		Confirmation,
 		PasswordProtect,
 		ListableSettings,
@@ -391,6 +391,9 @@ export default {
 	position: relative;
 	&__content {
 		height: calc(100% - 50px);
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
 	}
 }
 
@@ -415,18 +418,12 @@ it back */
 	}
 }
 
-.wrapper {
-	margin: auto;
-}
-
 ::v-deep .app-settings-section__hint {
 	color: var(--color-text-lighter);
 	padding: 8px 0;
 }
 
 ::v-deep .app-settings-subsection {
-	margin-top: 25px;
-
 	&:first-child {
 		margin-top: 0;
 	}

src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue

@@ -22,14 +22,14 @@
 <template>
 	<div class="set-contacts">
 		<!-- Search -->
-		<div class="icon-search" />
-		<input ref="setContacts"
+		<NcTextField ref="setContacts"
 			v-model="searchText"
 			v-observe-visibility="visibilityChanged"
-			class="set-contacts__input"
 			type="text"
 			:placeholder="t('spreed', 'Search participants')"
 			@input="handleInput">
+			<Magnify :size="16" />
+		</NcTextField>
 		<NcButton v-if="isSearching"
 			class="abort-search"
 			type="tertiary-no-background"
@@ -60,7 +60,9 @@
 
 <script>
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 import Close from 'vue-material-design-icons/Close.vue'
+import Magnify from 'vue-material-design-icons/Magnify.vue'
 import CancelableRequest from '../../../../utils/cancelableRequest.js'
 import debounce from 'debounce'
 import { showError } from '@nextcloud/dialogs'
@@ -75,6 +77,8 @@ export default {
 		Close,
 		ParticipantSearchResults,
 		ContactSelectionBubble,
+		NcTextField,
+		Magnify,
 	},
 
 	props: {
@@ -184,7 +188,7 @@ export default {
 			}
 		},
 		focusInput() {
-			this.$refs.setContacts.focus()
+			this.$refs.setContacts.$el.focus()
 		},
 	},
 }
@@ -197,14 +201,6 @@ export default {
 	display: flex;
 	flex-direction: column;
 	overflow: hidden;
-	&__input {
-		width: 100%;
-		font-size: 16px;
-		padding-left: 28px;
-		line-height: 34px;
-		box-shadow: 0 10px 5px var(--color-main-background);
-		z-index: 1;
-	}
 	&__icon {
 		margin-top: 40px;
 	}
@@ -232,13 +228,6 @@ export default {
 	align-content: flex-start;
 }
 
-.icon-search {
-	position: absolute;
-	top: 12px;
-	left: 8px;
-	z-index: 2;
-}
-
 .zoom-enter-active {
 	animation: zoom-in var(--animation-quick);
 }

src/components/LeftSidebar/NewGroupConversation/SetConversationName/SetConversationName.vue

@@ -21,21 +21,25 @@
 
 <template>
 	<div class="set-conversation-name">
-		<input ref="conversationName"
+		<NcTextField ref="conversationName"
 			v-observe-visibility="visibilityChanged"
 			type="text"
 			:value="value"
-			class="conversation-name"
 			:placeholder="t('spreed', 'Conversation name')"
 			@input="handleInput"
 			@keydown.enter="handleKeydown">
+		</NcTextField>
 	</div>
 </template>
 
 <script>
+import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 export default {
 	name: 'SetConversationName',
+	components: {
+		NcTextField,
+	},
 	props: {
 		value: {
 			type: String,