feat: :lipstick: more ui improvements

2 files changed, 15 insertions, 7 deletions

diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx
index 651d6227..0cf2bc19 100644
--- a/extension/react-app/src/components/ComboBox.tsx
+++ b/extension/react-app/src/components/ComboBox.tsx
@@ -20,10 +20,7 @@ import { ContextItem } from "../../../schema/FullState";
 import { postVscMessage } from "../vscode";
 import { GUIClientContext } from "../App";
 import { MeiliSearch } from "meilisearch";
-import {
-  setBottomMessage,
-  setBottomMessageCloseTimeout,
-} from "../redux/slices/uiStateSlice";
+import { setBottomMessage } from "../redux/slices/uiStateSlice";
 import { useDispatch, useSelector } from "react-redux";
 import { RootStore } from "../redux/store";
 
@@ -124,7 +121,7 @@ const Li = styled.li<{
 // #endregion
 
 interface ComboBoxProps {
-  items: { name: string; description: string; id?: string }[];
+  items: { name: string; description: string; id?: string; content?: string }[];
   onInputValueChange: (inputValue: string) => void;
   disabled?: boolean;
   onEnter: (e: React.KeyboardEvent<HTMLInputElement>) => void;
@@ -204,6 +201,7 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
                     name: hit.name,
                     description: hit.description,
                     id: hit.id,
+                    content: hit.content,
                   };
                 })
               );
@@ -513,6 +511,15 @@ 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/components/StyledMarkdownPreview.tsx b/extension/react-app/src/components/StyledMarkdownPreview.tsx
index 5957f8dd..c633e621 100644
--- a/extension/react-app/src/components/StyledMarkdownPreview.tsx
+++ b/extension/react-app/src/components/StyledMarkdownPreview.tsx
@@ -1,6 +1,7 @@
 import styled from "styled-components";
 import {
   defaultBorderRadius,
+  lightGray,
   secondaryDark,
   vscBackground,
   vscForeground,
@@ -12,7 +13,7 @@ const StyledMarkdownPreview = styled(MarkdownPreview)<{ light?: boolean }>`
     background-color: ${(props) =>
       props.light ? vscBackground : secondaryDark};
     border-radius: ${defaultBorderRadius};
-    border: 0.5px solid white;
+    border: 0.5px solid ${lightGray};
   }
 
   code {
@@ -26,7 +27,7 @@ const StyledMarkdownPreview = styled(MarkdownPreview)<{ light?: boolean }>`
     background-color: ${(props) =>
       props.light ? vscBackground : secondaryDark};
     color: ${vscForeground};
-    padding: 10px;
+    padding: 12px;
   }
 
   background-color: ${(props) => (props.light ? "transparent" : vscBackground)};