triggerdotdev--trigger.dev/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx

import { ArrowUpRightIcon } from "@heroicons/react/20/solid";
import { motion } from "framer-motion";
import { Fragment, useState } from "react";
import { BookIcon } from "~/assets/icons/BookIcon";
import { BulbIcon } from "~/assets/icons/BulbIcon";
import { EnvelopeIcon } from "~/assets/icons/EnvelopeIcon";
import { QuestionMarkIcon } from "~/assets/icons/QuestionMarkIcon";
import { RadarPulseIcon } from "~/assets/icons/RadarPulseIcon";
import { StarIcon } from "~/assets/icons/StarIcon";
import { useShortcutKeys } from "~/hooks/useShortcutKeys";
import { sanitizeHttpUrl } from "~/utils/sanitizeUrl";
import { useCurrentPlan } from "~/routes/_app.orgs.$organizationSlug/route";
import { useRecentChangelogs } from "~/routes/resources.platform-changelogs";
import { cn } from "~/utils/cn";
import { Feedback } from "../Feedback";
import { Shortcuts } from "../Shortcuts";
import { Button } from "../primitives/Buttons";
import { Paragraph } from "../primitives/Paragraph";
import { Popover, PopoverContent, PopoverTrigger } from "../primitives/Popover";
import { ShortcutKey } from "../primitives/ShortcutKey";
import { SimpleTooltip } from "../primitives/Tooltip";
import { SideMenuItem } from "./SideMenuItem";

export function HelpAndFeedback({
  disableShortcut = false,
  isCollapsed = false,
  organizationId,
  projectId,
}: {
  disableShortcut?: boolean;
  isCollapsed?: boolean;
  organizationId?: string;
  projectId?: string;
}) {
  const [isHelpMenuOpen, setHelpMenuOpen] = useState(false);
  const _currentPlan = useCurrentPlan();
  const { changelogs } = useRecentChangelogs(organizationId, projectId);

  useShortcutKeys({
    shortcut: disableShortcut ? undefined : { key: "h", enabledOnInputElements: false },
    action: (e) => {
      e.preventDefault();
      e.stopPropagation();
      setHelpMenuOpen(true);
    },
  });

  return (
    <motion.div
      layout="position"
      transition={{ duration: 0.2, ease: "easeInOut" }}
      className={isCollapsed ? undefined : "flex-1"}
    >
      <Popover open={isHelpMenuOpen} onOpenChange={setHelpMenuOpen}>
        <SimpleTooltip
          button={
            <PopoverTrigger
              className={cn(
                "group flex h-8 items-center gap-1.5 rounded pl-1.75 pr-2 transition-colors hover:bg-background-hover focus-custom",
                isCollapsed ? "w-full" : "w-full justify-between"
              )}
            >
              <span className="flex items-center gap-1.5 overflow-hidden">
                <QuestionMarkIcon className="size-5 min-w-5 shrink-0 text-success" />
                <span
                  className={cn(
                    "overflow-hidden whitespace-nowrap text-2sm text-text-bright transition-all duration-150",
                    isCollapsed ? "max-w-0 opacity-0" : "max-w-[150px] opacity-100"
                  )}
                >
                  Help & Feedback
                </span>
              </span>
              <ShortcutKey
                className={cn(
                  "size-4 flex-none transition-all duration-150",
                  isCollapsed ? "hidden" : ""
                )}
                shortcut={{ key: "h" }}
                variant="medium/bright"
              />
            </PopoverTrigger>
          }
          content={
            <span className="flex items-center gap-1">
              Help & Feedback
              <ShortcutKey shortcut={{ key: "h" }} variant="medium/bright" />
            </span>
          }
          side="right"
          sideOffset={8}
          hidden={!isCollapsed}
          buttonClassName="h-8! w-full"
          asChild
          disableHoverableContent
        />
        <PopoverContent
          className="min-w-56 divide-y divide-grid-bright overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
          side={isCollapsed ? "right" : "top"}
          sideOffset={isCollapsed ? 8 : 4}
          align="start"
        >
          <Fragment>
            <div className="flex flex-col gap-1 p-1">
              <SideMenuItem
                name="Documentation"
                icon={BookIcon}
                trailingIcon={ArrowUpRightIcon}
                trailingIconClassName="text-text-dimmed"
                to="https://trigger.dev/docs"
                data-action="documentation"
                target="_blank"
              />
            </div>
            <div className="flex flex-col gap-1 p-1">
              <SideMenuItem
                name="Status"
                icon={RadarPulseIcon}
                trailingIcon={ArrowUpRightIcon}
                trailingIconClassName="text-text-dimmed"
                to="https://status.trigger.dev/"
                data-action="status"
                target="_blank"
              />
              <SideMenuItem
                name="Suggest a feature"
                icon={BulbIcon}
                trailingIcon={ArrowUpRightIcon}
                trailingIconClassName="text-text-dimmed"
                to="https://feedback.trigger.dev/"
                data-action="suggest-a-feature"
                target="_blank"
              />
              <Shortcuts />
              <Feedback
                button={
                  <Button
                    variant="small-menu-item"
                    className="pl-2"
                    LeadingIcon={EnvelopeIcon}
                    leadingIconClassName="pr-1 text-text-dimmed group-hover/button:text-text-bright"
                    data-action="contact-us"
                    fullWidth
                    textAlignLeft
                  >
                    Contact us…
                  </Button>
                }
              />
            </div>
            <div className="flex flex-col gap-1 p-1">
              <Paragraph className="pb-1 pl-1.5 pt-1.5 text-xs">What's new</Paragraph>
              {changelogs.map((entry) => (
                <SideMenuItem
                  key={entry.id}
                  name={entry.title}
                  icon={GrayDotIcon}
                  trailingIcon={ArrowUpRightIcon}
                  trailingIconClassName="text-text-dimmed"
                  inactiveIconColor="text-text-dimmed"
                  activeIconColor="text-text-dimmed"
                  to={sanitizeHttpUrl(entry.actionUrl) ?? "https://trigger.dev/changelog"}
                  target="_blank"
                />
              ))}
              <SideMenuItem
                name="Full changelog"
                icon={StarIcon}
                trailingIcon={ArrowUpRightIcon}
                trailingIconClassName="text-text-dimmed"
                inactiveIconColor="text-text-dimmed"
                activeIconColor="text-text-dimmed"
                to="https://trigger.dev/changelog"
                data-action="full-changelog"
                target="_blank"
              />
            </div>
          </Fragment>
        </PopoverContent>
      </Popover>
    </motion.div>
  );
}

function GrayDotIcon({ className }: { className?: string }) {
  return (
    <span className={cn("flex items-center justify-center", className)}>
      <span className="block h-1.5 w-1.5 rounded-full bg-text-dimmed" />
    </span>
  );
}