Move applink creation into appearance view

dashboard/src/views/AppearanceView.vue

@@ -1,8 +1,9 @@
 <script setup>
 
-import { ref, onMounted, inject } from 'vue';
+import { ref, onMounted, inject, useTemplateRef } from 'vue';
 import { Button, FormGroup, TextInput } from '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 ImagePicker from '../components/ImagePicker.vue';
@@ -81,6 +82,16 @@ async function onChangeFooterSubmit() {
   editFooter.value = '';
 }
 
+const applinkDialog = useTemplateRef('applinkDialog');
+
+function onAddDashboardLink() {
+  applinkDialog.value.open();
+}
+
+function onApplinkAdded() {
+  window.location.href = '#/apps';
+}
+
 onMounted(async () => {
   let [error, result] = await dashboardModel.config();
   if (error) return console.error(error);
@@ -95,6 +106,8 @@ onMounted(async () => {
 
 <template>
   <div class="content">
+    <ApplinkDialog ref="applinkDialog" @success="onApplinkAdded"/>
+
     <Section :title="$t('branding.title')" :title-badge="!features.branding ? 'Upgrade' : ''">
       <div style="display: flex; justify-content: space-around; margin-bottom: 20px;">
         <div style="display: flex; flex-direction: column; align-content: stretch; align-items: center;">
@@ -141,6 +154,16 @@ onMounted(async () => {
           </div>
         </Transition>
       </SettingsItem>
+
+      <SettingsItem>
+        <FormGroup>
+          <label>Dashboard Links</label>
+          <div>Links to other domains and services can be added to the dashboard</div>
+        </FormGroup>
+        <div style="display: flex; position: relative; align-items: center">
+          <Button tool plain @click="onAddDashboardLink()" :disabled="!features.branding">Add Link</Button>
+        </div>
+      </SettingsItem>
     </Section>
   </div>
 </template>