Update the code format for components and LiveViews.

assets/js/app.js

@@ -26,11 +26,14 @@ import "flowbite/dist/flowbite.phoenix.js";
 import bidSort from "./bidSort";
 import authorRoleSort from "./authorRoleSort";
 
+import darkModeHook from "../vendor/dark_mode"
+let DarkThemeToggle = darkModeHook;
+
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 let liveSocket = new LiveSocket("/live", Socket, {
   longPollFallbackMs: 2500,
   params: {_csrf_token: csrfToken},
-  hooks: { bidSort, authorRoleSort }
+  hooks: { bidSort, authorRoleSort, DarkThemeToggle }
 })
 
 // Show progress bar on live navigation and form submits

assets/tailwind.config.js

@@ -6,6 +6,7 @@ const fs = require("fs")
 const path = require("path")
 
 module.exports = {
+  darkMode: 'class',
   content: [
     "../deps/ash_authentication_phoenix/**/*.*ex",
     "./js/**/*.js",

assets/vendor/dark_mode.js

@@ -0,0 +1,39 @@
+const localStorageKey = 'theme';
+
+const isDark = () => {
+	if (localStorage.getItem(localStorageKey) === 'dark') return true;
+	if (localStorage.getItem(localStorageKey) === 'light') return false;
+	return window.matchMedia('(prefers-color-scheme: dark)').matches;
+}
+
+const setupThemeToggle = () => {
+	toggleVisibility = (dark) => {
+		const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
+		const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
+		if (themeToggleDarkIcon == null || themeToggleLightIcon == null) return;
+	        const show = dark ? themeToggleLightIcon : themeToggleDarkIcon;
+	        const hide = dark ? themeToggleDarkIcon : themeToggleLightIcon;
+		show.classList.remove('hidden', 'text-transparent');
+		hide.classList.add('hidden', 'text-transparent');
+		if (dark) {
+			document.documentElement.classList.add('dark')
+		} else {
+			document.documentElement.classList.remove('dark')
+		}
+		try { localStorage.setItem(localStorageKey, dark ? 'dark' : 'light') } catch (_err) { }
+	}
+	toggleVisibility(isDark())
+	document.getElementById('theme-toggle').addEventListener('click', function () {
+		toggleVisibility(!isDark())
+	});
+}
+
+const darkModeHook = {
+  mounted() {
+		setupThemeToggle();
+	},
+	updated() {
+	},
+}
+
+export default darkModeHook;

lib/decentralised_book_index_web/components/core_components.ex

@@ -50,7 +50,11 @@ defmodule DecentralisedBookIndexWeb.CoreComponents do
       data-cancel={JS.exec(@on_cancel, "phx-remove")}
       class="relative z-50 hidden"
     >
-      <div id={"#{@id}-bg"} class="bg-zinc-50/90 dark:bg-gray-900/90 fixed inset-0 transition-opacity" aria-hidden="true" />
+      <div
+        id={"#{@id}-bg"}
+        class="bg-zinc-50/90 dark:bg-gray-900/90 fixed inset-0 transition-opacity"
+        aria-hidden="true"
+      />
       <div
         class="fixed inset-0 overflow-y-auto"
         aria-labelledby={"#{@id}-title"}
@@ -425,7 +429,8 @@ defmodule DecentralisedBookIndexWeb.CoreComponents do
         class={[
           "mt-2 block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6 min-h-[6rem] 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",
           @errors == [] && "border-zinc-300 focus:border-zinc-400",
-          @errors != [] && "border-rose-400 focus:border-rose-400 dark:border-rose-400 dark:focus:border-rose-400"
+          @errors != [] &&
+            "border-rose-400 focus:border-rose-400 dark:border-rose-400 dark:focus:border-rose-400"
         ]}
         {@rest}
       >{Phoenix.HTML.Form.normalize_value("textarea", @value)}</textarea>
@@ -449,7 +454,8 @@ defmodule DecentralisedBookIndexWeb.CoreComponents do
         class={[
           "mt-2 block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6 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",
           @errors == [] && "border-zinc-300 focus:border-zinc-400",
-          @errors != [] && "border-rose-400 focus:border-rose-400 dark:border-rose-400 dark:focus:border-rose-400"
+          @errors != [] &&
+            "border-rose-400 focus:border-rose-400 dark:border-rose-400 dark:focus:border-rose-400"
         ]}
         {@rest}
       />
@@ -572,7 +578,10 @@ defmodule DecentralisedBookIndexWeb.CoreComponents do
             >
               <div class="block py-4 pr-6">
                 <span class="absolute -inset-y-px right-0 -left-4 group-hover:bg-zinc-50 sm:rounded-l-xl" />
-                <span class={["p-4 relative font-sm text-gray-500 dark:text-gray-400", i == 0 && "p-4 medium text-gray-900 whitespace-nowrap dark:text-white"]}>
+                <span class={[
+                  "p-4 relative font-sm text-gray-500 dark:text-gray-400",
+                  i == 0 && "p-4 medium text-gray-900 whitespace-nowrap dark:text-white"
+                ]}>
                   {render_slot(col, @row_item.(row))}
                 </span>
               </div>

lib/decentralised_book_index_web/components/layouts/root.html.heex

@@ -10,6 +10,14 @@
     <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
     <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
     </script>
+    <script>
+      // On page load or when changing themes, best to add inline in `head` to avoid FOUC
+      if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        document.documentElement.classList.add('dark');
+      } else {
+        document.documentElement.classList.remove('dark')
+      }
+    </script>
   </head>
   <body class="bg-white dark:bg-gray-900">
     {@inner_content}

lib/decentralised_book_index_web/components/my_components.ex

@@ -34,6 +34,8 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents do
 
       alias MyComponents.SelectAuthorAlias
       import MyComponents.SelectedAuthorAlias, only: [selected_author_alias: 1]
+
+      import MyComponents.DarkModeSwitcher, only: [dark_mode_switcher: 1]
     end
   end
 end

lib/decentralised_book_index_web/components/my_components/buttons.ex

@@ -120,9 +120,21 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.Buttons do
       ]}
       {@rest}
     >
-      <svg class="w-6 h-6 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+      <svg
-        <path fill-rule="evenodd" d="M5 3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7.414A2 2 0 0 0 20.414 6L18 3.586A2 2 0 0 0 16.586 3H5Zm3 11a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6H8v-6Zm1-7V5h6v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1Z" clip-rule="evenodd"/>
+        class="w-6 h-6 dark:text-white"
-        <path fill-rule="evenodd" d="M14 17h-4v-2h4v2Z" clip-rule="evenodd"/>
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        fill="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M5 3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7.414A2 2 0 0 0 20.414 6L18 3.586A2 2 0 0 0 16.586 3H5Zm3 11a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6H8v-6Zm1-7V5h6v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1Z"
+          clip-rule="evenodd"
+        />
+        <path fill-rule="evenodd" d="M14 17h-4v-2h4v2Z" clip-rule="evenodd" />
       </svg>
       {render_slot(@inner_block)}
     </.success_button>
@@ -147,9 +159,21 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.Buttons do
       ]}
       {@rest}
     >
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 -ml-0.5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+      <svg
-        <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path>
+        xmlns="http://www.w3.org/2000/svg"
-        <path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd"></path>
+        class="h-4 w-4 mr-2 -ml-0.5"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        aria-hidden="true"
+      >
+        <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z">
+        </path>
+        <path
+          fill-rule="evenodd"
+          d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
+          clip-rule="evenodd"
+        >
+        </path>
       </svg>
       {render_slot(@inner_block)}
     </.primary_button>
@@ -174,8 +198,22 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.Buttons do
       ]}
       {@rest}
     >
-      <svg class="w-6 h-6 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+      <svg
-        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/>
+        class="w-6 h-6 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-linejoin="round"
+          stroke-width="2"
+          d="M6 18 17.94 6M18 18 6.06 6"
+        />
       </svg>
       {render_slot(@inner_block)}
     </.primary_button>

lib/decentralised_book_index_web/components/my_components/dark_mode_switcher.ex

@@ -0,0 +1,56 @@
+defmodule DecentralisedBookIndexWeb.Components.MyComponents.DarkModeSwitcher do
+  use Phoenix.Component
+
+  @doc"""
+  This component is based on https://github.com/aiwaiwa/phoenix_dark_mode/blob/main/dark_mode.ex.
+  """
+  def dark_mode_switcher(assigns) do
+    ~H"""
+    <button
+      id="theme-toggle"
+      type="button"
+      phx-update="ignore"
+      phx-hook="DarkThemeToggle"
+      class="text-zinc-500 dark:text-zinc-400 hover:bg-slate-200 dark:hover:bg-gray-700 rounded-lg text-sm p-2"
+    >
+      <svg
+        id="theme-toggle-dark-icon"
+        class="w-5 h-5 text-transparent hidden"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
+      </svg>
+
+      <svg
+        id="theme-toggle-light-icon"
+        class="w-5 h-5 text-transparent"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+        >
+        </path>
+      </svg>
+    </button>
+
+    <script>
+      // Toggle early based on <html class="dark">
+      const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
+      const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
+      if (themeToggleDarkIcon != null && themeToggleLightIcon != null) {
+        let dark = document.documentElement.classList.contains('dark');
+        const show = dark ? themeToggleLightIcon : themeToggleDarkIcon;
+        const hide = dark ? themeToggleDarkIcon : themeToggleLightIcon;
+        show.classList.remove('hidden', 'text-transparent');
+        hide.classList.add('hidden', 'text-transparent');
+      }
+    </script>
+    """
+  end
+end

lib/decentralised_book_index_web/components/my_partials/navbar.ex

@@ -2,7 +2,8 @@ defmodule DecentralisedBookIndexWeb.Components.MyPartials.Navbar do
   use Phoenix.Component
   use DecentralisedBookIndexWeb, :verified_routes
 
-  import DecentralisedBookIndexWeb.Components.MyComponents.Buttons
+  import DecentralisedBookIndexWeb.Components.MyComponents.{Buttons, DarkModeSwitcher}
+
   alias Phoenix.LiveView.JS
   alias DecentralisedBookIndex.Accounts.Role
 
@@ -35,6 +36,7 @@ defmodule DecentralisedBookIndexWeb.Components.MyPartials.Navbar do
           <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">DBI</span>
         </.link>
         <div class="flex items-center lg:order-2">
+	  <.dark_mode_switcher />
           <.user_info current_user={@current_user} />
           <button
             data-collapse-toggle="mobile-menu-2"

lib/decentralised_book_index_web/live/author_live/index.ex

@@ -30,19 +30,11 @@ defmodule DecentralisedBookIndexWeb.AuthorLive.Index do
     <% else %>
       <div class="flex flex-wrap flex-[3_1_auto]">
         <%= for author <- @page.results do %>
-          <.author_card
+          <.author_card author={author} current_user={@current_user} />
-            author={author}
-            current_user={@current_user}
-          />
         <% end %>
       </div>
 
-      <.pagination
+      <.pagination endpoint={~p"/authors"} page={@page} page_params={@page_params} params={@params} />
-        endpoint={~p"/authors"}
-        page={@page}
-        page_params={@page_params}
-        params={@params}
-      />
     <% end %>
     """
   end

lib/decentralised_book_index_web/live/author_live/show.ex

@@ -108,7 +108,10 @@ defmodule DecentralisedBookIndexWeb.AuthorLive.Show do
   @impl true
   def handle_params(%{"id" => id}, _, socket) do
     author =
-      Ash.get!(DecentralisedBookIndex.Metadata.Author, id, load: [:dbi_server], actor: socket.assigns.current_user)
+      Ash.get!(DecentralisedBookIndex.Metadata.Author, id,
+        load: [:dbi_server],
+        actor: socket.assigns.current_user
+      )
 
     alternative_names = DecentralisedBookIndex.Metadata.get_author_alternative_names!(author)
 

lib/decentralised_book_index_web/live/book_live/form_component.ex

@@ -21,19 +21,11 @@ defmodule DecentralisedBookIndexWeb.BookLive.FormComponent do
         <%= if @form.source.type == :create do %>
           <.input field={@form[:title]} type="text" label="Title" />
           <.input field={@form[:cover_image_url]} type="text" label="Cover image url" />
-          <.input
+          <.input field={@form[:description]} type="textarea" label="Description" />
-            field={@form[:description]}
-            type="textarea"
-            label="Description"
-          />
           <.bids_inputs form={@form} myself={@myself} />
           <.author_roles_inputs form={@form} myself={@myself} notify_component={@myself} />
           <.input field={@form[:format]} type="text" label="Format" />
-          <.input
+          <.input field={@form[:language]} type="text" label="Language" />
-            field={@form[:language]}
-            type="text"
-            label="Language"
-          />
           <.input field={@form[:page_count]} type="number" label="Page count" />
           <div>
             <.input field={@form[:publisher_id]} type="text" label="Publisher" type="hidden" show_errors?={false} />
@@ -48,19 +40,11 @@ defmodule DecentralisedBookIndexWeb.BookLive.FormComponent do
         <%= if @form.source.type == :update do %>
           <.input field={@form[:title]} type="text" label="Title" />
           <.input field={@form[:cover_image_url]} type="text" label="Cover image url" />
-          <.input
+          <.input field={@form[:description]} type="textarea" label="Description" />
-            field={@form[:description]}
-            type="textarea"
-            label="Description"
-          />
           <.bids_inputs form={@form} myself={@myself} />
           <.author_roles_inputs form={@form} myself={@myself} notify_component={@myself} />
           <.input field={@form[:format]} type="text" label="Format" />
-          <.input
+          <.input field={@form[:language]} type="text" label="Language" />
-            field={@form[:language]}
-            type="text"
-            label="Language"
-          />
           <.input field={@form[:page_count]} type="number" label="Page count" />
           <div>
             <.input field={@form[:publisher_id]} type="text" label="Publisher" type="hidden" show_errors?={false} />
@@ -145,16 +129,30 @@ defmodule DecentralisedBookIndexWeb.BookLive.FormComponent do
       <tbody phx-hook="bidSort" id="bidSort" phx-target={@myself}>
         <.inputs_for :let={bid_form} field={@form[:bids]}>
           <tr data-id={bid_form.index}>
-            <td class="px-3 w-10 pt-2">
+            <td class="px-3 w-10 h-10 pt-2 align-top group">
-              <svg class="w-6 h-6 text-gray-800 dark:text-white handle cursor-pointer" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+              <svg
-                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/>
+                class="w-6 h-6 text-gray-800 dark:text-white handle cursor-pointer mt-2"
+                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-linejoin="round"
+                  stroke-width="2"
+                  d="m8 15 4 4 4-4m0-6-4-4-4 4"
+                />
               </svg>
             </td>
-            <td class="px-3 w-36">
+            <td class="px-3 w-36 align-top group">
               <label for={bid_form[:type].id} class="hidden">Type</label>
               <.input field={bid_form[:type]} />
             </td>
-            <td class="px-3">
+            <td class="px-3 align-top group">
               <label for={bid_form[:bid].id} class="hidden">Id</label>
               <.input field={bid_form[:bid]} />
             </td>
@@ -167,8 +165,20 @@ defmodule DecentralisedBookIndexWeb.BookLive.FormComponent do
                 size="xs"
                 inverse
               >
-                <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+                <svg
-                  <path fill-rule="evenodd" d="M8.586 2.586A2 2 0 0 1 10 2h4a2 2 0 0 1 2 2v2h3a1 1 0 1 1 0 2v12a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V8a1 1 0 0 1 0-2h3V4a2 2 0 0 1 .586-1.414ZM10 6h4V4h-4v2Zm1 4a1 1 0 1 0-2 0v8a1 1 0 1 0 2 0v-8Zm4 0a1 1 0 1 0-2 0v8a1 1 0 1 0 2 0v-8Z" clip-rule="evenodd"/>
+                  class="w-6 h-6 text-gray-800 dark:text-white"
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  fill="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M8.586 2.586A2 2 0 0 1 10 2h4a2 2 0 0 1 2 2v2h3a1 1 0 1 1 0 2v12a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V8a1 1 0 0 1 0-2h3V4a2 2 0 0 1 .586-1.414ZM10 6h4V4h-4v2Zm1 4a1 1 0 1 0-2 0v8a1 1 0 1 0 2 0v-8Zm4 0a1 1 0 1 0-2 0v8a1 1 0 1 0 2 0v-8Z"
+                    clip-rule="evenodd"
+                  />
                 </svg>
               </.button_link>
             </td>
@@ -229,12 +239,26 @@ defmodule DecentralisedBookIndexWeb.BookLive.FormComponent do
       <tbody phx-hook="authorRoleSort" id="authorRoleSort" phx-target={@myself}>
         <.inputs_for :let={author_roles_form} field={@form[:author_roles]}>
           <tr data-id={author_roles_form.index}>
-            <td class="px-3 w-10 pt-2">
+            <td class="px-3 w-10 pt-2 align-top group">
-              <svg class="w-6 h-6 text-gray-800 dark:text-white handle cursor-pointer" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+              <svg
-                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/>
+                class="w-6 h-6 text-gray-800 dark:text-white handle cursor-pointer mt-2"
+                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-linejoin="round"
+                  stroke-width="2"
+                  d="m8 15 4 4 4-4m0-6-4-4-4 4"
+                />
               </svg>
             </td>
-            <td class="px-3 w-48">
+            <td class="px-3 w-48 align-top group">
               <label for={author_roles_form[:author_id].id} class="hidden">Type</label>
               <.input field={author_roles_form[:author_id]} type="hidden" show_errors?={false} />
               <.selected_author
@@ -244,7 +268,7 @@ defmodule DecentralisedBookIndexWeb.BookLive.FormComponent do
                 class="mt-2 w-full"
               />
             </td>
-            <td class="px-3">
+            <td class="px-3 align-top group">
               <label for={author_roles_form[:role].id} class="hidden">Id</label>
               <.input field={author_roles_form[:role]} />
             </td>
@@ -257,8 +281,20 @@ defmodule DecentralisedBookIndexWeb.BookLive.FormComponent do
                 size="xs"
                 inverse
               >
-                <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+                <svg
-                  <path fill-rule="evenodd" d="M8.586 2.586A2 2 0 0 1 10 2h4a2 2 0 0 1 2 2v2h3a1 1 0 1 1 0 2v12a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V8a1 1 0 0 1 0-2h3V4a2 2 0 0 1 .586-1.414ZM10 6h4V4h-4v2Zm1 4a1 1 0 1 0-2 0v8a1 1 0 1 0 2 0v-8Zm4 0a1 1 0 1 0-2 0v8a1 1 0 1 0 2 0v-8Z" clip-rule="evenodd"/>
+                  class="w-6 h-6 text-gray-800 dark:text-white"
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  fill="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M8.586 2.586A2 2 0 0 1 10 2h4a2 2 0 0 1 2 2v2h3a1 1 0 1 1 0 2v12a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V8a1 1 0 0 1 0-2h3V4a2 2 0 0 1 .586-1.414ZM10 6h4V4h-4v2Zm1 4a1 1 0 1 0-2 0v8a1 1 0 1 0 2 0v-8Zm4 0a1 1 0 1 0-2 0v8a1 1 0 1 0 2 0v-8Z"
+                    clip-rule="evenodd"
+                  />
                 </svg>
               </.button_link>
             </td>

lib/decentralised_book_index_web/live/book_live/index.ex

@@ -30,19 +30,11 @@ defmodule DecentralisedBookIndexWeb.BookLive.Index do
     <% else %>
       <div class="flex flex-wrap flex-[3_1_auto]">
         <%= for book <- @page.results do %>
-          <.book_card
+          <.book_card book={book} current_user={@current_user} />
-            book={book}
-            current_user={@current_user}
-          />
         <% end %>
       </div>
 
-      <.pagination
+      <.pagination endpoint={~p"/books"} page={@page} page_params={@page_params} params={@params} />
-        endpoint={~p"/books"}
-        page={@page}
-        page_params={@page_params}
-        params={@params}
-      />
     <% end %>
 
     <.modal :if={@live_action in [:new, :edit]} id="book-modal" show on_cancel={JS.patch(~p"/books")}>

lib/decentralised_book_index_web/live/book_live/show.ex

@@ -33,11 +33,27 @@ defmodule DecentralisedBookIndexWeb.BookLive.Show do
 
     <div class="mb-4">
       <%= if @book.cover_image_url != nil do %>
-        <img class="w-36 shadow-lg mt-14 mx-auto object-cover" src={@book.cover_image_url} alt={"#{@book.title} image"}/>
+        <img
+          class="w-36 shadow-lg mt-14 mx-auto object-cover"
+          src={@book.cover_image_url}
+          alt={"#{@book.title} image"}
+        />
       <% else %>
         <div class="relative w-36 h-36 overflow-hidden mt-14 mx-auto">
-          <svg class="w-36 h-36 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+          <svg
-              <path fill-rule="evenodd" d="M6 2a2 2 0 0 0-2 2v15a3 3 0 0 0 3 3h12a1 1 0 1 0 0-2h-2v-2h2a1 1 0 0 0 1-1V4a2 2 0 0 0-2-2h-8v16h5v2H7a1 1 0 1 1 0-2h1V2H6Z" clip-rule="evenodd"/>
+            class="w-36 h-36 text-gray-800 dark:text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            fill="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M6 2a2 2 0 0 0-2 2v15a3 3 0 0 0 3 3h12a1 1 0 1 0 0-2h-2v-2h2a1 1 0 0 0 1-1V4a2 2 0 0 0-2-2h-8v16h5v2H7a1 1 0 1 1 0-2h1V2H6Z"
+              clip-rule="evenodd"
+            />
           </svg>
         </div>
       <% end %>
@@ -50,7 +66,9 @@ defmodule DecentralisedBookIndexWeb.BookLive.Show do
       </dl>
       <dl>
         <dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Publisher</dt>
-        <dd class="mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400">{@book.publisher.name}</dd>
+        <dd class="mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400">
+          {@book.publisher.name}
+        </dd>
       </dl>
       <dl>
         <dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Published</dt>
@@ -71,7 +89,9 @@ defmodule DecentralisedBookIndexWeb.BookLive.Show do
       <dl>
         <dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Identifiers</dt>
         <%= for bid <- @book.bids do %>
-          <dd class="mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400">{bid.type}: {bid.bid}</dd>
+          <dd class="mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400">
+            {bid.type}: {bid.bid}
+          </dd>
         <% end %>
       </dl>
       <%= if not is_nil(@book.dbi_server) do %>
@@ -96,10 +116,7 @@ defmodule DecentralisedBookIndexWeb.BookLive.Show do
       <h1 class="text-lg font-semibold leading-8 text-zinc-800 dark:text-white">Editions</h1>
       <div class="flex flex-wrap flex-[3_1_auto]">
         <%= for book <- @alternative_editions do %>
-          <.book_card
+          <.book_card book={book} current_user={@current_user} />
-            book={book}
-            current_user={@current_user}
-          />
         <% end %>
       </div>
     <% end %>

lib/decentralised_book_index_web/live/dbi_server_live/index.ex

@@ -73,12 +73,7 @@ defmodule DecentralisedBookIndexWeb.DbiServerLive.Index do
           </:action>
         </.table>
 
-        <.pagination
+        <.pagination endpoint={~p"/servers"} page={@page} page_params={@page_params} params={@params} />
-          endpoint={~p"/servers"}
-          page={@page}
-          page_params={@page_params}
-          params={@params}
-        />
       </div>
     <% end %>
     """
@@ -87,7 +82,10 @@ defmodule DecentralisedBookIndexWeb.DbiServerLive.Index do
   @impl true
   def mount(_params, _session, socket) do
     if connected?(socket) do
-      Phoenix.PubSub.subscribe(DecentralisedBookIndex.PubSub, DecentralisedBookIndex.SyncWorkerManual.topic())
+      Phoenix.PubSub.subscribe(
+        DecentralisedBookIndex.PubSub,
+        DecentralisedBookIndex.SyncWorkerManual.topic()
+      )
     end
 
     {:ok,

lib/decentralised_book_index_web/live/dbi_server_live/show.ex

@@ -27,7 +27,9 @@ defmodule DecentralisedBookIndexWeb.DbiServerLive.Show do
       </dl>
       <dl>
         <dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Sync on?</dt>
-        <dd class="mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400">{@dbi_server.sync_on?}</dd>
+        <dd class="mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400">
+          {@dbi_server.sync_on?}
+        </dd>
       </dl>
       <%= if not is_nil(@dbi_server.dbi_server) do %>
         <dl>
@@ -57,7 +59,10 @@ defmodule DecentralisedBookIndexWeb.DbiServerLive.Show do
      |> assign(:page_title, page_title(socket.assigns.live_action))
      |> assign(
        :dbi_server,
-       Ash.get!(DecentralisedBookIndex.Metadata.DBIServer, id, load: [:dbi_server], actor: socket.assigns.current_user)
+       Ash.get!(DecentralisedBookIndex.Metadata.DBIServer, id,
+         load: [:dbi_server],
+         actor: socket.assigns.current_user
+       )
      )}
   end
 

lib/decentralised_book_index_web/live/publisher_live/show.ex

@@ -57,7 +57,10 @@ defmodule DecentralisedBookIndexWeb.PublisherLive.Show do
      |> assign(:page_title, page_title(socket.assigns.live_action))
      |> assign(
        :publisher,
-       Ash.get!(DecentralisedBookIndex.Metadata.Publisher, id, load: [:dbi_server], actor: socket.assigns.current_user)
+       Ash.get!(DecentralisedBookIndex.Metadata.Publisher, id,
+         load: [:dbi_server],
+         actor: socket.assigns.current_user
+       )
      )}
   end
 

lib/decentralised_book_index_web/live/user_live/index.ex

@@ -30,11 +30,7 @@ defmodule DecentralisedBookIndexWeb.UserLive.Index do
       </div>
     <% else %>
       <div class="pt-2 flex flex-col gap-2">
-        <.table
+        <.table id="users" rows={@users} row_click={fn user -> JS.navigate(~p"/users/#{user}") end}>
-          id="users"
-          rows={@users}
-          row_click={fn user -> JS.navigate(~p"/users/#{user}") end}
-        >
           <:col :let={user} label="Email">{user.email}</:col>
 
           <:col :let={user} label="Role">{user.role}</:col>
@@ -48,12 +44,7 @@ defmodule DecentralisedBookIndexWeb.UserLive.Index do
           </:action>
         </.table>
 
-        <.pagination
+        <.pagination endpoint={~p"/servers"} page={@page} page_params={@page_params} params={@params} />
-          endpoint={~p"/servers"}
-          page={@page}
-          page_params={@page_params}
-          params={@params}
-        />
       </div>
     <% end %>
     """