add browser tab indicator for coding and update favicon images

Hashim-K · Mar 14, 2024 · cdbb78e · cdbb78e
1 parent 87cf6f4
commit cdbb78e
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 5 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -2,11 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link
-      rel="icon"
-      type="image/svg+xml"
-      href="https://picoapps.xyz/favicon.png"
-    />
+    <link rel="icon" type="image/png" href="/favicon/main.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <!-- Google Fonts -->

diff --git a/frontend/public/favicon/coding.png b/frontend/public/favicon/coding.png
diff --git a/frontend/public/favicon/main.png b/frontend/public/favicon/main.png
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -38,6 +38,7 @@ import { Stack } from "./lib/stacks";
 import { CodeGenerationModel } from "./lib/models";
 import ModelSettingsSection from "./components/ModelSettingsSection";
 import { extractHtml } from "./components/preview/extractHtml";
+import useBrowserTabIndicator from "./hooks/useBrowserTabIndicator";
 
 const IS_OPENAI_DOWN = false;
 
@@ -83,6 +84,9 @@ function App() {
 
   const wsRef = useRef<WebSocket>(null);
 
+  // Indicate coding state using the browser tab's favicon and title
+  useBrowserTabIndicator(appState === AppState.CODING);
+
   // When the user already has the settings in local storage, newly added keys
   // do not get added to the settings so if it's falsy, we populate it with the default
   // value

diff --git a/frontend/src/hooks/useBrowserTabIndicator.ts b/frontend/src/hooks/useBrowserTabIndicator.ts
@@ -0,0 +1,29 @@
+import { useEffect } from "react";
+
+const CODING_SETTINGS = {
+  title: "Coding...",
+  favicon: "/favicon/coding.png",
+};
+const DEFAULT_SETTINGS = {
+  title: "Screenshot to Code",
+  favicon: "/favicon/main.png",
+};
+
+const useBrowserTabIndicator = (isCoding: boolean) => {
+  useEffect(() => {
+    const settings = isCoding ? CODING_SETTINGS : DEFAULT_SETTINGS;
+
+    // Set favicon
+    const faviconEl = document.querySelector(
+      "link[rel='icon']"
+    ) as HTMLLinkElement | null;
+    if (faviconEl) {
+      faviconEl.href = settings.favicon;
+    }
+
+    // Set title
+    document.title = settings.title;
+  }, [isCoding]);
+};
+
+export default useBrowserTabIndicator;