leaflet.pub / leaflet
a tool for shared writing and social publishing
fork atom

add an empty state if no notifications

cozylittle.house f58771d1 0749602a

+26 -27
unified split
+7
app/(home-pages)/notifications/NotificationList.tsx
··· 19 19 let { rootEntity } = useReplicache(); 20 20 let cardBorderHidden = useEntity(rootEntity, "theme/card-border-hidden")?.data 21 21 .value; 22 + 23 + if (notifications.length === 0) 24 + return ( 25 + <div className="w-full container italic text-tertiary text-center sm:p-4 p-3"> 26 + no notifications yet... 27 + </div> 28 + ); 22 29 return ( 23 30 <div className="max-w-prose mx-auto w-full"> 24 31 <div className={`flex flex-col ${cardBorderHidden ? "gap-6" : "gap-2"}`}>
+19 -27
components/ActionBar/Navigation.tsx
··· 26 26 markAsRead, 27 27 } from "app/(home-pages)/notifications/getNotifications"; 28 28 import { DotLoader } from "components/utils/DotLoader"; 29 + import { NotificationList } from "app/(home-pages)/notifications/NotificationList"; 29 30 30 31 export type navPages = "home" | "reader" | "pub" | "discover" | "notifications"; 31 32 ··· 203 204 /> 204 205 } 205 206 > 206 - <div className="flex flex-col gap-5 text-sm"> 207 - {isLoading ? ( 208 - <div className="flex items-center justify-center gap-1 text-tertiary italic text-sm mt-8"> 209 - <span>loading</span> 210 - <DotLoader /> 211 - </div> 212 - ) : ( 213 - notifications?.map((n) => { 214 - if (n.type === "comment") { 215 - n; 216 - return ( 217 - <CommentNotification 218 - cardBorderHidden={true} 219 - key={n.id} 220 - {...n} 221 - /> 222 - ); 223 - } 224 - }) 225 - )} 226 - </div> 227 - <SpeedyLink 228 - className="flex justify-end pt-2 text-sm" 229 - href={"/notifications"} 230 - > 231 - See All 232 - </SpeedyLink> 207 + {isLoading ? ( 208 + <div className="flex items-center justify-center gap-1 text-tertiary italic text-sm p-3 sm:p-4"> 209 + <span>loading</span> 210 + <DotLoader /> 211 + </div> 212 + ) : ( 213 + <> 214 + <NotificationList notifications={notifications!} /> 215 + {notifications && notifications.length > 0 && ( 216 + <SpeedyLink 217 + className="flex justify-end pt-2 text-sm" 218 + href={"/notifications"} 219 + > 220 + See All 221 + </SpeedyLink> 222 + )} 223 + </> 224 + )} 233 225 </Popover> 234 226 ); 235 227 }