a tool for shared writing and social publishing

add compact rendering for notification list - mostly credit to jared

+33 -15
+1 -1
app/(home-pages)/notifications/CommentNotication.tsx
··· 32 32 33 33 return ( 34 34 <Notification 35 - timestamp="" 35 + timestamp={props.commentData.indexed_at} 36 36 href={`https://${pubRecord.base_path}/${rkey}?interactionDrawer=comments`} 37 37 icon={<CommentTiny />} 38 38 actionText={<>{displayName} commented on your post</>}
+14 -2
app/(home-pages)/notifications/Notification.tsx
··· 4 4 import { PubLeafletPublication, PubLeafletRichtextFacet } from "lexicons/api"; 5 5 import { timeAgo } from "src/utils/timeAgo"; 6 6 import { useReplicache, useEntity } from "src/replicache"; 7 + import { useContext } from "react"; 8 + import { NotificationContext } from "./NotificationList"; 7 9 8 10 export const Notification = (props: { 9 11 icon: React.ReactNode; ··· 13 15 href: string; 14 16 }) => { 15 17 let { rootEntity } = useReplicache(); 18 + let { compact } = useContext(NotificationContext); 16 19 let cardBorderHidden = useEntity(rootEntity, "theme/card-border-hidden")?.data 17 20 .value; 21 + 22 + // If compact mode, always hide border 23 + if (compact) { 24 + cardBorderHidden = true; 25 + } 18 26 19 27 return ( 20 28 <div ··· 36 44 <div className="flex justify-between items-center gap-3 w-full "> 37 45 <div className={`flex flex-row gap-2 items-center grow w-full min-w-0`}> 38 46 <div className="text-secondary shrink-0">{props.icon}</div> 39 - <div className="text-secondary font-bold grow truncate min-w-0"> 47 + <div 48 + className={`text-secondary font-bold grow truncate min-w-0 ${compact ? "text-sm" : ""}`} 49 + > 40 50 {props.actionText} 41 51 </div> 42 52 </div> 43 - <div className="text-sm text-tertiary shrink-0 min-w-8"> 53 + <div 54 + className={`text-tertiary shrink-0 min-w-8 ${compact ? "text-xs" : "text-sm"}`} 55 + > 44 56 {timeAgo(props.timestamp)} 45 57 </div> 46 58 </div>
+16 -10
app/(home-pages)/notifications/NotificationList.tsx
··· 3 3 import { HydratedNotification } from "src/notifications"; 4 4 import { CommentNotification } from "./CommentNotication"; 5 5 import { useEntity, useReplicache } from "src/replicache"; 6 - import { useEffect } from "react"; 6 + import { useEffect, createContext } from "react"; 7 7 import { markAsRead } from "./getNotifications"; 8 8 import { ReplyNotification } from "./ReplyNotification"; 9 9 10 + export const NotificationContext = createContext({ compact: false }); 11 + 10 12 export function NotificationList({ 11 13 notifications, 14 + compact, 12 15 }: { 13 16 notifications: HydratedNotification[]; 17 + compact?: boolean; 14 18 }) { 15 19 useEffect(() => { 16 20 setTimeout(() => { ··· 25 29 </div> 26 30 ); 27 31 return ( 28 - <div className="max-w-prose mx-auto w-full"> 29 - <div className={`flex flex-col gap-2`}> 30 - {notifications.map((n) => { 31 - if (n.type === "comment") { 32 - if (n.parentData) return <ReplyNotification key={n.id} {...n} />; 33 - return <CommentNotification key={n.id} {...n} />; 34 - } 35 - })} 32 + <NotificationContext.Provider value={{ compact: compact ?? false }}> 33 + <div className="max-w-prose mx-auto w-full"> 34 + <div className={`flex flex-col gap-2`}> 35 + {notifications.map((n) => { 36 + if (n.type === "comment") { 37 + if (n.parentData) return <ReplyNotification key={n.id} {...n} />; 38 + return <CommentNotification key={n.id} {...n} />; 39 + } 40 + })} 41 + </div> 36 42 </div> 37 - </div> 43 + </NotificationContext.Provider> 38 44 ); 39 45 }
+1 -1
app/(home-pages)/notifications/ReplyNotification.tsx
··· 40 40 41 41 return ( 42 42 <Notification 43 - timestamp={commentRecord.createdAt} 43 + timestamp={props.commentData.indexed_at} 44 44 href={`https://${pubRecord.base_path}/${rkey}?interactionDrawer=comments`} 45 45 icon={<ReplyTiny />} 46 46 actionText={`${displayName} replied to your comment`}
+1 -1
components/ActionBar/Navigation.tsx
··· 211 211 </div> 212 212 ) : ( 213 213 <> 214 - <NotificationList notifications={notifications!} /> 214 + <NotificationList compact notifications={notifications!} /> 215 215 {notifications && notifications.length > 0 && ( 216 216 <SpeedyLink 217 217 className="flex justify-end pt-2 text-sm"