From 89e3ce06fae3085cca0ea6b5d9bc2a7cafdbfc25 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Thu, 22 May 2025 21:50:37 +0200
Subject: [PATCH] Move applink creation into appearance view

---
 dashboard/src/views/AppearanceView.vue | 25 ++++++++++++++++++-
 dashboard/src/views/AppsView.vue       | 33 +-------------------------
 2 files changed, 25 insertions(+), 33 deletions(-)

diff --git a/dashboard/src/views/AppearanceView.vue b/dashboard/src/views/AppearanceView.vue
index 2882115df..c3be2769e 100644
--- a/dashboard/src/views/AppearanceView.vue
+++ b/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>
diff --git a/dashboard/src/views/AppsView.vue b/dashboard/src/views/AppsView.vue
index 2f18af693..cea9f2171 100644
--- a/dashboard/src/views/AppsView.vue
+++ b/dashboard/src/views/AppsView.vue
@@ -1,24 +1,17 @@
 <script setup>
 
-import { useI18n } from 'vue-i18n';
-const i18n = useI18n();
-const t = i18n.t;
-
 import { ref, computed, useTemplateRef, onMounted, onUnmounted } from 'vue';
 import { Button, ButtonGroup, SingleSelect, Icon, TableView, TextInput } from 'pankow';
-import { API_ORIGIN, APP_TYPES, HSTATES, ISTATES, RSTATES, PROXY_APP_ID } from '../constants.js';
+import { API_ORIGIN, APP_TYPES, HSTATES, ISTATES, RSTATES } from '../constants.js';
 import AppsModel from '../models/AppsModel.js';
-import AppstoreModel from '../models/AppstoreModel.js';
 import ApplinksModel from '../models/ApplinksModel.js';
 import DomainsModel from '../models/DomainsModel.js';
 import ProfileModel from '../models/ProfileModel.js';
 import UpdaterModel from '../models/UpdaterModel.js';
-import AppInstallDialog from '../components/AppInstallDialog.vue';
 import ApplinkDialog from '../components/ApplinkDialog.vue';
 import PostInstallDialog from '../components/PostInstallDialog.vue';
 
 const appsModel = AppsModel.create();
-const appstoreModel = AppstoreModel.create();
 const domainsModel = DomainsModel.create();
 const applinksModel = ApplinksModel.create();
 const profileModel = ProfileModel.create();
@@ -132,28 +125,6 @@ const updateInfo = ref({});
 
 const applinkDialog = useTemplateRef('applinkDialog');
 const postInstallDialog = useTemplateRef('postInstallDialog');
-const appInstallDialog = useTemplateRef('appInstallDialog');
-
-const newAppMenu = [{
-  icon: 'fa fa-cloud-download-alt',
-  label: t('appstore.title'),
-  href: '/#/appstore',
-}, {
-  separator: true
-}, {
-  icon: 'fas fa-exchange-alt',
-  label: t('apps.addAppproxyAction'),
-  action: async () => {
-    const [error, result] = await appstoreModel.get(PROXY_APP_ID);
-    if (error) return console.error(error);
-
-    appInstallDialog.value.open(result);
-  },
-}, {
-  icon: 'fas fa-link',
-  label: t('apps.addApplinkAction'),
-  action: () => { applinkDialog.value.open(); },
-}];
 
 // hook for applinks otherwise it is a link
 function openAppEdit(app, event) {
@@ -270,7 +241,6 @@ onUnmounted(() => {
   <div class="content">
     <ApplinkDialog ref="applinkDialog" @success="refreshApps"/>
     <PostInstallDialog ref="postInstallDialog"/>
-    <AppInstallDialog ref="appInstallDialog" @close="refreshApps"/>
 
     <h1 class="view-header">
       {{ $t('apps.title') }}
@@ -280,7 +250,6 @@ onUnmounted(() => {
         <SingleSelect class="pankow-no-mobile" v-if="profile.isAtLeastAdmin" :options="stateFilterOptions" option-key="id" v-model="stateFilter" />
         <SingleSelect class="pankow-no-mobile" v-if="profile.isAtLeastAdmin" :options="domainFilterOptions" option-key="id" option-label="domain" v-model="domainFilter" />
         <Button tool outline secondary @click="toggleView()" :icon="viewType === VIEW_TYPE.GRID ? 'fas fa-list' : 'fas fa-grip'"></Button>
-        <Button tool :menu="newAppMenu" icon="fa-solid fa-plus" v-if="profile.isAtLeastAdmin" />
       </div>
     </h1>