feat: Reorganize settings sidebar and add plan-based feature locking

- Add locked state to Plugins sidebar item with plan feature check
- Create Branding section in settings with Appearance, Email Templates, Custom Domains
- Split Domains page into Booking (URLs, redirects) and Custom Domains (BYOD, purchase)
- Add booking_return_url field to Tenant model for customer redirects
- Update SidebarItem component to support locked prop with lock icon
- Move Email Templates from main sidebar to Settings > Branding
- Add communication credits hooks and payment form updates
- Add timezone fields migration and various UI improvements

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

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

frontend/src/components/Sidebar.tsx

@@ -14,12 +14,11 @@ import {
   Ticket,
   HelpCircle,
   Clock,
-  Mail,
   Plug,
-  BookOpen,
 } from 'lucide-react';
 import { Business, User } from '../types';
 import { useLogout } from '../hooks/useAuth';
+import { usePlanFeatures } from '../hooks/usePlanFeatures';
 import SmoothScheduleLogo from './SmoothScheduleLogo';
 import {
   SidebarSection,
@@ -38,6 +37,7 @@ const Sidebar: React.FC<SidebarProps> = ({ business, user, isCollapsed, toggleCo
   const { t } = useTranslation();
   const { role } = user;
   const logoutMutation = useLogout();
+  const { canUse } = usePlanFeatures();
 
   const canViewAdminPages = role === 'owner' || role === 'manager';
   const canViewManagementPages = role === 'owner' || role === 'manager' || role === 'staff';
@@ -52,7 +52,7 @@ const Sidebar: React.FC<SidebarProps> = ({ business, user, isCollapsed, toggleCo
     <div
       className={`flex flex-col h-full text-white shrink-0 transition-all duration-300 ${isCollapsed ? 'w-20' : 'w-64'}`}
       style={{
-        background: `linear-gradient(to bottom right, ${business.primaryColor}, ${business.secondaryColor || business.primaryColor})`
+        background: `linear-gradient(to bottom right, var(--color-brand-600, ${business.primaryColor}), var(--color-brand-secondary, ${business.secondaryColor || business.primaryColor}))`
       }}
     >
       {/* Header / Logo */}
@@ -82,7 +82,7 @@ const Sidebar: React.FC<SidebarProps> = ({ business, user, isCollapsed, toggleCo
             ) : business.logoDisplayMode !== 'logo-only' && (
               <div
                 className="flex items-center justify-center w-10 h-10 bg-white rounded-lg font-bold text-xl shrink-0"
-                style={{ color: business.primaryColor }}
+                style={{ color: 'var(--color-brand-600)' }}
               >
                 {business.name.substring(0, 2).toUpperCase()}
               </div>
@@ -189,20 +189,15 @@ const Sidebar: React.FC<SidebarProps> = ({ business, user, isCollapsed, toggleCo
           </SidebarSection>
         )}
 
-        {/* Extend Section - Plugins & Templates */}
+        {/* Extend Section - Plugins */}
         {canViewAdminPages && (
           <SidebarSection title={t('nav.sections.extend', 'Extend')} isCollapsed={isCollapsed}>
             <SidebarItem
-              to="/plugins"
+              to="/plugins/marketplace"
               icon={Plug}
               label={t('nav.plugins', 'Plugins')}
               isCollapsed={isCollapsed}
-            />
-            <SidebarItem
-              to="/email-templates"
-              icon={Mail}
-              label={t('nav.emailTemplates', 'Email Templates')}
-              isCollapsed={isCollapsed}
+              locked={!canUse('plugins')}
             />
           </SidebarSection>
         )}