From a60523a8b2fa7a4ad14dd11d7bfa64c574b28aba Mon Sep 17 00:00:00 2001
From: Pas <74743263+Pasithea0@users.noreply.github.com>
Date: Mon, 20 Jan 2025 12:56:43 -0700
Subject: [PATCH] Add more info popup for onboarding

---
 src/pages/onboarding/Onboarding.tsx | 67 +++++++++++++++++++++++++++++
 1 file changed, 67 insertions(+)

diff --git a/src/pages/onboarding/Onboarding.tsx b/src/pages/onboarding/Onboarding.tsx
index 77eda7b5..da3a7caf 100644
--- a/src/pages/onboarding/Onboarding.tsx
+++ b/src/pages/onboarding/Onboarding.tsx
@@ -1,6 +1,8 @@
+import { useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 
 import { Button } from "@/components/buttons/Button";
+import { Icon, Icons } from "@/components/Icon";
 import { Stepper } from "@/components/layout/Stepper";
 import { BiggerCenterContainer } from "@/components/layout/ThinContainer";
 import { VerticalLine } from "@/components/layout/VerticalLine";
@@ -20,6 +22,8 @@ import {
 import { PageTitle } from "@/pages/parts/util/PageTitle";
 import { getProxyUrls } from "@/utils/proxyUrls";
 
+import { PopupModal } from "../parts/home/PopupModal";
+
 export function OnboardingPage() {
   const navigate = useNavigateOnboarding();
   const skipModal = useModal("skip");
@@ -33,6 +37,12 @@ export function OnboardingPage() {
     !/Chrome/.test(navigator.userAgent) &&
     !/Edg/.test(navigator.userAgent);
 
+  const [showModal, setShowModal] = useState(false);
+
+  const handleCloseModal = () => {
+    setShowModal(false);
+  };
+
   return (
     <MinimalPageLayout>
       <PageTitle subpage k="global.pages.onboarding" />
@@ -54,6 +64,56 @@ export function OnboardingPage() {
           </div>
         </ModalCard>
       </Modal>
+      {showModal && (
+        <PopupModal
+          styles="max-w-2xl" // max-w-md for short max-w-2xl long
+          title="Understanding a setup"
+          message={
+            <div>
+              <p>
+                P-Stream doesn’t host videos. It relies on third-party websites
+                for content, so you need to choose how it connects to those
+                sites.
+                <br />
+                <br />
+                <strong>Your Options:</strong>
+                <br />
+                <strong>1. Extension (Recommended)</strong>
+                <br />
+                The extension gives you access to the most sources. It acts as a
+                local proxy and can handle sites that need special cookies or
+                headers to load.
+                <br />
+                <br />
+                <strong>2. Proxy</strong>
+                <br />
+                The proxy scrapes media from other websites. It bypasses browser
+                restrictions (like CORS) to allow scraping.
+                <br />
+                <br />
+                <strong>3. Default Setup</strong>
+                <br />
+                Uses P-Stream’s built-in proxy. It’s the easiest option but
+                might be slower due to shared bandwidth.
+                <br />
+                <br />
+                If you have more questions on how this works, feel free to ask
+                on the{" "}
+                <a
+                  href="https://discord.com/invite/7z6znYgrTG"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-type-link"
+                >
+                  P-Stream Discord
+                </a>{" "}
+                server!
+              </p>
+            </div>
+          }
+          onClose={handleCloseModal}
+        />
+      )}
       <BiggerCenterContainer>
         <Stepper steps={2} current={1} className="mb-12" />
         <Heading2 className="!mt-0 !text-3xl">
@@ -61,6 +121,13 @@ export function OnboardingPage() {
         </Heading2>
         <Paragraph className="max-w-[360px]">
           {t("onboarding.start.explainer")}
+          <div
+            className="pt-4 flex cursor-pointer items-center text-type-link"
+            onClick={() => setShowModal(true)}
+          >
+            <p>More info</p>
+            <Icon className="pl-2" icon={Icons.CIRCLE_QUESTION} />
+          </div>
         </Paragraph>
 
         {/* Desktop Cards */}