- remove trash

- added help popover

apps/x/apps/renderer/src/components/connectors-popover.tsx

@@ -9,6 +9,11 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
 import { Switch } from "@/components/ui/switch"
@@ -23,9 +28,10 @@ interface ProviderState {
 
 interface ConnectorsPopoverProps {
   children: React.ReactNode
+  tooltip?: string
 }
 
-export function ConnectorsPopover({ children }: ConnectorsPopoverProps) {
+export function ConnectorsPopover({ children, tooltip }: ConnectorsPopoverProps) {
   const [open, setOpen] = useState(false)
   const [providers, setProviders] = useState<string[]>([])
   const [providersLoading, setProvidersLoading] = useState(true)
@@ -199,9 +205,22 @@ export function ConnectorsPopover({ children }: ConnectorsPopoverProps) {
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
+      {tooltip ? (
-        {children}
+        <Tooltip open={open ? false : undefined}>
-      </PopoverTrigger>
+          <TooltipTrigger asChild>
+            <PopoverTrigger asChild>
+              {children}
+            </PopoverTrigger>
+          </TooltipTrigger>
+          <TooltipContent side="right" sideOffset={8}>
+            {tooltip}
+          </TooltipContent>
+        </Tooltip>
+      ) : (
+        <PopoverTrigger asChild>
+          {children}
+        </PopoverTrigger>
+      )}
       <PopoverContent
         side="right"
         align="end"

apps/x/apps/renderer/src/components/help-popover.tsx

@@ -0,0 +1,81 @@
+"use client"
+
+import * as React from "react"
+import { useState } from "react"
+import { MessageCircle } from "lucide-react"
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { Button } from "@/components/ui/button"
+
+interface HelpPopoverProps {
+  children: React.ReactNode
+  tooltip?: string
+}
+
+export function HelpPopover({ children, tooltip }: HelpPopoverProps) {
+  const [open, setOpen] = useState(false)
+
+  const handleDiscordClick = () => {
+    window.open("https://discord.com/invite/rxB8pzHxaS", "_blank")
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      {tooltip ? (
+        <Tooltip open={open ? false : undefined}>
+          <TooltipTrigger asChild>
+            <PopoverTrigger asChild>
+              {children}
+            </PopoverTrigger>
+          </TooltipTrigger>
+          <TooltipContent side="right" sideOffset={8}>
+            {tooltip}
+          </TooltipContent>
+        </Tooltip>
+      ) : (
+        <PopoverTrigger asChild>
+          {children}
+        </PopoverTrigger>
+      )}
+      <PopoverContent
+        side="right"
+        align="end"
+        sideOffset={8}
+        className="w-80 p-0"
+      >
+        <div className="p-4 border-b">
+          <h4 className="font-semibold text-sm">Help & Support</h4>
+          <p className="text-xs text-muted-foreground mt-1">
+            Get help from our community
+          </p>
+        </div>
+        <div className="p-2">
+          <Button
+            variant="ghost"
+            className="w-full justify-start gap-3 h-auto py-3"
+            onClick={handleDiscordClick}
+          >
+            <div className="flex size-8 items-center justify-center rounded-md bg-[#5865F2]">
+              <MessageCircle className="size-4 text-white" />
+            </div>
+            <div className="flex flex-col items-start">
+              <span className="text-sm font-medium">Join our Discord</span>
+              <span className="text-xs text-muted-foreground">
+                Chat with the community
+              </span>
+            </div>
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}

apps/x/apps/renderer/src/components/sidebar-icon.tsx

@@ -8,7 +8,6 @@ import {
   Plug,
   Settings,
   Ship,
-  Trash2,
 } from "lucide-react"
 
 import { cn } from "@/lib/utils"
@@ -19,6 +18,7 @@ import {
 } from "@/components/ui/tooltip"
 import { type ActiveSection, useSidebarSection } from "@/contexts/sidebar-context"
 import { ConnectorsPopover } from "@/components/connectors-popover"
+import { HelpPopover } from "@/components/help-popover"
 
 type NavItem = {
   id: ActiveSection
@@ -26,23 +26,11 @@ type NavItem = {
   icon: React.ElementType
 }
 
-type SecondaryItem = {
-  id: string
-  title: string
-  icon: React.ElementType
-  action?: () => void
-}
-
 const navItems: NavItem[] = [
   { id: "knowledge", title: "Knowledge", icon: Brain },
   { id: "agents", title: "Agents", icon: Bot },
 ]
 
-const secondaryItems: SecondaryItem[] = [
-  { id: "trash", title: "Trash", icon: Trash2 },
-  { id: "help", title: "Help", icon: HelpCircle },
-]
-
 export function SidebarIcon() {
   const { activeSection, setActiveSection } = useSidebarSection()
 
@@ -80,7 +68,7 @@ export function SidebarIcon() {
       {/* Secondary navigation (bottom) */}
       <nav className="flex flex-col items-center gap-1">
         {/* Connectors */}
-        <ConnectorsPopover>
+        <ConnectorsPopover tooltip="Connectors">
           <button
             className="flex h-10 w-10 items-center justify-center rounded-md text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground transition-colors"
           >
@@ -102,21 +90,14 @@ export function SidebarIcon() {
           </TooltipContent>
         </Tooltip>
 
-        {secondaryItems.map((item) => (
+        {/* Help */}
-          <Tooltip key={item.id}>
+        <HelpPopover tooltip="Help">
-            <TooltipTrigger asChild>
+          <button
-              <button
+            className="flex h-10 w-10 items-center justify-center rounded-md text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground transition-colors"
-                onClick={item.action}
+          >
-                className="flex h-10 w-10 items-center justify-center rounded-md text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground transition-colors"
+            <HelpCircle className="size-5" />
-              >
+          </button>
-                <item.icon className="size-5" />
+        </HelpPopover>
-              </button>
-            </TooltipTrigger>
-            <TooltipContent side="right" sideOffset={8}>
-              {item.title}
-            </TooltipContent>
-          </Tooltip>
-        ))}
       </nav>
     </div>
   )