gerbeur/src/components/layout/UserMenu.tsx

/**
 * Renders the avatar menu that leads the header's icon row at every width: it
 * holds the profile link, the playlists one (on small screens, the only one),
 * the community page, the settings, the site's tools, and logging out.
 *
 * @module
 */

import { useEffect, useRef, useState } from "react";
import { Link } from "react-router";
import { t } from "@lingui/core/macro";
import { Trans } from "@lingui/react/macro";
import { useLingui } from "@lingui/react";
import { DIGEST_MESSAGES } from "../../../shared/digest-messages.ts";
import { Avatar } from "../shared/Avatar.tsx";
import type { SelfUser } from "../../../shared/user.ts";
import { can } from "../../utils/auth/permissions.ts";
import {
  communityPath,
  playlistsPath,
  userPath,
} from "../../../shared/paths.ts";
import { useAuth } from "../../hooks/auth/useAuth.ts";

/** Passed to {@link UserMenu} by `AppHeader`, for a signed-in user. */
export interface UserMenuProps {
  user: SelfUser;
}

/**
 * Renders the signed-in user's avatar, which opens a menu with links to their
 * profile, their playlists, `/community` and `/settings`, to `/manage` for
 * those who hold `category:manage` or `federation:manage`, and a Log out
 * button. A click outside or Escape closes it.
 */
export function UserMenu({ user }: UserMenuProps): React.JSX.Element {
  const { i18n } = useLingui();
  const { logout } = useAuth();
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!open) return;
    function onMouseDown(e: MouseEvent) {
      if (ref.current && !ref.current.contains(e.target as Node)) {
        setOpen(false);
      }
    }
    function onKeyDown(e: KeyboardEvent) {
      if (e.key === "Escape") setOpen(false);
    }
    document.addEventListener("mousedown", onMouseDown);
    document.addEventListener("keydown", onKeyDown);
    return () => {
      document.removeEventListener("mousedown", onMouseDown);
      document.removeEventListener("keydown", onKeyDown);
    };
  }, [open]);

  return (
    <div className="user-menu" ref={ref}>
      <button
        type="button"
        className="user-menu-trigger"
        onClick={() => setOpen((o) => !o)}
        aria-expanded={open}
        aria-label={t`User menu`}
      >
        <Avatar
          userId={user.id}
          username={user.username}
          hasAvatar={!!user.avatarMime}
          size={32}
        />
      </button>
      {open && (
        <div className="user-menu-dropdown" role="menu">
          <Link
            to={userPath(user.username)}
            className="user-menu-item"
            role="menuitem"
            onClick={() => setOpen(false)}
          >
            @{user.username}
          </Link>
          <Link
            to={userPath(user.username, "playlists")}
            className="user-menu-item"
            role="menuitem"
            onClick={() => setOpen(false)}
          >
            <Trans>Playlists</Trans>
          </Link>
          <Link
            to={communityPath()}
            className="user-menu-item"
            role="menuitem"
            onClick={() => setOpen(false)}
          >
            {i18n._(DIGEST_MESSAGES.community)}
          </Link>
          <Link
            to={playlistsPath()}
            className="user-menu-item"
            role="menuitem"
            onClick={() => setOpen(false)}
          >
            <Trans>All playlists</Trans>
          </Link>
          <Link
            to="/settings"
            className="user-menu-item"
            role="menuitem"
            onClick={() => setOpen(false)}
          >
            <Trans>Settings</Trans>
          </Link>
          {(can(user, "category:manage") ||
            can(user, "federation:manage")) && (
            <Link
              to="/manage"
              className="user-menu-item"
              role="menuitem"
              onClick={() => setOpen(false)}
            >
              <Trans>Manage</Trans>
            </Link>
          )}
          <div className="user-menu-separator" role="separator" />
          <button
            type="button"
            className="user-menu-item user-menu-item--logout"
            role="menuitem"
            onClick={() => {
              setOpen(false);
              logout();
            }}
          >
            <Trans>Log out</Trans>
          </button>
        </div>
      )}
    </div>
  );
}