+5 -7

app/(home-pages)/p/[didOrHandle]/layout.tsx

Reviewed

··· 80 80 81 81 if (!profile) return null; 82 82 83 83 + let displayName = profile.displayName || profile.handle; 84 84 + 83 85 return ( 84 86 <DashboardShell 85 87 id="profile" ··· 89 91 <Avatar 90 92 src={profile.avatar} 91 93 size="small" 92 92 - displayName={ 93 93 - profile?.displayName ? profile.displayName : profile.handle 94 94 - } 94 94 + displayName={displayName} 95 95 /> 96 96 } 97 97 - pageTitle={ 98 98 - profile?.displayName ? profile.displayName : profile.handle 99 99 - } 97 97 + pageTitle={displayName} 100 98 /> 101 99 } 102 100 tabs={{ ··· 105 103 }} 106 104 > 107 105 <DashboardPageLayout 108 108 - pageTitle={profile?.displayName ? profile.displayName : profile.handle} 106 106 + pageTitle={displayName} 109 107 scrollKey="dashboard-profile-default" 110 108 showHeader={false} 111 109 >

+3

components/ActionBar/ActionButton.tsx

Reviewed

··· 15 15 label: React.ReactNode; 16 16 primary?: boolean; 17 17 secondary?: boolean; 18 18 + active?: boolean; 18 19 className?: string; 19 20 subtext?: string; 20 21 labelOnMobile?: boolean; ··· 27 28 label, 28 29 primary, 29 30 secondary, 31 31 + active, 30 32 labelOnMobile, 31 33 subtext, 32 34 className, ··· 64 66 ? "border-accent-contrast sm:hover:outline-accent-contrast focus:outline-accent-1 text-accent-contrast hover:border-accent-contrast focus:border-accent-contrast font-bold" 65 67 : "border-transparent text-secondary sm:hover:border-border justify-start! max-w-full" 66 68 } 69 69 + ${active ? "bg-bg-page! border-border-light!" : ""} 67 70 ${className} 68 71 `} 69 72 >

+3 -7

components/ActionBar/DesktopNavigation.tsx

Reviewed

··· 5 5 NotificationButton, 6 6 ReaderButton, 7 7 WriterButton, 8 8 + useIsOnWriterPage, 8 9 } from "./NavigationButtons"; 9 10 import { PublicationButtons } from "./Publications"; 10 11 import { Sidebar } from "./Sidebar"; ··· 49 50 let { identity } = useIdentityData(); 50 51 let pathname = usePathname(); 51 52 let activeTabHref = props.tabs ? pickActiveTabHref(pathname, props.tabs) : null; 52 52 - let onWriterPage = 53 53 - pathname.startsWith("/home") || 54 54 - pathname.startsWith("/looseleafs") || 55 55 - pathname.startsWith("/notifications"); 53 53 + let onWriterPage = useIsOnWriterPage(); 56 54 57 55 return ( 58 56 <> ··· 73 71 labelOnMobile 74 72 icon={icon ?? <TabsSmall />} 75 73 label={name} 76 76 - className={ 77 77 - href === activeTabHref ? "bg-bg-page! border-border-light!" : "" 78 78 - } 74 74 + active={href === activeTabHref} 79 75 /> 80 76 </SpeedyLink> 81 77 ))}

+14 -17

components/ActionBar/NavigationButtons.tsx

Reviewed

··· 25 25 return pathname === href || pathname.startsWith(href + "/"); 26 26 } 27 27 28 28 + export const WRITER_PATHS = ["/home", "/looseleafs", "/notifications"] as const; 29 29 + 30 30 + export function useIsOnWriterPage() { 31 31 + let pathname = usePathname(); 32 32 + return WRITER_PATHS.some((p) => pathname.startsWith(p)); 33 33 + } 34 34 + 28 35 export const HomeButton = (props: { className?: string }) => { 29 36 let current = useIsActive("/home"); 30 37 return ( ··· 32 39 <ActionButton 33 40 icon={<HomeSmall />} 34 41 label="Home" 35 35 - className={`${current ? "bg-bg-page! border-border-light!" : ""} w-full! ${props.className}`} 42 42 + active={current} 43 43 + className={`w-full! ${props.className}`} 36 44 /> 37 45 </SpeedyLink> 38 46 ); 39 47 }; 40 48 41 49 export const WriterButton = () => { 42 42 - let pathname = usePathname(); 43 43 - let current = 44 44 - pathname.startsWith("/home") || 45 45 - pathname.startsWith("/looseleafs") || 46 46 - pathname.startsWith("/notifications"); 50 50 + let current = useIsOnWriterPage(); 47 51 return ( 48 52 <SpeedyLink href={"/home"} className="hover:!no-underline"> 49 49 - <ActionButton 50 50 - icon={<WriterSmall />} 51 51 - label="Write" 52 52 - className={current ? "bg-bg-page! border-border-light!" : ""} 53 53 - /> 53 53 + <ActionButton icon={<WriterSmall />} label="Write" active={current} /> 54 54 </SpeedyLink> 55 55 ); 56 56 }; ··· 59 59 let current = useIsActive("/reader"); 60 60 return ( 61 61 <SpeedyLink href={"/reader"} className="hover:no-underline!"> 62 62 - <ActionButton 63 63 - icon={<ReaderUnreadSmall />} 64 64 - label="Read" 65 65 - className={current ? "bg-bg-page! border-border-light!" : ""} 66 66 - /> 62 62 + <ActionButton icon={<ReaderUnreadSmall />} label="Read" active={current} /> 67 63 </SpeedyLink> 68 64 ); 69 65 }; ··· 85 81 ) 86 82 } 87 83 label="Notifications" 88 88 - className={`${current ? "bg-bg-page! border-border-light!" : ""} ${unreads ? "text-accent-contrast!" : ""}`} 84 84 + active={current} 85 85 + className={unreads ? "text-accent-contrast!" : ""} 89 86 /> 90 87 </SpeedyLink> 91 88 );