fix: :lipstick: ui tweaks to history + scrollbars

3 files changed, 36 insertions, 17 deletions

diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx
index 8364645e..41b44684 100644
--- a/extension/react-app/src/components/ComboBox.tsx
+++ b/extension/react-app/src/components/ComboBox.tsx
@@ -109,6 +109,13 @@ const Ul = styled.ul<{
   outline: 1px solid ${lightGray};
   z-index: 2;
   -ms-overflow-style: none;
+
+  scrollbar-width: none; /* Firefox */
+
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+    display: none;
+  }
 `;
 
 const Li = styled.li<{
@@ -584,15 +591,6 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
                   {item.name}
                   {"  "}
                   <span style={{ color: lightGray }}>{item.description}</span>
-                  {downshiftProps.highlightedIndex === index &&
-                    item.content && (
-                      <>
-                        <br />
-                        <pre style={{ color: lightGray }}>
-                          {item.content.split("\n").slice(0, 5).join("\n")}
-                        </pre>
-                      </>
-                    )}
                 </span>
               </Li>
             ))}
diff --git a/extension/react-app/src/pages/gui.tsx b/extension/react-app/src/pages/gui.tsx
index c82f4f2b..99e7cb7b 100644
--- a/extension/react-app/src/pages/gui.tsx
+++ b/extension/react-app/src/pages/gui.tsx
@@ -33,6 +33,17 @@ import {
   temporarilyPushToUserInputQueue,
 } from "../redux/slices/serverStateReducer";
 
+const TopGuiDiv = styled.div`
+  overflow-y: scroll;
+
+  scrollbar-width: none; /* Firefox */
+
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
 const UserInputQueueItem = styled.div`
   border-radius: ${defaultBorderRadius};
   color: gray;
@@ -346,8 +357,7 @@ function GUI(props: GUIProps) {
     };
   }, []);
   return (
-    <div
-      className="overflow-scroll"
+    <TopGuiDiv
       ref={topGuiDivRef}
       onKeyDown={(e) => {
         if (e.key === "Enter" && e.ctrlKey) {
@@ -498,7 +508,7 @@ function GUI(props: GUIProps) {
         addingHighlightedCode={adding_highlighted_code}
       />
       <ContinueButton onClick={onMainTextInput} />
-    </div>
+    </TopGuiDiv>
   );
 }
 
diff --git a/extension/react-app/src/pages/history.tsx b/extension/react-app/src/pages/history.tsx
index a7e7276d..85d5e6d7 100644
--- a/extension/react-app/src/pages/history.tsx
+++ b/extension/react-app/src/pages/history.tsx
@@ -34,6 +34,11 @@ const TdDiv = styled.div`
   border-bottom: 1px solid ${secondaryDark};
 `;
 
+function lastPartOfPath(path: string): string {
+  const sep = path.includes("/") ? "/" : "\\";
+  return path.split(sep).pop() || path;
+}
+
 function History() {
   const navigate = useNavigate();
   const [sessions, setSessions] = useState<SessionInfo[]>([]);
@@ -75,11 +80,15 @@ 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"
-      />
+      {workspacePaths && workspacePaths.length > 0 && (
+        <CheckDiv
+          checked={filteringByWorkspace}
+          onClick={() => setFilteringByWorkspace((prev) => !prev)}
+          title={`Show only sessions from ${lastPartOfPath(
+            workspacePaths[workspacePaths.length - 1]
+          )}/`}
+        />
+      )}
       <table className="w-full">
         <tbody>
           {sessions
@@ -117,6 +126,8 @@ function History() {
                         hour: "numeric",
                         minute: "numeric",
                       })}
+                      {" | "}
+                      {lastPartOfPath(session.workspace_directory || "")}
                     </div>
                   </TdDiv>
                 </td>