Function SettingsSidebar

frontend/src/components/layout/SettingsSidebar.tsx:23–161

({
  activeTab,
  onTabChange,
})

}

const SettingsSidebar: React.FC<SettingsSidebarProps> = ({
  activeTab,
  onTabChange,
}) => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const { logout } = useAuth();
  const { showSuccess } = useNotifications();

  const handleLogout = async () => {
    try {
      await logout();
      navigate('/');
      
      // Show success notification for signout
      showSuccess(
        t('settings.signout.successTitle', { defaultValue: 'Signed out successfully' }),
        t('settings.signout.successMessage', { defaultValue: "You've been securely signed out of DataKit." }),
        { 
          icon: 'shield',
          duration: 3000
        }
      );
    } catch (error) {
      console.error('Logout failed:', error);
    }
  };

  const tabs = [
    { id: "profile", name: t('settings.tabs.profile', { defaultValue: 'Profile' }), icon: User },
    { id: "workspace", name: t('settings.tabs.workspace', { defaultValue: 'Workspace & Team' }), icon: Users },
    { id: "ai", name: t('settings.tabs.ai', { defaultValue: 'AI assistant settings' }), icon: Cpu },
    { id: "appearance", name: t('settings.tabs.appearance', { defaultValue: 'Appearance' }), icon: Palette },
    { id: "notifications", name: t('settings.tabs.notifications', { defaultValue: 'Notifications' }), icon: Bell },
    { id: "subscription", name: t('settings.tabs.subscription', { defaultValue: 'Subscription' }), icon: CreditCard },
  ];

  return (
    <div className="bg-darkNav flex flex-col h-full border-r border-gray-500/20 overflow-hidden w-56">
      {/* Header with title - matching main sidebar style */}
      <div className="px-5 py-4 border-b border-gray-500/20 bg-black/20 flex items-center gap-3">
        <button
          onClick={() => navigate("/")}
          className="text-white/70 hover:text-white transition-colors p-1 cursor-pointer hover:bg-white/5 rounded"
          aria-label="Back to DataKit"
        >
          <ArrowLeft size={18} />
        </button>
        <div>
          <h1 className="text-white font-heading font-medium text-lg">
            {t('settings.header.title', { defaultValue: 'Settings' })}
          </h1>
          <p className="text-xs text-white/50">{t('settings.header.subtitle', { defaultValue: 'Manage your account' })}</p>
        </div>
      </div>

      {/* Settings Navigation */}
      <div className="px-5 pt-2 pb-2 flex-1">