Use EditableField for appearance name change

dashboard/src/views/AppearanceView.vue

@@ -1,11 +1,12 @@
 <script setup>
 
 import { ref, onMounted, inject, useTemplateRef } from 'vue';
-import { Button, FormGroup, TextInput } from '@cloudron/pankow';
+import { Button, FormGroup } from '@cloudron/pankow';
 import { API_ORIGIN } from '../constants.js';
 import ApplinkDialog from '../components/ApplinkDialog.vue';
 import Section from '../components/Section.vue';
 import SettingsItem from '../components/SettingsItem.vue';
+import EditableField from '../components/EditableField.vue';
 import ImagePicker from '../components/ImagePicker.vue';
 import BrandingModel from '../models/BrandingModel.js';
 import DashboardModel from '../models/DashboardModel.js';
@@ -20,27 +21,16 @@ const backgroundUrl = ref(`${API_ORIGIN}/api/v1/cloudron/background?${String(Mat
 
 const features = inject('features');
 
-// Cloudron name
-const editingName = ref(false);
-const editName = ref('');
-const editNameBusy = ref(false);
+const savingName = ref(false);
 
-function onChangeName(currentName) {
-  editNameBusy.value = false;
-  editingName.value = true;
-  editName.value = currentName;
-}
+async function onNameSave(newName) {
+  savingName.value = true;
 
-async function onChangeNameSubmit() {
-  editNameBusy.value = true;
-
-  const [error] = await brandingModel.setName(editName.value);
+  const [error] = await brandingModel.setName(newName);
   if (error) return console.error(error);
 
-  name.value = editName.value;
-  editingName.value = false;
-  editNameBusy.value = false;
-  editName.value = '';
+  name.value = newName;
+  savingName.value = false;
 }
 
 async function onAvatarSubmit(file) {
@@ -122,20 +112,7 @@ onMounted(async () => {
       </div>
 
       <SettingsItem>
-        <FormGroup>
-          <label>{{ $t('branding.cloudronName') }}</label>
-          <div>{{ name }}</div>
-        </FormGroup>
-        <Transition name="slide-up" mode="out-in">
-          <div v-if="editingName" style="display: flex; position: relative; align-items: center; gap: 6px">
-            <TextInput v-model="editName" @keydown.enter="onChangeNameSubmit()" :disabled="editNameBusy"/>
-            <Button tool @click="onChangeNameSubmit()" :disabled="editNameBusy" :loading="editNameBusy">{{ $t('main.dialog.save') }}</Button>
-            <Button tool plain secondary @click="editingName = false" :disabled="editNameBusy">{{ $t('main.dialog.cancel') }}</Button>
-          </div>
-          <div v-else style="display: flex; position: relative; align-items: center">
-            <Button tool plain @click="onChangeName(name)" :disabled="!features.branding">{{ $t('main.dialog.edit') }}</Button>
-          </div>
-        </Transition>
+        <EditableField :label="$t('branding.cloudronName')" :saving="savingName" :value="name" :disabled="!features.branding" @save="onNameSave"/>
       </SettingsItem>
 
       <SettingsItem>