103 lines
4.0 KiB
TypeScript
103 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { commentsLabel } from "@/lib/feed-model";
|
|
import { SparkleButton } from "./Buttons";
|
|
import type { CurrentSlide } from "./MobileFeed";
|
|
import type { CardPost } from "@/lib/feed-model";
|
|
|
|
const icon = {
|
|
viewBox: "0 0 24 24",
|
|
fill: "none",
|
|
stroke: "currentColor",
|
|
strokeWidth: 1.7,
|
|
strokeLinecap: "round" as const,
|
|
strokeLinejoin: "round" as const,
|
|
"aria-hidden": true,
|
|
};
|
|
|
|
export interface MobileDockProps {
|
|
/** The slide on screen; like and comments act on its post. */
|
|
slide: CurrentSlide;
|
|
onToggleLike?: (post: CardPost) => void;
|
|
likeBusy?: boolean;
|
|
onOpenComments?: (postId: string) => void;
|
|
onOpenComposer?: () => void;
|
|
onOpenMore?: () => void;
|
|
}
|
|
|
|
/** What the like and comment buttons show and whether they work, for the slide on screen. */
|
|
export function dockState(slide: CurrentSlide, opts: { canLike?: boolean; likeBusy?: boolean } = {}) {
|
|
const post = slide.kind === "post" ? slide.post : null;
|
|
if (!post) {
|
|
return { post: null, liked: false, likes: null, comments: null, likeLabel: "Like", commentsLabel: "Comments", likeDisabled: true, commentsDisabled: true };
|
|
}
|
|
return {
|
|
post,
|
|
liked: post.isLiked,
|
|
likes: post.likesCount,
|
|
comments: post.commentsCount,
|
|
likeLabel: post.isLiked ? `Unlike, ${post.likesCount} likes` : `Like, ${post.likesCount} likes`,
|
|
commentsLabel: `Open comments, ${commentsLabel(post.commentsCount).toLowerCase()}`,
|
|
likeDisabled: !post.id || !opts.canLike || !!opts.likeBusy,
|
|
commentsDisabled: !post.id,
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Phone dock (spec "Mobile layout" > "Bottom dock"): a frosted bar 16px above the
|
|
* bottom. Like and comments act on the post on screen and are disabled on the
|
|
* featured and loading slides. Liked state and counts come from the post itself,
|
|
* the same source as the desktop like button and double-tap.
|
|
*/
|
|
export function MobileDock({ slide, onToggleLike, likeBusy, onOpenComments, onOpenComposer, onOpenMore }: MobileDockProps) {
|
|
const s = dockState(slide, { canLike: !!onToggleLike, likeBusy });
|
|
const [beat, setBeat] = useState(false);
|
|
return (
|
|
<nav className="dock" aria-label="Post actions" data-testid="feed-dock">
|
|
<button
|
|
type="button"
|
|
className={`dk dk-like${s.liked ? " dk-like-on" : ""}${beat && s.liked ? " dk-beat" : ""}`}
|
|
aria-pressed={s.liked}
|
|
aria-label={s.likeLabel}
|
|
disabled={s.likeDisabled}
|
|
onClick={() => {
|
|
if (!s.post) return;
|
|
setBeat(!s.post.isLiked);
|
|
onToggleLike?.(s.post);
|
|
}}
|
|
onAnimationEnd={() => setBeat(false)}
|
|
>
|
|
<svg {...icon} fill={s.liked ? "currentColor" : "none"}>
|
|
<path d="M12 20.5s-7.5-4.4-9.4-9.1C1.3 8 3.1 4.5 6.6 4.5c2 0 3.5 1.1 4.3 2.4.5.7 1.7.7 2.2 0 .8-1.3 2.3-2.4 4.3-2.4 3.5 0 5.3 3.5 4 6.9-1.9 4.7-9.4 9.1-9.4 9.1z" />
|
|
</svg>
|
|
{s.likes !== null ? <span className="dk-n" data-testid="dock-likes">{s.likes}</span> : null}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="dk dk-comments"
|
|
aria-label={s.commentsLabel}
|
|
disabled={s.commentsDisabled}
|
|
onClick={() => {
|
|
if (s.post?.id) onOpenComments?.(s.post.id);
|
|
}}
|
|
>
|
|
<svg {...icon}>
|
|
<path d="M21 12a8.5 8.5 0 0 1-12.4 7.6L3.5 21l1.4-4.6A8.5 8.5 0 1 1 21 12z" />
|
|
</svg>
|
|
{s.comments !== null ? <span className="dk-n" data-testid="dock-comments">{s.comments}</span> : null}
|
|
</button>
|
|
<SparkleButton variant="fab" label="New post" className="dk-plus" onClick={() => onOpenComposer?.()} />
|
|
<button type="button" className="dk dk-more" aria-label="View more" onClick={() => onOpenMore?.()}>
|
|
<svg {...icon}>
|
|
<rect x="3.5" y="3.5" width="7" height="7" rx="2" />
|
|
<rect x="13.5" y="3.5" width="7" height="7" rx="2" />
|
|
<rect x="3.5" y="13.5" width="7" height="7" rx="2" />
|
|
<rect x="13.5" y="13.5" width="7" height="7" rx="2" />
|
|
</svg>
|
|
More
|
|
</button>
|
|
</nav>
|
|
);
|
|
}
|