Unify provider and account card UI and move setup actions to menus (#755)

* feat: add auto-open functionality for collapsible sections and streamline unlinked account handling

- Introduce `auto-open` Stimulus controller to auto-expand <details> elements based on URL params.
- Update all settings sections and panels to support the new `auto_open_param` for seamless navigation.
- Improve unlinked account logic for Coinbase, SimpleFIN, and SnapTrade, ensuring consistent and optimized handling.
- Refactor sync warnings and badges for better readability and user experience.
- Extend localization for additional menu items, warnings, and setup prompts.

* fix: improve error handling and safe HTML usage in Coinbase and settings components

- Log warning for unhandled exceptions in Coinbase unlinked account count fallback.
- Escape `auto_open_param` in settings section for safe HTML injection.
- Clean up URL params in `auto-open` controller after auto-expansion.

---------

Co-authored-by: luckyPipewrench <luckypipewrench@proton.me>

app/views/settings/_section.html.erb

@@ -1,6 +1,8 @@
-<%# locals: (title:, subtitle: nil, content:, collapsible: false, open: true) %>
+<%# locals: (title:, subtitle: nil, content:, collapsible: false, open: true, auto_open_param: nil) %>
 <% if collapsible %>
-  <details <%= "open" if open %> class="group bg-container shadow-border-xs rounded-xl p-4">
+  <details <%= "open" if open %>
+           class="group bg-container shadow-border-xs rounded-xl p-4"
+           <%= "data-controller=\"auto-open\" data-auto-open-param-value=\"#{h(auto_open_param)}\"".html_safe if auto_open_param.present? %>>
     <summary class="flex items-center justify-between gap-2 cursor-pointer rounded-lg list-none [&::-webkit-details-marker]:hidden">
       <div class="flex items-center gap-2">
         <%= icon "chevron-right", class: "text-secondary group-open:transform group-open:rotate-90 transition-transform" %>

app/views/settings/providers/_snaptrade_panel.html.erb

@@ -54,31 +54,26 @@
   <div class="border-t border-primary pt-4 mt-4">
     <% if items&.any? %>
       <% item = items.first %>
-      <div class="flex items-center justify-between">
-        <div class="flex items-center gap-2">
-          <% if item.user_registered? %>
-            <div class="w-2 h-2 bg-success rounded-full"></div>
-            <p class="text-sm text-secondary">
-              <%= t("providers.snaptrade.status_connected", count: item.snaptrade_accounts.count) %>
-              <% if item.unlinked_accounts_count > 0 %>
-                <span class="text-warning">(<%= t("providers.snaptrade.needs_setup", count: item.unlinked_accounts_count) %>)</span>
-              <% end %>
-            </p>
-          <% else %>
-            <div class="w-2 h-2 bg-warning rounded-full"></div>
-            <p class="text-sm text-secondary"><%= t("providers.snaptrade.status_needs_registration") %></p>
-          <% end %>
-        </div>
-      </div>
-
       <% if item.user_registered? %>
-        <details class="group mt-4"
+        <details class="group"
                  data-controller="lazy-load"
                  data-action="toggle->lazy-load#toggled"
-                 data-lazy-load-url-value="<%= connections_snaptrade_item_path(item) %>">
-          <summary class="flex items-center justify-end gap-1 cursor-pointer text-sm text-secondary hover:text-primary list-none [&::-webkit-details-marker]:hidden">
-            <%= t("providers.snaptrade.manage_connections") %>
-            <%= icon "chevron-right", class: "w-3 h-3 transition-transform group-open:rotate-90" %>
+                 data-lazy-load-url-value="<%= connections_snaptrade_item_path(item) %>"
+                 data-lazy-load-auto-open-param-value="manage">
+          <summary class="flex items-center justify-between cursor-pointer list-none [&::-webkit-details-marker]:hidden">
+            <div class="flex items-center gap-2">
+              <div class="w-2 h-2 bg-success rounded-full"></div>
+              <p class="text-sm text-secondary">
+                <%= t("providers.snaptrade.status_connected", count: item.snaptrade_accounts.count) %>
+                <% if item.unlinked_accounts_count > 0 %>
+                  <span class="text-warning">(<%= t("providers.snaptrade.needs_setup", count: item.unlinked_accounts_count) %>)</span>
+                <% end %>
+              </p>
+            </div>
+            <span class="flex items-center gap-1 text-sm text-secondary hover:text-primary">
+              <%= t("providers.snaptrade.manage_connections") %>
+              <%= icon "chevron-right", class: "w-3 h-3 transition-transform group-open:rotate-90" %>
+            </span>
           </summary>
 
           <div class="mt-3 space-y-3" data-lazy-load-target="content">
@@ -86,7 +81,6 @@
               <%= t("providers.snaptrade.connection_limit_info") %>
             </p>
 
-            <%# Loading state - replaced by fetched content %>
             <div data-lazy-load-target="loading" class="flex items-center gap-2 text-sm text-secondary py-2">
               <%= icon "loader-2", class: "w-4 h-4 animate-spin" %>
               <%= t("providers.snaptrade.loading_connections") %>
@@ -96,6 +90,11 @@
             </div>
           </div>
         </details>
+      <% else %>
+        <div class="flex items-center gap-2">
+          <div class="w-2 h-2 bg-warning rounded-full"></div>
+          <p class="text-sm text-secondary"><%= t("providers.snaptrade.status_needs_registration") %></p>
+        </div>
       <% end %>
     <% else %>
       <div class="flex items-center gap-2">

app/views/settings/providers/show.html.erb

@@ -67,7 +67,7 @@
       </turbo-frame>
     <% end %>
 
-    <%= settings_section title: "SnapTrade (beta)", collapsible: true, open: false do %>
+    <%= settings_section title: "SnapTrade (beta)", collapsible: true, open: false, auto_open_param: "manage" do %>
       <turbo-frame id="snaptrade-providers-panel">
         <%= render "settings/providers/snaptrade_panel" %>
       </turbo-frame>