Add a 'Bank Sync' page in Settings (#111)

* add initial pages for Bank Sync and Lunch Flow

* update breadcrumbs on Lunch Flow page

* update content for Lunch Flow page

* add norefeerrer to Github link

* update lunch flow url

* nest lunch_flow resource under bank_sync

* add a provider link partial

* remove trailing whitespaces

* update providers style to match merchants page

* remove separate lunch flow page

* fix hover on dark mode

* point lunch flow to custom sure landing page

* [i18n] Bank Sync label

* [i18n] API Keys

* [i18n] Self-Hosting consistency

* Security breadcrum, not "securities" default

---------

Co-authored-by: Juan José Mata <juanjo.mata@gmail.com>

app/views/settings/_settings_nav.html.erb

@@ -6,10 +6,11 @@ nav_sections = [
       { label: t(".profile_label"), path: settings_profile_path, icon: "circle-user" },
       { label: t(".preferences_label"), path: settings_preferences_path, icon: "bolt" },
       { label: t(".security_label"), path: settings_security_path, icon: "shield-check" },
-      { label: "API Key", path: settings_api_key_path, icon: "key" },
+      { label: t(".api_keys_label"), path: settings_api_key_path, icon: "key" },
       { label: t(".self_hosting_label"), path: settings_hosting_path, icon: "database", if: self_hosted? },
       { label: t(".billing_label"), path: settings_billing_path, icon: "circle-dollar-sign", if: !self_hosted? },
       { label: t(".accounts_label"), path: accounts_path, icon: "layers" },
+      { label: t(".bank_sync_label"), path: settings_bank_sync_path, icon: "banknote" },
       { label: "SimpleFin", path: simplefin_items_path, icon: "building-2" },
       { label: t(".imports_label"), path: imports_path, icon: "download" }
     ]

app/views/settings/bank_sync/_provider_link.html.erb

@@ -0,0 +1,32 @@
+<%# locals: (provider_link:) %>
+
+<%# Assign distinct colors to each provider %>
+<% provider_colors = {
+  "Lunch Flow" => "#6471eb",
+  "Plaid" => "#4da568", 
+  "SimpleFin" => "#e99537"
+} %>
+<% provider_color = provider_colors[provider_link[:name]] || "#6B7280" %>
+
+<%= link_to provider_link[:path], 
+            target: provider_link[:target], 
+            rel: provider_link[:rel],
+            class: "flex justify-between items-center p-4 bg-container hover:bg-container-hover transition-colors" do %>
+  <div class="flex w-full items-center gap-2.5">
+    <%= render partial: "shared/color_avatar", locals: { name: provider_link[:name], color: provider_color } %>
+
+    <div class="flex flex-col">
+      <p class="text-primary text-sm font-medium">
+        <%= provider_link[:name] %>
+      </p>
+      <p class="text-secondary text-xs">
+        <%= provider_link[:description] %>
+      </p>
+    </div>
+  </div>
+  <div class="justify-self-end">
+    <%= icon("arrow-right", size: "sm", class: "text-secondary") %>
+  </div>
+<% end %>
+
+

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

@@ -0,0 +1,29 @@
+<%= content_for :page_title, "Bank Sync" %>
+
+
+<div class="bg-container rounded-xl shadow-border-xs p-4">
+  <% if @providers.any? %>
+    <div class="rounded-xl bg-container-inset space-y-1 p-1">
+      <div class="flex items-center gap-1.5 px-4 py-2 text-xs font-medium text-secondary uppercase">
+        <p>PROVIDERS</p>
+        <span class="text-subdued">&middot;</span>
+        <p><%= @providers.count %></p>
+      </div>
+
+      <div class="bg-container rounded-lg shadow-border-xs">
+        <div class="overflow-hidden rounded-lg">
+          <%= render partial: "provider_link", collection: @providers, spacer_template: "shared/ruler" %>
+        </div>
+      </div>
+    </div>
+  <% else %>
+    <div class="flex justify-center items-center py-20">
+      <div class="text-center flex flex-col items-center max-w-[300px]">
+        <p class="text-primary mb-1 font-medium text-sm">No providers configured</p>
+        <p class="text-secondary text-sm">Configure providers to link your bank accounts.</p>
+      </div>
+    </div>
+  <% end %>
+</div>
+
+