Add a reload page prompt for extension

src/assets/locales/en.json

@@ -508,6 +508,8 @@
       "explainer": "Using the browser extension, you can get the best streams we have to offer. With just a simple install.",
       "explainerIos": "Unfortunately, the browser extension is not supported on IOS, Press <bold>Go back</bold> to choose another option.",
       "extensionHelp": "If you've installed the extension but it's not detected. <bold>Open the extension through your browsers extension menu</bold> and follow the steps on screen.",
+      "notDetecting": "Installed on chrome but not showing up? Try reloading the page!",
+      "notDetectingAction": "Reload page",
       "linkChrome": "Install Chrome extension",
       "linkFirefox": "Install Firefox extension",
       "back": "Go back",

src/pages/onboarding/OnboardingExtension.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useMemo } from "react";
+import { ReactNode, useCallback, useEffect, useMemo, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { useAsyncFn, useInterval } from "react-use";
 
@@ -41,12 +41,33 @@ async function getExtensionState(): Promise<ExtensionStatus> {
   return "success"; // no problems
 }
 
+function RefreshBar() {
+  const { t } = useTranslation();
+  const reload = useCallback(() => {
+    window.location.reload();
+  }, []);
+  return (
+    <Card className="mt-4">
+      <div className="flex items-center space-x-7">
+        <p className="flex-1">{t("onboarding.extension.notDetecting")}</p>
+        <Button theme="secondary" onClick={reload}>
+          {t("onboarding.extension.notDetectingAction")}
+        </Button>
+      </div>
+    </Card>
+  );
+}
+
 export function ExtensionStatus(props: {
   status: ExtensionStatus;
   loading: boolean;
   showHelp?: boolean;
 }) {
   const { t } = useTranslation();
+  const [lastKnownStatus, setLastKnownStatus] = useState(props.status);
+  useEffect(() => {
+    if (!props.loading) setLastKnownStatus(props.status);
+  }, [props.status, props.loading]);
 
   let content: ReactNode = null;
   if (props.loading || props.status === "unknown")
@@ -93,6 +114,7 @@ export function ExtensionStatus(props: {
           {content}
         </div>
       </Card>
+      {lastKnownStatus === "unknown" ? <RefreshBar /> : null}
       {props.showHelp ? (
         <Card className="mt-4">
           <div className="flex items-center space-x-7">