2 files changed, 67 insertions, 0 deletions
diff --git a/extension/react-app/src/components/CheckDiv.tsx b/extension/react-app/src/components/CheckDiv.tsx
new file mode 100644
index 00000000..e595d70b
--- /dev/null
+++ b/extension/react-app/src/components/CheckDiv.tsx
@@ -0,0 +1,46 @@
+import { useState } from "react";
+import styled from "styled-components";
+import { defaultBorderRadius, vscBackground, vscForeground } from ".";
+import { CheckIcon } from "@heroicons/react/24/outline";
+
+interface CheckDivProps {
+  title: string;
+  checked: boolean;
+  onClick: () => void;
+}
+
+const StyledDiv = styled.div<{ checked: boolean }>`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem;
+  border-radius: ${defaultBorderRadius};
+  cursor: pointer;
+  border: 1px solid ${vscForeground};
+
+  color: ${vscForeground};
+  background-color: ${vscBackground};
+
+  &:hover {
+    background-color: ${vscForeground};
+    color: ${vscBackground};
+  }
+  width: fit-content;
+
+  margin: 0.5rem;
+  height: 1.4em;
+`;
+
+function CheckDiv(props: CheckDivProps) {
+  const { title, checked, onClick } = props;
+
+  return (
+    <StyledDiv onClick={onClick} checked={checked}>
+      {checked && <CheckIcon width="1.4em" height="1.4em" />}
+      {title}
+    </StyledDiv>
+  );
+}
+
+export default CheckDiv;
diff --git a/extension/react-app/src/pages/history.tsx b/extension/react-app/src/pages/history.tsx
index 2eb895b1..2a3070e6 100644
--- a/extension/react-app/src/pages/history.tsx
+++ b/extension/react-app/src/pages/history.tsx
@@ -7,6 +7,7 @@ import { useNavigate } from "react-router-dom";
 import { secondaryDark, vscBackground } from "../components";
 import styled from "styled-components";
 import { ArrowLeftIcon } from "@heroicons/react/24/outline";
+import CheckDiv from "../components/CheckDiv";
 
 const Tr = styled.tr`
   &:hover {
@@ -36,6 +37,11 @@ function History() {
   const [sessions, setSessions] = useState<SessionInfo[]>([]);
   const client = useContext(GUIClientContext);
   const apiUrl = useSelector((state: RootStore) => state.config.apiUrl);
+  const workspacePaths = useSelector(
+    (state: RootStore) => state.config.workspacePaths
+  );
+
+  const [filteringByWorkspace, setFilteringByWorkspace] = useState(false);
 
   useEffect(() => {
     const fetchSessions = async () => {
@@ -67,9 +73,24 @@ function History() {
         />
         <h1 className="text-2xl font-bold m-4 inline-block">History</h1>
       </div>
+      <CheckDiv
+        checked={filteringByWorkspace}
+        onClick={() => setFilteringByWorkspace((prev) => !prev)}
+        title="Filter by workspace"
+      />
       <table className="w-full">
         <tbody>
           {sessions
+            .filter((session) => {
+              if (
+                !filteringByWorkspace ||
+                typeof workspacePaths === "undefined" ||
+                typeof session.workspace_directory === "undefined"
+              ) {
+                return true;
+              }
+              return workspacePaths.includes(session.workspace_directory);
+            })
             .sort(
               (a, b) =>
                 parseDate(b.date_created).getTime() -