add document manager and site heaer

clean

format

lightrag_webui/src/App.tsx

@@ -1,11 +1,17 @@
 import ThemeProvider from '@/components/ThemeProvider'
 import MessageAlert from '@/components/MessageAlert'
 import StatusIndicator from '@/components/StatusIndicator'
-import GraphViewer from '@/GraphViewer'
 import { healthCheckInterval } from '@/lib/constants'
 import { useBackendState } from '@/stores/state'
 import { useSettingsStore } from '@/stores/settings'
 import { useEffect } from 'react'
+import { Toaster } from 'sonner'
+import SiteHeader from '@/features/SiteHeader'
+
+import GraphViewer from '@/features/GraphViewer'
+import DocumentManager from '@/features/DocumentManager'
+
+import { Tabs, TabsContent } from '@/components/ui/Tabs'
 
 function App() {
   const message = useBackendState.use.message()
@@ -26,11 +32,23 @@ function App() {
 
   return (
     <ThemeProvider>
-      <div className="h-screen w-screen">
-        <GraphViewer />
+      <div className="flex h-screen w-screen">
+        <Tabs defaultValue="knowledge-graph" className="flex size-full flex-col">
+          <SiteHeader />
+          <TabsContent value="documents" className="flex-1">
+            <DocumentManager />
+          </TabsContent>
+          <TabsContent value="knowledge-graph" className="flex-1">
+            <GraphViewer />
+          </TabsContent>
+          <TabsContent value="settings" className="size-full">
+            <h1> Settings </h1>
+          </TabsContent>
+        </Tabs>
       </div>
       {enableHealthCheck && <StatusIndicator />}
       {message !== null && <MessageAlert />}
+      <Toaster />
     </ThemeProvider>
   )
 }