feat(UI-1394): enhance toast component with customizable position, offset, and styles #1119
Conversation
|
When I opened it for the first time, I got this error: Also, when we run it manually from the drawer, it should be on top as well: |
|
|
For the improvement toast component, I created a new Linear Ticket https://linear.app/autokitteh/issue/UI-1462/improve-toast-component |
J1za
force-pushed
the
vitaly/feat/change-toast-component-and-show-under-run-button
branch
from
47ad843 to
4fa38f0
Compare
src/components/molecules/toast.tsx
Outdated
| let topPosition = 15; | ||
| let bottomPosition = 15; |
There was a problem hiding this comment.
We can extract this animation logic to a separate constant:
const TOAST_ANIMATION = {
variants: {
hidden: { opacity: 0, y: 50 },
visible: { opacity: 1, y: 0 },
},
transition: { duration: 0.3 }
};
There was a problem hiding this comment.
but it's let not motion. Maybe u mean something else?
src/components/molecules/toast.tsx
Outdated
|
|
||
| const titleStyle = (toastType: ToasterTypes) => | ||
| cn("w-full font-semibold", { | ||
| "text-error": toastType === "error", | ||
| "text-green-800": toastType === "success", | ||
| }); | ||
|
|
||
| const positionStyle = (position: string, offset: number) => { |
There was a problem hiding this comment.
I think we should extract ToastPosition to type or interface:
type ToastPosition = 'top-right' | 'bottom-right' | 'default';
| > | ||
| <div className="flex flex-col"> | ||
| <span className="font-semibold text-green-800">{t("executionSucceed")}</span> | ||
| <Button className="mt-0.5 flex items-center gap-1 p-0 text-green-800 underline"> |
There was a problem hiding this comment.
if the root html tag of this component is button we can't have another Button in the button
|
Bug with clicking a few times... it redirects to Screen.Recording.2025-04-03.at.17.39.00.movfixed |
|
Also - improvement suggestion: - You can add, for example, last 4 characters of the newSessionId - and then you will know which session each toast is. - but it's optional and not critical. |
J1za
force-pushed
the
vitaly/feat/change-toast-component-and-show-under-run-button
branch
from
a472a37 to
3939571
Compare
I didn't quite understand your point |
| </> | ||
| <button | ||
| aria-label={t("executionSucceed")} | ||
| className="px-4 py-3 cursor-pointer" |
There was a problem hiding this comment.
@J1za, please note that and the rest of the eslint tailwind classnames warnings
I thought, maybe we can display the toast with this text - this way you'll know what is the ID of the session you click on: But I'm not sure that it's a good or relevant feature. You know what, never mind, it will create more mess than benefit. |
| className="px-4 py-3 cursor-pointer" | ||
| onClick={() => navigate(`/projects/${projectId}/sessions/${sessionId}`)} | ||
| > | ||
| <div className="flex flex-col"> |
There was a problem hiding this comment.
I think you can place this flex flex-col inside the button element above.
There was a problem hiding this comment.
removed div, because unnecessary
|
I played with it a little bit, and in the following code, I managed to make the toasts be one under (or above) each other when we close some of them. |
|
Please rebase. |
J1za
force-pushed
the
vitaly/feat/change-toast-component-and-show-under-run-button
branch
from
a4ee05e to
3f03027
Compare
Looks good, but I want to add a custom offset. Also, when there's an error, the toasts stack on top of each other. |
Description
It can be similar to the toast we have today - it should be simple, easily clickable to allow the user to open the session he just ran.
Linear Ticket
https://linear.app/autokitteh/issue/UI-1394/add-toast-with-the-session-link-under-the-run-button-after-manual-run
What type of PR is this? (check all applicable)