From 58ca7de2825393ee986c08e4b3e376c36b8d182c Mon Sep 17 00:00:00 2001
From: Brent O'Neill <brent.oneill@datastax.com>
Date: Tue, 30 Sep 2025 11:51:49 -0600
Subject: [PATCH] design sweep for chunks page

---
 frontend/src/app/knowledge/chunks/page.tsx | 61 +++++++++-------------
 1 file changed, 25 insertions(+), 36 deletions(-)

diff --git a/frontend/src/app/knowledge/chunks/page.tsx b/frontend/src/app/knowledge/chunks/page.tsx
index 264af4dc..908ad6d3 100644
--- a/frontend/src/app/knowledge/chunks/page.tsx
+++ b/frontend/src/app/knowledge/chunks/page.tsx
@@ -1,13 +1,6 @@
 "use client";
 
-import {
-  ArrowLeft,
-  Check,
-  Copy,
-  File as FileIcon,
-  Loader2,
-  Search,
-} from "lucide-react";
+import { ArrowLeft, Check, Copy, Loader2, Search } from "lucide-react";
 import { Suspense, useCallback, useEffect, useMemo, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { ProtectedRoute } from "@/components/protected-route";
@@ -78,7 +71,7 @@ function ChunksPageContent() {
     // Trim whitespace and remove new lines/tabs for cleaner copy
     navigator.clipboard.writeText(text.trim().replace(/[\n\r\t]/gm, ""));
     setActiveCopiedChunkIndex(index);
-    setTimeout(() => setActiveCopiedChunkIndex(null), 30 * 1000); // 30 seconds
+    setTimeout(() => setActiveCopiedChunkIndex(null), 10 * 1000); // 10 seconds
   }, []);
 
   const fileData = (data as File[]).find(
@@ -155,17 +148,29 @@ function ChunksPageContent() {
       <div className="flex-1 flex flex-col min-h-0 px-6 py-6">
         {/* Header */}
         <div className="flex flex-col mb-6">
-          <div className="flex items-center gap-3 mb-2">
-            <Button variant="ghost" onClick={handleBack}>
-              <ArrowLeft size={18} />
-              <FileIcon className="text-muted-foreground" size={18} />
-              <h1 className="text-lg font-semibold">
-                {filename.replace(/\.[^/.]+$/, "")}
-              </h1>
+          <div className="flex flex-row items-center gap-3 mb-6">
+            <Button variant="ghost" onClick={handleBack} size="sm">
+              <ArrowLeft size={24} />
             </Button>
+            <h1 className="text-lg font-semibold">
+              {/* Removes file extension from filename */}
+              {filename.replace(/\.[^/.]+$/, "")}
+            </h1>
           </div>
-          <div className="flex items-center gap-3 pl-4 mt-2">
-            <div className="flex items-center gap-2">
+          <div className="flex flex-col items-start mt-2">
+            <div className="flex-1 flex items-center gap-2 w-full max-w-[616px] mb-8">
+              <Input
+                name="search-query"
+                icon={!queryInputText.length ? <Search size={18} /> : null}
+                id="search-query"
+                type="text"
+                defaultValue={parsedFilterData?.query}
+                value={queryInputText}
+                onChange={(e) => setQueryInputText(e.target.value)}
+                placeholder="Search chunks..."
+              />
+            </div>
+            <div className="flex items-center pl-4 gap-2">
               <Checkbox
                 id="selectAllChunks"
                 checked={selectAll}
@@ -180,26 +185,11 @@ function ChunksPageContent() {
                 Select all
               </Label>
             </div>
-            <div className="flex-1 flex items-center gap-2">
-              <Input
-                name="search-query"
-                id="search-query"
-                type="text"
-                defaultValue={parsedFilterData?.query}
-                value={queryInputText}
-                onChange={(e) => setQueryInputText(e.target.value)}
-                placeholder="Search chunks..."
-                className="flex-1 bg-muted/20 rounded-lg border border-border/50 px-4 py-3 focus-visible:ring-1 focus-visible:ring-ring"
-              />
-              <Button variant="outline" size="sm">
-                <Search />
-              </Button>
-            </div>
           </div>
         </div>
 
         {/* Content Area - matches knowledge page structure */}
-        <div className="flex-1 overflow-auto">
+        <div className="flex-1 overflow-scroll pr-6">
           {isFetching ? (
             <div className="flex items-center justify-center h-64">
               <div className="text-center">
@@ -244,10 +234,9 @@ function ChunksPageContent() {
                       </span>
                       <div className="py-1">
                         <Button
-                          className="p-1"
                           onClick={() => handleCopy(chunk.text, index)}
                           variant="ghost"
-                          size="xs"
+                          size="sm"
                         >
                           {activeCopiedChunkIndex === index ? (
                             <Check className="text-muted-foreground" />