feat: add dark mode support, accordion UI, and current combination display

- Update Theme Studio sidebar to use DaisyUI theme-aware classes for dark mode
- Convert Customise accordion to native details/summary elements for proper interaction
- Add "Current combination" card showing active theme settings
- Add SVG recolorer for logo color customization
- Add image controller for serving uploaded images
- Implement header background image controls (zoom, position)
- Add toggle_customise event handler to preserve accordion state across re-renders

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2025-12-31 18:55:44 +00:00
parent 0dada968aa
commit 1ca703e548
20 changed files with 1477 additions and 318 deletions

View File

@@ -0,0 +1,124 @@
defmodule SimpleshopThemeWeb.ImageControllerTest do
use SimpleshopThemeWeb.ConnCase
alias SimpleshopTheme.Media
@png_binary <<137, 80, 78, 71, 13, 10, 26, 10>>
@svg_content ~s(<svg xmlns="http://www.w3.org/2000/svg"><circle fill="#000000" r="10"/></svg>)
describe "show/2" do
test "returns 404 for non-existent image", %{conn: conn} do
conn = get(conn, ~p"/images/#{Ecto.UUID.generate()}")
assert response(conn, 404) =~ "Image not found"
end
test "serves image with proper content type and caching headers", %{conn: conn} do
{:ok, image} =
Media.upload_image(%{
image_type: "logo",
filename: "test.png",
content_type: "image/png",
file_size: byte_size(@png_binary),
data: @png_binary
})
conn = get(conn, ~p"/images/#{image.id}")
assert response(conn, 200) == @png_binary
assert get_resp_header(conn, "content-type") == ["image/png; charset=utf-8"]
assert get_resp_header(conn, "cache-control") == ["public, max-age=31536000, immutable"]
assert get_resp_header(conn, "etag") == [~s("#{image.id}")]
end
end
describe "thumbnail/2" do
test "returns 404 for non-existent image", %{conn: conn} do
conn = get(conn, ~p"/images/#{Ecto.UUID.generate()}/thumbnail")
assert response(conn, 404) =~ "Image not found"
end
test "falls back to full image when no thumbnail available", %{conn: conn} do
{:ok, image} =
Media.upload_image(%{
image_type: "logo",
filename: "test.png",
content_type: "image/png",
file_size: byte_size(@png_binary),
data: @png_binary
})
conn = get(conn, ~p"/images/#{image.id}/thumbnail")
assert response(conn, 200) == @png_binary
assert get_resp_header(conn, "content-type") == ["image/png; charset=utf-8"]
end
end
describe "recolored_svg/2" do
test "returns 404 for non-existent image", %{conn: conn} do
conn = get(conn, ~p"/images/#{Ecto.UUID.generate()}/recolored/ff6600")
assert response(conn, 404) =~ "Image not found"
end
test "returns 400 for non-SVG image", %{conn: conn} do
{:ok, image} =
Media.upload_image(%{
image_type: "logo",
filename: "test.png",
content_type: "image/png",
file_size: byte_size(@png_binary),
data: @png_binary
})
conn = get(conn, ~p"/images/#{image.id}/recolored/ff6600")
assert response(conn, 400) =~ "not an SVG"
end
test "returns 400 for invalid color", %{conn: conn} do
{:ok, image} =
Media.upload_image(%{
image_type: "logo",
filename: "test.svg",
content_type: "image/svg+xml",
file_size: byte_size(@svg_content),
data: @svg_content
})
conn = get(conn, ~p"/images/#{image.id}/recolored/invalid")
assert response(conn, 400) =~ "Invalid color"
end
test "recolors SVG with valid hex color", %{conn: conn} do
{:ok, image} =
Media.upload_image(%{
image_type: "logo",
filename: "test.svg",
content_type: "image/svg+xml",
file_size: byte_size(@svg_content),
data: @svg_content
})
conn = get(conn, ~p"/images/#{image.id}/recolored/ff6600")
assert response(conn, 200) =~ ~s(fill="#ff6600")
assert get_resp_header(conn, "content-type") == ["image/svg+xml; charset=utf-8"]
assert get_resp_header(conn, "cache-control") == ["public, max-age=3600"]
end
test "handles color with leading hash", %{conn: conn} do
{:ok, image} =
Media.upload_image(%{
image_type: "logo",
filename: "test.svg",
content_type: "image/svg+xml",
file_size: byte_size(@svg_content),
data: @svg_content
})
# URL encodes # as %23
conn = get(conn, "/images/#{image.id}/recolored/%23ff6600")
assert response(conn, 200) =~ ~s(fill="#ff6600")
end
end
end