Add test srht ci

.build.yml

@@ -0,0 +1,6 @@
+image: alpine/edge
+tasks:
+  - say-hello: |
+      echo hello
+  - say-world: |
+      echo world

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

@@ -1,4 +1,4 @@
-<.link patch={~p"/"}>
+<.link href={~p"/"}>
   <.icon name="hero-arrow-left" /> Back to list
 </.link>
 

lib/wish_web/live/home_live/index.ex

@@ -6,6 +6,12 @@ defmodule WishWeb.HomeLive.Index do
 
   @impl true
   def mount(_params, session, socket) do
+    grid? =
+      case Map.get(session, "user_display", "grid") do
+        "grid" -> true
+        _ -> false
+      end
+
     items =
       if socket.assigns.current_user do
         Wishlist.list_visible_items()
@@ -13,7 +19,12 @@ defmodule WishWeb.HomeLive.Index do
         Wishlist.list_available_items()
       end
 
-    {:ok, assign(socket, :items, items) |> assign(:hidden, false)}
+    {:ok, assign(socket, :items, items) |> assign(:grid, grid?) |> assign(:hidden, false)}
+  end
+
+  @impl true
+  def handle_event("toggle_view_state", _, socket) do
+    {:noreply, assign(socket, :grid, !socket.assigns.grid)}
   end
 
   @impl true

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

@@ -1,7 +1,19 @@
 <.header>
   Daniel's Wishlist
+  <:actions>
+    <.button phx-click={
+      JS.push("toggle_view_state")
+      |> JS.dispatch("toggle_view_state", detail: %{"grid" => !@grid})
+    }>
+      <%= if @grid do %>
+        List View
+      <% else %>
+        Grid View
+      <% end %>
+    </.button>
+  </:actions>
   <:actions :if={!@current_user}>
-    <.button phx-click={JS.push("toggle_hidden_items")} id="showhide-button" phx-throttle="300">
+    <.button phx-click={JS.push("toggle_hidden_items")}>
       <%= if @hidden do %>
         Hide
       <% else %>
@@ -12,61 +24,128 @@
   </:actions>
 </.header>
 
-<div class="flex flex-col mt-4 space-y-4">
+<%= if @grid do %>
-  <div
+  <div class="grid grid-cols-3 gap-4 mt-4" id="items-grid">
-    :for={item <- @items}
+    <div
-    class="grid grid-cols-6 grid-rows-4 gap-3 h-56 p-3 bg-purple-200 hover:bg-purple-300 active:bg-purple-400 border-2 border-black
+      :for={item <- @items}
+      phx-click={JS.navigate(~p"/details/#{item}")}
+      class="p-3 bg-purple-200 hover:bg-purple-300 active:bg-purple-400 border-2 border-black
             hover:shadow-sharp hover:-translate-x-0.5 hover:-translate-y-0.5 transition
             cursor-pointer"
-    phx-click={JS.navigate(~p"/details/#{item}")}
+    >
-  >
+      <div class="aspect-square relative flex flex-col justify-center bg-white border border-black">
-    <div class="relative col-span-2 flex flex-col justify-center max-h-full h-full row-span-4 bg-white border border-black">
+        <img
-      <img :if={item.image_url} src={item.image_url} alt={item.title} class="max-h-full" />
+          :if={item.image_url}
-      <%= if item.received && !@current_user do %>
+          src={item.image_url}
-        <div class="absolute bg-red-400 text-xs text-white w-full h-7 bottom-0">
+          alt={item.title}
-          <.icon name="hero-check-circle" />Purchased
+          height="224"
+          width="224"
+          class="rounded"
+        />
+        <%= 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>
+        <% end %>
+      </div>
+      <div class="flex flex-row justify-between mt-1 font-display">
+        <%= item.title %>
+        <div phx-click={JS.toggle(to: "#dropdown-#{item.id}")} class="relative">
+          <div class="w-7 h-7 rounded-full hover:bg-purple-400 active:bg-purple-500">
+            <.icon name="hero-ellipsis-vertical" class="w-full h-full" />
+          </div>
+          <.dropdown item={item} />
+        </div>
+      </div>
+      <%= if item.price do %>
+        <div>
+          <div class="text-sm opacity-60">
+            Price:
+          </div>
+          <div class="text-sm">
+            ~£<%= item.price %>
+          </div>
+        </div>
+      <% end %>
+      <div>
+        <div class="text-sm opacity-60">
+          Priority:
+        </div>
+        <span>
+          <%= for _ <- 1..item.desire do %>
+            <.icon name="hero-star" class="bg-red-500 text-red-500" />
+          <% end %>
+        </span>
+      </div>
+      <%= if item.description do %>
+        <div>
+          <div class="text-sm opacity-60">
+            Description:
+          </div>
+          <div>
+            <%= item.description %>
+          </div>
         </div>
       <% end %>
     </div>
-    <div class="col-span-3 text-lg font-display">
+  </div>
-      <%= item.title %>
+<% else %>
-    </div>
+  <div class="flex flex-col mt-4 space-y-4">
-    <div phx-click={JS.toggle(to: "#dropdown-#{item.id}")} class="relative">
+    <div
-      <.icon
+      :for={item <- @items}
-        name="hero-ellipsis-vertical"
+      class="grid grid-cols-6 grid-rows-4 gap-3 h-56 p-3 bg-purple-200 hover:bg-purple-300 active:bg-purple-400 border-2 border-black
-        class="w-7 h-7 rounded-full hover:bg-purple-400 active:bg-purple-500"
+            hover:shadow-sharp hover:-translate-x-0.5 hover:-translate-y-0.5 transition
-      />
+            cursor-pointer"
-      <.dropdown item={item} />
+      phx-click={JS.navigate(~p"/details/#{item}")}
-    </div>
+    >
-    <%= if item.price do %>
+      <div class="relative col-span-2 flex flex-col justify-center max-h-full h-full row-span-4 bg-white border border-black">
+        <img :if={item.image_url} src={item.image_url} alt={item.title} class="max-h-full" />
+        <%= 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" />Purchased
+          </div>
+        <% end %>
+      </div>
+      <div class="col-span-3 text-lg font-display">
+        <%= item.title %>
+      </div>
+      <div phx-click={JS.toggle(to: "#dropdown-#{item.id}")} class="relative">
+        <.icon
+          name="hero-ellipsis-vertical"
+          class="w-7 h-7 rounded-full hover:bg-purple-400 active:bg-purple-500"
+        />
+        <.dropdown item={item} />
+      </div>
+      <%= if item.price do %>
+        <div class="col-span-3">
+          <div class="text-sm opacity-60">
+            Price:
+          </div>
+          <div class="text-sm">
+            ~£<%= item.price %>
+          </div>
+        </div>
+      <% end %>
+      <%= if item.description do %>
+        <div class="col-span-3 w-full">
+          <div class="text-sm opacity-60">
+            Description:
+          </div>
+          <div>
+            <%= item.description %>
+          </div>
+        </div>
+      <% end %>
       <div class="col-span-3">
         <div class="text-sm opacity-60">
-          Price:
+          Priority:
-        </div>
-        <div class="text-sm">
-          ~£<%= item.price %>
         </div>
+        <span>
+          <%= for _ <- 1..item.desire do %>
+            <.icon name="hero-star" class="bg-red-500 text-red-500" />
+          <% end %>
+        </span>
       </div>
-    <% end %>
-    <%= if item.description do %>
-      <div class="col-span-3 w-full">
-        <div class="text-sm opacity-60">
-          Description:
-        </div>
-        <div>
-          <%= item.description %>
-        </div>
-      </div>
-    <% end %>
-    <div class="col-span-3">
-      <div class="text-sm opacity-60">
-        Priority:
-      </div>
-      <span>
-        <%= for _ <- 1..item.desire do %>
-          <.icon name="hero-star" class="bg-red-500 text-red-500" />
-        <% end %>
-      </span>
     </div>
   </div>
-</div>
+<% end %>