Skip to content

Commit 99af00d

Browse files
pdelfanpdelfan
committed
Merge branch 'preview'
2 parents b03a928 + e378f23 commit 99af00d

File tree

3 files changed

+97
-113
lines changed

3 files changed

+97
-113
lines changed

‎src/components/contentDisplay/feedHeader/FeedHeader.tsx

+59-70
Original file line numberDiff line numberDiff line change
@@ -106,78 +106,67 @@ export default function FeedHeader(props: Props) {
106106
}
107107
};
108108

109+
if (isFetchingFeedInfo || !feedInfo) return <FeedHeaderSkeleton />;
110+
109111
return (
110-
<>
111-
{isFetchingFeedInfo && <FeedHeaderSkeleton />}
112-
{!isFetchingFeedInfo && feedInfo && (
113-
<>
114-
<article className="border-skin-base flex flex-col gap-2 border border-x-0 border-t-0 p-3 md:rounded-t-2xl md:border">
115-
<div className="flex flex-wrap items-center justify-between gap-3">
116-
<div className="flex flex-wrap items-center gap-3">
117-
<Image
118-
src={feedInfo.view.avatar ?? FallbackFeed}
119-
alt={feedInfo.view.displayName}
120-
width={60}
121-
height={60}
122-
className={`rounded-lg ${!feedInfo.view.avatar && "border-skin-base bg-skin-muted border"}`}
123-
/>
124-
<div className="flex flex-col">
125-
<h2 className="text-skin-base break-words text-xl font-semibold">
126-
{feedInfo.view.displayName}
127-
</h2>
128-
<h3 className="text-skin-secondary break-all">
129-
By{" "}
130-
<Link
131-
href={`/dashboard/user/${feedInfo.view.creator.handle}`}
132-
className="hover:text-skin-tertiary font-medium"
133-
>
134-
@{feedInfo.view.creator.handle}
135-
</Link>
136-
</h3>
137-
</div>
138-
</div>
139-
{isSaved !== null && isPinned !== null && (
140-
<div className="flex flex-wrap gap-3">
141-
<Button onClick={toggleSave}>
142-
{isSaved && (
143-
<BiSolidTrash className="text-status-danger text-lg" />
144-
)}
145-
{!isSaved && (
146-
<BiPlus className="text-skin-icon-base text-lg" />
147-
)}
148-
</Button>
149-
<Button onClick={togglePin}>
150-
<BiSolidBookmarkAlt
151-
className={`text-lg ${
152-
isPinned
153-
? "text-status-success"
154-
: "text-skin-icon-muted"
155-
}`}
156-
/>
157-
</Button>
158-
<Button onClick={toggleLike}>
159-
{likeUri && (
160-
<BiSolidHeart className="text-skin-icon-like text-lg" />
161-
)}
162-
{!likeUri && (
163-
<BiHeart className="text-skin-icon-muted text-lg" />
164-
)}
165-
</Button>
166-
</div>
112+
<article className="border-skin-base flex flex-col gap-2 border border-x-0 border-t-0 p-3 md:rounded-t-2xl md:border">
113+
<div className="flex flex-wrap items-center justify-between gap-3">
114+
<div className="flex flex-wrap items-center gap-3">
115+
<Image
116+
src={feedInfo.view.avatar ?? FallbackFeed}
117+
alt={feedInfo.view.displayName}
118+
width={60}
119+
height={60}
120+
className={`rounded-lg ${!feedInfo.view.avatar && "border-skin-base bg-skin-muted border"}`}
121+
/>
122+
<div className="flex flex-col">
123+
<h2 className="text-skin-base break-words text-xl font-semibold">
124+
{feedInfo.view.displayName}
125+
</h2>
126+
<h3 className="text-skin-secondary break-all">
127+
By{" "}
128+
<Link
129+
href={`/dashboard/user/${feedInfo.view.creator.handle}`}
130+
className="hover:text-skin-tertiary font-medium"
131+
>
132+
@{feedInfo.view.creator.handle}
133+
</Link>
134+
</h3>
135+
</div>
136+
</div>
137+
{isSaved !== null && isPinned !== null && (
138+
<div className="flex flex-wrap gap-3">
139+
<Button onClick={toggleSave}>
140+
{isSaved && (
141+
<BiSolidTrash className="text-status-danger text-lg" />
142+
)}
143+
{!isSaved && <BiPlus className="text-skin-icon-base text-lg" />}
144+
</Button>
145+
<Button onClick={togglePin}>
146+
<BiSolidBookmarkAlt
147+
className={`text-lg ${
148+
isPinned ? "text-status-success" : "text-skin-icon-muted"
149+
}`}
150+
/>
151+
</Button>
152+
<Button onClick={toggleLike}>
153+
{likeUri && (
154+
<BiSolidHeart className="text-skin-icon-like text-lg" />
167155
)}
168-
</div>
169-
{feedInfo.view.description && (
170-
<p className="text-skin-base break-words" dir="auto">
171-
{feedInfo.view.description}
172-
</p>
173-
)}
174-
<small className="text-skin-secondary flex items-center gap-1 font-medium">
175-
<BiSolidHeart className="text-skin-icon-base" />
176-
<span>{feedInfo.view.likeCount}</span>
177-
</small>
178-
</article>
179-
</>
156+
{!likeUri && <BiHeart className="text-skin-icon-muted text-lg" />}
157+
</Button>
158+
</div>
159+
)}
160+
</div>
161+
{feedInfo.view.description && (
162+
<p className="text-skin-base break-words" dir="auto">
163+
{feedInfo.view.description}
164+
</p>
180165
)}
181-
</>
166+
<small className="text-skin-secondary flex items-center gap-1 font-medium">
167+
<BiSolidHeart className="text-skin-icon-base" />
168+
<span>{feedInfo.view.likeCount}</span>
169+
</small>
170+
</article>
182171
);
183172
}

‎src/components/contentDisplay/listHeader/ListHeader.tsx

+33-38
Original file line numberDiff line numberDiff line change
@@ -20,45 +20,40 @@ export default function FeedHeader(props: Props) {
2020
listInfoError,
2121
} = useListInfo(list);
2222

23+
if (isFetchingListInfo || !listInfo) return <ListHeaderSkeleton />;
24+
2325
return (
24-
<>
25-
{isFetchingListInfo && <ListHeaderSkeleton />}
26-
{!isFetchingListInfo && listInfo && (
27-
<>
28-
<article className="border-skin-base flex flex-col gap-2 border border-x-0 border-y-0 p-3 md:rounded-t-2xl md:border md:border-b-0">
29-
<div className="flex flex-wrap items-center justify-between gap-3">
30-
<div className="flex flex-wrap items-center gap-3">
31-
<Image
32-
src={listInfo.list.avatar ?? FallbackList}
33-
alt={listInfo.list.name}
34-
width={60}
35-
height={60}
36-
className={`rounded-lg ${!listInfo.list.avatar && "border-skin-base bg-skin-muted border"}`}
37-
/>
38-
<div className="flex flex-col">
39-
<h2 className="text-skin-base break-words text-xl font-semibold">
40-
{listInfo.list.name}
41-
</h2>
42-
<h3 className="text-skin-secondary break-all">
43-
By{" "}
44-
<Link
45-
href={`/dashboard/user/${listInfo.list.creator.handle}`}
46-
className="hover:text-skin-tertiary font-medium"
47-
>
48-
@{listInfo.list.creator.handle}
49-
</Link>
50-
</h3>
51-
</div>
52-
</div>
53-
</div>
54-
{listInfo.list.description && (
55-
<p className="text-skin-base break-words" dir="auto">
56-
{listInfo.list.description}
57-
</p>
58-
)}
59-
</article>
60-
</>
26+
<article className="border-skin-base flex flex-col gap-2 border border-x-0 border-y-0 p-3 md:rounded-t-2xl md:border md:border-b-0">
27+
<div className="flex flex-wrap items-center justify-between gap-3">
28+
<div className="flex flex-wrap items-center gap-3">
29+
<Image
30+
src={listInfo.list.avatar ?? FallbackList}
31+
alt={listInfo.list.name}
32+
width={60}
33+
height={60}
34+
className={`rounded-lg ${!listInfo.list.avatar && "border-skin-base bg-skin-muted border"}`}
35+
/>
36+
<div className="flex flex-col">
37+
<h2 className="text-skin-base break-words text-xl font-semibold">
38+
{listInfo.list.name}
39+
</h2>
40+
<h3 className="text-skin-secondary break-all">
41+
By{" "}
42+
<Link
43+
href={`/dashboard/user/${listInfo.list.creator.handle}`}
44+
className="hover:text-skin-tertiary font-medium"
45+
>
46+
@{listInfo.list.creator.handle}
47+
</Link>
48+
</h3>
49+
</div>
50+
</div>
51+
</div>
52+
{listInfo.list.description && (
53+
<p className="text-skin-base break-words" dir="auto">
54+
{listInfo.list.description}
55+
</p>
6156
)}
62-
</>
57+
</article>
6358
);
6459
}

‎src/containers/atmosphere/AtmosphereContainer.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -39,13 +39,13 @@ export default function AtmosphereContainer(props: Props) {
3939
const frontpageRecords = await getATRecords(
4040
did,
4141
"fyi.unravel.frontpage.post",
42-
agent
42+
agent,
4343
);
4444
const linkatRecords = await getATRecords(did, "blue.linkat.board", agent);
4545
const whtwndRecords = await getATRecords(
4646
did,
4747
"com.whtwnd.blog.entry",
48-
agent
48+
agent,
4949
);
5050

5151
return [
@@ -87,7 +87,7 @@ export default function AtmosphereContainer(props: Props) {
8787
}
8888
return acc;
8989
},
90-
{} as Record<string, any[]>
90+
{} as Record<string, any[]>,
9191
);
9292

9393
const renderContainer = () => {
@@ -123,10 +123,10 @@ export default function AtmosphereContainer(props: Props) {
123123

124124
return (
125125
<section>
126-
<div className="sticky top-12 md:top-0 p-3 bg-skin-base border-skin-base md:border-x border-b">
126+
<div className="sticky top-12 md:top-0 bg-skin-base border-skin-base md:border-x border-b">
127127
{hasCollection && (
128128
<ScrollArea.Root role="tablist">
129-
<div className="flex flex-nowrap items-center gap-2 overflow-x-auto">
129+
<div className="flex flex-nowrap items-center gap-2 overflow-x-auto p-3">
130130
{collections.map((c) => (
131131
<>
132132
{c.records.length !== 0 && (

0 commit comments

Comments
 (0)