Allow unstarring notebooks directly from the cards (#1818)

lib/livebook_web/live/home_live.ex

@@ -116,8 +116,23 @@ defmodule LivebookWeb.HomeLive do
               sessions={@sessions}
               added_at_label="Starred"
             >
-              <:card_icon>
-                <.remix_icon icon="star-fill" class="text-yellow-600" />
+              <:card_icon :let={{_info, idx}}>
+                <span class="tooltip top" data-tooltip="Unstar">
+                  <button
+                    aria-label="unstar notebook"
+                    phx-click={
+                      with_confirm(
+                        JS.push("unstar_notebook", value: %{idx: idx}),
+                        title: "Unstar notebook",
+                        description: "Once you unstar this notebook, you can always star it again.",
+                        confirm_text: "Unstar",
+                        opt_out_id: "unstar-notebook"
+                      )
+                    }
+                  >
+                    <.remix_icon icon="star-fill" class="text-yellow-600" />
+                  </button>
+                </span>
               </:card_icon>
             </.live_component>
           <% end %>
@@ -262,6 +277,12 @@ defmodule LivebookWeb.HomeLive do
     {:noreply, create_session(socket)}
   end
 
+  def handle_event("unstar_notebook", %{"idx" => idx}, socket) do
+    %{file: file} = Enum.fetch!(socket.assigns.starred_notebooks, idx)
+    Livebook.NotebookManager.remove_starred_notebook(file)
+    {:noreply, socket}
+  end
+
   def handle_event("bulk_action", %{"action" => "disconnect"} = params, socket) do
     socket = assign(socket, selected_session_ids: params["session_ids"])
     {:noreply, push_patch(socket, to: ~p"/home/sessions/edit_sessions/disconnect")}

lib/livebook_web/live/notebook_cards_component.ex

@@ -18,7 +18,7 @@ defmodule LivebookWeb.NotebookCardsComponent do
                 <%= info.name %>
               </span>
             </span>
-            <%= @card_icon && render_slot(@card_icon) %>
+            <%= @card_icon && render_slot(@card_icon, {info, idx}) %>
           </div>
           <div class="mt-1 flex-grow text-gray-600 text-sm">
             <%= @added_at_label %> <%= format_date_relatively(info.added_at) %>