Lunchflow fix (#307)

* Fix lunch flow pre-loading and UX

* Small UX fixes

- Proper closing of modal on cancel
- Preload on new account already

* Review comments

* Fix json error

* Delete .claude/settings.local.json

Signed-off-by: soky srm <sokysrm@gmail.com>

* Lunch Flow brand (again :-)

* FIX process only linked accounts

* FIX disable accounts with no name

* Fix string normalization

---------

Signed-off-by: soky srm <sokysrm@gmail.com>
Co-authored-by: Juan José Mata <juanjo.mata@gmail.com>

app/views/accounts/new.html.erb

@@ -1,5 +1,8 @@
 <%= render layout: "accounts/new/container", locals: { title: t(".title") } do %>
-  <div class="text-sm">
+  <div class="text-sm"
+       <% if @show_lunchflow_link %>
+         data-controller="lunchflow-preload"
+       <% end %>>
     <% unless params[:classification] == "liability" %>
       <%= render "account_type", accountable: Depository.new %>
       <%= render "account_type", accountable: Investment.new %>

app/views/accounts/new/_method_selector.html.erb

@@ -1,7 +1,14 @@
 <%# locals: (path:, accountable_type:, show_us_link: true, show_eu_link: true, show_lunchflow_link: false) %>
 
 <%= render layout: "accounts/new/container", locals: { title: t(".title"), back_path: new_account_path } do %>
-  <div class="text-sm">
+  <div class="text-sm"
+       <% if show_lunchflow_link %>
+         data-controller="lunchflow-preload"
+         data-lunchflow-preload-accountable-type-value="<%= h(accountable_type) %>"
+         <% if params[:return_to] %>
+           data-lunchflow-preload-return-to-value="<%= h(params[:return_to]) %>"
+         <% end %>
+       <% end %>>
     <%= link_to path, class: "flex items-center gap-4 w-full text-center text-primary focus:outline-hidden focus:bg-surface border border-transparent focus:border focus:border-gray-200 px-2 hover:bg-surface rounded-lg p-2" do %>
       <span class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-alpha-black-50 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.02)]">
         <%= icon("keyboard") %>
@@ -39,12 +46,18 @@
                   class: "text-primary flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-surface border border-transparent focus:border focus:border-primary px-2 hover:bg-surface rounded-lg p-2",
                   data: {
                     turbo_frame: "modal",
-                    turbo_action: "advance"
+                    turbo_action: "advance",
+                    lunchflow_preload_target: "link"
                   } do %>
         <span class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-alpha-black-50 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.02)]">
           <%= icon("link-2") %>
         </span>
-        <%= t("accounts.new.method_selector.lunchflow_entry") %>
+        <span class="flex items-center gap-2">
+          <%= t("accounts.new.method_selector.lunchflow_entry") %>
+          <span data-lunchflow-preload-target="spinner" class="hidden">
+            <%= icon("loader-2", class: "animate-spin") %>
+          </span>
+        </span>
       <% end %>
     <% end %>
 

app/views/lunchflow_items/select_accounts.html.erb

@@ -15,15 +15,28 @@
 
           <div class="space-y-2">
             <% @available_accounts.each do |account| %>
-              <label class="flex items-start gap-3 p-3 border border-primary rounded-lg hover:bg-subtle cursor-pointer transition-colors">
-                <%= check_box_tag "account_ids[]", account[:id], false, class: "mt-1" %>
+              <% has_blank_name = account[:name].blank? %>
+              <label class="flex items-start gap-3 p-3 border <%= has_blank_name ? 'border-error bg-error/5' : 'border-primary' %> rounded-lg <%= has_blank_name ? 'cursor-not-allowed opacity-60' : 'hover:bg-subtle cursor-pointer' %> transition-colors">
+                <%= check_box_tag "account_ids[]", account[:id], false, disabled: has_blank_name, class: "mt-1" %>
                 <div class="flex-1">
-                  <div class="font-medium text-sm text-primary">
-                    <%= account[:name] %>
+                  <div class="font-medium text-sm <%= has_blank_name ? 'text-error' : 'text-primary' %>">
+                    <% if has_blank_name %>
+                      <%= t(".no_name_placeholder") %>
+                    <% else %>
+                      <%= account[:name] %>
+                    <% end %>
                   </div>
                   <div class="text-xs text-secondary mt-1">
+                    <% if account[:iban].present? %>
+                      <%= account[:iban] %> •
+                    <% end %>
                     <%= account[:institution_name] %> • <%= account[:currency] %> • <%= account[:status] %>
                   </div>
+                  <% if has_blank_name %>
+                    <div class="text-xs text-error mt-1">
+                      <%= t(".configure_name_in_lunchflow") %>
+                    </div>
+                  <% end %>
                 </div>
               </label>
             <% end %>
@@ -32,7 +45,7 @@
           <div class="flex gap-2 justify-end pt-4">
             <%= link_to t(".cancel"), @return_to || new_account_path,
                 class: "inline-flex items-center gap-1 px-3 py-2 text-sm font-medium rounded-lg text-primary button-bg-secondary hover:button-bg-secondary-hover",
-                data: { turbo_frame: "_top" } %>
+                data: { turbo_frame: "_top", action: "DS--dialog#close" } %>
             <%= submit_tag t(".link_accounts"),
                 class: "inline-flex items-center gap-1 px-3 py-2 text-sm font-medium rounded-lg text-inverse bg-inverse hover:bg-inverse-hover disabled:button-bg-disabled" %>
           </div>

app/views/lunchflow_items/select_existing_account.html.erb

@@ -15,15 +15,28 @@
 
           <div class="space-y-2">
             <% @available_accounts.each do |account| %>
-              <label class="flex items-start gap-3 p-3 border border-primary rounded-lg hover:bg-subtle cursor-pointer transition-colors">
-                <%= radio_button_tag "lunchflow_account_id", account[:id], false, class: "mt-1" %>
+              <% has_blank_name = account[:name].blank? %>
+              <label class="flex items-start gap-3 p-3 border <%= has_blank_name ? 'border-error bg-error/5' : 'border-primary' %> rounded-lg <%= has_blank_name ? 'cursor-not-allowed opacity-60' : 'hover:bg-subtle cursor-pointer' %> transition-colors">
+                <%= radio_button_tag "lunchflow_account_id", account[:id], false, disabled: has_blank_name, class: "mt-1" %>
                 <div class="flex-1">
-                  <div class="font-medium text-sm text-primary">
-                    <%= account[:name] %>
+                  <div class="font-medium text-sm <%= has_blank_name ? 'text-error' : 'text-primary' %>">
+                    <% if has_blank_name %>
+                      <%= t(".no_name_placeholder") %>
+                    <% else %>
+                      <%= account[:name] %>
+                    <% end %>
                   </div>
                   <div class="text-xs text-secondary mt-1">
+                    <% if account[:iban].present? %>
+                      <%= account[:iban] %> •
+                    <% end %>
                     <%= account[:institution_name] %> • <%= account[:currency] %> • <%= account[:status] %>
                   </div>
+                  <% if has_blank_name %>
+                    <div class="text-xs text-error mt-1">
+                      <%= t(".configure_name_in_lunchflow") %>
+                    </div>
+                  <% end %>
                 </div>
               </label>
             <% end %>
@@ -32,7 +45,7 @@
           <div class="flex gap-2 justify-end pt-4">
             <%= link_to t(".cancel"), @return_to || accounts_path,
                 class: "inline-flex items-center gap-1 px-3 py-2 text-sm font-medium rounded-lg text-primary button-bg-secondary hover:button-bg-secondary-hover",
-                data: { turbo_frame: "_top" } %>
+                data: { turbo_frame: "_top", action: "DS--dialog#close" } %>
             <%= submit_tag t(".link_account"),
                 class: "inline-flex items-center gap-1 px-3 py-2 text-sm font-medium rounded-lg text-inverse bg-inverse hover:bg-inverse-hover disabled:button-bg-disabled" %>
           </div>