+26 -8

src/components/layout/Navigation.tsx

reviewed

··· 9 9 import { useNotifications } from "@/components/overlays/notificationsModal"; 10 10 import { Lightbar } from "@/components/utils/Lightbar"; 11 11 import { useAuth } from "@/hooks/auth/useAuth"; 12 12 + import { useIsDesktopApp } from "@/hooks/useIsDesktopApp"; 12 13 import { BlurEllipsis } from "@/pages/layouts/SubPageLayout"; 13 14 import { conf } from "@/setup/config"; 14 15 import { useBannerSize } from "@/stores/banner"; ··· 21 22 noLightbar?: boolean; 22 23 doBackground?: boolean; 23 24 clearBackground?: boolean; 25 25 + hideBrandPill?: boolean; 24 26 } 25 27 26 28 export function Navigation(props: NavigationProps) { ··· 29 31 const { loggedIn } = useAuth(); 30 32 const [scrollPosition, setScrollPosition] = useState(0); 31 33 const { openNotifications, getUnreadCount } = useNotifications(); 34 34 + const isDesktopApp = useIsDesktopApp(); 35 35 + 36 36 + const handleDesktopSettings = () => { 37 37 + window.dispatchEvent(new CustomEvent("pstream-desktop-settings")); 38 38 + }; 32 39 33 40 useEffect(() => { 34 41 const handleScroll = () => { ··· 136 143 <div className={classNames("fixed left-0 right-0 flex items-center")}> 137 144 <div className="px-7 py-5 relative z-[60] flex flex-1 items-center justify-between"> 138 145 <div className="flex items-center space-x-1.5 ssm:space-x-3 pointer-events-auto"> 139 139 - <Link 140 140 - className="block tabbable rounded-full text-xs ssm:text-base" 141 141 - to="/" 142 142 - onClick={() => window.scrollTo(0, 0)} 143 143 - > 144 144 - <BrandPill clickable header /> 145 145 - </Link> 146 146 + {!(props.hideBrandPill && isDesktopApp) && ( 147 147 + <Link 148 148 + className="block tabbable rounded-full text-xs ssm:text-base" 149 149 + to="/" 150 150 + onClick={() => window.scrollTo(0, 0)} 151 151 + > 152 152 + <BrandPill clickable header /> 153 153 + </Link> 154 154 + )} 146 155 <a 147 156 href={conf().DISCORD_LINK} 148 157 target="_blank" ··· 202 211 })()} 203 212 </a> 204 213 </div> 205 205 - <div className="relative pointer-events-auto"> 214 214 + <div className="relative pointer-events-auto flex items-center gap-2"> 215 215 + {isDesktopApp && ( 216 216 + <button 217 217 + type="button" 218 218 + onClick={handleDesktopSettings} 219 219 + className="text-xl text-white tabbable rounded-full backdrop-blur-lg" 220 220 + > 221 221 + <IconPatch icon={Icons.GEAR} clickable downsized navigation /> 222 222 + </button> 223 223 + )} 206 224 <LinksDropdown> 207 225 {loggedIn ? <UserAvatar withName /> : <NoUserAvatar />} 208 226 </LinksDropdown>

+3

src/hooks/useIsDesktopApp.ts

reviewed

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

+1

src/pages/layouts/HomeLayout.tsx

reviewed

··· 30 30 bg={enableFeatured ? true : props.showBg} 31 31 clearBackground={clearBackground} 32 32 noLightbar={enableFeatured} 33 33 + hideBrandPill 33 34 /> 34 35 {props.children} 35 36 </FooterView>

+3 -1

src/pages/parts/home/HeroPart.tsx

reviewed

··· 6 6 import { ThinContainer } from "@/components/layout/ThinContainer"; 7 7 import { useSlashFocus } from "@/components/player/hooks/useSlashFocus"; 8 8 import { HeroTitle } from "@/components/text/HeroTitle"; 9 9 + import { useIsDesktopApp } from "@/hooks/useIsDesktopApp"; 9 10 import { useIsIOS, useIsMobile, useIsPWA } from "@/hooks/useIsMobile"; 10 11 import { useIsTV } from "@/hooks/useIsTv"; 11 12 import { useRandomTranslation } from "@/hooks/useRandomTranslation"; ··· 46 47 const bannerSize = useBannerSize(); 47 48 const { isMobile } = useIsMobile(); 48 49 const { isTV } = useIsTV(); 50 50 + const isDesktopApp = useIsDesktopApp(); 49 51 50 52 const stickStateChanged = useCallback( 51 53 (isFixed: boolean) => { ··· 81 83 showTitle ? "mt-44" : "mt-4", 82 84 )} 83 85 > 84 84 - {showTitle && (!isTV || search.length === 0) ? ( 86 86 + {showTitle && (!isTV || search.length === 0) && !isDesktopApp ? ( 85 87 <div className="relative z-10 mb-16"> 86 88 <HeroTitle className="mx-auto max-w-md">{title}</HeroTitle> 87 89 </div>