feat: add dedicated file tab

app/src/renderer/src/components/chat/Sidebar.tsx

@@ -30,6 +30,7 @@ import {
   ChevronUp,
   Globe,
   AlarmCheckIcon,
+  FolderIcon,
   HistoryIcon,
   SquarePen
 } from 'lucide-react'
@@ -347,6 +348,38 @@ export function Sidebar({ chats, setSidebarOpen, shortcuts, collapsed = false }:
               </Tooltip>
             </TooltipProvider>
           )}
+          <TooltipProvider>
+            <Tooltip delayDuration={collapsed ? 300 : 1000}>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  data-active={location.pathname === '/files'}
+                  className={cn(
+                    'group h-9 transition-all',
+                    collapsed
+                      ? 'w-10 p-0 justify-center text-foreground hover:bg-accent [&[data-active=true]]:text-foreground [&[data-active=true]]:bg-accent'
+                      : 'w-full justify-start px-2 text-sidebar-foreground hover:text-sidebar-accent-foreground [&[data-active=true]]:text-sidebar-accent-foreground [&[data-active=true]]:bg-sidebar-accent'
+                  )}
+                  onClick={() => navigate({ to: '/files' })}
+                >
+                  <FolderIcon
+                    className={cn(
+                      'w-4 h-4 transition-colors duration-100',
+                      collapsed
+                        ? 'w-5 h-5 text-foreground/60 group-hover:text-foreground'
+                        : 'text-sidebar-foreground/60 group-hover:text-sidebar-foreground'
+                    )}
+                  />
+                  {!collapsed && <span className="text-sm">Files</span>}
+                </Button>
+              </TooltipTrigger>
+              {collapsed && (
+                <TooltipContent side="right" align="center">
+                  <span>Tasks</span>
+                </TooltipContent>
+              )}
+            </Tooltip>
+          </TooltipProvider>
 
           {!isHolonsDisabled && (
             <TooltipProvider>

app/src/renderer/src/components/data-sources/LocalFilesTab.tsx

@@ -87,7 +87,7 @@ export default function LocalFilesTab() {
   }, [])
 
   return (
-    <div className="flex flex-col h-full gap-10">
+    <div className="flex flex-col h-full gap-10 w-full">
       <h2 className="text-2xl font-semibold">Files</h2>
       <div
         className={cn(

app/src/renderer/src/components/data-sources/files/FileBrowser.tsx

@@ -0,0 +1,15 @@
+import LocalFilesTab from '@renderer/components/data-sources/LocalFilesTab'
+import LocalFolderSync from '@renderer/components/data-sources/LocalFolderSync'
+import { ScrollArea } from '@renderer/components/ui/scroll-area'
+
+// dual pane interface?
+export function FileBrowser() {
+  return (
+    <ScrollArea className="flex flex-col h-full w-full">
+      <div className="flex flex-col w-full h-full gap-10 max-w-4xl mx-auto justify-center p-6">
+        <LocalFilesTab />
+        <LocalFolderSync />
+      </div>
+    </ScrollArea>
+  )
+}

app/src/renderer/src/routeTree.gen.ts

@@ -17,6 +17,7 @@ import { Route as OnboardingImport } from './routes/onboarding'
 import { Route as AdminImport } from './routes/admin'
 import { Route as IndexImport } from './routes/index'
 import { Route as HolonIndexImport } from './routes/holon/index'
+import { Route as FilesIndexImport } from './routes/files/index'
 import { Route as SettingsPermissionsImport } from './routes/settings.permissions'
 import { Route as SettingsDataSourcesImport } from './routes/settings.data-sources'
 import { Route as SettingsCustomizeImport } from './routes/settings.customize'
@@ -63,6 +64,12 @@ const HolonIndexRoute = HolonIndexImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
+const FilesIndexRoute = FilesIndexImport.update({
+  id: '/files/',
+  path: '/files/',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const SettingsPermissionsRoute = SettingsPermissionsImport.update({
   id: '/permissions',
   path: '/permissions',
@@ -193,6 +200,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SettingsPermissionsImport
       parentRoute: typeof SettingsImport
     }
+    '/files/': {
+      id: '/files/'
+      path: '/files'
+      fullPath: '/files'
+      preLoaderRoute: typeof FilesIndexImport
+      parentRoute: typeof rootRoute
+    }
     '/holon/': {
       id: '/holon/'
       path: '/holon'
@@ -238,6 +252,7 @@ export interface FileRoutesByFullPath {
   '/settings/customize': typeof SettingsCustomizeRoute
   '/settings/data-sources': typeof SettingsDataSourcesRoute
   '/settings/permissions': typeof SettingsPermissionsRoute
+  '/files': typeof FilesIndexRoute
   '/holon': typeof HolonIndexRoute
 }
 
@@ -254,6 +269,7 @@ export interface FileRoutesByTo {
   '/settings/customize': typeof SettingsCustomizeRoute
   '/settings/data-sources': typeof SettingsDataSourcesRoute
   '/settings/permissions': typeof SettingsPermissionsRoute
+  '/files': typeof FilesIndexRoute
   '/holon': typeof HolonIndexRoute
 }
 
@@ -271,6 +287,7 @@ export interface FileRoutesById {
   '/settings/customize': typeof SettingsCustomizeRoute
   '/settings/data-sources': typeof SettingsDataSourcesRoute
   '/settings/permissions': typeof SettingsPermissionsRoute
+  '/files/': typeof FilesIndexRoute
   '/holon/': typeof HolonIndexRoute
 }
 
@@ -289,6 +306,7 @@ export interface FileRouteTypes {
     | '/settings/customize'
     | '/settings/data-sources'
     | '/settings/permissions'
+    | '/files'
     | '/holon'
   fileRoutesByTo: FileRoutesByTo
   to:
@@ -304,6 +322,7 @@ export interface FileRouteTypes {
     | '/settings/customize'
     | '/settings/data-sources'
     | '/settings/permissions'
+    | '/files'
     | '/holon'
   id:
     | '__root__'
@@ -319,6 +338,7 @@ export interface FileRouteTypes {
     | '/settings/customize'
     | '/settings/data-sources'
     | '/settings/permissions'
+    | '/files/'
     | '/holon/'
   fileRoutesById: FileRoutesById
 }
@@ -331,6 +351,7 @@ export interface RootRouteChildren {
   TasksRoute: typeof TasksRoute
   ChatChatIdRoute: typeof ChatChatIdRoute
   HolonThreadIdRoute: typeof HolonThreadIdRoute
+  FilesIndexRoute: typeof FilesIndexRoute
   HolonIndexRoute: typeof HolonIndexRoute
 }
 
@@ -342,6 +363,7 @@ const rootRouteChildren: RootRouteChildren = {
   TasksRoute: TasksRoute,
   ChatChatIdRoute: ChatChatIdRoute,
   HolonThreadIdRoute: HolonThreadIdRoute,
+  FilesIndexRoute: FilesIndexRoute,
   HolonIndexRoute: HolonIndexRoute,
 }
 
@@ -362,6 +384,7 @@ export const routeTree = rootRoute
         "/tasks",
         "/chat/$chatId",
         "/holon/$threadId",
+        "/files/",
         "/holon/"
       ]
     },
@@ -413,6 +436,9 @@ export const routeTree = rootRoute
       "filePath": "settings.permissions.tsx",
       "parent": "/settings"
     },
+    "/files/": {
+      "filePath": "files/index.tsx"
+    },
     "/holon/": {
       "filePath": "holon/index.tsx"
     }

app/src/renderer/src/routes/files/index.tsx

@@ -0,0 +1,10 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { FileBrowser } from '@renderer/components/data-sources/files/FileBrowser'
+
+export const Route = createFileRoute('/files/')({
+  component: RouteComponent
+})
+
+function RouteComponent() {
+  return <FileBrowser />
+}