Skip to content

Commit 3f41d56

Browse files
ImLunaHeyImLunaHey
committed
fix: #133 
1 parent 5a272d9 commit 3f41d56

File tree

3 files changed

+87
-81
lines changed

3 files changed

+87
-81
lines changed

‎src/components/PostCard.tsx

Lines changed: 85 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -74,97 +74,103 @@ export function PostCard({ post, context, className, onClick }: PostCardProps) {
7474
if (!post) return null;
7575

7676
return (
77-
<div className="flex flex-col border-b border-gray-200 dark:border-gray-800">
78-
<div className={cn('p-3 w-full max-w-[550px] gap-2 flex flex-row', className)} onClick={onClick} id={post.uri}>
79-
<div className="flex-shrink-0">
80-
<Avatar handle={post.author.handle} avatar={post.author.avatar} />
81-
</div>
82-
<div>
83-
<div>
84-
<div>
85-
<Link
86-
to="/profile/$handle"
87-
params={{ handle: post.author.handle }}
88-
className="font-medium text-gray-900 dark:text-gray-100"
89-
>
90-
{post.author.displayName || post.author.handle}
91-
</Link>
92-
</div>
93-
<div className="text-gray-500 dark:text-gray-400 text-sm">
94-
<Link to="/profile/$handle" params={{ handle: post.author.handle }}>
95-
<Handle handle={post.author.handle} />
96-
</Link>
97-
{' · '}
98-
<Link
99-
to="/profile/$handle/post/$postId"
100-
params={{
101-
handle: post.author.handle,
102-
postId: post.uri.split('/').pop()!,
103-
}}
104-
>
105-
<TimeAgo date={post.record.createdAt} />
106-
</Link>
107-
{!experiments.zenMode && <BetterContext context={context} />}
108-
</div>
77+
<div className="relative hover:bg-neutral-500 hover:bg-opacity-10">
78+
<Link
79+
to="/profile/$handle/post/$postId"
80+
params={{ handle: post.author.handle, postId: post.uri.split('/').pop()! }}
81+
className="absolute inset-0"
82+
/>
83+
<div className="flex flex-col border-b border-gray-200 dark:border-gray-800">
84+
<div className={cn('p-3 w-full max-w-[550px] gap-2 flex flex-row', className)} onClick={onClick} id={post.uri}>
85+
<div className="flex-shrink-0">
86+
<Avatar handle={post.author.handle} avatar={post.author.avatar} />
10987
</div>
110-
<div className="flex flex-col gap-2">
111-
<p className="text-gray-800 dark:text-gray-200">
112-
{post.record.facets ? (
113-
<FacetedText text={post.record.text} facets={post.record.facets} key={`faceted-text-${post.uri}`} />
114-
) : (
115-
<FormattedText text={post.record.text} key={`formatted-text-${post.uri}`} />
116-
)}
117-
</p>
118-
<ErrorBoundary>{post.embed && <PostEmbed embed={post.embed} />}</ErrorBoundary>
88+
<div>
11989
<div>
120-
<div className="flex items-center space-x-6 text-gray-500 dark:text-gray-400">
90+
<div>
91+
<Link
92+
to="/profile/$handle"
93+
params={{ handle: post.author.handle }}
94+
className="font-medium text-gray-900 dark:text-gray-100"
95+
>
96+
{post.author.displayName || post.author.handle}
97+
</Link>
98+
</div>
99+
<div className="text-gray-500 dark:text-gray-400 text-sm">
100+
<Link to="/profile/$handle" params={{ handle: post.author.handle }}>
101+
<Handle handle={post.author.handle} />
102+
</Link>
103+
{' · '}
121104
<Link
122105
to="/profile/$handle/post/$postId"
123-
params={{ handle: post.author.handle, postId: post.uri.split('/').pop()! }}
124-
className="flex items-center space-x-2 hover:text-blue-500 transition-colors"
106+
params={{
107+
handle: post.author.handle,
108+
postId: post.uri.split('/').pop()!,
109+
}}
125110
>
126-
<MessageCircle size={20} />
127-
{!experiments.zenMode && <FormattedNumber value={post.replyCount} />}
128-
<span className="hidden xl:block">{t('replies')}</span>
111+
<TimeAgo date={post.record.createdAt} />
129112
</Link>
130-
{!(experiments.zenMode && !isAuthenticated) && (
131-
<>
132-
<button
133-
onClick={() =>
134-
post.viewer?.repost
135-
? toast.error('You already reposted this post', { duration: 2_000 })
136-
: handleRepost(post.uri, post.cid)
137-
}
138-
disabled={repost.isPending || !isAuthenticated}
139-
className={cn(
140-
'flex items-center space-x-2 transition-colors',
141-
post.viewer?.repost ? 'text-green-500' : 'hover:text-green-500',
142-
)}
143-
>
144-
<Repeat size={20} className={cn(post.viewer?.repost ? 'stroke-current' : '')} />
145-
{!experiments.zenMode && <FormattedNumber value={post.repostCount} />}
146-
<span className="hidden xl:block">{t('reposts')}</span>
147-
</button>
148-
<button
149-
onClick={handleLike}
150-
disabled={like.isPending || unlike.isPaused || !isAuthenticated}
151-
className={cn(
152-
'flex items-center space-x-2 transition-colors',
153-
post.viewer?.like ? 'text-pink-500' : 'hover:text-pink-500',
154-
)}
155-
>
156-
<Heart size={20} className={cn(post.viewer?.like ? 'fill-current' : '')} />
157-
{!experiments.zenMode && <FormattedNumber value={post.likeCount} />}
158-
<span className="hidden xl:block">{t('likes')}</span>
159-
</button>
160-
</>
113+
{!experiments.zenMode && <BetterContext context={context} />}
114+
</div>
115+
</div>
116+
<div className="flex flex-col gap-2">
117+
<p className="text-gray-800 dark:text-gray-200">
118+
{post.record.facets ? (
119+
<FacetedText text={post.record.text} facets={post.record.facets} key={`faceted-text-${post.uri}`} />
120+
) : (
121+
<FormattedText text={post.record.text} key={`formatted-text-${post.uri}`} />
161122
)}
123+
</p>
124+
<ErrorBoundary>{post.embed && <PostEmbed embed={post.embed} />}</ErrorBoundary>
125+
<div>
126+
<div className="flex items-center space-x-6 text-gray-500 dark:text-gray-400">
127+
<Link
128+
to="/profile/$handle/post/$postId"
129+
params={{ handle: post.author.handle, postId: post.uri.split('/').pop()! }}
130+
className="flex items-center space-x-2 hover:text-blue-500 transition-colors"
131+
>
132+
<MessageCircle size={20} />
133+
{!experiments.zenMode && <FormattedNumber value={post.replyCount} />}
134+
<span className="hidden xl:block">{t('replies')}</span>
135+
</Link>
136+
{!(experiments.zenMode && !isAuthenticated) && (
137+
<>
138+
<button
139+
onClick={() =>
140+
post.viewer?.repost
141+
? toast.error('You already reposted this post', { duration: 2_000 })
142+
: handleRepost(post.uri, post.cid)
143+
}
144+
disabled={repost.isPending || !isAuthenticated}
145+
className={cn(
146+
'flex items-center space-x-2 transition-colors',
147+
post.viewer?.repost ? 'text-green-500' : 'hover:text-green-500',
148+
)}
149+
>
150+
<Repeat size={20} className={cn(post.viewer?.repost ? 'stroke-current' : '')} />
151+
{!experiments.zenMode && <FormattedNumber value={post.repostCount} />}
152+
<span className="hidden xl:block">{t('reposts')}</span>
153+
</button>
154+
<button
155+
onClick={handleLike}
156+
disabled={like.isPending || unlike.isPaused || !isAuthenticated}
157+
className={cn(
158+
'flex items-center space-x-2 transition-colors',
159+
post.viewer?.like ? 'text-pink-500' : 'hover:text-pink-500',
160+
)}
161+
>
162+
<Heart size={20} className={cn(post.viewer?.like ? 'fill-current' : '')} />
163+
{!experiments.zenMode && <FormattedNumber value={post.likeCount} />}
164+
<span className="hidden xl:block">{t('likes')}</span>
165+
</button>
166+
</>
167+
)}
168+
</div>
162169
</div>
163170
</div>
164171
</div>
165172
</div>
166173
</div>
167-
<Debug value={{ post, context }} />
168174
</div>
169175
);
170176
}

‎src/components/PostEmbed/app-bsky-embed-record-view.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export const AppBskyEmbedRecordView = ({ embed }: { embed: BSkyPostEmbed }) => {
3636
}
3737

3838
return (
39-
<div className="p-4 rounded-lg shadow border border-neutral-200 dark:border-neutral-800">
39+
<div className="p-4 rounded-lg shadow border border-neutral-200 dark:border-neutral-800 hover:bg-neutral-500 hover:bg-opacity-10 z-10">
4040
{embed.record.$type === 'app.bsky.embed.record#viewRecord' && (
4141
<>
4242
<div className="flex items-center space-x-3 mb-2">

‎src/components/Timeline.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ export function Timeline({ columnNumber = 1 }: { columnNumber: number }) {
117117
endReached={() => fetchNextPage()}
118118
components={{
119119
List: forwardRef(function List(props, ref) {
120-
return <div ref={ref} {...props} className="flex flex-col gap-2" />;
120+
return <div ref={ref} {...props} className="flex flex-col" />;
121121
}),
122122
}}
123123
itemContent={(index: number) => (

0 commit comments

Comments
 (0)