Finally fixed flash messages

lib/pinchflat_web/components/core_components.ex

@@ -112,24 +112,29 @@ defmodule PinchflatWeb.CoreComponents do
     <div
       :if={msg = render_slot(@inner_block) || Phoenix.Flash.get(@flash, @kind)}
       id={@id}
-      phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")}
+      class="pb-8"
       role="alert"
-      class={[
-        "fixed top-2 right-2 mr-2 w-80 sm:w-96 z-50 rounded-lg p-3 ring-1",
-        @kind == :info && "bg-emerald-50 text-emerald-800 ring-emerald-500 fill-cyan-900",
-        @kind == :error && "bg-rose-50 text-rose-900 shadow-md ring-rose-500 fill-rose-900"
-      ]}
       {@rest}
     >
-      <p :if={@title} class="flex items-center gap-1.5 text-sm font-semibold leading-6">
-        <.icon :if={@kind == :info} name="hero-information-circle-mini" class="h-4 w-4" />
-        <.icon :if={@kind == :error} name="hero-exclamation-circle-mini" class="h-4 w-4" />
-        <%= @title %>
-      </p>
-      <p class="mt-2 text-sm leading-5"><%= msg %></p>
-      <button type="button" class="group absolute top-1 right-1 p-2" aria-label={gettext("close")}>
-        <.icon name="hero-x-mark-solid" class="h-5 w-5 opacity-40 group-hover:opacity-70" />
-      </button>
+      <div class={[
+        "flex justify-between w-full border-l-6 bg-opacity-[50%] p-5 shadow-md dark:bg-opacity-40 dark:text-white",
+        @kind == :info && "border-[#34D399] bg-[#34D399]",
+        @kind == :error && "border-[#F87171] bg-[#F87171]"
+      ]}>
+        <main>
+          <h5 :if={@title} class="mb-2 text-lg font-bold">
+            <%= @title %>
+          </h5>
+          <p class="mt-2 text-md leading-5 opacity-80"><%= msg %></p>
+        </main>
+        <button
+          type="button"
+          aria-label={gettext("close")}
+          phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")}
+        >
+          <.icon name="hero-x-mark-solid" class="h-7 w-7 opacity-70 hover:opacity-100" />
+        </button>
+      </div>
     </div>
     """
   end
@@ -146,7 +151,7 @@ defmodule PinchflatWeb.CoreComponents do
 
   def flash_group(assigns) do
     ~H"""
-    <div id={@id}>
+    <div class="flex flex-col gap-7.5" id={@id}>
       <.flash kind={:info} title="Success!" flash={@flash} />
       <.flash kind={:error} title="Error!" flash={@flash} />
       <.flash
@@ -632,9 +637,11 @@ defmodule PinchflatWeb.CoreComponents do
   def show(js \\ %JS{}, selector) do
     JS.show(js,
       to: selector,
-      transition:
-        {"transition-all transform ease-out duration-300", "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
-         "opacity-100 translate-y-0 sm:scale-100"}
+      transition: {
+        "transition-all transform ease-out duration-300",
+        "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+        "opacity-100 translate-y-0 sm:scale-100"
+      }
     )
   end
 
@@ -642,9 +649,11 @@ defmodule PinchflatWeb.CoreComponents do
     JS.hide(js,
       to: selector,
       time: 200,
-      transition:
-        {"transition-all transform ease-in duration-200", "opacity-100 translate-y-0 sm:scale-100",
-         "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"}
+      transition: {
+        "transition-all transform ease-in duration-200",
+        "opacity-100 translate-y-0 sm:scale-100",
+        "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+      }
     )
   end
 

lib/pinchflat_web/controllers/media/media_item_html/show.html.heex

@@ -7,6 +7,17 @@
       Media Item #<%= @media_item.id %>
     </h2>
   </div>
+  <nav>
+    <.link
+      href={~p"/sources/#{@media_item.source_id}/media/#{@media_item}?delete_files=true"}
+      method="delete"
+      data-confirm="Are you sure?"
+    >
+      <.button color="bg-meta-1" rounding="rounded-full">
+        Delete Record and Files
+      </.button>
+    </.link>
+  </nav>
 </div>
 <div class="rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
   <div class="max-w-full overflow-x-auto">