[Documentation] Reorder Toast docs sections + Close+Action example

- About moved to top (right after Header).
- Examples second; Mount moved to AFTER Examples.
- New 'Close + Action' example after 'Close Button' (X visible plus
  Undo button).
- Components table moved above API Reference (file table first, then
  the props/options reference).

Author: djalmaaraujo

docs/app/javascript/controllers/toast_demo_controller.js

@@ -9,6 +9,7 @@ const PRESETS = {
   with_action: { variant: "default", title: "Event has been created", action: { label: "Undo" } },
   text_only: { variant: "default", title: "Event has been created" },
   close_button: { variant: "default", title: "Event has been created", description: "Close it manually with the X.", closeButton: true },
+  close_action: { variant: "default", title: "Event has been created", description: "Friday at 3:00 PM", closeButton: true, action: { label: "Undo" } },
 }
 
 export default class extends Controller {

docs/app/views/docs/toast.rb

@@ -12,7 +12,8 @@ class Views::Docs::Toast < Views::Base
     {key: "with_action", label: "With Action", title: "Event has been created", action_label: "Undo"},
     {key: "promise", label: "Promise", title: nil},
     {key: "text_only", label: "Text Only", title: "Event has been created"},
-    {key: "close_button", label: "Close Button", title: "Event has been created"}
+    {key: "close_button", label: "Close Button", title: "Event has been created"},
+    {key: "close_action", label: "Close + Action", title: "Event has been created"}
   ].freeze
 
   POSITIONS = %w[top-left top-center top-right bottom-left bottom-center bottom-right].freeze
@@ -26,6 +27,26 @@ def view_template
         description: "An opinionated toast component."
       )
 
+      Heading(level: 2) { "About" }
+      p(class: "text-muted-foreground text-sm leading-relaxed") do
+        plain "Trigger toasts from the server with Turbo Streams or from JavaScript via "
+        code(class: "rounded bg-muted px-1.5 py-0.5 text-xs") { "window.RubyUI.toast.*" }
+        plain ". Heavily inspired by the original "
+        a(
+          href: "https://github.com/emilkowalski/sonner",
+          target: "_blank",
+          rel: "noopener",
+          class: "underline underline-offset-2 hover:text-foreground"
+        ) { "sonner" }
+        plain "."
+      end
+
+      Heading(level: 2) { "Examples" }
+      Heading(level: 3) { "Types" }
+      div(class: "grid gap-4 sm:grid-cols-2", data: {controller: "toast-demo"}) do
+        EXAMPLES.each { |ex| example_box(ex) }
+      end
+
       Heading(level: 2) { "Mount" }
       div(class: "rounded-md border bg-muted/30 p-4") do
         Codeblock(<<~RUBY, syntax: :ruby)
@@ -37,12 +58,6 @@ def view_template
         RUBY
       end
 
-      Heading(level: 2) { "Examples" }
-      Heading(level: 3) { "Types" }
-      div(class: "grid gap-4 sm:grid-cols-2", data: {controller: "toast-demo"}) do
-        EXAMPLES.each { |ex| example_box(ex) }
-      end
-
       Heading(level: 3) { "Position" }
       p(class: "text-muted-foreground text-sm") { "Use the position prop to change where toasts mount." }
       div(class: "rounded-md border p-8 flex flex-wrap items-center justify-center gap-2", data: {controller: "toast-demo"}) do
@@ -101,19 +116,7 @@ def view_template
 
       render Components::ComponentSetup::Tabs.new(component_name: component)
 
-      Heading(level: 2) { "About" }
-      p(class: "text-muted-foreground text-sm leading-relaxed") do
-        plain "Trigger toasts from the server with Turbo Streams or from JavaScript via "
-        code(class: "rounded bg-muted px-1.5 py-0.5 text-xs") { "window.RubyUI.toast.*" }
-        plain ". Heavily inspired by the original "
-        a(
-          href: "https://github.com/emilkowalski/sonner",
-          target: "_blank",
-          rel: "noopener",
-          class: "underline underline-offset-2 hover:text-foreground"
-        ) { "sonner" }
-        plain "."
-      end
+      render Docs::ComponentsTable.new(component_files(component))
 
       Heading(level: 2) { "API Reference" }
 
@@ -132,8 +135,6 @@ def view_template
         plain " CustomEvent detail."
       end
       props_table(JS_OPTIONS)
-
-      render Docs::ComponentsTable.new(component_files(component))
     end
   end