feat: add button to open extension in a browser page and various UI u…

…pdates (#99)
tlsnotary · Oct 9, 2024 · f6e5820 · f6e5820
1 parent 21ebcd1
commit f6e5820
Show file tree

Hide file tree

Showing 14 changed files with 467 additions and 58 deletions.
diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
@@ -0,0 +1,115 @@
+import React, {
+  MouseEventHandler,
+  ReactElement,
+  ReactNode,
+  useCallback,
+  useState,
+} from 'react';
+import Icon from '../Icon';
+import browser from 'webextension-polyfill';
+import classNames from 'classnames';
+import { useNavigate } from 'react-router';
+import PluginUploadInfo from '../PluginInfo';
+
+export function MenuIcon(): ReactElement {
+  const [opened, setOpen] = useState(false);
+
+  const toggleMenu = useCallback(() => {
+    setOpen(!opened);
+  }, [opened]);
+
+  return (
+    <div className="relative">
+      {opened && (
+        <>
+          <div
+            className="fixed top-0 left-0 w-screen h-screen z-10"
+            onClick={toggleMenu}
+          />
+          <Menu opened={opened} setOpen={setOpen} />
+        </>
+      )}
+      <Icon
+        fa="fa-solid fa-bars"
+        className="text-slate-500 hover:text-slate-700 active:text-slate-900 cursor-pointer z-20"
+        onClick={toggleMenu}
+      />
+    </div>
+  );
+}
+
+export default function Menu(props: {
+  opened: boolean;
+  setOpen: (opened: boolean) => void;
+}): ReactElement {
+  const navigate = useNavigate();
+  const openExtensionInPage = () => {
+    props.setOpen(false);
+    browser.tabs.create({
+      url: `chrome-extension://${chrome.runtime.id}/popup.html`,
+    });
+  };
+
+  return (
+    <div className="absolute top-[100%] right-0 rounded-md z-20">
+      <div className="flex flex-col bg-slate-200 w-40 shadow rounded-md py">
+        <MenuRow
+          fa="fa-solid fa-plus"
+          className="relative"
+          onClick={() => {
+            props.setOpen(false);
+          }}
+        >
+          <PluginUploadInfo />
+          <span>Install Plugin</span>
+        </MenuRow>
+        <MenuRow
+          fa="fa-solid fa-toolbox"
+          className="border-b border-slate-300"
+          onClick={() => {
+            props.setOpen(false);
+            navigate('/plugins');
+          }}
+        >
+          Plugins
+        </MenuRow>
+        <MenuRow
+          className="lg:hidden"
+          fa="fa-solid fa-up-right-and-down-left-from-center"
+          onClick={openExtensionInPage}
+        >
+          Expand
+        </MenuRow>
+        <MenuRow
+          fa="fa-solid fa-gear"
+          onClick={() => {
+            props.setOpen(false);
+            navigate('/options');
+          }}
+        >
+          Options
+        </MenuRow>
+      </div>
+    </div>
+  );
+}
+
+function MenuRow(props: {
+  fa: string;
+  children?: ReactNode;
+  onClick?: MouseEventHandler;
+  className?: string;
+}): ReactElement {
+  return (
+    <div
+      className={classNames(
+        'flex flex-row items-center py-3 px-4 gap-2 hover:bg-slate-300 cursor-pointer text-slate-800 hover:text-slate-900 font-semibold',
+        props.className,
+      )}
+      onClick={props.onClick}
+    >
+      <Icon size={0.875} fa={props.fa} />
+      {props.children}
+    </div>
+  );
+}
diff --git a/src/components/PluginList/index.tsx b/src/components/PluginList/index.tsx
@@ -5,12 +5,7 @@ import React, {
   useEffect,
   useState,
 } from 'react';
-import {
-  fetchPluginHashes,
-  removePlugin,
-  fetchPluginConfigByHash,
-  runPlugin,
-} from '../../utils/rpc';
+import { fetchPluginHashes, removePlugin, runPlugin } from '../../utils/rpc';
 import { usePluginHashes } from '../../reducers/plugins';
 import { PluginConfig } from '../../utils/misc';
 import DefaultPluginIcon from '../../assets/img/default-plugin-icon.png';

diff --git a/src/components/RequestTable/index.tsx b/src/components/RequestTable/index.tsx
@@ -1,13 +1,21 @@
-import React, { ReactElement, useCallback, useState } from 'react';
+import React, {
+  ReactElement,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { BackgroundActiontype, RequestLog } from '../../entries/Background/rpc';
 import { useNavigate } from 'react-router';
 import Fuse from 'fuse.js';
 import Icon from '../Icon';
 import { useDispatch } from 'react-redux';
 import { setRequests } from '../../reducers/requests';
+import classNames from 'classnames';
 
 type Props = {
   requests: RequestLog[];
+  shouldFix?: boolean;
 };
 
 export default function RequestTable(props: Props): ReactElement {
@@ -47,7 +55,14 @@ export default function RequestTable(props: Props): ReactElement {
 
   return (
     <div className="flex flex-col flex-nowrap flex-grow">
-      <div className="flex flex-row flex-nowrap bg-slate-300 py-1 px-2 gap-2">
+      <div
+        className={classNames(
+          'flex flex-row flex-nowrap bg-slate-300 py-1 px-2 gap-2',
+          {
+            'fixed top-[4.5rem] w-full shadow': props.shouldFix,
+          },
+        )}
+      >
         <input
           className="input w-full"
           type="text"
@@ -61,7 +76,7 @@ export default function RequestTable(props: Props): ReactElement {
           onClick={reset}
         />
       </div>
-      <div className="flex-grow overflow-y-auto h-0">
+      <div className="flex-grow">
         <table className="border border-slate-300 border-collapse table-fixed w-full">
           <thead className="bg-slate-200">
             <tr>

diff --git a/src/entries/Background/rpc.ts b/src/entries/Background/rpc.ts
@@ -224,7 +224,7 @@ function handleGetProveRequests(
   sendResponse: (data?: any) => void,
 ): boolean {
   getNotaryRequests().then(async (reqs) => {
-    for (const req of reqs) {
+    for (const req of reqs.reverse()) {
       await browser.runtime.sendMessage({
         type: BackgroundActiontype.push_action,
         data: {

diff --git a/src/entries/Popup/Popup.tsx b/src/entries/Popup/Popup.tsx
@@ -33,6 +33,8 @@ import Icon from '../../components/Icon';
 import classNames from 'classnames';
 import { getConnection } from '../Background/db';
 import { useIsConnected, setConnection } from '../../reducers/requests';
+import { MenuIcon } from '../../components/Menu';
+import Plugins from '../../pages/Plugins';
 
 const Popup = () => {
   const dispatch = useDispatch();
@@ -84,25 +86,29 @@ const Popup = () => {
   }, []);
 
   return (
-    <div className="flex flex-col w-full h-full overflow-hidden">
+    <div className="flex flex-col w-full h-full overflow-hidden lg:w-[600px] lg:h-[800px] lg:border lg:m-auto lg:mt-40 lg:bg-white lg:shadow">
       <div className="flex flex-nowrap flex-shrink-0 flex-row items-center relative gap-2 h-9 p-2 cursor-default justify-center bg-slate-300 w-full">
         <img
           className="absolute left-2 h-5 cursor-pointer"
           src={logo}
           alt="logo"
           onClick={() => navigate('/')}
         />
-        <AppConnectionLogo />
+        <div className="flex flex-row flex-grow items-center justify-end gap-4">
+          <AppConnectionLogo />
+          <MenuIcon />
+        </div>
       </div>
       <Routes>
         <Route path="/requests/:requestId/*" element={<Request />} />
         <Route path="/notary/:requestId" element={<Notarize />} />
         <Route path="/verify/:requestId/*" element={<ProofViewer />} />
         <Route path="/verify" element={<ProofUploader />} />
-        <Route path="/history" element={<History />} />
-        <Route path="/requests" element={<Requests />} />
+        <Route path="/history" element={<Home tab="history" />} />
+        <Route path="/requests" element={<Home tab="network" />} />
         <Route path="/custom/*" element={<RequestBuilder />} />
         <Route path="/options" element={<Options />} />
+        <Route path="/plugins" element={<Plugins />} />
         <Route path="/home" element={<Home />} />
         <Route path="/plugininfo" element={<PluginUploadInfo />} />
         <Route path="/connection-approval" element={<ConnectionApproval />} />
@@ -141,7 +147,7 @@ function AppConnectionLogo() {
 
   return (
     <div
-      className="absolute right-2 flex flex-nowrap flex-row items-center gap-1 justify-center w-fit cursor-pointer"
+      className="flex flex-nowrap flex-row items-center gap-1 justify-center w-fit cursor-pointer"
       onClick={() => setShowConnectionDetails(true)}
     >
       <div className="flex flex-row relative bg-black border-[1px] border-black rounded-full">

diff --git a/src/entries/Popup/index.scss b/src/entries/Popup/index.scss
@@ -30,6 +30,10 @@ code {
   width: 100vw;
   height: 100vh;
   overflow: hidden;
+
+  @media (min-width: 1024px) {
+    @apply bg-slate-400;
+  }
 }
 
 .button {

diff --git a/src/entries/SidePanel/SidePanel.tsx b/src/entries/SidePanel/SidePanel.tsx
@@ -235,7 +235,7 @@ function StepContent(
         )}
         onClick={viewProofInPopup}
       >
-        <span className="text-sm">View Proof</span>
+        <span className="text-sm">View</span>
       </button>
     );
   } else if (notaryRequest?.status === 'pending' || pending || notarizationId) {

diff --git a/src/pages/History/index.tsx b/src/pages/History/index.tsx
@@ -160,7 +160,7 @@ export function OneRequestHistory(props: {
               className="bg-slate-600 text-slate-200 hover:bg-slate-500 hover:text-slate-100"
               onClick={onView}
               fa="fa-solid fa-receipt"
-              ctaText="View Proof"
+              ctaText="View"
               hidden={hideActions.includes('view')}
             />
             <ActionButton

diff --git a/src/pages/Home/index.scss b/src/pages/Home/index.scss
@@ -0,0 +1,5 @@
+#home {
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}