replace select with Select to have consistent style

dashboard/src/components/BackupScheduleDialog.vue

@@ -1,7 +1,7 @@
 <script setup>
 
 import { ref, useTemplateRef, computed } from 'vue';
-import { Checkbox, Dialog, FormGroup, MultiSelect } from '@cloudron/pankow';
+import { Checkbox, Dialog, FormGroup, SingleSelect, MultiSelect } from '@cloudron/pankow';
 import BackupSitesModel from '../models/BackupSitesModel.js';
 
 const emit = defineEmits([ 'success' ]);
@@ -121,9 +121,7 @@ defineExpose({
 
         <FormGroup>
           <label for="retentionInput">{{ $t('backups.configureBackupSchedule.retentionPolicy') }}</label>
-          <select id="retentionInput" v-model="configureRetention">
-            <option v-for="elem in BackupSitesModel.backupRetentions" :key="elem.id" :value="elem.id">{{ elem.name }}</option>
-          </select>
+          <SingleSelect id="retentionInput" v-model="configureRetention" :options="BackupSitesModel.backupRetentions" option-key="id" option-label="name" />
         </FormGroup>
       </fieldset>
     </form>

dashboard/src/components/app/Storage.vue

@@ -1,8 +1,11 @@
 <script setup>
 
+import { useI18n } from 'vue-i18n';
+const i18n = useI18n();
+const t = i18n.t;
+
 import { ref, onMounted, computed } from 'vue';
 import { Button, FormGroup, TextInput, SingleSelect } from '@cloudron/pankow';
-import { prettyBinarySize, prettyDate } from '@cloudron/pankow/utils';
 import { ISTATES } from '../../constants.js';
 import AppsModel from '../../models/AppsModel.js';
 import VolumesModel from '../../models/VolumesModel.js';
@@ -31,6 +34,11 @@ const originalMounts = ref([]);
 const mountsBusy = ref(false);
 const mountsError = ref('');
 
+const mountPermissions = [
+  { name: t('app.storage.mounts.permissions.readOnly'), value: 'true' },
+  { name: t('app.storage.mounts.permissions.readWrite'), value: 'false' },
+];
+
 async function onSubmitMove() {
    moveBusy.value = true;
    moveError.value = '';
@@ -201,10 +209,7 @@ onMounted(async () => {
               <SingleSelect v-model="mount.volumeId" :options="volumes" option-key="id" option-label="label"/>
             </td>
             <td style="vertical-align: middle;">
-              <select v-model="mount.readOnly">
-                <option value="true">{{ $t('app.storage.mounts.permissions.readOnly') }}</option>
-                <option value="false">{{ $t('app.storage.mounts.permissions.readWrite') }}</option>
-              </select>
+              <SingleSelect v-model="mount.readOnly" :options="mountPermissions" option-key="value" option-label="name" />
             </td>
             <td style="vertical-align: middle; text-align: right;">
               <Button tool small secondary v-show="mount.volumeId" :href="`/filemanager.html#/home/volume/${mount.volumeId}`" target="_blank" v-tooltip="$t('volumes.openFileManagerActionTooltip')" icon="fa-solid fa-folder"/>