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

feat: add post like

Browse Source
This commit is contained in:
gosangam
2026-06-09 16:34:10 +05:30
parent e36afdd1a5
commit 647a803b96
8 changed files with 441 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(app)/notifications/page.tsx
+27 -8
View File
@@ -99,7 +99,7 @@ export default function NotificationsPage() {
) : (
<ul className="divide-y divide-border rounded-2xl border border-border overflow-hidden">
{items.map((n) => (
<NotificationRow key={n.id} n={n} />
<NotificationRow key={n.id} n={n} selfHandle={user.handle} />
))}
</ul>
)}
@@ -107,9 +107,15 @@ export default function NotificationsPage() {
);
}
function NotificationRow({ n }: { n: AppNotification }) {
function NotificationRow({
n,
selfHandle,
}: {
n: AppNotification;
selfHandle: string;
}) {
const display = n.actor_name || (n.actor_handle ? `@${n.actor_handle}` : "Someone");
const message = messageFor(n.kind);
const message = messageFor(n);
const unread = !n.read_at;
const body = (
@@ -131,10 +137,18 @@ function NotificationRow({ n }: { n: AppNotification }) {
</div>
);
// Link to the actor's profile when we know their handle.
return n.actor_handle ? (
// A like links to your own post; everything else links to the actor's
// profile (when we know their handle).
const href =
n.kind === "post_like" && n.post_id
? `/u/${selfHandle}/posts#post-${n.post_id}`
: n.actor_handle
? `/u/${n.actor_handle}`
: null;
return href ? (
<li>
<Link href={`/u/${n.actor_handle}`} className="block">
<Link href={href} className="block">
{body}
</Link>
</li>
@@ -152,12 +166,17 @@ function cnRow(unread: boolean) {
/** Human-readable tail for each notification kind. Add cases as new
* notification kinds are introduced on the backend. */
function messageFor(kind: string): string {
switch (kind) {
function messageFor(n: AppNotification): string {
switch (n.kind) {
case "follow_request":
return "requested to follow you.";
case "follow_accepted":
return "accepted your follow request.";
case "post_like": {
const others = (n.actor_count ?? 1) - 1;
if (others <= 0) return "liked your post.";
return `and ${others} ${others === 1 ? "other" : "others"} liked your post.`;
}
default:
return "sent you a notification.";
}
components/notifications/notifications-provider.tsx
+2
View File
@@ -59,6 +59,8 @@ function messageFor(e: IncomingEvent): string {
return `${who} requested to follow you`;
case "follow_accepted":
return `${who} accepted your follow request`;
case "post_like":
return `${who} liked your post`;
default:
return "You have a new notification";
}
components/profile/follow-list-drawer.tsx
+13 -247
View File
@@ -1,40 +1,16 @@
"use client";
/**
* FollowListDrawer — the followers / following list for a profile.
*
* Opens as a right-side drawer on desktop and a bottom sheet on mobile. The
* list is virtualized (fixed-height rows) and paginated: it fetches a page at
* a time from the BFF and loads the next page as you scroll near the bottom.
* The search field queries the backend across the profile's followers /
* following (debounced), so it works against the full set, not just the
* loaded page.
*
* State-update notes (React 19 / set-state-in-effect rule): the (re)load runs
* inside a debounce timer callback and pagination runs from the scroll
* handler — never synchronously inside an effect body.
* FollowListDrawer — the followers / following list for a profile. A thin
* wrapper over the generic virtualized UserListDrawer, wired to the
* relationships followers/following endpoints.
*/
import { useEffect, useRef, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { Loader2, Search } from "lucide-react";
import { useVirtualizer } from "@tanstack/react-virtual";
import {
Drawer,
DrawerContent,
DrawerHeader,
DrawerTitle,
} from "@/components/ui/drawer";
import { useMediaQuery } from "@/components/selection-toolbar/shared";
import { relationships, type UserSummary } from "@/lib/social";
import { cn } from "@/lib/utils";
import { relationships } from "@/lib/social";
import { UserListDrawer } from "@/components/social/user-list-drawer";
export type FollowMode = "followers" | "following";
const PAGE = 30;
const ROW = 64; // px — fixed row height for the virtualizer
export function FollowListDrawer({
open,
mode,
@@ -46,227 +22,17 @@ export function FollowListDrawer({
handle: string;
onClose: () => void;
}) {
const isMobile = useMediaQuery("(max-width: 767px)");
const direction = isMobile ? "bottom" : "right";
const [q, setQ] = useState("");
const [items, setItems] = useState<UserSummary[]>([]);
const [total, setTotal] = useState(0);
const [status, setStatus] = useState<"idle" | "loading" | "error">("idle");
// reqRef tags the current query "session"; a newer reload bumps it so any
// in-flight reload/append for an older query is ignored on arrival.
const reqRef = useRef(0);
const busyRef = useRef(false);
const scrollRef = useRef<HTMLDivElement>(null);
const fetchPage = mode === "followers" ? relationships.followers : relationships.following;
// (Re)load page 0 whenever the drawer opens or the mode/handle/query
// changes. Debounced so typing in search doesn't spam the BFF.
useEffect(() => {
if (!open) return;
const t = window.setTimeout(() => {
const token = ++reqRef.current;
busyRef.current = true;
setItems([]);
setStatus("loading");
fetchPage(handle, { q, limit: PAGE, offset: 0 })
.then((res) => {
if (reqRef.current !== token) return;
setItems(res.users);
setTotal(res.total);
setStatus("idle");
})
.catch(() => {
if (reqRef.current === token) setStatus("error");
})
.finally(() => {
if (reqRef.current === token) busyRef.current = false;
});
}, 250);
return () => window.clearTimeout(t);
}, [open, mode, handle, q, fetchPage]);
function loadMore() {
if (busyRef.current || items.length >= total) return;
const token = reqRef.current; // same session — don't bump
const offset = items.length;
busyRef.current = true;
setStatus("loading");
fetchPage(handle, { q, limit: PAGE, offset })
.then((res) => {
if (reqRef.current !== token) return;
setItems((prev) => [...prev, ...res.users]);
setTotal(res.total);
setStatus("idle");
})
.catch(() => {
if (reqRef.current === token) setStatus("error");
})
.finally(() => {
if (reqRef.current === token) busyRef.current = false;
});
}
// TanStack Virtual returns non-memoizable functions; the React Compiler
// simply skips memoizing this component, which is fine here.
// eslint-disable-next-line react-hooks/incompatible-library
const virtualizer = useVirtualizer({
count: items.length,
getScrollElement: () => scrollRef.current,
estimateSize: () => ROW,
overscan: 8,
});
const empty = status !== "loading" && items.length === 0;
return (
<Drawer
<UserListDrawer
open={open}
direction={direction}
onOpenChange={(o) => {
if (!o) onClose();
}}
>
<DrawerContent
direction={direction}
className={cn(
"bg-card flex flex-col",
isMobile ? "h-[85vh]" : "h-full w-[88vw] max-w-sm",
)}
>
<DrawerHeader className="border-b border-border text-left">
<DrawerTitle className="text-base capitalize">{mode}</DrawerTitle>
<div className="relative mt-2">
<Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
<input
type="search"
value={q}
onChange={(e) => setQ(e.target.value)}
placeholder={`Search ${mode}`}
autoComplete="off"
className="w-full rounded-lg border border-border bg-background py-2 pl-9 pr-3 text-sm text-foreground outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring"
/>
</div>
</DrawerHeader>
<div
ref={scrollRef}
onScroll={(e) => {
const el = e.currentTarget;
if (el.scrollHeight - el.scrollTop - el.clientHeight < 240) {
loadMore();
onClose={onClose}
title={mode === "followers" ? "Followers" : "Following"}
depsKey={`${mode}:${handle}`}
fetchPage={(params) =>
mode === "followers"
? relationships.followers(handle, params)
: relationships.following(handle, params)
}
}}
className="flex-1 min-h-0 overflow-y-auto overscroll-contain"
>
{status === "error" ? (
<Message>Couldn&apos;t load. Pull down to retry.</Message>
) : empty ? (
<Message>
{q.trim()
? "No matches."
: mode === "followers"
? "No followers yet."
: "Not following anyone yet."}
</Message>
) : (
<div
style={{
height: virtualizer.getTotalSize(),
position: "relative",
width: "100%",
}}
>
{virtualizer.getVirtualItems().map((vi) => {
const u = items[vi.index];
if (!u) return null;
return (
<div
key={vi.key}
style={{
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: vi.size,
transform: `translateY(${vi.start}px)`,
}}
>
<Row user={u} onNavigate={onClose} />
</div>
);
})}
</div>
)}
{status === "loading" ? (
<div className="flex justify-center py-4">
<Loader2 className="size-5 animate-spin text-muted-foreground" />
</div>
) : null}
</div>
</DrawerContent>
</Drawer>
);
}
function Row({
user,
onNavigate,
}: {
user: UserSummary;
onNavigate: () => void;
}) {
return (
<Link
href={`/u/${user.handle}`}
onClick={onNavigate}
className="flex h-16 items-center gap-3 px-4 transition-colors hover:bg-muted/50"
>
<RowAvatar src={user.avatar_url} name={user.name} />
<div className="min-w-0 flex-1">
<p className="truncate text-sm font-semibold text-foreground">
{user.name}
</p>
<p className="truncate text-sm text-muted-foreground">@{user.handle}</p>
</div>
</Link>
);
}
function RowAvatar({ src, name }: { src: string | null; name: string }) {
if (src) {
return (
<Image
src={src}
alt={name}
width={40}
height={40}
className="size-10 shrink-0 rounded-full object-cover ring-1 ring-foreground/10"
unoptimized
/>
);
}
const initials =
name
.split(/\s+/)
.map((p) => p[0])
.slice(0, 2)
.join("")
.toUpperCase() || "?";
return (
<div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-primary/15 text-sm font-semibold text-primary ring-1 ring-foreground/10">
{initials}
</div>
);
}
function Message({ children }: { children: React.ReactNode }) {
return (
<p className="px-4 py-10 text-center text-sm text-muted-foreground">
{children}
</p>
);
}
components/profile/profile-header.tsx
+4 -2
View File
@@ -87,7 +87,9 @@ export function ProfileHeader({
// without a refetch. Re-seeds per profile via the call-site key.
const [followers, setFollowers] = useState(followerCount ?? 0);
const [following, setFollowing] = useState(followingCount ?? 0);
const [rel, setRel] = useState<RelationshipState | null>(relationship ?? null);
const [rel, setRel] = useState<RelationshipState | null>(
relationship ?? null,
);
// Which follow list (if any) is open in the drawer.
const [followList, setFollowList] = useState<FollowMode | null>(null);
@@ -110,7 +112,7 @@ export function ProfileHeader({
/>
<div className="space-y-2">
<div className="space-y-1">
<h1 className="font-[family-name:var(--font-title)] font-semibold text-xl sm:text-2xl text-foreground leading-tight">
<h1 className="font-(family-name:--font-title) font-semibold text-xl sm:text-2xl text-foreground leading-tight">
{name}
</h1>
<p className="text-sm text-muted-foreground">@{handle}</p>
components/social/post-actions-footer.tsx
+58 -7
View File
@@ -21,9 +21,10 @@
* see the in-place auth modal before the underlying action runs.
*/
import { useState } from "react";
import { useRef, useState } from "react";
import { Loader2 } from "lucide-react";
import {
HiHeart,
HiOutlineArrowPath,
HiOutlineChatBubbleOvalLeft,
HiOutlineFolderPlus,
@@ -37,6 +38,7 @@ 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 { PostLikesDrawer } from "@/components/social/post-likes-drawer";
import { useSharePost } from "./share-post-provider";
// All icons come from the Heroicons v2 outline family (react-icons
@@ -60,6 +62,12 @@ export function PostActionsFooter({ post }: { post: Post }) {
const [reshared, setReshared] = useState<boolean>(
!!post.viewer_has_reshared,
);
// Like state — seeded from the hydrated post, toggled optimistically and
// reconciled to the server's effective count on success.
const [liked, setLiked] = useState<boolean>(!!post.viewer_has_liked);
const [likeCount, setLikeCount] = useState<number>(post.likes_count ?? 0);
const [likesOpen, setLikesOpen] = useState(false);
const likeBusy = useRef(false);
const isOwner = !!user && user.id === post.user_id;
// Owners and resharers both see Send — the post is "on their account"
@@ -71,6 +79,32 @@ export function PostActionsFooter({ post }: { post: Post }) {
await fn();
}
// Like toggle — optimistic flip + count nudge, reconciled to the server's
// effective total (DB count + pending Redis delta) on success, rolled back
// on error. A ref guard ignores taps while a request is in flight.
async function onLikeToggle() {
if (likeBusy.current) return;
likeBusy.current = true;
const next = !liked;
setLiked(next);
setLikeCount((c) => Math.max(0, c + (next ? 1 : -1)));
try {
const res = next
? await postsApi.like(post.id)
: await postsApi.unlike(post.id);
setLiked(res.liked);
setLikeCount(res.likes_count);
} catch (err) {
setLiked(!next);
setLikeCount((c) => Math.max(0, c + (next ? -1 : 1)));
const msg =
err instanceof SocialError ? err.message : "Could not update like";
toast.error(msg, { duration: 3000 });
} finally {
likeBusy.current = false;
}
}
async function onReshare() {
// Optimistic flip first so the UI feels instant; revert on error.
setReshared(true);
@@ -105,14 +139,26 @@ export function PostActionsFooter({ post }: { post: Post }) {
<div className="flex items-center justify-between px-2">
<div className="flex items-center gap-1">
<ActionButton
label="Like"
onClick={() =>
withAuth(() => {
toast("Likes are coming soon", { duration: 2000 });
})
label={liked ? "Unlike" : "Like"}
onClick={() => withAuth(onLikeToggle)}
icon={
liked ? (
<HiHeart className={cn(ICON_CLASS, "text-red-500")} />
) : (
<HiOutlineHeart className={ICON_CLASS} />
)
}
icon={<HiOutlineHeart className={ICON_CLASS} />}
/>
{likeCount > 0 ? (
<button
type="button"
onClick={() => setLikesOpen(true)}
aria-label={`${likeCount} ${likeCount === 1 ? "like" : "likes"}`}
className="-ml-1 mr-1 rounded px-1 text-sm font-medium tabular-nums text-muted-foreground transition-colors hover:text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring"
>
{likeCount}
</button>
) : null}
<ActionButton
label="Comment"
onClick={() =>
@@ -169,6 +215,11 @@ export function PostActionsFooter({ post }: { post: Post }) {
isMobile={isMobile}
existingPostId={post.id}
/>
<PostLikesDrawer
open={likesOpen}
postId={post.id}
onClose={() => setLikesOpen(false)}
/>
{/* SharePostSheet is mounted globally by SharePostProvider, so
no per-card instance lives here. The provider's
openShareSheet swaps the active post under the hood. */}
components/social/post-likes-drawer.tsx
+29
View File
@@ -0,0 +1,29 @@
"use client";
/**
* PostLikesDrawer — the "liked by" list for a post. A thin wrapper over the
* generic virtualized UserListDrawer, wired to the post-likes endpoint.
*/
import { posts } from "@/lib/social";
import { UserListDrawer } from "@/components/social/user-list-drawer";
export function PostLikesDrawer({
open,
postId,
onClose,
}: {
open: boolean;
postId: string;
onClose: () => void;
}) {
return (
<UserListDrawer
open={open}
onClose={onClose}
title="Likes"
depsKey={`likes:${postId}`}
fetchPage={(params) => posts.likers(postId, params)}
/>
);
}
components/social/user-list-drawer.tsx
+274
View File
@@ -0,0 +1,274 @@
"use client";
/**
* UserListDrawer — a generic, virtualized, paginated, searchable list of
* users in a drawer (right on desktop, bottom sheet on mobile). Powers both
* the followers/following lists and the post "liked by" list.
*
* The caller supplies `fetchPage(params)` returning `{ users, total }` and a
* `depsKey` that changes when the data source changes (so the list reloads).
* Search is debounced and queries the backend across the full set. The list
* loads the next page as you scroll near the bottom.
*
* State-update notes (set-state-in-effect rule): the (re)load runs inside a
* debounce timer callback and pagination runs from the scroll handler — never
* synchronously inside an effect body.
*/
import { useEffect, useRef, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { Loader2, Search } from "lucide-react";
import { useVirtualizer } from "@tanstack/react-virtual";
import {
Drawer,
DrawerContent,
DrawerHeader,
DrawerTitle,
} from "@/components/ui/drawer";
import { useMediaQuery } from "@/components/selection-toolbar/shared";
import type { FollowList, FollowListParams, UserSummary } from "@/lib/social";
import { cn } from "@/lib/utils";
const PAGE = 30;
const ROW = 64; // px — fixed row height for the virtualizer
export type FetchUserPage = (params: FollowListParams) => Promise<FollowList>;
export function UserListDrawer({
open,
onClose,
title,
depsKey,
fetchPage,
}: {
open: boolean;
onClose: () => void;
title: string;
/** Changes when the data source changes (e.g. mode/handle or post id), to
* trigger a fresh reload. */
depsKey: string;
fetchPage: FetchUserPage;
}) {
const isMobile = useMediaQuery("(max-width: 767px)");
const direction = isMobile ? "bottom" : "right";
const [q, setQ] = useState("");
const [items, setItems] = useState<UserSummary[]>([]);
const [total, setTotal] = useState(0);
const [status, setStatus] = useState<"idle" | "loading" | "error">("idle");
// reqRef tags the current query "session"; a newer reload bumps it so any
// in-flight reload/append for an older query is ignored on arrival.
const reqRef = useRef(0);
const busyRef = useRef(false);
const scrollRef = useRef<HTMLDivElement>(null);
// Latest fetchPage, read via ref so its (unstable) identity isn't an effect
// dep — the reload keys on `depsKey` instead.
const fetchRef = useRef(fetchPage);
fetchRef.current = fetchPage;
// (Re)load page 0 when the drawer opens or the source/query changes.
// Debounced so typing in search doesn't spam the backend.
useEffect(() => {
if (!open) return;
const t = window.setTimeout(() => {
const token = ++reqRef.current;
busyRef.current = true;
setItems([]);
setStatus("loading");
fetchRef
.current({ q, limit: PAGE, offset: 0 })
.then((res) => {
if (reqRef.current !== token) return;
setItems(res.users);
setTotal(res.total);
setStatus("idle");
})
.catch(() => {
if (reqRef.current === token) setStatus("error");
})
.finally(() => {
if (reqRef.current === token) busyRef.current = false;
});
}, 250);
return () => window.clearTimeout(t);
}, [open, depsKey, q]);
function loadMore() {
if (busyRef.current || items.length >= total) return;
const token = reqRef.current; // same session — don't bump
const offset = items.length;
busyRef.current = true;
setStatus("loading");
fetchRef
.current({ q, limit: PAGE, offset })
.then((res) => {
if (reqRef.current !== token) return;
setItems((prev) => [...prev, ...res.users]);
setTotal(res.total);
setStatus("idle");
})
.catch(() => {
if (reqRef.current === token) setStatus("error");
})
.finally(() => {
if (reqRef.current === token) busyRef.current = false;
});
}
// TanStack Virtual returns non-memoizable functions; the React Compiler
// simply skips memoizing this component, which is fine here.
// eslint-disable-next-line react-hooks/incompatible-library
const virtualizer = useVirtualizer({
count: items.length,
getScrollElement: () => scrollRef.current,
estimateSize: () => ROW,
overscan: 8,
});
const empty = status !== "loading" && items.length === 0;
return (
<Drawer
open={open}
direction={direction}
onOpenChange={(o) => {
if (!o) onClose();
}}
>
<DrawerContent
direction={direction}
className={cn(
"bg-card flex flex-col",
isMobile ? "h-[85vh]" : "h-full w-[88vw] max-w-sm",
)}
>
<DrawerHeader className="border-b border-border text-left">
<DrawerTitle className="text-base">{title}</DrawerTitle>
<div className="relative mt-2">
<Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
<input
type="search"
value={q}
onChange={(e) => setQ(e.target.value)}
placeholder="Search"
autoComplete="off"
className="w-full rounded-lg border border-border bg-background py-2 pl-9 pr-3 text-sm text-foreground outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring"
/>
</div>
</DrawerHeader>
<div
ref={scrollRef}
onScroll={(e) => {
const el = e.currentTarget;
if (el.scrollHeight - el.scrollTop - el.clientHeight < 240) {
loadMore();
}
}}
className="flex-1 min-h-0 overflow-y-auto overscroll-contain"
>
{status === "error" ? (
<Message>Couldn&apos;t load. Please try again.</Message>
) : empty ? (
<Message>{q.trim() ? "No matches." : "Nothing here yet."}</Message>
) : (
<div
style={{
height: virtualizer.getTotalSize(),
position: "relative",
width: "100%",
}}
>
{virtualizer.getVirtualItems().map((vi) => {
const u = items[vi.index];
if (!u) return null;
return (
<div
key={vi.key}
style={{
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: vi.size,
transform: `translateY(${vi.start}px)`,
}}
>
<Row user={u} onNavigate={onClose} />
</div>
);
})}
</div>
)}
{status === "loading" ? (
<div className="flex justify-center py-4">
<Loader2 className="size-5 animate-spin text-muted-foreground" />
</div>
) : null}
</div>
</DrawerContent>
</Drawer>
);
}
function Row({
user,
onNavigate,
}: {
user: UserSummary;
onNavigate: () => void;
}) {
return (
<Link
href={`/u/${user.handle}`}
onClick={onNavigate}
className="flex h-16 items-center gap-3 px-4 transition-colors hover:bg-muted/50"
>
<RowAvatar src={user.avatar_url} name={user.name} />
<div className="min-w-0 flex-1">
<p className="truncate text-sm font-semibold text-foreground">
{user.name}
</p>
<p className="truncate text-sm text-muted-foreground">@{user.handle}</p>
</div>
</Link>
);
}
function RowAvatar({ src, name }: { src: string | null; name: string }) {
if (src) {
return (
<Image
src={src}
alt={name}
width={40}
height={40}
className="size-10 shrink-0 rounded-full object-cover ring-1 ring-foreground/10"
unoptimized
/>
);
}
const initials =
name
.split(/\s+/)
.map((p) => p[0])
.slice(0, 2)
.join("")
.toUpperCase() || "?";
return (
<div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-primary/15 text-sm font-semibold text-primary ring-1 ring-foreground/10">
{initials}
</div>
);
}
function Message({ children }: { children: React.ReactNode }) {
return (
<p className="px-4 py-10 text-center text-sm text-muted-foreground">
{children}
</p>
);
}
lib/social.ts
+32
View File
@@ -77,6 +77,18 @@ export type Post = {
original_author_name?: string | null;
original_author_handle?: string | null;
original_author_avatar_url?: string | null;
/** Effective like total = denormalized count + pending (un-flushed)
* delta. Always present on hydrated reads (defaults to 0). */
likes_count?: number;
/** Whether the calling viewer has liked this post. Always false / absent
* for anonymous viewers. */
viewer_has_liked?: boolean;
};
/** Result of a like / unlike toggle: the new viewer state + effective total. */
export type LikeResult = {
liked: boolean;
likes_count: number;
};
export type Bookmark = {
@@ -198,6 +210,22 @@ export const posts = {
unreshare(id: string) {
return call<void>(`/posts/${id}/reshare`, { method: "DELETE" });
},
/** Like a post (idempotent). Returns the new viewer state + effective
* total (DB count + pending Redis delta). Auth-required. */
like(id: string) {
return call<LikeResult>(`/posts/${id}/like`, { method: "POST" });
},
/** Unlike a post (idempotent). Same shape as `like`. */
unlike(id: string) {
return call<LikeResult>(`/posts/${id}/like`, { method: "DELETE" });
},
/** One page of users who liked the post (newest first), optional
* name/handle search. `total` is the full matching count. Public. */
likers(id: string, opts: FollowListParams = {}) {
return call<FollowList>(
`/posts/${id}/likes?${followListQuery(opts)}`,
);
},
/** Report a post. category from PostReportCategory; reason optional.
* Auth-required (401 for anonymous callers). Returns nothing (204). */
report(id: string, category: PostReportCategory, reason: string) {
@@ -417,6 +445,10 @@ export type AppNotification = {
actor_name?: string | null;
actor_handle?: string | null;
actor_avatar_url?: string | null;
/** For aggregated `post_like` rows: the liked post + how many likers the
* row represents (renders "X and N-1 others liked your post"). */
post_id?: string | null;
actor_count?: number;
};
export const notifications = {