feat: mobile staging and dev icons (#3375)

* feat: display mode in about

* feat(mobile): staging and dev icons

* update

apps/desktop/src/renderer/src/modules/app/EnvironmentIndicator.tsx

@@ -5,7 +5,7 @@ import {
   TooltipPortal,
   TooltipTrigger,
 } from "@follow/components/ui/tooltip/index.jsx"
-import { DEV } from "@follow/shared/constants"
+import { DEV, MODE } from "@follow/shared/constants"
 import { env } from "@follow/shared/env.desktop"
 
 import { useUserRole } from "~/atoms/user"
@@ -52,7 +52,7 @@ export const EnvironmentIndicator = () => {
         >
           <div className="center bg-accent fixed bottom-0 right-0 z-[99999] flex rounded-tl px-1 py-0.5 text-xs text-white">
             {role}:{DEV && <i className="i-mgc-bug-cute-re size-3" />}
-            {import.meta.env.MODE}
+            {MODE}
           </div>
         </button>
       </TooltipTrigger>

apps/desktop/src/renderer/src/modules/settings/tabs/about.tsx

@@ -2,7 +2,7 @@ import { Logo } from "@follow/components/icons/logo.jsx"
 import { Button } from "@follow/components/ui/button/index.js"
 import { styledButtonVariant } from "@follow/components/ui/button/variants.js"
 import { Divider } from "@follow/components/ui/divider/index.js"
-import { PROD } from "@follow/shared/constants"
+import { MODE, ModeEnum } from "@follow/shared/constants"
 import { getCurrentEnvironment } from "@follow/utils/environment"
 import PKG, { repository } from "@pkg"
 import { useQuery } from "@tanstack/react-query"
@@ -31,7 +31,7 @@ export const SettingAbout = () => {
 
           <div className="flex grow flex-col">
             <div className="text-lg font-bold">
-              {APP_NAME} {!PROD ? `(${import.meta.env.MODE})` : ""}
+              {APP_NAME} {MODE !== ModeEnum.production ? `(${MODE})` : ""}
             </div>
             <div className="flex flex-wrap items-center gap-2">
               {appVersion && (

apps/mobile/app.config.ts

@@ -6,8 +6,16 @@ import PKG from "./package.json"
 
 const isCI = process.env.CI === "true"
 // const roundedIconPath = resolve(__dirname, "../../resources/icon.png")
-const iconPath = resolve(__dirname, "./assets/icon.png")
+const iconPathMap = {
+  production: resolve(__dirname, "./assets/icon.png"),
+  development: resolve(__dirname, "./assets/icon-dev.png"),
+  "ios-simulator": resolve(__dirname, "./assets/icon-dev.png"),
+  preview: resolve(__dirname, "./assets/icon-staging.png"),
+} as Record<string, string>
+const iconPath = iconPathMap[process.env.PROFILE || "production"] || iconPathMap.production
+
 const adaptiveIconPath = resolve(__dirname, "./assets/adaptive-icon.png")
+
 export default ({ config }: ConfigContext): ExpoConfig => ({
   ...config,
 

apps/mobile/eas.json

@@ -7,21 +7,33 @@
     "development": {
       "developmentClient": true,
       "distribution": "internal",
-      "channel": "development"
+      "channel": "development",
+      "env": {
+        "PROFILE": "development"
+      }
     },
     "ios-simulator": {
       "extends": "development",
       "ios": {
         "simulator": true
+      },
+      "env": {
+        "PROFILE": "ios-simulator"
       }
     },
     "preview": {
       "distribution": "internal",
-      "channel": "preview"
+      "channel": "preview",
+      "env": {
+        "PROFILE": "preview"
+      }
     },
     "production": {
       "autoIncrement": true,
-      "channel": "production"
+      "channel": "production",
+      "env": {
+        "PROFILE": "production"
+      }
     }
   },
   "submit": {

packages/utils/src/environment.ts

@@ -1,4 +1,4 @@
-import { IN_ELECTRON } from "@follow/shared/constants"
+import { IN_ELECTRON, MODE } from "@follow/shared/constants"
 import { nanoid } from "nanoid"
 
 import { detectBrowser, getOS } from "./utils"
@@ -22,5 +22,6 @@ export const getCurrentEnvironment = () => {
     `**Env**: ${env}`,
     `**Browser**: ${browser}`,
     `**Session Trace Id**: \`${appSessionTraceId}\``,
+    `**Mode**: ${MODE}`,
   ]
 }