Update flash

assets/js/app.js

@@ -1,5 +1,6 @@
 import "phoenix_html"
 import {Socket} from "phoenix"
+// import {LiveSocket} from "./phoenix_live_view"
 import {LiveSocket} from "phoenix_live_view"
 import topbar from "../vendor/topbar"
 

lib/live_beats_web/live/live_helpers.ex

@@ -9,6 +9,60 @@ defmodule LiveBeatsWeb.LiveHelpers do
     Routes.song_index_path(socket, :index, socket.assigns.current_user.username)
   end
 
+  def flash(%{kind: :error} = assigns) do
+    ~H"""
+    <%= if live_flash(@flash, @kind) do %>
+      <div class="rounded-md bg-green-50 p-4 top-0 right-0 fade-in-scale w-96" phx-click="lv:clear-flash" phx-value-key="error">
+        <div class="flex">
+          <div class="flex-shrink-0">
+            <.icon name={:check_circle} solid />
+          </div>
+          <div class="ml-3">
+            <p class="text-sm font-medium text-red-800">
+              <%= live_flash(@flash, @kind) %>
+            </p>
+          </div>
+          <div class="ml-auto pl-3">
+            <div class="-mx-1.5 -my-1.5">
+              <button type="button" class="inline-flex bg-red-50 rounded-md p-1.5 text-red-500 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600">
+                <span class="sr-only">Dismiss</span>
+                <.icon name={:x} solid />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    <% end %>
+    """
+  end
+
+  def flash(%{kind: :info} = assigns) do
+    ~H"""
+    <%= if live_flash(@flash, @kind) do %>
+      <div class="rounded-md bg-green-50 p-4 fade-in-scale fixed top-1 right-1 w-96" phx-click="lv:clear-flash" phx-value-key="info">
+        <div class="flex">
+          <div class="flex-shrink-0">
+            <.icon name={:check_circle} solid />
+          </div>
+          <div class="ml-3">
+            <p class="text-sm font-medium text-green-800">
+              <%= live_flash(@flash, @kind) %>
+            </p>
+          </div>
+          <div class="ml-auto pl-3">
+            <div class="-mx-1.5 -my-1.5">
+              <button type="button" class="inline-flex bg-green-50 rounded-md p-1.5 text-green-500 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-green-50 focus:ring-green-600">
+                <span class="sr-only">Dismiss</span>
+                <.icon name={:x} solid />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    <% end %>
+    """
+  end
+
   def spinner(assigns) do
     ~H"""
     <svg class="inline-block animate-spin h-2.5 w-2.5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">

lib/live_beats_web/live/song_live/upload_form_component.ex

@@ -41,6 +41,10 @@ defmodule LiveBeatsWeb.SongLive.UploadFormComponent do
     {:noreply, apply_params(socket, params, :validate)}
   end
 
+  def handle_event("validate", %{"_target" => ["mp3"]}, socket) do
+    {:noreply, drop_invalid_uploads(socket)}
+  end
+
   def handle_event("save", %{"songs" => params}, socket) do
     socket = apply_params(socket, params, :insert)
     %{current_user: current_user} = socket.assigns
@@ -62,6 +66,10 @@ defmodule LiveBeatsWeb.SongLive.UploadFormComponent do
     end
   end
 
+  def handle_event("save", %{} = _params, socket) do
+    {:noreply, socket}
+  end
+
   defp pending_stats?(socket) do
     Enum.find(socket.assigns.changesets, fn {_ref, chset} -> !chset.changes[:duration] end)
   end

lib/live_beats_web/templates/layout/live.html.heex

@@ -1,17 +1,12 @@
-<main>
+<main id>
   <.live_component module={LiveBeatsWeb.LayoutComponent} id="layout" />
 
   <%= if @current_user do %>
     <%= live_render(@socket, LiveBeatsWeb.PlayerLive, id: "player", session: %{}, sticky: true) %>
   <% end %>
 
-  <p class="alert alert-info fade-in-scale" role="alert"
-    phx-click="lv:clear-flash"
-    phx-value-key="info"><%= live_flash(@flash, :info) %></p>
-
-  <p class="alert alert-danger fade-in-scale" role="alert"
-    phx-click="lv:clear-flash"
-    phx-value-key="error"><%= live_flash(@flash, :error) %></p>
+  <.flash flash={@flash} kind={:info}/>
+  <.flash flash={@flash} kind={:error}/>
 
   <%= @inner_content %>
 </main>

mix.exs

@@ -39,8 +39,8 @@ defmodule LiveBeats.MixProject do
       {:postgrex, ">= 0.0.0"},
       {:phoenix_html, "~> 3.0"},
       {:phoenix_live_reload, "~> 1.2", only: :dev},
-      # {:phoenix_live_view, path: "~/oss/phoenix_live_view", override: true},
-      {:phoenix_live_view, github: "phoenixframework/phoenix_live_view", branch: "cm-sticky-live-render", override: true},
+      {:phoenix_live_view, path: "~/oss/phoenix_live_view", override: true},
+      # {:phoenix_live_view, github: "phoenixframework/phoenix_live_view", branch: "cm-sticky-live-render", override: true},
       {:floki, ">= 0.30.0", only: :test},
       {:phoenix_live_dashboard, "~> 0.5"},
       {:esbuild, "~> 0.2", runtime: Mix.env() == :dev},