Added title and button to toasts. Use it for new project error

Author: matt-aitken

apps/webapp/app/components/Feedback.tsx

@@ -2,7 +2,7 @@ import { conform, useForm } from "@conform-to/react";
 import { parse } from "@conform-to/zod";
 import { InformationCircleIcon, ArrowUpCircleIcon } from "@heroicons/react/20/solid";
 import { EnvelopeIcon } from "@heroicons/react/24/solid";
-import { Form, useActionData, useLocation, useNavigation } from "@remix-run/react";
+import { Form, useActionData, useLocation, useNavigation, useSearchParams } from "@remix-run/react";
 import { type ReactNode, useEffect, useState } from "react";
 import { type FeedbackType, feedbackTypeLabel, schema } from "~/routes/resources.feedback";
 import { Button } from "./primitives/Buttons";
@@ -23,10 +23,12 @@ import { DialogClose } from "@radix-ui/react-dialog";
 type FeedbackProps = {
   button: ReactNode;
   defaultValue?: FeedbackType;
+  onOpenChange?: (open: boolean) => void;
 };
 
-export function Feedback({ button, defaultValue = "bug" }: FeedbackProps) {
+export function Feedback({ button, defaultValue = "bug", onOpenChange }: FeedbackProps) {
   const [open, setOpen] = useState(false);
+  const [searchParams, setSearchParams] = useSearchParams();
   const location = useLocation();
   const lastSubmission = useActionData();
   const navigation = useNavigation();
@@ -52,8 +54,26 @@ export function Feedback({ button, defaultValue = "bug" }: FeedbackProps) {
     }
   }, [navigation, form]);
 
+  // Handle URL param functionality
+  useEffect(() => {
+    const open = searchParams.get("feedbackPanel");
+    if (open) {
+      setType(open as FeedbackType);
+      setOpen(true);
+      // Clone instead of mutating in place
+      const next = new URLSearchParams(searchParams);
+      next.delete("feedbackPanel");
+      setSearchParams(next);
+    }
+  }, [searchParams]);
+
+  const handleOpenChange = (value: boolean) => {
+    setOpen(value);
+    onOpenChange?.(value);
+  };
+
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
+    <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>{button}</DialogTrigger>
       <DialogContent>
         <DialogHeader>Contact us</DialogHeader>

apps/webapp/app/components/primitives/Toast.tsx

@@ -1,17 +1,15 @@
 import { EnvelopeIcon, ExclamationCircleIcon, XMarkIcon } from "@heroicons/react/20/solid";
 import { CheckCircleIcon } from "@heroicons/react/24/solid";
-import { Toaster, toast } from "sonner";
+import { useSearchParams } from "@remix-run/react";
+import { useEffect } from "react";
 import { useTypedLoaderData } from "remix-typedjson";
+import { Toaster, toast } from "sonner";
+import { type ToastMessageAction } from "~/models/message.server";
 import { type loader } from "~/root";
-import { useEffect } from "react";
-import { Paragraph } from "./Paragraph";
 import { cn } from "~/utils/cn";
-import { type ToastMessageAction } from "~/models/message.server";
-import { Header2, Header3 } from "./Headers";
 import { Button, LinkButton } from "./Buttons";
-import { Feedback } from "../Feedback";
-import assertNever from "assert-never";
-import { assertExhaustive } from "@trigger.dev/core";
+import { Header2 } from "./Headers";
+import { Paragraph } from "./Paragraph";
 
 const defaultToastDuration = 5000;
 const permanentToastDuration = 60 * 60 * 24 * 1000;
@@ -78,14 +76,14 @@ export function ToastUI({
           <ExclamationCircleIcon className="mt-1 size-4 min-w-4 text-error" />
         )}
         <div className="flex flex-col">
-          {title && <Header2 className="pt-1">{title}</Header2>}
-          <Paragraph variant="small/dimmed" className="py-1">
+          {title && <Header2 className="pt-0">{title}</Header2>}
+          <Paragraph variant="small/dimmed" className="pb-1 pt-0.5">
             {message}
           </Paragraph>
-          <Action action={action} toastId={t} />
+          <Action action={action} toastId={t} className="my-2" />
         </div>
         <button
-          className="hover:bg-midnight-800 ms-auto rounded p-2 text-text-dimmed transition hover:text-text-bright"
+          className="hover:bg-midnight-800 -mr-1 -mt-1 ms-auto rounded p-2 text-text-dimmed transition hover:text-text-bright"
           onClick={() => toast.dismiss(t)}
         >
           <XMarkIcon className="size-4" />
@@ -95,37 +93,48 @@ export function ToastUI({
   );
 }
 
-function Action({ action, toastId }: { action?: ToastMessageAction; toastId: string }) {
+function Action({
+  action,
+  toastId,
+  className,
+}: {
+  action?: ToastMessageAction;
+  toastId: string;
+  className?: string;
+}) {
+  const [_, setSearchParams] = useSearchParams();
+
   if (!action) return null;
 
   switch (action.action.type) {
     case "link": {
       return (
-        <LinkButton variant={action.variant ?? "secondary/small"} to={action.action.path}>
+        <LinkButton
+          className={className}
+          variant={action.variant ?? "secondary/small"}
+          to={action.action.path}
+        >
           {action.label}
         </LinkButton>
       );
     }
     case "help": {
+      const feedbackType = action.action.feedbackType;
       return (
-        <Feedback
-          button={
-            <Button
-              variant={action.variant ?? "secondary/small"}
-              LeadingIcon={EnvelopeIcon}
-              onClick={(e) => {
-                e.preventDefault();
-                toast.dismiss(toastId);
-              }}
-            >
-              {action.label}
-            </Button>
-          }
-        />
+        <Button
+          className={className}
+          variant={action.variant ?? "secondary/small"}
+          LeadingIcon={EnvelopeIcon}
+          onClick={() => {
+            setSearchParams({
+              feedbackPanel: feedbackType,
+            });
+            toast.dismiss(toastId);
+          }}
+        >
+          {action.label}
+        </Button>
       );
     }
-    default: {
-      return null;
-    }
   }
 }

apps/webapp/app/models/project.server.ts

@@ -63,7 +63,7 @@ export async function createProject(
 
   if (projectCount >= organization.maximumProjectCount) {
     throw new ExceededProjectLimitError(
-      `Organization ${organization.slug} has reached the maximum number of projects (${organization.maximumProjectCount}). You can request more by contacting help in the bottom-left.`
+      `This organization has reached the maximum number of projects (${organization.maximumProjectCount}).`
     );
   }
 

apps/webapp/app/routes/_app.orgs.$organizationSlug_.projects.new/route.tsx

@@ -8,6 +8,7 @@ import { redirect, typedjson, useTypedLoaderData } from "remix-typedjson";
 import invariant from "tiny-invariant";
 import { z } from "zod";
 import { BackgroundWrapper } from "~/components/BackgroundWrapper";
+import { Feedback } from "~/components/Feedback";
 import { AppContainer, MainCenteredContainer } from "~/components/layout/AppLayout";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { Callout } from "~/components/primitives/Callout";
@@ -213,6 +214,7 @@ export default function Page() {
               </Fieldset>
             </Form>
           </div>
+          <Feedback button={<></>} />
         </MainCenteredContainer>
       </BackgroundWrapper>
     </AppContainer>