move app setting button

src/assets/locales/en.json

@@ -607,7 +607,8 @@
       "settings": "Settings",
       "support": "Support",
       "discover": "Discover",
-      "development": "Development"
+      "development": "Development",
+      "desktop": "App Settings"
     }
   },
   "notFound": {

src/components/LinksDropdown.tsx

@@ -291,6 +291,14 @@ export function LinksDropdown(props: { children: React.ReactNode }) {
           <DropdownLink href="/settings" icon={Icons.SETTINGS}>
             {t("navigation.menu.settings")}
           </DropdownLink>
+          <DropdownLink
+            onClick={() =>
+              window.dispatchEvent(new CustomEvent("pstream-desktop-settings"))
+            }
+            icon={Icons.GEAR}
+          >
+            {t("navigation.menu.desktop")}
+          </DropdownLink>
           <DropdownLink href="/watch-history" icon={Icons.CLOCK}>
             {t("home.watchHistory.sectionTitle")}
           </DropdownLink>

src/components/layout/Navigation.tsx

@@ -9,7 +9,6 @@ import { LinksDropdown } from "@/components/LinksDropdown";
 import { useNotifications } from "@/components/overlays/notificationsModal";
 import { Lightbar } from "@/components/utils/Lightbar";
 import { useAuth } from "@/hooks/auth/useAuth";
-import { useIsDesktopApp } from "@/hooks/useIsDesktopApp";
 import { BlurEllipsis } from "@/pages/layouts/SubPageLayout";
 import { conf } from "@/setup/config";
 import { useBannerSize } from "@/stores/banner";
@@ -22,7 +21,6 @@ export interface NavigationProps {
   noLightbar?: boolean;
   doBackground?: boolean;
   clearBackground?: boolean;
-  hideBrandPill?: boolean;
 }
 
 export function Navigation(props: NavigationProps) {
@@ -31,11 +29,6 @@ export function Navigation(props: NavigationProps) {
   const { loggedIn } = useAuth();
   const [scrollPosition, setScrollPosition] = useState(0);
   const { openNotifications, getUnreadCount } = useNotifications();
-  const isDesktopApp = useIsDesktopApp();
-
-  const handleDesktopSettings = () => {
-    window.dispatchEvent(new CustomEvent("pstream-desktop-settings"));
-  };
 
   useEffect(() => {
     const handleScroll = () => {
@@ -143,15 +136,13 @@ export function Navigation(props: NavigationProps) {
         <div className={classNames("fixed left-0 right-0 flex items-center")}>
           <div className="px-7 py-5 relative z-[60] flex flex-1 items-center justify-between">
             <div className="flex items-center space-x-1.5 ssm:space-x-3 pointer-events-auto">
-              {!(props.hideBrandPill && isDesktopApp) && (
-                <Link
-                  className="block tabbable rounded-full text-xs ssm:text-base"
-                  to="/"
-                  onClick={() => window.scrollTo(0, 0)}
-                >
-                  <BrandPill clickable header />
-                </Link>
-              )}
+              <Link
+                className="block tabbable rounded-full text-xs ssm:text-base"
+                to="/"
+                onClick={() => window.scrollTo(0, 0)}
+              >
+                <BrandPill clickable header />
+              </Link>
               <a
                 href={conf().DISCORD_LINK}
                 target="_blank"
@@ -211,16 +202,7 @@ export function Navigation(props: NavigationProps) {
                 })()}
               </a>
             </div>
-            <div className="relative pointer-events-auto flex items-center gap-2">
-              {isDesktopApp && (
-                <button
-                  type="button"
-                  onClick={handleDesktopSettings}
-                  className="text-xl text-white tabbable rounded-full backdrop-blur-lg"
-                >
-                  <IconPatch icon={Icons.GEAR} clickable downsized navigation />
-                </button>
-              )}
+            <div className="relative pointer-events-auto">
               <LinksDropdown>
                 {loggedIn ? <UserAvatar withName /> : <NoUserAvatar />}
               </LinksDropdown>

src/pages/layouts/HomeLayout.tsx

@@ -30,7 +30,6 @@ export function HomeLayout(props: {
         bg={enableFeatured ? true : props.showBg}
         clearBackground={clearBackground}
         noLightbar={enableFeatured}
-        hideBrandPill
       />
       {props.children}
     </FooterView>

src/pages/parts/home/HeroPart.tsx

@@ -6,7 +6,6 @@ import { SearchBarInput } from "@/components/form/SearchBar";
 import { ThinContainer } from "@/components/layout/ThinContainer";
 import { useSlashFocus } from "@/components/player/hooks/useSlashFocus";
 import { HeroTitle } from "@/components/text/HeroTitle";
-import { useIsDesktopApp } from "@/hooks/useIsDesktopApp";
 import { useIsIOS, useIsMobile, useIsPWA } from "@/hooks/useIsMobile";
 import { useIsTV } from "@/hooks/useIsTv";
 import { useRandomTranslation } from "@/hooks/useRandomTranslation";
@@ -47,7 +46,6 @@ export function HeroPart({
   const bannerSize = useBannerSize();
   const { isMobile } = useIsMobile();
   const { isTV } = useIsTV();
-  const isDesktopApp = useIsDesktopApp();
 
   const stickStateChanged = useCallback(
     (isFixed: boolean) => {
@@ -83,7 +81,7 @@ export function HeroPart({
           showTitle ? "mt-44" : "mt-4",
         )}
       >
-        {showTitle && (!isTV || search.length === 0) && !isDesktopApp ? (
+        {showTitle && (!isTV || search.length === 0) ? (
           <div className="relative z-10 mb-16">
             <HeroTitle className="mx-auto max-w-md">{title}</HeroTitle>
           </div>