Enhanced Document Views for Source Explorer

src/components/sources/DocumentTable.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+import { FaEye } from "react-icons/fa";
+import { formatTimeAgo } from "@/utils/dateUtils";
+import { Document } from "@/types";
+
+interface DocumentTableProps {
+  documents: Document[];
+  domain: string;
+  onViewDocument: (url: string) => void;
+}
+
+const DocumentTable: React.FC<DocumentTableProps> = ({
+  documents,
+  domain,
+  onViewDocument,
+}) => {
+  const trimUrl = (url: string, domain: string): string => {
+    const domainPattern = new RegExp(
+      `^(https?:\/\/)?(www\.)?${domain.replace(".", ".")}/?`,
+      "i"
+    );
+    const trimmed = url.replace(domainPattern, "");
+    return trimmed.startsWith("/") ? trimmed : `/${trimmed}`;
+  };
+
+  return (
+    <table className="min-w-full border border-custom-stroke">
+      <thead>
+        <tr className="bg-custom-hover-state dark:bg-custom-hover-primary">
+          <th className="px-4 py-2 border-b border-custom-stroke">Title</th>
+          <th className="px-4 py-2 border-b border-custom-stroke">URL</th>
+          <th className="px-4 py-2 border-b border-custom-stroke">
+            Indexed At
+          </th>
+          <th className="w-10 px-2 py-2 border-b border-custom-stroke"></th>
+        </tr>
+      </thead>
+      <tbody>
+        {documents?.map((doc, index) => (
+          <tr
+            key={doc.url}
+            className={
+              index % 2 === 0
+                ? "bg-custom-hover-state dark:bg-custom-hover-primary"
+                : "bg-custom-background"
+            }
+          >
+            <td className="px-4 py-2 border-b border-custom-stroke max-w-xs">
+              <div className="truncate" title={doc.title}>
+                {doc.title}
+              </div>
+            </td>
+            <td className="px-4 py-2 border-b border-custom-stroke">
+              <div className="truncate max-w-md">
+                <a
+                  href={doc.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-custom-accent hover:underline"
+                  title={doc.url}
+                >
+                  {doc.url && trimUrl(doc.url, domain)}
+                </a>
+              </div>
+            </td>
+            <td className="px-4 py-2 border-b border-custom-stroke whitespace-nowrap">
+              <div className="group relative inline-block">
+                <span>{formatTimeAgo(doc.indexed_at)}</span>
+                <span className="invisible group-hover:visible absolute left-0 -translate-x-1/2 bottom-full mb-2 px-2 py-1 text-sm bg-custom-black text-custom-white rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap z-10">
+                  {new Date(doc.indexed_at).toLocaleString()}
+                </span>
+              </div>
+            </td>
+            <td className="w-10 px-2 py-2 border-b border-custom-stroke text-center">
+              <button
+                onClick={() => onViewDocument(doc.url)}
+                className="text-custom-accent hover:text-custom-accent-dark"
+                title="View document"
+              >
+                <FaEye className="w-5 h-5 inline-block" />
+              </button>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+export default DocumentTable;

src/components/sources/Documents.tsx

@@ -1,28 +1,32 @@
 import React, { useState } from "react";
-import { FaEye } from "react-icons/fa";
-
 import { useSourceDocuments } from "@/hooks/useSourceDocuments";
 import { useDocumentContent } from "@/hooks/useDocumentContent";
-import { formatTimeAgo } from "@/utils/dateUtils";
 import DocumentModal from "./DocumentModal";
+import ViewModeSelector from "./ViewModeSelector";
+import PaginationControls from "./PaginationControls";
+import DocumentTable from "./DocumentTable";
+import ThreadedDocumentTable from "./ThreadedDocumentTable";
+import { ViewMode, ViewModeType } from "@/types";
 
 interface SourceDocumentsProps {
   domain: string;
+  hasSummaries: boolean;
+  hasThreads: boolean;
 }
 
-const trimUrl = (url: string, domain: string): string => {
-  const domainPattern = new RegExp(
-    `^(https?:\/\/)?(www\.)?${domain.replace(".", ".")}/?`,
-    "i"
-  );
-  const trimmed = url.replace(domainPattern, "");
-  return trimmed.startsWith("/") ? trimmed : `/${trimmed}`;
-};
-
-const Documents: React.FC<SourceDocumentsProps> = ({ domain }) => {
+const Documents: React.FC<SourceDocumentsProps> = ({
+  domain,
+  hasSummaries,
+  hasThreads,
+}) => {
   const [page, setPage] = useState(1);
+  const [threadsPage, setThreadsPage] = useState(1);
+  const [viewMode, setViewMode] = useState<ViewModeType>(ViewMode.FLAT);
+  const [expandedThreads, setExpandedThreads] = useState(new Set<string>());
+
   const { sourceDocuments, total, isLoading, isError, error } =
-    useSourceDocuments(domain, page);
+    useSourceDocuments(domain, page, viewMode, threadsPage);
+
   const [selectedDocumentUrl, setSelectedDocumentUrl] = useState<string | null>(
     null
   );
@@ -39,98 +43,90 @@ const Documents: React.FC<SourceDocumentsProps> = ({ domain }) => {
 
   const totalPages = Math.ceil(total / 10);
 
+  const handleViewModeChange = (newMode: ViewModeType) => {
+    // Reset to flat view if trying to switch to an unavailable mode
+    if (
+      (newMode === ViewMode.THREADED && !hasThreads) ||
+      (newMode === ViewMode.SUMMARIES && !hasSummaries)
+    ) {
+      newMode = ViewMode.FLAT;
+    }
+    setViewMode(newMode);
+    setPage(1);
+    setThreadsPage(1);
+    setExpandedThreads(new Set());
+  };
+
+  const toggleThread = (threadUrl: string) => {
+    const newExpanded = new Set(expandedThreads);
+    if (newExpanded.has(threadUrl)) {
+      newExpanded.delete(threadUrl);
+    } else {
+      newExpanded.add(threadUrl);
+    }
+    setExpandedThreads(newExpanded);
+  };
+
   const handleViewDocument = (url: string) => {
     setSelectedDocumentUrl(url);
   };
 
+  // Group documents by thread_url for threaded view
+  const threadGroups =
+    viewMode === ViewMode.THREADED
+      ? sourceDocuments?.reduce((acc, doc) => {
+          const threadUrl = doc.thread_url || "ungrouped";
+          if (!acc[threadUrl]) {
+            acc[threadUrl] = [];
+          }
+          acc[threadUrl].push(doc);
+          return acc;
+        }, {} as Record<string, typeof sourceDocuments>)
+      : {};
+
+  const handlePageChange = (newPage: number) => {
+    if (viewMode === ViewMode.THREADED) {
+      setThreadsPage(newPage);
+    } else {
+      setPage(newPage);
+    }
+  };
+
   return (
     <div className="mt-4">
-      <h3 className="text-lg font-semibold mb-2">Documents for {domain}</h3>
-      <div className="overflow-x-auto">
-        <table className="min-w-full border border-custom-stroke">
-          <thead>
-            <tr className="bg-custom-hover-state dark:bg-custom-hover-primary">
-              <th className="px-4 py-2 border-b border-custom-stroke whitespace-nowrap">
-                Title
-              </th>
-              <th className="px-4 py-2 border-b border-custom-stroke whitespace-nowrap">
-                URL
-              </th>
-              <th className="px-4 py-2 border-b border-custom-stroke whitespace-nowrap">
-                Indexed At
-              </th>
-              <th className="w-10 px-2 py-2 border-b border-custom-stroke"></th>
-            </tr>
-          </thead>
-          <tbody>
-            {sourceDocuments?.map((doc, index) => (
-              <tr
-                key={index}
-                className={
-                  index % 2 === 0
-                    ? "bg-custom-hover-state dark:bg-custom-hover-primary"
-                    : "bg-custom-background"
-                }
-              >
-                <td className="px-4 py-2 border-b border-custom-stroke max-w-xs">
-                  <div className="truncate" title={doc.title}>
-                    {doc.title}
-                  </div>
-                </td>
-                <td className="px-4 py-2 border-b border-custom-stroke">
-                  <div className="truncate max-w-md">
-                    <a
-                      href={doc.url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-custom-accent hover:underline"
-                      title={doc.url}
-                    >
-                      {trimUrl(doc.url, domain)}
-                    </a>
-                  </div>
-                </td>
-                <td className="px-4 py-2 border-b border-custom-stroke whitespace-nowrap">
-                  <div className="group relative inline-block">
-                    <span>{formatTimeAgo(doc.indexed_at)}</span>
-                    <span className="invisible group-hover:visible absolute left-0 -translate-x-1/2 bottom-full mb-2 px-2 py-1 text-sm bg-custom-black text-custom-white rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap z-10">
-                      {new Date(doc.indexed_at).toLocaleString()}
-                    </span>
-                  </div>
-                </td>
-                <td className="w-10 px-2 py-2 border-b border-custom-stroke text-center">
-                  <button
-                    onClick={() => handleViewDocument(doc.url)}
-                    className="text-custom-accent hover:text-custom-accent-dark"
-                    title="View document"
-                  >
-                    <FaEye className="w-5 h-5 inline-block" />
-                  </button>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
+      <div className="flex justify-between items-center mb-4">
+        <h3 className="text-lg font-semibold">Documents for {domain}</h3>
+        <ViewModeSelector
+          viewMode={viewMode}
+          onViewModeChange={handleViewModeChange}
+          hasThreads={hasThreads}
+          hasSummaries={hasSummaries}
+        />
       </div>
-      <div className="mt-4 flex justify-between items-center">
-        <button
-          onClick={() => setPage((p) => Math.max(1, p - 1))}
-          disabled={page === 1}
-          className="px-4 py-2 bg-custom-button text-custom-white rounded disabled:opacity-50"
-        >
-          Previous
-        </button>
-        <span>
-          Page {page} of {totalPages}
-        </span>
-        <button
-          onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
-          disabled={page === totalPages}
-          className="px-4 py-2 bg-custom-button text-custom-white rounded disabled:opacity-50"
-        >
-          Next
-        </button>
+
+      <div className="overflow-x-auto">
+        {viewMode === ViewMode.THREADED ? (
+          <ThreadedDocumentTable
+            threadGroups={threadGroups}
+            expandedThreads={expandedThreads}
+            onToggleThread={toggleThread}
+            onViewDocument={handleViewDocument}
+          />
+        ) : (
+          <DocumentTable
+            documents={sourceDocuments}
+            domain={domain}
+            onViewDocument={handleViewDocument}
+          />
+        )}
       </div>
+
+      <PaginationControls
+        currentPage={viewMode === ViewMode.THREADED ? threadsPage : page}
+        totalPages={totalPages}
+        onPageChange={handlePageChange}
+      />
+
       <DocumentModal
         isOpen={!!selectedDocumentUrl}
         onClose={() => setSelectedDocumentUrl(null)}

src/components/sources/PaginationControls.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+interface PaginationControlsProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (newPage: number) => void;
+}
+
+const PaginationControls: React.FC<PaginationControlsProps> = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+}) => {
+  return (
+    <div className="mt-4 flex justify-between items-center">
+      <button
+        onClick={() => onPageChange(Math.max(1, currentPage - 1))}
+        disabled={currentPage === 1}
+        className="px-4 py-2 bg-custom-button text-custom-white rounded disabled:opacity-50"
+      >
+        Previous
+      </button>
+      <span>
+        Page {currentPage} of {totalPages}
+      </span>
+      <button
+        onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))}
+        disabled={currentPage === totalPages}
+        className="px-4 py-2 bg-custom-button text-custom-white rounded disabled:opacity-50"
+      >
+        Next
+      </button>
+    </div>
+  );
+};
+
+export default PaginationControls;