Create two sections in appearance

Branding and External Links

dashboard/public/translation/en.json

@@ -689,7 +689,7 @@
         }
     },
     "branding": {
-        "title": "Appearance",
+        "title": "Branding",
         "cloudronName": "Cloudron Name",
         "logo": "Logo",
         "footer": {
@@ -1834,10 +1834,10 @@
         },
         "forumUrlAction": "Need help? Ask in the forum",
         "addApplinkDialog": {
-            "title": "Add external app link"
+            "title": "Add External Link"
         },
         "editApplinkDialog": {
-            "title": "Edit App Link",
+            "title": "Edit External Link",
             "deleteAction": "Delete"
         },
         "applinks": {
@@ -2114,5 +2114,15 @@
     },
     "userDirectory": {
         "title": "User Directory"
+    },
+    "appearance": {
+        "title": "Appearance"
+    },
+    "dashboard": {
+        "title": "Dashboard"
+    },
+    "externallinks": {
+        "label": "External Links",
+        "description": "Add shortcuts to external services on the dashboard"
     }
 }

dashboard/src/views/AppearanceView.vue

@@ -64,7 +64,7 @@ async function onFooterSave(newFooter) {
 
 const applinkDialog = useTemplateRef('applinkDialog');
 
-function onAddDashboardLink() {
+function onAddExternalLink() {
   applinkDialog.value.open();
 }
 
@@ -108,14 +108,16 @@ onMounted(async () => {
       <SettingsItem>
         <EditableField :label="$t('branding.footer.title')" helpUrl="https://docs.cloudron.io/branding/#footer" multiline :saving="savingFooter" :value="footer" :disabled="!features.branding" @save="onFooterSave"/>
       </SettingsItem>
+    </Section>
 
+    <Section :title="$t('dashboard.title')">
       <SettingsItem>
         <FormGroup>
-          <label>Dashboard Links</label>
-          <div>Links to other domains and services can be added to the dashboard</div>
+          <label>{{ $t('externallinks.label') }}</label>
+          <div>{{  $t('externallinks.description') }}</div>
         </FormGroup>
         <div style="display: flex; position: relative; align-items: center">
-          <Button tool plain @click="onAddDashboardLink()" :disabled="!features.branding">Add Link</Button>
+          <Button tool plain @click="onAddExternalLink()" :disabled="!features.branding">{{ $t('main.action.add') }}</Button>
         </div>
       </SettingsItem>
     </Section>