diff --git a/lib/bds/desktop/shell_live/media_editor_html/media_editor.html.heex b/lib/bds/desktop/shell_live/media_editor_html/media_editor.html.heex
index 19881c3..455eed8 100644
--- a/lib/bds/desktop/shell_live/media_editor_html/media_editor.html.heex
+++ b/lib/bds/desktop/shell_live/media_editor_html/media_editor.html.heex
@@ -25,7 +25,8 @@
phx-click="toggle_media_editor_quick_actions"
phx-value-id={@media_editor.id}
>
- <%= translated("Quick Actions") %>
+ ⚡
+ <%= translated("Quick Actions") %>
<%= if @media_editor.quick_actions_open? do %>
@@ -38,11 +39,11 @@
phx-click="open_overlay"
phx-value-kind="ai_suggestions"
>
- 🤖
<%= translated("AI Suggestions") %>
<%= translated("Review title, alt text, and caption suggestions") %>
+ 🤖
@@ -55,11 +56,11 @@
phx-value-id={@media_editor.id}
disabled={not @media_editor.can_detect_language?}
>
- 🔍
<%= translated("Detect Language") %>
<%= translated("Persist the detected language for this media item") %>
+ 🔍
@@ -72,11 +73,11 @@
phx-value-kind="language_picker"
disabled={not @media_editor.can_translate?}
>
- 🌍
<%= translated("Translate") %>
<%= translated("Select a target language for this media item") %>
+ 🌍
<% end %>
diff --git a/priv/ui/app.css b/priv/ui/app.css
index 035a290..670dbf3 100644
--- a/priv/ui/app.css
+++ b/priv/ui/app.css
@@ -2674,6 +2674,87 @@ button svg * {
font-style: italic;
}
+[data-testid="media-editor"] .quick-actions-wrapper {
+ position: relative;
+}
+
+[data-testid="media-editor"] .quick-actions-btn {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+}
+
+[data-testid="media-editor"] .quick-actions-btn-icon {
+ font-size: 12px;
+ line-height: 1;
+}
+
+[data-testid="media-editor"] .quick-actions-menu {
+ position: absolute;
+ top: calc(100% + 4px);
+ right: 0;
+ width: 280px;
+ background: var(--vscode-dropdown-background, #252526);
+ border: 1px solid var(--vscode-dropdown-border, #454545);
+ border-radius: 6px;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+ overflow: hidden;
+ z-index: 30;
+}
+
+[data-testid="media-editor"] .quick-actions-divider {
+ height: 1px;
+ background: var(--vscode-dropdown-border, #454545);
+}
+
+[data-testid="media-editor"] .quick-action-item {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: 10px;
+ width: 100%;
+ padding: 10px 12px;
+ background: none;
+ border: none;
+ color: var(--vscode-dropdown-foreground, #ccc);
+ cursor: pointer;
+ text-align: left;
+ transition: background 0.1s;
+}
+
+[data-testid="media-editor"] .quick-action-item:hover:not(:disabled) {
+ background: var(--vscode-list-hoverBackground, #2a2d2e);
+}
+
+[data-testid="media-editor"] .quick-action-item:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+[data-testid="media-editor"] .quick-action-icon {
+ font-size: 16px;
+ flex-shrink: 0;
+ margin-top: 2px;
+}
+
+[data-testid="media-editor"] .quick-action-text {
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ gap: 2px;
+ min-width: 0;
+}
+
+[data-testid="media-editor"] .quick-action-text strong {
+ font-size: 13px;
+ font-weight: 500;
+}
+
+[data-testid="media-editor"] .quick-action-text small {
+ font-size: 11px;
+ opacity: 0.7;
+}
+
[data-testid="media-editor"] .editor-content {
flex: 1;
display: flex;
@@ -2742,6 +2823,7 @@ button svg * {
background-color: var(--vscode-input-background);
border-radius: 8px;
min-height: 300px;
+ overflow: hidden;
}
[data-testid="media-editor"] .media-preview-placeholder {
@@ -2753,17 +2835,20 @@ button svg * {
}
[data-testid="media-editor"] .media-preview-image {
- max-width: 100%;
- max-height: 100%;
display: flex;
align-items: center;
justify-content: center;
+ align-self: stretch;
+ width: 100%;
+ height: 100%;
+ min-height: 0;
padding: 16px;
+ box-sizing: border-box;
}
[data-testid="media-editor"] .media-preview-image img {
- max-width: 100%;
- max-height: 100%;
+ width: 100%;
+ height: 100%;
object-fit: contain;
border-radius: 4px;
}
diff --git a/test/bds/ui/shell_test.exs b/test/bds/ui/shell_test.exs
index e3596b2..6d60d08 100644
--- a/test/bds/ui/shell_test.exs
+++ b/test/bds/ui/shell_test.exs
@@ -220,9 +220,16 @@ defmodule BDS.UI.ShellTest do
test "desktop shell css keeps the old media editor layout contract" do
css = File.read!("/Users/gb/Projects/bDS2/priv/ui/app.css")
+ template = File.read!("/Users/gb/Projects/bDS2/lib/bds/desktop/shell_live/media_editor_html/media_editor.html.heex")
assert css =~ ".media-preview {"
assert css =~ "min-height: 300px;"
+ assert css =~ ".media-preview-image {"
+ assert css =~ "width: 100%;"
+ assert css =~ "height: 100%;"
+ assert css =~ "box-sizing: border-box;"
+ assert css =~ ".media-preview-image img {"
+ assert css =~ "object-fit: contain;"
assert css =~ ".media-details {"
assert css =~ "width: 320px;"
assert css =~ ".media-details textarea {"
@@ -237,6 +244,12 @@ defmodule BDS.UI.ShellTest do
assert css =~ "padding: 6px 10px;"
assert css =~ ".linked-post-item:hover .unlink-btn {"
assert css =~ "opacity: 1;"
+ assert Regex.match?(~r/class="secondary quick-actions-btn".*?⚡<\/span>\s*<%= translated\("Quick Actions"\) %><\/span>/s, template)
+ assert template =~ ~s(class="quick-action-text")
+ assert template =~ ~s(class="quick-action-icon">🤖)
+ assert Regex.match?(~r/class="quick-action-text">\s*<%= translated\("AI Suggestions"\) %><\/strong>.*?<\/span>\s*🤖<\/span>/s, template)
+ refute template =~ ~s|🤖
+ |
end
test "desktop shell status task area keeps the compact running-task markup" do