feat(ui): add dynamic window title and sprite-based project/file icons (#529)
* feat(ui): add dynamic titles and sprite-based project/file icons * feat(files): add viewer syntax fallback and tab file icons * fix(files): restore file viewer highlighting and add diff file icons * feat(git): add file icons and async file-viewer syntax fallback * fix(files): force codemirror token colors in file viewer * feat(files): add shiki view mode for file viewer * fix(files): force codemirror parse after programmatic content updates * feat(files): support markdown frontmatter preview * feat(chat): use pierre diffs for tool previews * feat(chat): add configurable beautiful-mermaid rendering * feat(perf): virtualize chat rendering and add react-scan toggle * feat(build): enable React Compiler in Vite React apps * fix(chat): reduce rerenders from tooltips and streamed activity * fix(ui): make MessageList React Compiler safe * chore(ui): batch commit remaining pending ui updates * fix: polish chat and diff preview rendering - Keep Mermaid action buttons fixed while diagram content scrolls - Align Diff All Files headers and match Git-style path truncation - Default chat tool diffs to unified view with lightweight indicators disabled * fix: preserve file tree expansion and delay git action label collapse * fix: refine project icon controls in settings --------- Co-authored-by: Bohdan Triapitsyn <artmore@protonmail.com>
This commit is contained in:
shekohex
committed by
GitHub
GitHub
co-authored by
Bohdan Triapitsyn
Bohdan Triapitsyn
parent
d6b8f28e6f
commit
1d8ff97c95
@@ -24,6 +24,7 @@ import { DiffViewToggle } from '@/components/chat/message/DiffViewToggle';
|
||||
import type { DiffViewMode } from '@/components/chat/message/types';
|
||||
import { PierreDiffViewer } from './PierreDiffViewer';
|
||||
import { useDeviceInfo } from '@/lib/device';
|
||||
import { FileTypeIcon } from '@/components/icons/FileTypeIcon';
|
||||
|
||||
// Minimum width for side-by-side diff view (px)
|
||||
const SIDE_BY_SIDE_MIN_WIDTH = 1100;
|
||||
@@ -157,6 +158,7 @@ const FileSelector = React.memo<FileSelectorProps>(({
|
||||
<button className="flex h-8 items-center gap-2 rounded-lg border border-input bg-transparent px-2 typography-ui-label text-foreground outline-none hover:bg-interactive-hover hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring">
|
||||
{selectedFileEntry ? (
|
||||
<div className="flex min-w-0 items-center gap-3">
|
||||
<FileTypeIcon filePath={selectedFileEntry.path} className="h-3.5 w-3.5 flex-shrink-0" />
|
||||
<span className="min-w-0 flex-1 truncate typography-meta">
|
||||
{getLabel(selectedFileEntry.path)}
|
||||
</span>
|
||||
@@ -197,6 +199,7 @@ const FileSelector = React.memo<FileSelectorProps>(({
|
||||
{changedFiles.map((file) => (
|
||||
<DropdownMenuRadioItem key={file.path} value={file.path}>
|
||||
<div className="flex w-full min-w-0 items-center gap-3">
|
||||
<FileTypeIcon filePath={file.path} className="h-3.5 w-3.5 flex-shrink-0" />
|
||||
<span className="min-w-0 flex-1 truncate typography-meta">
|
||||
{getLabel(file.path)}
|
||||
</span>
|
||||
@@ -286,6 +289,7 @@ const FileList = React.memo<FileListProps>(({
|
||||
: 'text-muted-foreground hover:bg-interactive-hover hover:text-foreground'
|
||||
)}
|
||||
>
|
||||
<FileTypeIcon filePath={file.path} className="h-3.5 w-3.5 flex-shrink-0" />
|
||||
<span
|
||||
className="typography-micro font-semibold w-4 text-center uppercase"
|
||||
style={{ color: descriptor.color }}
|
||||
@@ -649,15 +653,14 @@ const MultiFileDiffEntry = React.memo<MultiFileDiffEntryProps>(({
|
||||
setIsLoading(true);
|
||||
|
||||
let cancelled = false;
|
||||
void (async () => {
|
||||
try {
|
||||
const fetchPromise = git.getGitFileDiff(directory, { path: file.path });
|
||||
const timeoutMs = DIFF_REQUEST_TIMEOUT_MS;
|
||||
const timeoutPromise = new Promise<never>((_, reject) => {
|
||||
setTimeout(() => reject(new Error(`Timed out after ${timeoutMs}ms`)), timeoutMs);
|
||||
});
|
||||
const fetchPromise = git.getGitFileDiff(directory, { path: file.path });
|
||||
const timeoutMs = DIFF_REQUEST_TIMEOUT_MS;
|
||||
const timeoutPromise = new Promise<never>((_, reject) => {
|
||||
setTimeout(() => reject(new Error(`Timed out after ${timeoutMs}ms`)), timeoutMs);
|
||||
});
|
||||
|
||||
const response = await Promise.race([fetchPromise, timeoutPromise]);
|
||||
void Promise.race([fetchPromise, timeoutPromise])
|
||||
.then((response) => {
|
||||
if (cancelled) return;
|
||||
|
||||
setDiff(directory, file.path, {
|
||||
@@ -666,13 +669,13 @@ const MultiFileDiffEntry = React.memo<MultiFileDiffEntryProps>(({
|
||||
isBinary: response.isBinary,
|
||||
});
|
||||
setIsLoading(false);
|
||||
} catch (error) {
|
||||
})
|
||||
.catch((error) => {
|
||||
if (cancelled) return;
|
||||
const message = error instanceof Error ? error.message : String(error);
|
||||
setDiffLoadError(message);
|
||||
setIsLoading(false);
|
||||
}
|
||||
})();
|
||||
});
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
@@ -711,7 +714,7 @@ const MultiFileDiffEntry = React.memo<MultiFileDiffEntryProps>(({
|
||||
)}
|
||||
</span>
|
||||
<span
|
||||
className="typography-micro font-semibold w-4 text-center uppercase"
|
||||
className="typography-micro font-semibold leading-none w-4 text-center uppercase"
|
||||
style={{ color: descriptor.color }}
|
||||
title={descriptor.description}
|
||||
aria-label={descriptor.description}
|
||||
@@ -719,11 +722,43 @@ const MultiFileDiffEntry = React.memo<MultiFileDiffEntryProps>(({
|
||||
{descriptor.code}
|
||||
</span>
|
||||
<span
|
||||
className="min-w-0 flex-1 truncate typography-ui-label"
|
||||
style={{ direction: 'rtl', textAlign: 'left' }}
|
||||
className="min-w-0 flex-1 overflow-hidden typography-ui-label"
|
||||
title={file.path}
|
||||
>
|
||||
{file.path}
|
||||
<span className="flex min-w-0 items-center gap-2">
|
||||
<FileTypeIcon filePath={file.path} className="h-3.5 w-3.5 flex-shrink-0 align-middle" />
|
||||
{(() => {
|
||||
const lastSlash = file.path.lastIndexOf('/');
|
||||
if (lastSlash === -1) {
|
||||
return (
|
||||
<span
|
||||
className="block min-w-0 truncate typography-ui-label text-foreground"
|
||||
style={{ direction: 'rtl', textAlign: 'left' }}
|
||||
>
|
||||
{file.path}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
const dir = file.path.slice(0, lastSlash);
|
||||
const name = file.path.slice(lastSlash + 1);
|
||||
|
||||
return (
|
||||
<span className="flex min-w-0 items-baseline overflow-hidden">
|
||||
<span
|
||||
className="min-w-0 truncate typography-ui-label text-muted-foreground"
|
||||
style={{ direction: 'rtl', textAlign: 'left' }}
|
||||
>
|
||||
{dir}
|
||||
</span>
|
||||
<span className="flex-shrink-0 typography-ui-label">
|
||||
<span className="text-muted-foreground">/</span>
|
||||
<span className="text-foreground">{name}</span>
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
})()}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="relative flex items-center gap-2">
|
||||
@@ -1275,15 +1310,14 @@ export const DiffView: React.FC<DiffViewProps> = ({
|
||||
lastDiffRequestRef.current = requestKey;
|
||||
|
||||
let cancelled = false;
|
||||
void (async () => {
|
||||
try {
|
||||
const fetchPromise = git.getGitFileDiff(effectiveDirectory, { path: selectedFile });
|
||||
const timeoutMs = DIFF_REQUEST_TIMEOUT_MS;
|
||||
const timeoutPromise = new Promise<never>((_, reject) => {
|
||||
setTimeout(() => reject(new Error(`Timed out after ${timeoutMs}ms`)), timeoutMs);
|
||||
});
|
||||
const fetchPromise = git.getGitFileDiff(effectiveDirectory, { path: selectedFile });
|
||||
const timeoutMs = DIFF_REQUEST_TIMEOUT_MS;
|
||||
const timeoutPromise = new Promise<never>((_, reject) => {
|
||||
setTimeout(() => reject(new Error(`Timed out after ${timeoutMs}ms`)), timeoutMs);
|
||||
});
|
||||
|
||||
const response = await Promise.race([fetchPromise, timeoutPromise]);
|
||||
void Promise.race([fetchPromise, timeoutPromise])
|
||||
.then((response) => {
|
||||
if (cancelled) return;
|
||||
|
||||
setDiff(effectiveDirectory, selectedFile, {
|
||||
@@ -1291,12 +1325,12 @@ export const DiffView: React.FC<DiffViewProps> = ({
|
||||
modified: response.modified ?? '',
|
||||
isBinary: response.isBinary,
|
||||
});
|
||||
} catch (error) {
|
||||
})
|
||||
.catch((error) => {
|
||||
if (cancelled) return;
|
||||
const message = error instanceof Error ? error.message : String(error);
|
||||
setDiffLoadError(message);
|
||||
}
|
||||
})();
|
||||
});
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -6,6 +6,7 @@ import {
|
||||
RiLoader4Line,
|
||||
} from '@remixicon/react';
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
|
||||
import { FileTypeIcon } from '@/components/icons/FileTypeIcon';
|
||||
import type { GitStatus } from '@/lib/api/types';
|
||||
|
||||
type ChangeDescriptor = {
|
||||
@@ -124,6 +125,7 @@ export const ChangeRow = React.memo<ChangeRowProps>(function ChangeRow({
|
||||
>
|
||||
{descriptor.code}
|
||||
</span>
|
||||
<FileTypeIcon filePath={file.path} className="h-3.5 w-3.5 shrink-0" />
|
||||
{(() => {
|
||||
const lastSlash = file.path.lastIndexOf('/');
|
||||
if (lastSlash === -1) {
|
||||
|
||||
Reference in New Issue
Block a user