an app to share curated trails
sidetrail.app
fix cc warnings
author
Dan Abramov
date
(Jun 11, 2026, 3:24 AM +0100)
commit
03dba008
03dba008bae8632b6a698d4a04dbf065fd9a03dc
parent
21127f1d
21127f1d1d726a6791e0b5ae7f8beeee7a6a8eab
+79
-30
+5
app/(home)/drafts/loading.tsx
+5
app/(home)/drafts/loading.tsx
+2
app/(home)/layout.tsx
+2
app/(home)/layout.tsx
+9
-3
app/AuthContext.tsx
+9
-3
app/AuthContext.tsx
···
3
3
import { createContext, useContext, ReactNode } from "react";
4
4
5
5
type AuthContextType = {
6
-
did: string | null;
6
+
didPromise: Promise<string | null>;
7
7
};
8
8
9
9
const AuthContext = createContext<AuthContextType | null>(null);
10
10
11
-
export function AuthProvider({ children, did }: { children: ReactNode; did: string | null }) {
12
-
return <AuthContext.Provider value={{ did }}>{children}</AuthContext.Provider>;
11
+
export function AuthProvider({
12
+
children,
13
+
didPromise,
14
+
}: {
15
+
children: ReactNode;
16
+
didPromise: Promise<string | null>;
17
+
}) {
18
+
return <AuthContext.Provider value={{ didPromise }}>{children}</AuthContext.Provider>;
13
19
}
14
20
15
21
export function useAuthContext() {
+21
app/SegmentTabs.tsx
+21
app/SegmentTabs.tsx
···
1
1
"use client";
2
2
3
+
import { Suspense } from "react";
3
4
import { useSelectedLayoutSegment } from "next/navigation";
4
5
import Link, { useLinkStatus } from "next/link";
5
6
import "./SegmentTabs.css";
···
38
39
}
39
40
40
41
export function SegmentTabs({ segments, basePath = "/" }: SegmentTabsProps) {
42
+
return (
43
+
<Suspense fallback={<SegmentTabsShim segments={segments} basePath={basePath} />}>
44
+
<SegmentTabsLoaded segments={segments} basePath={basePath} />
45
+
</Suspense>
46
+
);
47
+
}
48
+
49
+
export function SegmentTabsShim({ segments, basePath }: SegmentTabsProps) {
50
+
return <SegmentTabsBase selected={null} segments={segments} basePath={basePath} />;
51
+
}
52
+
53
+
export function SegmentTabsLoaded({ segments, basePath }: SegmentTabsProps) {
41
54
const selected = useSelectedLayoutSegment();
55
+
return <SegmentTabsBase selected={selected} segments={segments} basePath={basePath} />;
56
+
}
57
+
58
+
export function SegmentTabsBase({
59
+
segments,
60
+
basePath,
61
+
selected,
62
+
}: SegmentTabsProps & { selected: string | null }) {
42
63
return (
43
64
<nav className="SegmentTabs">
44
65
{segments.map((segment) => {
+23
-15
app/UserMenuClient.tsx
+23
-15
app/UserMenuClient.tsx
···
6
6
import { useLoginModal } from "@/app/LoginModalContext";
7
7
import { logout } from "@/auth/actions";
8
8
import "./UserMenu.css";
9
+
import { Suspense } from "react";
9
10
10
11
interface UserMenuClientProps {
11
12
user: {
···
16
17
17
18
export function UserMenuClient({ user }: UserMenuClientProps) {
18
19
const { openLoginModal } = useLoginModal();
19
-
const pathname = usePathname();
20
20
21
21
if (!user) {
22
22
return (
···
37
37
)}
38
38
</button>
39
39
</DropdownMenu.Trigger>
40
+
<Suspense fallback={null}>
41
+
<UserMenuDropdown handle={user.handle} />
42
+
</Suspense>
43
+
</DropdownMenu.Root>
44
+
);
45
+
}
40
46
41
-
<DropdownMenu.Portal>
42
-
<DropdownMenu.Content className="UserMenu-content" align="end" sideOffset={8}>
43
-
<DropdownMenu.Item asChild>
44
-
<Link href={`/@${user.handle}`} className="UserMenu-item">
45
-
profile
46
-
</Link>
47
-
</DropdownMenu.Item>
47
+
function UserMenuDropdown({ handle }: { handle: string }) {
48
+
const pathname = usePathname();
49
+
return (
50
+
<DropdownMenu.Portal>
51
+
<DropdownMenu.Content className="UserMenu-content" align="end" sideOffset={8}>
52
+
<DropdownMenu.Item asChild>
53
+
<Link href={`/@${handle}`} className="UserMenu-item">
54
+
profile
55
+
</Link>
56
+
</DropdownMenu.Item>
48
57
49
-
<DropdownMenu.Separator className="UserMenu-separator" />
58
+
<DropdownMenu.Separator className="UserMenu-separator" />
50
59
51
-
<DropdownMenu.Item className="UserMenu-item" onSelect={() => logout(pathname)}>
52
-
log out
53
-
</DropdownMenu.Item>
54
-
</DropdownMenu.Content>
55
-
</DropdownMenu.Portal>
56
-
</DropdownMenu.Root>
60
+
<DropdownMenu.Item className="UserMenu-item" onSelect={() => logout(pathname)}>
61
+
log out
62
+
</DropdownMenu.Item>
63
+
</DropdownMenu.Content>
64
+
</DropdownMenu.Portal>
57
65
);
58
66
}
+2
app/at/(trail)/[handle]/trail/[rkey]/page.tsx
+2
app/at/(trail)/[handle]/trail/[rkey]/page.tsx
+5
app/at/[handle]/(index)/loading.tsx
+5
app/at/[handle]/(index)/loading.tsx
+2
app/at/[handle]/layout.tsx
+2
app/at/[handle]/layout.tsx
+8
-11
app/layout.tsx
+8
-11
app/layout.tsx
···
3
3
import { LoginModalProvider } from "@/app/LoginModalContext";
4
4
import { LoginModal } from "@/app/LoginModal";
5
5
import { loadCurrentDid } from "@/data/queries";
6
-
import { Suspense } from "react";
7
6
import { AuthProvider } from "@/app/AuthContext";
8
7
export const metadata: Metadata = {
9
8
metadataBase: new URL("https://sidetrail.app"),
···
15
14
return (
16
15
<html lang="en">
17
16
<body>
18
-
<Suspense fallback={null}>
19
-
<Auth>
20
-
<LoginModalProvider>
21
-
{children}
22
-
<LoginModal />
23
-
</LoginModalProvider>
24
-
</Auth>
25
-
</Suspense>
17
+
<Auth>
18
+
<LoginModalProvider>
19
+
{children}
20
+
<LoginModal />
21
+
</LoginModalProvider>
22
+
</Auth>
26
23
</body>
27
24
</html>
28
25
);
29
26
}
30
27
31
28
async function Auth({ children }: { children: React.ReactNode }) {
32
-
const did = await loadCurrentDid();
33
-
return <AuthProvider did={did}>{children}</AuthProvider>;
29
+
const didPromise = loadCurrentDid();
30
+
return <AuthProvider didPromise={didPromise}>{children}</AuthProvider>;
34
31
}
+2
-1
auth/useAuthAction.ts
+2
-1
auth/useAuthAction.ts
···
5
5
6
6
export function useAuthAction() {
7
7
const { openLoginModal } = useLoginModal();
8
-
const { did } = useAuthContext();
8
+
const { didPromise } = useAuthContext();
9
9
10
10
return <Args extends unknown[], R>(action: (...args: Args) => Promise<R>) =>
11
11
async (...args: Args): Promise<R | undefined> => {
12
+
const did = await didPromise;
12
13
if (did) {
13
14
return action(...args);
14
15
} else {