From e234d5fd9cc17036b5db710d02d062d197e44675 Mon Sep 17 00:00:00 2001
From: poduck <poduck@gmail.com>
Date: Fri, 28 Nov 2025 21:29:02 -0500
Subject: [PATCH] feat: Add Plugins dropdown menu to Business sidebar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added Plugins collapsible menu with 3 items:
  - Plugin Marketplace (/plugins/marketplace)
  - My Plugins (/plugins/my-plugins)
  - Plugin Docs (/help/plugins)
- Moved Plugin Docs from Help dropdown to Plugins dropdown
- Added Plug, ShoppingBag, Package icons from lucide-react
- Added translations for plugin navigation items
- Auto-opens dropdown when on /plugins/* routes

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/src/components/Sidebar.tsx | 78 ++++++++++++++++++++++-------
 frontend/src/i18n/locales/en.json   |  5 +-
 2 files changed, 63 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index f5d41e8..8dba1ae 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -18,7 +18,10 @@ import {
   BookOpen,
   FileQuestion,
   LifeBuoy,
-  Zap
+  Zap,
+  Plug,
+  ShoppingBag,
+  Package
 } from 'lucide-react';
 import { Business, User } from '../types';
 import { useLogout } from '../hooks/useAuth';
@@ -37,6 +40,7 @@ const Sidebar: React.FC<SidebarProps> = ({ business, user, isCollapsed, toggleCo
   const { role } = user;
   const logoutMutation = useLogout();
   const [isHelpOpen, setIsHelpOpen] = useState(location.pathname.startsWith('/help') || location.pathname === '/support');
+  const [isPluginsOpen, setIsPluginsOpen] = useState(location.pathname.startsWith('/plugins'));
 
   const getNavClass = (path: string, exact: boolean = false, disabled: boolean = false) => {
     const isActive = exact
@@ -182,6 +186,52 @@ const Sidebar: React.FC<SidebarProps> = ({ business, user, isCollapsed, toggleCo
               <Users size={20} className="shrink-0" />
               {!isCollapsed && <span>{t('nav.staff')}</span>}
             </Link>
+
+            {/* Plugins Dropdown */}
+            <div>
+              <button
+                onClick={() => setIsPluginsOpen(!isPluginsOpen)}
+                className={`flex items-center gap-3 py-3 text-base font-medium rounded-lg transition-colors w-full ${isCollapsed ? 'px-3 justify-center' : 'px-4'} ${location.pathname.startsWith('/plugins') ? 'bg-white/10 text-white' : 'text-white/70 hover:text-white hover:bg-white/5'}`}
+                title={t('nav.plugins', 'Plugins')}
+              >
+                <Plug size={20} className="shrink-0" />
+                {!isCollapsed && (
+                  <>
+                    <span className="flex-1 text-left">{t('nav.plugins', 'Plugins')}</span>
+                    <ChevronDown size={16} className={`shrink-0 transition-transform ${isPluginsOpen ? 'rotate-180' : ''}`} />
+                  </>
+                )}
+              </button>
+              {isPluginsOpen && !isCollapsed && (
+                <div className="ml-4 mt-1 space-y-1 border-l border-white/20 pl-4">
+                  <Link
+                    to="/plugins/marketplace"
+                    className={`flex items-center gap-3 py-2 text-sm font-medium rounded-lg transition-colors px-3 ${location.pathname === '/plugins/marketplace' ? 'bg-white/10 text-white' : 'text-white/60 hover:text-white hover:bg-white/5'}`}
+                    title={t('nav.pluginMarketplace', 'Marketplace')}
+                  >
+                    <ShoppingBag size={16} className="shrink-0" />
+                    <span>{t('nav.pluginMarketplace', 'Marketplace')}</span>
+                  </Link>
+                  <Link
+                    to="/plugins/my-plugins"
+                    className={`flex items-center gap-3 py-2 text-sm font-medium rounded-lg transition-colors px-3 ${location.pathname === '/plugins/my-plugins' ? 'bg-white/10 text-white' : 'text-white/60 hover:text-white hover:bg-white/5'}`}
+                    title={t('nav.myPlugins', 'My Plugins')}
+                  >
+                    <Package size={16} className="shrink-0" />
+                    <span>{t('nav.myPlugins', 'My Plugins')}</span>
+                  </Link>
+                  <Link
+                    to="/help/plugins"
+                    className={`flex items-center gap-3 py-2 text-sm font-medium rounded-lg transition-colors px-3 ${location.pathname === '/help/plugins' ? 'bg-white/10 text-white' : 'text-white/60 hover:text-white hover:bg-white/5'}`}
+                    title={t('nav.pluginDocs', 'Plugin Documentation')}
+                  >
+                    <Zap size={16} className="shrink-0" />
+                    <span>{t('nav.pluginDocs', 'Plugin Docs')}</span>
+                  </Link>
+                </div>
+              )}
+            </div>
+
             {/* Help Dropdown */}
             <div>
               <button
@@ -216,24 +266,14 @@ const Sidebar: React.FC<SidebarProps> = ({ business, user, isCollapsed, toggleCo
                     <span>{t('nav.ticketingHelp', 'Ticketing System')}</span>
                   </Link>
                   {role === 'owner' && (
-                    <>
-                      <Link
-                        to="/help/api"
-                        className={`flex items-center gap-3 py-2 text-sm font-medium rounded-lg transition-colors px-3 ${location.pathname === '/help/api' ? 'bg-white/10 text-white' : 'text-white/60 hover:text-white hover:bg-white/5'}`}
-                        title={t('nav.apiDocs', 'API Documentation')}
-                      >
-                        <Code size={16} className="shrink-0" />
-                        <span>{t('nav.apiDocs', 'API Docs')}</span>
-                      </Link>
-                      <Link
-                        to="/help/plugins"
-                        className={`flex items-center gap-3 py-2 text-sm font-medium rounded-lg transition-colors px-3 ${location.pathname === '/help/plugins' ? 'bg-white/10 text-white' : 'text-white/60 hover:text-white hover:bg-white/5'}`}
-                        title={t('nav.pluginDocs', 'Automation Plugins')}
-                      >
-                        <Zap size={16} className="shrink-0" />
-                        <span>{t('nav.pluginDocs', 'Plugin Docs')}</span>
-                      </Link>
-                    </>
+                    <Link
+                      to="/help/api"
+                      className={`flex items-center gap-3 py-2 text-sm font-medium rounded-lg transition-colors px-3 ${location.pathname === '/help/api' ? 'bg-white/10 text-white' : 'text-white/60 hover:text-white hover:bg-white/5'}`}
+                      title={t('nav.apiDocs', 'API Documentation')}
+                    >
+                      <Code size={16} className="shrink-0" />
+                      <span>{t('nav.apiDocs', 'API Docs')}</span>
+                    </Link>
                   )}
                   <div className="pt-2 mt-2 border-t border-white/10">
                     <Link
diff --git a/frontend/src/i18n/locales/en.json b/frontend/src/i18n/locales/en.json
index 1bf2433..4b3202b 100644
--- a/frontend/src/i18n/locales/en.json
+++ b/frontend/src/i18n/locales/en.json
@@ -94,7 +94,10 @@
     "ticketingHelp": "Ticketing System",
     "apiDocs": "API Docs",
     "pluginDocs": "Plugin Docs",
-    "contactSupport": "Contact Support"
+    "contactSupport": "Contact Support",
+    "plugins": "Plugins",
+    "pluginMarketplace": "Marketplace",
+    "myPlugins": "My Plugins"
   },
   "help": {
     "guide": {