Update the pagination component to show itself if there's more than one page.

lib/decentralised_book_index_web/components/my_components/pagination.ex

@@ -11,48 +11,58 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.Pagination do
     assigns = assign(assigns, :current_page_number, get_current_page(assigns.page))
 
     ~H"""
-    <nav aria-label="Page navigation example" class="flex justify-center">
+    <%= if AshPhoenix.LiveView.prev_page?(@page) or AshPhoenix.LiveView.next_page?(@page) do %>
-      <ul class="inline-flex -space-x-px text-base h-10 mx-auto">
+      <nav aria-label="Page navigation example" class="flex justify-center">
-        <li class="pl-auto">
+        <ul class="inline-flex -space-x-px text-base h-10 mx-auto">
-          <.button_link
+          <li class="pl-auto">
-            data-role="previous-page"
+            <.button_link
-            kind="primary"
+              data-role="previous-page"
-            inverse
+              kind="primary"
-            patch={"#{@endpoint}?#{page_params_which(@page, @params, "prev")}"}
+              inverse
-            class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+              patch={"#{@endpoint}?#{page_params_which(@page, @params, "prev")}"}
-            disabled={!AshPhoenix.LiveView.prev_page?(@page)}
+              class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
-          >
+              disabled={!AshPhoenix.LiveView.prev_page?(@page)}
-            Previous
+            >
-          </.button_link>
+              Previous
-        </li>
+            </.button_link>
-        <%= for number <- get_page_numbers(@page) do %>
+          </li>
-          <%= if number == @current_page_number do %>
+          <%= for number <- get_page_numbers(@page) do %>
-            <li>
+            <%= if number == @current_page_number do %>
-              <a href={"#{@endpoint}?#{page_params_number(@page_params, @params, number)}"}
+              <li>
-                 aria-current="page"
+                <a
-                 class="flex items-center justify-center px-4 h-10 text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white">{number}</a>
+                  href={"#{@endpoint}?#{page_params_number(@page_params, @params, number)}"}
-            </li>
+                  aria-current="page"
-          <% else %>
+                  class="flex items-center justify-center px-4 h-10 text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white"
-            <li>
+                >
-              <a href={"#{@endpoint}?#{page_params_number(@page_params, @params, number)}"}
+                  {number}
-                 class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">{number}</a>
+                </a>
-            </li>
+              </li>
+            <% else %>
+              <li>
+                <a
+                  href={"#{@endpoint}?#{page_params_number(@page_params, @params, number)}"}
+                  class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+                >
+                  {number}
+                </a>
+              </li>
+            <% end %>
           <% end %>
-        <% end %>
+          <li>
-        <li>
+            <.button_link
-          <.button_link
+              data-role="next-page"
-            data-role="next-page"
+              kind="primary"
-            kind="primary"
+              inverse
-            inverse
+              patch={"#{@endpoint}?#{page_params_which(@page, @params, "next")}"}
-            patch={"#{@endpoint}?#{page_params_which(@page, @params, "next")}"}
+              class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
-            class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+              disabled={!AshPhoenix.LiveView.next_page?(@page)}
-            disabled={!AshPhoenix.LiveView.next_page?(@page)}
+            >
-          >
+              Next
-            Next
+            </.button_link>
-          </.button_link>
+          </li>
-        </li>
+        </ul>
-      </ul>
+      </nav>
-    </nav>
+      <% end %>
     """
   end
 

test/decentralised_book_index_web/live/live_views_permission_test.exs

@@ -1,4 +1,4 @@
-defmodule DecentralisedBookIndexWeb.LiveViewsPermissions do
+defmodule DecentralisedBookIndexWeb.LiveViewsPermissionsTest do
   use DecentralisedBookIndexWeb.LiveCase, async: true
 
   setup do