Improved UI warning states for holdings with missing data (#1098)

* Fix security price issue flow

* Fix tooltip positioning and add tooltip for missing holding data

* Fix tooltip controller error with stale arrow target

* Lint fixes

app/views/account/holdings/_holding.html.erb

@@ -4,9 +4,13 @@
   <div class="grid grid-cols-12 items-center text-gray-900 text-sm font-medium p-4">
     <div class="col-span-4 flex items-center gap-4">
       <%= render "shared/circle_logo", name: holding.name || "H" %>
-      <div>
+      <div class="space-y-0.5">
         <%= link_to holding.name || holding.ticker, account_holding_path(holding.account, holding), data: { turbo_frame: :drawer }, class: "hover:underline" %>
-        <%= tag.p holding.ticker, class: "text-gray-500 text-xs uppercase" %>
+        <% if holding.amount %>
+          <%= tag.p holding.ticker, class: "text-gray-500 text-xs uppercase" %>
+        <% else %>
+          <%= render "missing_price_tooltip" %>
+        <% end %>
       </div>
     </div>
 
@@ -15,7 +19,7 @@
         <%= render "shared/progress_circle", progress: holding.weight, text_class: "text-blue-500" %>
         <%= tag.p number_to_percentage(holding.weight, precision: 1) %>
       <% else %>
-        <%= tag.p "?", class: "text-gray-500" %>
+        <%= tag.p "--", class: "text-gray-500 mb-5" %>
       <% end %>
     </div>
 
@@ -28,7 +32,7 @@
       <% if holding.amount_money %>
         <%= tag.p format_money holding.amount_money %>
       <% else %>
-        <%= tag.p "?", class: "text-gray-500" %>
+        <%= tag.p "--", class: "text-gray-500" %>
       <% end %>
       <%= tag.p t(".shares", qty: number_with_precision(holding.qty, precision: 1)), class: "font-normal text-gray-500" %>
     </div>
@@ -38,7 +42,7 @@
         <%= tag.p format_money(holding.trend.value), style: "color: #{holding.trend.color};" %>
         <%= tag.p "(#{number_to_percentage(holding.trend.percent, precision: 1)})", style: "color: #{holding.trend.color};" %>
       <% else %>
-        <%= tag.p "?", class: "text-gray-500" %>
+        <%= tag.p "--", class: "text-gray-500 mb-4" %>
       <% end %>
     </div>
   </div>

app/views/account/holdings/_missing_price_tooltip.html.erb

@@ -0,0 +1,11 @@
+<div data-controller="tooltip" data-tooltip-cross-axis-value="50">
+  <div class="flex items-center gap-1 text-warning">
+    <%= lucide_icon "info", class: "w-4 h-4 shrink-0" %>
+    <%= tag.span t(".missing_data"), class: "font-normal text-xs" %>
+  </div>
+  <div role="tooltip" data-tooltip-target="tooltip" class="tooltip bg-gray-700 text-sm p-2 rounded w-64">
+    <div class="text-white">
+      <%= t(".description") %>
+    </div>
+  </div>
+</div>

app/views/accounts/_tooltip.html.erb

@@ -1,7 +1,7 @@
 <%# locals: (account:) -%>
-<div data-controller="tooltip" data-tooltip-target="element" data-tooltip-placement-value="right" data-tooltip-offset-value=10 data-tooltip-cross-axis-value=50>
+<div data-controller="tooltip" data-tooltip-placement-value="right" data-tooltip-offset-value=10 data-tooltip-cross-axis-value=50>
   <%= lucide_icon("info", class: "w-4 h-4 shrink-0 text-gray-500") %>
-  <div id="tooltip" role="tooltip" data-tooltip-target="tooltip" class="tooltip bg-gray-700 text-sm p-2 rounded w-64">
+  <div role="tooltip" data-tooltip-target="tooltip" class="tooltip bg-gray-700 text-sm p-2 rounded w-64">
     <div class="text-white">
       <%= t(".total_value_tooltip") %>
     </div>
@@ -22,5 +22,4 @@
       </div>
     </div>
   </div>
-  <div data-tooltip-target="arrow"></div>
 </div>

app/views/issue/_request_synth_data_action.html.erb

@@ -0,0 +1,12 @@
+<p>The Synth data provider could not find the requested data.</p>
+
+<p>We are actively developing Synth to be a low cost and easy to use data provider. You can help us improve Synth by
+  requesting the data you need.</p>
+
+<p>Please post in our <%= link_to "Discord server", "https://link.maybe.co/discord", target: "_blank" %> with the
+  following information:</p>
+
+<ul>
+  <li>What type of data is missing?</li>
+  <li>Any other information you think might be helpful</li>
+</ul>

app/views/issue/exchange_rates_missings/show.html.erb

@@ -7,16 +7,5 @@
 <% end %>
 
 <%= content_for :action do %>
-  <p>The Synth data provider could not find the requested data.</p>
-
-  <p>We are actively developing Synth to be a low cost and easy to use data provider. You can help us improve Synth by
-    requesting the data you need.</p>
-
-  <p>Please post in our <%= link_to "Discord server", "https://link.maybe.co/discord", target: "_blank" %> with the
-    following information:</p>
-
-  <ul>
-    <li>What type of data is missing?</li>
-    <li>Any other information you think might be helpful</li>
-  </ul>
+  <%= render "issue/request_synth_data_action" %>
 <% end %>

app/views/issue/prices_missings/show.html.erb

@@ -0,0 +1,11 @@
+<%= content_for :title, @issue.title %>
+
+<%= content_for :description do %>
+  <p>Some stock prices are missing for this account.</p>
+
+  <pre><code><%= JSON.pretty_generate(@issue.data) %></code></pre>
+<% end %>
+
+<%= content_for :action do %>
+  <%= render "issue/request_synth_data_action" %>
+<% end %>

app/views/issues/_issue.html.erb

@@ -1,14 +1,15 @@
 <%# locals: (issue:) %>
 
 <% priority_class = issue.critical? || issue.error? ? "bg-error/5" : "bg-warning/5" %>
+<% text_class = issue.critical? || issue.error? ? "text-error" : "text-warning" %>
 
 <%= tag.div class: "flex gap-6 items-center rounded-xl px-4 py-3 #{priority_class}" do %>
-  <div class="flex gap-3 items-center text-red-500 grow overflow-x-scroll">
+  <div class="flex gap-3 items-center grow overflow-x-scroll <%= text_class %>">
     <%= lucide_icon("alert-octagon", class: "w-5 h-5 shrink-0") %>
     <p class="text-sm whitespace-nowrap"><%= issue.title %></p>
   </div>
 
   <div class="flex items-center gap-4 ml-auto">
-    <%= link_to "Troubleshoot", issue_path(issue), class: "text-red-500 font-medium hover:underline", data: { turbo_frame: :drawer } %>
+    <%= link_to "Troubleshoot", issue_path(issue), class: "#{text_class} font-medium hover:underline", data: { turbo_frame: :drawer } %>
   </div>
 <% end %>

app/views/shared/_drawer.html.erb

@@ -1,12 +1,12 @@
 <%= turbo_frame_tag "drawer" do %>
-  <dialog class="bg-white border border-alpha-black-25 rounded-2xl max-h-[calc(100vh-32px)] max-w-[480px] w-full shadow-xs h-full mt-4 mr-4 focus-visible:outline-none" data-controller="modal" data-action="click->modal#clickOutside">
-    <div class="flex flex-col h-full p-4">
-      <div class="flex justify-end items-center pb-4">
+  <dialog class="bg-white border border-alpha-black-25 rounded-2xl max-w-[480px] w-full shadow-xs h-full mt-4 mr-4 focus-visible:outline-none flex flex-col" data-controller="modal" data-action="click->modal#clickOutside">
+    <div class="flex flex-col h-full">
+      <div class="flex justify-end items-center p-4">
         <div data-action="click->modal#close" class="cursor-pointer p-2">
           <%= lucide_icon("x", class: "w-5 h-5 shrink-0") %>
         </div>
       </div>
-      <div class="flex flex-col overflow-scroll">
+      <div class="flex-1 overflow-y-auto px-4 pb-4">
         <%= content %>
       </div>
     </div>