fix(ui): adjust blob view border style in Code Browser (#3324)

* fix(ui): fix blob view border style in code browser * [autofix.ci] apply automated fixes * update: scroll area * [autofix.ci] apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
TabbyML · Oct 28, 2024 · 4e8e1d7 · 4e8e1d7
1 parent 1b6e66a
commit 4e8e1d7
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 57 deletions.
diff --git a/ee/tabby-ui/app/files/components/blob-header.tsx b/ee/tabby-ui/app/files/components/blob-header.tsx
@@ -38,7 +38,6 @@ export const BlobHeader: React.FC<BlobHeaderProps> = ({
 }) => {
   const { chatSideBarVisible, setChatSideBarVisible, isChatEnabled } =
     React.useContext(SourceCodeBrowserContext)
-  const containerRef = React.useRef<HTMLDivElement>(null)
   const { activePath } = React.useContext(SourceCodeBrowserContext)
   const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2000 })
 
@@ -57,11 +56,7 @@ export const BlobHeader: React.FC<BlobHeaderProps> = ({
   }
 
   return (
-    <div
-      className={cn('sticky top-0 z-10 border', className)}
-      ref={containerRef}
-      {...props}
-    >
+    <div className={cn('rounded-t-lg border', className)} {...props}>
       {!hideBlobActions && (
         <div
           className={cn(

diff --git a/ee/tabby-ui/app/files/components/blob-mode-view.tsx b/ee/tabby-ui/app/files/components/blob-mode-view.tsx
@@ -65,19 +65,21 @@ const BlobModeViewRenderer: React.FC<BlobViewProps> = ({
 
   return (
     <div className={cn(className)}>
-      <BlobHeader blob={blob} contentLength={contentLength} canCopy={!isRaw}>
-        {isMarkdown && (
-          <Tabs
-            value={isPlain ? '1' : '0'}
-            onValueChange={onToggleMarkdownView}
-          >
-            <TabsList>
-              <TabsTrigger value="0">Preview</TabsTrigger>
-              <TabsTrigger value="1">Code</TabsTrigger>
-            </TabsList>
-          </Tabs>
-        )}
-      </BlobHeader>
+      <div className="sticky top-0 z-10 overflow-hidden bg-background">
+        <BlobHeader blob={blob} contentLength={contentLength} canCopy={!isRaw}>
+          {isMarkdown && (
+            <Tabs
+              value={isPlain ? '1' : '0'}
+              onValueChange={onToggleMarkdownView}
+            >
+              <TabsList>
+                <TabsTrigger value="0">Preview</TabsTrigger>
+                <TabsTrigger value="1">Code</TabsTrigger>
+              </TabsList>
+            </Tabs>
+          )}
+        </BlobHeader>
+      </div>
 
       {loading && !blob ? (
         <ListSkeleton className="p-2" />

diff --git a/ee/tabby-ui/app/files/components/code-editor-view.tsx b/ee/tabby-ui/app/files/components/code-editor-view.tsx
@@ -241,6 +241,7 @@ const CodeEditorView: React.FC<CodeEditorViewProps> = ({
 
   return (
     <CodeEditor
+      className="pb-2"
       value={value}
       theme={theme}
       language={language}

diff --git a/ee/tabby-ui/app/files/components/source-code-browser.tsx b/ee/tabby-ui/app/files/components/source-code-browser.tsx
@@ -22,6 +22,7 @@ import {
   ResizablePanel,
   ResizablePanelGroup
 } from '@/components/ui/resizable'
+import { ScrollArea } from '@/components/ui/scroll-area'
 import { BANNER_HEIGHT, useShowDemoBanner } from '@/components/demo-banner'
 import { ListSkeleton } from '@/components/skeleton'
 import { useTopbarProgress } from '@/components/topbar-progress-indicator'
@@ -656,7 +657,7 @@ const SourceCodeBrowserRenderer: React.FC<SourceCodeBrowserProps> = ({
       </ResizablePanel>
       <ResizableHandle className="hidden w-1 bg-border/40 hover:bg-border active:bg-blue-500 lg:block" />
       <ResizablePanel defaultSize={80} minSize={30}>
-        <div className="flex h-full flex-col">
+        <div className="mb-4 flex h-full flex-col">
           <CodeSearchBar
             className={cn(
               'z-40',
@@ -670,41 +671,43 @@ const SourceCodeBrowserRenderer: React.FC<SourceCodeBrowserProps> = ({
               })}
             />
           )}
-          <div className="flex h-full flex-col overflow-y-auto px-4 pb-4">
-            {!initialized ? (
-              <ListSkeleton className="rounded-lg border p-4" />
-            ) : showErrorView ? (
-              <ErrorView
-                className={`rounded-lg border p-4`}
-                error={viewAffectingError}
-              />
-            ) : (
-              <>
-                {isTreeMode && (
-                  <TreeModeView
-                    loading={fetchingTreeEntries}
-                    initialized={initialized}
-                    className={`rounded-lg border`}
-                  />
-                )}
-                {isBlobMode && (
-                  <BlobModeView
-                    blob={fileBlob}
-                    contentLength={contentLength}
-                    fileDisplayType={fileDisplayType}
-                    loading={fetchingRawFile || fetchingTreeEntries}
-                  />
-                )}
-                {isSearchMode && (
-                  <CodeSearchResultView
-                    results={repositoryGreps?.files}
-                    requestDuration={repositoryGreps?.elapsedMs}
-                    loading={fetchingRepositoryGrep}
-                  />
-                )}
-              </>
-            )}
-          </div>
+          <ScrollArea>
+            <div className="flex h-full flex-col px-4 pb-4">
+              {!initialized ? (
+                <ListSkeleton className="rounded-lg border p-4" />
+              ) : showErrorView ? (
+                <ErrorView
+                  className={`rounded-lg border p-4`}
+                  error={viewAffectingError}
+                />
+              ) : (
+                <>
+                  {isTreeMode && (
+                    <TreeModeView
+                      loading={fetchingTreeEntries}
+                      initialized={initialized}
+                      className={`rounded-lg border`}
+                    />
+                  )}
+                  {isBlobMode && (
+                    <BlobModeView
+                      blob={fileBlob}
+                      contentLength={contentLength}
+                      fileDisplayType={fileDisplayType}
+                      loading={fetchingRawFile || fetchingTreeEntries}
+                    />
+                  )}
+                  {isSearchMode && (
+                    <CodeSearchResultView
+                      results={repositoryGreps?.files}
+                      requestDuration={repositoryGreps?.elapsedMs}
+                      loading={fetchingRepositoryGrep}
+                    />
+                  )}
+                </>
+              )}
+            </div>
+          </ScrollArea>
         </div>
       </ResizablePanel>
       <>

diff --git a/ee/tabby-ui/app/files/components/tree-mode-view.tsx b/ee/tabby-ui/app/files/components/tree-mode-view.tsx
@@ -14,7 +14,6 @@ import {
 import { Skeleton } from '@/components/ui/skeleton'
 import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table'
 
-import { BlobHeader } from './blob-header'
 import { TFileTreeNode } from './file-tree'
 import { RepositoryKindIcon } from './repository-kind-icon'
 import { SourceCodeBrowserContext } from './source-code-browser'
@@ -76,7 +75,6 @@ const TreeModeView: React.FC<TreeModeViewProps> = ({
 
   return (
     <div className={cn('text-base', className)}>
-      <BlobHeader blob={undefined} hideBlobActions className="border-0" />
       {(loading && !files?.length) || !initialized ? (
         <FileTreeSkeleton />
       ) : files?.length ? (