feat(ui): Display selected contexts as icons

- Introduces a visual representation of selected contexts using icons.
- Updates the UI to map the selected contexts to display them as icons.
- Adjusts the styling of hr elements for better visual appearance.

Author: Olasunkanmi Oyinlola

webviewUi/src/components/webview.tsx

@@ -231,7 +231,19 @@ export const WebviewUI = () => {
                 Active workspace:
                 {selectedContext.includes(activeEditor) ? "" : `${activeEditor}`}
               </small>
-              <small>{Array.from(new Set(selectedContext.split("@").join(", ").split(", "))).join(" ")}</small>
+              {selectedContext.length > 1 ? (
+                <small>
+                  {Array.from(new Set(selectedContext.split("@").join(", ").split(", "))).map((item) => {
+                    return item.length > 1 ? (
+                      <span className="attachment-icon" key={item}>
+                        {item}
+                      </span>
+                    ) : null;
+                  })}
+                </small>
+              ) : (
+                <></>
+              )}
             </span>
           </div>
           <WorkspaceSelector activeEditor={activeEditor} onInputChange={handleContextChange} folders={folders} />

webviewUi/src/index.css

@@ -488,10 +488,10 @@ hr {
   cursor: pointer;
   color: #787c99;
   transition: color .3s ease;
-  border-radius: 9px;
+  border-radius: 6px;
   border: 1px solid;
-  border-color: rgb(47 47 47);
-  margin-top: 10px;
+  border-color: #363b54;
+  margin: 10px 2px 0px 2px;
 }
 
 .attachment-icon.active {