working on delete

lib/elixir_ai_web/components/form_components.ex

@@ -32,4 +32,25 @@ defmodule ElixirAiWeb.FormComponents do
     </div>
     """
   end
+
+  @doc """
+  Renders a centered overlay modal. Pass content via the `:inner_block` slot.
+
+  ## Examples
+
+      <.modal>
+        <p>Are you sure?</p>
+      </.modal>
+  """
+  slot :inner_block, required: true
+
+  def modal(assigns) do
+    ~H"""
+    <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
+      <div class="w-full max-w-sm rounded-lg border border-cyan-900/40 bg-cyan-950 p-6 shadow-xl">
+        {render_slot(@inner_block)}
+      </div>
+    </div>
+    """
+  end
 end

lib/elixir_ai_web/home/ai_providers_live.ex

@@ -2,18 +2,13 @@ defmodule ElixirAiWeb.AiProvidersLive do
   use ElixirAiWeb, :live_component
   import ElixirAiWeb.FormComponents
   alias ElixirAi.AiProvider
-  import ElixirAi.PubsubTopics
 
   def update(assigns, socket) do
-    if connected?(socket) do
-      Phoenix.PubSub.subscribe(ElixirAi.PubSub, providers_topic())
-    end
-
     {:ok,
      socket
      |> assign(assigns)
-     |> assign_new(:providers, fn -> AiProvider.all() end)
      |> assign_new(:show_form, fn -> false end)
+     |> assign_new(:confirm_delete_id, fn -> nil end)
      |> assign_new(
        :form_data,
        fn ->
@@ -81,10 +76,43 @@ defmodule ElixirAiWeb.AiProvidersLive do
                 <h3 class="text-sm font-medium text-cyan-300">{provider.name}</h3>
                 <p class="text-xs text-cyan-500 mt-1">Model: {provider.model_name}</p>
               </div>
+              <button
+                phx-click="delete_provider"
+                phx-value-id={provider.id}
+                phx-target={@myself}
+                class="ml-4 px-2 py-1 rounded text-xs border border-red-900/40 bg-red-950/20 text-red-400 hover:border-red-700 hover:bg-red-950/40 transition-colors"
+              >
+                Delete
+              </button>
             </div>
           </li>
         <% end %>
       </ul>
+
+      <%= if @confirm_delete_id do %>
+        <.modal>
+          <h2 class="text-sm font-semibold text-cyan-300 mb-2">Delete Provider</h2>
+          <p class="text-sm text-cyan-500 mb-6">
+            Are you sure you want to delete this provider? This action cannot be undone.
+          </p>
+          <div class="flex gap-3 justify-end">
+            <button
+              phx-click="cancel_delete"
+              phx-target={@myself}
+              class="px-4 py-2 rounded text-sm border border-cyan-900/40 bg-cyan-950/20 text-cyan-300 hover:border-cyan-700 hover:bg-cyan-950/40 transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              phx-click="confirm_delete"
+              phx-target={@myself}
+              class="px-4 py-2 rounded text-sm border border-red-900/40 bg-red-950/20 text-red-400 hover:border-red-700 hover:bg-red-950/40 transition-colors"
+            >
+              Delete
+            </button>
+          </div>
+        </.modal>
+      <% end %>
     </div>
     """
   end
@@ -93,6 +121,24 @@ defmodule ElixirAiWeb.AiProvidersLive do
     {:noreply, assign(socket, show_form: !socket.assigns.show_form, error: nil)}
   end
 
+  def handle_event("delete_provider", %{"id" => id}, socket) do
+    {:noreply, assign(socket, confirm_delete_id: id)}
+  end
+
+  def handle_event("cancel_delete", _params, socket) do
+    {:noreply, assign(socket, confirm_delete_id: nil)}
+  end
+
+  def handle_event("confirm_delete", _params, socket) do
+    case AiProvider.delete(socket.assigns.confirm_delete_id) do
+      :ok ->
+        {:noreply, assign(socket, confirm_delete_id: nil)}
+
+      _ ->
+        {:noreply, assign(socket, confirm_delete_id: nil, error: "Failed to delete provider")}
+    end
+  end
+
   def handle_event("create_provider", params, socket) do
     name = String.trim(params["name"])
     model_name = String.trim(params["model_name"])
@@ -135,14 +181,9 @@ defmodule ElixirAiWeb.AiProvidersLive do
              )
              |> assign(error: nil)}
 
-
           _ ->
             {:noreply, assign(socket, error: "Failed to create provider")}
         end
     end
   end
-
-  def handle_info({:provider_added, _attrs}, socket) do
-    {:noreply, assign(socket, providers: AiProvider.all())}
-  end
 end

lib/elixir_ai_web/home/home_live.ex

@@ -33,6 +33,14 @@ defmodule ElixirAiWeb.HomeLive do
           <p class="mt-2 text-sm text-red-400">{@error}</p>
         <% end %>
       </div>
+
+      <div>
+        <.live_component
+          module={ElixirAiWeb.AiProvidersLive}
+          id="ai-providers"
+          providers={@ai_providers}
+        />
+      </div>
     </div>
     """
   end
@@ -130,4 +138,8 @@ defmodule ElixirAiWeb.HomeLive do
   def handle_info({:provider_added, _attrs}, socket) do
     {:noreply, assign(socket, ai_providers: AiProvider.all())}
   end
+
+  def handle_info({:provider_deleted, _id}, socket) do
+    {:noreply, assign(socket, ai_providers: AiProvider.all())}
+  end
 end