dhkatzandClaude Opus 5.5
8af4b7b6a9
Cases are one queue for what someone has to decide, each with a thread (internal notes for those deciding), an assignee and a decision. Reports about a product go to the teams of the catalogs hosting it and to moderators, and only the reporter and moderators know who reported. A creator lowering a rating opens a rating review; a catalog's owner asking to delete it opens a deletion request; a catalog's team can ask for a product's removal everywhere; the person an action affected can appeal it once, decided by another moderator (an admin may decide their own, flagged). Resolving carries the case out: the rating is lowered, the product removed, the catalog deleted. Notifications reach people on the website (a bell with the unread count) and their proxies (realtime): moderators' edits to their products, removals and restores, decisions and replies on their cases, membership decisions. Also: moderators can restore a removed product, and a product's creator and moderators can see it when it's adult without an adult account (getting and wearing it still need one). Co-Authored-By: Claude Opus 5.5 <[email protected]>
62 lines
2.4 KiB
TypeScript
62 lines
2.4 KiB
TypeScript
import Image from "next/image";
|
|
import { Bell } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { getMe } from "@/lib/api";
|
|
import { buttonVariants } from "@/components/ui/button";
|
|
import { NavLink, ProfileMenu } from "./header-client";
|
|
import logo from "./t5de.png";
|
|
|
|
export function Logo({ className }: { className?: string }) {
|
|
return <Image src={logo} alt="T5DE" priority className={className ?? "size-9"} />;
|
|
}
|
|
|
|
export async function Header() {
|
|
const me = await getMe();
|
|
return (
|
|
<header className="border-b">
|
|
<div className="mx-auto flex max-w-5xl flex-wrap items-center gap-x-6 gap-y-2 px-4 py-3 sm:px-6">
|
|
<Link href="/" aria-label="T5DE Hub home" className="shrink-0">
|
|
<Logo />
|
|
</Link>
|
|
<nav className="order-last flex w-full flex-wrap items-center gap-1 text-sm sm:order-none sm:w-auto">
|
|
<NavLink href="/online">Online</NavLink>
|
|
<NavLink href="/rooms">Rooms</NavLink>
|
|
<NavLink href="/products">Products</NavLink>
|
|
<NavLink href="/catalogs">Catalogs</NavLink>
|
|
</nav>
|
|
<div className="ml-auto flex items-center gap-2 text-sm">
|
|
<a href="https://t5de.dev/download" className={buttonVariants({ variant: "ghost" })}>
|
|
Download
|
|
</a>
|
|
{me ? (
|
|
<>
|
|
<Link
|
|
href="/notifications"
|
|
aria-label={me.unread ? `Notifications, ${me.unread} unread` : "Notifications"}
|
|
className={buttonVariants({ variant: "ghost", size: "icon", className: "relative" })}
|
|
>
|
|
<Bell className="size-4" />
|
|
{me.unread > 0 && (
|
|
<span className="absolute -top-0.5 -right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-foreground px-1 text-[10px] font-semibold text-background tabular-nums">
|
|
{me.unread > 99 ? "99+" : me.unread}
|
|
</span>
|
|
)}
|
|
</Link>
|
|
<ProfileMenu username={me.username} picture={me.picture} console={me.console} />
|
|
</>
|
|
) : (
|
|
<>
|
|
<Link href="/signin" className={buttonVariants({ variant: "ghost" })}>
|
|
Sign in
|
|
</Link>
|
|
<Link href="/signup" className={buttonVariants()}>
|
|
Create account
|
|
</Link>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|