an app to share curated trails
sidetrail.app
atproto
nextjs
react
rsc
make things more transitioney
+628
-407
+2
-18
app/(home)/drafts/DraftsClientPage.tsx
+2
-18
app/(home)/drafts/DraftsClientPage.tsx
···
1
1
"use client";
2
2
3
-
import { useRouter } from "next/navigation";
4
-
import { useTransition, useEffect } from "react";
5
3
import { deleteDraft } from "@/data/drafts/actions";
6
4
import { HomeWalkingPill } from "../walking/HomeWalkingPill";
7
5
import { HomeEmptyState } from "@/app/HomeEmptyState";
···
12
10
};
13
11
14
12
export function DraftsClientPage({ initialDrafts }: Props) {
15
-
const router = useRouter();
16
-
const [, startTransition] = useTransition();
17
-
18
-
// With Cache Components + Activity, effects are recreated when page becomes visible.
19
-
// Refresh data on every activation to ensure freshness.
20
-
useEffect(() => {
21
-
startTransition(() => {
22
-
router.refresh();
23
-
});
24
-
}, [router, startTransition]);
25
-
26
-
const handleDelete = async (rkey: string) => {
13
+
const deleteAction = async (rkey: string) => {
27
14
await deleteDraft(rkey);
28
-
startTransition(() => {
29
-
router.refresh();
30
-
});
31
15
};
32
16
33
17
if (initialDrafts.length === 0) {
···
45
29
backgroundColor={draft.backgroundColor}
46
30
linkTo={`/drafts/${draft.rkey}`}
47
31
dots={Array(draft.stopsCount).fill("upcoming")}
48
-
onDelete={() => handleDelete(draft.rkey)}
32
+
deleteAction={() => deleteAction(draft.rkey)}
49
33
deleteLabel="delete draft"
50
34
deleteConfirmMessage="delete this draft?"
51
35
/>
+2
-6
app/(home)/walking/HomeWalkingList.tsx
+2
-6
app/(home)/walking/HomeWalkingList.tsx
···
1
1
"use client";
2
2
3
-
import { useRouter } from "next/navigation";
4
3
import type { WalkCardData } from "@/data/queries";
5
4
import { HomeWalkingPill } from "./HomeWalkingPill";
6
5
import { abandonWalk } from "@/data/actions";
···
12
11
};
13
12
14
13
export function HomeWalkingList({ walks, canDelete = true }: Props) {
15
-
const router = useRouter();
16
-
17
-
const handleAbandon = async (walkUri: string) => {
14
+
const abandonAction = async (walkUri: string) => {
18
15
await abandonWalk(walkUri);
19
-
router.refresh();
20
16
};
21
17
22
18
return (
···
60
56
backgroundColor={walk.backgroundColor}
61
57
linkTo={`/@${walk.trailCreatorHandle}/trail/${walk.trailRkey}`}
62
58
dots={dots}
63
-
onDelete={canDelete ? () => handleAbandon(walkUri) : undefined}
59
+
deleteAction={canDelete ? () => abandonAction(walkUri) : undefined}
64
60
deleteLabel={canDelete ? "abandon trail" : undefined}
65
61
/>
66
62
);
+26
-56
app/(home)/walking/HomeWalkingPill.css
+26
-56
app/(home)/walking/HomeWalkingPill.css
···
3
3
}
4
4
5
5
.HomeWalkingPill {
6
-
text-decoration: none;
7
-
display: block;
8
-
position: relative;
9
-
}
10
-
11
-
.HomeWalkingPill-bg {
12
6
display: flex;
13
-
align-items: flex-start;
14
-
justify-content: space-between;
15
-
gap: 1.5rem;
16
-
padding: 1.5rem;
17
-
border-radius: 12px;
18
-
transition: all 0.2s ease;
19
-
position: relative;
20
-
isolation: isolate;
21
-
}
22
-
23
-
.HomeWalkingPill-bg::before {
24
-
content: "";
25
-
position: absolute;
26
-
inset: 0;
27
-
background: var(--bg-color);
28
-
border: 1.5px solid;
29
-
border-color: color-mix(in srgb, var(--accent-color) 15%, rgba(0, 0, 0, 0.08));
30
-
border-radius: 12px;
31
-
filter: var(--user-content-filter);
32
-
z-index: -1;
33
-
transition: all 0.2s ease;
34
-
pointer-events: none;
35
-
}
36
-
37
-
@media (hover: hover) {
38
-
.HomeWalkingPill:hover .HomeWalkingPill-bg {
39
-
transform: translateY(-2px);
40
-
}
41
-
42
-
.HomeWalkingPill:hover .HomeWalkingPill-bg::before {
43
-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
44
-
border-color: var(--accent-color);
45
-
}
46
-
}
47
-
48
-
.HomeWalkingPill:active .HomeWalkingPill-bg::before {
49
-
border-color: var(--accent-color);
50
-
transition-duration: 0.05s;
51
-
}
52
-
53
-
.HomeWalkingPill-content {
54
-
flex: 1;
55
-
min-width: 0;
56
-
}
57
-
58
-
.HomeWalkingPill-header {
59
-
margin-bottom: 0.375rem;
7
+
flex-direction: column;
8
+
gap: 0.375rem;
60
9
}
61
10
62
11
.HomeWalkingPill-title {
···
67
16
text-transform: lowercase;
68
17
letter-spacing: -0.01em;
69
18
filter: var(--user-content-filter);
19
+
margin: 0;
70
20
}
71
21
72
22
.HomeWalkingPill-subtitle {
73
23
font-size: 0.8125rem;
74
24
color: var(--text-tertiary);
75
25
text-transform: lowercase;
76
-
margin-bottom: 1rem;
26
+
margin: 0 0 0.625rem 0;
77
27
}
78
28
79
29
.HomeWalkingPill-progress {
···
169
119
170
120
@media (hover: hover) {
171
121
.HomeWalkingPill-deleteButton:hover {
172
-
color: var(--text-secondary);
122
+
color: var(--text-primary);
173
123
background: rgba(0, 0, 0, 0.05);
174
124
}
175
125
}
···
181
131
}
182
132
183
133
.HomeWalkingPill-deleteButton:active {
184
-
color: var(--text-secondary);
134
+
color: var(--text-primary);
185
135
background: rgba(0, 0, 0, 0.08);
186
136
transition-duration: 0.05s;
187
137
}
···
191
141
background: rgba(255, 255, 255, 0.08);
192
142
}
193
143
}
144
+
145
+
.HomeWalkingPill-deleteButton--pending {
146
+
cursor: pointer;
147
+
pointer-events: none;
148
+
animation: deleteButton-pulse 2s ease-in-out infinite;
149
+
}
150
+
151
+
@keyframes deleteButton-pulse {
152
+
0%,
153
+
20% {
154
+
opacity: 1;
155
+
}
156
+
50% {
157
+
opacity: 0.7;
158
+
}
159
+
80%,
160
+
100% {
161
+
opacity: 1;
162
+
}
163
+
}
+26
-31
app/(home)/walking/HomeWalkingPill.tsx
+26
-31
app/(home)/walking/HomeWalkingPill.tsx
···
1
-
import Link from "next/link";
1
+
"use client";
2
+
3
+
import { useTransition } from "react";
4
+
import { Card } from "@/components/Card";
2
5
import "./HomeWalkingPill.css";
3
6
4
7
type ProgressDotState = "completed" | "current" | "upcoming";
···
10
13
backgroundColor: string;
11
14
linkTo: string;
12
15
dots: ProgressDotState[];
13
-
onDelete?: () => void;
16
+
deleteAction?: () => Promise<void> | void;
14
17
deleteLabel?: string;
15
18
deleteConfirmMessage?: string;
16
19
};
···
22
25
backgroundColor,
23
26
linkTo,
24
27
dots,
25
-
onDelete,
28
+
deleteAction,
26
29
deleteLabel,
27
30
deleteConfirmMessage = "abandon this trail? your progress will be lost",
28
31
}: Props) {
32
+
const [isPending, startTransition] = useTransition();
33
+
29
34
const handleDelete = (e: React.MouseEvent) => {
30
35
e.preventDefault();
31
36
e.stopPropagation();
32
37
if (confirm(deleteConfirmMessage)) {
33
-
onDelete?.();
38
+
startTransition(async () => {
39
+
await deleteAction?.();
40
+
});
34
41
}
35
42
};
36
43
37
44
return (
38
45
<div className="HomeWalkingPill-wrapper">
39
-
<Link href={linkTo} className="HomeWalkingPill">
40
-
<div
41
-
className="HomeWalkingPill-bg"
42
-
style={
43
-
{
44
-
"--accent-color": accentColor,
45
-
"--bg-color": backgroundColor,
46
-
"--accent-color-transparent": `${accentColor}20`,
47
-
} as React.CSSProperties
48
-
}
49
-
>
50
-
<div className="HomeWalkingPill-content">
51
-
<div className="HomeWalkingPill-header">
52
-
<span className="HomeWalkingPill-title">{title}</span>
53
-
</div>
54
-
<div className="HomeWalkingPill-subtitle">{subtitle}</div>
55
-
<div className="HomeWalkingPill-progress">
56
-
{dots.map((state, idx) => (
57
-
<div key={idx} className="HomeWalkingPill-dotWrapper">
58
-
<div className={`HomeWalkingPill-dot HomeWalkingPill-dot--${state}`} />
59
-
{idx < dots.length - 1 && <div className="HomeWalkingPill-line" />}
60
-
</div>
61
-
))}
62
-
</div>
46
+
<Card href={linkTo} accentColor={accentColor} backgroundColor={backgroundColor}>
47
+
<div className="HomeWalkingPill">
48
+
<h3 className="HomeWalkingPill-title">{title}</h3>
49
+
<p className="HomeWalkingPill-subtitle">{subtitle}</p>
50
+
<div className="HomeWalkingPill-progress">
51
+
{dots.map((state, idx) => (
52
+
<div key={idx} className="HomeWalkingPill-dotWrapper">
53
+
<div className={`HomeWalkingPill-dot HomeWalkingPill-dot--${state}`} />
54
+
{idx < dots.length - 1 && <div className="HomeWalkingPill-line" />}
55
+
</div>
56
+
))}
63
57
</div>
64
58
</div>
65
-
</Link>
66
-
{onDelete && (
59
+
</Card>
60
+
{deleteAction && (
67
61
<button
68
62
onClick={handleDelete}
69
-
className="HomeWalkingPill-deleteButton"
63
+
className={`HomeWalkingPill-deleteButton${isPending ? " HomeWalkingPill-deleteButton--pending" : ""}`}
70
64
aria-label={deleteLabel}
65
+
disabled={isPending}
71
66
>
72
67
×
73
68
</button>
+1
-1
app/FloatingAvatar.css
+1
-1
app/FloatingAvatar.css
+21
-11
app/FloatingAvatar.tsx
+21
-11
app/FloatingAvatar.tsx
···
9
9
title: string;
10
10
contained?: boolean;
11
11
opaque?: boolean;
12
+
noLink?: boolean;
12
13
}
13
14
14
15
export function FloatingAvatar({
···
17
18
title,
18
19
contained = false,
19
20
opaque = false,
21
+
noLink = false,
20
22
}: FloatingAvatarProps) {
21
23
if (!src) return null;
22
24
···
50
52
const timingFunctions = ["ease-in-out", "ease-in", "ease-out", "linear"];
51
53
const timingFunction = timingFunctions[Math.floor(random(2) * timingFunctions.length)];
52
54
55
+
const imgElement = (
56
+
<img
57
+
src={src}
58
+
alt={handle}
59
+
title={title}
60
+
className={`FloatingAvatar ${contained ? "FloatingAvatar-contained" : ""} ${opaque ? "FloatingAvatar-opaque" : ""} ${noLink ? "" : "FloatingAvatar-clickable"}`}
61
+
style={{
62
+
animationDuration: `${duration}s`,
63
+
animationDelay: `${delay}s`,
64
+
animationTimingFunction: timingFunction,
65
+
}}
66
+
/>
67
+
);
68
+
69
+
if (noLink) {
70
+
return imgElement;
71
+
}
72
+
53
73
return (
54
74
<Link
55
75
href={`/@${handle}/walking`}
···
60
80
className="FloatingAvatar-link"
61
81
tabIndex={-1}
62
82
>
63
-
<img
64
-
src={src}
65
-
alt={handle}
66
-
title={title}
67
-
className={`FloatingAvatar ${contained ? "FloatingAvatar-contained" : ""} ${opaque ? "FloatingAvatar-opaque" : ""} FloatingAvatar-clickable`}
68
-
style={{
69
-
animationDuration: `${duration}s`,
70
-
animationDelay: `${delay}s`,
71
-
animationTimingFunction: timingFunction,
72
-
}}
73
-
/>
83
+
{imgElement}
74
84
</Link>
75
85
);
76
86
}
+2
-1
app/HomeTrailsList.tsx
+2
-1
app/HomeTrailsList.tsx
···
1
1
import type { TrailCardData } from "../data/queries";
2
2
import { TrailCard } from "./TrailCard";
3
+
import { TrailCardWalkers } from "./TrailCardWalkers";
3
4
import { HomeEmptyState } from "./HomeEmptyState";
4
5
import "./HomeTrailsList.css";
5
6
···
38
39
{reordered.map(({ item: trail, originalIndex }) => (
39
40
<div key={trail.uri} style={{ "--original-index": originalIndex } as React.CSSProperties}>
40
41
<TrailCard
41
-
uri={trail.uri}
42
42
rkey={trail.rkey}
43
43
creatorHandle={trail.creatorHandle}
44
44
title={trail.title}
···
47
47
backgroundColor={trail.backgroundColor}
48
48
creator={trail.creator}
49
49
stopsCount={trail.stopsCount}
50
+
walkersSlot={<TrailCardWalkers trailUri={trail.uri} />}
50
51
/>
51
52
</div>
52
53
))}
+8
-11
app/NewTrailButton.tsx
+8
-11
app/NewTrailButton.tsx
···
1
1
"use client";
2
2
3
-
import { useTransition } from "react";
4
3
import { useRouter } from "next/navigation";
5
-
import "./NewTrailButton.css";
4
+
import { ActionButton } from "@/components/ActionButton";
6
5
import { createDraft } from "@/data/drafts/actions";
7
6
import { useAuthAction } from "@/auth/useAuthAction";
7
+
import "./NewTrailButton.css";
8
8
9
9
interface NewTrailButtonProps {
10
10
text?: string;
···
13
13
export function NewTrailButton({ text = "+ new trail" }: NewTrailButtonProps) {
14
14
const router = useRouter();
15
15
const requireAuth = useAuthAction();
16
-
const [isPending, startTransition] = useTransition();
17
16
18
-
const handleClick = () => {
17
+
const createAction = async () => {
19
18
requireAuth();
20
-
startTransition(async () => {
21
-
const rkey = await createDraft();
22
-
router.push(`/drafts/${rkey}`);
23
-
});
19
+
const rkey = await createDraft();
20
+
router.push(`/drafts/${rkey}`);
24
21
};
25
22
26
23
return (
27
-
<button onClick={handleClick} className="NewTrailButton" disabled={isPending}>
28
-
{isPending ? "creating..." : text}
29
-
</button>
24
+
<ActionButton action={createAction} className="NewTrailButton" pendingChildren="creating...">
25
+
{text}
26
+
</ActionButton>
30
27
);
31
28
}
+20
-9
app/SegmentTabs.css
+20
-9
app/SegmentTabs.css
···
26
26
font-size: 1.125rem;
27
27
color: var(--text-tertiary);
28
28
cursor: pointer;
29
-
transition: color 0.2s ease;
30
29
text-transform: lowercase;
31
30
font-weight: 400;
32
31
font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace;
···
35
34
}
36
35
37
36
@media (hover: hover) {
38
-
.SegmentTabs-tab:hover:not(.SegmentTabs-tab--active) {
37
+
.SegmentTabs-tab:hover {
39
38
color: var(--text-secondary);
40
39
}
40
+
.SegmentTabs-tab--active:hover {
41
+
color: var(--text-primary);
42
+
}
41
43
}
42
44
43
-
.SegmentTabs-tab:active:not(.SegmentTabs-tab--active) {
44
-
color: var(--text-secondary);
45
-
transition-duration: 0.05s;
46
-
}
47
-
48
-
.SegmentTabs-tab--active {
45
+
.SegmentTabs-tab--active,
46
+
.SegmentTabs-tabText--pending {
49
47
color: var(--text-primary);
50
-
font-weight: 500;
51
48
}
52
49
53
50
@media (max-width: 480px) {
···
56
53
white-space: nowrap;
57
54
}
58
55
}
56
+
57
+
.SegmentTabs-tabText--pending {
58
+
animation: segmentTab-pulse 2s 200ms ease-in-out infinite;
59
+
}
60
+
61
+
@keyframes segmentTab-pulse {
62
+
0%,
63
+
100% {
64
+
opacity: 1;
65
+
}
66
+
50% {
67
+
opacity: 0.8;
68
+
}
69
+
}
+38
-11
app/SegmentTabs.tsx
+38
-11
app/SegmentTabs.tsx
···
1
1
"use client";
2
2
3
3
import { useSelectedLayoutSegment } from "next/navigation";
4
-
import Link from "next/link";
4
+
import Link, { useLinkStatus } from "next/link";
5
5
import "./SegmentTabs.css";
6
6
7
7
interface SegmentTabsProps {
···
12
12
href?: string;
13
13
}>;
14
14
basePath?: string;
15
+
}
16
+
17
+
function TabContent({
18
+
title,
19
+
children,
20
+
isActive,
21
+
}: {
22
+
title: string;
23
+
children?: React.ReactNode;
24
+
isActive: boolean;
25
+
}) {
26
+
const { pending } = useLinkStatus();
27
+
const className = pending
28
+
? "SegmentTabs-tabText--pending"
29
+
: isActive
30
+
? "SegmentTabs-tabText--active"
31
+
: undefined;
32
+
return (
33
+
<span className={className}>
34
+
{title}
35
+
{children}
36
+
</span>
37
+
);
15
38
}
16
39
17
40
export function SegmentTabs({ segments, basePath = "/" }: SegmentTabsProps) {
18
41
const selected = useSelectedLayoutSegment();
19
42
return (
20
43
<nav className="SegmentTabs">
21
-
{segments.map((segment) => (
22
-
<Link
23
-
key={segment.segment}
24
-
href={segment.href ?? basePath + (segment.segment ?? "")}
25
-
className={`SegmentTabs-tab ${selected === segment.segment ? "SegmentTabs-tab--active" : ""}`}
26
-
>
27
-
{segment.title}
28
-
{segment.children}
29
-
</Link>
30
-
))}
44
+
{segments.map((segment) => {
45
+
const isActive = selected === segment.segment;
46
+
return (
47
+
<Link
48
+
key={segment.segment}
49
+
href={segment.href ?? basePath + (segment.segment ?? "")}
50
+
className={`SegmentTabs-tab ${isActive ? "SegmentTabs-tab--active" : ""}`}
51
+
>
52
+
<TabContent title={segment.title} isActive={isActive}>
53
+
{segment.children}
54
+
</TabContent>
55
+
</Link>
56
+
);
57
+
})}
31
58
</nav>
32
59
);
33
60
}
+28
-79
app/TrailCard.css
+28
-79
app/TrailCard.css
···
1
1
.TrailCard {
2
-
display: block;
3
-
position: relative;
4
-
}
5
-
6
-
.TrailCard-underlay {
7
-
position: absolute;
8
-
inset: 0;
9
-
}
10
-
11
-
.TrailCard-bg {
12
-
border-radius: 12px;
13
-
padding: 1.5rem;
14
-
transition: all 0.2s ease;
15
-
position: relative;
16
-
pointer-events: none;
17
2
display: flex;
18
3
flex-direction: column;
19
4
gap: 0.75rem;
20
5
}
21
6
22
-
.TrailCard-bg::before {
23
-
content: "";
24
-
position: absolute;
25
-
inset: 0;
26
-
background-color: var(--bg-color);
27
-
border-radius: 12px;
28
-
border: 1.5px solid;
29
-
border-color: color-mix(in srgb, var(--accent-color) 15%, rgba(0, 0, 0, 0.08));
30
-
filter: var(--user-content-filter);
31
-
transition: all 0.2s ease;
32
-
z-index: 0;
33
-
}
34
-
35
-
.TrailCard-title,
36
-
.TrailCard-description,
37
-
.TrailCard-meta {
38
-
position: relative;
39
-
z-index: 1;
40
-
}
41
-
42
-
.TrailCard-activity {
43
-
display: flex;
44
-
align-items: center;
45
-
gap: 0.375rem;
46
-
pointer-events: auto;
47
-
}
48
-
49
-
.TrailCard-walkers {
50
-
display: flex;
51
-
gap: 0.25rem;
52
-
align-items: center;
53
-
padding: 0.25rem 0.45rem;
54
-
border-radius: 12px;
55
-
position: relative;
56
-
isolation: isolate;
57
-
}
58
-
59
-
.TrailCard-walkers::before {
60
-
content: "";
61
-
position: absolute;
62
-
inset: 0;
63
-
background: var(--accent-color-transparent);
64
-
border: 1px solid var(--accent-color-transparent);
65
-
border-radius: 12px;
66
-
filter: var(--user-content-filter);
67
-
z-index: -1;
68
-
}
69
-
70
-
@media (hover: hover) {
71
-
.TrailCard:hover .TrailCard-bg {
72
-
transform: translateY(-2px);
73
-
}
74
-
75
-
.TrailCard:hover .TrailCard-bg::before {
76
-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
77
-
border-color: var(--accent-color);
78
-
}
79
-
}
80
-
81
-
.TrailCard:active .TrailCard-bg::before {
82
-
border-color: var(--accent-color);
83
-
transition-duration: 0.05s;
84
-
}
85
-
86
7
.TrailCard-title {
87
8
font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace;
88
9
font-size: 1.125rem;
···
116
37
.TrailCard-steps {
117
38
text-transform: lowercase;
118
39
}
40
+
41
+
.TrailCard-activity {
42
+
display: flex;
43
+
align-items: center;
44
+
gap: 0.375rem;
45
+
}
46
+
47
+
.TrailCard-walkers {
48
+
display: flex;
49
+
gap: 0.25rem;
50
+
align-items: center;
51
+
padding: 0.25rem 0.45rem;
52
+
border-radius: 12px;
53
+
position: relative;
54
+
isolation: isolate;
55
+
}
56
+
57
+
.TrailCard-walkers::before {
58
+
content: "";
59
+
position: absolute;
60
+
inset: 0;
61
+
background: var(--accent-color-transparent);
62
+
border: 1px solid var(--accent-color-transparent);
63
+
border-radius: 12px;
64
+
filter: var(--user-content-filter);
65
+
z-index: -1;
66
+
pointer-events: none;
67
+
}
+15
-47
app/TrailCard.tsx
+15
-47
app/TrailCard.tsx
···
1
-
import Link from "next/link";
2
1
import type { User } from "../data/queries";
3
-
import { loadTrailActiveWalkers } from "../data/queries";
4
-
import { FloatingAvatar } from "./FloatingAvatar";
2
+
import type { ReactNode } from "react";
3
+
import { Card } from "@/components/Card";
5
4
import "./TrailCard.css";
6
5
7
6
type Props = {
8
-
uri: string;
7
+
uri?: string;
9
8
rkey: string;
10
9
creatorHandle: string;
11
10
title: string;
···
14
13
backgroundColor: string;
15
14
creator: User;
16
15
stopsCount: number;
16
+
walkersSlot?: ReactNode;
17
17
};
18
18
19
-
async function ActiveWalkers({ trailUri }: { trailUri: string }) {
20
-
const walkers = await loadTrailActiveWalkers(trailUri);
21
-
const displayWalkers = walkers.filter((w) => w.avatar).slice(0, 3);
22
-
23
-
if (displayWalkers.length === 0) return null;
24
-
25
-
return (
26
-
<div className="TrailCard-walkers">
27
-
{displayWalkers.map((walker, i) => {
28
-
return (
29
-
<FloatingAvatar
30
-
key={i}
31
-
src={walker.avatar}
32
-
title={walker.handle}
33
-
contained={true}
34
-
opaque={true}
35
-
handle={walker.handle}
36
-
/>
37
-
);
38
-
})}
39
-
</div>
40
-
);
41
-
}
42
-
43
-
export async function TrailCard({
44
-
uri,
19
+
export function TrailCard({
45
20
rkey,
46
21
creatorHandle,
47
22
title,
···
50
25
backgroundColor,
51
26
creator,
52
27
stopsCount,
28
+
walkersSlot,
53
29
}: Props) {
54
30
return (
55
-
<div className="TrailCard">
56
-
<Link href={`/@${creatorHandle}/trail/${rkey}`} className="TrailCard-underlay" />
57
-
<div
58
-
className="TrailCard-bg"
59
-
style={
60
-
{
61
-
"--accent-color": accentColor,
62
-
"--accent-color-transparent": `${accentColor}15`,
63
-
"--bg-color": backgroundColor,
64
-
} as React.CSSProperties
65
-
}
66
-
>
67
-
<h3 className="TrailCard-title">
68
-
<span>{title}</span>
69
-
</h3>
31
+
<Card
32
+
href={`/@${creatorHandle}/trail/${rkey}`}
33
+
accentColor={accentColor}
34
+
backgroundColor={backgroundColor}
35
+
>
36
+
<div className="TrailCard">
37
+
<h3 className="TrailCard-title">{title}</h3>
70
38
<p className="TrailCard-description">{description}</p>
71
39
<div className="TrailCard-meta">
72
40
<span className="TrailCard-creator">@{creator.handle}</span>
73
41
<div className="TrailCard-activity">
74
-
<ActiveWalkers trailUri={uri} />
42
+
{walkersSlot}
75
43
<span className="TrailCard-steps">{stopsCount} stops</span>
76
44
</div>
77
45
</div>
78
46
</div>
79
-
</div>
47
+
</Card>
80
48
);
81
49
}
+27
app/TrailCardWalkers.tsx
+27
app/TrailCardWalkers.tsx
···
1
+
import { loadTrailActiveWalkers } from "../data/queries";
2
+
import { FloatingAvatar } from "./FloatingAvatar";
3
+
4
+
export async function TrailCardWalkers({ trailUri }: { trailUri: string }) {
5
+
const walkers = await loadTrailActiveWalkers(trailUri);
6
+
const displayWalkers = walkers.filter((w) => w.avatar).slice(0, 3);
7
+
8
+
if (displayWalkers.length === 0) return null;
9
+
10
+
return (
11
+
<div className="TrailCard-walkers">
12
+
{displayWalkers.map((walker, i) => {
13
+
return (
14
+
<FloatingAvatar
15
+
key={i}
16
+
src={walker.avatar}
17
+
title={walker.handle}
18
+
contained={true}
19
+
opaque={true}
20
+
handle={walker.handle}
21
+
noLink
22
+
/>
23
+
);
24
+
})}
25
+
</div>
26
+
);
27
+
}
+2
-1
app/TrailsList.tsx
+2
-1
app/TrailsList.tsx
···
1
1
import type { TrailCardData } from "../data/queries";
2
2
import { TrailCard } from "./TrailCard";
3
+
import { TrailCardWalkers } from "./TrailCardWalkers";
3
4
import "./TrailsList.css";
4
5
5
6
type Props = {
···
12
13
{trails.map((trail) => (
13
14
<TrailCard
14
15
key={trail.uri}
15
-
uri={trail.uri}
16
16
rkey={trail.rkey}
17
17
creatorHandle={trail.creatorHandle}
18
18
title={trail.title}
···
21
21
backgroundColor={trail.backgroundColor}
22
22
creator={trail.creator}
23
23
stopsCount={trail.stopsCount}
24
+
walkersSlot={<TrailCardWalkers trailUri={trail.uri} />}
24
25
/>
25
26
))}
26
27
</div>
+34
app/at/(trail)/[handle]/trail/[rkey]/AccentButton.css
+34
app/at/(trail)/[handle]/trail/[rkey]/AccentButton.css
···
52
52
cursor: not-allowed;
53
53
}
54
54
55
+
/* Pending state - "engaged" not "disabled" */
56
+
.AccentButton--pending:disabled {
57
+
opacity: 0.85;
58
+
cursor: pointer;
59
+
overflow: hidden;
60
+
transform: scale(1);
61
+
}
62
+
63
+
/* Shimmer sweep across button */
64
+
.AccentButton--pending::after {
65
+
content: "";
66
+
position: absolute;
67
+
inset: 0;
68
+
pointer-events: none;
69
+
background: linear-gradient(
70
+
90deg,
71
+
transparent 0%,
72
+
rgba(255, 255, 255, 0.15) 50%,
73
+
transparent 100%
74
+
);
75
+
transform: translateX(-100%);
76
+
animation: accent-shimmer 1.2s infinite;
77
+
animation-delay: 150ms;
78
+
}
79
+
80
+
@keyframes accent-shimmer {
81
+
0% {
82
+
transform: translateX(-100%);
83
+
}
84
+
100% {
85
+
transform: translateX(100%);
86
+
}
87
+
}
88
+
55
89
/* Mobile responsive */
56
90
@media (max-width: 768px) {
57
91
.AccentButton--large {
+27
-5
app/at/(trail)/[handle]/trail/[rkey]/AccentButton.tsx
+27
-5
app/at/(trail)/[handle]/trail/[rkey]/AccentButton.tsx
···
1
+
"use client";
2
+
3
+
import { useTransition } from "react";
1
4
import "./AccentButton.css";
2
5
3
6
type Props = {
4
7
children: React.ReactNode;
5
-
onClick?: () => void;
8
+
action?: () => Promise<void> | void;
9
+
pendingChildren?: React.ReactNode;
6
10
disabled?: boolean;
7
11
type?: "button" | "submit";
8
12
size?: "medium" | "large";
···
10
14
11
15
export function AccentButton({
12
16
children,
13
-
onClick,
17
+
action,
18
+
pendingChildren,
14
19
disabled = false,
15
20
type = "button",
16
21
size = "large",
17
22
}: Props) {
18
-
const className = `AccentButton AccentButton--${size}`;
23
+
const [isPending, startTransition] = useTransition();
24
+
25
+
const handleClick = (e: React.MouseEvent) => {
26
+
if (!action || isPending) return;
27
+
e.stopPropagation();
28
+
startTransition(async () => {
29
+
await action();
30
+
});
31
+
};
32
+
33
+
const classNames = ["AccentButton", `AccentButton--${size}`, isPending && "AccentButton--pending"]
34
+
.filter(Boolean)
35
+
.join(" ");
19
36
20
37
return (
21
-
<button type={type} onClick={onClick} disabled={disabled} className={className}>
22
-
{children}
38
+
<button
39
+
type={type}
40
+
onClick={handleClick}
41
+
disabled={disabled || isPending}
42
+
className={classNames}
43
+
>
44
+
{isPending && pendingChildren ? pendingChildren : children}
23
45
</button>
24
46
);
25
47
}
+1
-1
app/at/(trail)/[handle]/trail/[rkey]/TrailCompletionCard.tsx
+1
-1
app/at/(trail)/[handle]/trail/[rkey]/TrailCompletionCard.tsx
···
11
11
<div className="TrailCompletionCard">
12
12
<h2 className="TrailCompletionCard-title">you walked this trail</h2>
13
13
<p className="TrailCompletionCard-text">you walked the whole thing. share it if you want.</p>
14
-
<AccentButton onClick={onWriteReflection} size="medium">
14
+
<AccentButton action={onWriteReflection} size="medium">
15
15
write a reflection
16
16
</AccentButton>
17
17
<div className="TrailCompletionCard-nav">
-19
app/at/(trail)/[handle]/trail/[rkey]/TrailOverview.css
-19
app/at/(trail)/[handle]/trail/[rkey]/TrailOverview.css
···
111
111
}
112
112
113
113
.TrailOverview-abandonButton {
114
-
font-family: inherit;
115
114
font-size: 0.875rem;
116
-
padding: 0.75rem 1rem;
117
-
background: transparent;
118
-
color: var(--text-muted);
119
-
border: none;
120
-
cursor: pointer;
121
-
transition: all 0.2s ease;
122
-
text-transform: lowercase;
123
-
}
124
-
125
-
@media (hover: hover) {
126
-
.TrailOverview-abandonButton:hover {
127
-
color: var(--text-secondary);
128
-
}
129
-
}
130
-
131
-
.TrailOverview-abandonButton:active {
132
-
color: var(--text-secondary);
133
-
transition-duration: 0.05s;
134
115
}
135
116
136
117
/* Edit mode styles */
+26
-21
app/at/(trail)/[handle]/trail/[rkey]/TrailOverview.tsx
+26
-21
app/at/(trail)/[handle]/trail/[rkey]/TrailOverview.tsx
···
1
1
import { useRouter } from "next/navigation";
2
+
import { Suspense } from "react";
2
3
import { BackButton } from "@/app/BackButton";
3
4
import { UserBadge } from "@/app/UserBadge";
4
5
import { TrailOverviewStop } from "./TrailOverviewStop";
5
6
import { TrailRegisterDeferred } from "./TrailRegisterDeferred";
6
7
import { AccentButton } from "./AccentButton";
8
+
import { TextButton } from "@/components/TextButton";
7
9
import { startWalk, abandonWalk, forgetTrail, deleteTrail } from "@/data/actions";
8
10
import { AddButton } from "@/app/EditButtons";
9
11
import { useEditMode } from "./EditModeContext";
10
12
import { useAuthAction } from "@/auth/useAuthAction";
13
+
import type { TrailDetailData, TrailStop } from "@/data/queries";
11
14
import "./TrailOverview.css";
12
-
import type { TrailDetailData, TrailStop } from "@/data/queries";
13
-
import { Suspense } from "react";
14
15
15
16
type Props = {
16
17
trail: TrailDetailData;
17
18
onModeChange: (mode: "walk") => void;
18
19
canEdit: boolean;
19
-
onDelete?: () => void;
20
-
onPublish?: () => void;
20
+
onDelete?: () => Promise<void> | void;
21
+
onPublish?: () => Promise<void> | void;
21
22
publishError?: string[] | null;
22
-
isPublishing?: boolean;
23
23
};
24
24
25
25
export function TrailOverview({
···
29
29
onDelete,
30
30
onPublish,
31
31
publishError,
32
-
isPublishing,
33
32
}: Props) {
34
33
const router = useRouter();
35
34
const requireAuth = useAuthAction();
···
51
50
const lastStop = trail.stops[trail.stops.length - 1];
52
51
const shouldShowAddButton = lastStop?.title?.trim() && trail.stops.length < 12;
53
52
54
-
const handleStartWalk = async () => {
53
+
const startWalkAction = async () => {
55
54
requireAuth();
56
55
if (!trail.yourWalk && !isEditing) {
57
56
await startWalk(trail.header.uri, trail.header.cid);
···
59
58
onModeChange("walk");
60
59
};
61
60
62
-
const handleAbandon = async () => {
61
+
const abandonAction = async () => {
63
62
if (confirm("abandon this trail? your progress will be lost")) {
64
63
if (trail.yourWalk) {
65
64
await abandonWalk(trail.yourWalk!.uri);
···
67
66
}
68
67
};
69
68
70
-
const handleDeleteTrail = async () => {
69
+
const deleteTrailAction = async () => {
71
70
if (confirm("delete this trail? it will be gone for everyone forever")) {
72
71
await deleteTrail(trail.header.uri);
73
72
router.push("/");
···
271
270
272
271
<div className="TrailOverview-actions">
273
272
<AccentButton
274
-
onClick={handleStartWalk}
273
+
action={startWalkAction}
275
274
size="large"
276
275
disabled={isEditing && !canStartWalking}
277
276
>
···
282
281
: "walk this trail"}
283
282
</AccentButton>
284
283
{isEditing && onPublish && (
285
-
<AccentButton onClick={onPublish} size="medium" disabled={isPublishing}>
286
-
{isPublishing ? "publishing..." : "publish trail"}
284
+
<AccentButton action={onPublish} size="medium" pendingChildren="publishing...">
285
+
publish trail
287
286
</AccentButton>
288
287
)}
289
288
{isEditing && onDelete && (
290
-
<button onClick={onDelete} className="TrailOverview-abandonButton">
291
-
delete draft
292
-
</button>
289
+
<span className="TrailOverview-abandonButton">
290
+
<TextButton action={onDelete} pendingChildren="deleting...">
291
+
delete draft
292
+
</TextButton>
293
+
</span>
293
294
)}
294
295
{!isEditing && trail.yourWalk && (
295
-
<button onClick={handleAbandon} className="TrailOverview-abandonButton">
296
-
abandon
297
-
</button>
296
+
<span className="TrailOverview-abandonButton">
297
+
<TextButton action={abandonAction} pendingChildren="abandoning...">
298
+
abandon
299
+
</TextButton>
300
+
</span>
298
301
)}
299
302
{!isEditing && !trail.yourWalk && canEdit && (
300
-
<button onClick={handleDeleteTrail} className="TrailOverview-abandonButton">
301
-
delete trail
302
-
</button>
303
+
<span className="TrailOverview-abandonButton">
304
+
<TextButton action={deleteTrailAction} pendingChildren="deleting...">
305
+
delete trail
306
+
</TextButton>
307
+
</span>
303
308
)}
304
309
</div>
305
310
-23
app/at/(trail)/[handle]/trail/[rkey]/TrailProgress.css
-23
app/at/(trail)/[handle]/trail/[rkey]/TrailProgress.css
···
182
182
}
183
183
184
184
.TrailProgress-statusLeave {
185
-
font-family: inherit;
186
185
font-size: 0.6875rem;
187
-
line-height: 1;
188
-
padding: 0.5rem 0;
189
-
background: none;
190
-
border: none;
191
-
color: var(--text-muted);
192
-
cursor: pointer;
193
-
text-transform: lowercase;
194
-
transition: all 0.2s ease;
195
-
white-space: nowrap;
196
-
}
197
-
198
-
@media (hover: hover) {
199
-
.TrailProgress-statusLeave:hover {
200
-
color: var(--accent-color);
201
-
text-decoration: underline;
202
-
filter: var(--user-content-filter);
203
-
}
204
-
}
205
-
206
-
.TrailProgress-statusLeave:active {
207
-
color: var(--accent-color);
208
-
transition-duration: 0.05s;
209
186
}
210
187
211
188
/* Tablet and desktop enhancements */
+7
-4
app/at/(trail)/[handle]/trail/[rkey]/TrailProgress.tsx
+7
-4
app/at/(trail)/[handle]/trail/[rkey]/TrailProgress.tsx
···
1
1
import Link from "next/link";
2
+
import { TextButton } from "@/components/TextButton";
2
3
import "./TrailProgress.css";
3
4
4
5
type Props = {
···
7
8
furthestStep?: number;
8
9
onStepClick?: (index: number) => void;
9
10
isWalking?: boolean;
10
-
onLeaveTrail?: () => void;
11
+
onLeaveTrail?: () => Promise<void> | void;
11
12
backLink?: { to: string; text: string };
12
13
};
13
14
···
73
74
})}
74
75
</div>
75
76
{showRightButton ? (
76
-
<button onClick={onLeaveTrail} className="TrailProgress-statusLeave">
77
-
abandon
78
-
</button>
77
+
<span className="TrailProgress-statusLeave">
78
+
<TextButton action={onLeaveTrail!} pendingChildren="abandoning...">
79
+
abandon
80
+
</TextButton>
81
+
</span>
79
82
) : (
80
83
<span className="TrailProgress-spacer">abandon</span>
81
84
)}
+1
-6
app/at/(trail)/[handle]/trail/[rkey]/TrailStop.tsx
+1
-6
app/at/(trail)/[handle]/trail/[rkey]/TrailStop.tsx
···
92
92
{/* View mode: done button */}
93
93
{isCurrent && !isEditing && (
94
94
<div className="TrailStop-actions">
95
-
<AccentButton
96
-
onClick={() => {
97
-
onContinue();
98
-
}}
99
-
size="large"
100
-
>
95
+
<AccentButton action={onContinue} size="large">
101
96
{stop.buttonText || "done that"}
102
97
</AccentButton>
103
98
</div>
-20
app/at/(trail)/[handle]/trail/[rkey]/TrailWalk.css
-20
app/at/(trail)/[handle]/trail/[rkey]/TrailWalk.css
···
143
143
}
144
144
145
145
.TrailWalk-abandonButton {
146
-
font-family: inherit;
147
146
font-size: 0.875rem;
148
-
padding: 0.75rem 1rem;
149
-
background-color: transparent;
150
-
color: var(--text-muted);
151
-
border: none;
152
-
cursor: pointer;
153
-
transition: all 0.2s ease;
154
-
text-transform: lowercase;
155
-
}
156
-
157
-
@media (hover: hover) {
158
-
.TrailWalk-abandonButton:hover {
159
-
color: var(--text-secondary);
160
-
text-decoration: underline;
161
-
}
162
-
}
163
-
164
-
.TrailWalk-abandonButton:active {
165
-
color: var(--text-secondary);
166
-
transition-duration: 0.05s;
167
147
}
168
148
169
149
.TrailWalk-publishButton {
+26
-15
app/at/(trail)/[handle]/trail/[rkey]/TrailWalk.tsx
+26
-15
app/at/(trail)/[handle]/trail/[rkey]/TrailWalk.tsx
···
1
-
import { useState, useLayoutEffect, useRef, Suspense, Activity, type ReactNode } from "react";
1
+
import {
2
+
startTransition,
3
+
useState,
4
+
useLayoutEffect,
5
+
useRef,
6
+
Suspense,
7
+
Activity,
8
+
type ReactNode,
9
+
} from "react";
2
10
import type { TrailDetailData } from "@/data/queries";
3
11
import { BackButton } from "@/app/BackButton";
4
12
import { TrailProgress } from "./TrailProgress";
···
7
15
import { TrailCompletionCard } from "./TrailCompletionCard";
8
16
import { TrailRegisterDeferred } from "./TrailRegisterDeferred";
9
17
import { TrailWalkersOverlay } from "./TrailWalkersOverlay";
18
+
import { AccentButton } from "./AccentButton";
19
+
import { TextButton } from "@/components/TextButton";
10
20
import { visitStop, completeTrail, abandonWalk, deleteCompletion } from "@/data/actions";
11
21
import { useAuthAction } from "@/auth/useAuthAction";
12
22
import type { EmbedCache } from "./StopEmbed";
23
+
import { EmbedCacheContext } from "./StopEmbed";
13
24
import "./TrailWalk.css";
14
-
15
-
import { EmbedCacheContext } from "./StopEmbed";
16
25
17
26
function RevealedStop({
18
27
revealed,
···
37
46
rkey: string;
38
47
onModeChange: (mode: "overview") => void;
39
48
isEditMode?: boolean;
40
-
onPublish?: () => void;
49
+
onPublish?: () => Promise<void> | void;
41
50
publishError?: string[] | null;
42
-
isPublishing?: boolean;
43
51
initialEmbeds?: Array<[string, Promise<React.ReactElement>]>;
44
52
};
45
53
···
49
57
isEditMode,
50
58
onPublish,
51
59
publishError,
52
-
isPublishing,
53
60
initialEmbeds,
54
61
}: Props) {
55
62
const { header, stops, yourWalk } = trail;
···
195
202
window.open(`https://bsky.app/intent/compose?text=${text}`, "_blank");
196
203
};
197
204
198
-
const handleAbandon = async () => {
205
+
const abandonAction = async () => {
199
206
if (confirm("abandon this trail? your progress will be lost")) {
200
207
if (yourWalk) {
201
208
await abandonWalk(yourWalk.uri);
202
-
onModeChange("overview");
209
+
startTransition(() => {
210
+
onModeChange("overview");
211
+
});
203
212
}
204
213
}
205
214
};
···
228
237
furthestStep={isEditMode ? stops.length - 1 : furthestStopIndex}
229
238
onStepClick={handleGoToStop}
230
239
isWalking={!isCompleted}
231
-
onLeaveTrail={isEditMode ? undefined : handleAbandon}
240
+
onLeaveTrail={isEditMode ? undefined : abandonAction}
232
241
backLink={isEditMode ? { to: "/drafts", text: "← drafts" } : undefined}
233
242
/>
234
243
<div className="TrailWalk-progressLine" />
···
342
351
343
352
{!isCompleted && !isEditMode && (
344
353
<div className="TrailWalk-footer">
345
-
<button onClick={handleAbandon} className="TrailWalk-abandonButton">
346
-
abandon
347
-
</button>
354
+
<span className="TrailWalk-abandonButton">
355
+
<TextButton action={abandonAction} pendingChildren="abandoning...">
356
+
abandon
357
+
</TextButton>
358
+
</span>
348
359
</div>
349
360
)}
350
361
···
359
370
</ul>
360
371
</div>
361
372
)}
362
-
<button onClick={onPublish} disabled={isPublishing} className="TrailWalk-publishButton">
363
-
{isPublishing ? "publishing..." : "publish trail"}
364
-
</button>
373
+
<AccentButton action={onPublish!} size="medium" pendingChildren="publishing...">
374
+
publish trail
375
+
</AccentButton>
365
376
</div>
366
377
)}
367
378
</div>
+2
app/at/(trail)/[handle]/trail/[rkey]/page.tsx
+2
app/at/(trail)/[handle]/trail/[rkey]/page.tsx
···
39
39
loadCurrentUser(),
40
40
]);
41
41
42
+
// await new Promise(resolve => setTimeout(resolve, 4000))
43
+
42
44
// Preload embeds for all stops that have external links
43
45
const initialEmbeds: Array<[string, Promise<React.ReactElement>]> = trail.stops
44
46
.filter((stop) => stop.external?.uri)
+5
-4
app/at/[handle]/completed/page.tsx
+5
-4
app/at/[handle]/completed/page.tsx
···
1
1
import { loadUserCompletedTrails } from "@/data/queries";
2
-
import { TrailCard } from "../../../TrailCard";
3
-
import { EmptyState } from "../../../EmptyState";
4
-
import "../../../TrailsList.css";
2
+
import { TrailCard } from "@/app/TrailCard";
3
+
import { TrailCardWalkers } from "@/app/TrailCardWalkers";
4
+
import { EmptyState } from "@/app/EmptyState";
5
+
import "@/app/TrailsList.css";
5
6
6
7
export default async function ProfileCompletedPage({
7
8
params,
···
21
22
{completedTrails.map((trail) => (
22
23
<TrailCard
23
24
key={trail.rkey}
24
-
uri={trail.uri}
25
25
rkey={trail.rkey}
26
26
creatorHandle={trail.creator.handle}
27
27
title={trail.title}
···
30
30
backgroundColor={trail.backgroundColor}
31
31
creator={trail.creator}
32
32
stopsCount={trail.stopsCount}
33
+
walkersSlot={<TrailCardWalkers trailUri={trail.uri} />}
33
34
/>
34
35
))}
35
36
</div>
+2
-7
app/drafts/[rkey]/DraftEditor.tsx
+2
-7
app/drafts/[rkey]/DraftEditor.tsx
···
198
198
window.scrollTo(0, 0);
199
199
};
200
200
201
-
const [isPublishing, setIsPublishing] = useState(false);
202
201
const [publishError, setPublishError] = useState<string[] | null>(null);
203
202
const [inlineErrors, setInlineErrors] = useState<Record<string, string>>({});
204
203
205
-
const handlePublish = async () => {
204
+
const publishAction = async () => {
206
205
requireAuth();
207
206
setPublishError(null);
208
207
setInlineErrors({});
209
-
setIsPublishing(true);
210
208
211
209
try {
212
210
await saver.saveNow(localDraft);
···
222
220
if (!result.success) {
223
221
setPublishError(result.errors);
224
222
setInlineErrors(result.inlineErrors);
225
-
setIsPublishing(false);
226
223
return;
227
224
}
228
225
···
231
228
} catch (error: unknown) {
232
229
const message = error instanceof Error ? error.message : "something went wrong";
233
230
setPublishError([message]);
234
-
setIsPublishing(false);
235
231
}
236
232
};
237
233
···
329
325
rkey={rkey}
330
326
onModeChange={() => setStage("overview")}
331
327
isEditMode={true}
332
-
onPublish={handlePublish}
328
+
onPublish={publishAction}
333
329
publishError={publishError}
334
-
isPublishing={isPublishing}
335
330
initialEmbeds={initialEmbeds}
336
331
/>
337
332
)}
+46
components/ActionButton.tsx
+46
components/ActionButton.tsx
···
1
+
"use client";
2
+
3
+
import { useTransition, type ReactNode } from "react";
4
+
5
+
type Props = {
6
+
action: () => Promise<void> | void;
7
+
children: ReactNode;
8
+
pendingChildren?: ReactNode;
9
+
className?: string;
10
+
pendingClassName?: string;
11
+
disabled?: boolean;
12
+
type?: "button" | "submit";
13
+
};
14
+
15
+
export function ActionButton({
16
+
action,
17
+
children,
18
+
pendingChildren,
19
+
className,
20
+
pendingClassName,
21
+
disabled = false,
22
+
type = "button",
23
+
}: Props) {
24
+
const [isPending, startTransition] = useTransition();
25
+
26
+
const handleClick = (e: React.MouseEvent) => {
27
+
if (isPending) return;
28
+
e.stopPropagation();
29
+
startTransition(async () => {
30
+
await action();
31
+
});
32
+
};
33
+
34
+
const classNames = [className, isPending && pendingClassName].filter(Boolean).join(" ");
35
+
36
+
return (
37
+
<button
38
+
type={type}
39
+
onClick={handleClick}
40
+
disabled={disabled || isPending}
41
+
className={classNames}
42
+
>
43
+
{isPending && pendingChildren ? pendingChildren : children}
44
+
</button>
45
+
);
46
+
}
+75
components/Card.css
+75
components/Card.css
···
1
+
.Card {
2
+
display: block;
3
+
text-decoration: none;
4
+
color: inherit;
5
+
}
6
+
7
+
.Card-bg {
8
+
border-radius: 12px;
9
+
padding: 1.5rem;
10
+
position: relative;
11
+
transition: transform 0.2s ease;
12
+
isolation: isolate;
13
+
will-change: transform;
14
+
}
15
+
16
+
.Card-bg::before {
17
+
content: "";
18
+
position: absolute;
19
+
inset: 0;
20
+
border-radius: 12px;
21
+
background-color: var(--bg-color);
22
+
border: 1.5px solid color-mix(in srgb, var(--accent-color) 15%, rgba(0, 0, 0, 0.08));
23
+
filter: var(--user-content-filter);
24
+
z-index: -2;
25
+
pointer-events: none;
26
+
}
27
+
28
+
.Card-bg::after {
29
+
content: "";
30
+
position: absolute;
31
+
inset: 0;
32
+
border-radius: 12px;
33
+
border: 1.5px solid var(--accent-color);
34
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
35
+
filter: var(--user-content-filter);
36
+
opacity: 0;
37
+
transition: opacity 0.2s ease;
38
+
will-change: opacity;
39
+
z-index: -1;
40
+
pointer-events: none;
41
+
}
42
+
43
+
@media (hover: hover) {
44
+
.Card:hover .Card-bg {
45
+
transform: translateY(-2px);
46
+
}
47
+
48
+
.Card:hover .Card-bg::after {
49
+
opacity: 1;
50
+
}
51
+
52
+
.Card-bg--pending {
53
+
transform: translateY(-2px);
54
+
}
55
+
}
56
+
57
+
.Card:active .Card-bg {
58
+
transform: scale(0.99);
59
+
}
60
+
61
+
.Card-bg--pending::after {
62
+
opacity: 1;
63
+
animation: card-glow 1.5s ease-in-out infinite;
64
+
animation-delay: 400ms;
65
+
}
66
+
67
+
@keyframes card-glow {
68
+
0%,
69
+
100% {
70
+
opacity: 1;
71
+
}
72
+
50% {
73
+
opacity: 0.5;
74
+
}
75
+
}
+41
components/Card.tsx
+41
components/Card.tsx
···
1
+
"use client";
2
+
3
+
import Link, { useLinkStatus } from "next/link";
4
+
import type { ReactNode } from "react";
5
+
import "./Card.css";
6
+
7
+
type Props = {
8
+
href: string;
9
+
accentColor: string;
10
+
backgroundColor: string;
11
+
children: ReactNode;
12
+
};
13
+
14
+
function CardBg({ accentColor, backgroundColor, children }: Omit<Props, "href">) {
15
+
const { pending } = useLinkStatus();
16
+
17
+
return (
18
+
<div
19
+
className={`Card-bg${pending ? " Card-bg--pending" : ""}`}
20
+
style={
21
+
{
22
+
"--accent-color": accentColor,
23
+
"--accent-color-transparent": `${accentColor}20`,
24
+
"--bg-color": backgroundColor,
25
+
} as React.CSSProperties
26
+
}
27
+
>
28
+
{children}
29
+
</div>
30
+
);
31
+
}
32
+
33
+
export function Card({ href, accentColor, backgroundColor, children }: Props) {
34
+
return (
35
+
<Link href={href} className="Card">
36
+
<CardBg accentColor={accentColor} backgroundColor={backgroundColor}>
37
+
{children}
38
+
</CardBg>
39
+
</Link>
40
+
);
41
+
}
+82
components/TextButton.css
+82
components/TextButton.css
···
1
+
.TextButton {
2
+
font-family: inherit;
3
+
font-size: inherit;
4
+
line-height: 1;
5
+
padding: 0.5rem 0;
6
+
background: none;
7
+
border: none;
8
+
color: var(--text-muted);
9
+
cursor: pointer;
10
+
text-transform: lowercase;
11
+
transition: color 0.2s ease;
12
+
white-space: nowrap;
13
+
}
14
+
15
+
@media (hover: hover) {
16
+
.TextButton:hover:not(:disabled) {
17
+
color: var(--text-secondary);
18
+
}
19
+
}
20
+
21
+
.TextButton:active:not(:disabled) {
22
+
color: var(--text-secondary);
23
+
transition-duration: 0.05s;
24
+
}
25
+
26
+
.TextButton:disabled {
27
+
pointer-events: none;
28
+
cursor: default;
29
+
}
30
+
31
+
.TextButton--pending {
32
+
color: transparent;
33
+
-webkit-text-fill-color: transparent;
34
+
background-image: linear-gradient(
35
+
to right,
36
+
var(--text-muted) 0%,
37
+
var(--text-secondary) 50%,
38
+
var(--text-muted) 100%
39
+
);
40
+
background-size: 30px 100%;
41
+
background-repeat: no-repeat;
42
+
background-color: var(--text-muted);
43
+
background-clip: text;
44
+
-webkit-background-clip: text;
45
+
animation: text-shimmer 2s ease-out infinite;
46
+
}
47
+
48
+
@keyframes text-shimmer {
49
+
0% {
50
+
background-image: linear-gradient(
51
+
to right,
52
+
var(--text-muted) 0%,
53
+
var(--text-secondary) 50%,
54
+
var(--text-muted) 100%
55
+
);
56
+
background-position: -30px 0;
57
+
background-clip: text;
58
+
-webkit-background-clip: text;
59
+
}
60
+
80% {
61
+
background-image: linear-gradient(
62
+
to right,
63
+
var(--text-muted) 0%,
64
+
var(--text-secondary) 50%,
65
+
var(--text-muted) 100%
66
+
);
67
+
background-position: 100px 0;
68
+
background-clip: text;
69
+
-webkit-background-clip: text;
70
+
}
71
+
100% {
72
+
background-image: linear-gradient(
73
+
to right,
74
+
var(--text-muted) 0%,
75
+
var(--text-secondary) 50%,
76
+
var(--text-muted) 100%
77
+
);
78
+
background-position: 150px 0;
79
+
background-clip: text;
80
+
-webkit-background-clip: text;
81
+
}
82
+
}
+30
components/TextButton.tsx
+30
components/TextButton.tsx
···
1
+
"use client";
2
+
3
+
import { useTransition } from "react";
4
+
import "./TextButton.css";
5
+
6
+
type Props = {
7
+
action: () => Promise<void> | void;
8
+
children: string;
9
+
pendingChildren: string;
10
+
};
11
+
12
+
export function TextButton({ action, children, pendingChildren }: Props) {
13
+
const [isPending, startTransition] = useTransition();
14
+
15
+
const handleClick = (e: React.MouseEvent) => {
16
+
if (isPending) return;
17
+
e.stopPropagation();
18
+
startTransition(async () => {
19
+
await action();
20
+
});
21
+
};
22
+
23
+
return (
24
+
<button type="button" onClick={handleClick} disabled={isPending} className="TextButton">
25
+
<span className={isPending ? "TextButton--pending" : undefined}>
26
+
{isPending ? pendingChildren : children}
27
+
</span>
28
+
</button>
29
+
);
30
+
}
+5
data/drafts/actions.ts
+5
data/drafts/actions.ts
···
2
2
3
3
import "server-only";
4
4
import { getDb, drafts, type DraftRecord } from "@/data/db";
5
+
import { refresh, revalidatePath } from "next/cache";
5
6
import { eq, and, sql } from "drizzle-orm";
6
7
import { getCurrentDid } from "@/auth";
7
8
import { generateTid } from "../tid";
···
102
103
version: 1,
103
104
});
104
105
106
+
revalidatePath("/drafts");
105
107
return rkey;
106
108
}
107
109
···
162
164
})
163
165
.returning({ version: drafts.version });
164
166
167
+
revalidatePath("/drafts");
168
+
165
169
return warning
166
170
? { success: true, version: result[0].version, warning }
167
171
: { success: true, version: result[0].version };
···
172
176
const db = getDb();
173
177
174
178
await db.delete(drafts).where(and(eq(drafts.authorDid, did), eq(drafts.rkey, rkey)));
179
+
refresh();
175
180
}