From 1bc608ef6bf2d27c009ee780936e3f5f4504aa39 Mon Sep 17 00:00:00 2001
From: Samir Boulahtit <samir.boulahtit@wizard.lu>
Date: Sat, 3 Jan 2026 13:00:58 +0100
Subject: [PATCH] refactor: use tabs macro for settings page with mobile
 support
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace custom sidebar/icon nav with standard tabs_nav macro
- Add horizontal scroll for mobile (overflow-x-auto)
- Reduce tab spacing on mobile (space-x-4 vs space-x-8 on desktop)
- Content panels now take full width below tabs

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 app/templates/shared/macros/tabs.html |  2 +-
 app/templates/vendor/settings.html    | 39 +++++++++++----------------
 2 files changed, 17 insertions(+), 24 deletions(-)

diff --git a/app/templates/shared/macros/tabs.html b/app/templates/shared/macros/tabs.html
index 0bcfbbed..a7ac3558 100644
--- a/app/templates/shared/macros/tabs.html
+++ b/app/templates/shared/macros/tabs.html
@@ -12,7 +12,7 @@
 {% macro tabs_nav(tab_var='activeTab', class='') %}
 <div class="mb-6 {{ class }}">
     <div class="border-b border-gray-200 dark:border-gray-700">
-        <nav class="-mb-px flex space-x-8">
+        <nav class="-mb-px flex space-x-4 md:space-x-8 overflow-x-auto">
             {{ caller() }}
         </nav>
     </div>
diff --git a/app/templates/vendor/settings.html b/app/templates/vendor/settings.html
index fd25d07f..d8b3fbd7 100644
--- a/app/templates/vendor/settings.html
+++ b/app/templates/vendor/settings.html
@@ -2,6 +2,7 @@
 {% extends "vendor/base.html" %}
 {% from 'shared/macros/headers.html' import page_header_flex %}
 {% from 'shared/macros/alerts.html' import loading_state, error_state %}
+{% from 'shared/macros/tabs.html' import tabs_nav, tab_button %}
 
 {% block title %}Settings{% endblock %}
 
@@ -17,29 +18,22 @@
 {{ error_state('Error loading settings') }}
 
 <!-- Settings Content -->
-<div x-show="!loading && !error" class="w-full mb-8">
-    <div class="flex flex-col lg:flex-row gap-6">
-        <!-- Settings Navigation (Sidebar) -->
-        <div class="w-full lg:w-56 flex-shrink-0">
-            <div class="bg-white rounded-lg shadow-xs dark:bg-gray-800 p-2 lg:sticky lg:top-4">
-                <template x-for="section in sections" :key="section.id">
-                    <button
-                        @click="setSection(section.id)"
-                        :class="{
-                            'w-full flex items-center px-3 py-2.5 text-sm font-medium rounded-lg transition-colors': true,
-                            'text-purple-600 bg-purple-50 dark:bg-purple-900/20 dark:text-purple-400': activeSection === section.id,
-                            'text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-700': activeSection !== section.id
-                        }"
-                    >
-                        <span x-html="$icon(section.icon, 'w-5 h-5 mr-3')"></span>
-                        <span x-text="section.label"></span>
-                    </button>
-                </template>
-            </div>
-        </div>
+<div x-show="!loading && !error" class="mb-8">
+    <!-- Section Tabs -->
+    {% call tabs_nav(tab_var='activeSection') %}
+        {{ tab_button('general', 'General', tab_var='activeSection', icon='cog') }}
+        {{ tab_button('business', 'Business', tab_var='activeSection', icon='office-building') }}
+        {{ tab_button('localization', 'Localization', tab_var='activeSection', icon='globe') }}
+        {{ tab_button('marketplace', 'Marketplace', tab_var='activeSection', icon='shopping-cart') }}
+        {{ tab_button('invoices', 'Invoices', tab_var='activeSection', icon='document-text') }}
+        {{ tab_button('branding', 'Branding', tab_var='activeSection', icon='color-swatch') }}
+        {{ tab_button('domains', 'Domains', tab_var='activeSection', icon='globe-alt') }}
+        {{ tab_button('api', 'API', tab_var='activeSection', icon='key') }}
+        {{ tab_button('notifications', 'Notifications', tab_var='activeSection', icon='bell') }}
+    {% endcall %}
 
-        <!-- Settings Panels (Main Content) -->
-        <div class="flex-1 min-w-0">
+    <!-- Settings Panels -->
+    <div>
             <!-- General Settings -->
             <div x-show="activeSection === 'general'" class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
                 <div class="p-4 border-b dark:border-gray-700">
@@ -1009,7 +1003,6 @@
                     </div>
                 </div>
             </div>
-        </div>
     </div>
 </div>
 {% endblock %}