rename AppUpdate component with AdminBanner

- show banner when app restart is required.
- UI changes to admin banner

cmd/init.go

@@ -385,7 +385,10 @@ func reloadSettings(app *App) error {
 		app.lo.Error("error unmarshalling settings from DB", "error", err)
 		return err
 	}
-	if err := ko.Load(confmap.Provider(out, "."), nil); err != nil {
+	app.Lock()
+	err = ko.Load(confmap.Provider(out, "."), nil)
+	app.Unlock()
+	if err != nil {
 		app.lo.Error("error loading settings into koanf", "error", err)
 		return err
 	}

cmd/main.go

@@ -97,6 +97,8 @@ type App struct {
 
 	// Global state that stores data on an available app update.
 	update *AppUpdate
+	// Flag to indicate if app restart is required for settings to take effect.
+	restartRequired bool
 	sync.Mutex
 }
 

cmd/settings.go

@@ -31,6 +31,8 @@ func handleGetGeneralSettings(r *fastglue.Request) error {
 	settings["app.update"] = app.update
 	// Set app version.
 	settings["app.version"] = versionString
+	// Set restart required flag.
+	settings["app.restart_required"] = app.restartRequired
 	return r.SendEnvelope(settings)
 }
 
@@ -45,6 +47,11 @@ func handleUpdateGeneralSettings(r *fastglue.Request) error {
 		return r.SendErrorEnvelope(fasthttp.StatusBadRequest, app.i18n.T("globals.messages.badRequest"), nil, envelope.InputError)
 	}
 
+	// Get current language before update.
+	app.Lock()
+	oldLang := ko.String("app.lang")
+	app.Unlock()
+
 	// Remove any trailing slash `/` from the root url.
 	req.RootURL = strings.TrimRight(req.RootURL, "/")
 
@@ -55,6 +62,17 @@ func handleUpdateGeneralSettings(r *fastglue.Request) error {
 	if err := reloadSettings(app); err != nil {
 		return envelope.NewError(envelope.GeneralError, app.i18n.Ts("globals.messages.couldNotReload", "name", app.i18n.T("globals.terms.setting")), nil)
 	}
+
+	// Check if language changed and reload i18n if needed.
+	app.Lock()
+	newLang := ko.String("app.lang")
+	if oldLang != newLang {
+		app.lo.Info("language changed, reloading i18n", "old_lang", oldLang, "new_lang", newLang)
+		app.i18n = initI18n(app.fs)
+		app.lo.Info("reloaded i18n", "old_lang", oldLang, "new_lang", newLang)
+	}
+	app.Unlock()
+
 	if err := reloadTemplates(app); err != nil {
 		return envelope.NewError(envelope.GeneralError, app.i18n.Ts("globals.messages.couldNotReload", "name", app.i18n.T("globals.terms.setting")), nil)
 	}
@@ -117,6 +135,10 @@ func handleUpdateEmailNotificationSettings(r *fastglue.Request) error {
 		return sendErrorEnvelope(r, err)
 	}
 
-	// No reload implemented, so user has to restart the app.
+	// Email notification settings require app restart to take effect.
+	app.Lock()
+	app.restartRequired = true
+	app.Unlock()
+
 	return r.SendEnvelope(true)
 }

frontend/src/App.vue

@@ -88,8 +88,8 @@
         @create-conversation="() => (openCreateConversationDialog = true)"
       >
         <div class="flex flex-col h-screen">
-          <!-- Show app update only in admin routes -->
-          <AppUpdate v-if="route.path.startsWith('/admin')" />
+          <!-- Show admin banner only in admin routes -->
+          <AdminBanner v-if="route.path.startsWith('/admin')" />
 
           <!-- Common header for all pages -->
           <PageHeader />
@@ -128,7 +128,7 @@ import { useCustomAttributeStore } from '@/stores/customAttributes'
 import { useIdleDetection } from '@/composables/useIdleDetection'
 import PageHeader from './components/layout/PageHeader.vue'
 import ViewForm from '@/features/view/ViewForm.vue'
-import AppUpdate from '@/components/update/AppUpdate.vue'
+import AdminBanner from '@/components/banner/AdminBanner.vue'
 import api from '@/api'
 import { toast as sooner } from 'vue-sonner'
 import Sidebar from '@/components/sidebar/Sidebar.vue'

frontend/src/components/banner/AdminBanner.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="border-b">
+    <!-- Update notification -->
+    <div
+      v-if="appSettingsStore.settings['app.update']?.update?.is_new"
+      class="px-4 py-2.5 border-b border-border/50 last:border-b-0"
+    >
+      <div class="flex items-center gap-3">
+        <div class="flex-shrink-0">
+          <Download class="w-5 h-5 text-primary" />
+        </div>
+        <div class="min-w-0 flex-1">
+          <div class="flex items-center gap-2 text-sm text-foreground">
+            <span>{{ $t('update.newUpdateAvailable') }}</span>
+            <a
+              :href="appSettingsStore.settings['app.update'].update.url"
+              target="_blank"
+              rel="nofollow noreferrer"
+              class="font-semibold text-primary hover:text-primary/80 underline transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1"
+            >
+              {{ appSettingsStore.settings['app.update'].update.release_version }}
+            </a>
+            <span class="text-muted-foreground">•</span>
+            <span class="text-muted-foreground">
+              {{ appSettingsStore.settings['app.update'].update.release_date }}
+            </span>
+          </div>
+
+          <!-- Update description -->
+          <div
+            v-if="appSettingsStore.settings['app.update'].update.description"
+            class="mt-2 text-xs text-muted-foreground"
+          >
+            {{ appSettingsStore.settings['app.update'].update.description }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Restart required notification -->
+    <div
+      v-if="appSettingsStore.settings['app.restart_required']"
+      class="px-4 py-2.5 border-b border-border/50 last:border-b-0"
+    >
+      <div class="flex items-center gap-3">
+        <div class="flex-shrink-0">
+          <Info class="w-5 h-5 text-primary" />
+        </div>
+        <div class="min-w-0 flex-1">
+          <div class="text-sm text-foreground">
+            {{ $t('admin.banner.restartMessage') }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Download, Info } from 'lucide-vue-next'
+import { useAppSettingsStore } from '@/stores/appSettings'
+const appSettingsStore = useAppSettingsStore()
+</script>

frontend/src/components/update/AppUpdate.vue

@@ -1,33 +0,0 @@
-<template>
-  <div
-    v-if="appSettingsStore.settings['app.update']?.update?.is_new"
-    class="p-2 mb-2 border-b bg-secondary text-secondary-foreground"
-  >
-    <div>
-      {{ $t('update.newUpdateAvailable') }}:
-      {{ appSettingsStore.settings['app.update'].update.release_version }} ({{
-        appSettingsStore.settings['app.update'].update.release_date
-      }})
-      <a
-        :href="appSettingsStore.settings['app.update'].update.url"
-        target="_blank"
-        nofollow
-        noreferrer
-        class="underline ml-2"
-      >
-        {{ $t('globals.messages.viewDetails') }}
-      </a>
-    </div>
-    <div
-      v-if="appSettingsStore.settings['app.update'].update.description"
-      class="mt-1 text-xs opacity-90"
-    >
-      {{ appSettingsStore.settings['app.update'].update.description }}
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { useAppSettingsStore } from '@/stores/appSettings'
-const appSettingsStore = useAppSettingsStore()
-</script>

i18n/en.json

@@ -550,6 +550,7 @@
   "admin.automation.event.message.incoming": "Incoming message",
   "admin.automation.invalid": "Make sure you have atleast one action and one rule and their values are not empty.",
   "admin.notification.restartApp": "Settings updated successfully, Please restart the app for changes to take effect.",
+  "admin.banner.restartMessage": "Some settings have been changed that require an application restart to take effect.",
   "admin.template.outgoingEmailTemplates": "Outgoing email templates",
   "admin.template.emailNotificationTemplates": "Email notification templates",
   "admin.template.makeSureTemplateHasContent": "Make sure the template has {content} only once.",