It would be good to add progress bar

[notcod]

[diecodev]

Hi, thanks for the issue.

I don't think your proposal is in line with the default Toast design. However, it would be helpful if you could create a design in figma or similar where you use the default toast and add the progress bar, to see how it looks and make a final decision.

[!NOTE] Btw, if you want to implement this exact design, you can use the toast.custom() function.

[notcod]

My prettier config fuck up code with a lot of changes, but here is git https://github.com/notcod/qwik-sonner/commits/main/ If I get time tomorrow I will re-make it and push clean code if you like idea

export interface ToastProps {
  /// ...rest
  progressBar?: boolean;
  progressBarColor?: string;
}

interface ToastOptions {
  /// ...rest
  progressBar?: boolean;
  progressBarColor?: string;
}
export const Toast = component$((props: ToastProps) => {
  const percent = useSignal(100);
  useStyles$(`
    .pre-loading{
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 5px;
      background: #f2f2f2;
      border-radius: 0 0 5px 5px;
    }
    .loading{
      width: 100%;
      height: 5px;
      width: 0;
      transition: width 0.5s;
      border-radius: 0 0 0 5px; 
    }
  `);
  ///// ...rest

  let timeoutId: number;
  const startTimer = () => {
    ///// ...rest

    intervalId = setInterval(() => {
        const elapsedTime = new Date().getTime() - closeTimerStartTimeRef.value;
        percent.value = (0.98 - elapsedTime / duration.value) * 100;
      }, duration.value / 50);
  };

  cleanup(() => clearTimeout(intervalId));
  ///// ...rest
  return (
    /// ...rest
        {props.progressBar && (
          <div class="pre-loading">
            <div class="loading" style={` width:${percent.value}%; background: ${props.progressBarColor || 'black'}`} />
          </div>
        )}
      </Fragment>
    )}
    </li>
  );
});

export const Toaster = component$<ToasterProps>((props) => {
  /// ...rest
  return (
    <Toast
    /// ...rest
    progressBar={toastOptions?.progressBar}
    progressBarColor={toastOptions?.progressBarColor}
  /// ...rest

[notcod]

First one is https://fkhadra.github.io/react-toastify/introduction second one is sonner with config: I think I achieve my goal, I was using react integration in my project but I think I can move my project to this one, I would like to change toast drag to left right instead of current just to up, how I can make it?

Also it would be nice to add opacity while swiping

[diecodev]

hey @notcod gj, mate. What should I do for you? Wdyt about create a custom stylesheet for the component?

[notcod]

I edited it to satisfy my project needs, but didn't get time to push clean commits to your repository. I just uploaded test site and realised that toast works only when page accessed via spa Link.... I will take a look at this problem tomorrow, probably the reason is useTask$, but will confirm latter. check it https://fc52ca83.qwik-toastify.pages.dev/ updated icons and colors, shuffled your code a little, probably messed up default things but got what I needed, here is code https://github.com/notcod/toastify Btw, I learned few things from your code, you are really experienced in the field

[notcod]

I made it able to swipe left/right instead of default up/down, also dismisable by clicking on it, maybe you should put it as optional? I can commit feature you want to your code, which one would you like?

[diecodev]

Hey @notcod, pls create a PR to make the toast dismissible for left/right.

As for your proposed new design, I regret to inform you that after talking with my partner (@devalexpy), we consider that it does not go according to sonner design (the original version based on react) so we do not consider good idea to implement your proposed one. However, I am glad to know that you were able to adapt qwik-sonner to your needs.

[diecodev]

going to close this issue for now. If you think this should be reopened pls do it. 😄