fix(settings): restore preserved mobile push and base app UX

Carry over the safe preserved frontend changes by uploading push Firebase credentials directly per app and by showing clearer chat context guidance when an admin is in the base app.

Author: phwizard

src/actions.ts

@@ -7,6 +7,7 @@ import {
   httpGetConfig,
   httpGetUsers,
   httpPostFile,
+  httpUploadPushFirebaseServiceAccount,
   httpResetPasswords,
   httpTokens,
   httpUpdateApp,
@@ -166,6 +167,13 @@ export async function actionPostFile(file: File) {
   return httpPostFile(file);
 }
 
+export async function actionUploadPushFirebaseServiceAccount(
+  appId: string,
+  file: File
+) {
+  return httpUploadPushFirebaseServiceAccount(appId, file);
+}
+
 export async function actionGetUsers(
   appId: string,
   limit: number = 10,

src/http.ts

@@ -207,6 +207,12 @@ export function httpPostFile(file: File) {
   return http.post('/files', fd);
 }
 
+export function httpUploadPushFirebaseServiceAccount(appId: string, file: File) {
+  const fd = new FormData();
+  fd.append('firebaseServiceAccount', file);
+  return http.post(`/push/firebase-service-account/${appId}`, fd);
+}
+
 export function httpGetUsers(
   appId: string,
   limit: number = 10,

src/pages/AppSettings/AppSettings.tsx

@@ -714,7 +714,6 @@ export default function AppSettings() {
             <MobileApp
               appId={appId as string}
               primaryColor={app.primaryColor}
-              setGoogleServicesJson={setGoogleServicesJson}
             />
           </TabPanel>
 

src/pages/AppSettings/MobileApp.tsx

@@ -1,30 +1,35 @@
 
 import { useRef } from 'react';
 import { NavLink } from 'react-router-dom';
-import { actionPostFile } from '../../actions';
+import { toast } from 'react-toastify';
+import { actionUploadPushFirebaseServiceAccount } from '../../actions';
 import { IconUpload } from '../../components/Icons/IconUpload';
 
 interface Props {
   appId: string;
-  setGoogleServicesJson: (s: string) => void;
   primaryColor: string;
 }
 
 export function MobileApp({
   appId,
-  setGoogleServicesJson,
   primaryColor,
 }: Props) {
-  const googleJsonRef = useRef<HTMLInputElement>(null);
+  const pushServiceAccountRef = useRef<HTMLInputElement>(null);
 
-  const onGoogleJsonRefChanges = (file: File | null) => {
-    if (!file) {
-      return;
-    }
-
-    actionPostFile(file).then((resp) => {
-      setGoogleServicesJson(resp.data.results[0].location);
-    });
+  const onPushServiceAccountChanges = (file: File | null) => {
+    if (!file) return;
+    actionUploadPushFirebaseServiceAccount(appId, file)
+      .then(() => {
+        toast.success('Push service account uploaded');
+      })
+      .catch((e) => {
+        const msg =
+          e?.response?.data?.error ||
+          e?.response?.data?.details ||
+          e?.message ||
+          'Failed to upload push service account';
+        toast.error(String(msg));
+      });
   };
 
   return (
@@ -108,20 +113,20 @@ export function MobileApp({
           Push Notifications
         </div>
         <p className="font-sans text-sm leading-relaxed mb-4">
-        Follow <a href="https://forum.ethora.com/topic/75-setting-up-push-notifications-for-your-ethora-chats/" target="_blank" rel="noopener noreferrer" className="text-blue-600 underline">this manual</a> to set up your Firebase account. Extract and upload your <strong>service-account.json</strong>. This will enable your users to receive push notifications for chat messages they missed while being offline.
+        Follow <a href="https://forum.ethora.com/topic/75-setting-up-push-notifications-for-your-ethora-chats/" target="_blank" rel="noopener noreferrer" className="text-blue-600 underline">this manual</a> to set up your Firebase account. Upload your <strong>service-account.json</strong> here to enable push notifications for offline chat messages.
         </p>
         <input
           type="file"
-          ref={googleJsonRef}
+          ref={pushServiceAccountRef}
           accept=".json"
           className="hidden"
           onChange={(e) =>
-            onGoogleJsonRefChanges(e.target.files && e.target.files[0])
+            onPushServiceAccountChanges(e.target.files && e.target.files[0])
           }
         />
         <button
           className="w-full hover:bg-brand-hover rounded-xl border border-brand-500 text-brand-500 flex p-2 items-center justify-center mb-8"
-          onClick={() => googleJsonRef.current?.click()}
+          onClick={() => pushServiceAccountRef.current?.click()}
         >
           <IconUpload stroke={primaryColor}></IconUpload>
           <span className="ml-2">Upload</span>

src/pages/Chat.tsx

@@ -85,24 +85,41 @@ const MemoizedChat = React.memo(function ChatComponent({
 export default function ChatPage() {
   const config = useAppStore((s) => s.currentApp);
   const isAdmin = useAppStore((s) => s.currentApp?.isAllowedNewAppCreate);
+  const apps = useAppStore((s) => s.apps);
 
   const { currentUser } = useAppStore((s) => s);
 
   const allowedDomains =
     import.meta.env.VITE_APP_ALLOWED_DOMAINS?.split(',') || [];
   const currentDomain = window.location.hostname;
+  const isDemoDomain = allowedDomains.includes(currentDomain);
+  const isBaseApp = Boolean(config?.isBaseApp);
+  const hasOtherApps = Array.isArray(apps)
+    ? apps.some((app) => app && app._id !== config?._id && !app.isBaseApp)
+    : false;
+  const showBaseAppContextBanner = Boolean(
+    isAdmin && isBaseApp && (isDemoDomain || hasOtherApps)
+  );
 
   return (
     <div className="grid grid-rows-[auto,_1fr] gap-4 h-full abc">
       <div className="md:px-8 hidden md:flex flex-col justify-between items-stretch md:items-center md:flex-row">
         <div className="font-varela mb-4 text-[24px] md:mb-0 md:text-[34px] leading-none">
           Chats
         </div>
-        {isAdmin && allowedDomains.includes(currentDomain) && (
+        {showBaseAppContextBanner && (
           <div className="flex flex-col items-center bg-yellow-100 px-4 py-2 text-sm border">
-            <p>This is demo server</p>
+            {isDemoDomain ? (
+              <p>This is a demo server</p>
+            ) : (
+              <p>This is the Base App context</p>
+            )}
             <p className="flex items-center gap-2">
-              <span>To test your own App, go to "Admin"</span>
+              <span>
+                {isDemoDomain
+                  ? 'To test your own App, go to "Admin"'
+                  : 'To switch context, go to "Admin"'}
+              </span>
               <ArrowRightAltIcon /> <span>your App </span>
               <ArrowRightAltIcon /> <span>"Publish"</span>
             </p>