Show record ID on wishlist and collection detail pages

This commit is contained in:
Claudio Ortolina
2025-01-27 23:29:01 +00:00
parent 59371ba7be
commit 97eb01f6a6
4 changed files with 68 additions and 15 deletions
@@ -140,6 +140,26 @@
<div>
<%!-- TODO: replace with OSS version --%>
<dl class="divide-y divide-zinc-100 dark:divide-slate-300/30">
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
{gettext("ID")}
</dt>
<dd class="mt-1 text-sm flex justify-between leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
<code id={"record-#{@record.id}"}>{@record.id}</code>
<button phx-click={
JS.dispatch("music_library:clipcopy", to: "#record-" <> @record.id)
|> JS.transition("animate-shake")
}>
<span class="sr-only">{gettext("Copy record ID to clipboard")}</span>
<.icon
name="hero-clipboard-document"
class="-mt-1 h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
</button>
</dd>
</div>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
{gettext("Genres")}
@@ -158,6 +158,26 @@
<div>
<%!-- TODO: replace with OSS version --%>
<dl class="mt-4 divide-y divide-zinc-100 dark:divide-slate-300/30">
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
{gettext("ID")}
</dt>
<dd class="mt-1 text-sm flex justify-between leading-6 text-zinc-700 dark:text-zinc-300 sm:col-span-2 sm:mt-0">
<code id={"record-#{@record.id}"}>{@record.id}</code>
<button phx-click={
JS.dispatch("music_library:clipcopy", to: "#record-" <> @record.id)
|> JS.transition("animate-shake")
}>
<span class="sr-only">{gettext("Copy record ID to clipboard")}</span>
<.icon
name="hero-clipboard-document"
class="-mt-1 h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
</button>
</dd>
</div>
<div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt class="text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
{gettext("Genres")}