fix: import

src/components/AppNavigation/ContactsSettings.vue

@@ -22,10 +22,7 @@
 					@update:model-value="toggleSocialSync" />
 			</NcFormBox>
 
-			<SettingsImportContacts
-				:addressbooks="addressbooks"
-				@clicked="onClickImport"
-				@file-loaded="onLoad" />
+			<SettingsImportContacts />
 		</AppSettingsSection>
 
 		<AppSettingsSection id="address-books" :name="t('contacts', 'Address books')">
@@ -93,7 +90,7 @@
 	watch: {
 		showSettings(value) {
 			if (!value) {
 				this.$emit('update:open', value)
 			}
 		},
 
@@ -105,10 +102,6 @@
 	},
 
 	methods: {
-		onClickImport(event) {
-			this.$emit('clicked', event)
-		},
-
 		async toggleSocialSync(value) {
 			this.enableSocialSyncLoading = true
 
@@ -126,10 +119,6 @@
 			}
 		},
 
-		onLoad() {
-			this.$emit('file-loaded', false)
-		},
-
 		async onOpen() {
 			this.showSettings = true
 		},

src/components/AppNavigation/Settings/ImportScreen.vue

@@ -0,0 +1,168 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<Modal
+		class="import-modal"
+		size="normal"
+		:name="t('contacts', 'Import destination selection')"
+		@close="cancelImport">
+		<template v-if="isSelecting">
+			<transition-group class="import-modal__file-list" tag="ul">
+				<ImportScreenRow v-for="entry in entries" :key="`import-file-${entry.file.id}`" :entry="entry" />
+			</transition-group>
+
+			<div class="import-modal__actions">
+				<NcButton @click="cancelImport">
+					{{ t('contacts', 'Cancel') }}
+				</NcButton>
+				<NcButton variant="primary" @click="importContacts">
+					<template #icon>
+						<Upload :size="20" />
+					</template>
+					{{ n('contacts', 'Import contacts', 'Import contacts', entries.length) }}
+				</NcButton>
+			</div>
+		</template>
+
+		<template v-else>
+			<h4 class="import-modal__title">
+				{{ activeFileLabel }}
+			</h4>
+
+			<NcProgressBar class="import-modal__progress-bar" :value="progressValue" size="medium" />
+
+			<div class="import-modal__counters">
+				<NcNoteCard type="info">
+					<strong>{{ totals.discovered }}</strong> {{ t('contacts', 'Discovered') }}
+				</NcNoteCard>
+				<NcNoteCard type="info">
+					<strong>{{ totals.processed }}</strong> {{ t('contacts', 'Processed') }}
+				</NcNoteCard>
+				<NcNoteCard type="success">
+					<strong>{{ totals.created }}</strong> {{ t('contacts', 'Created') }}
+				</NcNoteCard>
+				<NcNoteCard type="info">
+					<strong>{{ totals.updated }}</strong> {{ t('contacts', 'Updated') }}
+				</NcNoteCard>
+				<NcNoteCard type="warning">
+					<strong>{{ totals.exists }}</strong> {{ t('contacts', 'Skipped') }}
+				</NcNoteCard>
+				<NcNoteCard type="error">
+					<strong>{{ totals.error }}</strong> {{ t('contacts', 'Errors') }}
+				</NcNoteCard>
+			</div>
+		</template>
+	</Modal>
+</template>
+
+<script>
+import { NcModal as Modal, NcButton, NcNoteCard, NcProgressBar } from '@nextcloud/vue'
+import Upload from 'vue-material-design-icons/TrayArrowUp.vue'
+import ImportScreenRow from './ImportScreenRow.vue'
+
+export default {
+	name: 'ImportScreen',
+	components: {
+		NcButton,
+		NcNoteCard,
+		NcProgressBar,
+		ImportScreenRow,
+		Modal,
+		Upload,
+	},
+
+	props: {
+		entries: {
+			type: Array,
+			required: true,
+		},
+
+		stage: {
+			type: String,
+			required: true,
+		},
+
+		totals: {
+			type: Object,
+			required: true,
+		},
+
+		activeSession: {
+			type: Object,
+			default: null,
+		},
+	},
+
+	emits: ['cancelImport', 'importContacts'],
+
+	computed: {
+		isSelecting() {
+			return this.stage === 'selecting'
+		},
+
+		progressValue() {
+			return Math.round(this.totals.processed / Math.max(this.totals.discovered, 1) * 100)
+		},
+
+		activeFileLabel() {
+			if (!this.activeSession) {
+				return t('contacts', 'Preparing import…')
+			}
+
+			return t('contacts', 'Importing {fileName} into {addressbook}', {
+				fileName: this.activeSession.fileName,
+				addressbook: this.activeSession.targetDisplayName || t('contacts', 'selected address book'),
+			})
+		},
+	},
+
+	methods: {
+		importContacts() {
+			this.$emit('importContacts')
+		},
+
+		cancelImport() {
+			this.$emit('cancelImport')
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.import-modal {
+	&__file-list {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+		padding: 12px;
+		margin: 0;
+	}
+
+	&__actions {
+		display: flex;
+		justify-content: flex-end;
+		gap: 8px;
+		padding: 12px;
+	}
+
+	&__title {
+		padding: 12px 12px 0;
+		text-align: center;
+	}
+
+	&__progress-bar {
+		margin: 12px;
+		width: calc(100% - 24px);
+	}
+
+	&__counters {
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+		gap: 8px;
+		padding: 12px;
+	}
+}
+</style>

src/components/AppNavigation/Settings/ImportScreenRow.vue

@@ -0,0 +1,192 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<li class="import-modal-file-item">
+		<NcFormGroup :label="t('contacts', 'Address book to import into')">
+			<NcFormBox v-slot="{ itemClass }">
+				<NcFormBoxCopyButton :class="itemClass" :label="t('contacts', 'File')" :value="file.name" />
+			</NcFormBox>
+			<NcFormBox v-slot="{ itemClass }">
+				<div class="import-modal-file-item__field" :class="itemClass">
+					<label :for="addressbookInputId" class="import-modal-file-item__field-label">
+						{{ t('contacts', 'Address book') }}
+					</label>
+					<NcSelect
+						v-model="selectedAddressbook"
+						:input-id="addressbookInputId"
+						:options="addressbookOptions"
+						:allow-empty="false"
+						:clearable="false"
+						label="displayName" />
+				</div>
+			</NcFormBox>
+		</NcFormGroup>
+		<NcFormGroup :label="t('contacts', 'Import options')">
+			<NcFormBox v-slot="{ itemClass }">
+				<div class="import-modal-file-item__field" :class="itemClass">
+					<label :for="formatInputId" class="import-modal-file-item__field-label">
+						{{ t('contacts', 'File format') }}
+					</label>
+					<NcSelect
+						v-model="selectedFormat"
+						:input-id="formatInputId"
+						:options="formatOptions"
+						:allow-empty="false"
+						:clearable="false"
+						label="label" />
+				</div>
+			</NcFormBox>
+			<NcFormBox v-slot="{ itemClass }">
+				<NcFormBoxSwitch
+					:class="itemClass"
+					:model-value="supersede"
+					:label="t('contacts', 'Overwrite existing contacts')"
+					:description="t('contacts', 'Replace contacts in the address book that match the imported ones instead of skipping them.')"
+					@update:model-value="setSupersede" />
+			</NcFormBox>
+		</NcFormGroup>
+	</li>
+</template>
+
+<script>
+import { NcFormBox, NcFormBoxCopyButton, NcFormBoxSwitch, NcFormGroup, NcSelect } from '@nextcloud/vue'
+import { mapStores } from 'pinia'
+import useImportStore from '../../../store/import.ts'
+
+const NEW_ADDRESSBOOK_ID = 'new'
+
+export default {
+	name: 'ImportScreenRow',
+	components: {
+		NcFormBox,
+		NcFormBoxCopyButton,
+		NcFormBoxSwitch,
+		NcFormGroup,
+		NcSelect,
+	},
+
+	props: {
+		entry: {
+			type: Object,
+			required: true,
+		},
+	},
+
+	computed: {
+		...mapStores(useImportStore),
+
+		file() {
+			return this.entry.file
+		},
+
+		addressbookInputId() {
+			return `import-addressbook-${this.file.id}`
+		},
+
+		formatInputId() {
+			return `import-format-${this.file.id}`
+		},
+
+		formatOptions() {
+			return [{
+				id: 'vcf',
+				label: t('contacts', 'vCard (.vcf)'),
+			}, {
+				id: 'jcf',
+				label: t('contacts', 'jCard (.json)'),
+			}, {
+				id: 'xcf',
+				label: t('contacts', 'xCard (.xml)'),
+			}]
+		},
+
+		selectedFormat: {
+			get() {
+				const format = this.entry.options.format
+				return this.formatOptions.find((option) => option.id === format) ?? this.formatOptions[0]
+			},
+
+			set(option) {
+				if (!option) {
+					return
+				}
+				this.importStore.setOptionsForFile({
+					fileId: this.file.id,
+					options: { format: option.id },
+				})
+			},
+		},
+
+		supersede() {
+			return this.entry.options.supersede
+		},
+
+		newAddressbook() {
+			return {
+				id: NEW_ADDRESSBOOK_ID,
+				displayName: t('contacts', 'New address book'),
+			}
+		},
+
+		writableAddressbooks() {
+			return this.$store.getters.getAddressbooks
+				.filter((addressbook) => !addressbook.readOnly && addressbook.enabled && addressbook.canCreateCard)
+				.map((addressbook) => ({ id: addressbook.id, displayName: addressbook.displayName }))
+		},
+
+		addressbookOptions() {
+			return [...this.writableAddressbooks, this.newAddressbook]
+		},
+
+		selectedAddressbook: {
+			get() {
+				const addressbookId = this.entry.addressbookId
+				return this.addressbookOptions.find((option) => option.id === addressbookId) ?? this.addressbookOptions[0]
+			},
+
+			set(option) {
+				if (!option) {
+					return
+				}
+				this.importStore.setAddressbookForFile({
+					fileId: this.file.id,
+					addressbookId: option.id,
+				})
+			},
+		},
+	},
+
+	created() {
+		const preselected = this.addressbookOptions[0]
+		this.importStore.setAddressbookForFile({
+			fileId: this.file.id,
+			addressbookId: preselected.id,
+		})
+	},
+
+	methods: {
+		setSupersede(supersede) {
+			this.importStore.setOptionsForFile({
+				fileId: this.file.id,
+				options: { supersede },
+			})
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.import-modal-file-item__field {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	padding: 8px 12px;
+
+	&-label {
+		font-weight: bold;
+	}
+}
+</style>