krispire/spsays-training
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: share sheet update

Browse Source
This commit is contained in:
gosangam
2026-05-31 10:24:32 +05:30
parent 8bd82a0e8a
commit 01bcc057fa
2 changed files with 168 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/social/post-actions-footer.tsx
+15 -75
View File
@@ -33,13 +33,11 @@ import {
import { toast } from "sonner";
import { cn } from "@/lib/utils";
import { posts as postsApi, SocialError, type Post } from "@/lib/social";
import { createShortLink } from "@/lib/share";
import { structuredReferenceForPost } from "@/lib/source-reference";
import { useAuth } from "@/components/auth/auth-provider";
import { useAuthGate } from "@/components/auth/auth-gate";
import { useMediaQuery } from "@/components/selection-toolbar/shared";
import { CollectionsDrawer } from "@/components/selection-toolbar/collections-drawer";
import { SharePostSheet } from "./share-post-sheet";
import { useSharePost } from "./share-post-provider";
// All icons come from the Heroicons v2 outline family (react-icons
// `hi2` namespace), so they share one design language — uniform stroke
@@ -49,11 +47,12 @@ const ICON_CLASS = "size-[1.375rem]";
export function PostActionsFooter({ post }: { post: Post }) {
const { user } = useAuth();
const { requireAuth } = useAuthGate();
const { openShareSheet } = useSharePost();
const isMobile = useMediaQuery("(max-width: 767px)");
const [collectionsOpen, setCollectionsOpen] = useState(false);
const [shareOpen, setShareOpen] = useState(false);
// Tracks the short-URL fetch on the direct-mobile-share path so the
// Send icon can render a spinner while the user waits.
// Tracks the platform-aware share routing (short URL + image fetch
// on mobile native-share; sheet mount on desktop) so the Send icon
// can render a spinner while the user waits.
const [sharePending, setSharePending] = useState(false);
// Optimistic local mirror of post.viewer_has_reshared so the swap
// happens the instant the user taps Reshare. Reconciles to the
@@ -66,11 +65,6 @@ export function PostActionsFooter({ post }: { post: Post }) {
// Owners and resharers both see Send — the post is "on their account"
// either way, so the action they need is external share, not reshare.
const showSend = isOwner || reshared;
// Capability-check the Web Share API once per render — supported on
// mobile Safari/Chrome and some desktop Safari builds. We only want
// the native-share short-circuit on phones.
const nativeShareSupported =
typeof navigator !== "undefined" && typeof navigator.share === "function";
async function withAuth(fn: () => void | Promise<void>) {
if (!(await requireAuth())) return;
@@ -91,64 +85,16 @@ export function PostActionsFooter({ post }: { post: Post }) {
}
}
// Direct-mobile share path:
// 1. User taps Send (consumes iOS Safari's user activation).
// 2. We fetch the short URL — short enough to fit comfortably
// inside the same activation window. Loading spinner replaces
// the icon while we wait.
// 3. navigator.share fires within the same handler. iOS sees the
// activation token, opens the system share sheet.
// 4. If activation has expired by the time we call share (slow
// network) or anything else throws non-AbortError, fall back
// to opening the custom in-app sheet so the user isn't stuck.
//
// Desktop / no native share API → straight to the custom sheet,
// which handles its own short-URL fetch + image pre-fetch.
// Send button: hand off to the provider, which decides between the
// mobile native-share path (await short URL + image proxy in
// parallel, then navigator.share) and the desktop/no-native-share
// path (mount the custom SharePostSheet). Provider's openShareSheet
// is always-resolves, so a single try/finally toggles the spinner.
async function onSendClick() {
if (!isMobile || !nativeShareSupported) {
setShareOpen(true);
return;
}
if (sharePending) return;
const handle = post.author_handle ?? user?.handle ?? "";
if (!handle) {
// Without a handle we can't build the post URL; fall back to
// the custom sheet which has its own resolution path.
setShareOpen(true);
return;
}
setSharePending(true);
try {
const longPath = `/u/${encodeURIComponent(handle)}/posts#post-${post.id}`;
const code = await createShortLink(longPath);
const origin = window.location.origin;
const url = code
? new URL(`/share/${code}`, origin).toString()
: new URL(longPath, origin).toString();
const ref = structuredReferenceForPost(
post.source_url,
post.source_title,
);
const lines = [`“${post.caption}”`, "", "Source:", ref.title];
if (ref.detail) lines.push(ref.detail);
lines.push(url);
const text = lines.join("\n");
const title = ref.detail ? `${ref.title} — ${ref.detail}` : ref.title;
try {
await navigator.share({ title, text });
} catch (err) {
// User-cancel = AbortError = leave them alone. Any other
// failure (most often iOS NotAllowedError when the awaited
// fetch overran the user-activation window) → fall back to
// the in-app sheet so the user can still complete the share.
if (err instanceof DOMException && err.name === "AbortError") return;
console.warn("[share] navigator.share failed, opening custom sheet", err);
setShareOpen(true);
}
await openShareSheet(post);
} finally {
setSharePending(false);
}
@@ -192,7 +138,7 @@ export function PostActionsFooter({ post }: { post: Post }) {
aria-hidden
/>
) : (
<HiOutlinePaperAirplane className={ICON_CLASS} />
<HiOutlinePaperAirplane className={ICON_CLASS+"rotate-45"} />
)
}
/>
@@ -217,15 +163,9 @@ export function PostActionsFooter({ post }: { post: Post }) {
isMobile={isMobile}
existingPostId={post.id}
/>
{showSend ? (
<SharePostSheet
open={shareOpen}
onClose={() => setShareOpen(false)}
post={post}
isMobile={isMobile}
/>
) : null}
{/* SharePostSheet is mounted globally by SharePostProvider, so
no per-card instance lives here. The provider's
openShareSheet swaps the active post under the hood. */}
</>
);
}