Let the UI react when branding changes

dashboard/src/Index.vue

@@ -7,6 +7,7 @@ import { redirectIfNeeded } from './utils.js';
 import ProfileModel from './models/ProfileModel.js';
 import ProvisionModel from './models/ProvisionModel.js';
 import DashboardModel from './models/DashboardModel.js';
+import BrandingModel from './models/BrandingModel.js';
 import Headerbar from './components/Headerbar.vue';
 import OfflineOverlay from './components/OfflineOverlay.vue';
 import AppsView from './views/AppsView.vue';
@@ -98,6 +99,7 @@ const subscription = ref({
   plan: {},
 });
 const config = ref({});
+const avatarUrl = ref('');
 
 function onSidebarClose() {
   sidebar.value.close();
@@ -164,6 +166,16 @@ function onHashChange() {
   }
 }
 
+BrandingModel.onChange(BrandingModel.KEYS.NAME, (value) => {
+  window.document.title = value;
+  config.value.cloudronName = value;
+});
+
+BrandingModel.onChange(BrandingModel.KEYS.AVATAR, (value) => {
+  avatarUrl.value = value;
+  document.getElementById('favicon').href = value;
+});
+
 onMounted(async () => {
   let [error, result] = await provisionModel.status();
   if (error) return console.error(error);
@@ -187,7 +199,7 @@ onMounted(async () => {
   if (error) return console.error(error);
   config.value = result;
 
-  // TODO need to be reactive when name or icon changes
+  avatarUrl.value = `https://${config.value.adminFqdn}/api/v1/cloudron/avatar`;
   window.document.title = result.cloudronName;
   document.getElementById('favicon').href = `${API_ORIGIN}/api/v1/cloudron/avatar?ts=${Date.now()}`;
 
@@ -212,7 +224,7 @@ onMounted(async () => {
         <!-- <Sidebar :profile="profile" :config="config"/> -->
         <SideBar v-if="profile.isAtLeastUserManager" ref="sidebar">
           <a href="#/" class="sidebar-logo" @click="onSidebarClose()">
-            <img :src="`https://${config.adminFqdn}/api/v1/cloudron/avatar`" width="40" height="40"/> {{ config.cloudronName || 'Cloudron' }}
+            <img :src="avatarUrl" width="40" height="40"/> {{ config.cloudronName || 'Cloudron' }}
           </a>
           <div class="sidebar-list">
             <a class="sidebar-item" :class="{ active: activeSidebarItem === 'apps' }" href="#/apps" @click="onSidebarClose()"><i class="fa fa-grip fa-fw"></i> {{ $t('apps.title') }}</a>