feat: some refactoring to make shell_live smaller

lib/bds/desktop/shell_live/overlay_html/shell_overlay.html.heex

@@ -0,0 +1,219 @@
+<%= if @shell_overlay do %>
+  <%= case @shell_overlay.kind do %>
+    <% :ai_suggestions -> %>
+      <div class="shell-overlay-backdrop ai-suggestions-modal-backdrop" data-testid="shell-overlay-backdrop" phx-window-keydown="overlay_keydown">
+        <button class="shell-overlay-dismiss" type="button" phx-click="close_overlay" aria-label={translated("Cancel")}></button>
+        <div class="ai-suggestions-modal" role="dialog" aria-modal="true">
+          <div class="ai-suggestions-modal-header">
+            <h2><%= @shell_overlay.title %></h2>
+            <button class="ai-suggestions-modal-close" type="button" phx-click="close_overlay">×</button>
+          </div>
+          <div class="ai-suggestions-modal-body">
+            <div class="ai-suggestions-list">
+              <%= for field <- @shell_overlay.fields do %>
+                <div class="ai-suggestion-item">
+                  <label class="ai-suggestion-checkbox">
+                    <input
+                      type="checkbox"
+                      checked={field.accepted}
+                      disabled={field.locked}
+                      phx-click="overlay_toggle_ai_field"
+                      phx-value-key={field.key}
+                    />
+                    <span class="checkmark"></span>
+                  </label>
+                  <div class="ai-suggestion-content">
+                    <div class="ai-suggestion-label"><%= field.label %></div>
+                    <div class="ai-suggestion-current"><%= field.current_value %></div>
+                    <div class="ai-suggestion-value"><%= field.suggested_value %></div>
+                  </div>
+                </div>
+              <% end %>
+            </div>
+          </div>
+          <div class="ai-suggestions-modal-footer">
+            <button class="button-cancel" type="button" phx-click="close_overlay"><%= translated("Cancel") %></button>
+            <button class="button-apply" type="button" phx-click="overlay_confirm"><%= translated("Apply Selected") %></button>
+          </div>
+        </div>
+      </div>
+
+    <% :insert_link -> %>
+      <div class="shell-overlay-backdrop insert-modal-backdrop" data-testid="shell-overlay-backdrop" phx-window-keydown="overlay_keydown">
+        <button class="shell-overlay-dismiss" type="button" phx-click="close_overlay" aria-label={translated("Cancel")}></button>
+        <div class="insert-modal" role="dialog" aria-modal="true">
+          <div class="insert-modal-header">
+            <h2 class="insert-modal-title"><%= @shell_overlay.title %></h2>
+            <div class="insert-modal-tabs">
+              <button class={["insert-modal-tab", if(@shell_overlay.active_tab == :internal, do: "active")]} type="button" phx-click="overlay_set_tab" phx-value-tab="internal"><%= translated("Internal") %></button>
+              <button class={["insert-modal-tab", if(@shell_overlay.active_tab == :external, do: "active")]} type="button" phx-click="overlay_set_tab" phx-value-tab="external"><%= translated("External") %></button>
+            </div>
+          </div>
+
+          <%= if @shell_overlay.active_tab == :internal do %>
+            <form class="insert-modal-search" phx-change="overlay_set_search">
+              <input class="insert-modal-input" type="text" name="overlay[query]" value={@shell_overlay.search_query} placeholder={translated("sidebar.searchPostsPlaceholder")} />
+            </form>
+            <div class="insert-modal-results">
+              <%= for result <- if(String.length(@shell_overlay.search_query) >= 2, do: @shell_overlay.results, else: @shell_overlay.related_posts) do %>
+                <button class="insert-modal-result-item" type="button" phx-click="overlay_select_result" phx-value-id={result.post_id}>
+                  <div class="insert-modal-result-title"><%= result.title %></div>
+                  <div class="insert-modal-result-meta"><%= result.canonical_url %></div>
+                </button>
+              <% end %>
+              <%= if Enum.empty?(if(String.length(@shell_overlay.search_query) >= 2, do: @shell_overlay.results, else: @shell_overlay.related_posts)) do %>
+                <div class="insert-modal-status"><%= translated("No items") %></div>
+              <% end %>
+            </div>
+          <% else %>
+            <form class="insert-modal-external" phx-change="overlay_update_form">
+              <label class="insert-modal-field">
+                <span class="insert-modal-label"><%= translated("URL") %></span>
+                <input class="insert-modal-input" type="text" name="overlay[url]" value={@shell_overlay.external_url} />
+              </label>
+              <label class="insert-modal-field">
+                <span class="insert-modal-label"><%= translated("Display Text") %></span>
+                <input class="insert-modal-input" type="text" name="overlay[text]" value={@shell_overlay.external_text} />
+              </label>
+              <button class="insert-modal-submit" type="button" phx-click="overlay_insert_external"><%= translated("Insert") %></button>
+            </form>
+          <% end %>
+        </div>
+      </div>
+
+    <% :insert_media -> %>
+      <div class="shell-overlay-backdrop insert-modal-backdrop" data-testid="shell-overlay-backdrop" phx-window-keydown="overlay_keydown">
+        <button class="shell-overlay-dismiss" type="button" phx-click="close_overlay" aria-label={translated("Cancel")}></button>
+        <div class="insert-modal" role="dialog" aria-modal="true">
+          <div class="insert-modal-header">
+            <h2 class="insert-modal-title"><%= @shell_overlay.title %></h2>
+          </div>
+          <form class="insert-modal-search" phx-change="overlay_set_search">
+            <input class="insert-modal-input" type="text" name="overlay[query]" value={@shell_overlay.search_query} placeholder={translated("sidebar.searchMediaPlaceholder")} />
+          </form>
+          <div class="insert-modal-results insert-modal-media-grid">
+            <%= for result <- @shell_overlay.results do %>
+              <button class="insert-modal-media-item" type="button" phx-click="overlay_select_result" phx-value-id={result.media_id}>
+                <%= if result.thumbnail_url do %>
+                  <img class="insert-modal-media-thumb" src={result.thumbnail_url} alt="" loading="lazy" />
+                <% else %>
+                  <span class="insert-modal-media-fallback"><%= result.original_name %></span>
+                <% end %>
+                <span class="insert-modal-media-title"><%= result.title %></span>
+              </button>
+            <% end %>
+          </div>
+        </div>
+      </div>
+
+    <% :language_picker -> %>
+      <div class="shell-overlay-backdrop language-picker-modal-backdrop" data-testid="shell-overlay-backdrop" phx-window-keydown="overlay_keydown">
+        <button class="shell-overlay-dismiss" type="button" phx-click="close_overlay" aria-label={translated("Cancel")}></button>
+        <div class="language-picker-modal" role="dialog" aria-modal="true">
+          <div class="language-picker-modal-header">
+            <h2><%= @shell_overlay.title %></h2>
+            <button class="language-picker-modal-close" type="button" phx-click="close_overlay">×</button>
+          </div>
+          <div class="language-picker-modal-body">
+            <div class="language-picker-label"><%= translated("Available languages") %></div>
+            <div class="language-picker-options">
+              <%= for target <- @shell_overlay.available_targets do %>
+                <button class="language-picker-option" type="button" phx-click="overlay_select_language" phx-value-code={target.code}>
+                  <span class="language-picker-flag"><%= target.flag_emoji %></span>
+                  <span class="language-picker-name"><%= target.name %></span>
+                  <%= if target.has_existing_translation do %>
+                    <span class="language-picker-status"><%= target.existing_status %></span>
+                  <% end %>
+                </button>
+              <% end %>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    <% :confirm_delete -> %>
+      <div class="shell-overlay-backdrop confirm-delete-modal-backdrop" data-testid="shell-overlay-backdrop" phx-window-keydown="overlay_keydown">
+        <button class="shell-overlay-dismiss" type="button" phx-click="close_overlay" aria-label={translated("Cancel")}></button>
+        <div class="confirm-delete-modal" role="dialog" aria-modal="true">
+          <div class="confirm-delete-modal-header">
+            <h2><%= @shell_overlay.title %></h2>
+            <button class="confirm-delete-modal-close" type="button" phx-click="close_overlay">×</button>
+          </div>
+          <div class="confirm-delete-modal-body">
+            <div class="confirm-delete-message"><strong><%= @shell_overlay.entity_name %></strong></div>
+            <%= if @shell_overlay.reference_count > 0 do %>
+              <div class="confirm-delete-warning">
+                <div class="warning-content">
+                  <strong><%= translated("This item is referenced by:") %></strong>
+                  <ul class="reference-list">
+                    <%= for title <- @shell_overlay.reference_list do %>
+                      <li><span class="reference-title"><%= title %></span></li>
+                    <% end %>
+                  </ul>
+                </div>
+              </div>
+            <% end %>
+          </div>
+          <div class="confirm-delete-modal-footer">
+            <button class="button-cancel" type="button" phx-click="close_overlay"><%= translated("Cancel") %></button>
+            <button class="button-delete" type="button" phx-click="overlay_confirm"><%= translated("Delete") %></button>
+          </div>
+        </div>
+      </div>
+
+    <% :confirm_dialog -> %>
+      <div class="shell-overlay-backdrop confirm-delete-modal-backdrop" data-testid="shell-overlay-backdrop" phx-window-keydown="overlay_keydown">
+        <button class="shell-overlay-dismiss" type="button" phx-click="close_overlay" aria-label={translated("Cancel")}></button>
+        <div class="confirm-delete-modal" role="dialog" aria-modal="true">
+          <div class="confirm-delete-modal-header">
+            <h2><%= @shell_overlay.title %></h2>
+            <button class="confirm-delete-modal-close" type="button" phx-click="close_overlay">×</button>
+          </div>
+          <div class="confirm-delete-modal-body">
+            <div class="confirm-delete-message"><%= @shell_overlay.message %></div>
+          </div>
+          <div class="confirm-delete-modal-footer">
+            <button class="button-cancel" type="button" phx-click="close_overlay"><%= translated("Cancel") %></button>
+            <button class="button-apply" type="button" phx-click="overlay_confirm"><%= translated("Confirm") %></button>
+          </div>
+        </div>
+      </div>
+
+    <% :gallery -> %>
+      <div class="shell-overlay-backdrop gallery-overlay-backdrop" data-testid="shell-overlay-backdrop" phx-window-keydown="overlay_keydown">
+        <button class="shell-overlay-dismiss" type="button" phx-click="close_overlay" aria-label={translated("Cancel")}></button>
+        <div class="gallery-overlay" role="dialog" aria-modal="true">
+          <div class="gallery-overlay-header">
+            <h2><%= translated("Gallery") %></h2>
+            <button class="gallery-overlay-close" type="button" phx-click="close_overlay">×</button>
+          </div>
+          <div class="gallery-overlay-grid">
+            <%= for image <- @shell_overlay.images do %>
+              <button class="gallery-overlay-item" type="button" phx-click="overlay_select_gallery_image" phx-value-id={image.media_id}>
+                <img src={image.thumbnail_url} alt={image.alt_text || ""} loading="lazy" />
+              </button>
+            <% end %>
+          </div>
+        </div>
+
+        <%= if @shell_overlay.lightbox do %>
+          <div class="lightbox-overlay">
+            <button class="shell-overlay-dismiss" type="button" phx-click="overlay_close_lightbox" aria-label={translated("Cancel")}></button>
+            <div class="lightbox-container">
+              <button class="lightbox-close" type="button" phx-click="overlay_close_lightbox">×</button>
+              <%= if @shell_overlay.lightbox.total_count > 1 do %>
+                <button class="lightbox-nav lightbox-prev" type="button" phx-click="overlay_lightbox_previous">‹</button>
+              <% end %>
+              <img class="lightbox-image" src={@shell_overlay.lightbox.image_url} alt={@shell_overlay.lightbox.alt_text || ""} />
+              <%= if @shell_overlay.lightbox.total_count > 1 do %>
+                <button class="lightbox-nav lightbox-next" type="button" phx-click="overlay_lightbox_next">›</button>
+                <div class="lightbox-counter"><%= @shell_overlay.lightbox.position %>/<%= @shell_overlay.lightbox.total_count %></div>
+              <% end %>
+            </div>
+          </div>
+        <% end %>
+      </div>
+
+    <% _other -> %>
+  <% end %>
+<% end %>