feat: add favicon

Author: jog1t

frontend/.env

@@ -6,6 +6,7 @@ VITE_APP_SENTRY_PROJECT_ID="4506435887366144"
 VITE_APP_POSTHOG_API_KEY=phc_6kfTNEAVw7rn1LA51cO3D69FefbKupSWFaM7OUgEpEo
 VITE_APP_POSTHOG_HOST=https://ph.rivet.gg
 VITE_APP_CLOUD_API_URL=https://cloud.rivet.gg/api
+DEPLOYMENT_TYPE=staging
 
 # Overridden in CI
 SENTRY_AUTH_TOKEN=

frontend/package.json

@@ -106,6 +106,7 @@
 		"estree-util-to-js": "^2.0.0",
 		"fast-deep-equal": "^3.1.3",
 		"fast-json-patch": "^3.1.1",
+		"favigo": "^1.1.0",
 		"file-saver": "^2.0.5",
 		"filesize": "^11.0.2",
 		"framer-motion": "^11.18.2",

frontend/src/lib/env.ts

@@ -14,6 +14,7 @@ export const commonEnvSchema = z.object({
 	SENTRY_AUTH_TOKEN: z.string().optional(),
 	SENTRY_PROJECT: z.string().optional(),
 	APP_TYPE: z.enum(["engine", "cloud", "inspector"]).optional(),
+	DEPLOYMENT_TYPE: z.enum(["staging", "production"]).optional(),
 });
 
 export const commonEnv = () => commonEnvSchema.parse(import.meta.env);

frontend/vite.engine.config.ts

@@ -3,6 +3,7 @@ import path from "node:path";
 import { sentryVitePlugin } from "@sentry/vite-plugin";
 import { tanstackRouter } from "@tanstack/router-plugin/vite";
 import react from "@vitejs/plugin-react";
+import favigo from "favigo/vite";
 import { defineConfig, loadEnv, type Plugin } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 import { commonEnvSchema } from "./src/lib/env";
@@ -11,6 +12,25 @@ import { commonEnvSchema } from "./src/lib/env";
 const GIT_BRANCH = process.env.CF_PAGES_BRANCH;
 const GIT_SHA = process.env.CF_PAGES_COMMIT_SHA;
 
+
+
+const getVariantForMode = (mode: string) => {
+  switch (mode) {
+    case 'staging':
+      return {
+        type: 'badge',
+        text: 'DEV',
+        backgroundColor: '#FF4F00',
+        textColor: '#ffffff',
+        position: 'bottom-right',
+        size: 'large',
+      } as const
+    default:
+      return undefined
+  }
+}
+
+
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
 	const env = commonEnvSchema.parse(loadEnv(mode, process.cwd(), ""));
@@ -33,6 +53,14 @@ export default defineConfig(({ mode }) => {
 								: undefined,
 					})
 				: null,
+			favigo({
+				source: "./public/favicon.svg",
+				variant: getVariantForMode(env.DEPLOYMENT_TYPE || 'production'),
+				configuration: {
+					theme_color: "#FF4F00",
+					background: "transparent",
+				}
+			}),
 		],
 		server: {
 			port: 43708,