Add new ai chat button, tweak ai navigation (#2272)

* Add new chat button

* Tweak chat navigation

* Fix chat nav padding on new chat

* Make the button nicer

* Fix bad tailwind class

* Use menu icon instead of left

* Fix path

app/views/chats/_chat_nav.html.erb

@@ -9,6 +9,8 @@
       variant: "icon",
       icon: "menu",
       href: path,
+      frame: chat_frame,
+      text: "All chats"
     ) %>
 
     <div class="grow">
@@ -24,7 +26,8 @@
         variant: "link",
         text: "Edit chat title",
         href: edit_chat_path(chat, ctx: "chat"),
-        icon: "pencil", data: { turbo_frame: dom_id(chat, "title") }) %>
+        icon: "pencil",
+        frame: dom_id(chat, "title")) %>
 
       <% menu.with_item(
         variant: "button",

app/views/chats/index.html.erb

@@ -2,32 +2,31 @@
   <%= turbo_frame_tag chat_frame do %>
     <div class="flex flex-col h-full md:p-4">
       <% if @chats.any? %>
-        <nav class="mb-6">
-          <% back_path = @last_viewed_chat ? chat_path(@last_viewed_chat) : new_chat_path %>
-
-          <%= render LinkComponent.new(
-            variant: "icon",
-            icon: "arrow-left",
-            href: back_path,
-          ) %>
-        </nav>
-      <% end %>
-
-      <div class="grow flex flex-col">
-        <% if @chats.any? %>
-          <h1 class="text-xl font-medium mb-6">Chats</h1>
+        <div class="grow flex flex-col">
+          <div class="flex items-center justify-between my-6">
+            <h1 class="text-xl font-medium">Chats</h1>
+            <%= render LinkComponent.new(
+              id: "new-chat",
+              icon: "plus",
+              variant: "icon",
+              href: new_chat_path,
+              frame: chat_frame,
+              text: "New chat"
+            ) %>
+          </div>
           <div class="space-y-2 px-0.5">
             <%= render @chats %>
           </div>
-        <% else %>
+        </div>
+      <% else %>
+        <div class="grow flex flex-col">
           <h1 class="sr-only">Chats</h1>
           <div class="mt-auto py-8">
             <%= render "chats/ai_greeting" %>
           </div>
-
           <%= render "messages/chat_form" %>
-        <% end %>
-      </div>
+        </div>
+      <% end %>
     </div>
   <% end %>
 </div>

app/views/chats/new.html.erb

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