Merge pull request #809 from movie-web/extension-final-fixes

Extension final fixes

src/pages/onboarding/OnboardingExtension.tsx

@@ -17,6 +17,7 @@ import {
 } from "@/pages/onboarding/onboardingHooks";
 import { Card, Link } from "@/pages/onboarding/utils";
 import { PageTitle } from "@/pages/parts/util/PageTitle";
+import { conf } from "@/setup/config";
 
 type ExtensionStatus =
   | "unknown"
@@ -108,6 +109,7 @@ export function OnboardingExtensionPage() {
   const { t } = useTranslation();
   const navigate = useNavigateOnboarding();
   const { completeAndRedirect } = useRedirectBack();
+  const installLink = conf().ONBOARDING_EXTENSION_INSTALL_LINK;
 
   const [{ loading, value }, exec] = useAsyncFn(
     async (triggeredManually: boolean = false) => {
@@ -119,7 +121,6 @@ export function OnboardingExtensionPage() {
   );
   useInterval(exec, 1000);
 
-  // TODO proper link to install extension
   return (
     <MinimalPageLayout>
       <PageTitle subpage k="global.pages.onboarding" />
@@ -131,9 +132,11 @@ export function OnboardingExtensionPage() {
         <Paragraph className="max-w-[320px] mb-4">
           {t("onboarding.extension.explainer")}
         </Paragraph>
-        <Link href="https://google.com" target="_blank" className="mb-12">
+        {installLink ? (
-          {t("onboarding.extension.link")}
+          <Link href={installLink} target="_blank" className="mb-12">
-        </Link>
+            {t("onboarding.extension.link")}
+          </Link>
+        ) : null}
 
         <ExtensionStatus status={value ?? "unknown"} loading={loading} />
         <div className="flex justify-between items-center mt-8">

src/pages/onboarding/OnboardingProxy.tsx

@@ -17,6 +17,7 @@ import {
 } from "@/pages/onboarding/onboardingHooks";
 import { Link } from "@/pages/onboarding/utils";
 import { PageTitle } from "@/pages/parts/util/PageTitle";
+import { conf } from "@/setup/config";
 import { useAuthStore } from "@/stores/auth";
 
 const testUrl = "https://postman-echo.com/get";
@@ -27,6 +28,7 @@ export function OnboardingProxyPage() {
   const { completeAndRedirect } = useRedirectBack();
   const [url, setUrl] = useState("");
   const setProxySet = useAuthStore((s) => s.setProxySet);
+  const installLink = conf().ONBOARDING_PROXY_INSTALL_LINK;
 
   const [{ loading, error }, test] = useAsyncFn(async () => {
     if (!url.startsWith("http"))
@@ -42,7 +44,6 @@ export function OnboardingProxyPage() {
     }
   }, [url, completeAndRedirect, setProxySet]);
 
-  // TODO proper link to proxy deployment docs
   return (
     <MinimalPageLayout>
       <PageTitle subpage k="global.pages.onboarding" />
@@ -54,7 +55,11 @@ export function OnboardingProxyPage() {
         <Paragraph className="max-w-[320px] !mb-5">
           {t("onboarding.proxy.explainer")}
         </Paragraph>
-        <Link>{t("onboarding.proxy.link")}</Link>
+        {installLink ? (
+          <Link href={installLink} target="_blank" className="mb-12">
+            {t("onboarding.proxy.link")}
+          </Link>
+        ) : null}
         <div className="w-[400px] max-w-full  mt-14 mb-28">
           <AuthInputBox
             label={t("onboarding.proxy.input.label")}

src/pages/parts/settings/SetupPart.tsx

@@ -8,6 +8,7 @@ import { isExtensionActive } from "@/backend/extension/messaging";
 import { singularProxiedFetch } from "@/backend/helpers/fetch";
 import { Button } from "@/components/buttons/Button";
 import { Icon, Icons } from "@/components/Icon";
+import { Loading } from "@/components/layout/Loading";
 import { SettingsCard } from "@/components/layout/SettingsCard";
 import {
   StatusCircle,
@@ -121,7 +122,15 @@ export function SetupPart() {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const { loading, setupStates, globalState } = useIsSetup();
-  if (loading || !setupStates) return <p>Loading states...</p>; // TODO proper loading screen
+  if (loading || !setupStates) {
+    return (
+      <SettingsCard>
+        <div className="flex py-6 items-center justify-center">
+          <Loading />
+        </div>
+      </SettingsCard>
+    );
+  }
 
   const textLookupMap: Record<
     Status,

src/setup/config.ts

@@ -20,6 +20,8 @@ interface Config {
   TURNSTILE_KEY: string;
   CDN_REPLACEMENTS: string;
   HAS_ONBOARDING: string;
+  ONBOARDING_EXTENSION_INSTALL_LINK: string;
+  ONBOARDING_PROXY_INSTALL_LINK: string;
 }
 
 export interface RuntimeConfig {
@@ -36,6 +38,8 @@ export interface RuntimeConfig {
   TURNSTILE_KEY: string | null;
   CDN_REPLACEMENTS: Array<string[]>;
   HAS_ONBOARDING: boolean;
+  ONBOARDING_EXTENSION_INSTALL_LINK: string | null;
+  ONBOARDING_PROXY_INSTALL_LINK: string | null;
 }
 
 const env: Record<keyof Config, undefined | string> = {
@@ -44,6 +48,10 @@ const env: Record<keyof Config, undefined | string> = {
   GITHUB_LINK: undefined,
   DONATION_LINK: undefined,
   DISCORD_LINK: undefined,
+  ONBOARDING_EXTENSION_INSTALL_LINK: import.meta.env
+    .VITE_ONBOARDING_EXTENSION_INSTALL_LINK,
+  ONBOARDING_PROXY_INSTALL_LINK: import.meta.env
+    .VITE_ONBOARDING_PROXY_INSTALL_LINK,
   DMCA_EMAIL: import.meta.env.VITE_DMCA_EMAIL,
   CORS_PROXY_URL: import.meta.env.VITE_CORS_PROXY_URL,
   NORMAL_ROUTER: import.meta.env.VITE_NORMAL_ROUTER,
@@ -72,6 +80,8 @@ function getKey(key: keyof Config, defaultString?: string): string {
 
 export function conf(): RuntimeConfig {
   const dmcaEmail = getKey("DMCA_EMAIL");
+  const extensionLink = getKey("ONBOARDING_EXTENSION_INSTALL_LINK");
+  const proxyInstallLink = getKey("ONBOARDING_PROXY_INSTALL_LINK");
   const turnstileKey = getKey("TURNSTILE_KEY");
   return {
     APP_VERSION,
@@ -79,6 +89,10 @@ export function conf(): RuntimeConfig {
     DONATION_LINK,
     DISCORD_LINK,
     DMCA_EMAIL: dmcaEmail.length > 0 ? dmcaEmail : null,
+    ONBOARDING_EXTENSION_INSTALL_LINK:
+      extensionLink.length > 0 ? extensionLink : null,
+    ONBOARDING_PROXY_INSTALL_LINK:
+      proxyInstallLink.length > 0 ? proxyInstallLink : null,
     BACKEND_URL: getKey("BACKEND_URL", BACKEND_URL),
     TMDB_READ_API_KEY: getKey("TMDB_READ_API_KEY"),
     PROXY_URLS: getKey("CORS_PROXY_URL")