Update to allow search book by an empty bid.

README.md

@@ -9,6 +9,9 @@
 - change the values in `.env` and `.env_db`
   you can use `mix phx.gen.secret` to generate secrets.
   update the PHX_HOST to your domain name.
+- if you don't want to pull the pre-built container
+  - uncomment the part to build the image in the `docker-compose.yaml` file
+  - comment the image part to avoid pulling.
 - run `docker compose up -d`
 - run migrations `docker exec -it dbi bin/migrate`
 - open the url (`PHX_HOST`) in a browser.

docker-compose.yml

@@ -17,8 +17,10 @@ services:
 
   web:
     # to build the image
-    build:
-      context: .
+    #build:
+    #  context: .
+    # to pull the pre-built image
+    image: git.kklochko.space/kklochko/decentralised_book_index:latest
     container_name: dbi
     ports:
       - 4000:4000

lib/decentralised_book_index/metadata/book.ex

@@ -204,7 +204,7 @@ defmodule DecentralisedBookIndex.Metadata.Book do
       description "Return a list of Books, optionally filtering by BookId."
 
       argument :type, :string, allow_nil?: false
-      argument :bid, :string, allow_nil?: false
+      argument :bid, :string, allow_nil?: true
 
       filter expr(exists(bids, type == ^arg(:type) and contains(bid, ^arg(:bid))))
 

lib/decentralised_book_index_web/components/core_components.ex

@@ -546,8 +546,8 @@ defmodule DecentralisedBookIndexWeb.CoreComponents do
 
     ~H"""
     <div class="overflow-y-auto px-4 sm:overflow-visible sm:px-0 ">
-      <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 relative shadow-md sm:rounded-lg overflow-hidden">
-        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+      <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400 bg-slate-100 dark:bg-gray-800 relative shadow-md sm:rounded-lg overflow-hidden">
+        <thead class="text-xs text-gray-700 uppercase bg-slate-200 dark:bg-gray-700 dark:text-gray-400">
           <tr>
             <th :for={col <- @col} class="p-4 font-normal">{col[:label]}</th>
             <th :if={@action != []} class="relative p-0 pb-4">
@@ -560,7 +560,11 @@ defmodule DecentralisedBookIndexWeb.CoreComponents do
           phx-update={match?(%Phoenix.LiveView.LiveStream{}, @rows) && "stream"}
           class="relative  divide-zinc-100 text-sm leading-6 text-zinc-700"
         >
-          <tr :for={row <- @rows} id={@row_id && @row_id.(row)} class=" bg-white shadow-md dark:bg-gray-800 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-700">
+          <tr
+            :for={row <- @rows}
+            id={@row_id && @row_id.(row)}
+            class="bg-slate-100 shadow-md dark:bg-gray-800 hover:bg-slate-300 dark:bg-gray-850 dark:hover:bg-gray-700"
+          >
             <td
               :for={{col, i} <- Enum.with_index(@col)}
               phx-click={@row_click && @row_click.(row)}

lib/decentralised_book_index_web/components/my_components/author_card.ex

@@ -9,7 +9,7 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.AuthorCard do
 
   def author_card(assigns) do
     ~H"""
-    <div class="w-full max-w-sm bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700 mx-auto my-3">
+    <div class="w-full max-w-sm bg-slate-100 border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700 mx-auto my-3">
       <%= if @current_user != nil and Role.can_moderate?(@current_user.role) and is_nil(@author.dbi_server) do %>
         <div class="flex justify-end px-4 pt-4">
           <button
@@ -32,7 +32,7 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.AuthorCard do
           <!-- Dropdown menu -->
           <div
             id={"dropdown#{@author.id}"}
-            class="z-10 hidden text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44 dark:bg-gray-700"
+            class="z-10 hidden text-base list-none bg-slate-200 divide-y divide-gray-100 rounded-lg shadow-sm w-44 dark:bg-gray-700"
           >
             <ul class="py-2" aria-labelledby="dropdownButton">
               <li>
@@ -63,7 +63,7 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.AuthorCard do
           </div>
         </div>
       <% end %>
-      <div class="flex flex-col items-center py-5 text-center">
+      <div class="flex flex-col items-center py-5 text-center px-2">
         <.link navigate={~p"/authors/#{@author.id}"}>
           <%= if @author.avatar_url != nil do %>
             <img

lib/decentralised_book_index_web/components/my_components/book_card.ex

@@ -9,7 +9,7 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.BookCard do
 
   def book_card(assigns) do
     ~H"""
-    <div class="w-full max-w-sm bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700 mx-auto my-3">
+    <div class="w-full max-w-sm bg-slate-100 border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700 mx-auto my-3">
       <%= if @current_user != nil and Role.can_moderate?(@current_user.role) and is_nil(@book.dbi_server) do %>
         <div class="flex justify-end px-4 pt-4">
           <button
@@ -32,7 +32,7 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.BookCard do
           <!-- Dropdown menu -->
           <div
             id={"dropdown#{@book.id}"}
-            class="z-10 hidden text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44 dark:bg-gray-700"
+            class="z-10 hidden text-base list-none bg-slate-200 divide-y divide-gray-100 rounded-lg shadow-sm w-44 dark:bg-gray-700"
           >
             <ul class="py-2" aria-labelledby="dropdownButton">
               <li>
@@ -63,7 +63,7 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.BookCard do
           </div>
         </div>
       <% end %>
-      <div class="flex flex-col items-center py-5 text-center">
+      <div class="flex flex-col items-center py-5 text-center px-2">
         <.link navigate={~p"/books/#{@book.id}"}>
           <%= if @book.cover_image_url != nil do %>
             <img class="w-36 mb-3 shadow-lg" src={@book.cover_image_url} alt={"#{@book.title} image"} />

lib/decentralised_book_index_web/components/my_components/book_search.ex

@@ -14,37 +14,69 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.BookSearch do
 
   def book_search(assigns) do
     ~H"""
-    <div class="bg-white shadow-md dark:bg-gray-800 sm:rounded-lg">
+    <div class="bg-slate-100 shadow-md dark:bg-gray-800 sm:rounded-lg">
       <div class="flex items-center justify-center p-4 flex-row space-y-0 space-x-4">
         <div class="w-full grow">
           <form class="flex items-center" phx-change="search" phx-submit="search">
             <label for="simple-search" class="sr-only">Search</label>
             <div class="relative w-full">
               <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-                <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                  <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
+                <svg
+                  aria-hidden="true"
+                  class="w-5 h-5 text-gray-500 dark:text-gray-400"
+                  fill="currentColor"
+                  viewbox="0 0 20 20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+                    clip-rule="evenodd"
+                  />
                 </svg>
               </div>
-              <input name="query" type="text" phx-debounce="300" autocomplete="off" id="simple-search" class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="Search" value={@search_query}>
+              <input
+                name="query"
+                type="text"
+                phx-debounce="300"
+                autocomplete="off"
+                id="simple-search"
+                class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+                placeholder="Search"
+                value={@search_query}
+              />
             </div>
           </form>
         </div>
-          <%= if @current_user != nil and Role.can_moderate?(@current_user.role) do %>
-            <.link patch={~p"/books/new"} class="flex-shrink-0 my-auto">
-              <button type="button" class="flex items-center justify-between px-4 py-2 text-sm font-medium text-black dark:text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800">
-                <svg class="h-3.5 w-3.5 mr-2" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-                  <path clip-rule="evenodd" fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" />
-                </svg>
-                Add book
-              </button>
-            </.link>
-          <% end %>
-	        <.dropdown_settings
-            search_mode={@search_mode}
-            search_mode_options={@search_mode_options}
-            select_options={@select_options}
-            selected_option={@selected_option}
-          />
+        <%= if @current_user != nil and Role.can_moderate?(@current_user.role) do %>
+          <.link patch={~p"/books/new"} class="flex-shrink-0 my-auto">
+            <button
+              type="button"
+              class="flex items-center justify-between px-4 py-2 text-sm font-medium text-black dark:text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800"
+            >
+              <svg
+                class="h-3.5 w-3.5 mr-2"
+                fill="currentColor"
+                viewbox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
+                aria-hidden="true"
+              >
+                <path
+                  clip-rule="evenodd"
+                  fill-rule="evenodd"
+                  d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
+                />
+              </svg>
+              Add book
+            </button>
+          </.link>
+        <% end %>
+        <.dropdown_settings
+          search_mode={@search_mode}
+          search_mode_options={@search_mode_options}
+          select_options={@select_options}
+          selected_option={@selected_option}
+        />
       </div>
     </div>
     """
@@ -58,17 +90,42 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.BookSearch do
   def dropdown_settings(assigns) do
     ~H"""
     <div class="flex justify-end px-4">
-        <button id="dropdownButtonSearchBook" data-dropdown-toggle="dropdownSearchBook" class="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-1.5" type="button">
-            <span class="sr-only">Open dropdown</span>
-            <svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
-                <path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M20 6H10m0 0a2 2 0 1 0-4 0m4 0a2 2 0 1 1-4 0m0 0H4m16 6h-2m0 0a2 2 0 1 0-4 0m4 0a2 2 0 1 1-4 0m0 0H4m16 6H10m0 0a2 2 0 1 0-4 0m4 0a2 2 0 1 1-4 0m0 0H4"/>
-            </svg>
-        </button>
-        <!-- Dropdown menu -->
-        <div id="dropdownSearchBook" class="z-10 hidden text-base list-none bg-white rounded-lg shadow-sm w-64 dark:bg-gray-700 p-2 flex flex-col gap-2">
-          <div class="flex items-center space-x-3 md:w-auto">
-            <form phx-change="change-search-mode" class="w-full">
-            <select name="search_mode" id="search_mode" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+      <button
+        id="dropdownButtonSearchBook"
+        data-dropdown-toggle="dropdownSearchBook"
+        class="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-1.5"
+        type="button"
+      >
+        <span class="sr-only">Open dropdown</span>
+        <svg
+          class="w-5 h-5 text-gray-800 dark:text-white"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-width="2"
+            d="M20 6H10m0 0a2 2 0 1 0-4 0m4 0a2 2 0 1 1-4 0m0 0H4m16 6h-2m0 0a2 2 0 1 0-4 0m4 0a2 2 0 1 1-4 0m0 0H4m16 6H10m0 0a2 2 0 1 0-4 0m4 0a2 2 0 1 1-4 0m0 0H4"
+          />
+        </svg>
+      </button>
+      <!-- Dropdown menu -->
+      <div
+        id="dropdownSearchBook"
+        class="z-10 hidden text-base list-none bg-slate-200 rounded-lg shadow-sm w-64 dark:bg-gray-700 p-2 flex flex-col gap-2"
+      >
+        <div class="flex items-center space-x-3 md:w-auto">
+          <form phx-change="change-search-mode" class="w-full">
+            <select
+              name="search_mode"
+              id="search_mode"
+              class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+            >
               <%= for {name, value} <- @search_mode_options do %>
                 <%= if value == @search_mode do %>
                   <option value={value} selected>{name}</option>
@@ -77,11 +134,15 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.BookSearch do
                 <% end %>
               <% end %>
             </select>
-            </form>
-          </div>
-          <div class="flex items-center space-x-3 md:w-auto">
-            <form phx-change="change-sort" class="w-full">
-            <select name="sort_by" id="sort_by" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+          </form>
+        </div>
+        <div class="flex items-center space-x-3 md:w-auto">
+          <form phx-change="change-sort" class="w-full">
+            <select
+              name="sort_by"
+              id="sort_by"
+              class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+            >
               <%= for {name, value} <- @select_options do %>
                 <%= if value == @selected_option do %>
                   <option value={value} selected>{name}</option>
@@ -90,9 +151,9 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.BookSearch do
                 <% end %>
               <% end %>
             </select>
-            </form>
-          </div>
+          </form>
         </div>
+      </div>
     </div>
     """
   end

lib/decentralised_book_index_web/components/my_components/just_search_resources.ex

@@ -11,33 +11,56 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.JustSearchResources
 
   def just_search_resources(assigns) do
     ~H"""
-    <div class="relative bg-white shadow-md dark:bg-gray-800 sm:rounded-lg">
+    <div class="relative bg-slate-100 shadow-md dark:bg-gray-800 sm:rounded-lg">
       <div class="flex flex-col items-center justify-between p-4 space-y-3 md:flex-row md:space-y-0 md:space-x-4">
         <div class="w-full grow">
           <form class="flex items-center" phx-change="search" phx-submit="search">
             <label for="simple-search" class="sr-only">Search</label>
             <div class="relative w-full">
               <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-                <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                  <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
+                <svg
+                  aria-hidden="true"
+                  class="w-5 h-5 text-gray-500 dark:text-gray-400"
+                  fill="currentColor"
+                  viewbox="0 0 20 20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+                    clip-rule="evenodd"
+                  />
                 </svg>
               </div>
-              <input name="query" type="text" phx-debounce="300" autocomplete="off" id="simple-search" class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder={@search_placeholder} value={@search_query}>
+              <input
+                name="query"
+                type="text"
+                phx-debounce="300"
+                autocomplete="off"
+                id="simple-search"
+                class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+                placeholder={@search_placeholder}
+                value={@search_query}
+              />
             </div>
           </form>
         </div>
         <div class="flex flex-col items-stretch justify-end flex-shrink-0 w-full space-y-2 md:w-auto md:flex-row md:space-y-0 md:items-center md:space-x-3">
           <div class="flex items-center w-full space-x-3 md:w-auto">
             <form phx-change="change-sort" class="w-full">
-            <select name="sort_by" id="sort_by" class="grow bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
-              <%= for {name, value} <- @select_options do %>
-                <%= if value == @selected_option do %>
-                  <option value={value} selected>{name}</option>
-                <% else %>
-                  <option value={value}>{name}</option>
+              <select
+                name="sort_by"
+                id="sort_by"
+                class="grow bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+              >
+                <%= for {name, value} <- @select_options do %>
+                  <%= if value == @selected_option do %>
+                    <option value={value} selected>{name}</option>
+                  <% else %>
+                    <option value={value}>{name}</option>
+                  <% end %>
                 <% end %>
-              <% end %>
-            </select>
+              </select>
             </form>
           </div>
         </div>

lib/decentralised_book_index_web/components/my_components/pagination.ex

@@ -20,7 +20,7 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.Pagination do
               kind="primary"
               inverse
               patch={"#{@endpoint}?#{page_params_which(@page, @params, "prev")}"}
-              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"
+              class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-slate-100 border border-e-0 border-gray-300 rounded-s-lg hover:bg-slate-300 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
@@ -32,7 +32,7 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.Pagination do
                 <a
                   href={"#{@endpoint}?#{page_params_number(@page_params, @params, number)}"}
                   aria-current="page"
-                  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"
+                  class="flex items-center justify-center px-4 h-10 text-blue-600 border border-gray-300 bg-blue-100 hover:bg-blue-200 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white"
                 >
                   {number}
                 </a>
@@ -41,7 +41,7 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.Pagination do
               <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"
+                  class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-slate-100 border border-gray-300 hover:bg-slate-300 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>
@@ -54,7 +54,7 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.Pagination do
               kind="primary"
               inverse
               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-slate-100 border border-gray-300 rounded-e-lg hover:bg-slate-300 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)}
             >
               Next

lib/decentralised_book_index_web/components/my_components/search_resources.ex

@@ -17,27 +17,59 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.SearchResources do
 
   def search_resources(assigns) do
     ~H"""
-    <div class="relative bg-white shadow-md dark:bg-gray-800 sm:rounded-lg">
+    <div class="relative bg-slate-100 shadow-md dark:bg-gray-800 sm:rounded-lg">
       <div class="flex flex-col items-center justify-between p-4 space-y-3 md:flex-row md:space-y-0 md:space-x-4">
         <div class="w-full grow">
           <form class="flex items-center" phx-change="search" phx-submit="search">
             <label for="simple-search" class="sr-only">Search</label>
             <div class="relative w-full">
               <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-                <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                  <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
+                <svg
+                  aria-hidden="true"
+                  class="w-5 h-5 text-gray-500 dark:text-gray-400"
+                  fill="currentColor"
+                  viewbox="0 0 20 20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+                    clip-rule="evenodd"
+                  />
                 </svg>
               </div>
-              <input name="query" type="text" phx-debounce="300" autocomplete="off" id="simple-search" class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder={@search_placeholder} value={@search_query}>
+              <input
+                name="query"
+                type="text"
+                phx-debounce="300"
+                autocomplete="off"
+                id="simple-search"
+                class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+                placeholder={@search_placeholder}
+                value={@search_query}
+              />
             </div>
           </form>
         </div>
         <div class="flex flex-col items-stretch justify-end flex-shrink-0 w-full space-y-2 md:w-auto md:flex-row md:space-y-0 md:items-center md:space-x-3">
           <%= if can_add?(@current_user, @moderator_role) do %>
             <.link patch={@resource_new_url}>
-              <button type="button" class="grow w-full flex items-center justify-left px-4 py-2 text-sm font-medium text-black dark:text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800">
-                <svg class="h-3.5 w-3.5 mr-2" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-                  <path clip-rule="evenodd" fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" />
+              <button
+                type="button"
+                class="grow w-full flex items-center justify-left px-4 py-2 text-sm font-medium text-black dark:text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800"
+              >
+                <svg
+                  class="h-3.5 w-3.5 mr-2"
+                  fill="currentColor"
+                  viewbox="0 0 20 20"
+                  xmlns="http://www.w3.org/2000/svg"
+                  aria-hidden="true"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    fill-rule="evenodd"
+                    d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
+                  />
                 </svg>
                 Add {@resource_type}
               </button>
@@ -45,15 +77,19 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.SearchResources do
           <% end %>
           <div class="flex items-center w-full space-x-3 md:w-auto">
             <form phx-change="change-sort" class="w-full">
-            <select name="sort_by" id="sort_by" class="grow bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
-              <%= for {name, value} <- @select_options do %>
-                <%= if value == @selected_option do %>
-                  <option value={value} selected>{name}</option>
-                <% else %>
-                  <option value={value}>{name}</option>
+              <select
+                name="sort_by"
+                id="sort_by"
+                class="grow bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+              >
+                <%= for {name, value} <- @select_options do %>
+                  <%= if value == @selected_option do %>
+                    <option value={value} selected>{name}</option>
+                  <% else %>
+                    <option value={value}>{name}</option>
+                  <% end %>
                 <% end %>
-              <% end %>
-            </select>
+              </select>
             </form>
           </div>
         </div>

lib/decentralised_book_index_web/components/my_components/select_author.ex

@@ -14,18 +14,54 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.SelectAuthor do
         <label for="simple-search" class="sr-only">Search</label>
         <div class="relative w-full">
           <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-            <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-              <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
+            <svg
+              aria-hidden="true"
+              class="w-5 h-5 text-gray-500 dark:text-gray-400"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+                clip-rule="evenodd"
+              >
+              </path>
             </svg>
           </div>
-          <input name="query" type="text" phx-debounce="300" autocomplete="off" id="simple-search" class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="Search" value="">
+          <input
+            name="query"
+            type="text"
+            phx-debounce="300"
+            autocomplete="off"
+            id="simple-search"
+            class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+            placeholder="Search"
+            value=""
+          />
         </div>
       </form>
 
-      <%= for author <- @page.results do %>
-        <div phx-click="select-author" phx-target={@notify_component} phx-value-author={author.id} phx-value-path={@form_path} class="w-full bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700 mx-auto my-3">
-          <h5 class="mb-1 text-lg font-medium text-gray-900 dark:text-white px-2 pt-1">{author.name}</h5>
+      <%= if Enum.empty?(@page.results) do %>
+        <div class="flex justify-center ">
+          <p class="text-lg font-semibold py-5 dark:text-white">
+            No Authors
+          </p>
         </div>
+      <% else %>
+        <%= for author <- @page.results do %>
+          <div
+            phx-click="select-author"
+            phx-target={@notify_component}
+            phx-value-author={author.id}
+            phx-value-path={@form_path}
+            class="w-full bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700 mx-auto my-3 hover:bg-gray-100 dark:hover:bg-gray-700"
+          >
+            <h5 class="mb-1 text-lg font-medium text-gray-900 dark:text-white px-2 pt-1">
+              {author.name}
+            </h5>
+          </div>
+        <% end %>
       <% end %>
     </div>
     """

lib/decentralised_book_index_web/components/my_components/select_author_alias.ex

@@ -42,17 +42,25 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.SelectAuthorAlias do
         </div>
       </form>
 
-      <%= for author_alias <- @page.results do %>
-        <div
-          phx-click="select-author-alias"
-          phx-target={@notify_component}
-          phx-value-author-alias={author_alias.author_alias_registry_id}
-          class="w-full bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700 mx-auto my-3"
-        >
-          <h5 class="mb-1 text-lg font-medium text-gray-900 dark:text-white px-2 pt-1">
-            {author_alias.name}
-          </h5>
+      <%= if Enum.empty?(@page.results) do %>
+        <div class="flex justify-center ">
+          <p class="text-lg font-semibold py-5 dark:text-white">
+            No Authors
+          </p>
         </div>
+      <% else %>
+        <%= for author_alias <- @page.results do %>
+          <div
+            phx-click="select-author-alias"
+            phx-target={@notify_component}
+            phx-value-author-alias={author_alias.author_alias_registry_id}
+            class="w-full bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700 mx-auto my-3 hover:bg-gray-100 dark:hover:bg-gray-700"
+          >
+            <h5 class="mb-1 text-lg font-medium text-gray-900 dark:text-white px-2 pt-1">
+              {author_alias.name}
+            </h5>
+          </div>
+        <% end %>
       <% end %>
     </div>
     """

lib/decentralised_book_index_web/components/my_components/select_book_edition.ex

@@ -42,17 +42,25 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.SelectBookEdition do
         </div>
       </form>
 
-      <%= for book_edition <- @page.results do %>
-        <div
-          phx-click="select-book-edition"
-          phx-target={@notify_component}
-          phx-value-book-edition={book_edition.book_editions_registry_id}
-          class="w-full bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700 mx-auto my-3"
-        >
-          <h5 class="mb-1 text-lg font-medium text-gray-900 dark:text-white px-2 pt-1">
-            {book_edition.title}
-          </h5>
+      <%= if Enum.empty?(@page.results) do %>
+        <div class="flex justify-center ">
+          <p class="text-lg font-semibold py-5 dark:text-white">
+            No Books
+          </p>
         </div>
+      <% else %>
+        <%= for book_edition <- @page.results do %>
+          <div
+            phx-click="select-book-edition"
+            phx-target={@notify_component}
+            phx-value-book-edition={book_edition.book_editions_registry_id}
+            class="w-full bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700 mx-auto my-3 hover:bg-gray-100 dark:hover:bg-gray-700"
+          >
+            <h5 class="mb-1 text-lg font-medium text-gray-900 dark:text-white px-2 pt-1">
+              {book_edition.title}
+            </h5>
+          </div>
+        <% end %>
       <% end %>
     </div>
     """

lib/decentralised_book_index_web/components/my_components/select_publisher.ex

@@ -14,18 +14,53 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.SelectPublisher do
         <label for="simple-search" class="sr-only">Search</label>
         <div class="relative w-full">
           <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-            <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-              <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
+            <svg
+              aria-hidden="true"
+              class="w-5 h-5 text-gray-500 dark:text-gray-400"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+                clip-rule="evenodd"
+              >
+              </path>
             </svg>
           </div>
-          <input name="query" type="text" phx-debounce="300" autocomplete="off" id="simple-search" class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="Search" value="">
+          <input
+            name="query"
+            type="text"
+            phx-debounce="300"
+            autocomplete="off"
+            id="simple-search"
+            class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+            placeholder="Search"
+            value=""
+          />
         </div>
       </form>
 
-      <%= for publisher <- @page.results do %>
-        <div phx-click="select-publisher" phx-target={@notify_component} phx-value-publisher={publisher.id} class="w-full bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700 mx-auto my-3">
-          <h5 class="mb-1 text-lg font-medium text-gray-900 dark:text-white px-2 pt-1">{publisher.name}</h5>
+      <%= if Enum.empty?(@page.results) do %>
+        <div class="flex justify-center ">
+          <p class="text-lg font-semibold py-5 dark:text-white">
+            No Publishers
+          </p>
         </div>
+      <% else %>
+        <%= for publisher <- @page.results do %>
+          <div
+            phx-click="select-publisher"
+            phx-target={@notify_component}
+            phx-value-publisher={publisher.id}
+            class="w-full bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700 mx-auto my-3 hover:bg-gray-100 dark:hover:bg-gray-700"
+          >
+            <h5 class="mb-1 text-lg font-medium text-gray-900 dark:text-white px-2 pt-1">
+              {publisher.name}
+            </h5>
+          </div>
+        <% end %>
       <% end %>
     </div>
     """

lib/decentralised_book_index_web/components/my_partials/navbar.ex

@@ -11,7 +11,7 @@ defmodule DecentralisedBookIndexWeb.Components.MyPartials.Navbar do
 
   def partial_navbar(assigns) do
     ~H"""
-    <nav class="bg-white border-gray-200 px-4 lg:px-6 py-2.5 dark:bg-gray-800">
+    <nav class="bg-slate-100 border-gray-200 px-4 lg:px-6 py-2.5 dark:bg-gray-800">
       <div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl">
         <.link patch={~p"/books"} class="flex items-center">
           <svg
@@ -153,7 +153,7 @@ defmodule DecentralisedBookIndexWeb.Components.MyPartials.Navbar do
         <!-- Dropdown menu -->
         <div
           id="dropdown-user-info"
-          class="z-10 hidden text-base list-none bg-white rounded-lg shadow-sm w-40 dark:bg-gray-700 flex flex-col items-center pt-2 border dark:border-gray-600"
+          class="z-10 hidden text-base list-none bg-slate-100 rounded-lg shadow-sm w-40 dark:bg-gray-700 flex flex-col items-center pt-2 border dark:border-gray-600"
         >
           <%= if @current_user.role != :user do %>
             <p class="text-zinc-700 dark:text-white">

lib/decentralised_book_index_web/live/author_live/show.ex

@@ -27,7 +27,7 @@ defmodule DecentralisedBookIndexWeb.AuthorLive.Show do
       </:actions>
     </.header>
 
-    <div class="flex flex-col items-start gap-6 max-w-6xl mx-auto p-4 bg-gray-900 rounded-lg transition-all duration-300 md:prose md:block">
+    <div class="flex flex-col items-start gap-6 max-w-6xl mx-auto p-4 rounded-lg transition-all duration-300 md:prose md:block">
       <%= if @author.avatar_url != nil do %>
         <img
           class="w-36 h-36 mb-3 rounded-full shadow-lg mx-auto md:float-left md:mr-4"
@@ -54,7 +54,7 @@ defmodule DecentralisedBookIndexWeb.AuthorLive.Show do
 
       <div class="flex-1 pt-2 lg:pt-0 min-h-36">
         <h2 class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Description</h2>
-        <p class="text-gray-300 leading-relaxed">
+        <p class="text-zinc-800 dark:text-gray-400 leading-relaxed">
           {@author.description}
         </p>
 

test/decentralised_book_index_web/live/book_live/index_test.exs

@@ -0,0 +1,45 @@
+defmodule DecentralisedBookIndexWeb.Live.BookLive.IndexTest do
+  use DecentralisedBookIndexWeb.LiveCase, async: true
+
+  describe "Search by bid" do
+    setup do
+      %{
+        modes: [
+          "isbn",
+          "isbn13",
+          "asin"
+        ],
+        books:
+          for _ <- 1..5 do
+            generate(book())
+          end
+      }
+    end
+
+    test "can search by an empty bid", %{conn: conn, modes: modes} do
+      for mode <- modes do
+        {:ok, _view, html} =
+          conn
+          |> live("/books?search_mode=#{mode}")
+
+        assert html =~ "Listing Books"
+        assert html =~ "No Books"
+      end
+    end
+
+    test "can search by a bid", %{conn: conn, modes: modes, books: books} do
+      [book | others] = books
+
+      for %{type: type, bid: bid} <- book.bids do
+        {:ok, view, html} =
+          conn
+          |> live("/books?query=#{bid}&search_mode=#{type}")
+
+        html = render(view)
+
+        assert html =~ book.title
+        refute html =~ "No Books"
+      end
+    end
+  end
+end