🐛 (webview/frontend/CaseView.tsx): Fix UI issue by adding a "Set As E…

…xpected Output" button and related styles in app.css (#480)

Adds a new button to the CaseView component that allows users to set the output text as the expected output. This button is represented by the "Set" label and is styled with a gray filter, positioning, padding, cursor, and hover effects defined in the app.css file. The purpose of this change is to improve user experience by providing an easy way for users to mark output text as the expected output.

src/webview/frontend/CaseView.tsx

@@ -228,6 +228,16 @@ export default function CaseView(props: {
                             >
                                 Copy
                             </div>
+                            <div
+                                className="expectedoutput"
+                                onClick={() => {
+                                    setOutput(trunctateStdout(resultText));
+                                    props.notify('Set As Expected Output');
+                                }}
+                                title="Set As Expected Output"
+                            >
+                                Set
+                            </div>
                             <>
                                 <TextareaAutosize
                                     className="selectable received-textarea"

src/webview/frontend/app.css

@@ -402,6 +402,20 @@ button:disabled {
     opacity: 0.5;
     font-size: 80%;
 }
+.expectedoutput {
+    filter: grayscale(100%);
+    position: absolute;
+    top: 0px;
+    right: 35px;
+    padding: 4px;
+    cursor: pointer;
+    opacity: 0.5;
+    font-size: 80%;
+}
+
+.expectedoutput:hover {
+    opacity: 1;
+}
 
 .textarea-container {
     position: relative;