Remove extension banner and update dropdown

src/assets/locales/en.json

@@ -201,7 +201,8 @@
       "logout": "Log out",
       "register": "Sync to sudo-cloud",
       "settings": "Settings",
-      "support": "Support"
+      "support": "Support",
+      "discover": "Discover"
     }
   },
   "notFound": {

src/components/LinksDropdown.tsx

@@ -142,6 +142,9 @@ export function LinksDropdown(props: { children: React.ReactNode }) {
           <DropdownLink href="/about" icon={Icons.CIRCLE_QUESTION}>
             {t("navigation.menu.about")}
           </DropdownLink>
+          <DropdownLink href="/discover" icon={Icons.RISING_STAR}>
+            {t("navigation.menu.discover")}
+          </DropdownLink>
           {deviceName ? (
             <DropdownLink
               className="!text-type-danger opacity-75 hover:opacity-100"
@@ -158,6 +161,10 @@ export function LinksDropdown(props: { children: React.ReactNode }) {
               icon={Icons.DISCORD}
             />
             <CircleDropdownLink href={conf().GITHUB_LINK} icon={Icons.GITHUB} />
+            <CircleDropdownLink
+              href={conf().TWITTER_LINK}
+              icon={Icons.TWITTER}
+            />
             <CircleDropdownLink href="/support" icon={Icons.MAIL} />
           </div>
         </div>

src/pages/Discover.tsx

@@ -275,34 +275,32 @@ export function Discover() {
                   }`,
                 )
               }
-              className="text-center relative mt-3 ml-[0.285em] mb-3 mr-[0.2em]"
+              className="text-center relative mt-3 ml-[0.285em] mb-3 mr-[0.2em] transition-transform hover:scale-105 duration-[0.45s]"
               style={{ flex: `0 0 ${movieWidth}` }} // Set a fixed width for each movie
             >
-              <div className="relative transition-transform hover:scale-105 duration-[0.45s]">
+              <Flare.Base className="group cursor-pointer rounded-xl relative p-[0.65em] bg-background-main transition-colors duration-300 bg-transparent">
-                <Flare.Base className="group cursor-pointer rounded-xl relative p-[0.65em] bg-background-main transition-colors duration-300">
+                <Flare.Light
-                  <Flare.Light
+                  flareSize={300}
-                    flareSize={300}
+                  cssColorVar="--colors-mediaCard-hoverAccent"
-                    cssColorVar="--colors-mediaCard-hoverAccent"
+                  backgroundClass="bg-mediaCard-hoverBackground duration-200"
-                    backgroundClass="bg-mediaCard-hoverBackground duration-200"
+                  className="rounded-xl bg-background-main group-hover:opacity-100"
-                    className="rounded-xl bg-background-main group-hover:opacity-100"
+                />
-                  />
+                <img
-                  <img
+                  src={`https://image.tmdb.org/t/p/w500${media.poster_path}`}
-                    src={`https://image.tmdb.org/t/p/w500${media.poster_path}`}
+                  alt="failed to fetch :("
-                    alt="failed to fetch :("
+                  loading="lazy"
-                    loading="lazy"
+                  className="rounded-xl relative"
-                    className="rounded-xl relative"
+                />
-                  />
+                <h1 className="group relative pt-2 text-[13.5px] whitespace-normal duration-[0.35s] font-semibold text-white opacity-0 group-hover:opacity-100">
-                  <h1 className="group relative pt-2 text-[13.5px] whitespace-normal duration-[0.35s] font-semibold text-white opacity-0 group-hover:opacity-100">
+                  {isTVShow
-                    {isTVShow
+                    ? (media.name?.length ?? 0) > 32
-                      ? (media.name?.length ?? 0) > 32
+                      ? `${media.name?.slice(0, 32)}...`
-                        ? `${media.name?.slice(0, 32)}...`
+                      : media.name
-                        : media.name
+                    : (media.title?.length ?? 0) > 32
-                      : (media.title?.length ?? 0) > 32
+                      ? `${media.title?.slice(0, 32)}...`
-                        ? `${media.title?.slice(0, 32)}...`
+                      : media.title}
-                        : media.title}
+                </h1>
-                  </h1>
+              </Flare.Base>
-                </Flare.Base>
-              </div>
             </a>
           ))}
         </div>

src/setup/Layout.tsx

@@ -1,39 +1,13 @@
-import { ReactNode, useEffect, useState } from "react";
+import { ReactNode } from "react";
 
 import { useBannerSize, useBannerStore } from "@/stores/banner";
-import { ExtensionBanner } from "@/stores/banner/BannerLocation";
-import { getExtensionState } from "@/utils/extension";
-import type { ExtensionStatus } from "@/utils/extension";
 
 export function Layout(props: { children: ReactNode }) {
   const bannerSize = useBannerSize();
   const location = useBannerStore((s) => s.location);
-  const [extensionState, setExtensionState] =
-    useState<ExtensionStatus>("unknown");
-  const [storeLoaded, setStoreLoaded] = useState(false);
-
-  useEffect(() => {
-    let isMounted = true;
-
-    getExtensionState().then((state) => {
-      if (isMounted) {
-        setExtensionState(state);
-        setStoreLoaded(true);
-      }
-    });
-
-    return () => {
-      isMounted = false;
-    };
-  }, []);
 
   return (
     <div>
-      {storeLoaded && extensionState !== "success" ? (
-        <div className="fixed inset-x-0 z-[1000]">
-          <ExtensionBanner extensionState={extensionState} />
-        </div>
-      ) : null}
       <div
         style={{
           paddingTop: location === null ? `${bannerSize}px` : "0px",

src/stores/banner/BannerLocation.tsx

@@ -1,10 +1,8 @@
 import { useEffect } from "react";
-import { Trans, useTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
-import { useLocation, useNavigate } from "react-router-dom";
 
 import { Icon, Icons } from "@/components/Icon";
 import { useBannerStore, useRegisterBanner } from "@/stores/banner";
-import type { ExtensionStatus } from "@/utils/extension";
 
 export function Banner(props: {
   children: React.ReactNode;
@@ -55,83 +53,6 @@ export function Banner(props: {
   );
 }
 
-// This jawn is for advertising the extension for le skids
-export function ExtensionBanner(props: {
-  location?: string;
-  extensionState: ExtensionStatus;
-}) {
-  const navigate = useNavigate();
-  const setLocation = useBannerStore((s) => s.setLocation);
-  const currentLocation = useBannerStore((s) => s.location);
-  const loc = props.location ?? null;
-  const { pathname } = useLocation();
-  const isEligible = !(
-    /CrOS/.test(navigator.userAgent) ||
-    /TV/.test(navigator.userAgent) ||
-    /iPhone|iPad|iPod/i.test(navigator.userAgent)
-  );
-
-  useEffect(() => {
-    if (loc) {
-      setLocation(loc);
-      return () => {
-        setLocation(null);
-      };
-    }
-  }, [setLocation, loc]);
-
-  const hideBannerFlag = sessionStorage.getItem("hideBanner");
-  if (hideBannerFlag) {
-    return null;
-  }
-
-  if (currentLocation !== loc || pathname === "/onboarding/extension")
-    return null;
-
-  // Show the banner with a 36.5% chance or not if users don't meet requirements
-  if (isEligible && Math.random() < 0.365) {
-    let bannerText = "";
-    switch (props.extensionState) {
-      case "noperms":
-        bannerText = "The extension does'nt have the necessary permissions.";
-        break;
-      case "outdated":
-        bannerText =
-          "Your extension is outdated. Please update it <bold>here</bold>.";
-        break;
-      case "disallowed":
-        bannerText =
-          "The extension is not enabled, click <bold>here</bold> to fix it.";
-        break;
-      case "failed":
-        bannerText =
-          "The extension is broken... Please click <bold>here</bold>.";
-        break;
-      default:
-        bannerText =
-          "You don't have the extension! Download it <bold>here</bold> for better quality.";
-        break;
-    }
-
-    return (
-      <Banner id="extension" type="info">
-        <div
-          onClick={() => navigate("/onboarding/extension")}
-          style={{ cursor: "pointer" }}
-        >
-          <Trans
-            i18nKey={bannerText}
-            components={{
-              bold: <span className="font-bold" />,
-            }}
-          />
-        </div>
-      </Banner>
-    );
-  }
-  return null;
-}
-
 export function BannerLocation(props: { location?: string }) {
   const { t } = useTranslation();
   const isOnline = useBannerStore((s) => s.isOnline);