Revert "feat: enhance user page UI (QuivrHQ#1319)"

This reverts commit 253e866.

frontend/app/user/components/ApiKeyConfig/ApiKeyConfig.tsx

@@ -1,12 +1,9 @@
 /* eslint-disable max-lines */
 "use client";
 
-import { useTranslation } from "react-i18next";
-import { FaCopy, FaInfoCircle } from "react-icons/fa";
-
 import Button from "@/lib/components/ui/Button";
+import { Divider } from "@/lib/components/ui/Divider";
 import Field from "@/lib/components/ui/Field";
-import copyToClipboard from "@/lib/helpers/copyToClipboard";
 
 import { useApiKeyConfig } from "./hooks/useApiKeyConfig";
 
@@ -23,95 +20,84 @@ export const ApiKeyConfig = (): JSX.Element => {
     removeOpenAiApiKey,
     hasOpenAiApiKey,
   } = useApiKeyConfig();
-  const { t } = useTranslation(["config"]);
 
   return (
     <>
-      <h3 className="font-semibold mb-2">Quivr {t("apiKey")}</h3>
-
-      <div>
-        {apiKey === "" ? (
-          <Button
-            data-testid="create-new-key"
-            variant="secondary"
-            onClick={() => void handleCreateClick()}
-          >
-            Create New Key
-          </Button>
-        ) : (
-          <div className="flex items-center space-x-2">
-            <Field name="quivrApiKey" disabled={true} value={apiKey} />
-            <button data-testid="copy-api-key-button" onClick={handleCopyClick}>
-              <FaCopy />
-            </button>
+      <Divider text="API Key Config" className="mt-4" />
+      <div className="flex justify-center items-center mt-4">
+        <div className="flex items-center space-x-4">
+          {apiKey === "" && (
+            <Button
+              data-testid="create-new-key"
+              variant="secondary"
+              onClick={() => void handleCreateClick()}
+            >
+              Create New Key
+            </Button>
+          )}
+        </div>
+        {apiKey !== "" && (
+          <div className="flex items-center space-x-4">
+            <span className="text-gray-600">{apiKey}</span>
+            <Button
+              data-testid="copy-api-key-button"
+              variant="secondary"
+              onClick={handleCopyClick}
+            >
+              📋
+            </Button>
           </div>
         )}
       </div>
 
-      <hr className="my-8" />
-
-      <div>
-        <h3 className="font-semibold mb-2">OpenAI {t("apiKey")}</h3>
-        <form
-          className="mb-4"
-          onSubmit={(event) => {
-            event.preventDefault();
-            void changeOpenAiApiKey();
-          }}
-        >
-          <div className="flex items-center space-x-2">
-            <Field
-              name="openAiApiKey"
-              placeholder="Open AI Key"
-              className="w-full"
-              value={openAiApiKey ?? ""}
-              data-testid="open-ai-api-key-input"
-              onChange={(e) => setOpenAiApiKey(e.target.value)}
-            />
-            <button
-              hidden={!hasOpenAiApiKey}
-              data-testid="copy-openai-api-key-button"
-              onClick={() => void copyToClipboard(openAiApiKey)}
-              type="button"
-            >
-              <FaCopy />
-            </button>
-          </div>
-
-          <div className="mt-4 flex flex-row justify-between">
-            {hasOpenAiApiKey && (
-              <Button
-                isLoading={changeOpenAiApiKeyRequestPending}
-                variant="secondary"
-                onClick={() => void removeOpenAiApiKey()}
-              >
-                Remove Key
-              </Button>
-            )}
-
+      <Divider
+        data-testid="open-ai-key-divider"
+        text="OpenAI Key"
+        className="mt-4 mb-4"
+      />
+      <div className="flex mb-4 justify-center items-center mt-5">
+        <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative max-w-md">
+          <span className="block sm:inline">
+            Your api key will be saved in our data. We will not use it for any
+            other purpose. However,{" "}
+            <strong>we have not implemented any encryption logic yet</strong>
+          </span>
+        </div>
+      </div>
+      <form
+        onSubmit={(event) => {
+          event.preventDefault();
+          void changeOpenAiApiKey();
+        }}
+      >
+        <Field
+          name="openAiApiKey"
+          placeholder="Open AI Key"
+          className="w-full"
+          value={openAiApiKey ?? ""}
+          data-testid="open-ai-api-key-input"
+          onChange={(e) => setOpenAiApiKey(e.target.value)}
+        />
+        <div className="mt-4 flex flex-row justify-between">
+          {hasOpenAiApiKey && (
             <Button
-              data-testid="save-open-ai-api-key"
               isLoading={changeOpenAiApiKeyRequestPending}
-              disabled={openAiApiKey === userIdentity?.openai_api_key}
+              variant="secondary"
+              onClick={() => void removeOpenAiApiKey()}
             >
-              Save Key
+              Remove Key
             </Button>
-          </div>
-        </form>
+          )}
 
-        <div className="flex space-x-2 bg-sky-100 dark:bg-gray-900 border border-sky-200 dark:border-gray-700  px-4 py-3 rounded relative max-w-md">
-          <div className="text-xl font-semibold text-sky-600">
-            <FaInfoCircle />
-          </div>
-          <div>
-            <p>
-              We will store your OpenAI API key, but we will not use it for any
-              other purpose. However,{" "}
-              <strong>we have not implemented any encryption logic yet</strong>
-            </p>
-          </div>
+          <Button
+            data-testid="save-open-ai-api-key"
+            isLoading={changeOpenAiApiKeyRequestPending}
+            disabled={openAiApiKey === userIdentity?.openai_api_key}
+          >
+            Save Key
+          </Button>
         </div>
-      </div>
+      </form>
     </>
   );
 };

frontend/app/user/components/ApiKeyConfig/__tests__/ApiKeyConfig.test.tsx

@@ -24,6 +24,7 @@ describe("ApiKeyConfig", () => {
   it("should render ApiConfig Component", () => {
     const { getByTestId } = render(<ApiKeyConfig />);
     expect(getByTestId("create-new-key")).toBeDefined();
+    expect(getByTestId("open-ai-key-divider")).toBeDefined();
     expect(getByTestId("open-ai-api-key-input")).toBeDefined();
     expect(getByTestId("save-open-ai-api-key")).toBeDefined();
   });

frontend/app/user/components/ApiKeyConfig/hooks/useApiKeyConfig.ts

@@ -8,7 +8,6 @@ import { useAuthApi } from "@/lib/api/auth/useAuthApi";
 import { USER_IDENTITY_DATA_KEY } from "@/lib/api/user/config";
 import { useUserApi } from "@/lib/api/user/useUserApi";
 import { UserIdentity } from "@/lib/api/user/user";
-import copyToClipboard from "@/lib/helpers/copyToClipboard";
 import { useToast } from "@/lib/hooks";
 import { useGAnalyticsEventTracker } from "@/services/analytics/google/useGAnalyticsEventTracker";
 import { useEventTracking } from "@/services/analytics/june/useEventTracking";
@@ -53,11 +52,19 @@ export const useApiKeyConfig = () => {
     }
   };
 
-  const handleCopyClick = () => {
-    if (apiKey !== "") {
+  const copyToClipboard = async (text: string) => {
+    try {
       void track("COPY_API_KEY");
       gaEventTracker?.({ action: "COPY_API_KEY" });
 
+      await navigator.clipboard.writeText(text);
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  };
+
+  const handleCopyClick = () => {
+    if (apiKey !== "") {
       void copyToClipboard(apiKey);
     }
   };

frontend/app/user/components/DarkModeToggle.tsx

@@ -0,0 +1,39 @@
+/* eslint-disable */
+"use client";
+import { useEffect, useLayoutEffect, useState } from "react";
+import { MdDarkMode, MdLightMode } from "react-icons/md";
+
+import Button from "@/lib/components/ui/Button";
+
+export const DarkModeToggle = (): JSX.Element => {
+  const [dark, setDark] = useState(false);
+
+  useLayoutEffect(() => {
+    const isDark = localStorage.getItem("dark");
+    if (isDark && isDark === "true") {
+      document.body.parentElement?.classList.add("dark");
+      setDark(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (dark) {
+      document.body.parentElement?.classList.add("dark");
+      localStorage.setItem("dark", "true");
+    } else {
+      document.body.parentElement?.classList.remove("dark");
+      localStorage.setItem("dark", "false");
+    }
+  }, [dark]);
+
+  return (
+    <Button
+      aria-label="toggle dark mode"
+      className="focus:outline-none text-3xl"
+      onClick={() => setDark((d) => !d)}
+      variant={"tertiary"}
+    >
+      {dark ? <MdLightMode /> : <MdDarkMode />}
+    </Button>
+  );
+};

frontend/app/user/components/Graphs/BrainSpaceChart.tsx

@@ -18,21 +18,18 @@ const BrainSpaceChart = ({
   max_brain_size,
   ...props
 }: BrainSpaceChartProps): JSX.Element => {
-  const { t } = useTranslation(["translation", "user"]);
+  const { t } = useTranslation(["translation","user"]);
 
   return (
     <>
       <VictoryPie
         data={[
-          { x: t("Used", { ns: "user" }), y: current_brain_size },
-          {
-            x: t("Unused", { ns: "user" }),
-            y: max_brain_size - current_brain_size,
-          },
+          { x: t("Used", {ns: "user"}), y: current_brain_size },
+          { x: t("Unused", {ns: "user"}), y: max_brain_size - current_brain_size },
         ]}
         containerComponent={
           <VictoryContainer
-            className="bg-white dark:bg-black rounded-md w-full h-full"
+            className="bg-white rounded-md w-full h-full"
             responsive={true}
           />
         }

frontend/app/user/components/Graphs/RequestsPerDayChart.tsx

@@ -41,7 +41,7 @@ export const RequestsPerDayChart = ({
       theme={VictoryTheme.material}
       containerComponent={
         <VictoryContainer
-          className="bg-white dark:bg-black rounded-md w-full h-full"
+          className="bg-white rounded-md w-full h-full"
           responsive={true}
         />
       }

frontend/app/user/components/LanguageDropDown/LanguageDropDown.tsx

@@ -25,9 +25,12 @@ export const LanguageDropDown = (): JSX.Element => {
         >
           <div>
             <div className="overflow-auto scrollbar flex flex-col h-48 mt-5">
-              {Object.keys(allLanguages).map((lang) => {
+              {allLanguages.map((lang) => {
                 return (
-                  <div key={lang} className="relative flex group items-center">
+                  <div
+                    key={lang.id}
+                    className="relative flex group items-center"
+                  >
                     <button
                       type="button"
                       className={`flex flex-1 items-center gap-2 w-full text-left px-4 py-2 text-sm leading-5 text-gray-900 dark:text-gray-300 group-hover:bg-gray-100 dark:group-hover:bg-gray-700 group-focus:bg-gray-100 dark:group-focus:bg-gray-700 group-focus:outline-none transition-colors`}
@@ -45,7 +48,7 @@ export const LanguageDropDown = (): JSX.Element => {
                           height={32}
                         />
                       </span>
-                      <span className="flex-1">{allLanguages[lang].label}</span>
+                      <span className="flex-1">{lang.name}</span>
                     </button>
                   </div>
                 );