feat: Resources page to link users to open-sauced feedback/discussions

src/App.tsx

@@ -5,7 +5,6 @@ import Loading from "./pages/loading";
 import { useAuth } from "./hooks/useAuth";
 import { goTo } from "react-chrome-extension-router";
 
-
 const App = () => {
   const { isTokenValid } = useAuth();
 

src/constants.ts

@@ -23,3 +23,10 @@ export const GITHUB_PR_COMMENT_EDITOR_SELECTOR = "flex-nowrap d-inline-block mr-
 export const GITHUB_REPO_ACTIONS_SELECTOR = ".pagehead-actions";
 export const GITHUB_PR_COMMENT_TEXT_AREA_SELECTOR = "pull_request[body]";
 export const GITHUB_PR_BASE_BRANCH_SELECTOR = "css-truncate css-truncate-target";
+
+// External Links
+export const EXTERNAL_RESOURCES = [
+    { link: "https://docs.opensauced.pizza/chrome-extension/introduction-to-the-chrome-extension/", key: "Docs" },
+    { link: "https://github.com/open-sauced/ai/issues", key: "Issues" },
+    { link: "https://github.com/orgs/open-sauced/discussions", key: "Discussions" },
+];

src/pages/help.tsx

@@ -0,0 +1,54 @@
+import { FaChevronLeft } from "react-icons/fa";
+import OpenSaucedLogo from "../assets/opensauced-logo.svg";
+import { EXTERNAL_RESOURCES } from "../constants";
+import { HiArrowTopRightOnSquare } from "react-icons/hi2";
+import { goBack } from "react-chrome-extension-router";
+
+const Help = () => (
+  <div className="p-4 bg-slate-800">
+    <div className="grid grid-cols-1 divide-y divide-white/40 divider-y-center-2 min-w-[320px] text-white">
+      <header className="flex justify-between">
+        <div className="flex items-center gap-2">
+          <button
+            className="rounded-full p-2 bg-slate-700 hover:bg-slate-700/50"
+            onClick={() => {
+              goBack();
+            }}
+          >
+            <FaChevronLeft className="text-osOrange text-white" />
+          </button>
+
+          <img
+            alt="OpenSauced logo"
+            className="w-[100%]"
+            src={OpenSaucedLogo}
+          />
+        </div>
+      </header>
+
+      <main className="main-content text-white">
+        <h3 className="text font-medium text-base leading-10">
+          Help:
+        </h3>
+
+        <div className="tools flex flex-col gap-2">
+          {EXTERNAL_RESOURCES.map(externalLink => (
+            <a
+              key={externalLink.key}
+              className="flex items-center bg-slate-700 hover:bg-slate-700/70 text-white hover:text-orange no-underline gap-2 p-1.5 px-3 w-full rounded-sm font-medium text-sm"
+              href={externalLink.link}
+              rel="noreferrer"
+              target="_blank"
+            >
+              <HiArrowTopRightOnSquare />
+
+              {externalLink.key}
+            </a>
+          ))}
+        </div>
+      </main>
+    </div>
+  </div>
+);
+
+export default Help;

src/pages/home.tsx

@@ -1,97 +1,107 @@
-import { HiArrowTopRightOnSquare, HiPencil, HiUserCircle } from "react-icons/hi2";
+import {
+  HiArrowTopRightOnSquare,
+  HiOutlineQuestionMarkCircle,
+  HiPencil,
+  HiUserCircle,
+} from "react-icons/hi2";
 import OpenSaucedLogo from "../assets/opensauced-logo.svg";
 import { useAuth } from "../hooks/useAuth";
 import { useOpensaucedUserCheck } from "../hooks/useOpensaucedUserCheck";
 import { Profile } from "./profile";
 import { goTo } from "react-chrome-extension-router";
 import AIPRDescription from "./aiprdescription";
+import Help from "./help";
 
 const Home = () => {
   const { user } = useAuth();
   const { currentTabIsOpensaucedUser, checkedUser } = useOpensaucedUserCheck();
 
   return (
-  <div className="p-4 bg-slate-800">
-    <div className="grid grid-cols-1 divide-y divide-white/40 divider-y-center-2 min-w-[320px] text-white">
-      <header className="flex justify-between">
-        <img
-          alt="OpenSauced logo"
-          className="w-[45%]"
-          src={OpenSaucedLogo}
-        />
+    <div className="p-4 bg-slate-800">
+      <div className="grid grid-cols-1 divide-y divide-white/40 divider-y-center-2 min-w-[320px] text-white">
+        <header className="flex justify-between">
+          <img alt="OpenSauced logo" className="w-[45%]" src={OpenSaucedLogo} />
 
-        {user && (
-          <button
-            className="flex gap-1 items-center hover:text-orange text-white no-underline"
-            onClick={() => {
-              goTo(Profile, { username: user.user_name });
-            }}
-          >
-            {user.user_name}
-
-            <img
-              alt="User avatar"
-              className="rounded-full w-6 aspect-square border border-orange"
-              src={`https://github.com/${user.user_name}.png`}
-            />
-          </button>
-        )}
-      </header>
+          {user && (
+            <button
+              className="flex gap-1 items-center hover:text-orange text-white no-underline"
+              onClick={() => {
+                goTo(Profile, { username: user.user_name });
+              }}
+            >
+              {user.user_name}
 
-      <main className="main-content">
-        <h3 className="text font-medium text-base leading-10">Tools:</h3>
+              <img
+                alt="User avatar"
+                className="rounded-full w-6 aspect-square border border-orange"
+                src={`https://github.com/${user.user_name}.png`}
+              />
+            </button>
+          )}
+        </header>
 
-        <div className="tools flex flex-col gap-2">
-          <a
-            className="flex items-center bg-slate-700 hover:bg-slate-700/70 text-white hover:text-orange no-underline gap-2 p-1.5 px-3 w-full rounded-sm font-medium text-sm"
-            href="https://insights.opensauced.pizza/feed"
-            rel="noreferrer"
-            target="_blank"
-          >
-            <HiArrowTopRightOnSquare />
-            Go to Highlights feed
-          </a>
+        <main className="main-content">
+          <h3 className="text font-medium text-base leading-10">Tools:</h3>
 
-          <a
-            className="flex items-center bg-slate-700 hover:bg-slate-700/70 hover:text-orange text-white gap-2 p-1.5 px-3 w-full rounded-sm font-medium text-sm"
-            href="https://insights.opensauced.pizza"
-            rel="noreferrer"
-            target="_blank"
-          >
-            <HiArrowTopRightOnSquare />
-            Go to Dashboard
-          </a>
+          <div className="tools flex flex-col gap-2">
+            <a
+              className="flex items-center bg-slate-700 hover:bg-slate-700/70 text-white hover:text-orange no-underline gap-2 p-1.5 px-3 w-full rounded-sm font-medium text-sm"
+              href="https://insights.opensauced.pizza/feed"
+              rel="noreferrer"
+              target="_blank"
+            >
+              <HiArrowTopRightOnSquare />
+              Go to Highlights feed
+            </a>
 
-          <button
-            className="flex items-center bg-slate-700 hover:bg-slate-700/70 hover:text-orange text-white gap-2 p-1.5 px-3 w-full rounded-sm font-medium text-sm"
-            onClick={() => {
-              goTo(AIPRDescription);
-            }}
-          >
-            <HiPencil />
-            AI PR Description
-          </button>
+            <a
+              className="flex items-center bg-slate-700 hover:bg-slate-700/70 hover:text-orange text-white gap-2 p-1.5 px-3 w-full rounded-sm font-medium text-sm"
+              href="https://insights.opensauced.pizza"
+              rel="noreferrer"
+              target="_blank"
+            >
+              <HiArrowTopRightOnSquare />
+              Go to Dashboard
+            </a>
 
-          {currentTabIsOpensaucedUser && (
             <button
               className="flex items-center bg-slate-700 hover:bg-slate-700/70 hover:text-orange text-white gap-2 p-1.5 px-3 w-full rounded-sm font-medium text-sm"
               onClick={() => {
-                goTo(Profile, { username: checkedUser });
+                goTo(AIPRDescription);
               }}
             >
-              <HiUserCircle />
-              View
+              <HiPencil />
+              AI PR Description
+            </button>
 
-{" "}
+            {currentTabIsOpensaucedUser && (
+              <button
+                className="flex items-center bg-slate-700 hover:bg-slate-700/70 hover:text-orange text-white gap-2 p-1.5 px-3 w-full rounded-sm font-medium text-sm"
+                onClick={() => {
+                  goTo(Profile, { username: checkedUser });
+                }}
+              >
+                <HiUserCircle />
+                View {checkedUser}
+                &apos;s profile
+              </button>
+            )}
+          </div>
+        </main>
 
-{checkedUser}
-              &apos;s profile
-            </button>
-          )}
-        </div>
-      </main>
+        <footer className="tools flex gap-2">
+          <button
+            className="flex items-center bg-slate-700 hover:bg-slate-700/70 hover:text-orange text-white gap-2 p-1.5 px-3 w-fit rounded-sm font-medium text-sm"
+            onClick={() => {
+              goTo(Help);
+            }}
+          >
+            <HiOutlineQuestionMarkCircle />
+            Help
+          </button>
+        </footer>
+      </div>
     </div>
-  </div>
   );
 };