From 7b4256e79115025963a3c87e07b025461fa71ff1 Mon Sep 17 00:00:00 2001
From: Hendrik Eeckhaut <hendrik@eeckhaut.org>
Date: Tue, 17 Sep 2024 14:51:06 +0200
Subject: [PATCH 1/6] feat: add button to open extension in a browser page

#77
---
 src/pages/Options/index.tsx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/pages/Options/index.tsx b/src/pages/Options/index.tsx
index df37f39e..5ce6a53e 100644
--- a/src/pages/Options/index.tsx
+++ b/src/pages/Options/index.tsx
@@ -76,6 +76,18 @@ export default function Options(): ReactElement {
     [onSave],
   );
 
+  const openExtensionDetails = () => {
+    browser.tabs.create({
+      url: `chrome://extensions/?id=${chrome.runtime.id}`,
+    });
+  };
+
+  const openExtensionInPage = () => {
+    browser.tabs.create({
+      url: `chrome-extension://${chrome.runtime.id}/popup.html`,
+    });
+  };
+
   const onAdvanced = useCallback(() => {
     setAdvanced(!advanced);
   }, [advanced]);
@@ -152,6 +164,14 @@ export default function Options(): ReactElement {
           Save
         </button>
       </div>
+      <div className="flex flex-row justify-start gap-2 p-2">
+        <button onClick={openExtensionDetails} className="button">
+          View Extension Details
+        </button>
+        <button onClick={openExtensionInPage} className="button">
+          Open Extension in Browser Page
+        </button>
+      </div>
     </div>
   );
 }

From c4edbfd90d0a2c826a53a8f38e94afba89da9f2f Mon Sep 17 00:00:00 2001
From: tsukino <0xtsukino@gmail.com>
Date: Tue, 8 Oct 2024 23:37:31 +0800
Subject: [PATCH 2/6] feat: add options menu

---
 src/components/Menu/index.tsx | 92 +++++++++++++++++++++++++++++++++++
 src/entries/Popup/Popup.tsx   | 10 ++--
 src/entries/Popup/index.scss  |  4 ++
 src/pages/Options/index.tsx   | 20 --------
 4 files changed, 103 insertions(+), 23 deletions(-)
 create mode 100644 src/components/Menu/index.tsx

diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
new file mode 100644
index 00000000..cc82a211
--- /dev/null
+++ b/src/components/Menu/index.tsx
@@ -0,0 +1,92 @@
+import React, {
+  MouseEventHandler,
+  ReactElement,
+  useCallback,
+  useState,
+} from 'react';
+import Icon from '../Icon';
+import browser from 'webextension-polyfill';
+import classNames from 'classnames';
+import { useNavigate } from 'react-router';
+
+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 shadow rounded-md py-1">
+        <MenuRow fa="fa-solid fa-toolbox" label="Plugins" />
+        <MenuRow
+          className="lg:hidden"
+          fa="fa-solid fa-up-right-and-down-left-from-center"
+          label="Expand"
+          onClick={openExtensionInPage}
+        />
+        <MenuRow
+          fa="fa-solid fa-gear"
+          label="Options"
+          onClick={() => {
+            props.setOpen(false);
+            navigate('/options');
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+function MenuRow(props: {
+  fa: string;
+  label: string;
+  onClick?: MouseEventHandler;
+  className?: string;
+}): ReactElement {
+  return (
+    <div
+      className={classNames(
+        'flex flex-row items-center py-2 px-4 gap-2 hover:bg-slate-300 cursor-pointer text-slate-800 hover:text-slate-900',
+        props.className,
+      )}
+      onClick={props.onClick}
+    >
+      <Icon size={0.875} fa={props.fa} />
+      <div className="font-semibold">{props.label}</div>
+    </div>
+  );
+}
diff --git a/src/entries/Popup/Popup.tsx b/src/entries/Popup/Popup.tsx
index f8d25578..51dfe6d3 100644
--- a/src/entries/Popup/Popup.tsx
+++ b/src/entries/Popup/Popup.tsx
@@ -33,6 +33,7 @@ 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';
 
 const Popup = () => {
   const dispatch = useDispatch();
@@ -84,7 +85,7 @@ 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"
@@ -92,7 +93,10 @@ const Popup = () => {
           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 />} />
@@ -141,7 +145,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
index b8ff5d09..75e96211 100644
--- 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/pages/Options/index.tsx b/src/pages/Options/index.tsx
index 5ce6a53e..df37f39e 100644
--- a/src/pages/Options/index.tsx
+++ b/src/pages/Options/index.tsx
@@ -76,18 +76,6 @@ export default function Options(): ReactElement {
     [onSave],
   );
 
-  const openExtensionDetails = () => {
-    browser.tabs.create({
-      url: `chrome://extensions/?id=${chrome.runtime.id}`,
-    });
-  };
-
-  const openExtensionInPage = () => {
-    browser.tabs.create({
-      url: `chrome-extension://${chrome.runtime.id}/popup.html`,
-    });
-  };
-
   const onAdvanced = useCallback(() => {
     setAdvanced(!advanced);
   }, [advanced]);
@@ -164,14 +152,6 @@ export default function Options(): ReactElement {
           Save
         </button>
       </div>
-      <div className="flex flex-row justify-start gap-2 p-2">
-        <button onClick={openExtensionDetails} className="button">
-          View Extension Details
-        </button>
-        <button onClick={openExtensionInPage} className="button">
-          Open Extension in Browser Page
-        </button>
-      </div>
     </div>
   );
 }

From 6510c42b4dd41befb8ba639f314e6de9c8a9d618 Mon Sep 17 00:00:00 2001
From: tsukino <0xtsukino@gmail.com>
Date: Wed, 9 Oct 2024 02:13:54 +0800
Subject: [PATCH 3/6] feat: new ui for home view

---
 src/components/Menu/index.tsx         |  21 +++-
 src/components/PluginList/index.tsx   |   7 +-
 src/components/RequestTable/index.tsx |  21 +++-
 src/entries/Background/rpc.ts         |   2 +-
 src/entries/Popup/Popup.tsx           |   6 +-
 src/pages/Home/index.scss             |   5 +
 src/pages/Home/index.tsx              | 145 ++++++++++++++++++++------
 src/pages/Plugins/index.tsx           |  10 ++
 src/pages/Requests/index.tsx          |   4 +-
 9 files changed, 174 insertions(+), 47 deletions(-)
 create mode 100644 src/pages/Home/index.scss
 create mode 100644 src/pages/Plugins/index.tsx

diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
index cc82a211..e346e0e2 100644
--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
@@ -50,8 +50,23 @@ export default function Menu(props: {
 
   return (
     <div className="absolute top-[100%] right-0 rounded-md z-20">
-      <div className="flex flex-col bg-slate-200 shadow rounded-md py-1">
-        <MenuRow fa="fa-solid fa-toolbox" label="Plugins" />
+      <div className="flex flex-col bg-slate-200 w-40 shadow rounded-md py">
+        <MenuRow
+          fa="fa-solid fa-plus"
+          label="Install Plugin"
+          onClick={() => {
+            props.setOpen(false);
+          }}
+        />
+        <MenuRow
+          fa="fa-solid fa-toolbox"
+          label="Plugins"
+          className="border-b border-slate-300"
+          onClick={() => {
+            props.setOpen(false);
+            navigate('/plugins');
+          }}
+        />
         <MenuRow
           className="lg:hidden"
           fa="fa-solid fa-up-right-and-down-left-from-center"
@@ -80,7 +95,7 @@ function MenuRow(props: {
   return (
     <div
       className={classNames(
-        'flex flex-row items-center py-2 px-4 gap-2 hover:bg-slate-300 cursor-pointer text-slate-800 hover:text-slate-900',
+        'flex flex-row items-center py-3 px-4 gap-2 hover:bg-slate-300 cursor-pointer text-slate-800 hover:text-slate-900',
         props.className,
       )}
       onClick={props.onClick}
diff --git a/src/components/PluginList/index.tsx b/src/components/PluginList/index.tsx
index 7aaefcb4..1d871c7d 100644
--- 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
index 4c534168..ec5f2f2d 100644
--- 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
index bbbdee23..f0fb5f4b 100644
--- 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
index 51dfe6d3..56fd0ab8 100644
--- a/src/entries/Popup/Popup.tsx
+++ b/src/entries/Popup/Popup.tsx
@@ -34,6 +34,7 @@ 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();
@@ -103,10 +104,11 @@ const Popup = () => {
         <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={<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 />} />
diff --git a/src/pages/Home/index.scss b/src/pages/Home/index.scss
new file mode 100644
index 00000000..b5b8fec3
--- /dev/null
+++ b/src/pages/Home/index.scss
@@ -0,0 +1,5 @@
+#home {
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
\ No newline at end of file
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index 74713e8d..10a34e95 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -2,78 +2,163 @@ import React, {
   MouseEventHandler,
   ReactElement,
   ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
   useState,
 } from 'react';
 import Icon from '../../components/Icon';
 import classNames from 'classnames';
 import { useNavigate } from 'react-router';
 import { useRequests } from '../../reducers/requests';
-import { PluginList } from '../../components/PluginList';
-import PluginUploadInfo from '../../components/PluginInfo';
 import { ErrorModal } from '../../components/ErrorModal';
+import History from '../History';
+import './index.scss';
+import Requests from '../Requests';
 
-export default function Home(): ReactElement {
-  const requests = useRequests();
+export default function Home(props: {
+  tab?: 'history' | 'network';
+}): ReactElement {
   const navigate = useNavigate();
   const [error, showError] = useState('');
+  const [tab, setTab] = useState<'history' | 'network'>(props.tab || 'history');
+  const scrollableContent = useRef<HTMLDivElement | null>(null);
+  const [shouldFix, setFix] = useState(false);
+
+  useEffect(() => {
+    const element = scrollableContent.current;
+    if (!element) return;
+    let timer = Date.now();
+    const onScroll = () => {
+      const now = Date.now();
+      if (now - timer > 20) {
+        timer = now;
+        console.log(element.scrollTop);
+        if (element.scrollTop >= 95) {
+          setFix(true);
+        } else {
+          setFix(false);
+        }
+      }
+    };
+    element.addEventListener('scroll', onScroll);
+
+    return () => {
+      element.removeEventListener('scroll', onScroll);
+    };
+  }, [scrollableContent]);
 
   return (
-    <div className="flex flex-col gap-4 py-4 overflow-y-auto">
+    <div
+      id="home"
+      ref={scrollableContent}
+      className="flex flex-col flex-grow overflow-y-auto"
+    >
       {error && <ErrorModal onClose={() => showError('')} message={error} />}
-      <div className="flex flex-col flex-nowrap justify-center gap-2 mx-4">
-        <NavButton fa="fa-solid fa-table" onClick={() => navigate('/requests')}>
-          <span>Requests</span>
-          <span>{`(${requests.length})`}</span>
-        </NavButton>
-        <NavButton fa="fa-solid fa-hammer" onClick={() => navigate('/custom')}>
+      <div className="flex flex-row flex-nowrap justify-start items-center gap-4 p-4 border-b">
+        {/*<NavButton*/}
+        {/*  className="lg:hidden"*/}
+        {/*  fa="fa-solid fa-table"*/}
+        {/*  onClick={() => navigate('/requests')}*/}
+        {/*>*/}
+        {/*  <span>Network</span>*/}
+        {/*</NavButton>*/}
+        <NavButton
+          fa="fa-solid fa-hammer"
+          onClick={() => navigate('/custom')}
+          title="Build a custom request"
+        >
           Custom
         </NavButton>
         <NavButton
           fa="fa-solid fa-certificate"
           onClick={() => navigate('/verify')}
+          title="Visualize an attestation"
         >
           Verify
         </NavButton>
-        <NavButton fa="fa-solid fa-list" onClick={() => navigate('/history')}>
+        {/*<NavButton fa="fa-solid fa-list" onClick={() => navigate('/history')}>*/}
+        {/*  History*/}
+        {/*</NavButton>*/}
+        {/*<NavButton className="relative" fa="fa-solid fa-plus">*/}
+        {/*  <PluginUploadInfo />*/}
+        {/*  Install Plugin*/}
+        {/*</NavButton>*/}
+      </div>
+      <div
+        className={classNames('flex flex-row justify-center items-center', {
+          'fixed top-9 w-full bg-white shadow': shouldFix,
+        })}
+      >
+        <TabSelector
+          onClick={() => setTab('network')}
+          selected={tab === 'network'}
+        >
+          Network
+        </TabSelector>
+        <TabSelector
+          onClick={() => setTab('history')}
+          selected={tab === 'history'}
+        >
           History
-        </NavButton>
-        <NavButton className="relative" fa="fa-solid fa-plus">
-          <PluginUploadInfo />
-          Add a plugin
-        </NavButton>
-        <NavButton fa="fa-solid fa-gear" onClick={() => navigate('/options')}>
-          Options
-        </NavButton>
+        </TabSelector>
+      </div>
+      <div className="flex-grow">
+        {tab === 'history' && <History />}
+        {tab === 'network' && <Requests shouldFix={shouldFix} />}
       </div>
-      <PluginList className="mx-4" />
     </div>
   );
 }
 
+function TabSelector(props: {
+  children: string;
+  className?: string;
+  selected?: boolean;
+  onClick: MouseEventHandler;
+}): ReactElement {
+  return (
+    <button
+      onClick={props.onClick}
+      className={classNames(
+        'flex flex-grow items-center justify-center p-2 font-semibold hover:text-slate-700 border-b-2 ',
+        {
+          'font-semibold text-slate-400 border-white': !props.selected,
+          'font-bold text-primary border-primary': props.selected,
+        },
+        props.className,
+      )}
+    >
+      {props.children}
+    </button>
+  );
+}
+
 function NavButton(props: {
   fa: string;
   children?: ReactNode;
   onClick?: MouseEventHandler;
   className?: string;
+  title?: string;
   disabled?: boolean;
 }): ReactElement {
   return (
     <button
       className={classNames(
-        'flex flex-row flex-nowrap items-center justify-center',
-        'text-white rounded px-2 py-1 gap-1',
-        {
-          'bg-primary/[.8] hover:bg-primary/[.7] active:bg-primary':
-            !props.disabled,
-          'bg-primary/[.5]': props.disabled,
-        },
+        'flex flex-col flex-nowrap items-center justify-center',
+        'text-white px-2 py-1 gap-1 opacity-90 hover:opacity-100',
         props.className,
       )}
       onClick={props.onClick}
       disabled={props.disabled}
+      title={props.title}
     >
-      <Icon className="flex-grow-0 flex-shrink-0" fa={props.fa} size={1} />
-      <span className="flex-grow flex-shrink w-0 flex-grow font-bold">
+      <Icon
+        className="w-8 h-8 rounded-full bg-primary flex flex-row items-center justify-center flex-grow-0 flex-shrink-0"
+        fa={props.fa}
+        size={0.875}
+      />
+      <span className="font-bold text-primary w-12 overflow-hidden text-ellipsis">
         {props.children}
       </span>
     </button>
diff --git a/src/pages/Plugins/index.tsx b/src/pages/Plugins/index.tsx
new file mode 100644
index 00000000..c69d62ad
--- /dev/null
+++ b/src/pages/Plugins/index.tsx
@@ -0,0 +1,10 @@
+import React, { ReactElement } from "react";
+import { PluginList } from "../../components/PluginList";
+
+export default function Plugins(): ReactElement {
+  return (
+    <div className="flex flex-col flex-nowrap flex-grow">
+      <PluginList className="p-2 overflow-y-auto" />
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/pages/Requests/index.tsx b/src/pages/Requests/index.tsx
index f4816f86..c71636a4 100644
--- a/src/pages/Requests/index.tsx
+++ b/src/pages/Requests/index.tsx
@@ -2,11 +2,11 @@ import React, { ReactElement } from 'react';
 import RequestTable from '../../components/RequestTable';
 import { useRequests } from '../../reducers/requests';
 
-export default function Requests(): ReactElement {
+export default function Requests(props: { shouldFix?: boolean }): ReactElement {
   const requests = useRequests();
   return (
     <>
-      <RequestTable requests={requests} />
+      <RequestTable shouldFix={props.shouldFix} requests={requests} />
     </>
   );
 }

From d38ddc8c362657c2d6c91f73b38f9584f172f287 Mon Sep 17 00:00:00 2001
From: tsukino <0xtsukino@gmail.com>
Date: Wed, 9 Oct 2024 16:30:02 +0800
Subject: [PATCH 4/6] feat: new action panel ui

---
 src/components/Menu/index.tsx       |  30 ++--
 src/entries/Popup/Popup.tsx         |   2 +-
 src/entries/SidePanel/SidePanel.tsx |   2 +-
 src/pages/History/index.tsx         |   2 +-
 src/pages/Home/index.tsx            | 204 +++++++++++++++++++++++-----
 src/reducers/plugins.tsx            |  33 +++++
 6 files changed, 222 insertions(+), 51 deletions(-)

diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
index e346e0e2..2fb23f70 100644
--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
@@ -1,6 +1,7 @@
 import React, {
   MouseEventHandler,
   ReactElement,
+  ReactNode,
   useCallback,
   useState,
 } from 'react';
@@ -8,6 +9,7 @@ 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);
@@ -53,34 +55,40 @@ export default function Menu(props: {
       <div className="flex flex-col bg-slate-200 w-40 shadow rounded-md py">
         <MenuRow
           fa="fa-solid fa-plus"
-          label="Install Plugin"
+          className="relative"
           onClick={() => {
             props.setOpen(false);
           }}
-        />
+        >
+          <PluginUploadInfo />
+          <span>Install Plugin</span>
+        </MenuRow>
         <MenuRow
           fa="fa-solid fa-toolbox"
-          label="Plugins"
           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"
-          label="Expand"
           onClick={openExtensionInPage}
-        />
+        >
+          Expand
+        </MenuRow>
         <MenuRow
           fa="fa-solid fa-gear"
-          label="Options"
           onClick={() => {
             props.setOpen(false);
             navigate('/options');
           }}
-        />
+        >
+          Options
+        </MenuRow>
       </div>
     </div>
   );
@@ -88,20 +96,20 @@ export default function Menu(props: {
 
 function MenuRow(props: {
   fa: string;
-  label: 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',
+        '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} />
-      <div className="font-semibold">{props.label}</div>
+      {props.children}
     </div>
   );
 }
diff --git a/src/entries/Popup/Popup.tsx b/src/entries/Popup/Popup.tsx
index 56fd0ab8..052d3425 100644
--- a/src/entries/Popup/Popup.tsx
+++ b/src/entries/Popup/Popup.tsx
@@ -104,7 +104,7 @@ const Popup = () => {
         <Route path="/notary/:requestId" element={<Notarize />} />
         <Route path="/verify/:requestId/*" element={<ProofViewer />} />
         <Route path="/verify" element={<ProofUploader />} />
-        {/*<Route path="/history" element={<History />} />*/}
+        <Route path="/history" element={<Home tab="history" />} />
         <Route path="/requests" element={<Home tab="network" />} />
         <Route path="/custom/*" element={<RequestBuilder />} />
         <Route path="/options" element={<Options />} />
diff --git a/src/entries/SidePanel/SidePanel.tsx b/src/entries/SidePanel/SidePanel.tsx
index 738a36cf..ba8046b1 100644
--- 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
index f8150ab3..1fef73e1 100644
--- 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.tsx b/src/pages/Home/index.tsx
index 10a34e95..daaaea42 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -10,43 +10,61 @@ import React, {
 import Icon from '../../components/Icon';
 import classNames from 'classnames';
 import { useNavigate } from 'react-router';
-import { useRequests } from '../../reducers/requests';
 import { ErrorModal } from '../../components/ErrorModal';
 import History from '../History';
 import './index.scss';
 import Requests from '../Requests';
+import PluginUploadInfo from '../../components/PluginInfo';
+import {
+  useOnPluginClick,
+  usePluginConfig,
+  usePluginHashes,
+} from '../../reducers/plugins';
+import { PluginConfig } from '../../utils/misc';
+import { getPluginConfigByHash } from '../../entries/Background/db';
+import { fetchPluginHashes } from '../../utils/rpc';
+import DefaultPluginIcon from '../../assets/img/default-plugin-icon.png';
 
 export default function Home(props: {
   tab?: 'history' | 'network';
 }): ReactElement {
-  const navigate = useNavigate();
   const [error, showError] = useState('');
   const [tab, setTab] = useState<'history' | 'network'>(props.tab || 'history');
   const scrollableContent = useRef<HTMLDivElement | null>(null);
   const [shouldFix, setFix] = useState(false);
+  const [actionPanelElement, setActionPanelElement] =
+    useState<HTMLDivElement | null>(null);
+  const [scrollTop, setScrollTop] = useState(0);
+
+  useEffect(() => {
+    fetchPluginHashes();
+  }, []);
 
   useEffect(() => {
     const element = scrollableContent.current;
     if (!element) return;
+    if (!actionPanelElement) return;
+
     let timer = Date.now();
     const onScroll = () => {
       const now = Date.now();
       if (now - timer > 20) {
         timer = now;
-        console.log(element.scrollTop);
-        if (element.scrollTop >= 95) {
+        setScrollTop(element.scrollTop);
+        if (element.scrollTop >= actionPanelElement.clientHeight) {
           setFix(true);
         } else {
           setFix(false);
         }
       }
     };
+
     element.addEventListener('scroll', onScroll);
 
     return () => {
       element.removeEventListener('scroll', onScroll);
     };
-  }, [scrollableContent]);
+  }, [scrollableContent, actionPanelElement]);
 
   return (
     <div
@@ -55,39 +73,13 @@ export default function Home(props: {
       className="flex flex-col flex-grow overflow-y-auto"
     >
       {error && <ErrorModal onClose={() => showError('')} message={error} />}
-      <div className="flex flex-row flex-nowrap justify-start items-center gap-4 p-4 border-b">
-        {/*<NavButton*/}
-        {/*  className="lg:hidden"*/}
-        {/*  fa="fa-solid fa-table"*/}
-        {/*  onClick={() => navigate('/requests')}*/}
-        {/*>*/}
-        {/*  <span>Network</span>*/}
-        {/*</NavButton>*/}
-        <NavButton
-          fa="fa-solid fa-hammer"
-          onClick={() => navigate('/custom')}
-          title="Build a custom request"
-        >
-          Custom
-        </NavButton>
-        <NavButton
-          fa="fa-solid fa-certificate"
-          onClick={() => navigate('/verify')}
-          title="Visualize an attestation"
-        >
-          Verify
-        </NavButton>
-        {/*<NavButton fa="fa-solid fa-list" onClick={() => navigate('/history')}>*/}
-        {/*  History*/}
-        {/*</NavButton>*/}
-        {/*<NavButton className="relative" fa="fa-solid fa-plus">*/}
-        {/*  <PluginUploadInfo />*/}
-        {/*  Install Plugin*/}
-        {/*</NavButton>*/}
-      </div>
+      <ActionPanel
+        setActionPanelElement={setActionPanelElement}
+        scrollTop={scrollTop}
+      />
       <div
         className={classNames('flex flex-row justify-center items-center', {
-          'fixed top-9 w-full bg-white shadow': shouldFix,
+          'fixed top-9 w-full bg-white shadow lg:w-[598px] lg:mt-40': shouldFix,
         })}
       >
         <TabSelector
@@ -111,6 +103,144 @@ export default function Home(props: {
   );
 }
 
+function ActionPanel({
+  setActionPanelElement,
+  scrollTop,
+}: {
+  scrollTop: number;
+  setActionPanelElement: (el: HTMLDivElement) => void;
+}) {
+  const pluginHashes = usePluginHashes();
+  const navigate = useNavigate();
+  const container = useRef<HTMLDivElement | null>(null);
+  const [isOverflow, setOverflow] = useState(false);
+  const [expanded, setExpand] = useState(false);
+
+  useEffect(() => {
+    const element = container.current;
+
+    if (!element) return;
+
+    setActionPanelElement(element);
+
+    const onCheckSize = () => {
+      if (element.scrollWidth > element.clientWidth) {
+        setOverflow(true);
+      } else {
+        setOverflow(false);
+      }
+    };
+
+    onCheckSize();
+
+    window.addEventListener('resize', onCheckSize);
+
+    return () => {
+      window.removeEventListener('resize', onCheckSize);
+    };
+  }, [container, pluginHashes]);
+
+  useEffect(() => {
+    const element = container.current;
+
+    if (!element) return;
+
+    if (scrollTop >= element.clientHeight) {
+      setExpand(false);
+    }
+  }, [container, scrollTop]);
+
+  return (
+    <div
+      ref={container}
+      className={classNames(
+        'flex flex-row justify-start items-center gap-4 p-4 border-b relative',
+        {
+          'flex-wrap': expanded,
+          'flex-nowrap': !expanded,
+        },
+      )}
+    >
+      <NavButton
+        fa="fa-solid fa-hammer"
+        onClick={() => navigate('/custom')}
+        title="Build a custom request"
+      >
+        Custom
+      </NavButton>
+      <NavButton
+        fa="fa-solid fa-certificate"
+        onClick={() => navigate('/verify')}
+        title="Visualize an attestation"
+      >
+        Verify
+      </NavButton>
+      {pluginHashes.map((hash) => (
+        <PluginIcon hash={hash} />
+      ))}
+      {pluginHashes.map((hash) => (
+        <PluginIcon hash={hash} />
+      ))}
+      {pluginHashes.map((hash) => (
+        <PluginIcon hash={hash} />
+      ))}
+      {pluginHashes.map((hash) => (
+        <PluginIcon hash={hash} />
+      ))}
+      <button
+        className={
+          'flex flex-row items-center justify-center self-start rounded relative border-2 border-dashed border-slate-300 hover:border-slate-400 text-slate-300 hover:text-slate-400 h-16 w-16 mx-1'
+        }
+        title="Install a plugin"
+      >
+        <PluginUploadInfo />
+        <Icon fa="fa-solid fa-plus" />
+      </button>
+      <button
+        className={classNames(
+          'absolute right-0 top-0 w-6 h-full bg-slate-100 hover:bg-slate-200 font-semibold',
+          'flex flex-row items-center justify-center gap-2 text-slate-500 hover:text-slate-700',
+          {
+            hidden: !isOverflow || expanded,
+          },
+        )}
+        onClick={() => setExpand(true)}
+      >
+        <Icon fa="fa-solid fa-caret-down" size={0.875} />
+      </button>
+    </div>
+  );
+}
+
+function PluginIcon({ hash }: { hash: string }) {
+  const config = usePluginConfig(hash);
+  const onPluginClick = useOnPluginClick(hash);
+
+  const onClick = useCallback(() => {
+    if (!config) return;
+    onPluginClick();
+  }, [onPluginClick, config]);
+
+  return (
+    <button
+      className={classNames(
+        'flex flex-col flex-nowrap items-center justify-center',
+        'text-white px-2 py-1 gap-1 opacity-90 hover:opacity-100',
+      )}
+      onClick={onClick}
+    >
+      <Icon
+        className="rounded-full flex flex-row items-center justify-center flex-grow-0 flex-shrink-0"
+        url={config?.icon || DefaultPluginIcon}
+        size={2}
+      />
+      <span className="font-bold text-primary h-10 w-14 overflow-hidden text-ellipsis">
+        {config?.title}
+      </span>
+    </button>
+  );
+}
+
 function TabSelector(props: {
   children: string;
   className?: string;
@@ -158,7 +288,7 @@ function NavButton(props: {
         fa={props.fa}
         size={0.875}
       />
-      <span className="font-bold text-primary w-12 overflow-hidden text-ellipsis">
+      <span className="font-bold text-primary h-10 w-14 overflow-hidden text-ellipsis">
         {props.children}
       </span>
     </button>
diff --git a/src/reducers/plugins.tsx b/src/reducers/plugins.tsx
index 592b4fa3..7fa12461 100644
--- a/src/reducers/plugins.tsx
+++ b/src/reducers/plugins.tsx
@@ -1,6 +1,11 @@
 import { useSelector } from 'react-redux';
 import { AppRootState } from './index';
 import deepEqual from 'fast-deep-equal';
+import { useCallback, useEffect, useState } from 'react';
+import { getPluginConfigByHash } from '../entries/Background/db';
+import { PluginConfig } from '../utils/misc';
+import { runPlugin } from '../utils/rpc';
+import browser from 'webextension-polyfill';
 
 enum ActionType {
   '/plugin/addPlugin' = '/plugin/addPlugin',
@@ -52,3 +57,31 @@ export const usePluginHashes = (): string[] => {
     return state.plugins.order;
   }, deepEqual);
 };
+
+export const usePluginConfig = (hash: string) => {
+  const [config, setConfig] = useState<PluginConfig | null>(null);
+  useEffect(() => {
+    (async function () {
+      setConfig(await getPluginConfigByHash(hash));
+    })();
+  }, [hash]);
+  return config;
+};
+
+export const useOnPluginClick = (hash: string) => {
+  return useCallback(async () => {
+    await runPlugin(hash, 'start');
+
+    const [tab] = await browser.tabs.query({
+      active: true,
+      currentWindow: true,
+    });
+
+    await browser.storage.local.set({ plugin_hash: hash });
+
+    // @ts-ignore
+    if (chrome.sidePanel) await chrome.sidePanel.open({ tabId: tab.id });
+
+    window.close();
+  }, [hash]);
+};

From b36352703aa506e407d3a6f49d0b9078cc44859a Mon Sep 17 00:00:00 2001
From: tsukino <0xtsukino@gmail.com>
Date: Wed, 9 Oct 2024 16:37:29 +0800
Subject: [PATCH 5/6] fix: remove dup plugins

---
 src/pages/Home/index.tsx | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index daaaea42..139dc34d 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -178,15 +178,6 @@ function ActionPanel({
       {pluginHashes.map((hash) => (
         <PluginIcon hash={hash} />
       ))}
-      {pluginHashes.map((hash) => (
-        <PluginIcon hash={hash} />
-      ))}
-      {pluginHashes.map((hash) => (
-        <PluginIcon hash={hash} />
-      ))}
-      {pluginHashes.map((hash) => (
-        <PluginIcon hash={hash} />
-      ))}
       <button
         className={
           'flex flex-row items-center justify-center self-start rounded relative border-2 border-dashed border-slate-300 hover:border-slate-400 text-slate-300 hover:text-slate-400 h-16 w-16 mx-1'

From 70232e39bce3907ff170cecb1d7c2e78a8c68879 Mon Sep 17 00:00:00 2001
From: tsukino <0xtsukino@gmail.com>
Date: Wed, 9 Oct 2024 16:49:43 +0800
Subject: [PATCH 6/6] feat: add github and discord links to settings

---
 src/pages/Options/index.tsx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/pages/Options/index.tsx b/src/pages/Options/index.tsx
index df37f39e..9ade6b1d 100644
--- a/src/pages/Options/index.tsx
+++ b/src/pages/Options/index.tsx
@@ -80,6 +80,10 @@ export default function Options(): ReactElement {
     setAdvanced(!advanced);
   }, [advanced]);
 
+  const openInTab = useCallback((url: string) => {
+    browser.tabs.create({ url });
+  }, []);
+
   return (
     <div className="flex flex-col flex-nowrap flex-grow">
       {showReloadModal && (
@@ -152,6 +156,22 @@ export default function Options(): ReactElement {
           Save
         </button>
       </div>
+      <div className="flex flex-col w-full items-end gap-2 p-2">
+        <button
+          className="button"
+          onClick={() =>
+            openInTab('https://github.com/tlsnotary/tlsn-extension/issues/new')
+          }
+        >
+          File an issue
+        </button>
+        <button
+          className="button"
+          onClick={() => openInTab('https://discord.gg/9XwESXtcN7')}
+        >
+          Join our Discord
+        </button>
+      </div>
     </div>
   );
 }