diff --git a/apps/x/apps/renderer/src/App.tsx b/apps/x/apps/renderer/src/App.tsx index 3ac0b24f..741eb5d2 100644 --- a/apps/x/apps/renderer/src/App.tsx +++ b/apps/x/apps/renderer/src/App.tsx @@ -13,7 +13,6 @@ import { ChatInputBar } from './components/chat-button'; import { ChatSidebar } from './components/chat-sidebar'; import { GraphView, type GraphEdge, type GraphNode } from '@/components/graph-view'; import { useDebounce } from './hooks/use-debounce'; -import { SidebarIcon } from '@/components/sidebar-icon'; import { SidebarContentPanel } from '@/components/sidebar-content'; import { SidebarSectionProvider, type ActiveSection } from '@/contexts/sidebar-context'; import { @@ -1501,16 +1500,9 @@ function App() {
- {/* Icon sidebar - always visible, fixed position */} - - - {/* Spacer for the fixed icon sidebar */} -
- {/* Content sidebar with SidebarProvider for collapse functionality */} diff --git a/apps/x/apps/renderer/src/components/sidebar-content.tsx b/apps/x/apps/renderer/src/components/sidebar-content.tsx index 8820dfed..ff614880 100644 --- a/apps/x/apps/renderer/src/components/sidebar-content.tsx +++ b/apps/x/apps/renderer/src/components/sidebar-content.tsx @@ -3,6 +3,7 @@ import * as React from "react" import { useState } from "react" import { + Brain, ChevronRight, ChevronsDownUp, ChevronsUpDown, @@ -11,9 +12,13 @@ import { FilePlus, Folder, FolderPlus, + HelpCircle, + ListTodo, MessageSquare, Network, Pencil, + Plug, + Settings, SquarePen, Trash2, } from "lucide-react" @@ -26,6 +31,7 @@ import { import { Sidebar, SidebarContent, + SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarHeader, @@ -48,7 +54,11 @@ import { ContextMenuTrigger, } from "@/components/ui/context-menu" import { Input } from "@/components/ui/input" -import { useSidebarSection } from "@/contexts/sidebar-context" +import { cn } from "@/lib/utils" +import { type ActiveSection, useSidebarSection } from "@/contexts/sidebar-context" +import { ConnectorsPopover } from "@/components/connectors-popover" +import { HelpPopover } from "@/components/help-popover" +import { SettingsDialog } from "@/components/settings-dialog" import { toast } from "@/lib/toast" interface TreeNode { @@ -93,11 +103,17 @@ type SidebarContentPanelProps = { tasksActions?: TasksActions } & React.ComponentProps -const sectionTitles = { - knowledge: "Knowledge", - tasks: "Tasks", +type NavItem = { + id: ActiveSection + title: string + icon: React.ElementType } +const navItems: NavItem[] = [ + { id: "knowledge", title: "Knowledge", icon: Brain }, + { id: "tasks", title: "Tasks", icon: ListTodo }, +] + export function SidebarContentPanel({ tree, selectedPath, @@ -109,13 +125,27 @@ export function SidebarContentPanel({ tasksActions, ...props }: SidebarContentPanelProps) { - const { activeSection } = useSidebarSection() + const { activeSection, setActiveSection } = useSidebarSection() return ( -
- {sectionTitles[activeSection]} +
+ {navItems.map((item) => ( + + ))}
@@ -136,6 +166,18 @@ export function SidebarContentPanel({ /> )} + +
+ {/* Help */} + + + +
+
) @@ -158,9 +200,9 @@ function KnowledgeSection({ const isExpanded = expandedPaths.size > 0 const quickActions = [ + { icon: Network, label: "Graph View", action: () => actions.openGraph() }, { icon: FilePlus, label: "New Note", action: () => actions.createNote() }, { icon: FolderPlus, label: "New Folder", action: () => actions.createFolder() }, - { icon: Network, label: "Graph View", action: () => actions.openGraph() }, ] return ( @@ -168,6 +210,13 @@ function KnowledgeSection({
+ + + {quickActions.map((action) => ( @@ -437,16 +486,26 @@ function TasksSection({ }) { return ( - {/* Sticky New Chat button - matches Knowledge section height */} -
- - - - - New chat - - - + {/* Sticky action bar - matches Knowledge section style */} +
+ + + + + New Chat + + + +
{runs.length > 0 && (