[Enhancement] Add "Copy JSON" action button to help when troubleshooting (#224)

* [WIP] [skip ci]

* Added 'copy JSON' button to all dropdowns; hopefully fixed some CSS silliness

assets/js/alpine_helpers.js

@@ -22,6 +22,12 @@ window.copyTextToClipboard = async (text) => {
   }
 }
 
+window.copyWithCallbacks = async (text, onCopy, onAfterDelay, delay = 4000) => {
+  await window.copyTextToClipboard(text)
+  onCopy()
+  setTimeout(onAfterDelay, delay)
+}
+
 window.markVersionAsSeen = (versionString) => {
   localStorage.setItem('seenVersion', versionString)
 }

lib/pinchflat_web/controllers/media_items/media_item_html/actions_dropdown.html.heex

@@ -1,4 +1,19 @@
 <.button_dropdown text="Actions" class="justify-center w-full sm:w-50">
+  <:option>
+    <span x-data="{ copied: false }" x-on:click={~s"
+        copyWithCallbacks(
+          `#{Jason.Formatter.pretty_print(Phoenix.json_library().encode!(@media_item))}`, 
+          () => copied = true, 
+          () => copied = false
+        )
+      "}>
+      Copy JSON
+      <span x-show="copied" x-transition.duration.150ms><.icon name="hero-check" class="ml-2 h-4 w-4" /></span>
+    </span>
+  </:option>
+  <:option>
+    <div class="h-px w-full bg-bodydark2"></div>
+  </:option>
   <:option>
     <.link
       href={~p"/sources/#{@media_item.source_id}/media/#{@media_item}/force_download"}

lib/pinchflat_web/controllers/media_items/media_item_html/edit.html.heex

@@ -5,7 +5,7 @@
 </div>
 
 <div class="rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
-  <div class="max-w-full overflow-x-auto">
+  <div class="max-w-full">
     <div class="flex flex-col gap-10">
       <.media_item_form changeset={@changeset} action={~p"/sources/#{@media_item.source_id}/media/#{@media_item}"} />
     </div>

lib/pinchflat_web/controllers/media_items/media_item_html/show.html.heex

@@ -17,7 +17,7 @@
   </nav>
 </div>
 <div class="rounded-sm border border-stroke bg-white py-5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark px-7.5">
-  <div class="max-w-full overflow-x-auto">
+  <div class="max-w-full">
     <.tabbed_layout>
       <:tab_append>
         <.actions_dropdown media_item={@media_item} />

lib/pinchflat_web/controllers/media_profiles/media_profile_html/actions_dropdown.html.heex

@@ -0,0 +1,36 @@
+<.button_dropdown text="Actions" class="justify-center w-full sm:w-50">
+  <:option>
+    <span x-data="{ copied: false }" x-on:click={~s"
+        copyWithCallbacks(
+          `#{Jason.Formatter.pretty_print(Phoenix.json_library().encode!(@media_profile))}`, 
+          () => copied = true, 
+          () => copied = false
+        )
+      "}>
+      Copy JSON
+      <span x-show="copied" x-transition.duration.150ms><.icon name="hero-check" class="ml-2 h-4 w-4" /></span>
+    </span>
+  </:option>
+  <:option>
+    <div class="h-px w-full bg-bodydark2"></div>
+  </:option>
+  <:option>
+    <.link
+      href={~p"/media_profiles/#{@media_profile}"}
+      method="delete"
+      data-confirm="Are you sure you want to delete this profile and all its sources (leaving files in place)? This cannot be undone."
+    >
+      Delete Profile
+    </.link>
+  </:option>
+  <:option>
+    <.link
+      href={~p"/media_profiles/#{@media_profile}?delete_files=true"}
+      method="delete"
+      data-confirm="Are you sure you want to delete this profile, all its sources, and its files on disk? This cannot be undone."
+      class="mt-5 md:mt-0"
+    >
+      Delete Profile + Files
+    </.link>
+  </:option>
+</.button_dropdown>

lib/pinchflat_web/controllers/media_profiles/media_profile_html/edit.html.heex

@@ -8,7 +8,7 @@
 </div>
 
 <div class="rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
-  <div class="max-w-full overflow-x-auto">
+  <div class="max-w-full">
     <div class="flex flex-col gap-10">
       <.media_profile_form changeset={@changeset} action={~p"/media_profiles/#{@media_profile}"} />
     </div>

lib/pinchflat_web/controllers/media_profiles/media_profile_html/new.html.heex

@@ -6,7 +6,7 @@
 </div>
 
 <div class="rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
-  <div class="max-w-full overflow-x-auto">
+  <div class="max-w-full">
     <div class="flex flex-col gap-10">
       <.media_profile_form changeset={@changeset} action={~p"/media_profiles"} />
     </div>

lib/pinchflat_web/controllers/media_profiles/media_profile_html/show.html.heex

@@ -17,30 +17,10 @@
   </nav>
 </div>
 <div class="rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
-  <div class="max-w-full overflow-x-auto">
+  <div class="max-w-full">
     <.tabbed_layout>
       <:tab_append>
-        <.button_dropdown text="Actions" class="justify-center w-full sm:w-50">
+        <.actions_dropdown media_profile={@media_profile} />
-          <:option>
-            <.link
-              href={~p"/media_profiles/#{@media_profile}"}
-              method="delete"
-              data-confirm="Are you sure you want to delete this profile and all its sources (leaving files in place)? This cannot be undone."
-            >
-              Delete Profile
-            </.link>
-          </:option>
-          <:option>
-            <.link
-              href={~p"/media_profiles/#{@media_profile}?delete_files=true"}
-              method="delete"
-              data-confirm="Are you sure you want to delete this profile, all its sources, and its files on disk? This cannot be undone."
-              class="mt-5 md:mt-0"
-            >
-              Delete Profile + Files
-            </.link>
-          </:option>
-        </.button_dropdown>
       </:tab_append>
 
       <:tab title="Media Profile">

lib/pinchflat_web/controllers/searches/search_html/show.html.heex

@@ -5,7 +5,7 @@
 </div>
 
 <div class="rounded-sm border border-stroke bg-white px-5 py-5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5">
-  <div class="max-w-full overflow-x-auto">
+  <div class="max-w-full">
     <div class="flex flex-col gap-10 dark:text-white">
       <%= if match?([_|_], @search_results) do %>
         <.table rows={@search_results} table_class="text-black dark:text-white">

lib/pinchflat_web/controllers/settings/setting_html/setting_form.html.heex

@@ -3,7 +3,7 @@
     Oops, something went wrong! Please check the errors below.
   </.error>
 
-  <h3 class="mt-8 text-2xl text-black dark:text-white">
+  <h3 class="mt-2 md:mt-8 text-2xl text-black dark:text-white">
     Notification Settings
   </h3>
 
@@ -17,5 +17,5 @@
     placeholder="https://discordapp.com/api/webhooks/{WebhookID}/{WebhookToken}"
   />
 
-  <.button class="my-10 sm:mb-7.5 w-full sm:w-auto" rounding="rounded-lg">Save Settings</.button>
+  <.button class="mt-10 mb-4 sm:mb-8 w-full sm:w-auto" rounding="rounded-lg">Save Settings</.button>
 </.simple_form>

lib/pinchflat_web/controllers/settings/setting_html/show.html.heex

@@ -6,7 +6,7 @@
   </div>
 </div>
 <div class="rounded-sm border border-stroke bg-white px-5 py-5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5">
-  <div class="max-w-full overflow-x-auto">
+  <div class="max-w-full">
     <.setting_form changeset={@changeset} action={~p"/settings"} />
   </div>
 </div>

lib/pinchflat_web/controllers/sources/source_html/actions_dropdown.html.heex

@@ -3,15 +3,32 @@
     <span
       x-data="{ copied: false }"
       x-on:click={"
-                window.copyTextToClipboard('#{rss_feed_url(@conn, @source)}')
+        copyWithCallbacks(
-                copied = true
+          '#{rss_feed_url(@conn, @source)}', 
-                setTimeout(() => copied = false, 4000)
+          () => copied = true, 
-              "}
+          () => copied = false
+        )
+      "}
     >
       Copy RSS Feed
       <span x-show="copied" x-transition.duration.150ms><.icon name="hero-check" class="ml-2 h-4 w-4" /></span>
     </span>
   </:option>
+  <:option>
+    <span x-data="{ copied: false }" x-on:click={~s"
+        copyWithCallbacks(
+          `#{Jason.Formatter.pretty_print(Phoenix.json_library().encode!(@source))}`, 
+          () => copied = true, 
+          () => copied = false
+        )
+      "}>
+      Copy JSON
+      <span x-show="copied" x-transition.duration.150ms><.icon name="hero-check" class="ml-2 h-4 w-4" /></span>
+    </span>
+  </:option>
+  <:option>
+    <div class="h-px w-full bg-bodydark2"></div>
+  </:option>
   <:option :if={@source.download_media}>
     <.link
       href={~p"/sources/#{@source}/force_download"}

lib/pinchflat_web/controllers/sources/source_html/edit.html.heex

@@ -8,7 +8,7 @@
 </div>
 
 <div class="rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
-  <div class="max-w-full overflow-x-auto">
+  <div class="max-w-full">
     <div class="flex flex-col gap-10">
       <.source_form changeset={@changeset} media_profiles={@media_profiles} action={~p"/sources/#{@source}"} />
     </div>

lib/pinchflat_web/controllers/sources/source_html/new.html.heex

@@ -6,7 +6,7 @@
 </div>
 
 <div class="rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
-  <div class="max-w-full overflow-x-auto">
+  <div class="max-w-full">
     <div class="flex flex-col gap-10">
       <.source_form changeset={@changeset} media_profiles={@media_profiles} action={~p"/sources"} />
     </div>

lib/pinchflat_web/controllers/sources/source_html/show.html.heex

@@ -17,7 +17,7 @@
   </nav>
 </div>
 <div class="rounded-sm border border-stroke bg-white px-5 py-5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5">
-  <div class="max-w-full overflow-x-auto">
+  <div class="max-w-full">
     <.tabbed_layout>
       <:tab_append>
         <.actions_dropdown source={@source} conn={@conn} />