feat(frontend): add empty states to all tabs according to Figma (#1456)

* feat(frontend): add empty states to all tabs according to Figma

* import order

---------

Co-authored-by: sp.wack <83104063+amanape@users.noreply.github.com>

frontend/src/components/Browser.tsx

@@ -1,25 +1,13 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
+import { IoIosGlobe } from "react-icons/io";
 import { useSelector } from "react-redux";
-import { HiOutlineMagnifyingGlass } from "react-icons/hi2";
-import { HiCursorClick } from "react-icons/hi";
+import { I18nKey } from "#/i18n/declaration";
 import { RootState } from "#/store";
 
-import logo from "../assets/logo.png";
-
-function BlankPage(): JSX.Element {
-  return (
-    <div className="h-full bg-slate-200 flex flex-col items-center justify-center">
-      <img src={logo} alt="Blank Page" className="w-28 h-28" />
-      <div className="h-8 flex items-center bg-slate-900 px-2 rounded-3xl ml-3 space-x-2">
-        <HiOutlineMagnifyingGlass size={20} />
-        <span>OpenDevin: Code Less, Make More.</span>
-        <HiCursorClick size={20} />
-      </div>
-    </div>
-  );
-}
-
 function Browser(): JSX.Element {
+  const { t } = useTranslation();
+
   const { url, screenshotSrc } = useSelector(
     (state: RootState) => state.browser,
   );
@@ -30,15 +18,18 @@ function Browser(): JSX.Element {
       : `data:image/png;base64,${screenshotSrc || ""}`;
 
   return (
-    <div className="h-full w-full flex flex-col justify-evenly p-2 space-y-2">
-      <div className="w-full py-2 px-5 rounded-3xl bg-neutral-700 text-gray-200 truncate">
+    <div className="h-full w-full flex flex-col text-neutral-400">
+      <div className="w-full p-2 truncate border-b border-neutral-600">
         {url}
       </div>
-      <div className="overflow-y-auto h-4/5 scrollbar-hide rounded-xl">
+      <div className="overflow-y-auto grow scrollbar-hide rounded-xl">
         {screenshotSrc ? (
           <img src={imgSrc} className="rounded-xl" alt="Browser Screenshot" />
         ) : (
-          <BlankPage />
+          <div className="flex flex-col items-center h-full justify-center">
+            <IoIosGlobe size={100} />
+            {t(I18nKey.BROWSER$EMPTY_MESSAGE)}
+          </div>
         )}
       </div>
     </div>

frontend/src/components/CodeEditor.tsx

@@ -2,13 +2,17 @@ import Editor, { Monaco } from "@monaco-editor/react";
 import { Tab, Tabs } from "@nextui-org/react";
 import type { editor } from "monaco-editor";
 import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { VscCode } from "react-icons/vsc";
 import { useDispatch, useSelector } from "react-redux";
+import { I18nKey } from "#/i18n/declaration";
 import { selectFile } from "#/services/fileService";
 import { setCode } from "#/state/codeSlice";
 import { RootState } from "#/store";
 import FileExplorer from "./file-explorer/FileExplorer";
 
 function CodeEditor(): JSX.Element {
+  const { t } = useTranslation();
   const [selectedFileName, setSelectedFileName] = useState("");
 
   const dispatch = useDispatch();
@@ -64,14 +68,21 @@ function CodeEditor(): JSX.Element {
             title={selectedFileName}
           />
         </Tabs>
-        <div className="flex grow">
-          <Editor
-            height="100%"
-            path={selectedFileName.toLocaleLowerCase()}
-            defaultValue=""
-            value={code}
-            onMount={handleEditorDidMount}
-          />
+        <div className="flex grow items-center justify-center">
+          {selectedFileName === "" ? (
+            <div className="flex flex-col items-center text-neutral-400">
+              <VscCode size={100} />
+              {t(I18nKey.CODE_EDITOR$EMPTY_MESSAGE)}
+            </div>
+          ) : (
+            <Editor
+              height="100%"
+              path={selectedFileName.toLocaleLowerCase()}
+              defaultValue=""
+              value={code}
+              onMount={handleEditorDidMount}
+            />
+          )}
         </div>
       </div>
     </div>

frontend/src/components/Planner.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
 import {
   FaCheckCircle,
   FaQuestionCircle,
@@ -7,7 +8,9 @@ import {
   FaRegClock,
   FaRegTimesCircle,
 } from "react-icons/fa";
+import { VscListOrdered } from "react-icons/vsc";
 import { useSelector } from "react-redux";
+import { I18nKey } from "#/i18n/declaration";
 import { Plan, Task, TaskState } from "#/services/planService";
 import { RootState } from "#/store";
 
@@ -55,10 +58,13 @@ interface PlanProps {
 }
 
 function PlanContainer({ plan }: PlanProps): JSX.Element {
+  const { t } = useTranslation();
+
   if (plan.mainGoal === undefined) {
     return (
-      <div className="p-2">
-        Nothing is currently planned. Start a task for this to change.
+      <div className="w-full h-full flex flex-col text-neutral-400 items-center justify-center">
+        <VscListOrdered size={100} />
+        {t(I18nKey.PLANNER$EMPTY_MESSAGE)}
       </div>
     );
   }

frontend/src/i18n/translation.json

@@ -328,5 +328,17 @@
   "SETTINGS$API_KEY_PLACEHOLDER": {
     "en": "Enter your API key.",
     "de": "Model API key."
+  },
+  "CODE_EDITOR$EMPTY_MESSAGE": {
+    "en": "No file selected.",
+    "de": "Keine Datei ausgewählt."
+  },
+  "BROWSER$EMPTY_MESSAGE": {
+    "en": "No page loaded.",
+    "de": "Keine Seite geladen."
+  },
+  "PLANNER$EMPTY_MESSAGE": {
+    "en": "No plan created.",
+    "de": "Kein Plan erstellt."
   }
 }