update to show settings button and hide pstream logo when desktop app user agent is detected

src/components/layout/Navigation.tsx

@@ -9,6 +9,7 @@ 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";
@@ -21,6 +22,7 @@ export interface NavigationProps {
   noLightbar?: boolean;
   doBackground?: boolean;
   clearBackground?: boolean;
+  hideBrandPill?: boolean;
 }
 
 export function Navigation(props: NavigationProps) {
@@ -29,6 +31,11 @@ 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 = () => {
@@ -136,13 +143,15 @@ 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">
-              <Link
-                className="block tabbable rounded-full text-xs ssm:text-base"
-                to="/"
-                onClick={() => window.scrollTo(0, 0)}
-              >
-                <BrandPill clickable header />
-              </Link>
+              {!(props.hideBrandPill && isDesktopApp) && (
+                <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"
@@ -202,7 +211,16 @@ export function Navigation(props: NavigationProps) {
                 })()}
               </a>
             </div>
-            <div className="relative pointer-events-auto">
+            <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>
+              )}
               <LinksDropdown>
                 {loggedIn ? <UserAvatar withName /> : <NoUserAvatar />}
               </LinksDropdown>

src/hooks/useIsDesktopApp.ts

@@ -0,0 +1,3 @@
+export function useIsDesktopApp(): boolean {
+  return navigator.userAgent.includes("P-Stream/");
+}

src/pages/layouts/HomeLayout.tsx

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

src/pages/parts/home/HeroPart.tsx

@@ -6,6 +6,7 @@ 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";
@@ -46,6 +47,7 @@ export function HeroPart({
   const bannerSize = useBannerSize();
   const { isMobile } = useIsMobile();
   const { isTV } = useIsTV();
+  const isDesktopApp = useIsDesktopApp();
 
   const stickStateChanged = useCallback(
     (isFixed: boolean) => {
@@ -81,7 +83,7 @@ export function HeroPart({
           showTitle ? "mt-44" : "mt-4",
         )}
       >
-        {showTitle && (!isTV || search.length === 0) ? (
+        {showTitle && (!isTV || search.length === 0) && !isDesktopApp ? (
           <div className="relative z-10 mb-16">
             <HeroTitle className="mx-auto max-w-md">{title}</HeroTitle>
           </div>