Continue improving home screen

lib/wish_web/live/home_live/index.ex

@@ -2,6 +2,7 @@ defmodule WishWeb.HomeLive.Index do
   use WishWeb, :live_view
 
   alias Wish.Wishlist
+  use Phoenix.Component
 
   @impl true
   def mount(_params, session, socket) do
@@ -33,4 +34,34 @@ defmodule WishWeb.HomeLive.Index do
         {:noreply, socket}
     end
   end
+
+  attr :item, :any
+
+  def dropdown(assigns) do
+    ~H"""
+    <div
+      id={"dropdown-#{@item.id}"}
+      class="absolute z-10 w-40 bg-white origin-top right-0 whitespace-nowrap p-1 border rounded"
+      phx-click-away={JS.hide()}
+      hidden
+    >
+      <.link
+        href={@item.url}
+        class="block p-1 w-full border border-white hover:bg-slate-100 hover:border-black select-none"
+        target="_blank"
+      >
+        Go to URL
+      </.link>
+      <div
+        class="block p-1 w-full border border-white hover:bg-slate-100 hover:border-black select-none cursor-pointer"
+        phx-click={
+          JS.push("toggle_received", value: %{"id" => @item.id})
+          |> JS.hide(to: "#dropdown-#{@item.id}")
+        }
+      >
+        Mark received
+      </div>
+    </div>
+    """
+  end
 end

lib/wish_web/live/home_live/index.html.heex

@@ -16,7 +16,6 @@
       :for={item <- @items}
       phx-click={JS.navigate(~p"/details/#{item}")}
       class="h-72 p-2 rounded hover:bg-zinc-100 active:bg-zinc-200"
-      ,
     >
       <div class="aspect-square relative flex flex-col justify-center">
         <img
@@ -27,7 +26,7 @@
           width="224"
           class="rounded"
         />
-        <%= if item.received do %>
+        <%= if item.received && !@current_user do %>
           <div class="bg-red-400 text-white absolute w-full h-7 bottom-0">
             <.icon name="hero-check-circle" />Received
           </div>
@@ -37,24 +36,12 @@
         <%= item.title %>
         <div phx-click={JS.toggle(to: "#dropdown-#{item.id}")} class="relative">
           <.icon name="hero-ellipsis-vertical" class="w-7 h-7" />
-          <div
-            id={"dropdown-#{item.id}"}
-            class="absolute z-10 w-40 bg-white origin-top right-0 whitespace-nowrap p-1 border rounded"
-            phx-click-away={JS.hide()}
-            hidden
-          >
-            <div
-              class="p-1 border border-white hover:bg-slate-100 hover:border-black select-none"
-              phx-click={
-                JS.push("toggle_received", value: %{"id" => item.id})
-                |> JS.hide(to: "#dropdown-#{item.id}")
-              }
-            >
-              Mark received
-            </div>
-          </div>
+          <.dropdown item={item} />
         </div>
       </div>
+      <div class="text-sm">
+        <%= item.description %>
+      </div>
     </div>
   </div>
 <% else %>
@@ -71,7 +58,7 @@
           alt={item.title}
           class="max-h-full rounded"
         />
-        <%= if item.received do %>
+        <%= if item.received && !@current_user do %>
           <div class="absolute bg-red-400 text-xs text-white w-full h-7 bottom-0">
             <.icon name="hero-check-circle" />Received
           </div>
@@ -82,22 +69,7 @@
       </div>
       <div phx-click={JS.toggle(to: "#dropdown-#{item.id}")} class="relative">
         <.icon name="hero-ellipsis-vertical" class="w-7 h-7" />
-        <div
-          id={"dropdown-#{item.id}"}
-          class="absolute z-10 w-40 bg-white origin-top right-0 whitespace-nowrap p-1 border rounded"
-          phx-click-away={JS.hide()}
-          hidden
-        >
-          <div
-            class="p-1 border border-white hover:bg-slate-100 hover:border-black select-none"
-            phx-click={
-              JS.push("toggle_received", value: %{"id" => item.id})
-              |> JS.hide(to: "#dropdown-#{item.id}")
-            }
-          >
-            Mark received
-          </div>
-        </div>
+        <.dropdown item={item} />
       </div>
     </div>
   </div>