feat: Improved settings page

- Improved settings page
- Added indicator component
- Disable refetchOnWindowFocus

Author: CrawlerCode

src/components/general/Indicator.tsx

@@ -0,0 +1,28 @@
+import clsx from "clsx";
+
+type PropTypes = {
+  variant: "primary" | "success" | "danger";
+};
+
+const Indicator = ({ variant }: PropTypes) => {
+  return (
+    <span className="relative flex h-3 w-3">
+      <span
+        className={clsx("animate-ping absolute inline-flex h-full w-full rounded-full", {
+          "bg-primary-500/75 dark:bg-primary-700/75": variant === "primary",
+          "bg-green-500/75 dark:bg-green-700/75": variant === "success",
+          "bg-red-500/75 dark:bg-red-700/75": variant === "danger",
+        })}
+      ></span>
+      <span
+        className={clsx("relative inline-flex rounded-full h-3 w-3", {
+          "bg-primary-600 dark:bg-primary-800": variant === "primary",
+          "bg-green-600 dark:bg-green-800": variant === "success",
+          "bg-red-600 dark:bg-red-800": variant === "danger",
+        })}
+      ></span>
+    </span>
+  );
+};
+
+export default Indicator;

src/components/general/Toast.tsx

@@ -13,8 +13,8 @@ const Toast = ({ type, message, allowClose = true, onClose }: PropTypes) => {
       <div className="flex items-center w-full p-1 text-gray-700 bg-gray-200 rounded-lg shadow dark:text-gray-300 dark:bg-gray-600" role="alert">
         <div
           className={clsx("inline-flex items-center justify-center flex-shrink-0 w-8 h-8", {
-            "text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200": type === "success",
-            "text-red-500 bg-red-100 rounded-lg dark:bg-red-800 dark:text-red-200": type === "error",
+            "text-green-700 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200": type === "success",
+            "text-red-700 bg-red-100 rounded-lg dark:bg-red-800 dark:text-red-200": type === "error",
           })}
         >
           {type === "success" && (

src/main.tsx

@@ -6,7 +6,13 @@ import "react-tooltip/dist/react-tooltip.css";
 import App from "./App.tsx";
 import "./index.css";
 
-const queryClient = new QueryClient();
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+    },
+  },
+});
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>

src/pages/SettingsPage.tsx

@@ -4,6 +4,7 @@ import { Field, Form, Formik, FormikProps } from "formik";
 import { useEffect, useRef, useState } from "react";
 import * as Yup from "yup";
 import CheckBox from "../components/general/CheckBox";
+import Indicator from "../components/general/Indicator";
 import InputField from "../components/general/InputField";
 import Toast from "../components/general/Toast";
 import useMyAccount from "../hooks/useMyAccount";
@@ -51,11 +52,36 @@ const SettingsPage = () => {
                   <div className="flex flex-col gap-y-2">
                     <Field type="text" name="redmineURL" title="Redmine URL" placeholder="Redmine URL" required as={InputField} error={touched.redmineURL && errors.redmineURL} />
                     <Field type="password" name="redmineApiKey" title="Redmine API-Key" placeholder="Redmine API-Key" required as={InputField} error={touched.redmineApiKey && errors.redmineApiKey} />
-                    {myAccount.data && (
-                      <p>
-                        User: {myAccount.data.firstname} {myAccount.data.lastname} ({myAccount.data.login})
-                      </p>
-                    )}
+
+                    <div className="flex items-center gap-x-2">
+                      {myAccount.isLoading && (
+                        <>
+                          <Indicator variant="primary" />
+                          <p>Connecting...</p>
+                        </>
+                      )}
+                      {myAccount.isError && (
+                        <>
+                          <Indicator variant="danger" />
+                          <p>Connection failed</p>
+                        </>
+                      )}
+                      {!myAccount.isLoading && !myAccount.isError && myAccount.data && (
+                        <>
+                          <Indicator variant="success" />
+                          <div>
+                            <p>Connection successful!</p>
+                            <p>
+                              Hello{" "}
+                              <strong>
+                                {myAccount.data.firstname} {myAccount.data.lastname}
+                              </strong>{" "}
+                              ({myAccount.data.login})
+                            </p>
+                          </div>
+                        </>
+                      )}
+                    </div>
                   </div>
                 </fieldset>
                 <fieldset className="p-1.5 rounded-lg border border-gray-300 dark:border-gray-600">
@@ -83,7 +109,9 @@ const SettingsPage = () => {
         )}
       </Formik>
       <div className="w-full flex flex-col items-center p-2 mt-3">
-        <g>{chrome.runtime.getManifest().name}</g>
+        <a href="https://chrome.google.com/webstore/detail/redmine-time-tracking/ldcanhhkffokndenejhafhlkapflgcjg" target="_blank" tabIndex={-1} className="hover:underline">
+          {chrome.runtime.getManifest().name}
+        </a>
         <p>Version: {chrome.runtime.getManifest().version}</p>
       </div>
       {saved && <Toast type="success" message="Settings saved!" onClose={() => setSaved(false)} />}