From cdbb78ea55f745bce6cc0ab2a7ae60ab92782591 Mon Sep 17 00:00:00 2001 From: Abi Raja Date: Thu, 14 Mar 2024 16:53:09 -0400 Subject: [PATCH] add browser tab indicator for coding and update favicon images --- frontend/index.html | 6 +--- frontend/public/favicon/coding.png | Bin 0 -> 2229 bytes frontend/public/favicon/main.png | Bin 0 -> 1669 bytes frontend/src/App.tsx | 4 +++ frontend/src/hooks/useBrowserTabIndicator.ts | 29 +++++++++++++++++++ 5 files changed, 34 insertions(+), 5 deletions(-) create mode 100644 frontend/public/favicon/coding.png create mode 100644 frontend/public/favicon/main.png create mode 100644 frontend/src/hooks/useBrowserTabIndicator.ts diff --git a/frontend/index.html b/frontend/index.html index 2a7fa0e..39cfccc 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -2,11 +2,7 @@ - + diff --git a/frontend/public/favicon/coding.png b/frontend/public/favicon/coding.png new file mode 100644 index 0000000000000000000000000000000000000000..71a6a0b9622e55538e96ca08e2dd52c3d908215d GIT binary patch literal 2229 zcmV;m2uk;fP)6845~W9Rbi-#avfno!&q?WzF?}H=N5pEu_m)Q#u%Ln^r_*gp;#nFXncWH)|E|Yu7ABJn$CIa+k!@FbiuM= z`tkJ{3D5NZ&d6(~qR|_YTkpmevQY%$(S)GWV_ul53 zv(P`4IVICqL#|?j43-?P&GhO^w>x@FW5#qi)PM~tSaSSZM7;cqhTHC{8DPK$5v+8- z>FWzhbju6bfCA=yu;f&k72eAc%}{kM^s92fo5?nup7JHA#g zMIO>s>a{+_@&TdxB{OfH$!GO~JmgiyN{92+TLh{!@2ZzK70b?2YWWGFsw6V6ot!9d z7B^m0EZh1*U-30X@jl;M?NQHq4HjBoTl6_dxwYG8YwRsp*=DC6&~+JyHuO4o^)h4G z>!R#Dg;2G~{=>Debq_kPSoRy03qLyw>_Px37JN zI;&WyR6Xmsa&;0cgvt{ghO6~pVfE)36Ru?XpzYOSt1}itrSW>+06 zz+q@wI#N~;x&QF`;0>Yq*(p;`r?#`Z(?iiK)5ek{+ZqDmDD)hZyj z<2zMWh}9|(Fhxl?8i{o+M{u*vpa)>Y43S+dvP_aBLb-3$+XoFCu9hRtA z%Naq~N~{jugT+*OWdI|SBs14T%LHpi5Vi?9&sk2vO79kfw{!(hXTbFifo>HmLA8R6 zV-_4+VNzcqW0Tl}_Q~Z13 zAyf!^Sa4NwCcJzmGz_0Zus9-s%c7zKP_dvD2o|&g!GcyGSkMXt3tHi_kF_9x%N9ik zpkhHQT=uaR1aL`lCR{33t^0k$2qp5R=n#hs{iyH{fxxIHDi*8OpLh-fBgI|J<f=;Bk+vurZzUA93MZzYO=2(1NNJ zyqKJ4?GjfvC=BqSV|wR$sC%$(FAoU<7tdXfbPiT_KcqQ9p!kTliZAfXmAlXn`&j|w zH>Hj)b1+Wt1We+M)+!d-VW@asCR9d+Yu?p+g0P5`YJ*1UNB7!x_+xU0&C*~jcr)Ih zl1f)B+YS>xAP56j8-1!hY#c*;I7$xfxk~RV%!YX9U04_>ro$?sGOE8}RnQJcFNt4K zMU{iaTdO%?>tVcVRIBvUYmj4#h$ncQ?-*5_t#Y;Q-H?7^w8YV=S*_APq9*KXjm|<> ztDU;Rs(rT^yFwJHJmi6I)Ir@)8MP}`PEOP({m0?CJHu9Km;E};-5*QT9>K8b7Dx?g zELiFG0|xoQ5`NW03(Pgv3Ug?QgVb0H%r$?jNJ)0h+k^;)!ThWmY=ODPgJsJpR*AzQ zs?iphYvty)yqWA{-Wmcv;LYVewV?4C>mtlsKI0?aTs@$cw0k>lGjCDzWfp4F@`Ud#k0_x%RIVPF*E~^sU4<(Bk{v_k>R88>D%bf#nr!7VGZ$8i z?dvI2>6h+Fc3JZWa(HkxRMN@n?6wAeU>^}=SA42hZCyvz6z_v& z*y=@-m-=t}go4HgbbIwOyW5Y~1`(`WxB=t29?t*tZI1etK?N%pPQdt`o}&(Youhtb zkip7b2-rg!%M8ZZtvG*M?GK^l-DJ?gx=4;EPqPX(qe0T`j*|CuJ2@P3pmL)LRxaJ9 zP>=N%oer6J{zeWnJJH9XSEuWYE?5_3t#YQffgh2nWPM))#@PcHL_UtCGTmgTI6q1lexVXEf7Hk>pIyLt&tv>xAm*BPAqq`$`)mZL^piu z;^)V-5}n%s37^wM9no~T7;{Ae00000000007=!--noavgXVvH)00000NkvXXu0mjf DozWpm literal 0 HcmV?d00001 diff --git a/frontend/public/favicon/main.png b/frontend/public/favicon/main.png new file mode 100644 index 0000000000000000000000000000000000000000..4a32069c3e317a878c944799dd3b691c2e995bf1 GIT binary patch literal 1669 zcmV;027394P)@y{l4X2_h;J^_$9W5}G@&YUqf0Ednip8$LU)+fNu>}ZF~*)As-`2+(Y5!S2L z6uVoytL|3!j#~ZyRlO30+th+yz1M2BBnbcj00000n7=R7w!3|}J{}IgelQ&Ozpr!0 z%er&N_rvi+A7{g_&(yHi63Y^3C7(ccbSi6~WN-V}sPSZ5601DV`*_pGu8&U#j@|IH ztW`d#k(njaQ6DEdd?Jm-seIx)VV3rlsfJ{_E>7et8D?N#o#xQya>cff*P@CY#7cgy zQbVFliPs{*ZiQ3b?T!SS8EbhjRaY{QU^Dkj%bG(?jjjBJ3KFg4FUM;+;fF{tCq$v` zg~yRF%84qK5?fKduEktxTG+oGbFWKiefi?0K?9;y)})$PVk4J6l7kyM9DuBTckD%IhWYjKr}q$0VpbK>f6Zpr0TIVX~8jU!ge9=6#BYaVvK$r57D89TQhYVUq>230isi(F zeW|Q!bxQQ5ra2Op>a`}AQn8${4k|rQLUEmnG&T|EGMc}EAA=b3NiJn(5?j8 zXVr#}N@$0v6^m8&b|kH9rOdI`BB@$pH>cN%l#*Cah1UF_NU^QZiAj5_q9*aN6^p%A z?TXsM9Gh6Q!FD~48649JooIut3vP!o6>BB5ZXG%>Cb6Qg46rz>(19_n(4P6{k*>B` z8@v}XFtlRrKW&S)Sq=o<$_q`bl>l!QGAJ~$qAoSDXb(aLg(j90;H^Rig-+f-3HWSu zJu9SQvF{3(xv>EuiRA=bG+Jz^SV%Ft^c0d(JRA{#JVrwqS4iNDi%_FJvM;J zJ5so@0aG8b2d)&dK+57Mu5x4UP_a-1iG?CaEEGXvp$HNSMT8_)C*Y!PYycGtMNqMj zq8l3!l30`8_l-sRFg740u}1$8G^ZOI5RzDD0xlZuVzfe}7%etbETrhh288Txu#J8@ z0iTWLO=v6Z1b9ImEOdeNtpM-8kU^n|#XJjpn~*`FiM0{nZ9)d|;x)v`{^B*W5n2~K z*N#anCh+((bYM&?WIYSPpYx5WSk_-RLaS_LpbH%wyU~w!*secf2FHG+iFVkosIS_` zRxH|Kn>LEPt(UUr{V$<4QEkwqe7e`#;Z`h`wxW}7gHci{mbJs*g;s2oAoXM8Oyb)S zHEG{VeXh`|R`4n;s&%Zyy?Ch=%dGl15tb~eTA3+NLT|*KUnS@Jv3?P1_e7c8Q9hmgM*HuC8rgIv+oE^QR=7t?tWT#*EpV^It0I3AZ>Xt> zovUmua4%;o+_N9_V;|oOHTboUzg3Y}^55Yh<{Ph6NQpVtdCa%w%bvPt9Z5~pf7sm|l}PrfL2o2FLJ#iV{p?1q0s zT)~NXS4zx<+>^|~pnO09%sHgDLfu9IFem`i2k4P&4J^ zPf!i_AT60*h-9jcldohpSDC}@qTTSbEWR?8e*9~0Y;V%4kH_*!S9-5fC;vLlcf+xn zPawCJSXZ&+a>LQ8$o=8yhX3xa`Tx3e$M-|L8;)n^ejfk;00000z)bxQ#6J$i0#o&! P00000NkvXXu0mjf(%U0Q literal 0 HcmV?d00001 diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index b9b528b..192720b 100644 --- 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(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 new file mode 100644 index 0000000..aa8cadd --- /dev/null +++ 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;