add proper flash messages

app/helpers/merged/merged_helper.rb

@@ -13,7 +13,9 @@ module Merged
       button( text , url , "bg-green-500" )
     end
     def submit_button(text , danger = false )
-      clazz = danger ? "bg-blue-500  " : "bg-blue-500  " + button_classes
+      clazz = "bg-blue-500 " #full names, no tricks for tailwind
+      clazz = "bg-red-500 " if danger
+      clazz += button_classes
       content_tag(:button , class: clazz , type: :submit) do
         text
       end

app/views/layouts/_merged_messages.haml

@@ -0,0 +1,28 @@
+#flash
+  -if flash.alert
+    .m-20.rounded.border-l-4.border-red-500.bg-red-50.p-4{:role => "alert"}
+      %strong.block.font-medium.text-red-700 Oops
+      %p.mt-2.text-sm.text-red-700
+        =flash.alert
+
+  -if flash.notice
+    .rounded-xl.border.border-gray-100.p-4.shadow-xl{:role => "alert"}
+      .flex.items-start.gap-4
+        %span.text-green-600
+          %svg.h-6.w-6{:fill => "none", :stroke => "currentColor", "stroke-width" => "1.5", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
+            %path{:d => "M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z", "stroke-linecap" => "round", "stroke-linejoin" => "round"}
+        .flex-1
+          %strong.block.font-medium.text-gray-900 Ok
+          %p.mt-1.text-sm.text-gray-700
+            = flash.notice
+
+:javascript
+  function hideNotice() {
+    const notification = document.querySelector('#flash')
+    if (notification) {
+      setInterval(function() {
+        notification.classList.add('collapse');
+      }, 5000);
+    }
+  }
+  hideNotice();

app/views/layouts/merged_layout.haml

@@ -46,4 +46,5 @@
                   %svg.h-5.w-5{:fill => "none", :stroke => "currentColor", "stroke-width" => "2", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
                     %path{:d => "M4 6h16M4 12h16M4 18h16", "stroke-linecap" => "round", "stroke-linejoin" => "round"}
 
+    = render "layouts/merged_messages"
     = yield

app/views/merged/cards/index.haml

@@ -1,5 +1,3 @@
-%p#notice= notice
-
 - template = find_template(@section)
 = render( template , section: @section)
 

app/views/merged/sections/index.html.haml

@@ -1,4 +1,3 @@
-%p#notice= notice
 .flex.flex-col.bg-white
   .flex.items-center.justify-center.flex-1
     .max-w-xl.px-4.py-8.mx-auto.text-center
@@ -17,8 +16,9 @@
       = red_button(  "Delete" , section_remove_path(section.id) )
     .relative.block.border.border-gray-100.p-4
       %h3.mt-4.text-lg.font-bold Template
-      %p= section.template
+      = link_to(section_select_template_url(section.id)) do
-      = section_preview(section , class: "w-full object-contain")
+        %p= section.template
+        = section_preview(section , class: "w-full object-contain")
     .relative.block.border.border-gray-100.p-4
       %h3.mt-4.text-lg.font-bold Header
       %p= section.header
@@ -30,16 +30,21 @@
         =link_to section_cards_url(section.id) do
           =card_preview(section , class: "w-full object-contain")
       - else
-        %h3.mt-4.text-lg.font-bold Image
+        = link_to(section_select_image_url(section.id)) do
-        -if section.image
+          %h3.mt-4.text-lg.font-bold Image
-          = image_tag "cms/" + section.image
+          -if section.image
-        -else
+            = image_tag "cms/" + section.image
-          %p No image
+          -else
+            %p No image
     .relative.block.border.border-gray-100.p-4
       %h3.mt-4.text-lg.font-bold Options
       - section.options.each do|name , value|
         %p
           = name
           = value
-%p
+.relative.block.border.border-gray-100
-  = green_button( "New Section" , new_page_section_url(@page.name) )
+  %p
+    = green_button( "New Section" , new_page_section_url(@page.name) )
+  %p
+    = form_tag( page_url(@page.name) , {method: :delete  } ) do
+      =submit_button( "Delete" , true)

app/views/merged/sections/select_template.haml

@@ -1,6 +1,8 @@
-%p#notice= notice
-
 .flex.flex-col.bg-white
+  .flex.items-center.justify-center.flex-1
+    .max-w-xl.px-4.py-8.mx-auto.text-center
+      %h1.text-3xl.font-bold.tracking-tight.text-gray-900
+        Page #{link_to @section.page.name, page_sections_url(@section.page.name), class: "underline"}
   .flex.items-center.justify-center.flex-1
     .max-w-xl.px-4.py-8.mx-auto.text-center
       %h1.text-3xl.font-bold.tracking-tight.text-gray-900

app/views/merged/sections/show.html.haml

@@ -1,5 +1,3 @@
-%p#notice= notice
-
 - template = find_template(@section)
 = render( template , section: @section)