+20 -20

components/ActionBar/Navigation.tsx

reviewed

··· 11 11 ReaderReadSmall, 12 12 ReaderUnreadSmall, 13 13 } from "components/Icons/ReaderSmall"; 14 14 - import { NotificationsUnreadSmall } from "components/Icons/NotificationSmall"; 14 14 + import { 15 15 + NotificationsReadSmall, 16 16 + NotificationsUnreadSmall, 17 17 + } from "components/Icons/NotificationSmall"; 15 18 import { SpeedyLink } from "components/SpeedyLink"; 16 19 import { NotificationInstance } from "twilio/lib/rest/api/v2010/account/notification"; 17 20 import { getIdentityData } from "actions/getIdentityData"; ··· 51 54 (pub) => pub.uri === props.publication, 52 55 ); 53 56 return ( 54 54 - <div className="flex gap-1 pr-2"> 57 57 + <div className="flex gap-1 "> 55 58 <Popover 56 59 onOpenAutoFocus={(e) => e.preventDefault()} 57 60 asChild ··· 59 62 trigger={ 60 63 <div className="shrink-0 p-1 text-accent-contrast h-full flex gap-2 font-bold items-center"> 61 64 <MenuSmall /> 62 62 - {props.currentPage !== "notifications" && ( 65 65 + {/*{props.currentPage !== "notifications" && ( 63 66 <div className="truncate max-w-[72px]"> 64 67 {props.currentPage === "home" ? ( 65 68 <>Home</> ··· 71 74 thisPublication && <>{thisPublication.name}</> 72 75 ) : null} 73 76 </div> 74 74 - )} 77 77 + )}*/} 75 78 </div> 76 79 } 77 80 > ··· 81 84 isMobile 82 85 /> 83 86 </Popover> 87 87 + <Separator /> 84 88 <NotificationButton /> 85 89 </div> 86 90 ); ··· 103 107 subs={identity?.publication_subscriptions?.length !== 0} 104 108 /> 105 109 <DiscoverButton current={props.currentPage === "discover"} /> 106 106 - {/*{identity && ( 107 107 - <> 108 108 - <hr className="border-dashed border-border-light" /> 109 109 - <NotificationButton current={props.currentPage === "notifications"} /> 110 110 - </> 111 111 - )}*/} 112 110 113 111 <hr className="border-border-light my-1" /> 114 112 <PublicationButtons currentPubUri={thisPublication?.uri} /> ··· 162 160 ); 163 161 }; 164 162 165 165 - function NotificationButton(props: { current?: boolean }) { 163 163 + export function NotificationButton(props: { current?: boolean }) { 164 164 + let unreads = true; 166 165 // let identity = await getIdentityData(); 167 166 // if (!identity?.atp_did) return; 168 167 // let { data } = await supabaseServerClient ··· 176 175 asChild 177 176 trigger={ 178 177 <ActionButton 179 179 - icon={<NotificationsUnreadSmall />} 178 178 + nav 179 179 + labelOnMobile={false} 180 180 + icon={ 181 181 + unreads ? ( 182 182 + <NotificationsUnreadSmall className="text-accent-contrast" /> 183 183 + ) : ( 184 184 + <NotificationsReadSmall /> 185 185 + ) 186 186 + } 180 187 label="Notifications" 181 188 className={props.current ? "bg-bg-page! border-border-light!" : ""} 182 189 /> 183 190 } 184 191 > 185 185 - <div className="flex flex-col gap-6 pt-3"> 186 186 - {/*{notifications.map((n) => { 187 187 - if (n.type === "comment") { 188 188 - n; 189 189 - return <CommentNotification key={n.id} {...n} />; 190 190 - } 191 191 - })}*/} 192 192 - </div> 192 192 + <div className="flex flex-col gap-6 pt-3"></div> 193 193 <SpeedyLink href={"/notifications"}>See All</SpeedyLink> 194 194 </Popover> 195 195 );

+3 -1

components/PageLayouts/DashboardLayout.tsx

reviewed

··· 8 8 DesktopNavigation, 9 9 MobileNavigation, 10 10 navPages, 11 11 + NotificationButton, 11 12 } from "components/ActionBar/Navigation"; 12 13 import { create } from "zustand"; 13 14 import { Popover } from "components/Popover"; ··· 139 140 const tabParam = searchParams.get("tab"); 140 141 141 142 // Initialize tab from search param if valid, otherwise use default 142 142 - const initialTab = tabParam && props.tabs[tabParam] ? tabParam : props.defaultTab; 143 143 + const initialTab = 144 144 + tabParam && props.tabs[tabParam] ? tabParam : props.defaultTab; 143 145 let [tab, setTab] = useState<keyof T>(initialTab); 144 146 145 147 // Custom setter that updates both state and URL