Feature: Implement Mobile Responsiveness (#2092)

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* format

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* fix conflict

* fix conflict

* chore: run rubocop

* fix test

* update PWA logo

* fix tests

* chore: lint

* fix test

* Refactor: Remove duplicate data attribute in activity partial and add chat form rendering in chats index

---------

Co-authored-by: Josh Pigford <josh@joshpigford.com>

app/views/chats/_ai_avatar.html.erb

@@ -1,3 +1,4 @@
 <div class="w-16 h-16 flex-shrink-0 -ml-3 -mt-3">
-  <%= image_tag "ai.svg", alt: "AI", class: "w-full h-full" %>
+  <%# Never use svg as an image tag, it appears blurry in Safari %>
+  <%= inline_svg_tag "ai.svg", alt: "AI", class: "w-full h-full" %>
 </div>

app/views/chats/_ai_greeting.html.erb

@@ -1,4 +1,4 @@
-<div class="flex items-start gap-2 w-full">
+<div class="flex items-start w-full">
   <%= render "chats/ai_avatar" %>
 
   <div class="max-w-[85%] text-sm space-y-4 text-primary">
@@ -13,11 +13,11 @@
 
       <% questions = [
         {
-          icon: "bar-chart-2",
+          icon: "chart-area",
           text: "Evaluate investment portfolio"
         },
         {
-          icon: "credit-card",
+          icon: "wallet-minimal",
           text: "Show spending insights"
         },
         {
@@ -31,7 +31,7 @@
           <button data-action="chat#submitSampleQuestion"
                   data-chat-question-param="<%= question[:text] %>"
                   class="w-full flex items-center gap-2 border border-tertiary rounded-full py-1.5 px-2.5 hover:bg-gray-100">
-            <%= icon(question[:icon]) %> <%= question[:text] %>
+            <%= icon(question[:icon], color: "gray") %> <%= question[:text] %>
           </button>
         <% end %>
       </div>

app/views/chats/index.html.erb

@@ -1,5 +1,5 @@
 <%= turbo_frame_tag chat_frame do %>
-  <div class="p-4 flex flex-col h-full">
+  <div class="flex flex-col h-full md:p-4">
     <nav class="mb-6">
       <% back_path = @last_viewed_chat ? chat_path(@last_viewed_chat) : new_chat_path %>
       <%= link_to back_path, class: "w-9 h-9 flex items-center justify-center rounded-lg hover:bg-surface-hover" do %>
@@ -21,11 +21,11 @@
           </div>
           <h3 class="text-lg font-medium text-primary mb-1">No chats yet</h3>
           <p class="text-gray-500 mb-4">Start a new conversation with the AI assistant</p>
-          <%= link_to "Start a chat", new_chat_path, class: "inline-flex items-center gap-2 py-2 px-4 bg-gray-800 text-white rounded-lg text-sm font-medium" %>
+        </div>
+        <div class="mt-auto p-4">
+          <%= render "messages/chat_form", chat: nil %>
         </div>
       <% end %>
     </div>
-
-    <%= render "messages/chat_form" %>
   </div>
 <% end %>

app/views/chats/new.html.erb

@@ -1,5 +1,5 @@
 <%= turbo_frame_tag chat_frame do %>
-  <div class="p-4 flex flex-col h-full">
+  <div class="flex flex-col h-full md:p-4">
     <%= render "chats/chat_nav", chat: @chat %>
 
     <div class="mt-auto py-8">

app/views/chats/show.html.erb

@@ -4,7 +4,7 @@
   <h1 class="sr-only"><%= @chat.title %></h1>
 
   <div class="flex flex-col h-full">
-    <div class="p-4">
+    <div class="md:p-4">
       <%= render "chats/chat_nav", chat: @chat %>
     </div>