replace select with Select to have consistent style

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"/>