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

electron/main/index.ts

@@ -2755,10 +2755,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}