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,6 +24,72 @@
   </:actions>
 </.header>
 
+<%= if @grid do %>
+  <div class="grid grid-cols-3 gap-4 mt-4" id="items-grid">
+    <div
+      :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"
+    >
+      <div class="aspect-square relative flex flex-col justify-center bg-white border border-black">
+        <img
+          :if={item.image_url}
+          src={item.image_url}
+          alt={item.title}
+          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>
+<% else %>
   <div class="flex flex-col mt-4 space-y-4">
     <div
       :for={item <- @items}
@@ -70,3 +148,4 @@
       </div>
     </div>
   </div>
+<% end %>