Refactor placeholder logo into common controller (#673)

This can be updated to redirect/pull from third party sources in future,
with the option of always falling back to the placeholder if there are
any failures.

app/controllers/accounts/logos_controller.rb

@@ -0,0 +1,10 @@
+class Accounts::LogosController < ApplicationController
+  def show
+    @account = Current.family.accounts.find(params[:account_id])
+    render_placeholder
+  end
+
+  def render_placeholder
+    render formats: :svg
+  end
+end

app/helpers/accounts_helper.rb

@@ -19,18 +19,22 @@ module AccountsHelper
     class_mapping(accountable_type)[:bg_transparent]
   end
 
+  def accountable_color(accountable_type)
+    class_mapping(accountable_type)[:hex]
+  end
+
   private
 
   def class_mapping(accountable_type)
     {
-      "Account::Credit" => { text: "text-red-500", bg: "bg-red-500", bg_transparent: "bg-red-500/10", fill: "fill-red-500" },
-      "Account::Loan" => { text: "text-fuchsia-500", bg: "bg-fuchsia-500", bg_transparent: "bg-fuchsia-500/10", fill: "fill-fuchsia-500" },
-      "Account::OtherLiability" => { text: "text-gray-500", bg: "bg-gray-500", bg_transparent: "bg-gray-500/10", fill: "fill-gray-500" },
-      "Account::Depository" => { text: "text-violet-500", bg: "bg-violet-500", bg_transparent: "bg-violet-500/10", fill: "fill-violet-500" },
-      "Account::Investment" => { text: "text-blue-600", bg: "bg-blue-600", bg_transparent: "bg-blue-600/10", fill: "fill-blue-600" },
-      "Account::OtherAsset" => { text: "text-green-500", bg: "bg-green-500", bg_transparent: "bg-green-500/10", fill: "fill-green-500" },
-      "Account::Property" => { text: "text-cyan-500", bg: "bg-cyan-500", bg_transparent: "bg-cyan-500/10", fill: "fill-cyan-500" },
-      "Account::Vehicle" => { text: "text-pink-500", bg: "bg-pink-500", bg_transparent: "bg-pink-500/10", fill: "fill-pink-500" }
-    }.fetch(accountable_type, { text: "text-gray-500", bg: "bg-gray-500", bg_transparent: "bg-gray-500/10", fill: "fill-gray-500" })
+      "Account::Credit" => { text: "text-red-500", bg: "bg-red-500", bg_transparent: "bg-red-500/10", fill: "fill-red-500", hex: "#F13636" },
+      "Account::Loan" => { text: "text-fuchsia-500", bg: "bg-fuchsia-500", bg_transparent: "bg-fuchsia-500/10", fill: "fill-fuchsia-500", hex: "#D444F1" },
+      "Account::OtherLiability" => { text: "text-gray-500", bg: "bg-gray-500", bg_transparent: "bg-gray-500/10", fill: "fill-gray-500", hex: "#737373" },
+      "Account::Depository" => { text: "text-violet-500", bg: "bg-violet-500", bg_transparent: "bg-violet-500/10", fill: "fill-violet-500", hex: "#875BF7" },
+      "Account::Investment" => { text: "text-blue-600", bg: "bg-blue-600", bg_transparent: "bg-blue-600/10", fill: "fill-blue-600", hex: "#1570EF" },
+      "Account::OtherAsset" => { text: "text-green-500", bg: "bg-green-500", bg_transparent: "bg-green-500/10", fill: "fill-green-500", hex: "#12B76A" },
+      "Account::Property" => { text: "text-cyan-500", bg: "bg-cyan-500", bg_transparent: "bg-cyan-500/10", fill: "fill-cyan-500", hex: "#06AED4" },
+      "Account::Vehicle" => { text: "text-pink-500", bg: "bg-pink-500", bg_transparent: "bg-pink-500/10", fill: "fill-pink-500", hex: "#F23E94" }
+    }.fetch(accountable_type, { text: "text-gray-500", bg: "bg-gray-500", bg_transparent: "bg-gray-500/10", fill: "fill-gray-500", hex: "#737373" })
   end
 end

app/views/accounts/logos/show.svg.erb

@@ -0,0 +1,21 @@
+<svg
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  viewBox="0 0 32 32"
+  aria-hidden="true">
+  <g>
+    <rect width="100%" height="100%" rx="50%" fill="<%= accountable_color(@account.accountable_type) %>" opacity="0.1" />
+    <text
+      x="50%"
+      y="50%"
+      fill="<%= accountable_color(@account.accountable_type) %>"
+      text-anchor="middle"
+      dy="0.35em"
+      font-family="ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji"
+      font-size="16"
+      font-weight="400">
+      <%= @account.name[0].upcase %>
+    </text>
+  </g>
+</svg>

app/views/accounts/show.html.erb

@@ -2,9 +2,7 @@
 <div class="space-y-4">
   <div class="flex justify-between items-center">
     <div class="flex items-center gap-3">
-      <div class="bg-green-600/10 rounded-full h-8 w-8 flex items-center justify-center">
-        <span class="text-green-600"><%= @account.name[0].upcase %></span>
-      </div>
+      <%= image_tag account_logo_url(@account), class: "w-8 h-8" %>
       <h2 class="font-medium text-xl"><%= @account.name %></h2>
     </div>
     <div class="flex items-center gap-3">

app/views/pages/_account_group_disclosure.erb

@@ -25,9 +25,7 @@
     <% accountable_group.children.map do |account_value_node| %>
       <div class="flex items-center justify-between text-sm font-medium text-gray-900">
         <div class="flex items-center gap-4">
-          <div class="flex items-center justify-center w-8 h-8 rounded-full <%= text_class %> <%= accountable_bg_transparent_class(account_value_node.name) %>">
-            <%= account_value_node.name[0].upcase %>
-          </div>
+          <%= image_tag account_logo_url(account_value_node.original), class: "w-8 h-8" %>
           <div>
             <p><%= account_value_node.name %></p>
           </div>

app/views/pages/dashboard.html.erb

@@ -54,9 +54,7 @@
         <div class="flex gap-1.5">
           <% @top_earners.first(3).each do |account| %>
             <%= link_to account, class: "border border-alpha-black-25 rounded-full p-1 pr-2 flex items-center gap-1 text-xs text-gray-900 font-medium hover:bg-gray-25" do %>
-              <div class="flex items-center justify-center text-xs w-5 h-5 rounded-full <%= accountable_text_class(account.accountable_type) %> <%= accountable_bg_transparent_class(account.accountable_type) %>">
-                <%= account.name[0].upcase %>
-              </div>
+              <%= image_tag account_logo_url(account), class: "w-5 h-5" %>
               <span>+<%= Money.new(account.income, account.currency) %></span>
             <% end %>
           <% end %>
@@ -88,9 +86,7 @@
         <div class="flex gap-1.5">
           <% @top_spenders.first(3).each do |account| %>
             <%= link_to account, class: "border border-alpha-black-25 rounded-full p-1 pr-2 flex items-center gap-1 text-xs text-gray-900 font-medium hover:bg-gray-25" do %>
-              <div class="flex items-center justify-center text-xs w-5 h-5 rounded-full <%= accountable_text_class(account.accountable_type) %> <%= accountable_bg_transparent_class(account.accountable_type) %>">
-                <%= account.name[0].upcase %>
-              </div>
+              <%= image_tag account_logo_url(account), class: "w-5 h-5" %>
               -<%= Money.new(account.spending, account.currency) %>
             <% end %>
           <% end %>
@@ -123,9 +119,7 @@
         <div class="flex gap-1.5">
           <% @top_savers.first(3).each do |account| %>
             <%= link_to account, class: "border border-alpha-black-25 rounded-full p-1 pr-2 flex items-center gap-1 text-xs text-gray-900 font-medium hover:bg-gray-25" do %>
-              <div class="flex items-center justify-center text-xs w-5 h-5 rounded-full <%= accountable_text_class(account.accountable_type) %> <%= accountable_bg_transparent_class(account.accountable_type) %>">
-                <%= account.name[0].upcase %>
-              </div>
+              <%= image_tag account_logo_url(account), class: "w-5 h-5" %>
               <span><%= account.savings_rate > 0 ? "+" : "-" %><%= number_to_percentage(account.savings_rate.abs * 100, precision: 2) %></span>
             <% end %>
           <% end %>

config/routes.rb

@@ -35,6 +35,7 @@ Rails.application.routes.draw do
   resources :accounts, shallow: true do
     get :summary, on: :collection
     post :sync, on: :member
+    resource :logo, only: %i[show], module: :accounts
     resources :valuations
   end