Merge remote changes from origin/main

src/components/layout/sidebar.tsx

@@ -18,10 +18,12 @@ import {
   PanelLeftClose,
   MessageSquare,
   Bot,
+  Facebook,
 } from "lucide-react"
 import { COMPANY_NAME } from "@/lib/constants"
 import { useUser } from "@/providers/user-provider"
 import { useNotifications } from "@/providers/notification-provider"
+import { FacebookAccountsDialog } from "@/components/settings/facebook-accounts-dialog"
 
 const navItems = [
   { href: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
@@ -43,7 +45,9 @@ export function Sidebar({ collapsed, onToggle, mobileOpen, onMobileClose }: Side
   const pathname = usePathname()
   const { user } = useUser()
   const { unreadChatCount } = useNotifications()
+  const [fbDialogOpen, setFbDialogOpen] = useState(false)
   if (!user) return null
+  const isAdmin = user.role === "admin" || user.role === "super_admin"
   const initials = user.name.split(" ").map((n) => n[0]).join("")
 
   const sidebarContent = (
@@ -143,6 +147,39 @@ export function Sidebar({ collapsed, onToggle, mobileOpen, onMobileClose }: Side
             </Link>
           )
         })}
+        {isAdmin && collapsed && (
+          <TooltipProvider delayDuration={0}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  onClick={() => setFbDialogOpen(true)}
+                  className="relative flex h-10 w-10 items-center justify-center rounded-lg transition-colors text-sidebar-foreground/60 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+                >
+                  <Facebook className="h-5 w-5" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="right" className="ml-2">
+                Facebook Accounts
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        )}
+        {isAdmin && !collapsed && (
+          <button
+            onClick={() => setFbDialogOpen(true)}
+            className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors text-sidebar-foreground/60 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+          >
+            <Facebook className="h-5 w-5 shrink-0" />
+            <motion.span
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              className="truncate"
+            >
+              Facebook Accounts
+            </motion.span>
+          </button>
+        )}
       </nav>
 
       {/* Collapse toggle at bottom (only in collapsed mode) */}
@@ -189,6 +226,8 @@ export function Sidebar({ collapsed, onToggle, mobileOpen, onMobileClose }: Side
         {sidebarContent}
       </aside>
 
+      <FacebookAccountsDialog open={fbDialogOpen} onOpenChange={setFbDialogOpen} />
+
       {/* Mobile sidebar overlay */}
       <AnimatePresence>
         {mobileOpen && (