From cb3bf370d5a8d0774059d01ad3e9c36429528a22 Mon Sep 17 00:00:00 2001
From: Grigory V <scratchx@gmx.com>
Date: Sun, 9 Nov 2025 13:52:05 +0100
Subject: [PATCH] feat(settings): redesign to new vue components

Signed-off-by: Grigory V <scratchx@gmx.com>
---
 css/app-settings.scss                         |   2 -
 package-lock.json                             |  94 +++--
 package.json                                  |   4 +-
 src/components/AppNavigation/Settings.vue     | 332 +++++++++---------
 .../Settings/SettingsAttachmentsFolder.vue    |  45 ++-
 .../Settings/ShortcutOverview.vue             | 131 +++----
 6 files changed, 292 insertions(+), 316 deletions(-)

diff --git a/css/app-settings.scss b/css/app-settings.scss
index 1ace6ae945..c0026ecd0a 100644
--- a/css/app-settings.scss
+++ b/css/app-settings.scss
@@ -5,9 +5,7 @@
 
 #app-settings-modal {
 	.settings-fieldset-interior-item {
-		max-width: calc(var(--default-grid-baseline) * 68);
 		align-items: stretch;
-		padding: 5px 0;
 	}
 
 	.button-content-with-icon {
diff --git a/package-lock.json b/package-lock.json
index 5514442415..c065d2044c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,7 +6,7 @@
   "packages": {
     "": {
       "name": "calendar",
-      "version": "6.0.0",
+      "version": "6.0.4",
       "license": "agpl",
       "dependencies": {
         "@fullcalendar/core": "6.1.19",
@@ -31,8 +31,8 @@
         "@nextcloud/logger": "^3.0.2",
         "@nextcloud/moment": "^1.3.5",
         "@nextcloud/router": "^3.0.1",
-        "@nextcloud/timezones": "^1.0.0",
-        "@nextcloud/vue": "^8.29.1",
+        "@nextcloud/timezones": "^1.0.2",
+        "@nextcloud/vue": "^8.34.0",
         "autosize": "^6.0.1",
         "color-convert": "^3.1.0",
         "color-string": "^2.0.1",
@@ -3397,31 +3397,39 @@
       "license": "Apache-2.0"
     },
     "node_modules/@nextcloud/auth": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/@nextcloud/auth/-/auth-2.5.2.tgz",
-      "integrity": "sha512-1dr+Xhvg2QtsFC23KFXJSkU524EVgI/+WFBGTZ8tFa+9hmcZ3CqZIHjtXm3KxUvezwAY5023Ml0n2vpdYkpBXQ==",
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/@nextcloud/auth/-/auth-2.5.3.tgz",
+      "integrity": "sha512-KIhWLk0BKcP4hvypE4o11YqKOPeFMfEFjRrhUUF+h7Fry+dhTBIEIxuQPVCKXMIpjTDd8791y8V6UdRZ2feKAQ==",
       "license": "GPL-3.0-or-later",
       "dependencies": {
-        "@nextcloud/browser-storage": "^0.4.0",
+        "@nextcloud/browser-storage": "^0.5.0",
         "@nextcloud/event-bus": "^3.3.2"
       },
       "engines": {
         "node": "^20.0.0 || ^22.0.0 || ^24.0.0"
       }
     },
+    "node_modules/@nextcloud/auth/node_modules/@nextcloud/browser-storage": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@nextcloud/browser-storage/-/browser-storage-0.5.0.tgz",
+      "integrity": "sha512-usYr4GlJQlK3hgZURvklqWb9ivi7sgsSuFqXrs7s4hl1LTS4enzPrnkQumm6nRsQruf0ITS+OBsK+oELEbvYPA==",
+      "license": "GPL-3.0-or-later",
+      "engines": {
+        "node": "^24 || ^22 || ^20"
+      }
+    },
     "node_modules/@nextcloud/axios": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@nextcloud/axios/-/axios-2.5.1.tgz",
-      "integrity": "sha512-AA7BPF/rsOZWAiVxqlobGSdD67AEwjOnymZCKUIwEIBArKxYK7OQEqcILDjQwgj6G0e/Vg9Y8zTVsPZp+mlvwA==",
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/@nextcloud/axios/-/axios-2.5.2.tgz",
+      "integrity": "sha512-8frJb77jNMbz00TjsSqs1PymY0nIEbNM4mVmwen2tXY7wNgRai6uXilIlXKOYB9jR/F/HKRj6B4vUwVwZbhdbw==",
       "license": "GPL-3.0-or-later",
       "dependencies": {
-        "@nextcloud/auth": "^2.3.0",
+        "@nextcloud/auth": "^2.5.1",
         "@nextcloud/router": "^3.0.1",
-        "axios": "^1.6.8"
+        "axios": "^1.12.2"
       },
       "engines": {
-        "node": "^20.0.0",
-        "npm": "^10.0.0"
+        "node": "^20.0.0 || ^22.0.0 || ^24.0.0"
       }
     },
     "node_modules/@nextcloud/babel-config": {
@@ -3903,15 +3911,16 @@
       }
     },
     "node_modules/@nextcloud/timezones": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/timezones/-/timezones-1.0.0.tgz",
-      "integrity": "sha512-9b7Wms2mzB4RAltf8s9dY40PcU5ova5QjQJw1Gty35e54alKyx33BqUOy4gEbkzmYSrW4aZcLcMrOO5Bj2eIzg==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@nextcloud/timezones/-/timezones-1.0.2.tgz",
+      "integrity": "sha512-KdG/dcjKCuWIdsvpARM9qhQYaqDL/a7Qwb+jz0uOvRduqVWgs3A3EBfZmkgrRfkH6LAve7lg7aNeYhTcjDSuwQ==",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "ical.js": "^2.1.0"
       },
       "engines": {
-        "node": "^20 || ^22"
+        "node": "^22.0.0",
+        "npm": "^10.5.0"
       }
     },
     "node_modules/@nextcloud/typings": {
@@ -3928,16 +3937,16 @@
       }
     },
     "node_modules/@nextcloud/vue": {
-      "version": "8.31.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-8.31.0.tgz",
-      "integrity": "sha512-P5m3Odfw4m0siu7qs88WJutu2C8mEknqMS1ijlqYtQvc8qZwmpQshgCV5GhyyBTTK9Baicthm+ULglIf/Eq/sg==",
+      "version": "8.34.0",
+      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-8.34.0.tgz",
+      "integrity": "sha512-zUmInTvT4NgbRjWJZbw8nA+h4EqitYKfoCTj3h3Xr930sQZcczQatPtSo5Sps8RAh+JJz3iiAqAawYqS9jvBdA==",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "@floating-ui/dom": "^1.7.4",
         "@linusborg/vue-simple-portal": "^0.1.5",
-        "@nextcloud/auth": "^2.5.2",
-        "@nextcloud/axios": "^2.5.0",
-        "@nextcloud/browser-storage": "^0.4.0",
+        "@nextcloud/auth": "^2.5.3",
+        "@nextcloud/axios": "^2.5.2",
+        "@nextcloud/browser-storage": "^0.5.0",
         "@nextcloud/capabilities": "^1.2.0",
         "@nextcloud/event-bus": "^3.3.2",
         "@nextcloud/initial-state": "^2.2.0",
@@ -3952,11 +3961,11 @@
         "blurhash": "^2.0.5",
         "clone": "^2.1.2",
         "debounce": "^2.2.0",
-        "dompurify": "^3.2.4",
+        "dompurify": "^3.3.0",
         "emoji-mart-vue-fast": "^15.0.5",
         "escape-html": "^1.0.3",
         "floating-vue": "^1.0.0-beta.19",
-        "focus-trap": "^7.4.3",
+        "focus-trap": "^7.6.6",
         "linkify-string": "^4.3.2",
         "md5": "^2.3.0",
         "p-queue": "^8.1.1",
@@ -3970,7 +3979,7 @@
         "splitpanes": "^2.4.1",
         "string-length": "^5.0.1",
         "striptags": "^3.2.0",
-        "tabbable": "^6.2.0",
+        "tabbable": "^6.3.0",
         "tributejs": "^5.1.3",
         "unified": "^11.0.1",
         "unist-builder": "^4.0.0",
@@ -4016,6 +4025,15 @@
         "@floating-ui/utils": "^0.2.10"
       }
     },
+    "node_modules/@nextcloud/vue/node_modules/@nextcloud/browser-storage": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@nextcloud/browser-storage/-/browser-storage-0.5.0.tgz",
+      "integrity": "sha512-usYr4GlJQlK3hgZURvklqWb9ivi7sgsSuFqXrs7s4hl1LTS4enzPrnkQumm6nRsQruf0ITS+OBsK+oELEbvYPA==",
+      "license": "GPL-3.0-or-later",
+      "engines": {
+        "node": "^24 || ^22 || ^20"
+      }
+    },
     "node_modules/@nextcloud/vue/node_modules/@nextcloud/initial-state": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@nextcloud/initial-state/-/initial-state-2.2.0.tgz",
@@ -8545,9 +8563,9 @@
       }
     },
     "node_modules/dompurify": {
-      "version": "3.2.6",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.6.tgz",
-      "integrity": "sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.3.0.tgz",
+      "integrity": "sha512-r+f6MYR1gGN1eJv0TVQbhA7if/U7P87cdPl3HN5rikqaBSBxLiCb/b9O+2eG0cxz0ghyU+mU1QkbsOwERMYlWQ==",
       "license": "(MPL-2.0 OR Apache-2.0)",
       "optionalDependencies": {
         "@types/trusted-types": "^2.0.7"
@@ -10436,11 +10454,12 @@
       }
     },
     "node_modules/focus-trap": {
-      "version": "7.5.2",
-      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.5.2.tgz",
-      "integrity": "sha512-p6vGNNWLDGwJCiEjkSK6oERj/hEyI9ITsSwIUICBoKLlWiTWXJRfQibCwcoi50rTZdbi87qDtUlMCmQwsGSgPw==",
+      "version": "7.6.6",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.6.tgz",
+      "integrity": "sha512-v/Z8bvMCajtx4mEXmOo7QEsIzlIOqRXTIwgUfsFOF9gEsespdbD0AkPIka1bSXZ8Y8oZ+2IVDQZePkTfEHZl7Q==",
+      "license": "MIT",
       "dependencies": {
-        "tabbable": "^6.2.0"
+        "tabbable": "^6.3.0"
       }
     },
     "node_modules/follow-redirects": {
@@ -18963,9 +18982,10 @@
       "dev": true
     },
     "node_modules/tabbable": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
-      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.3.0.tgz",
+      "integrity": "sha512-EIHvdY5bPLuWForiR/AN2Bxngzpuwn1is4asboytXtpTgsArc+WmSJKVLlhdh71u7jFcryDqB2A8lQvj78MkyQ==",
+      "license": "MIT"
     },
     "node_modules/table": {
       "version": "6.9.0",
diff --git a/package.json b/package.json
index 49e61fb6e3..faba35a4ac 100644
--- a/package.json
+++ b/package.json
@@ -59,8 +59,8 @@
     "@nextcloud/logger": "^3.0.2",
     "@nextcloud/moment": "^1.3.5",
     "@nextcloud/router": "^3.0.1",
-    "@nextcloud/timezones": "^1.0.0",
-    "@nextcloud/vue": "^8.29.1",
+    "@nextcloud/timezones": "^1.0.2",
+    "@nextcloud/vue": "^8.34.0",
     "autosize": "^6.0.1",
     "color-convert": "^3.1.0",
     "color-string": "^2.0.1",
diff --git a/src/components/AppNavigation/Settings.vue b/src/components/AppNavigation/Settings.vue
index 3f1aae49b5..bf38af1e27 100644
--- a/src/components/AppNavigation/Settings.vue
+++ b/src/components/AppNavigation/Settings.vue
@@ -15,126 +15,96 @@
 			<NcAppSettingsDialog id="app-settings-modal"
 				class="app-settings-modal"
 				:name="t('mail', 'Calendar settings')"
+				:legacy="false"
 				:show-navigation="true"
 				:additional-trap-elements="[]"
 				:open="showSettingsModal"
 				@update:open="(val) => showSettingsModal = val">
 				<NcAppSettingsSection id="settings-modal-general"
-					class="calendar-settings-modal-section"
 					:name="t('calendar', 'General')">
-					<SettingsImportSection class="settings-fieldset-interior-item"
-						:is-disabled="loadingCalendars" />
-					<NcButton variant="tertiary"
-						target="_blank"
-						:href="availabilitySettingsUrl">
-						<template #icon>
-							<CalendarClockIcon :size="20" decorative />
-						</template>
-						<span class="button-content-with-icon">
-							{{ $t('calendar', 'Personal availability settings') }}
-							<OpenInNewIcon :size="20" decorative />
-						</span>
-					</NcButton>
-					<div>&nbsp;</div>
-					<NcButton variant="tertiary"
-						@click.prevent.stop="copyPrimaryCalDAV">
-						<template #icon>
-							<ContentCopy :size="20" decorative />
-						</template>
-						{{ $t('calendar', 'Copy primary CalDAV address') }}
-					</NcButton>
-					<NcButton variant="tertiary"
-						@click.prevent.stop="copyAppleCalDAV">
-						<template #icon>
-							<ContentCopy :size="20" decorative />
-						</template>
-						{{ $t('calendar', 'Copy iOS/macOS CalDAV address') }}
-					</NcButton>
+					<SettingsTimezoneSelect :is-disabled="loadingCalendars" />
+					<NcFormBox>
+						<NcFormBoxButton target="_blank"
+							:href="availabilitySettingsUrl">
+							{{ $t('calendar', 'Availability settings') }}
+						</NcFormBoxButton>
+					</NcFormBox>
+					<SettingsImportSection :is-disabled="loadingCalendars" />
+					<NcFormGroup :label="t('calendar', 'CalDAV')" :description="t('calendar', 'Access Nextcloud calendars from other apps and devices')">
+						<NcFormBox>
+							<NcFormBoxCopyButton :label="t('calendar', 'CalDAV URL')" :value="primaryCalDAV" />
+							<NcFormBoxCopyButton :label="t('calendar', 'Server Address for iOS and macOS')" :value="appleCalDAV" />
+						</NcFormBox>
+					</NcFormGroup>
 				</NcAppSettingsSection>
-				<NcAppSettingsSection id="app-settings-modal-view"
-					class="calendar-settings-modal-section"
-					:name="t('calendar', 'View options')">
-					<SettingsTimezoneSelect class="settings-fieldset-interior-item"
-						:is-disabled="loadingCalendars" />
-					<NcCheckboxRadioSwitch class="settings-fieldset-interior-item"
-						:model-value="hasBirthdayCalendar"
-						:disabled="isBirthdayCalendarDisabled"
-						@update:model-value="toggleBirthdayEnabled">
-						{{ $t('calendar', 'Enable birthday calendar') }}
-					</NcCheckboxRadioSwitch>
-					<NcCheckboxRadioSwitch class="settings-fieldset-interior-item"
-						:model-value="showTasks"
-						:disabled="savingTasks"
-						@update:model-value="toggleTasksEnabled">
-						{{ $t('calendar', 'Show tasks in calendar') }}
-					</NcCheckboxRadioSwitch>
-					<NcCheckboxRadioSwitch class="settings-fieldset-interior-item"
-						:model-value="showWeekends"
-						:disabled="savingWeekend"
-						@update:model-value="toggleWeekendsEnabled">
-						{{ $t('calendar', 'Show weekends') }}
-					</NcCheckboxRadioSwitch>
-					<NcCheckboxRadioSwitch class="settings-fieldset-interior-item"
-						:model-value="showWeekNumbers"
-						:disabled="savingWeekNumber"
-						@update:model-value="toggleWeekNumberEnabled">
-						{{ $t('calendar', 'Show week numbers') }}
-					</NcCheckboxRadioSwitch>
-					<NcCheckboxRadioSwitch class="settings-fieldset-interior-item"
-						:model-value="eventLimit"
-						:disabled="savingEventLimit"
-						@update:model-value="toggleEventLimitEnabled">
-						<span class="no-wrap-label">
-							{{ $t('calendar', 'Limit number of events shown in month view') }}
-						</span>
-					</NcCheckboxRadioSwitch>
+				<NcAppSettingsSection id="settings-modal-appearance"
+					:name="t('calendar', 'Appearance')">
+					<NcFormBox>
+						<NcFormBoxSwitch v-model="hasBirthdayCalendarBinding"
+							:disabled="isBirthdayCalendarDisabled"
+							@update:modelValue="toggleBirthdayEnabled">
+							{{ $t('calendar', 'Birthday calendar') }}
+						</NcFormBoxSwitch>
+						<NcFormBoxSwitch v-model="showTasksBinding"
+							:disabled="savingTasks"
+							@update:modelValue="toggleTasksEnabled">
+							{{ $t('calendar', 'Tasks in calendar') }}
+						</NcFormBoxSwitch>
+						<NcFormBoxSwitch v-model="showWeekendsBinding"
+							:disabled="savingWeekend"
+							@update:modelValue="toggleWeekendsEnabled">
+							{{ $t('calendar', 'Weekends') }}
+						</NcFormBoxSwitch>
+						<NcFormBoxSwitch v-model="showWeekNumbersBinding"
+							:disabled="savingWeekNumber"
+							@update:modelValue="toggleWeekNumberEnabled">
+							{{ $t('calendar', 'Week numbers') }}
+						</NcFormBoxSwitch>
+					</NcFormBox>
+
+					<NcFormBox>
+						<NcFormBoxSwitch v-model="eventLimitBinding"
+							:disabled="savingEventLimit"
+							@update:modelValue="toggleEventLimitEnabled">
+							{{ $t('calendar', 'Limit number of events shown in Month view') }}
+						</NcFormBoxSwitch>
+					</NcFormBox>
+
 					<NcSelect :id="slotDuration"
 						:options="slotDurationOptions"
 						:value="selectedDurationOption"
 						:disabled="savingSlotDuration"
 						:clearable="false"
-						:input-label="$t('calendar', 'Time division in day and week view')"
+						:input-label="$t('calendar', 'Density in Day and Week View')"
 						input-id="value"
 						label="label"
 						@option:selected="changeSlotDuration" />
 				</NcAppSettingsSection>
 				<NcAppSettingsSection id="app-settings-modal-editing"
-					class="calendar-settings-modal-section"
 					:name="t('calendar', 'Editing')">
-					<NcCheckboxRadioSwitch class="settings-fieldset-interior-item"
-						:model-value="!skipPopover"
-						:disabled="savingPopover"
-						@update:model-value="togglePopoverEnabled">
-						{{ $t('calendar', 'Enable simple editor') }}
-					</NcCheckboxRadioSwitch>
-					<!-- Hidden: default calendar picker -->
-					<div v-if="false" class="settings-fieldset-interior-item">
-						<CalendarPicker :value="defaultCalendar"
-							:calendars="defaultCalendarOptions"
-							:disabled="savingDefaultCalendarId"
-							:input-label="$t('calendar', 'Default calendar for incoming invitations')"
-							:clearable="false"
-							@select-calendar="changeDefaultCalendar" />
-					</div>
-					<div class="settings-fieldset-interior-item">
-						<NcSelect :options="defaultReminderOptions"
-							:value="selectedDefaultReminderOption"
-							:disabled="savingDefaultReminder"
-							:clearable="false"
-							:input-label="$t('calendar', 'Default reminder')"
-							input-id="value"
-							label="label"
-							@option:selected="changeDefaultReminder" />
-					</div>
-					<div class="settings-fieldset-interior-item">
+					<NcSelect :options="defaultReminderOptions"
+						:value="selectedDefaultReminderOption"
+						:disabled="savingDefaultReminder"
+						:clearable="false"
+						:input-label="$t('calendar', 'Default reminder')"
+						input-id="value"
+						label="label"
+						@option:selected="changeDefaultReminder" />
+					<NcFormBox>
+						<NcFormBoxSwitch v-model="simpleEventEditorBinding"
+							:disabled="savingPopover"
+							:label="t('calendar', 'Simple event editor')"
+							@update:modelValue="togglePopoverEnabled">
+							<template #description>
+								{{ $t('calendar', '"More details" opens the detailed editor') }}
+							</template>
+						</NcFormBoxSwitch>
+					</NcFormBox>
+					<NcFormGroup :label="t('calendar', 'Files')">
 						<SettingsAttachmentsFolder />
-					</div>
-				</NcAppSettingsSection>
-				<NcAppSettingsSection id="app-settings-modal-keyboard"
-					class="calendar-settings-modal-section"
-					:name="t('calendar', 'Keyboard shortcuts')">
-					<ShortcutOverview />
+					</NcFormGroup>
 				</NcAppSettingsSection>
+				<ShortcutOverview />
 			</NcAppSettingsDialog>
 		</template>
 	</NcAppNavigationItem>
@@ -142,56 +112,46 @@
 
 <script>
 import {
-	NcButton,
-	NcCheckboxRadioSwitch,
-	NcAppNavigationItem,
-	NcAppSettingsDialog,
-	NcAppSettingsSection,
-	NcSelect,
-} from '@nextcloud/vue'
-import CalendarPicker from '../Shared/CalendarPicker.vue'
-
+	showError,
+} from '@nextcloud/dialogs'
+import moment from '@nextcloud/moment'
 import {
 	generateRemoteUrl,
 	generateUrl,
 } from '@nextcloud/router'
-import { mapStores, mapState } from 'pinia'
-import useSettingsStore from '../../store/settings.js'
-import useCalendarsStore from '../../store/calendars.js'
-import useImportFilesStore from '../../store/importFiles.js'
-import usePrincipalsStore from '../../store/principals.js'
-import moment from '@nextcloud/moment'
 import {
-	showSuccess,
-	showError,
-} from '@nextcloud/dialogs'
-
+	NcAppNavigationItem,
+	NcAppSettingsDialog,
+	NcAppSettingsSection,
+	NcFormBox,
+	NcFormBoxButton,
+	NcFormBoxCopyButton,
+	NcFormBoxSwitch,
+	NcFormGroup,
+	NcSelect,
+} from '@nextcloud/vue'
+import { mapState, mapStores } from 'pinia'
+import CogIcon from 'vue-material-design-icons/CogOutline.vue'
+import SettingsAttachmentsFolder from './Settings/SettingsAttachmentsFolder.vue'
 import SettingsImportSection from './Settings/SettingsImportSection.vue'
 import SettingsTimezoneSelect from './Settings/SettingsTimezoneSelect.vue'
-import SettingsAttachmentsFolder from './Settings/SettingsAttachmentsFolder.vue'
-
-import { getCurrentUserPrincipal } from '../../services/caldavService.js'
 import ShortcutOverview from './Settings/ShortcutOverview.vue'
+import { getDefaultAlarms } from '../../defaults/defaultAlarmProvider.js'
 import {
 	IMPORT_STAGE_DEFAULT,
 	IMPORT_STAGE_IMPORTING,
 	IMPORT_STAGE_PROCESSING,
 } from '../../models/consts.js'
-
-import { getDefaultAlarms } from '../../defaults/defaultAlarmProvider.js'
-
-import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
-import CogIcon from 'vue-material-design-icons/CogOutline.vue'
-import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
-import CalendarClockIcon from 'vue-material-design-icons/CalendarClock.vue'
-
+import { getCurrentUserPrincipal } from '../../services/caldavService.js'
+import useCalendarsStore from '../../store/calendars.js'
+import useImportFilesStore from '../../store/importFiles.js'
+import usePrincipalsStore from '../../store/principals.js'
+import useSettingsStore from '../../store/settings.js'
 import logger from '../../utils/logger.js'
 
 export default {
 	name: 'Settings',
 	components: {
-		NcButton,
-		NcCheckboxRadioSwitch,
 		NcAppNavigationItem,
 		NcAppSettingsDialog,
 		NcAppSettingsSection,
@@ -199,19 +159,22 @@ export default {
 		SettingsImportSection,
 		SettingsTimezoneSelect,
 		SettingsAttachmentsFolder,
-		ContentCopy,
-		CalendarPicker,
 		ShortcutOverview,
 		CogIcon,
-		OpenInNewIcon,
-		CalendarClockIcon,
+		NcFormBox,
+		NcFormBoxButton,
+		NcFormGroup,
+		NcFormBoxCopyButton,
+		NcFormBoxSwitch,
 	},
+
 	props: {
 		loadingCalendars: {
 			type: Boolean,
 			default: false,
 		},
 	},
+
 	data() {
 		return {
 			showSettingsModal: false,
@@ -225,8 +188,15 @@ export default {
 			savingWeekend: false,
 			savingWeekNumber: false,
 			savingDefaultCalendar: false,
+			hasBirthdayCalendarBinding: false,
+			showTasksBinding: false,
+			showWeekendsBinding: false,
+			showWeekNumbersBinding: false,
+			eventLimitBinding: false,
+			simpleEventEditorBinding: false,
 		}
 	},
+
 	computed: {
 		...mapStores(useSettingsStore, useCalendarsStore, useImportFilesStore, usePrincipalsStore),
 		...mapState(useSettingsStore, [
@@ -238,33 +208,43 @@ export default {
 			'slotDuration',
 			'defaultReminder',
 		]),
+
 		...mapState(useSettingsStore, {
-			locale: store => store.momentLocale,
+			locale: (store) => store.momentLocale,
 		}),
+
 		...mapState(usePrincipalsStore, {
 			currentUserPrincipal: 'getCurrentUserPrincipal',
 		}),
+
 		isBirthdayCalendarDisabled() {
 			return this.savingBirthdayCalendar || this.loadingCalendars
 		},
+
 		files() {
 			return this.importFilesStore.importFiles
 		},
+
 		hasBirthdayCalendar() {
 			return !!this.calendarsStore.getBirthdayCalendar
 		},
+
 		showUploadButton() {
 			return this.importStateStore.importState.stage === IMPORT_STAGE_DEFAULT
 		},
+
 		showImportModal() {
 			return this.importStateStore.importState.stage === IMPORT_STAGE_PROCESSING
 		},
+
 		showProgressBar() {
 			return this.importStateStore.importState.stage === IMPORT_STAGE_IMPORTING
 		},
+
 		settingsTitle() {
 			return this.$t('calendar', 'Calendar settings')
 		},
+
 		slotDurationOptions() {
 			return [{
 				label: moment.duration(5 * 60 * 1000).locale(this.locale).humanize(),
@@ -286,11 +266,13 @@ export default {
 				value: '01:00:00',
 			}]
 		},
+
 		selectedDurationOption() {
-			return this.slotDurationOptions.find(o => o.value === this.slotDuration)
+			return this.slotDurationOptions.find((o) => o.value === this.slotDuration)
 		},
+
 		defaultReminderOptions() {
-			const defaultAlarms = getDefaultAlarms().map(seconds => {
+			const defaultAlarms = getDefaultAlarms().map((seconds) => {
 				const label = seconds === 0 ? t('calendar', 'At event start') : moment.duration(Math.abs(seconds) * 1000).locale(this.locale).humanize()
 				return {
 					label,
@@ -303,30 +285,35 @@ export default {
 				value: 'none',
 			}].concat(defaultAlarms)
 		},
+
 		selectedDefaultReminderOption() {
-			return this.defaultReminderOptions.find(o => o.value === this.defaultReminder)
+			return this.defaultReminderOptions.find((o) => o.value === this.defaultReminder)
 		},
+
 		availabilitySettingsUrl() {
 			return generateUrl('/settings/user/availability')
 		},
+
 		nextcloudVersion() {
 			return parseInt(OC.config.version.split('.')[0])
 		},
+
 		defaultCalendarOptions() {
 			return this.calendarsStore.calendars
-				.filter(calendar => !calendar.readOnly
+				.filter((calendar) => !calendar.readOnly
 					&& !calendar.isSharedWithMe
 					&& calendar.supportsEvents)
 		},
+
 		/**
-		 * The default calendar for incoming inivitations
+		 * The default calendarci for incoming inivitations
 		 *
 		 * @return {object|undefined} The default calendar or undefined if none is available
 		 */
 		defaultCalendar() {
 			const defaultCalendarUrl = this.currentUserPrincipal.scheduleDefaultCalendarUrl
 			const calendar = this.defaultCalendarOptions
-				.find(calendar => calendar.url === defaultCalendarUrl)
+				.find((calendar) => calendar.url === defaultCalendarUrl)
 
 			// If the default calendar is not or no longer available,
 			// pick the first calendar in the list of available calendars.
@@ -336,11 +323,30 @@ export default {
 
 			return calendar
 		},
+
+		primaryCalDAV() {
+			return generateRemoteUrl('dav')
+		},
+
+		appleCalDAV() {
+			return new URL(getCurrentUserPrincipal().principalUrl, this.primaryCalDAV)
+		},
 	},
+
+	async created() {
+		this.hasBirthdayCalendarBinding = this.hasBirthdayCalendar
+		this.showTasksBinding = this.showTasks
+		this.showWeekendsBinding = this.showWeekends
+		this.showWeekNumbersBinding = this.showWeekNumbers
+		this.eventLimitBinding = this.eventLimit
+		this.simpleEventEditorBinding = !this.skipPopover
+	},
+
 	methods: {
 		onShowSettings() {
 			this.showSettingsModal = true
 		},
+
 		async toggleBirthdayEnabled() {
 			// change to loading status
 			this.savingBirthdayCalendar = true
@@ -353,6 +359,7 @@ export default {
 				this.savingBirthdayCalendar = false
 			}
 		},
+
 		async toggleEventLimitEnabled() {
 			// change to loading status
 			this.savingEventLimit = true
@@ -365,6 +372,7 @@ export default {
 				this.savingEventLimit = false
 			}
 		},
+
 		async toggleTasksEnabled() {
 			// change to loading status
 			this.savingTasks = true
@@ -377,6 +385,7 @@ export default {
 				this.savingTasks = false
 			}
 		},
+
 		async togglePopoverEnabled() {
 			// change to loading status
 			this.savingPopover = true
@@ -389,6 +398,7 @@ export default {
 				this.savingPopover = false
 			}
 		},
+
 		async toggleWeekendsEnabled() {
 			// change to loading status
 			this.savingWeekend = true
@@ -401,6 +411,7 @@ export default {
 				this.savingWeekend = false
 			}
 		},
+
 		/**
 		 * Toggles the setting for "Show week number"
 		 */
@@ -416,6 +427,7 @@ export default {
 				this.savingWeekNumber = false
 			}
 		},
+
 		/**
 		 * Updates the setting for slot duration
 		 *
@@ -438,6 +450,7 @@ export default {
 				this.savingSlotDuration = false
 			}
 		},
+
 		/**
 		 * Updates the setting for the default reminder
 		 *
@@ -462,6 +475,7 @@ export default {
 				this.savingDefaultReminder = false
 			}
 		},
+
 		/**
 		 * Changes the default calendar for incoming invitations
 		 *
@@ -490,40 +504,12 @@ export default {
 				this.savingDefaultCalendar = false
 			}
 		},
-		/**
-		 * Copies the primary CalDAV url to the user's clipboard.
-		 */
-		async copyPrimaryCalDAV() {
-			try {
-				await navigator.clipboard.writeText(generateRemoteUrl('dav'))
-				showSuccess(this.$t('calendar', 'CalDAV link copied to clipboard.'))
-			} catch (error) {
-				console.debug(error)
-				showError(this.$t('calendar', 'CalDAV link could not be copied to clipboard.'))
-			}
-
-		},
-		/**
-		 * Copies the macOS / iOS specific CalDAV url to the user's clipboard.
-		 * This url is user-specific.
-		 */
-		async copyAppleCalDAV() {
-			const rootURL = generateRemoteUrl('dav')
-			const url = new URL(getCurrentUserPrincipal().principalUrl, rootURL)
-
-			try {
-				await navigator.clipboard.writeText(url)
-				showSuccess(this.$t('calendar', 'CalDAV link copied to clipboard.'))
-			} catch (error) {
-				console.debug(error)
-				showError(this.$t('calendar', 'CalDAV link could not be copied to clipboard.'))
-			}
-		},
 	},
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+// Needed for the cog icon the navigation sidebar to be aligned
 .navigation-calendar-settings {
 	padding-inline-start: calc(var(--default-grid-baseline) * 2);
 	padding-bottom: calc(var(--default-grid-baseline) * 2);
diff --git a/src/components/AppNavigation/Settings/SettingsAttachmentsFolder.vue b/src/components/AppNavigation/Settings/SettingsAttachmentsFolder.vue
index 4163fd092f..6adbc2393d 100644
--- a/src/components/AppNavigation/Settings/SettingsAttachmentsFolder.vue
+++ b/src/components/AppNavigation/Settings/SettingsAttachmentsFolder.vue
@@ -4,47 +4,40 @@
 -->
 
 <template>
-	<div class="settings-fieldset-interior-item settings-fieldset-interior-item--folder">
-		<label :for="inputId">
-			{{ $t('calendar', 'Default attachments location') }}
-		</label>
-		<div class="form-group">
-			<NcInputField :id="inputId"
-				v-model="attachmentsFolder"
-				type="text"
-				:label-outside="true"
-				@input="debounceSaveAttachmentsFolder(attachmentsFolder)"
-				@change="debounceSaveAttachmentsFolder(attachmentsFolder)"
-				@click="selectCalendarFolder"
-				@keyboard.enter="selectCalendarFolder" />
-		</div>
-	</div>
+	<NcFormBoxButton :label="$t('calendar', 'Attachments folder')"
+		:description="attachmentsFolder"
+		inverted-accent
+		@click="selectCalendarFolder">
+		<template #icon>
+			<IconFolderOpen :size="20" />
+		</template>
+	</NcFormBoxButton>
 </template>
 
 <script>
-/* eslint-disable-next-line n/no-missing-import */
-import NcInputField from '@nextcloud/vue/dist/Components/NcInputField.js'
-import debounce from 'debounce'
 import { getFilePickerBuilder, showError, showSuccess } from '@nextcloud/dialogs'
-import { randomId } from '../../../utils/randomId.js'
+import { NcFormBoxButton } from '@nextcloud/vue'
+import debounce from 'debounce'
+import { mapState, mapStores } from 'pinia'
+import IconFolderOpen from 'vue-material-design-icons/FolderOpenOutline.vue'
 import useSettingsStore from '../../../store/settings.js'
-import { mapStores, mapState } from 'pinia'
 import logger from '../../../utils/logger.js'
 
 export default {
 	name: 'SettingsAttachmentsFolder',
+
 	components: {
-		NcInputField,
+		NcFormBoxButton,
+		IconFolderOpen,
 	},
+
 	computed: {
 		...mapStores(useSettingsStore),
 		...mapState(useSettingsStore, {
-			attachmentsFolder: store => store.attachmentsFolder || '/',
+			attachmentsFolder: (store) => store.attachmentsFolder || '/',
 		}),
-		inputId() {
-			return `input-${randomId()}`
-		},
 	},
+
 	methods: {
 		async selectCalendarFolder() {
 			const picker = getFilePickerBuilder(t('calendar', 'Select the default location for attachments'))
@@ -60,9 +53,11 @@ export default {
 			const path = await picker.pick()
 			this.saveAttachmentsFolder(path)
 		},
+
 		debounceSaveAttachmentsFolder: debounce(function(...args) {
 			this.saveAttachmentsFolder(...args)
 		}, 300),
+
 		saveAttachmentsFolder(path) {
 			if (typeof path !== 'string' || path.trim() === '' || !path.startsWith('/')) {
 				showError(t('calendar', 'Invalid location selected'))
diff --git a/src/components/AppNavigation/Settings/ShortcutOverview.vue b/src/components/AppNavigation/Settings/ShortcutOverview.vue
index 6dd1c87b63..5502ad9f62 100644
--- a/src/components/AppNavigation/Settings/ShortcutOverview.vue
+++ b/src/components/AppNavigation/Settings/ShortcutOverview.vue
@@ -3,101 +3,110 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<div class="shortcut-overview-modal">
-		<section v-for="category in shortcuts"
+	<NcAppSettingsShortcutsSection>
+		<NcHotkeyList v-for="category in shortcuts"
 			:key="category.categoryId"
-			class="shortcut-section">
-			<h3 class="shortcut-section__header">
-				{{ category.categoryLabel }}
-			</h3>
-			<div v-for="(shortcut, index) in category.shortcuts"
+			:label="category.categoryLabel">
+			<NcHotkey v-for="(shortcut, index) in category.shortcuts"
 				:key="`${category.categoryId}-${index}`"
-				class="shortcut-section-item">
-				<span class="shortcut-section-item__keys">
-					<template v-for="(keyCombination, index2) of shortcut.keys">
-						<template v-for="(key, index3) in keyCombination">
-							<kbd :key="`${category.categoryId}-${index}-${index2}-${index3}`">{{ key }}</kbd>
-							<span v-if="index3 !== (keyCombination.length - 1)"
-								:key="`${category.categoryId}-${index}-${index2}-${index3}`"
-								class="shortcut-section-item__spacer">
-								+
+				:hotkey="shortcut.or ? null : shortcut.keys[0]"
+				:label="shortcut.label">
+				<template v-if="shortcut.or" #hotkey>
+					<div class="shortcut-section-item__keys">
+						<div v-for="(key, keyIndex) in shortcut.keys" :key="keyIndex">
+							<NcKbd :symbol="key" />
+							<span v-if="keyIndex !== (shortcut.keys.length - 1)">
+								{{ $t('calendar', 'or') }}
 							</span>
-						</template>
-						<span v-if="index2 !== (shortcut.keys.length - 1)"
-							:key="`${category.categoryId}-${index}-${index2}`"
-							class="shortcut-section-item__spacer">
-							{{ $t('calendar', 'or') }}
-						</span>
-					</template>
-				</span>
-				<span class="shortcut-section-item__label">{{ shortcut.label }}</span>
-			</div>
-		</section>
-	</div>
+						</div>
+					</div>
+				</template>
+			</NcHotkey>
+		</NcHotkeyList>
+	</NcAppSettingsShortcutsSection>
 </template>
 
 <script>
 import { translate as t } from '@nextcloud/l10n'
+import { NcAppSettingsShortcutsSection, NcHotkey, NcHotkeyList } from '@nextcloud/vue'
+import NcKbd from '@nextcloud/vue/components/NcKbd'
 
 export default {
+	name: 'ShortcutOverview',
+
+	components: {
+		NcAppSettingsShortcutsSection,
+		NcHotkeyList,
+		NcHotkey,
+		NcKbd,
+	},
+
 	computed: {
 		shortcuts() {
 			return [{
 				categoryId: 'navigation',
 				categoryLabel: t('calendar', 'Navigation'),
 				shortcuts: [{
-					keys: [['p'], ['k']],
+					keys: ['P', 'K'],
 					label: t('calendar', 'Previous period'),
+					or: true,
 				}, {
-					keys: [['n'], ['j']],
+					keys: ['N', 'J'],
 					label: t('calendar', 'Next period'),
+					or: true,
 				}, {
-					keys: [['t']],
+					keys: ['T'],
 					label: t('calendar', 'Today'),
+					or: true,
 				}],
 			}, {
 				categoryId: 'views',
 				categoryLabel: t('calendar', 'Views'),
 				shortcuts: [{
-					keys: [['1'], ['d']],
+					keys: ['1', 'D'],
 					label: t('calendar', 'Day view'),
+					or: true,
 				}, {
-					keys: [['2'], ['w']],
+					keys: ['2', 'W'],
 					label: t('calendar', 'Week view'),
+					or: true,
 				}, {
-					keys: [['3'], ['m']],
+					keys: ['3', 'M'],
 					label: t('calendar', 'Month view'),
+					or: true,
 				}, {
-					keys: [['4'], ['y']],
+					keys: ['4', 'Y'],
 					label: t('calendar', 'Year view'),
+					or: true,
 				}, {
-					keys: [['5'], ['l']],
+					keys: ['5', 'L'],
 					label: t('calendar', 'List view'),
+					or: true,
 				}],
 			}, {
 				categoryId: 'actions',
 				categoryLabel: t('calendar', 'Actions'),
 				shortcuts: [{
-					keys: [['c']],
+					keys: ['C'],
 					label: t('calendar', 'Create event'),
 				}, {
-					keys: [['h']],
+					keys: ['H'],
 					label: t('calendar', 'Show shortcuts'),
 				}],
 			}, {
 				categoryId: 'editor',
 				categoryLabel: t('calendar', 'Editor'),
 				shortcuts: [{
-					keys: [['Escape']],
+					keys: ['Escape'],
 					label: t('calendar', 'Close editor'),
 				}, {
-					keys: [['Ctrl+Enter']],
+					keys: ['Control Enter'],
 					label: t('calendar', 'Save edited event'),
 				}, {
-					keys: [['Ctrl+Delete']],
+					keys: ['Control Delete'],
 					label: t('calendar', 'Delete edited event'),
 				}, {
-					keys: [['Ctrl+d']],
+					keys: ['Control D'],
 					label: t('calendar', 'Duplicate event'),
 				}],
 			}]
@@ -107,40 +116,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
-.shortcut-section {
-	width: 50%;
-	min-width: 425px;
-	flex-grow: 0;
-	flex-shrink: 0;
-	padding: 10px;
-	box-sizing: border-box;
-
-	.shortcut-section-item {
-		width: 100%;
-		display: grid;
-		grid-template-columns: 33% 67%;
-		column-gap: 10px;
-
-		&:not(:first-child) {
-			margin-top: 10px;
-		}
-
-		&__keys {
-			display: block;
-			text-align: end;
-		}
-
-		&__label {
-			display: block;
-			text-align: start;
-			padding-top: 5px;
-		}
-
-		&__spacer {
-			margin: 0 3px;
-		}
-	}
+.shortcut-section-item__keys {
+	display: flex;
+	gap: var(--default-grid-baseline);
 }
-
 </style>