gitfor/platform

import { Link, useNavigate } from "@tanstack/react-router";
import { useState } from "react";
import { signOut } from "~/fns/auth";
import { useAction } from "~/hooks/use-action";
import { useUnreadNotifications, useViewer } from "~/hooks/use-viewer";
import { Avatar } from "./ui/Primitives";
import { buttonClass } from "./ui/Button";
import { inputClass } from "./ui/Field";
import { cn } from "~/utils/cn";
import { useDismiss } from "~/hooks/use-dismiss";

const NAV = [
  { to: "/explore", label: "Explore" },
  { to: "/search", label: "Search" },
] as const;

function UserMenu({ name }: { name: string }) {
  const navigate = useNavigate();
  const [open, setOpen] = useState(false);
  const menuRef = useDismiss<HTMLDivElement>(open, () => setOpen(false));
  const logout = useAction(signOut);
  const items = [
    { to: "/$owner", params: { owner: name }, label: "Your profile" },
    { to: "/settings", params: {}, label: "Settings" },
    { to: "/settings/tokens", params: {}, label: "Access tokens" },
    { to: "/orgs/new", params: {}, label: "New organization" },
  ] as const;

  async function handleSignOut() {
    await logout.run({});
    await navigate({ to: "/" });
  }

  return (
    <div ref={menuRef} className="relative">
      <button
        type="button"
        aria-haspopup="menu"
        aria-expanded={open}
        onClick={() => setOpen((value) => !value)}