Merge pull request continuedev#4868 from continuedev/pe/code-to-edit-fix

feat: improve styling on code to edit

Author: RomneyDa

extensions/vscode/package-lock.json

@@ -39,15 +39,15 @@ export default function AddFileButton({ onClick }: AddFileButtonProps) {
           className="bg-vsc-editor-background m-0 rounded-md p-0"
         >
           <div
-            className="flex h-5 w-14 items-center justify-center gap-1 hover:brightness-125"
+            className="flex h-5 items-center justify-center gap-1 hover:brightness-125"
             onClick={(e) => {
               e.preventDefault();
               e.stopPropagation();
               onClick();
             }}
           >
-            <PlusIcon className="text-vsc-foreground inline h-2.5 w-2.5 brightness-75" />
-            <span className="text-vsc-foreground text-[10px] brightness-75">
+            <PlusIcon className="text-vsc-foreground inline h-2.5 w-2.5 px-1 brightness-75" />
+            <span className="text-vsc-foreground xs:block hidden text-[10px] brightness-75">
               Add file
             </span>
           </div>

gui/src/components/CodeToEditCard/AddFileButton.tsx

@@ -1,29 +1,29 @@
+import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import type { CodeToEdit } from "core";
 import { useContext, useState } from "react";
 import { useDispatch } from "react-redux";
 import { IdeMessengerContext } from "../../context/IdeMessenger";
-import CodeToEditListItem from "./CodeToEditListItem";
-import type { CodeToEdit } from "core";
-import AddFileButton from "./AddFileButton";
-import AddFileCombobox from "./AddFileCombobox";
-import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { useAppSelector } from "../../redux/hooks";
 import {
   addCodeToEdit,
   removeCodeToEdit,
 } from "../../redux/slices/sessionSlice";
+import AddFileButton from "./AddFileButton";
+import AddFileCombobox from "./AddFileCombobox";
+import CodeToEditListItem from "./CodeToEditListItem";
 
 export default function CodeToEditCard() {
   const dispatch = useDispatch();
   const ideMessenger = useContext(IdeMessengerContext);
   const [showAddFileCombobox, setShowAddFileCombobox] = useState(false);
   const codeToEdit = useAppSelector((state) => state.session.codeToEdit);
 
-  const title =
+  const itemCount =
     codeToEdit.length === 0
-      ? "Code to edit"
+      ? ""
       : codeToEdit.length === 1
-        ? "Code to edit (1 item)"
-        : `Code to edit (${codeToEdit.length} items)`;
+        ? "(1 item)"
+        : `(${codeToEdit.length} items)`;
 
   function onDelete(rif: CodeToEdit) {
     dispatch(removeCodeToEdit(rif));
@@ -57,7 +57,11 @@ export default function CodeToEditCard() {
   return (
     <div className="bg-vsc-editor-background mx-3 flex flex-col rounded-t-lg p-1">
       <div className="text-lightgray flex items-center justify-between gap-1.5 py-1.5 pl-3 pr-2 text-xs">
-        <span>{title}</span>
+        <div className="flex items-center gap-1">
+          <span>Code to edit</span>
+          <span className="hidden sm:inline">{itemCount}</span>
+        </div>
+
         <AddFileButton onClick={() => setShowAddFileCombobox(true)} />
       </div>