jiang13-bbs/frontend/components/MobilePostBar.tsx

"use client";

import { useEffect, useState } from "react";
import { ArrowUp, MessageSquare } from "lucide-react";
import LikeButton from "./LikeButton";
import { scrollBehavior } from "@/lib/motion";

/**
 * 帖子详情移动端浮动操作条（lg 以下显示）：
 * 长文读到中途也能点赞 / 跳评论框 / 回顶部，不必滚到文末。
 */
export default function MobilePostBar({
  postId,
  liked,
  likeCount,
  allowComments = true,
}: {
  postId: string;
  liked: boolean;
  likeCount: number;
  allowComments?: boolean;
}) {
  const [showTop, setShowTop] = useState(false);

  useEffect(() => {
    const onScroll = () => setShowTop(window.scrollY > 400);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const scrollToComments = () => {
    document.getElementById("comment-input")?.scrollIntoView({
      behavior: scrollBehavior(),
      block: "center",
    });
  };

  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: scrollBehavior(),
    });
  };

  return (
    <div className="lg:hidden fixed bottom-4 left-1/2 -translate-x-1/2 z-40" role="navigation" aria-label="阅读操作">
      <div
        className="flex items-center gap-0.5 rounded-full border px-1.5 py-1.5"
        style={{
          background: "color-mix(in srgb, var(--panel) 90%, transparent)",
          borderColor: "var(--line-2)",
          boxShadow: "var(--shadow-lg)",
          backdropFilter: "blur(14px)",
          WebkitBackdropFilter: "blur(14px)",
        }}
      >
        {allowComments ? (
          <button
            type="button"
            onClick={scrollToComments}
            className="w-11 h-11 flex items-center justify-center rounded-full transition-colors hover:bg-[var(--accent-soft)] focus-visible:bg-[var(--accent-soft)]"
            style={{ color: "var(--ink-2)" }}
            aria-label="跳到评论框"
          >
            <MessageSquare size={18} />
          </button>
        ) : null}
        {/* 放大点赞按钮的触控区域（样式见 globals.css .j13-bar-like） */}
        <div className="j13-bar-like">
          <LikeButton postId={postId} liked={liked} likeCount={likeCount} variant="compact" />
        </div>
        {showTop && (
          <button
            type="button"
            onClick={scrollToTop}
            className="w-11 h-11 flex items-center justify-center rounded-full transition-colors hover:bg-[var(--accent-soft)] focus-visible:bg-[var(--accent-soft)] j13-toast-in"
            style={{ color: "var(--ink-2)" }}
            aria-label="回到顶部"
          >
            <ArrowUp size={18} />
          </button>
        )}
      </div>
    </div>
  );
}