From 39b3a837dfbc8e185c1feb6f691b1575f8a52896 Mon Sep 17 00:00:00 2001 From: yzned Date: Sun, 20 Jul 2025 12:38:04 +0300 Subject: [PATCH] update toaster LO; add forms where in necessary --- src/components/interaction-panel/chat.tsx | 36 ++++++++-- src/components/ui/button.tsx | 2 +- src/components/ui/text-link.tsx | 2 +- src/components/ui/toaster.tsx | 72 ++++++++++++------- src/icons/discord.svg | 3 + src/routeTree.gen.ts | 34 ++++----- src/routes/auth/code.tsx | 30 +++++--- src/routes/auth/mail.tsx | 22 +++--- src/routes/auth/username.tsx | 26 ++++--- .../$magic-link.tsx} | 12 ++-- 10 files changed, 151 insertions(+), 88 deletions(-) create mode 100644 src/icons/discord.svg rename src/routes/{mail-code/$mail-code.tsx => magic-link/$magic-link.tsx} (94%) diff --git a/src/components/interaction-panel/chat.tsx b/src/components/interaction-panel/chat.tsx index b386a04..28fe54c 100644 --- a/src/components/interaction-panel/chat.tsx +++ b/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 (
@@ -42,6 +51,14 @@ const WelcomePanel = () => {
- +
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx index 7b5d44f..4aeeaf0 100644 --- a/src/components/ui/button.tsx +++ b/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: diff --git a/src/components/ui/text-link.tsx b/src/components/ui/text-link.tsx index b947c5c..d63f516 100644 --- a/src/components/ui/text-link.tsx +++ b/src/components/ui/text-link.tsx @@ -17,7 +17,7 @@ export const TextLink: FC = ({ , React.ComponentPropsWithoutRef & VariantProps ->(({ className, variant }) => { +>(({ className, variant = "success" }) => { if (variant === "success") { return ( @@ -213,7 +217,7 @@ type ToastProps = React.ComponentPropsWithoutRef; type ToastActionElement = React.ReactElement; -export function Toaster() { +function Toaster() { const { toasts, isPaused, setIsPaused } = useToast(); React.useEffect(() => { @@ -258,28 +262,12 @@ export function Toaster() { >
- {title && {title}} +
+ {title && {title}} +
{description && ( - - {/* {props.variant === "errorWithCopy" && ( -

- To solve problems, contact us
- via{" "} - - Discord -

- {" "} - and send the error text -

- )} */} - {description} - + {description} )} {copy && ( @@ -287,7 +275,6 @@ export function Toaster() { )}
{action} - {withTimeline && ( + +

Please try again later

+

+ If the problem persists, copy the error message below and contact our + support team +

+ + +
+ + [ + Error code ] + + + + [ + Support ] + +
+
+ ), +}; + export { type ToastProps, type ToastActionElement, @@ -317,4 +333,6 @@ export { ToastIcon, ToastCopy, ToastTimeline, + Toaster, + TOASTER_DESCRIPTION_PATTERNS, }; diff --git a/src/icons/discord.svg b/src/icons/discord.svg new file mode 100644 index 0000000..29497a3 --- /dev/null +++ b/src/icons/discord.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts index c66d099..2d8cda3 100644 --- a/src/routeTree.gen.ts +++ b/src/routeTree.gen.ts @@ -12,7 +12,7 @@ import { Route as rootRouteImport } from './routes/__root' import { Route as InteractionPanelRouteImport } from './routes/interaction-panel' import { Route as AuthRouteImport } from './routes/auth' import { Route as IndexRouteImport } from './routes/index' -import { Route as MailCodeMailCodeRouteImport } from './routes/mail-code/$mail-code' +import { Route as MagicLinkMagicLinkRouteImport } from './routes/magic-link/$magic-link' import { Route as AuthUsernameRouteImport } from './routes/auth/username' import { Route as AuthMailRouteImport } from './routes/auth/mail' import { Route as AuthCodeRouteImport } from './routes/auth/code' @@ -32,9 +32,9 @@ const IndexRoute = IndexRouteImport.update({ path: '/', getParentRoute: () => rootRouteImport, } as any) -const MailCodeMailCodeRoute = MailCodeMailCodeRouteImport.update({ - id: '/mail-code/$mail-code', - path: '/mail-code/$mail-code', +const MagicLinkMagicLinkRoute = MagicLinkMagicLinkRouteImport.update({ + id: '/magic-link/$magic-link', + path: '/magic-link/$magic-link', getParentRoute: () => rootRouteImport, } as any) const AuthUsernameRoute = AuthUsernameRouteImport.update({ @@ -60,7 +60,7 @@ export interface FileRoutesByFullPath { '/auth/code': typeof AuthCodeRoute '/auth/mail': typeof AuthMailRoute '/auth/username': typeof AuthUsernameRoute - '/mail-code/$mail-code': typeof MailCodeMailCodeRoute + '/magic-link/$magic-link': typeof MagicLinkMagicLinkRoute } export interface FileRoutesByTo { '/': typeof IndexRoute @@ -69,7 +69,7 @@ export interface FileRoutesByTo { '/auth/code': typeof AuthCodeRoute '/auth/mail': typeof AuthMailRoute '/auth/username': typeof AuthUsernameRoute - '/mail-code/$mail-code': typeof MailCodeMailCodeRoute + '/magic-link/$magic-link': typeof MagicLinkMagicLinkRoute } export interface FileRoutesById { __root__: typeof rootRouteImport @@ -79,7 +79,7 @@ export interface FileRoutesById { '/auth/code': typeof AuthCodeRoute '/auth/mail': typeof AuthMailRoute '/auth/username': typeof AuthUsernameRoute - '/mail-code/$mail-code': typeof MailCodeMailCodeRoute + '/magic-link/$magic-link': typeof MagicLinkMagicLinkRoute } export interface FileRouteTypes { fileRoutesByFullPath: FileRoutesByFullPath @@ -90,7 +90,7 @@ export interface FileRouteTypes { | '/auth/code' | '/auth/mail' | '/auth/username' - | '/mail-code/$mail-code' + | '/magic-link/$magic-link' fileRoutesByTo: FileRoutesByTo to: | '/' @@ -99,7 +99,7 @@ export interface FileRouteTypes { | '/auth/code' | '/auth/mail' | '/auth/username' - | '/mail-code/$mail-code' + | '/magic-link/$magic-link' id: | '__root__' | '/' @@ -108,14 +108,14 @@ export interface FileRouteTypes { | '/auth/code' | '/auth/mail' | '/auth/username' - | '/mail-code/$mail-code' + | '/magic-link/$magic-link' fileRoutesById: FileRoutesById } export interface RootRouteChildren { IndexRoute: typeof IndexRoute AuthRoute: typeof AuthRouteWithChildren InteractionPanelRoute: typeof InteractionPanelRoute - MailCodeMailCodeRoute: typeof MailCodeMailCodeRoute + MagicLinkMagicLinkRoute: typeof MagicLinkMagicLinkRoute } declare module '@tanstack/react-router' { @@ -141,11 +141,11 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof IndexRouteImport parentRoute: typeof rootRouteImport } - '/mail-code/$mail-code': { - id: '/mail-code/$mail-code' - path: '/mail-code/$mail-code' - fullPath: '/mail-code/$mail-code' - preLoaderRoute: typeof MailCodeMailCodeRouteImport + '/magic-link/$magic-link': { + id: '/magic-link/$magic-link' + path: '/magic-link/$magic-link' + fullPath: '/magic-link/$magic-link' + preLoaderRoute: typeof MagicLinkMagicLinkRouteImport parentRoute: typeof rootRouteImport } '/auth/username': { @@ -190,7 +190,7 @@ const rootRouteChildren: RootRouteChildren = { IndexRoute: IndexRoute, AuthRoute: AuthRouteWithChildren, InteractionPanelRoute: InteractionPanelRoute, - MailCodeMailCodeRoute: MailCodeMailCodeRoute, + MagicLinkMagicLinkRoute: MagicLinkMagicLinkRoute, } export const routeTree = rootRouteImport ._addFileChildren(rootRouteChildren) diff --git a/src/routes/auth/code.tsx b/src/routes/auth/code.tsx index b9a768b..e0c5613 100644 --- a/src/routes/auth/code.tsx +++ b/src/routes/auth/code.tsx @@ -101,6 +101,15 @@ function RouteComponent() { setResendTimeout(60); }; + const handleSubmit = () => { + const fullCode = code.join(""); + console.log("Confirm code:", fullCode); + navigate({ + to: "/auth/username", + viewTransition: { types: ["warp"] }, + }); + }; + return (
@@ -114,7 +123,15 @@ function RouteComponent() {

-
+
{ + e.preventDefault(); + if (code.every((c) => c !== "")) { + handleSubmit(); + } + }} + className="space-y-10" + >
{code.map((digit, i) => ( @@ -165,7 +175,7 @@ function RouteComponent() { )}
-
+ ); } diff --git a/src/routes/auth/mail.tsx b/src/routes/auth/mail.tsx index 52b8746..076f7ca 100644 --- a/src/routes/auth/mail.tsx +++ b/src/routes/auth/mail.tsx @@ -29,17 +29,19 @@ function RouteComponent() {
- setEmail(e.target.value)} - onKeyDown={(e) => { - if (e.key === "Enter") { - handleSubmit(); - } +
{ + e.preventDefault(); + handleSubmit(); }} - /> + > + setEmail(e.target.value)} + /> +
diff --git a/src/routes/mail-code/$mail-code.tsx b/src/routes/magic-link/$magic-link.tsx similarity index 94% rename from src/routes/mail-code/$mail-code.tsx rename to src/routes/magic-link/$magic-link.tsx index c5ed9f0..3cebf86 100644 --- a/src/routes/mail-code/$mail-code.tsx +++ b/src/routes/magic-link/$magic-link.tsx @@ -5,13 +5,13 @@ import { createFileRoute, Link, useNavigate } from "@tanstack/react-router"; import { TextLink } from "@/components/ui/text-link"; import LogoWithText from "@/icons/logo-with-text.svg?react"; -export const Route = createFileRoute("/mail-code/$mail-code")({ +export const Route = createFileRoute("/magic-link/$magic-link")({ component: RouteComponent, }); function RouteComponent() { const navigate = useNavigate(); - const { "mail-code": codeFromUrl } = Route.useParams(); + const { "magic-link": magicLink } = Route.useParams(); const [code, setCode] = useState(Array(6).fill("")); const [isAutoSubmitted, setIsAutoSubmitted] = useState(false); @@ -31,8 +31,8 @@ function RouteComponent() { }); useEffect(() => { - if (codeFromUrl && /^\d{6}$/.test(codeFromUrl)) { - const codeArray = codeFromUrl.split("").slice(0, 6); + if (magicLink && /^\d{6}$/.test(magicLink)) { + const codeArray = magicLink.split("").slice(0, 6); setCode(codeArray); const timer = setTimeout(() => { @@ -41,7 +41,7 @@ function RouteComponent() { return () => clearTimeout(timer); } - }, [codeFromUrl]); + }, [magicLink]); useEffect(() => { if (resendTimeout <= 0) { @@ -143,7 +143,7 @@ function RouteComponent() { {code.map((digit, i) => (