Working on received marker

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

@@ -16,9 +16,9 @@
   }
   id="items-grid"
 >
-  <.link
+  <div
     :for={item <- @items}
-    navigate={~p"/details/#{item}"}
+    phx-click={JS.navigate(~p"/details/#{item}")}
     class={[
       "p-2 rounded hover:bg-zinc-100 active:bg-zinc-200",
       case @display do
@@ -37,6 +37,24 @@
         class="rounded"
       />
     </div>
-    <%= item.title %>
-  </.link>
+    <%= if item.received do %>
+      <div class="bg-red-400 text-white">
+        <.icon name="hero-check-circle" />Received
+      </div>
+    <% end %>
+    <div class="flex flex-row justify-between">
+      <%= 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 bg-white origin-top right-0 whitespace-nowrap"
+          phx-click={JS.push("toggle_received", value: %{"id" => item.id})}
+          hidden
+        >
+          Mark visible
+        </div>
+      </div>
+    </div>
+  </div>
 </div>