Continue improving home screen

lib/wish_web/components/layouts/app.html.heex

@@ -2,26 +2,10 @@
   <div class="flex items-center justify-between border-b border-zinc-100 py-3 text-sm">
     <div class="flex items-center gap-4">
       <a href="/">
-        <img src={~p"/images/logo.svg"} width="36" />
+        wish
-      </a>
-      <p class="bg-brand/5 text-brand rounded-full px-2 font-medium leading-6">
-        v<%= Application.spec(:phoenix, :vsn) %>
-      </p>
-    </div>
-    <div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900">
-      <a href="https://twitter.com/elixirphoenix" class="hover:text-zinc-700">
-        @elixirphoenix
-      </a>
-      <a href="https://github.com/phoenixframework/phoenix" class="hover:text-zinc-700">
-        GitHub
-      </a>
-      <a
-        href="https://hexdocs.pm/phoenix/overview.html"
-        class="rounded-lg bg-zinc-100 px-2 py-1 hover:bg-zinc-200/80"
-      >
-        Get Started <span aria-hidden="true">&rarr;</span>
       </a>
     </div>
+    <div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900"></div>
   </div>
 </header>
 <main class="px-4 py-20 sm:px-6 lg:px-8">

lib/wish_web/components/layouts/root.html.heex

@@ -35,14 +35,6 @@
           </.link>
         </li>
       <% else %>
-        <li>
-          <.link
-            href={~p"/users/register"}
-            class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700"
-          >
-            Register
-          </.link>
-        </li>
         <li>
           <.link
             href={~p"/users/log_in"}

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
+          <.dropdown item={item} />
-            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>
         </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
+        <.dropdown item={item} />
-          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>
       </div>
     </div>
   </div>

lib/wish_web/live/item_live/form_component.ex

@@ -23,7 +23,6 @@ defmodule WishWeb.ItemLive.FormComponent do
         <.input field={@form[:description]} type="text" label="Description" />
         <.input field={@form[:url]} type="text" label="Url" />
         <.input field={@form[:image_url]} type="text" label="Image URL" />
-        <.input field={@form[:received]} type="checkbox" label="Received" />
         <.input field={@form[:desire]} type="number" label="Desire" />
         <:actions>
           <.button phx-disable-with="Saving...">Save Item</.button>

lib/wish_web/live/item_live/show.html.heex

@@ -12,7 +12,6 @@
   <:item title="Title"><%= @item.title %></:item>
   <:item title="Description"><%= @item.description %></:item>
   <:item title="Url"><%= @item.url %></:item>
-  <:item title="Received"><%= @item.received %></:item>
   <:item title="Desire"><%= @item.desire %></:item>
 </.list>
 

lib/wish_web/router.ex

@@ -24,8 +24,11 @@ defmodule WishWeb.Router do
   scope "/", WishWeb do
     pipe_through [:browser, :get_layout]
 
-    live "/", HomeLive.Index, :index
+    live_session :home_page,
-    live "/details/:id", HomeLive.Details, :index
+      on_mount: [{WishWeb.UserAuth, :mount_current_user}] do
+      live "/", HomeLive.Index, :index
+      live "/details/:id", HomeLive.Details, :index
+    end
   end
 
   # Other scopes may use custom stacks.
@@ -57,7 +60,7 @@ defmodule WishWeb.Router do
 
     live_session :redirect_if_user_is_authenticated,
       on_mount: [{WishWeb.UserAuth, :redirect_if_user_is_authenticated}] do
-      live "/users/register", UserRegistrationLive, :new
+      # live "/users/register", UserRegistrationLive, :new
       live "/users/log_in", UserLoginLive, :new
       live "/users/reset_password", UserForgotPasswordLive, :new
       live "/users/reset_password/:token", UserResetPasswordLive, :edit