Add a support page!

src/assets/locales/en.json

@@ -22,7 +22,7 @@
       "body": "Well sudo-flix has a twitter account that can be found in the footer of this page as well as a link to the source code on Github.",
       "title": "How can I find out more?"
     },
-    "title": "About sudo-flix (^▽^)👍"
+    "title": "About sudo-flix (^▽^)"
   },
   "actions": {
     "copied": "Copied",
@@ -105,6 +105,7 @@
     "pages": {
       "about": "About",
       "dmca": "DMCA",
+      "support": "Support",
       "login": "Login",
       "onboarding": "Setup",
       "pagetitle": "{{title}} - sudo-flix",
@@ -431,6 +432,18 @@
       "verifyingHumanity": "Verifying your humanity... (^▽^)👍"
     }
   },
+  "support": {
+    "title": "Support",
+    "text": "sudo-flix is designed to be as user-friendly as possible. However, people still have questions and issues. This page is here to help resolve these shortcomings",
+    "q1": {
+      "body": "Well, you can join the official <0>movie-web discord</0> and ask questions there or you can email the one provided at the bottom of this page.",
+      "title": "Where can I get help?"
+    },
+    "q2": {
+      "body": "We have a <0>GitHub</0> where you can create a detailed issue in our repository. Additionally, if you wish, you can create a pull request to fix the issue yourself.",
+      "title": "How can I report a bug or issue?"
+    }
+  },
   "screens": {
     "dmca": {
       "text": "Welcome to sudo-flix's DMCA contact page. If you believe your copyrighted work has been improperly used on our platform (😢), please send a detailed DMCA notice to: <bold>sudo-flix@proton.me</bold> below. Please include a description of the copyrighted material, your contact details, and a statement of good faith belief. We're committed to resolving these matters promptly and appreciate your cooperation.",

src/components/LinksDropdown.tsx

@@ -161,6 +161,7 @@ export function LinksDropdown(props: { children: React.ReactNode }) {
               icon={Icons.DISCORD}
             />
             <CircleDropdownLink href={conf().GITHUB_LINK} icon={Icons.GITHUB} />
+            <CircleDropdownLink href="/support" icon={Icons.MAIL} />
             <CircleDropdownLink
               href={conf().DONATION_LINK}
               icon={Icons.DONATION}

src/components/UserIcon.tsx

@@ -18,7 +18,7 @@ export interface UserIconProps {
 
 const iconList: Record<UserIcons, string> = {
   cat: `<svg xmlns="http://www.w3.org/2000/svg" height="1.2em" width="1.2em" viewBox="0 0 576 512"><path opacity="1" fill="currentColor" d="M320 192h17.1c22.1 38.3 63.5 64 110.9 64c11 0 21.8-1.4 32-4v4 32V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V339.2L280 448h56c17.7 0 32 14.3 32 32s-14.3 32-32 32H192c-53 0-96-43-96-96V192.5c0-16.1-12-29.8-28-31.8l-7.9-1c-17.5-2.2-30-18.2-27.8-35.7s18.2-30 35.7-27.8l7.9 1c48 6 84.1 46.8 84.1 95.3v85.3c34.4-51.7 93.2-85.8 160-85.8zm160 26.5v0c-10 3.5-20.8 5.5-32 5.5c-28.4 0-54-12.4-71.6-32h0c-3.7-4.1-7-8.5-9.9-13.2C357.3 164 352 146.6 352 128v0V32 12 10.7C352 4.8 356.7 .1 362.6 0h.2c3.3 0 6.4 1.6 8.4 4.2l0 .1L384 21.3l27.2 36.3L416 64h64l4.8-6.4L512 21.3 524.8 4.3l0-.1c2-2.6 5.1-4.2 8.4-4.2h.2C539.3 .1 544 4.8 544 10.7V12 32v96c0 17.3-4.6 33.6-12.6 47.6c-11.3 19.8-29.6 35.2-51.4 42.9zM432 128a16 16 0 1 0 -32 0 16 16 0 1 0 32 0zm48 16a16 16 0 1 0 0-32 16 16 0 1 0 0 32z"/></svg>`,
-  weed: `<svg xmlns="http://www.w3.org/2000/svg" height="1.3em" width="1.3em" viewBox="0 0 500 512"><path opacity="1" fill="currentColor" d="M256 0c5.3 0 10.3 2.7 13.3 7.1c15.8 23.5 36.7 63.7 49.2 109c7.2 26.4 11.8 55.2 10.4 84c11.5-8.8 23.7-16.7 35.8-23.6c41-23.3 84.4-36.9 112.2-42.5c5.2-1 10.7 .6 14.4 4.4s5.4 9.2 4.4 14.5c-5.6 27.7-19.3 70.9-42.7 111.7c-9.1 15.9-19.9 31.7-32.4 46.3c27.8 6.6 52.4 17.3 67.2 25.5c5.1 2.8 8.2 8.2 8.2 14s-3.2 11.2-8.2 14c-15.2 8.4-40.9 19.5-69.8 26.1c-20.2 4.6-42.9 7.2-65.2 4.6l8.3 33.1c1.5 6.1-.6 12.4-5.5 16.4s-11.6 4.6-17.2 1.9L280 417.2V488c0 13.3-10.7 24-24 24s-24-10.7-24-24V417.2l-58.5 29.1c-5.6 2.8-12.3 2.1-17.2-1.9s-7-10.3-5.5-16.4l8.3-33.1c-22.2 2.6-45 0-65.2-4.6c-28.9-6.6-54.6-17.6-69.8-26.1c-5.1-2.8-8.2-8.2-8.2-14s3.2-11.2 8.2-14c14.8-8.2 39.4-18.8 67.2-25.5C78.9 296.3 68.1 280.5 59 264.6c-23.4-40.8-37.1-84-42.7-111.7c-1.1-5.2 .6-10.7 4.4-14.5s9.2-5.4 14.4-4.4c27.9 5.5 71.2 19.2 112.2 42.5c12.1 6.9 24.3 14.7 35.8 23.6c-1.4-28.7 3.1-57.6 10.4-84c12.5-45.3 33.4-85.5 49.2-109c3-4.4 8-7.1 13.3-7.1z"/></svg>`,
+  weed: `<svg xmlns="http://www.w3.org/2000/svg" height="1.18em" width="1.18em" viewBox="0 0 500 512"><path opacity="1" fill="currentColor" d="M256 0c5.3 0 10.3 2.7 13.3 7.1c15.8 23.5 36.7 63.7 49.2 109c7.2 26.4 11.8 55.2 10.4 84c11.5-8.8 23.7-16.7 35.8-23.6c41-23.3 84.4-36.9 112.2-42.5c5.2-1 10.7 .6 14.4 4.4s5.4 9.2 4.4 14.5c-5.6 27.7-19.3 70.9-42.7 111.7c-9.1 15.9-19.9 31.7-32.4 46.3c27.8 6.6 52.4 17.3 67.2 25.5c5.1 2.8 8.2 8.2 8.2 14s-3.2 11.2-8.2 14c-15.2 8.4-40.9 19.5-69.8 26.1c-20.2 4.6-42.9 7.2-65.2 4.6l8.3 33.1c1.5 6.1-.6 12.4-5.5 16.4s-11.6 4.6-17.2 1.9L280 417.2V488c0 13.3-10.7 24-24 24s-24-10.7-24-24V417.2l-58.5 29.1c-5.6 2.8-12.3 2.1-17.2-1.9s-7-10.3-5.5-16.4l8.3-33.1c-22.2 2.6-45 0-65.2-4.6c-28.9-6.6-54.6-17.6-69.8-26.1c-5.1-2.8-8.2-8.2-8.2-14s3.2-11.2 8.2-14c14.8-8.2 39.4-18.8 67.2-25.5C78.9 296.3 68.1 280.5 59 264.6c-23.4-40.8-37.1-84-42.7-111.7c-1.1-5.2 .6-10.7 4.4-14.5s9.2-5.4 14.4-4.4c27.9 5.5 71.2 19.2 112.2 42.5c12.1 6.9 24.3 14.7 35.8 23.6c-1.4-28.7 3.1-57.6 10.4-84c12.5-45.3 33.4-85.5 49.2-109c3-4.4 8-7.1 13.3-7.1z"/></svg>`,
   userGroup: `<svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 640 512"><path opacity="1" fill="currentColor" d="M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM609.3 512H471.4c5.4-9.4 8.6-20.3 8.6-32v-8c0-60.7-27.1-115.2-69.8-151.8c2.4-.1 4.7-.2 7.1-.2h61.4C567.8 320 640 392.2 640 481.3c0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9C372.4 196.5 384 163.6 384 128c0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z"/></svg>`,
   couch: `<svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 640 512"><path opacity="1" fill="currentColor" d="M64 160C64 89.3 121.3 32 192 32H448c70.7 0 128 57.3 128 128v33.6c-36.5 7.4-64 39.7-64 78.4v48H128V272c0-38.7-27.5-71-64-78.4V160zM544 272c0-20.9 13.4-38.7 32-45.3c5-1.8 10.4-2.7 16-2.7c26.5 0 48 21.5 48 48V448c0 17.7-14.3 32-32 32H576c-17.7 0-32-14.3-32-32H96c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32V272c0-26.5 21.5-48 48-48c5.6 0 11 1 16 2.7c18.6 6.6 32 24.4 32 45.3v48 32h32H512h32V320 272z"/></svg>`,
   mobile: `<svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 384 512"><path opacity="1" fill="currentColor" d="M16 64C16 28.7 44.7 0 80 0H304c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H80c-35.3 0-64-28.7-64-64V64zM144 448c0 8.8 7.2 16 16 16h64c8.8 0 16-7.2 16-16s-7.2-16-16-16H160c-8.8 0-16 7.2-16 16zM304 64H80V384H304V64z"/></svg>`,

src/pages/Support.tsx

@@ -0,0 +1,105 @@
+import classNames from "classnames";
+import React, { useState } from "react";
+import { Trans, useTranslation } from "react-i18next";
+
+import { Icon, Icons } from "@/components/Icon";
+import { ThinContainer } from "@/components/layout/ThinContainer";
+import { MwLink } from "@/components/text/Link";
+import { Heading1, Paragraph } from "@/components/utils/Text";
+import { PageTitle } from "@/pages/parts/util/PageTitle";
+import { conf } from "@/setup/config";
+
+import { SubPageLayout } from "./layouts/SubPageLayout";
+
+// From about just removed the numbers
+export function Ol(props: { items: React.ReactNode[] }) {
+  return (
+    <ol>
+      {props.items.map((child, i) => {
+        return (
+          <li
+            className={classNames(
+              "grid grid-cols-[auto,1fr] gap-6",
+              i !== props.items.length - 1 ? "pb-12" : undefined,
+            )}
+          >
+            <div className="relative z-0">
+              <div className="w-6 h-6 rounded-full bg-about-circle text-about-circleText font-medium flex justify-center items-center relative z-10" />
+              {i !== props.items.length - 1 ? (
+                <div
+                  className="h-[calc(100%+1.5rem)] w-px absolute top-6 left-1/2 transform -translate-x-1/2"
+                  style={{
+                    backgroundImage:
+                      "linear-gradient(to bottom, transparent 5px, #1F1F29 5px, #1F1F29 10px)",
+                    backgroundSize: "10px 10px",
+                    backgroundRepeat: "Repeat",
+                  }}
+                />
+              ) : null}
+            </div>
+            <div>{child}</div>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}
+
+function Item(props: { title: string; children: React.ReactNode }) {
+  return (
+    <>
+      <p className="text-white mb-2 font-medium">{props.title}</p>
+      <div className="text-type-text">{props.children}</div>
+    </>
+  );
+}
+
+export function SupportPage() {
+  const { t } = useTranslation();
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <SubPageLayout>
+      <PageTitle subpage k="global.pages.support" />
+      <ThinContainer>
+        <Heading1>{t("support.title")}</Heading1>
+        <Paragraph>
+          <Trans
+            i18nKey="support.text"
+            components={{
+              bold: <span className="font-bold" style={{ color: "#cfcfcf" }} />,
+            }}
+          />
+        </Paragraph>
+        <Ol
+          items={[
+            <Item title={t("support.q1.title")}>
+              <Trans i18nKey="support.q1.body">
+                <MwLink to="https://movie-web.github.io/links/discord" />
+              </Trans>
+            </Item>,
+            <Item title={t("support.q2.title")}>
+              <Trans i18nKey="support.q2.body">
+                <MwLink to="https://github.com/sudo-flix/sudo-source" />
+              </Trans>
+            </Item>,
+          ]}
+        />
+        <Paragraph className="flex space-x-3 items-center">
+          <Icon icon={Icons.MAIL} />
+          <a
+            href={`mailto:${conf().DMCA_EMAIL}`}
+            style={{
+              transition: "color 0.3s ease",
+              color: isHovered ? "#cfcfcf" : "inherit",
+            }}
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+          >
+            {conf().DMCA_EMAIL ?? ""}
+          </a>
+        </Paragraph>
+      </ThinContainer>
+    </SubPageLayout>
+  );
+}

src/setup/App.tsx

@@ -25,6 +25,7 @@ import { OnboardingPage } from "@/pages/onboarding/Onboarding";
 import { OnboardingExtensionPage } from "@/pages/onboarding/OnboardingExtension";
 import { OnboardingProxyPage } from "@/pages/onboarding/OnboardingProxy";
 import { RegisterPage } from "@/pages/Register";
+import { SupportPage } from "@/pages/Support";
 import { Layout } from "@/setup/Layout";
 import { useHistoryListener } from "@/stores/history";
 import { LanguageProvider } from "@/stores/language";
@@ -147,6 +148,8 @@ function App() {
           {shouldHaveDmcaPage() ? (
             <Route path="/dmca" element={<DmcaPage />} />
           ) : null}
+          {/* Support page */}
+          <Route path="/support" element={<SupportPage />} />
           {/* Settings page */}
           <Route
             path="/settings"