refactor(admin): organize user actions and improve content editing UX

src/app/admin/users/_components/user-hero.tsx

@@ -1,3 +1,4 @@
+"use client";
 import {
 	ArrowLeftRight,
 	DoorOpen,
@@ -8,6 +9,7 @@ import {
 	Wifi,
 	WifiOff,
 } from "lucide-react";
+import { useSearchParams } from "next/navigation";
 import { AdminBreadcrumb } from "@/components/admin/admin-breadcrumb";
 import { UserWatchToggle } from "@/components/admin/user-watch-toggle";
 import Link from "@/components/link";
@@ -15,6 +17,7 @@ import { CurrencyIcon } from "@/components/shared/currency-icon";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { getAvatarUrl } from "@/lib/imager";
+import { userDetailHref, userListHref } from "../user-list-navigation";
 
 interface UserHeroProps {
 	user: {
@@ -55,11 +58,14 @@ export function UserHero({
 	canEdit,
 	watching,
 }: UserHeroProps) {
+	const params = useSearchParams();
+	const list = params.get("list") ?? "";
+	const listHref = userListHref(list);
 	return (
 		<>
 			<AdminBreadcrumb
 				items={[
-					{ label: "Users", href: "/admin/users" },
+					{ label: "Users", href: listHref },
 					{ label: user.username },
 					{ label: mode === "edit" ? "Edit" : "View" },
 				]}
@@ -99,14 +105,14 @@ export function UserHero({
 							{/* Mode switch buttons */}
 							{mode === "show" && canEdit && (
 								<Button variant="outline" size="sm" asChild className="ml-2">
-									<Link href={`/admin/users/edit/${user.id}`}>
+									<Link href={userDetailHref(user.id, "edit", list)}>
 										<Pencil className="mr-1.5 h-3.5 w-3.5" /> Edit
 									</Link>
 								</Button>
 							)}
 							{mode === "edit" && (
 								<Button variant="outline" size="sm" asChild className="ml-2">
-									<Link href={`/admin/users/show/${user.id}`}>
+									<Link href={userDetailHref(user.id, "show", list)}>
 										<Eye className="mr-1.5 h-3.5 w-3.5" /> View
 									</Link>
 								</Button>