Dashboard design fixes (#1898)

* Dashboard design fixes

* Update dashboard greeting

* Remove sidebar toggle from settings breadcrumbs

* Autofocus and outlines for category dropdowns

* Lint fixes

app/views/layouts/application.html.erb

@@ -17,7 +17,7 @@
         </li>
 
         <li>
-          <%= render "layouts/sidebar/nav_item", name: "Budgets", path: budgets_path, icon_key: "layout-grid" %>
+          <%= render "layouts/sidebar/nav_item", name: "Budgets", path: budgets_path, icon_key: "map" %>
         </li>
       </ul>
 
@@ -26,7 +26,7 @@
       </div>
     </nav>
 
-    <%= tag.div class: class_names("py-4 shrink-0 h-full overflow-y-auto transition-all duration-300", Current.user.show_sidebar? ? "w-[260px]" : "w-0"), data: { sidebar_target: "panel" } do %>
+    <%= tag.div class: class_names("py-4 shrink-0 h-full overflow-y-auto transition-all duration-300", Current.user.show_sidebar? ? "w-80" : "w-0"), data: { sidebar_target: "panel" } do %>
       <% if content_for?(:sidebar) %>
         <%= yield :sidebar %>
       <% else %>
@@ -44,17 +44,16 @@
       <% end %>
 
       <%= tag.div class: class_names("mx-auto w-full h-full", Current.user.show_sidebar? ? "max-w-4xl" : "max-w-5xl"), data: { sidebar_target: "content" } do %>
-        <% unless controller_path.start_with?('settings/') %>
-          <% if content_for?(:breadcrumbs) %>
-            <%= yield :breadcrumbs %>
-          <% else %>
-            <%= render "layouts/shared/breadcrumbs", breadcrumbs: @breadcrumbs %>
-          <% end %>
-          
-          <% if content_for?(:page_header) %>
-            <%= yield :page_header %>
-          <% end %>
+        <% if content_for?(:breadcrumbs) %>
+          <%= yield :breadcrumbs %>
+        <% else %>
+          <%= render "layouts/shared/breadcrumbs", breadcrumbs: @breadcrumbs %>
         <% end %>
+
+        <% if content_for?(:page_header) %>
+          <%= yield :page_header %>
+        <% end %>
+
         <%= yield %>
       <% end %>
     <% end %>

app/views/layouts/settings.html.erb

@@ -1,6 +1,6 @@
 <%= render "layouts/shared/htmldoc" do %>
   <div class="flex h-full bg-gray-25">
-    <div class="p-4 w-[260px] shrink-0 h-full overflow-y-auto">
+    <div class="p-4 w-96 shrink-0 h-full overflow-y-auto">
       <%= render "settings/settings_nav" %>
     </div>
 
@@ -10,9 +10,9 @@
           <% if content_for?(:breadcrumbs) %>
             <%= yield :breadcrumbs %>
           <% else %>
-            <%= render "layouts/shared/breadcrumbs", breadcrumbs: @breadcrumbs %>
+            <%= render "layouts/shared/breadcrumbs", breadcrumbs: @breadcrumbs, sidebar_toggle_enabled: false %>
           <% end %>
-          
+
           <% if content_for?(:page_title) %>
             <h1 class="text-primary text-xl font-medium">
               <%= content_for :page_title %>

app/views/layouts/shared/_breadcrumbs.html.erb

@@ -1,21 +1,25 @@
-<%# locals: (breadcrumbs:) %>
+<%# locals: (breadcrumbs:, sidebar_toggle_enabled: true) %>
 
 <nav class="flex items-center gap-2 mb-6">
-  <button data-action="sidebar#toggle" class="w-9 h-9 inline-flex rounded-lg items-center justify-center hover:bg-gray-100 cursor-pointer">
-    <%= icon("panel-left", color: "gray") %>
-  </button>
-
-  <% breadcrumbs.each_with_index do |(name, path), index| %>
-    <% if index > 0 %>
-      <%= icon("chevron-right", color: "gray", size: "sm") %>
-    <% end %>
-    
-    <% if path.present? && index < breadcrumbs.size - 1 %>
-      <%= link_to name, path, class: "text-sm text-gray-500 font-medium" %>
-    <% elsif index == breadcrumbs.size - 1 %>
-      <span class="text-gray-900 font-medium text-sm"><%= name %></span>
-    <% else %>
-      <span class="text-sm text-gray-500 font-medium"><%= name %></span>
-    <% end %>
+  <% if sidebar_toggle_enabled %>
+    <button data-action="sidebar#toggle" class="p-2 inline-flex rounded-lg items-center justify-center hover:bg-gray-100 cursor-pointer">
+      <%= icon("panel-left", color: "gray") %>
+    </button>
   <% end %>
-</nav> 
+
+  <div class="py-2 flex items-center gap-2">
+    <% breadcrumbs.each_with_index do |(name, path), index| %>
+      <% if index > 0 %>
+        <%= icon("chevron-right", color: "gray", size: "sm") %>
+      <% end %>
+
+      <% if path.present? && index < breadcrumbs.size - 1 %>
+        <%= link_to name, path, class: "text-sm text-gray-500 font-medium" %>
+      <% elsif index == breadcrumbs.size - 1 %>
+        <span class="text-gray-900 font-medium text-sm"><%= name %></span>
+      <% else %>
+        <span class="text-sm text-gray-500 font-medium"><%= name %></span>
+      <% end %>
+    <% end %>
+  </div>
+</nav>

app/views/layouts/shared/_page_header.html.erb

@@ -8,4 +8,4 @@
       <% end %>
     </div>
   <% end %>
-</header> 
+</header>