feat(dockstat): Add custom toast notifications and global error alerts

[Its4Nik]

Summary by Sourcery

Introduce a custom toast notification system for Dockstat and hook it into global server error logging.

New Features:

• Add a reusable animated toast component powered by Sonner and the shared Card/Button UI components.
• Display a global toast notification when a server log entry with error level is emitted.

Enhancements:

• Extend the shared Card component with error and success variants for status-styled surfaces.

Build:

• Add the Sonner toast library as a Dockstat app dependency.

Chores:

• Remove the unused isLoading hook from the Dockstat app.

[sourcery-ai]

Reviewer's Guide

Implements a custom toast notification system in the Dockstat app using Sonner and UI Card variants, wiring it to server log errors for global alerts, and extending UI Card styling to support error/success states.

Sequence diagram for server log error triggering a toast notification

sequenceDiagram
  participant Server
  participant ClientApp
  participant Layout
  participant ToastModule
  participant Sonner

  Server->>ClientApp: Send logMessage(level="error", name, message)
  ClientApp->>Layout: Update logMessage state
  Layout->>Layout: useEffect on logMessage
  Layout->>ToastModule: toast({variant="error", title, description})
  ToastModule->>Sonner: sonnerToast.custom(render Toast(id, props))
  Sonner-->>ClientApp: Render Toast component in Toaster
  ClientApp->>ToastModule: User clicks button in Toast
  ToastModule->>Sonner: sonnerToast.dismiss(id)

Loading

Updated class diagram for toast components and Card variants

classDiagram
  class ToastProps {
    +string id
    +string title
    +string description
    +string variant
    +string buttonLabel
    +function buttonOnClick()
  }

  class ToastModule {
    +function toast(title, description, variant, buttonLabel, buttonOnClick)
  }

  class ToastComponent {
    +boolean isHovered
    +function render(id, title, description, variant, buttonLabel, buttonOnClick)
  }

  class Card {
    +CardVariant variant
    +CardSize size
    +function render(children, onClick)
  }

  class Button {
    +string variant
    +function render(label, onClick)
  }

  class CardVariant {
    <<enumeration>>
    default
    outlined
    elevated
    flat
    dark
    error
    success
  }

  class CardSize {
    <<enumeration>>
    xs
    sm
    md
    lg
  }

  ToastModule --> ToastProps
  ToastModule ..> ToastComponent
  ToastComponent --> Card
  ToastComponent --> Button
  Card --> CardVariant
  Card --> CardSize

Loading

File-Level Changes

Change	Details	Files
Add a custom toast abstraction for Dockstat using Sonner and animated UI Cards, including optional CTA button handling.	Introduce a toast helper function that wraps sonner's custom toasts and renders a bespoke Toast component. Implement a Toast component using framer-motion for hover-based expansion and z-index elevation. Use the shared Card component with new variants and a Button-based dismiss/CTA, wiring dismissal to Sonner's toast.dismiss API.	apps/dockstat/src/components/toast.tsx
Wire global server error logs to trigger toast notifications and mount the toast container in the Dockstat layout.	Update the Layout component to push log entries and, when an error-level log is received, show an error toast with contextual name and message. Mount the Toaster component in the main layout positioned at the bottom-right so toasts are visible across the app.	apps/dockstat/src/layout.tsx
Extend the shared Card component to support error and success visual variants for reuse in notifications and other UI.	Expand the CardVariant union type to include error and success options. Add corresponding Tailwind class mappings for error and success variants using error/success border colors with dark background styling.	packages/ui/src/components/Card/Card.tsx
Add Sonner as a dependency and update lockfile for toast notifications.	Declare sonner as a runtime dependency in the Dockstat app package.json. Regenerate the Bun lockfile to capture the Sonner dependency tree.	apps/dockstat/package.json bun.lock

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey - I've found 1 issue, and left some high level feedback:

• In the global error toast title, there’s a typo in the message text ('occured' → 'occurred'); since this is user-facing, it’s worth correcting.
• The ToastProps.description is restricted to string while title allows ReactNode; if you anticipate richer content (links, formatted text) in descriptions, consider typing description as React.ReactNode for consistency and flexibility.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- In the global error toast title, there’s a typo in the message text ('occured' → 'occurred'); since this is user-facing, it’s worth correcting.
- The `ToastProps.description` is restricted to `string` while `title` allows `ReactNode`; if you anticipate richer content (links, formatted text) in descriptions, consider typing `description` as `React.ReactNode` for consistency and flexibility.

## Individual Comments

### Comment 1
<location> `apps/dockstat/src/components/toast.tsx:22` </location>
<code_context>
+
+interface ToastProps {
+  id: string | number
+  title: string | React.ReactNode
+  description: string
+  variant?: "error" | "success"
</code_context>

<issue_to_address>
**issue:** React namespace types are used without importing the `React` type.

`ToastProps` uses `React.ReactNode` but `React` isn’t imported as a type, which can break type-checking under some TS/JSX configs. Please either import `type React from "react"` or use the named `ReactNode` type instead.
</issue_to_address>

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}