Function LeftPanel

web/components/LeftPanel.tsx:26–138

({
  children,
  initialCollapsed,
  initialWidth,
}: {
  children: ReactNode;
  initialCollapsed: boolean | null;
  initialWidth: number | null;
})

 * 显式存在则尊重用户选择，cookie 不存在才按视口宽度自动决定。
 */
export function LeftPanel({
  children,
  initialCollapsed,
  initialWidth,
}: {
  children: ReactNode;
  initialCollapsed: boolean | null;
  initialWidth: number | null;
}) {
  const t = useT();
  const [collapsed, setCollapsed] = useState<boolean>(initialCollapsed ?? false);
  const userExplicitRef = useRef<boolean>(initialCollapsed !== null);
  const { width, dragging, handleProps } = usePanelResize({
    side: "left",
    config: LEFT_PANEL,
    initialWidth,
  });

  useEffect(() => {
    if (userExplicitRef.current) return;
    if (typeof window === "undefined") return;
    if (window.matchMedia(AUTO_COLLAPSE_QUERY).matches) {
      setCollapsed(true);
    }
  }, []);

  const toggle = () => {
    userExplicitRef.current = true;
    setCollapsed((prev) => {
      const next = !prev;
      try {
        document.cookie = `${COOKIE}=${
          next ? "1" : "0"
        }; path=/; max-age=${60 * 60 * 24 * 365}; SameSite=Lax`;
      } catch {
        // ignore
      }
      return next;
    });
  };

  const baseButtonClass = cn(
    "inline-flex h-6 w-6 items-center justify-center",
    "rounded-full border border-border bg-background text-muted-foreground shadow-sm",
    "hover:text-foreground hover:border-foreground/40 hover:scale-110",
    "transition-[transform,color,border-color] duration-150",
  );

  if (collapsed) {
    return (
      <button
        type="button"
        onClick={toggle}
        aria-label={t("panel.expand")}
        title={t("panel.expand")}
        className={cn(
          baseButtonClass,
          "fixed left-3 top-1/2 z-30 -translate-y-1/2 bg-background/90 backdrop-blur-sm",