Toggling view modes

lib/wish_web/live/home_live/index.ex

@@ -5,6 +5,17 @@ defmodule WishWeb.HomeLive.Index do
 
   @impl true
   def mount(_params, _session, socket) do
-    {:ok, stream(socket, :items, Wishlist.list_items())}
+    {:ok, assign(socket, :items, Wishlist.list_items()) |> assign(:display, :grid)}
+  end
+
+  @impl true
+  def handle_event("toggle", _, socket) do
+    new_state =
+      case socket.assigns.display do
+        :row -> :grid
+        :grid -> :row
+      end
+
+    {:noreply, assign(socket, :display, new_state)}
   end
 end

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

@@ -1,26 +1,42 @@
 <.header>
   Listing Items
+  <:actions>
+    <.button phx-click="toggle">
+      Toggle Display
+    </.button>
+  </:actions>
 </.header>
 
-<div class="grid grid-cols-3" id="items" phx-update="stream">
-  <div
-    :for={{dom_id, item} <- @streams.items}
-    id={dom_id}
-    phx-click={JS.navigate(~p"/details/#{item}")}
+<div
+  class={
+    case @display do
+      :grid -> "grid grid-cols-3 gap-2"
+      :row -> ""
+    end
+  }
+  id="items-grid"
+>
+  <.link
+    :for={item <- @items}
+    navigate={~p"/details/#{item}"}
+    class={[
+      "p-2 rounded hover:bg-zinc-100 active:bg-zinc-200",
+      case @display do
+        :grid -> "h-72"
+        :row -> "flex flex-row h-24"
+      end
+    ]}
   >
-    <img :if={item.image_url} src={item.image_url} />
-    <%= item.title %>
+    <div class="aspect-square flex flex-col justify-center">
+      <img
+        :if={item.image_url}
+        src={item.image_url}
+        alt={item.title}
+        height="224"
+        width="224"
+        class="rounded"
+      />
     </div>
-</div>
-
-<div class="" id="items" phx-update="stream">
-  <div
-    :for={{dom_id, item} <- @streams.items}
-    id={dom_id}
-    phx-click={JS.navigate(~p"/details/#{item}")}
-    class="flex flex-row h-20"
-  >
-    <img :if={item.image_url} src={item.image_url} />
     <%= item.title %>
-  </div>
+  </.link>
 </div>