Github/screenshot-to-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add browser tab indicator for coding and update favicon images

Browse Source
This commit is contained in:
Abi Raja 2024-03-14 16:53:09 -04:00
parent 87cf6f4cc2
commit cdbb78ea55
5 changed files with 34 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/index.html
View File

@ -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 -->

BIN
frontend/public/favicon/coding.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
frontend/public/favicon/main.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

4
frontend/src/App.tsx
View File

@ -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

29
frontend/src/hooks/useBrowserTabIndicator.ts Normal file
View File

@ -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;