a tool for shared writing and social publishing

added indication that post is on non-leaflet page is applicable

+27 -16
+2 -6
app/(home-pages)/reader/InboxContent.tsx
··· 7 7 import { useEffect, useRef, useState } from "react"; 8 8 import Link from "next/link"; 9 9 import { PostListing } from "components/PostListing"; 10 - import { SortSmall } from "components/Icons/SortSmall"; 11 - import { Input } from "components/Input"; 12 10 import { useHasBackgroundImage } from "components/Pages/useHasBackgroundImage"; 13 11 import { 14 12 SelectedPostListing, 15 13 useSelectedPostListing, 16 14 } from "src/useSelectedPostState"; 17 - import { AtUri } from "@atproto/api"; 18 - import { MentionsDrawerContent } from "app/lish/[did]/[publication]/[rkey]/Interactions/Quotes"; 19 15 import { CommentsDrawerContent } from "app/lish/[did]/[publication]/[rkey]/Interactions/Comments"; 20 16 import { CloseTiny } from "components/Icons/CloseTiny"; 21 17 import { SpeedyLink } from "components/SpeedyLink"; ··· 87 83 let hasBackgroundImage = useHasBackgroundImage(); 88 84 89 85 return ( 90 - <div className="flex flex-row gap-6 "> 91 - <div className="flex flex-col gap-8 relative"> 86 + <div className="flex flex-row gap-6 w-full "> 87 + <div className="flex flex-col gap-8 w-full relative"> 92 88 {sortedPosts.map((p) => ( 93 89 <PostListing {...p} key={p.documents.uri} /> 94 90 ))}
+25 -10
components/PostListing.tsx
··· 20 20 import { ShareTiny } from "./Icons/ShareTiny"; 21 21 import { useSelectedPostListing } from "src/useSelectedPostState"; 22 22 import { mergePreferences } from "src/utils/mergePreferences"; 23 + import { ExternalLinkTiny } from "./Icons/ExternalLinkTiny"; 23 24 24 25 export const PostListing = (props: Post) => { 25 26 let pubRecord = props.publication?.pubRecord as ··· 125 126 <p className="postListingDescription text-secondary line-clamp-3 sm:text-base text-sm"> 126 127 {postRecord.description} 127 128 </p> 128 - <div className="flex flex-col-reverse md:flex-row md gap-2 text-sm text-tertiary items-center justify-start pt-1.5 md:pt-3 w-full"> 129 + <div className="flex flex-col-reverse gap-2 text-sm text-tertiary items-center justify-start pt-1.5 w-full"> 129 130 {props.publication && pubRecord && ( 130 131 <PubInfo 131 132 href={props.publication.href} ··· 163 164 pubRecord: NormalizedPublication; 164 165 uri: string; 165 166 }) => { 167 + let isLeaflet = 168 + props.pubRecord.theme?.$type === "pub.leaflet.publication#theme"; 169 + let cleanUrl = props.pubRecord.url 170 + ?.replace(/^https?:\/\//, "") 171 + .replace(/^www\./, ""); 172 + 166 173 return ( 167 - <div className="flex flex-col md:w-auto shrink-0 w-full"> 168 - <hr className="md:hidden block border-border-light mb-1" /> 169 - <Link 170 - href={props.href} 171 - className="text-accent-contrast font-bold no-underline text-sm flex gap-[6px] items-center md:w-fit relative shrink-0" 172 - > 173 - <PubIcon tiny record={props.pubRecord} uri={props.uri} /> 174 - {props.pubRecord.name} 175 - </Link> 174 + <div className="flex flex-col shrink-0 w-full"> 175 + <hr className=" block border-border-light mb-1" /> 176 + <div className="flex justify-between gap-4 w-full "> 177 + <Link 178 + href={props.href} 179 + className="text-accent-contrast font-bold no-underline text-sm flex gap-[6px] items-center relative grow w-max shrink-0 min-w-0" 180 + > 181 + <PubIcon tiny record={props.pubRecord} uri={props.uri} /> 182 + <div className="w-max min-w-0">{props.pubRecord.name}</div> 183 + </Link> 184 + {!isLeaflet && ( 185 + <div className="text-sm flex flex-row items-center text-tertiary gap-1 min-w-0"> 186 + <div className="truncate min-w-0">{cleanUrl}</div> 187 + <ExternalLinkTiny className="shrink-0" /> 188 + </div> 189 + )} 190 + </div> 176 191 </div> 177 192 ); 178 193 };