Refactor settings navigation and integrate empty state components

- Reorganize Settings sidebar section with sub-groups (Account, Website, System)
- Integrate shared empty_state partial into props, contacts, messages, pages
- Update messages index to use page_header partial
- Shorten label names for cleaner sidebar appearance

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: etewiah

app/views/layouts/site_admin/_navigation.html.erb

@@ -204,6 +204,11 @@
         </button>
 
         <div x-show="settingsOpen" x-collapse>
+          <%# Account & Team %>
+          <div class="px-4 pt-2 pb-1">
+            <span class="text-xs text-gray-500 font-medium">Account</span>
+          </div>
+
           <%= link_to site_admin_users_path, id: "tour-users", class: "flex items-center px-4 py-2 rounded-lg hover:bg-gray-700 #{current_page?(site_admin_users_path) ? 'bg-gray-700' : ''}" do %>
             <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
               <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"></path>
@@ -225,18 +230,23 @@
             <span>Billing</span>
           <% end %>
 
-          <%= link_to site_admin_website_settings_tab_path('general'), id: "tour-general-settings", class: "flex items-center px-4 py-2 rounded-lg hover:bg-gray-700 #{params[:tab] == 'general' || (request.path.start_with?('/site_admin/website') && !['appearance', 'seo', 'navigation', 'notifications', 'social'].include?(params[:tab])) ? 'bg-gray-700' : ''}" do %>
+          <%# Website Configuration %>
+          <div class="px-4 pt-4 pb-1">
+            <span class="text-xs text-gray-500 font-medium">Website</span>
+          </div>
+
+          <%= link_to site_admin_website_settings_tab_path('general'), id: "tour-general-settings", class: "flex items-center px-4 py-2 rounded-lg hover:bg-gray-700 #{params[:tab] == 'general' || (request.path.start_with?('/site_admin/website') && !['appearance', 'seo', 'navigation', 'notifications', 'social', 'search'].include?(params[:tab])) ? 'bg-gray-700' : ''}" do %>
             <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
               <path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"></path>
             </svg>
-            <span>General Settings</span>
+            <span>General</span>
           <% end %>
 
-          <%= link_to site_admin_website_settings_tab_path('notifications'), id: "tour-notifications", class: "flex items-center px-4 py-2 rounded-lg hover:bg-gray-700 #{params[:tab] == 'notifications' ? 'bg-gray-700' : ''}" do %>
+          <%= link_to site_admin_domain_path, id: "tour-domain", class: "flex items-center px-4 py-2 rounded-lg hover:bg-gray-700 #{current_page?(site_admin_domain_path) ? 'bg-gray-700' : ''}" do %>
             <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
-              <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path>
+              <path fill-rule="evenodd" d="M4.083 9h1.946c.089-1.546.383-2.97.837-4.118A6.004 6.004 0 004.083 9zM10 2a8 8 0 100 16 8 8 0 000-16zm0 2c-.076 0-.232.032-.465.262-.238.234-.497.623-.737 1.182-.389.907-.673 2.142-.766 3.556h3.936c-.093-1.414-.377-2.649-.766-3.556-.24-.56-.5-.948-.737-1.182C10.232 4.032 10.076 4 10 4zm3.971 5c-.089-1.546-.383-2.97-.837-4.118A6.004 6.004 0 0115.917 9h-1.946zm-2.003 2H8.032c.093 1.414.377 2.649.766 3.556.24.56.5.948.737 1.182.233.23.389.262.465.262.076 0 .232-.032.465-.262.238-.234.498-.623.737-1.182.389-.907.673-2.142.766-3.556zm1.166 4.118c.454-1.147.748-2.572.837-4.118h1.946a6.004 6.004 0 01-2.783 4.118zm-6.268 0C6.412 13.97 6.118 12.546 6.03 11H4.083a6.004 6.004 0 002.783 4.118z" clip-rule="evenodd"></path>
             </svg>
-            <span>Notifications</span>
+            <span>Domain</span>
           <% end %>
 
           <%= link_to site_admin_website_settings_tab_path('social'), id: "tour-social", class: "flex items-center px-4 py-2 rounded-lg hover:bg-gray-700 #{params[:tab] == 'social' ? 'bg-gray-700' : ''}" do %>
@@ -246,27 +256,32 @@
             <span>Social Links</span>
           <% end %>
 
-          <%= link_to site_admin_domain_path, id: "tour-domain", class: "flex items-center px-4 py-2 rounded-lg hover:bg-gray-700 #{current_page?(site_admin_domain_path) ? 'bg-gray-700' : ''}" do %>
+          <%= link_to site_admin_website_settings_tab_path('notifications'), id: "tour-notifications", class: "flex items-center px-4 py-2 rounded-lg hover:bg-gray-700 #{params[:tab] == 'notifications' ? 'bg-gray-700' : ''}" do %>
             <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
-              <path fill-rule="evenodd" d="M4.083 9h1.946c.089-1.546.383-2.97.837-4.118A6.004 6.004 0 004.083 9zM10 2a8 8 0 100 16 8 8 0 000-16zm0 2c-.076 0-.232.032-.465.262-.238.234-.497.623-.737 1.182-.389.907-.673 2.142-.766 3.556h3.936c-.093-1.414-.377-2.649-.766-3.556-.24-.56-.5-.948-.737-1.182C10.232 4.032 10.076 4 10 4zm3.971 5c-.089-1.546-.383-2.97-.837-4.118A6.004 6.004 0 0115.917 9h-1.946zm-2.003 2H8.032c.093 1.414.377 2.649.766 3.556.24.56.5.948.737 1.182.233.23.389.262.465.262.076 0 .232-.032.465-.262.238-.234.498-.623.737-1.182.389-.907.673-2.142.766-3.556zm1.166 4.118c.454-1.147.748-2.572.837-4.118h1.946a6.004 6.004 0 01-2.783 4.118zm-6.268 0C6.412 13.97 6.118 12.546 6.03 11H4.083a6.004 6.004 0 002.783 4.118z" clip-rule="evenodd"></path>
+              <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path>
             </svg>
-            <span>Domain</span>
+            <span>Notifications</span>
           <% end %>
 
-          <%= link_to site_admin_onboarding_path, id: "tour-onboarding", class: "flex items-center px-4 py-2 rounded-lg hover:bg-gray-700 #{request.path.start_with?('/site_admin/onboarding') ? 'bg-gray-700' : ''}" do %>
-            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
-              <path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
-            </svg>
-            <span>Setup Wizard</span>
-          <% end %>
+          <%# System %>
+          <div class="px-4 pt-4 pb-1">
+            <span class="text-xs text-gray-500 font-medium">System</span>
+          </div>
 
           <%= link_to site_admin_storage_stats_path, id: "tour-storage", class: "flex items-center px-4 py-2 rounded-lg hover:bg-gray-700 #{request.path.start_with?('/site_admin/storage_stats') ? 'bg-gray-700' : ''}" do %>
             <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
               <path d="M3 12v3c0 1.657 3.134 3 7 3s7-1.343 7-3v-3c0 1.657-3.134 3-7 3s-7-1.343-7-3z"></path>
               <path d="M3 7v3c0 1.657 3.134 3 7 3s7-1.343 7-3V7c0 1.657-3.134 3-7 3S3 8.657 3 7z"></path>
               <path d="M17 5c0 1.657-3.134 3-7 3S3 6.657 3 5s3.134-3 7-3 7 1.343 7 3z"></path>
             </svg>
-            <span>Storage Stats</span>
+            <span>Storage</span>
+          <% end %>
+
+          <%= link_to site_admin_onboarding_path, id: "tour-onboarding", class: "flex items-center px-4 py-2 rounded-lg hover:bg-gray-700 #{request.path.start_with?('/site_admin/onboarding') ? 'bg-gray-700' : ''}" do %>
+            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
+              <path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
+            </svg>
+            <span>Setup Wizard</span>
           <% end %>
 
           <%= link_to site_admin_support_tickets_path, id: "tour-support", class: "flex items-center px-4 py-2 rounded-lg hover:bg-gray-700 #{request.path.start_with?('/site_admin/support_tickets') ? 'bg-gray-700' : ''}" do %>

app/views/site_admin/contacts/index.html.erb

@@ -44,8 +44,11 @@
           <% end %>
         <% else %>
           <tr>
-            <td colspan="4" class="px-6 py-4 text-center text-gray-500">
-              No contacts found
+            <td colspan="4" class="px-6 py-12">
+              <%= render 'site_admin/shared/empty_state',
+                  title: 'No contacts yet',
+                  description: params[:search].present? ? 'Try adjusting your search terms.' : 'When visitors contact you through your website, they will appear here.',
+                  icon: 'contact' %>
             </td>
           </tr>
         <% end %>

app/views/site_admin/messages/index.html.erb

@@ -1,8 +1,7 @@
 <div class="max-w-7xl mx-auto">
-  <div class="mb-6">
-    <h1 class="text-3xl font-bold text-gray-900">Messages</h1>
-    <p class="mt-2 text-gray-600">View messages for <%= current_website.subdomain %></p>
-  </div>
+  <%= render 'site_admin/shared/page_header',
+      title: 'Messages',
+      description: "View messages for #{current_website.subdomain}" %>
 
   <!-- Search Form -->
   <div class="mb-6 bg-white rounded-lg shadow p-4">
@@ -41,8 +40,11 @@
           <% end %>
         <% else %>
           <tr>
-            <td colspan="3" class="px-6 py-4 text-center text-gray-500">
-              No messages found
+            <td colspan="3" class="px-6 py-12">
+              <%= render 'site_admin/shared/empty_state',
+                  title: 'No messages yet',
+                  description: params[:search].present? ? 'Try adjusting your search terms.' : 'When visitors send inquiries through your website, they will appear here.',
+                  icon: 'message' %>
             </td>
           </tr>
         <% end %>

app/views/site_admin/pages/index.html.erb

@@ -73,11 +73,11 @@
       </div>
         <% end %>
     <% else %>
-      <div class="bg-white rounded-lg shadow overflow-hidden px-6 py-12 text-center text-gray-500">
-        <svg class="mx-auto h-12 w-12 text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
-        </svg>
-        <p class="text-gray-600">No pages found</p>
+      <div class="bg-white rounded-lg shadow overflow-hidden">
+        <%= render 'site_admin/shared/empty_state',
+            title: 'No pages found',
+            description: params[:search].present? ? 'Try adjusting your search terms.' : 'Create pages to add custom content to your website.',
+            icon: 'page' %>
       </div>
     <% end %>
   </div>

app/views/site_admin/props/index.html.erb

@@ -131,14 +131,13 @@
           <% end %>
         <% else %>
           <tr>
-            <td colspan="5" class="px-6 py-8 text-center text-gray-500">
-              <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
-              </svg>
-              <p class="mt-2">No properties found</p>
-              <% if params[:search].present? %>
-                <p class="mt-1 text-sm">Try adjusting your search terms</p>
-              <% end %>
+            <td colspan="5" class="px-6 py-12">
+              <%= render 'site_admin/shared/empty_state',
+                  title: 'No properties yet',
+                  description: params[:search].present? ? 'Try adjusting your search terms.' : 'Get started by adding your first property listing.',
+                  icon: 'property',
+                  action_text: params[:search].blank? ? 'Add Property' : nil,
+                  action_path: params[:search].blank? ? new_site_admin_prop_path : nil %>
             </td>
           </tr>
         <% end %>