Add notes to artists

lib/music_library_web/live/artist_live/show.html.heex

@@ -6,56 +6,70 @@
         <.country_flag country={@country} />
       </h1>
 
-      <.dropdown id={"actions-#{@artist.musicbrainz_id}"} placement="bottom-end">
-        <:toggle>
-          <span class="sr-only">{gettext("Actions")}</span>
+      <div class="flex items-center">
+        <button
+          class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300"
+          phx-click={MusicLibraryWeb.NotesComponent.open("artist-notes-sheet")}
+        >
+          <span class="sr-only">{gettext("Open Notes")}</span>
           <.icon
-            name="hero-ellipsis-vertical"
-            class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
+            name="hero-pencil-square"
+            class="-mt-1 h-5 w-5"
             aria-hidden="true"
             data-slot="icon"
           />
-        </:toggle>
-        <.focus_wrap id={"actions-#{@artist.musicbrainz_id}-focus-wrap"}>
-          <.dropdown_link
-            id={"actions-#{@artist.musicbrainz_id}-edit"}
-            patch={~p"/artists/#{@artist.musicbrainz_id}/edit"}
-          >
+        </button>
+        <.dropdown id={"actions-#{@artist.musicbrainz_id}"} placement="bottom-end">
+          <:toggle>
+            <span class="sr-only">{gettext("Actions")}</span>
             <.icon
-              name="hero-pencil-square"
-              class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
+              name="hero-ellipsis-vertical"
+              class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
               aria-hidden="true"
               data-slot="icon"
             />
-            {gettext("Edit")}
-          </.dropdown_link>
-          <.dropdown_link
-            id={"actions-#{@artist.musicbrainz_id}-refresh-image"}
-            phx-click={JS.push("refresh_artist_image", value: %{id: @artist.musicbrainz_id})}
-          >
-            <.icon
-              name="hero-photo"
-              class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
-              aria-hidden="true"
-              data-slot="icon"
-            />
-            {gettext("Refresh image")}
-          </.dropdown_link>
+          </:toggle>
+          <.focus_wrap id={"actions-#{@artist.musicbrainz_id}-focus-wrap"}>
+            <.dropdown_link
+              id={"actions-#{@artist.musicbrainz_id}-edit"}
+              patch={~p"/artists/#{@artist.musicbrainz_id}/edit"}
+            >
+              <.icon
+                name="hero-pencil-square"
+                class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
+                aria-hidden="true"
+                data-slot="icon"
+              />
+              {gettext("Edit")}
+            </.dropdown_link>
+            <.dropdown_link
+              id={"actions-#{@artist.musicbrainz_id}-refresh-image"}
+              phx-click={JS.push("refresh_artist_image", value: %{id: @artist.musicbrainz_id})}
+            >
+              <.icon
+                name="hero-photo"
+                class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
+                aria-hidden="true"
+                data-slot="icon"
+              />
+              {gettext("Refresh image")}
+            </.dropdown_link>
 
-          <.dropdown_link
-            id={"actions-#{@artist.musicbrainz_id}-refresh-artist-info"}
-            phx-click={JS.push("refresh_artist_info", value: %{id: @artist.musicbrainz_id})}
-          >
-            <.icon
-              name="hero-arrow-path"
-              class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
-              aria-hidden="true"
-              data-slot="icon"
-            />
-            {gettext("Refresh info")}
-          </.dropdown_link>
-        </.focus_wrap>
-      </.dropdown>
+            <.dropdown_link
+              id={"actions-#{@artist.musicbrainz_id}-refresh-artist-info"}
+              phx-click={JS.push("refresh_artist_info", value: %{id: @artist.musicbrainz_id})}
+            >
+              <.icon
+                name="hero-arrow-path"
+                class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
+                aria-hidden="true"
+                data-slot="icon"
+              />
+              {gettext("Refresh info")}
+            </.dropdown_link>
+          </.focus_wrap>
+        </.dropdown>
+      </div>
     </div>
 
     <div class="mt-4 flex items-center justify-between">
@@ -233,6 +247,14 @@
   />
 </.structured_modal>
 
+<.live_component
+  id="artist-notes"
+  sheet_id="artist-notes-sheet"
+  module={MusicLibraryWeb.NotesComponent}
+  entity={:artist}
+  musicbrainz_id={@artist.musicbrainz_id}
+/>
+
 <.structured_modal
   :if={@live_action == :edit}
   id="artist-info-modal"

priv/gettext/default.pot

@@ -1314,6 +1314,7 @@ msgstr ""
 msgid "No records released on this day."
 msgstr ""
 
+#: lib/music_library_web/live/artist_live/show.html.heex
 #: lib/music_library_web/live/collection_live/show.html.heex
 #, elixir-autogen, elixir-format
 msgid "Open Notes"

priv/gettext/en/LC_MESSAGES/default.po

@@ -1314,6 +1314,7 @@ msgstr ""
 msgid "No records released on this day."
 msgstr ""
 
+#: lib/music_library_web/live/artist_live/show.html.heex
 #: lib/music_library_web/live/collection_live/show.html.heex
 #, elixir-autogen, elixir-format
 msgid "Open Notes"