Display size for image search previews

lib/brave_search/api.ex

@@ -20,6 +20,8 @@ defmodule BraveSearch.API do
             %{
               thumbnail_url: get_in(result, ["thumbnail", "src"]),
               image_url: get_in(result, ["properties", "url"]),
+              width: get_in(result, ["properties", "width"]),
+              height: get_in(result, ["properties", "height"]),
               title: Map.get(result, "title", ""),
               source: Map.get(result, "source", "")
             }

lib/music_library_web/components/record_form.ex

@@ -365,6 +365,16 @@ defmodule MusicLibraryWeb.Components.RecordForm do
                 class="aspect-square w-full object-cover"
                 loading="lazy"
               />
+              <span
+                :if={result.width && result.height}
+                class={[
+                  "absolute bottom-0 inset-x-0",
+                  "bg-black/60 text-white text-xs text-center",
+                  "py-0.5"
+                ]}
+              >
+                {result.width}&times;{result.height}
+              </span>
             </button>
           </div>
         </div>

test/brave_search/api_test.exs

@@ -19,7 +19,11 @@ defmodule BraveSearch.APITest do
           "results" => [
             %{
               "thumbnail" => %{"src" => "https://example.com/thumb.jpg"},
-              "properties" => %{"url" => "https://example.com/full.jpg"},
+              "properties" => %{
+                "url" => "https://example.com/full.jpg",
+                "width" => 800,
+                "height" => 600
+              },
               "title" => "Test Image",
               "source" => "example.com"
             }
@@ -32,6 +36,8 @@ defmodule BraveSearch.APITest do
       assert {:ok, [result]} = API.search_images("test query", [], @config)
       assert result.thumbnail_url == "https://example.com/thumb.jpg"
       assert result.image_url == "https://example.com/full.jpg"
+      assert result.width == 800
+      assert result.height == 600
       assert result.title == "Test Image"
       assert result.source == "example.com"
     end