Skip to content

Commit 11cb8bb

Browse files
vipmaxvipmax
committed
add file icons and refresh panel UI
1 parent 52066aa commit 11cb8bb

29 files changed

Lines changed: 1450 additions & 296 deletions

‎anycode-base/src/theme.ts‎

Lines changed: 0 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -43,29 +43,6 @@ export let darcula = {
4343
"accent_color2": "#F6C87B"
4444
}
4545

46-
export let material = {
47-
"identifier": "#F1FEFF",
48-
"field_identifier": "#F1FEFF",
49-
"property_identifier": "#F1FEFF",
50-
"property": "#F1FEFF",
51-
"string": "#BDF5A0",
52-
"keyword": "#83d2fa",
53-
"constant": "#f78c6c",
54-
"number": "#f78c6c",
55-
"integer": "#f78c6c",
56-
"float": "#f78c6c",
57-
"variable": "#F1FEFF",
58-
"variable.builtin": "#83d2fa",
59-
"function": "#8AA9F9",
60-
"function.call": "#8AA9F9",
61-
"function.macro": "#8AA9F9",
62-
"method": "#8AA9F9",
63-
"comment": "#767676",
64-
"namespace": "#ffcb6b",
65-
"type": "#ffcb6b",
66-
"tag.attribute": "#F1FEFF",
67-
}
68-
6946
export let edgo = {
7047
"identifier": "#A5FCB6",
7148
"field_identifier": "#A5FCB6",

‎anycode/App.css‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -32,20 +32,6 @@
3232
color: #ffffff;
3333
}
3434

35-
.tab-close-button {
36-
background: none;
37-
border: none;
38-
color: #888;
39-
cursor: pointer;
40-
padding: 0;
41-
/* margin-left: 8px; */
42-
border-radius: 3px;
43-
opacity: 0;
44-
transition: opacity 0.2s ease;
45-
font-size: 1.5rem;
46-
outline: none;
47-
}
48-
4935
.tab-close-button:focus {
5036
outline: none;
5137
border: none;

‎anycode/App.tsx‎

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,17 @@ import { normalizePath } from './utils';
3838
const App: React.FC = () => {
3939
const { wsRef, isConnected } = useSocket({});
4040

41+
const [fileIconsStyle, setFileIconsStyle] = React.useState<'colored' | 'monochrome' | 'disabled'>(() => {
42+
if (typeof window === 'undefined') return 'colored';
43+
return (localStorage.getItem('fileIconsStyle') as any) || 'colored';
44+
});
45+
46+
const [fileIconsOpacity, setFileIconsOpacity] = React.useState<number>(() => {
47+
if (typeof window === 'undefined') return 0.85;
48+
const saved = localStorage.getItem('fileIconsOpacity');
49+
return saved !== null ? parseFloat(saved) : 0.85;
50+
});
51+
4152
const fileTree = useFileTree({ wsRef, isConnected });
4253
const editors = useEditors({ wsRef, isConnected });
4354
const terminals = useTerminals({ wsRef, isConnected });
@@ -291,6 +302,16 @@ const App: React.FC = () => {
291302
agents.setAgentsVersion((prev) => prev + 1);
292303
}, [agents.setAgentsVersion]);
293304

305+
const handleFileIconsStyleChange = useCallback((style: 'colored' | 'monochrome' | 'disabled') => {
306+
localStorage.setItem('fileIconsStyle', style);
307+
setFileIconsStyle(style);
308+
}, []);
309+
310+
const handleFileIconsOpacityChange = useCallback((opacity: number) => {
311+
localStorage.setItem('fileIconsOpacity', opacity.toString());
312+
setFileIconsOpacity(opacity);
313+
}, []);
314+
294315
const activeTerminalId = useMemo(() => {
295316
const paneId = terminalPanes.activePaneId || 'terminal';
296317
return terminalPanes.getSelectedId(paneId);
@@ -324,6 +345,7 @@ const App: React.FC = () => {
324345
onLoadFolder={fileTree.openFolder}
325346
onFocusEditor={() => editors.focusEditorInPane(editors.activeEditorPaneId)}
326347
onNavigateByKey={fileTree.navigateByKey}
348+
fileIconsStyle={fileIconsStyle}
327349
/>
328350
);
329351
case 'search':
@@ -340,6 +362,7 @@ const App: React.FC = () => {
340362
results={search.searchResults}
341363
searchEnded={search.searchEnded}
342364
onMatchClick={handleSearchResultClick}
365+
fileIconsStyle={fileIconsStyle}
343366
/>
344367
);
345368
case 'changes':
@@ -359,6 +382,7 @@ const App: React.FC = () => {
359382
onRevert={git.revert}
360383
onStage={git.stage}
361384
onUnstage={git.unstage}
385+
fileIconsStyle={fileIconsStyle}
362386
/>
363387
);
364388
case 'editor':
@@ -415,6 +439,7 @@ const App: React.FC = () => {
415439
onCloseTerminal={handleTerminalTabClose}
416440
onSelectAgent={agentPanes.selectFromToolbar}
417441
onCloseAgent={agents.closeAgent}
442+
fileIconsStyle={fileIconsStyle}
418443
/>
419444
);
420445
case 'settings':
@@ -424,6 +449,10 @@ const App: React.FC = () => {
424449
isConnected={isConnected}
425450
currentThemeId={currentThemeId}
426451
onThemeChange={handleThemeChange}
452+
fileIconsStyle={fileIconsStyle}
453+
onFileIconsStyleChange={handleFileIconsStyleChange}
454+
fileIconsOpacity={fileIconsOpacity}
455+
onFileIconsOpacityChange={handleFileIconsOpacityChange}
427456
/>
428457
);
429458
default:
@@ -497,7 +526,10 @@ const App: React.FC = () => {
497526
});
498527

499528
return (
500-
<div className="app-container toolbar-header-compact">
529+
<div
530+
className="app-container toolbar-header-compact"
531+
style={{ '--file-icon-opacity': fileIconsOpacity } as React.CSSProperties}
532+
>
501533
<div className="main-content" style={{ flex: 1, display: 'flex' }}>
502534
<Layout
503535
renderPanel={renderPanel}

‎anycode/components/ChangesPanel.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -538,6 +538,11 @@
538538
width: 100%;
539539
}
540540

541+
.changes-file-icon {
542+
margin-right: 6px;
543+
flex-shrink: 0;
544+
}
545+
541546
.changes-filename {
542547
color: var(--theme-foreground, var(--foreground-color, #e0e0e0));
543548
white-space: nowrap;

‎anycode/components/ChangesPanel.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useState, useEffect, useLayoutEffect, useRef, useCallback, useMemo } from 'react';
22
import { Icons } from './Icons';
3+
import { FileIcon } from './FileIcon';
34
import './ChangesPanel.css';
45

56
const COMMIT_MESSAGE_STORAGE_KEY = 'commitMessage';
@@ -20,6 +21,7 @@ interface ChangesPanelProps {
2021
branch: string;
2122
branches: { name: string; is_current: boolean }[];
2223
isSwitchingBranch: boolean;
24+
fileIconsStyle?: 'colored' | 'monochrome' | 'disabled';
2325
onFileClick: (path: string) => void;
2426
onRefresh: () => void;
2527
onBranchChange: (branch: string) => Promise<boolean>;
@@ -106,6 +108,7 @@ interface ChangesPanelItemProps {
106108
mode: 'merge' | 'staged' | 'changed' | 'flat';
107109
isActive: boolean;
108110
isSelected: boolean;
111+
fileIconsStyle?: 'colored' | 'monochrome' | 'disabled';
109112
onClick: (rowId: string, path: string) => void;
110113
onRevert: (path: string) => void;
111114
onStage: (path: string) => void;
@@ -139,6 +142,7 @@ const ChangesPanelItemImpl: React.FC<ChangesPanelItemProps> = ({
139142
mode,
140143
isActive,
141144
isSelected,
145+
fileIconsStyle = 'colored',
142146
onClick,
143147
onRevert,
144148
onStage,
@@ -182,6 +186,7 @@ const ChangesPanelItemImpl: React.FC<ChangesPanelItemProps> = ({
182186
>
183187
<div className="changes-file-info">
184188
<div className="changes-file-main">
189+
<FileIcon path={file.path} styleType={fileIconsStyle} className="changes-file-icon" />
185190
<span
186191
className={`changes-filename ${statusTextColors[file.status]}`}
187192
title={file.path}
@@ -222,6 +227,7 @@ const areChangesPanelItemsEqual = (
222227
&& prev.mode === next.mode
223228
&& prev.isActive === next.isActive
224229
&& prev.isSelected === next.isSelected
230+
&& prev.fileIconsStyle === next.fileIconsStyle
225231
&& prev.onClick === next.onClick
226232
&& prev.onRevert === next.onRevert
227233
&& prev.onStage === next.onStage
@@ -239,6 +245,7 @@ const ChangesPanelImpl: React.FC<ChangesPanelProps> = ({
239245
branch,
240246
branches,
241247
isSwitchingBranch,
248+
fileIconsStyle = 'colored',
242249
onFileClick,
243250
onRefresh,
244251
onBranchChange,
@@ -519,6 +526,7 @@ const ChangesPanelImpl: React.FC<ChangesPanelProps> = ({
519526
mode={mode}
520527
isActive={activeFilePath === file.path}
521528
isSelected={selectedRowId === `${mode}::${file.path}`}
529+
fileIconsStyle={fileIconsStyle}
522530
onClick={handleItemClick}
523531
onRevert={onRevert}
524532
onStage={onStage}
@@ -527,7 +535,7 @@ const ChangesPanelImpl: React.FC<ChangesPanelProps> = ({
527535
setStatsRef={setStatsRef}
528536
/>
529537
))
530-
), [activeFilePath, handleItemClick, onRevert, onStage, onUnstage, selectedRowId, setItemRef, setStatsRef]);
538+
), [activeFilePath, handleItemClick, onRevert, onStage, onUnstage, selectedRowId, setItemRef, setStatsRef, fileIconsStyle]);
531539

532540
return (
533541
<div className="changes-panel">
@@ -774,6 +782,10 @@ const areBranchesEqual = (
774782
};
775783

776784
const areEqual = (prev: ChangesPanelProps, next: ChangesPanelProps): boolean => {
785+
if (prev.fileIconsStyle !== next.fileIconsStyle) {
786+
return false;
787+
}
788+
777789
if (prev.branch !== next.branch || prev.isSwitchingBranch !== next.isSwitchingBranch) {
778790
return false;
779791
}

0 commit comments

Comments
 (0)