ui: refine nav (#161)

src/app/(main)/(admin)/documents/components/data-table-toolbar.tsx

@@ -31,15 +31,15 @@ export function DataTableToolbar({ table }: DataTableToolbarProps) {
   const [dialogOpen, setDialogOpen] = useState(false);
 
   return (
-    <div className="flex items-center justify-between">
+    <div className="flex items-center justify-between gap-4">
       <div className="flex flex-1 items-center space-x-2">
         <Input
           placeholder="Filter documents..."
           value={(table.getState().globalFilter as string) ?? ""}
           onChange={(event: { target: { value: any } }) =>
             table.setGlobalFilter(event.target.value)
           }
-          className="h-8 w-[150px] lg:w-[250px]"
+          className="w-full max-w-[250px] lg:max-w-[450px]"
         />
         {isFiltered && (
           <Button
@@ -52,7 +52,7 @@ export function DataTableToolbar({ table }: DataTableToolbarProps) {
           </Button>
         )}
       </div>
-      <div className="flex flex-1 items-center space-x-2">
+      <div className="ml-auto flex items-center space-x-2">
         <DataTableViewOptions table={table} />
         <ImportDocumentsDialog trigger={<Button size="sm">Import documents</Button>}/>
         {

src/app/(main)/(admin)/documents/components/data-table-view-options.tsx

@@ -25,8 +25,7 @@ export function DataTableViewOptions<TData>({
       <DropdownMenuTrigger asChild>
         <Button
           variant="outline"
-          size="sm"
-          className="ml-auto hidden h-8 lg:flex"
+          className="ml-auto hidden lg:flex"
         >
           <MixerHorizontalIcon className="mr-2 h-4 w-4" />
           View

src/app/(main)/(admin)/import-tasks/page.client.tsx → src/app/(main)/(admin)/documents/import-tasks/page.client.tsx

@@ -16,7 +16,12 @@ export default function TasksPage ({}: {}) {
 
   return (
     <>
-      <AdminPageHeading title="Importing tasks" />
+      <AdminPageHeading
+        breadcrumbs={[
+          { title: 'Documents', url: '/documents' },
+          { title: 'Importing Tasks' },
+        ]}
+      />
       <DataTableRemote
         before={
           <DataTableHeading>

src/app/(main)/(admin)/documents/page.client.tsx

@@ -4,11 +4,31 @@ import { columns } from '@/app/(main)/(admin)/documents/components/columns';
 import { DataTableToolbar } from '@/app/(main)/(admin)/documents/components/data-table-toolbar';
 import { AdminPageHeading } from '@/components/admin-page-heading';
 import { DataTableRemote } from '@/components/data-table-remote';
+import { ArrowRightIcon } from 'lucide-react';
+import Link from 'next/link';
 
 export default function DocumentsPage () {
   return (
     <>
-      <AdminPageHeading title="Documents" description="Uploading, managing, and indexing various documents" />
+      <AdminPageHeading
+        title="Documents"
+        description={(
+          <>
+            Uploading, managing, and indexing various documents.
+            <br />
+            <span className="text-xs underline text-secondary-foreground inline-flex items-center gap-4">
+              <Link className="underline" href="/documents/sources">
+                Source sites
+              </Link>
+              <Link className="underline" href="/documents/import-tasks">
+                Import tasks
+                <ArrowRightIcon className="inline-block w-3 h-3 ml-1" />
+              </Link>
+            </span>
+          </>
+
+        )}
+      />
       <DataTableRemote
         toolbar={table => {
           return <DataTableToolbar table={table} />;

src/app/(main)/(admin)/sources/page.tsx → src/app/(main)/(admin)/documents/sources/page.tsx

@@ -74,7 +74,12 @@ export default function Page () {
 
   return (
     <>
-      <AdminPageHeading title="Sources" />
+      <AdminPageHeading
+        breadcrumbs={[
+          { title: 'Documents', url: '/documents' },
+          { title: 'Sources' },
+        ]}
+      />
       <div className="flex justify-end">
         <ImportSiteDialog />
       </div>

src/app/(main)/(admin)/indexes/[id]/layout.tsx

@@ -1,4 +1,5 @@
 import { IndexConfigNav } from '@/app/(main)/(admin)/indexes/[id]/nav';
+import { AdminPageHeading } from '@/components/admin-page-heading';
 import { getIndex } from '@/core/repositories/index_';
 import type { LayoutProps } from '@/lib/next/types';
 import { notFound } from 'next/navigation';
@@ -10,7 +11,13 @@ export default async function Layout ({ children, params }: LayoutProps<{ id: st
     notFound();
   }
   return (
-    <div className='my-16'>
+    <div>
+      <AdminPageHeading
+        breadcrumbs={[
+          { title: 'Indexes', url: '/indexes' },
+          { title: index.name },
+        ]}
+      />
       <IndexProvider index={index}>
         <IndexConfigNav />
         {children}

src/app/(main)/(admin)/indexes/[id]/nav.tsx

@@ -14,7 +14,7 @@ export function IndexConfigNav () {
   const isGraph = index.config.provider === 'knowledge-graph';
 
   return (
-    <nav>
+    <nav className='my-4'>
       <ul className="flex gap-2 items-center">
         {(isGraph ? graphItems : items).map((item) => (
           <li key={item.part}>
@@ -36,11 +36,15 @@ export function IndexConfigNav () {
 }
 
 type NavItem<K> = { title: string, part: null | K, disabled?: boolean };
-const items: NavItem<keyof IndexConfig>[] = [
+const items: NavItem<string>[] = [
   {
     title: 'General',
     part: null,
   },
+  {
+    title: 'Tasks',
+    part: 'tasks',
+  },
   {
     title: 'Reader',
     part: 'reader',
@@ -64,11 +68,15 @@ const items: NavItem<keyof IndexConfig>[] = [
   },
 ];
 
-const graphItems: NavItem<'graph-editor' | 'graph-entities'>[] = [
+const graphItems: NavItem<string>[] = [
   {
     title: 'General',
     part: null,
   },
+  {
+    title: 'Tasks',
+    part: 'tasks',
+  },
   {
     title: 'Graph Editor',
     part: 'graph-editor',

src/app/(main)/(admin)/index-tasks/page.client.tsx → src/app/(main)/(admin)/indexes/[id]/tasks/page.client.tsx

@@ -11,8 +11,7 @@ import type { CellContext } from '@tanstack/react-table';
 import { createColumnHelper } from '@tanstack/table-core';
 import { format } from 'date-fns';
 
-export default function TasksPage ({}: {}) {
-
+export default function TasksPage ({ indexId }: { indexId: number }) {
   return (
     <>
       <AdminPageHeading title="Indexing tasks" />
@@ -24,7 +23,7 @@ export default function TasksPage ({}: {}) {
           </DataTableHeading>
         }
         idColumn="id"
-        api="/api/v1/tasks/document_index"
+        api={`/api/v1/tasks/document_index?index_id=${indexId}`}
         columns={columns as any}
       />
     </>

src/app/(main)/(admin)/indexes/[id]/tasks/page.tsx

@@ -0,0 +1,13 @@
+import { authGuard } from '@/lib/auth-server';
+import type { PageProps } from '@/lib/next/types';
+import TasksPage from './page.client';
+
+export default async function ServerTasksPage ({ params }: PageProps<{ id: string }>) {
+  await authGuard('admin');
+
+  return (
+    <TasksPage indexId={parseInt(params.id)} />
+  );
+}
+
+export const dynamic = 'force-dynamic';

src/app/(main)/nav.tsx

@@ -16,21 +16,7 @@ import type { Page } from '@/lib/database';
 import { fetcher } from '@/lib/fetch';
 import { cn } from '@/lib/utils';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import {
-  ActivitySquareIcon,
-  BinaryIcon,
-  CogIcon,
-  CommandIcon,
-  GlobeIcon,
-  HomeIcon,
-  ImportIcon,
-  ListIcon,
-  MenuIcon,
-  MessagesSquareIcon,
-  PlusIcon,
-  BotMessageSquareIcon,
-  FilesIcon
-} from 'lucide-react';
+import { ActivitySquareIcon, BinaryIcon, BotMessageSquareIcon, CogIcon, CommandIcon, FilesIcon, GlobeIcon, HomeIcon, ImportIcon, MenuIcon, MessagesSquareIcon, PlusIcon } from 'lucide-react';
 
 import { useSession } from 'next-auth/react';
 import Link from 'next/link';
@@ -109,10 +95,7 @@ export function Nav () {
         items: [
           { href: '/dashboard', title: 'Overview', icon: ActivitySquareIcon },
           { href: '/documents', title: 'Documents', icon: FilesIcon },
-          { href: '/sources', title: 'Data Sources', icon: ImportIcon },
-          { href: '/import-tasks', title: 'Import Tasks', icon: GlobeIcon },
           { href: '/indexes', title: 'Indexes', icon: BinaryIcon },
-          { href: '/index-tasks', title: 'Index Tasks', icon: ListIcon },
           { href: '/chat-engines', title: 'Chat Engines', icon: BotMessageSquareIcon },
           { href: '/settings', title: 'Settings', icon: CogIcon },
         ],

src/app/api/v1/tasks/document_index/route.ts

@@ -13,11 +13,13 @@ export const GET = defineHandler({
       'SUCCEED',
       'FAILED',
     ]).array().optional(),
+    index_id: z.coerce.number().optional(),
   }),
 }, async ({ request, searchParams }) => {
   return await listDocumentIndexTasks({
     ...toPageRequest(request),
     status: searchParams.status,
+    indexId: searchParams.index_id,
   });
 });
 

src/components/admin-page-heading.tsx

@@ -1,21 +1,45 @@
-import type { ReactNode } from 'react';
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
+import Link from 'next/link';
+import { Fragment, type ReactNode } from 'react';
+
+export interface BreadcrumbItem {
+  title: string;
+  url?: string;
+}
 
 export interface TableHeadingProps {
-  title: ReactNode;
+  title?: ReactNode;
   description?: ReactNode;
   actions?: ReactNode;
+  breadcrumbs?: BreadcrumbItem[];
 }
 
-export function AdminPageHeading ({ title, description, actions }: TableHeadingProps) {
+export function AdminPageHeading ({ title, description, actions, breadcrumbs }: TableHeadingProps) {
   return (
-    <div className="flex items-center gap-2">
+    <div className="flex items-center gap-2 mb-2">
+      {breadcrumbs && (
+        <Breadcrumb>
+          <BreadcrumbList>
+            {breadcrumbs.map((item, index) => (
+              <Fragment key={index}>
+                {index > 0 && <BreadcrumbSeparator />}
+                <BreadcrumbItem>
+                  {item.url
+                    ? <BreadcrumbLink asChild><Link href={item.url}>{item.title}</Link></BreadcrumbLink>
+                    : <BreadcrumbPage>{item.title}</BreadcrumbPage>}
+                </BreadcrumbItem>
+              </Fragment>
+            ))}
+          </BreadcrumbList>
+        </Breadcrumb>
+      )}
       <div>
-        <h2 className="text-2xl flex-shrink-0 font-semibold">{title}</h2>
-        <p className="text-muted-foreground">
+        {title && <h2 className="text-2xl flex-shrink-0 font-semibold">{title}</h2>}
+        <p className="mt-2text-sm text-muted-foreground">
           {description}
         </p>
       </div>
-      <div className="flex ml-auto gap-2">
+      <div className="mt-2 flex ml-auto gap-2">
         {actions}
       </div>
     </div>