update toaster LO; add forms where in necessary

src/components/interaction-panel/chat.tsx

@@ -3,7 +3,12 @@ import { useRef, useState } from "react";
 import Arrow from "@/icons/arrow.svg?react";
 import Paperclip from "@/icons/paperclip.svg?react";
 import Clock from "@/icons/clock.svg?react";
+
 import { cn } from "@/lib/utils";
+import { useNavigate } from "@tanstack/react-router";
+import { useAccountStore } from "@/contexts/AccountContext";
+import { Button } from "../ui/button";
+import { useToast } from "@/lib/hooks/use-toast";
 
 const Chat = observer(() => {
 	return (
@@ -14,6 +19,10 @@ const Chat = observer(() => {
 });
 
 const WelcomePanel = () => {
+	const navigate = useNavigate();
+	const { userId } = useAccountStore();
+	const { toast } = useToast();
+
 	return (
 		<div className="max-w-[741px] flex flex-col gap-8">
 			<div className="flex flex-col gap-2 font-medium">
@@ -42,6 +51,14 @@ const WelcomePanel = () => {
 						<button
 							type="button"
 							key={emoji}
+							onClick={() => {
+								if (userId === undefined) {
+									navigate({
+										to: "/auth/mail",
+										viewTransition: { types: ["warp"] },
+									});
+								}
+							}}
 							className="text-left cursor-pointer hover:bg-fill-100 transition-all w-[173px] h-[123px] p-4 rounded-[16px] border border-[#E8E8E8] flex flex-col justify-between"
 						>
 							<p className="text-[14px] font-medium leading-[120%]">{text}</p>
@@ -57,6 +74,9 @@ const WelcomePanel = () => {
 };
 
 const ChatInput = () => {
+	const navigate = useNavigate();
+	const { userId } = useAccountStore();
+
 	const [message, setMessage] = useState("");
 	const [showShadow, setShowShadow] = useState(false);
 	const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -116,14 +136,20 @@ const ChatInput = () => {
 				</div>
 
 				<div className="flex items-center gap-4">
-					<button
-						type="button"
+					<Button
+						className="w-10 h-10 rotate-180"
 						disabled={message.trim() === ""}
-						className="w-10 h-10 rounded-[8px] flex items-center justify-center rotate-180 disabled:opacity-50 disabled:cursor-not-allowed"
-						style={{ backgroundColor: "#E8E8E8" }}
+						onClick={() => {
+							if (userId === undefined) {
+								navigate({
+									to: "/auth/mail",
+									viewTransition: { types: ["warp"] },
+								});
+							}
+						}}
 					>
 						<Arrow color="white" />
-					</button>
+					</Button>
 				</div>
 			</div>
 		</div>

src/components/ui/button.tsx

@@ -9,7 +9,7 @@ const buttonVariants = cva(
 		variants: {
 			variant: {
 				primary:
-					"bg-fill-800 text-white hover:bg-fill-700 disabled:bg-fill-400",
+					"bg-fill-800 text-white hover:bg-fill-700 disabled:bg-fill-200",
 				secondary:
 					"bg-fill-100 text-text-light-900 hover:bg-fill-150 disabled:bg-fill-100 disabled:text-text-light-200",
 				tertiary:

src/components/ui/text-link.tsx

@@ -17,7 +17,7 @@ export const TextLink: FC<TextLinkProps> = ({
 		<a
 			data-disabled={disabled}
 			className={cn(
-				"text-feedback-info-900 data-[disabled=true]:opacity-50 font-[600] data-[disabled=false]:cursor-pointer data-[disabled=false]:hover:border-b-[2px] w-fit transition-all duration-75",
+				"text-feedback-info-900 data-[disabled=true]:opacity-50 font-[500] data-[disabled=false]:cursor-pointer data-[disabled=false]:hover:border-b-[2px] w-fit transition-all duration-75",
 				className,
 			)}
 			{...props}

src/components/ui/toaster.tsx

@@ -13,6 +13,10 @@ import { cn } from "@/lib/utils";
 import clsx from "clsx";
 import { useToast } from "@/lib/hooks/use-toast";
 
+import Discord from "@/icons/discord.svg?react";
+import Copy from "@/icons/copy.svg?react";
+import { TextLink } from "./text-link";
+
 const ToastProvider = ToastPrimitives.Provider;
 
 const ToastViewport = React.forwardRef<
@@ -35,10 +39,10 @@ const toastVariants = cva(
 	{
 		variants: {
 			variant: {
-				success: "bg-feedback-positive-100",
-				warning: "bg-feedback-attention-100",
-				error: "bg-feedback-negative-100",
-				info: "bg-feedback-info-100",
+				success: "bg-fill-100",
+				warning: "bg-fill-100",
+				error: "bg-fill-100",
+				info: "bg-fill-100",
 			},
 		},
 		defaultVariants: {
@@ -51,7 +55,7 @@ const ToastIcon = React.forwardRef<
 	React.ElementRef<typeof ToastPrimitives.Root>,
 	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
 		VariantProps<typeof toastVariants>
->(({ className, variant }) => {
+>(({ className, variant = "success" }) => {
 	if (variant === "success") {
 		return (
 			<SuccessIcon className={clsx(className, "text-feedback-positive-900")} />
@@ -213,7 +217,7 @@ type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
 
 type ToastActionElement = React.ReactElement<typeof ToastAction>;
 
-export function Toaster() {
+function Toaster() {
 	const { toasts, isPaused, setIsPaused } = useToast();
 
 	React.useEffect(() => {
@@ -258,28 +262,12 @@ export function Toaster() {
 					>
 						<ToastIcon className="size-12 mr-4" variant={props.variant} />
 						<div className="grid gap-2 w-full">
-							{title && <ToastTitle>{title}</ToastTitle>}
+							<div className="flex items-center w-full justify-between">
+								{title && <ToastTitle>{title}</ToastTitle>} <ToastClose />
+							</div>
 
 							{description && (
-								<ToastDescription>
-									{/* {props.variant === "errorWithCopy" && (
-										<p className="text-[16px] mb-2">
-											To solve problems, contact us <br />
-											via{" "}
-											<a
-												href={"https://discord.gg/cytonic"}
-												target="_blank"
-												rel="noreferrer"
-												className="text-brand relative"
-											>
-												Discord
-												<div className="h-[1px] w-[56px] bg-brand absolute left-0" />
-											</a>{" "}
-											and send the error text
-										</p>
-									)} */}
-									{description}
-								</ToastDescription>
+								<ToastDescription>{description}</ToastDescription>
 							)}
 
 							{copy && (
@@ -287,7 +275,6 @@ export function Toaster() {
 							)}
 						</div>
 						{action}
-						<ToastClose />
 
 						{withTimeline && (
 							<ToastTimeline
@@ -304,6 +291,35 @@ export function Toaster() {
 	);
 }
 
+const TOASTER_DESCRIPTION_PATTERNS = {
+	errorPattern: (
+		<div>
+			<span>
+				<p>Please try again later</p>
+				<p className="mt-2">
+					If the problem persists, copy the error message below and contact our
+					support team
+				</p>
+			</span>
+
+			<div className="space-x-4 flex">
+				<TextLink className="flex items-center gap-1">
+					<Copy className="text-feedback-info-900" width={15} height={12} />[
+					Error code ]
+				</TextLink>
+
+				<TextLink
+					className="flex items-center gap-1"
+					href="https://discord.gg/cytonic"
+				>
+					<Discord className="text-feedback-info-900" width={15} height={12} />[
+					Support ]
+				</TextLink>
+			</div>
+		</div>
+	),
+};
+
 export {
 	type ToastProps,
 	type ToastActionElement,
@@ -317,4 +333,6 @@ export {
 	ToastIcon,
 	ToastCopy,
 	ToastTimeline,
+	Toaster,
+	TOASTER_DESCRIPTION_PATTERNS,
 };