Continue improving home screen

2023-11-28 01:34:04 +00:00
parent cb7c15c345
commit 39e6f36e9a
7 changed files with 46 additions and 66 deletions
--- a/lib/wish_web/components/layouts/app.html.heex
+++ b/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" />
-      </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>
+        wish
      </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">
--- a/lib/wish_web/components/layouts/root.html.heex
+++ b/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"}
--- a/lib/wish_web/live/home_live/index.ex
+++ b/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
--- a/lib/wish_web/live/home_live/index.html.heex
+++ b/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,23 +36,11 @@
        <%= 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>
+          <.dropdown item={item} />
        </div>
      </div>
+      <div class="text-sm">
+        <%= item.description %>
      </div>
    </div>
  </div>
@@ -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>
--- a/lib/wish_web/live/item_live/form_component.ex
+++ b/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>
--- a/lib/wish_web/live/item_live/show.html.heex
+++ b/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>

--- a/lib/wish_web/router.ex
+++ b/lib/wish_web/router.ex
@@ -24,9 +24,12 @@ defmodule WishWeb.Router do
  scope "/", WishWeb do
    pipe_through [:browser, :get_layout]

+    live_session :home_page,
+      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.
  # scope "/api", WishWeb do
@@ -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