Feat NewVersion - Project Workspace with Sidebar Navigation and Refactor ChatBox Input UI

electron/main/index.ts

@@ -2740,10 +2740,10 @@ async function createWindow() {
   // Windows: native frame and solid background. macOS/Linux: frameless; macOS corner radius via native hook.
   win = new BrowserWindow({
     title: 'Eigent',
-    width: 1200,
-    height: 800,
-    minWidth: 1050,
-    minHeight: 650,
+    width: 1366,
+    height: 860,
+    minWidth: 1100,
+    minHeight: 700,
     // Use native frame on Windows for better native integration
     frame: isWindows ? true : false,
     show: false, // Don't show until content is ready to avoid white screen

package.json

@@ -40,6 +40,7 @@
     "test:watch": "vitest",
     "test:e2e": "vitest run --config vitest.config.ts",
     "test:coverage": "vitest run --coverage",
+    "check:i18n": "node scripts/check-i18n-locale-parity.js",
     "type-check": "tsc -p tsconfig.build.json --noEmit",
     "lint": "eslint . --no-warn-ignored",
     "lint:fix": "eslint . --fix --no-warn-ignored",

src/components/AddWorker/ToolSelect.tsx

@@ -757,12 +757,12 @@ const ToolSelect = forwardRef<
       {(initialSelectedTools || []).map((item: any) => (
         <Badge
           key={item.id + item.key + (item.isLocal + '')}
-          className="flex h-5 w-auto flex-shrink-0 items-center gap-1 bg-button-tertiery-fill-default px-xs"
+          className="h-5 gap-1 bg-button-tertiery-fill-default px-xs flex w-auto flex-shrink-0 items-center"
         >
           {item.name || item.mcp_name || item.key || `tool_${item.id}`}
-          <div className="flex items-center justify-center rounded-sm bg-button-secondary-fill-disabled">
+          <div className="rounded-sm bg-button-secondary-fill-disabled flex items-center justify-center">
             <X
-              className="h-4 w-4 cursor-pointer text-button-secondary-icon-disabled"
+              className="h-4 w-4 text-button-secondary-icon-disabled cursor-pointer"
               onClick={() => removeOption(item)}
             />
           </div>
@@ -788,21 +788,21 @@ const ToolSelect = forwardRef<
           checkEnv(item.id);
         }
       }}
-      className="flex cursor-pointer justify-between px-3 py-2 hover:bg-surface-hover-subtle"
+      className="px-3 py-2 hover:bg-surface-hover-subtle flex cursor-pointer justify-between"
     >
-      <div className="flex items-center gap-1">
+      <div className="gap-1 flex items-center">
         {getCategoryIcon(item.category?.name)}
-        <div className="line-clamp-1 overflow-hidden text-ellipsis break-words text-sm font-bold leading-17 text-text-action">
+        <div className="text-sm font-bold leading-17 text-text-action line-clamp-1 overflow-hidden break-words text-ellipsis">
           {item.name}
         </div>
         <TooltipSimple content={item.description}>
           <CircleAlert
-            className="h-4 w-4 cursor-pointer text-icon-primary"
+            className="h-4 w-4 text-icon-primary cursor-pointer"
             onClick={(e) => e.stopPropagation()}
           />
         </TooltipSimple>
       </div>
-      <div className="flex items-center gap-1">
+      <div className="gap-1 flex items-center">
         {getGithubRepoName(item.home_page) && (
           <div className="flex items-center">
             <img
@@ -816,7 +816,7 @@ const ToolSelect = forwardRef<
                 verticalAlign: 'middle',
               }}
             />
-            <span className="line-clamp-1 items-center justify-center self-stretch overflow-hidden text-ellipsis break-words text-xs font-medium leading-3">
+            <span className="text-xs font-medium leading-3 line-clamp-1 items-center justify-center self-stretch overflow-hidden break-words text-ellipsis">
               {getGithubRepoName(item.home_page)}
             </span>
           </div>
@@ -847,21 +847,21 @@ const ToolSelect = forwardRef<
         addOption(item);
         setKeyword('');
       }}
-      className="flex cursor-pointer justify-between px-3 py-2 hover:bg-surface-hover-subtle"
+      className="px-3 py-2 hover:bg-surface-hover-subtle flex cursor-pointer justify-between"
     >
-      <div className="flex items-center gap-1">
+      <div className="gap-1 flex items-center">
         {/* {getCategoryIcon(item.category?.name)} */}
-        <div className="line-clamp-1 overflow-hidden text-ellipsis break-words text-sm font-bold leading-17 text-text-action">
+        <div className="text-sm font-bold leading-17 text-text-action line-clamp-1 overflow-hidden break-words text-ellipsis">
           {item.mcp_name}
         </div>
         <TooltipSimple content={item.mcp_desc}>
           <CircleAlert
-            className="h-4 w-4 cursor-pointer text-icon-primary"
+            className="h-4 w-4 text-icon-primary cursor-pointer"
             onClick={(e) => e.stopPropagation()}
           />
         </TooltipSimple>
       </div>
-      <div className="flex items-center gap-1">
+      <div className="gap-1 flex items-center">
         <Button
           className="h-6 rounded-md bg-button-secondary-fill-default px-sm py-xs text-xs font-bold leading-17 text-button-secondary-text-default shadow-sm hover:bg-button-tertiery-text-default"
           disabled={true}
@@ -873,8 +873,8 @@ const ToolSelect = forwardRef<
   );
   return (
     <div className="relative w-full" ref={containerRef}>
-      <div className="bg-white flex min-h-[40px] flex-wrap gap-1.5 rounded-lg border">
-        <div className="flex items-center gap-1 text-sm font-bold leading-normal text-text-body">
+      <div className="bg-white gap-1.5 rounded-lg flex min-h-[40px] flex-wrap border">
+        <div className="gap-1 text-sm font-bold leading-normal text-text-body flex items-center">
           {t('workforce.agent-tool')}
           <TooltipSimple content={t('workforce.agent-tool-tooltip')}>
             <CircleAlert size={16} className="text-icon-primary" />
@@ -885,7 +885,7 @@ const ToolSelect = forwardRef<
             inputRef.current?.focus();
             setIsOpen(true);
           }}
-          className="flex max-h-[120px] min-h-[60px] w-full flex-wrap justify-start gap-1 overflow-y-auto rounded-lg border border-solid border-input-border-default bg-input-bg-default px-[6px] py-1"
+          className="gap-1 rounded-lg border-input-border-default bg-input-bg-default py-1 flex max-h-[120px] min-h-[60px] w-full flex-wrap justify-start overflow-y-auto border border-solid px-[6px]"
         >
           {renderSelectedItems()}
           <Textarea
@@ -894,14 +894,14 @@ const ToolSelect = forwardRef<
             onChange={(e) => setKeyword(e.target.value)}
             onFocus={() => setIsOpen(true)}
             ref={inputRef}
-            className="!h-[20px] w-auto resize-none border-none bg-transparent p-0 text-sm leading-normal !shadow-none !ring-0 !ring-offset-0"
+            className="p-0 text-sm leading-normal !h-[20px] w-auto resize-none border-none bg-transparent !shadow-none !ring-0 !ring-offset-0"
           />
         </div>
       </div>
 
       {/* floating dropdown */}
       {isOpen && (
-        <div className="absolute left-0 right-0 top-full z-50 mt-1 overflow-y-auto rounded-lg border border-solid border-input-border-default bg-dropdown-bg">
+        <div className="left-0 right-0 mt-1 rounded-lg border-input-border-default bg-dropdown-bg absolute top-full z-50 overflow-y-auto border border-solid">
           <div className="max-h-[192px] overflow-y-auto">
             <IntegrationList
               variant="select"

src/components/AddWorker/index.tsx

@@ -469,8 +469,8 @@ export function AddWorker({
           {showEnvConfig ? (
             // environment configuration interface
             <>
-              <DialogContentSection className="flex flex-col gap-3 bg-white-100% p-md">
-                <div className="flex items-center gap-md">
+              <DialogContentSection className="gap-3 bg-white-100% p-md flex flex-col">
+                <div className="gap-md flex items-center">
                   {getCategoryIcon(activeMcp?.category?.name)}
                   <div>
                     <div className="text-base font-bold leading-9 text-text-action">
@@ -490,15 +490,15 @@ export function AddWorker({
                               verticalAlign: 'middle',
                             }}
                           />
-                          <span className="line-clamp-1 items-center justify-center self-stretch overflow-hidden text-ellipsis break-words text-xs font-medium leading-normal">
+                          <span className="text-xs font-medium leading-normal line-clamp-1 items-center justify-center self-stretch overflow-hidden break-words text-ellipsis">
                             {getGithubRepoName(activeMcp?.home_page)}
                           </span>
                         </div>
                       )}
                     </div>
                   </div>
                 </div>
-                <div className="flex flex-col gap-sm">
+                <div className="gap-sm flex flex-col">
                   {Object.keys(activeMcp?.install_command?.env || {}).map(
                     (key) => (
                       <div key={key}>
@@ -568,10 +568,10 @@ export function AddWorker({
           ) : (
             // default add interface
             <>
-              <DialogContentSection className="flex flex-col gap-3 bg-white-100% p-md">
-                <div className="flex flex-col gap-4">
-                  <div className="flex items-center gap-sm">
-                    <div className="flex h-16 w-16 items-center justify-center">
+              <DialogContentSection className="gap-3 bg-white-100% p-md flex flex-col">
+                <div className="gap-4 flex flex-col">
+                  <div className="gap-sm flex items-center">
+                    <div className="h-16 w-16 flex items-center justify-center">
                       <Bot size={32} className="text-icon-primary" />
                     </div>
                     <Input
@@ -608,10 +608,10 @@ export function AddWorker({
                 />
 
                 {/* Model Configuration Section */}
-                <div className="mt-2 flex flex-col gap-2">
+                <div className="mt-2 gap-2 flex flex-col">
                   <button
                     type="button"
-                    className="flex items-center gap-1 text-sm text-text-body hover:text-text-action"
+                    className="gap-1 text-sm text-text-body hover:text-text-action flex items-center"
                     onClick={() => setShowModelConfig(!showModelConfig)}
                   >
                     {showModelConfig ? (
@@ -623,8 +623,8 @@ export function AddWorker({
                   </button>
 
                   {showModelConfig && (
-                    <div className="flex flex-col gap-3 rounded-lg bg-surface-tertiary-subtle p-3">
-                      <label className="flex items-center gap-2 text-sm">
+                    <div className="gap-3 rounded-lg bg-surface-tertiary-subtle p-3 flex flex-col">
+                      <label className="gap-2 text-sm flex items-center">
                         <input
                           type="checkbox"
                           checked={useCustomModel}
@@ -636,7 +636,7 @@ export function AddWorker({
 
                       {useCustomModel && (
                         <>
-                          <div className="flex flex-col gap-1">
+                          <div className="gap-1 flex flex-col">
                             <label className="text-xs text-text-body">
                               {t('workforce.model-platform')}
                             </label>
@@ -662,7 +662,7 @@ export function AddWorker({
                             </Select>
                           </div>
 
-                          <div className="flex flex-col gap-1">
+                          <div className="gap-1 flex flex-col">
                             <label className="text-xs text-text-body">
                               {t('workforce.model-type')}
                             </label>

src/components/BottomBar/index.tsx

@@ -23,7 +23,7 @@ interface BottomBarProps {
 
 // Red dot notification indicator
 const RedDotIcon = () => (
-  <div className="h-2 w-2 shrink-0 rounded-full bg-red-500" />
+  <div className="h-2 w-2 bg-red-500 shrink-0 rounded-full" />
 );
 
 function BottomBar({ onToggleChatBox, isChatBoxVisible }: BottomBarProps) {
@@ -51,7 +51,7 @@ function BottomBar({ onToggleChatBox, isChatBoxVisible }: BottomBarProps) {
     : null;
 
   return (
-    <div className="relative z-50 flex h-12 items-center justify-center pt-2">
+    <div className="h-12 pt-2 relative z-50 flex items-center justify-center">
       <WorkSpaceMenu
         onToggleChatBox={onToggleChatBox}
         isChatBoxVisible={isChatBoxVisible}

src/components/BrowserAgentWorkspace/index.tsx

@@ -167,9 +167,9 @@ export default function BrowserAgentWorkspace() {
   }
 
   return isTakeControl ? (
-    <div className="flex h-full w-full flex-col items-center justify-start rounded-xl border border-solid border-border-success bg-menutabs-bg-default">
-      <div className="flex w-full items-start justify-start gap-sm p-sm">
-        <div className="rounded-full border border-solid border-border-primary bg-transparent p-1">
+    <div className="rounded-xl border-border-success bg-menutabs-bg-default flex h-full w-full flex-col items-center justify-start border border-solid">
+      <div className="gap-sm p-sm flex w-full items-start justify-start">
+        <div className="border-border-primary p-1 rounded-full border border-solid bg-transparent">
           <Button
             onClick={() => {
               fetchPut(`/task/${projectStore.activeProjectId}/take-control`, {
@@ -192,13 +192,14 @@ export default function BrowserAgentWorkspace() {
     </div>
   ) : (
     <div
-      className={`flex h-full w-full flex-1 items-center justify-center transition-all duration-300 ease-in-out`}
+      className={`ease-in-out flex h-full w-full flex-1 items-center justify-center transition-all duration-300`}
     >
-      <div className="blur-bg relative flex h-full w-full flex-col overflow-hidden rounded-xl bg-surface-secondary">
-        <div className="flex flex-shrink-0 items-center justify-between rounded-t-2xl px-2 pb-2 pt-3">
-          <div className="flex items-center justify-start gap-sm">
+      <div className="blur-bg rounded-xl bg-surface-secondary relative flex h-full w-full flex-col overflow-hidden">
+        <div className="rounded-t-2xl px-2 pb-2 pt-3 flex flex-shrink-0 items-center justify-between">
+          <div className="gap-sm flex items-center justify-start">
             <Button
-              size="icon"
+              size="xs"
+              buttonContent="icon-only"
               variant="ghost"
               onClick={() => {
                 chatStore.setActiveWorkspace(
@@ -278,14 +279,14 @@ export default function BrowserAgentWorkspace() {
                     activeAgent?.activeWebviewIds?.[0]?.id || ''
                   )
                 }
-                className="group relative h-full w-full cursor-pointer rounded-b-2xl pt-sm"
+                className="group rounded-b-2xl pt-sm relative h-full w-full cursor-pointer"
               >
                 <img
                   src={activeAgent?.activeWebviewIds[0]?.img}
                   alt=""
-                  className="h-full w-full rounded-b-2xl object-contain"
+                  className="rounded-b-2xl h-full w-full object-contain"
                 />
-                <div className="bg-black/20 pointer-events-none absolute inset-0 flex h-full w-full items-center justify-center rounded-b-lg opacity-0 transition-all group-hover:opacity-100">
+                <div className="bg-black/20 inset-0 rounded-b-lg pointer-events-none absolute flex h-full w-full items-center justify-center opacity-0 transition-all group-hover:opacity-100">
                   <Button
                     size="sm"
                     variant="primary"
@@ -305,7 +306,7 @@ export default function BrowserAgentWorkspace() {
             ref={scrollContainerRef}
             className={`${
               isSingleMode ? 'px-0' : 'px-2 pb-2'
-            } scrollbar relative flex min-h-0 flex-1 flex-wrap justify-start gap-4 overflow-y-auto`}
+            } scrollbar min-h-0 gap-4 relative flex flex-1 flex-wrap justify-start overflow-y-auto`}
           >
             {activeAgent?.activeWebviewIds
               ?.filter((item) => item?.img)
@@ -314,7 +315,7 @@ export default function BrowserAgentWorkspace() {
                   <div
                     key={index}
                     onClick={() => handleTakeControl(item.id)}
-                    className={`card-box group relative cursor-pointer rounded-lg ${
+                    className={`card-box group rounded-lg relative cursor-pointer ${
                       isSingleMode
                         ? 'h-[calc(100%)] w-[calc(100%)]'
                         : 'h-[calc(50%-8px)] w-[calc(50%-8px)]'
@@ -324,7 +325,7 @@ export default function BrowserAgentWorkspace() {
                       <img
                         src={item.img}
                         alt=""
-                        className="h-full w-full rounded-2xl object-contain"
+                        className="rounded-2xl h-full w-full object-contain"
                       />
                     )}
                     <div
@@ -333,7 +334,7 @@ export default function BrowserAgentWorkspace() {
                           activeAgent?.activeWebviewIds?.[0]?.id || ''
                         )
                       }
-                      className="bg-black/20 pointer-events-none absolute inset-0 flex h-full w-full items-center justify-center rounded-lg opacity-0 transition-all group-hover:opacity-100"
+                      className="bg-black/20 inset-0 rounded-lg pointer-events-none absolute flex h-full w-full items-center justify-center opacity-0 transition-all group-hover:opacity-100"
                     >
                       <Button
                         size="sm"
@@ -352,9 +353,10 @@ export default function BrowserAgentWorkspace() {
           </div>
         )}
         {activeAgent?.activeWebviewIds?.length !== 1 && (
-          <div className="z-100 absolute bottom-2 right-2 flex w-auto items-center gap-1 rounded-lg border border-solid border-border-primary bg-menutabs-bg-default p-1">
+          <div className="bottom-2 right-2 gap-1 rounded-lg border-border-primary bg-menutabs-bg-default p-1 absolute z-100 flex w-auto items-center border border-solid">
             <Button
-              size="icon"
+              size="xs"
+              buttonContent="icon-only"
               variant="ghost"
               onClick={() => {
                 if (scrollContainerRef.current) {
@@ -378,7 +380,8 @@ export default function BrowserAgentWorkspace() {
               <ArrowDown size={16} />
             </Button>
             <Button
-              size="icon"
+              size="xs"
+              buttonContent="icon-only"
               variant="ghost"
               onClick={() => {
                 if (scrollContainerRef.current) {
@@ -399,7 +402,8 @@ export default function BrowserAgentWorkspace() {
               <ArrowUp size={16} />
             </Button>
             <Button
-              size="icon"
+              size="xs"
+              buttonContent="icon-only"
               variant="ghost"
               onClick={() => {
                 setIsSingleMode(!isSingleMode);