Notifications you swipe away

Throw a notification aside and it flies off; for four seconds you can undo it, then it's gone and the rest close the gap.

With Wardic: Solid 1 · Solid 2

Live demo

Swipe one aside, either way.

Your order is on its wayIt left the studio this morning, wrapped in recycled paper.
Back in stockThe Blossom Ginger Jar is back. Two left.
Price dropThe Poppy Plate is now $48, down from $54.
How's your Moon Vase?Tell other collectors what you think of it.

Loading your notifications…

Reduced motion: The card still follows your finger; a throw sends it off at once, and the rows below move up at once.

Beside Wardic

Motion has no next("settled"). Its card says the throw has landed through onAnimationComplete, by the variant's name, which offers "Undo" and starts a timer; the request goes when the timer ends, as a server action that refreshes the page, and the row leaves with the list read again. Undo, or a refusal, clears the timer and flies the card back. On Solid 2 the throw, its landing, the undo window and the request are one action. The throw takes over from dragSnapToOrigin's spring back in both.

The code

examples/notifications/Demo.tsx

// Notifications you swipe away, a server component: it starts the list's read and hands its
// promise to the client part. A dismissal refreshes the page, which reads the list again.
import { getNotices } from "~/lib/store.ts"
import { Notifications } from "./Client.tsx"

export default function Demo() {
  return <Notifications notices={getNotices()} />
}

examples/notifications/Client.tsx

"use client"
import type { Notice } from "@wardic/example-storefront-shared/server"
import { AnimatePresence, motion } from "motion/react"
import { startTransition, Suspense, use, useEffect, useRef, useState } from "react"
import { dismissNotice, restoreNotices } from "~/lib/store.ts"

type Side = "left" | "right"

// A card rests in place, or has flown off to a side: from the throw, at its speed, and settled as
// soon as it's out of sight, so "Undo" comes up as it goes. Faded out by 0.2 s and past the edge, it
// can rest coarser than a spring's default (0.5 px and 2 px/s).
const flyOut = { x: { type: "spring", stiffness: 300, damping: 35, restDelta: 1, restSpeed: 20 }, opacity: { type: "tween", duration: 0.2 } } as const
const sides = { shown: { x: 0, opacity: 1 }, left: { x: -420, opacity: 0, transition: flyOut }, right: { x: 420, opacity: 0, transition: flyOut } } as const
const fade = { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } } as const

/** Far enough, or fast enough: a release that throws the card away. */
const FLING_OFFSET = 120
const FLING_VELOCITY = 600
/** How long "Undo" is offered, once the card has flown off. */
const UNDO_MS = 4000

export function Notifications({ notices }: { readonly notices: Promise<ReadonlyArray<Notice>> }) {
  const [problem, setProblem] = useState<string>()
  // A server action: it refreshes the page, which reads the list again.
  const restore = () =>
    startTransition(async () => {
      setProblem(undefined)
      try {
        await restoreNotices()
      } catch (error) {
        setProblem(messageOf(error))
      }
    })

  return (
    <div className="notices">
      <header className="notices-head">
        <p className="muted">Swipe one aside, either way.</p>
        <button className="button quiet" onClick={restore}>
          Bring them back
        </button>
      </header>
      <Suspense fallback={<p className="muted">Loading your notifications…</p>}>
        <List notices={notices} onProblem={setProblem} />
      </Suspense>
      {problem && (
        <p className="error-line" role="alert">
          {problem}
        </p>
      )}
    </div>
  )
}

function List({ notices, onProblem }: { readonly notices: Promise<ReadonlyArray<Notice>>; readonly onProblem: (message: string) => void }) {
  const list = use(notices)
  return (
    <>
      {/* A row that goes leaves the list at once, and the rows below close the gap. */}
      <ul className="notice-list">
        <AnimatePresence mode="popLayout" initial={false}>
          {list.map((notice) => (
            <NoticeRow key={notice.id} notice={notice} onProblem={onProblem} />
          ))}
        </AnimatePresence>
      </ul>
      {list.length === 0 && <p className="muted notices-empty">You&apos;re all caught up.</p>}
    </>
  )
}

function NoticeRow({ notice, onProblem }: { readonly notice: Notice; readonly onProblem: (message: string) => void }) {
  // Where the card is thrown: it flies there, and stays there as its row goes.
  const [out, setOut] = useState<Side>()
  const [undoable, setUndoable] = useState(false)
  const pending = useRef<ReturnType<typeof setTimeout>>(undefined)
  useEffect(() => () => clearTimeout(pending.current), [])

  // Undone, or refused by the store: "Undo" goes, and the card flies back.
  const back = () => {
    clearTimeout(pending.current)
    setUndoable(false)
    setOut(undefined)
  }
  // Landed off to the side: "Undo" for a while, then the store is told. Its answer refreshes the
  // page, and the row goes, the card staying off.
  const landed = () => {
    setUndoable(true)
    pending.current = setTimeout(
      () =>
        startTransition(async () => {
          try {
            await dismissNotice(notice.id)
          } catch {
            back()
            onProblem("Couldn't dismiss it. It's back.")
          }
        }),
      UNDO_MS,
    )
  }

  return (
    <motion.li className="notice-row" data-id={notice.id} layout initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
      <AnimatePresence>
        {undoable && (
          <motion.p className="notice-undo" {...fade}>
            Dismissed ·{" "}
            <button className="link-button" onClick={back}>
              Undo
            </button>
          </motion.p>
        )}
      </AnimatePresence>
      <motion.article
        className={out ? "notice out" : "notice"}
        data-kind={notice.kind}
        drag="x"
        dragSnapToOrigin
        variants={sides}
        initial="shown"
        animate={out ?? "shown"}
        exit={out}
        // Each release: a fling throws the card, taking over from its spring back to the centre.
        onDragEnd={(_event, { offset, velocity }) => {
          const flung = Math.abs(offset.x) >= FLING_OFFSET || Math.abs(velocity.x) >= FLING_VELOCITY
          if (flung && out === undefined) setOut(sideOf(offset.x))
        }}
        // Motion tells an animation's end by its target: a side is the throw landing.
        onAnimationComplete={(definition) => {
          if (definition === "left" || definition === "right") landed()
        }}
      >
        <strong>{notice.title}</strong>
        <span className="muted">{notice.body}</span>
      </motion.article>
    </motion.li>
  )
}

function sideOf(offset: number): Side {
  if (offset < 0) return "left"
  return "right"
}

function messageOf(error: unknown): string {
  if (error instanceof Error) return error.message
  return String(error)
}

Highlighting…