Always show interactive icon and make it clickable to toggle interactivity

Fixes #121

Author: celonymire

CHANGELOG.md

@@ -8,6 +8,7 @@
 
 - Show empty stdout for testcase with a placeholder instead of hiding it
 - Added file name to the file template picker item's description to improve matching
+- Always show interactive icon and make it clickable to toggle testcase interactivity
 
 # 4.0.0
 

src/extension/providers/JudgeViewProvider.ts

@@ -931,6 +931,9 @@ export default class extends BaseViewProvider<typeof ProviderMessageSchema, Webv
       case "OPEN_INTERACTOR":
         this._openInteractor();
         break;
+      case "TOGGLE_INTERACTIVE":
+        this._toggleInteractive(uuid);
+        break;
     }
     this.requestSave();
   }
@@ -1387,6 +1390,21 @@ export default class extends BaseViewProvider<typeof ProviderMessageSchema, Webv
     });
   }
 
+  private _toggleInteractive(uuid: string) {
+    const testcase = this._findTestcase(uuid);
+    if (!testcase) {
+      return;
+    }
+
+    testcase.mode = testcase.mode === "interactive" ? "standard" : "interactive";
+    super._postMessage({
+      type: "SET",
+      uuid,
+      property: "mode",
+      value: testcase.mode,
+    });
+  }
+
   private _compare(uuid: string) {
     const testcase = this._findTestcase(uuid);
     if (!testcase) {

src/shared/judge-messages.ts

@@ -14,6 +14,7 @@ export const ActionValues = [
   "DEBUG",
   "REQUEST_DATA",
   "OPEN_INTERACTOR",
+  "TOGGLE_INTERACTIVE",
 ] as const;
 
 export type ActionValue = (typeof ActionValues)[number];

src/webview/judge/TestcaseToolbar.svelte

@@ -45,6 +45,10 @@
     handleAction("STOP");
   }
 
+  function handleToggleInteractive() {
+    handleAction("TOGGLE_INTERACTIVE");
+  }
+
   // Derived values
   const status = $derived(testcase.status);
   const visible = $derived(testcase.shown);
@@ -117,13 +121,21 @@
           </p>
         </div>
       {/if}
-      {#if testcase.mode === "interactive"}
-        <div class="toolbar-badge-container toolbar-badge" data-status="CE">
-          <div class="toolbar-icon toolbar-icon-exclude-highlight">
-            <div class="codicon codicon-bolded codicon-chat-sparkle"></div>
-          </div>
-        </div>
-      {/if}
+      <div
+        class="toolbar-badge-container toolbar-badge"
+        data-status={testcase.mode === "interactive" ? "CE" : "NA"}
+      >
+        <button
+          class="toolbar-icon toolbar-icon-exclude-highlight"
+          data-tooltip={testcase.mode === "interactive"
+            ? "Make Non-Interactive"
+            : "Make Interactive"}
+          aria-label={testcase.mode === "interactive" ? "Make Non-Interactive" : "Make Interactive"}
+          onclick={handleToggleInteractive}
+        >
+          <div class="codicon codicon-bolded codicon-chat-sparkle"></div>
+        </button>
+      </div>
     </div>
     <div class="testcase-buttons">
       <button class="toolbar-icon" data-tooltip="Run Testcase" aria-label="Run" onclick={handleRun}>
@@ -175,13 +187,21 @@
         </div>
         <p class="toolbar-badge-text">COMPILING</p>
       </div>
-      {#if testcase.mode === "interactive"}
-        <div class="toolbar-badge-container toolbar-badge" data-status="CE">
-          <div class="toolbar-icon toolbar-icon-exclude-highlight">
-            <div class="codicon codicon-bolded codicon-chat-sparkle"></div>
-          </div>
-        </div>
-      {/if}
+      <div
+        class="toolbar-badge-container toolbar-badge"
+        data-status={testcase.mode === "interactive" ? "CE" : "NA"}
+      >
+        <button
+          class="toolbar-icon toolbar-icon-exclude-highlight"
+          data-tooltip={testcase.mode === "interactive"
+            ? "Make Non-Interactive"
+            : "Make Interactive"}
+          aria-label={testcase.mode === "interactive" ? "Make Non-Interactive" : "Make Interactive"}
+          onclick={handleToggleInteractive}
+        >
+          <div class="codicon codicon-bolded codicon-chat-sparkle"></div>
+        </button>
+      </div>
     </div>
   </div>
 {:else if status === "RUNNING"}
@@ -204,13 +224,21 @@
           ></div>
         </button>
       </div>
-      {#if testcase.mode === "interactive"}
-        <div class="toolbar-badge-container toolbar-badge" data-status="CE">
-          <div class="toolbar-icon toolbar-icon-exclude-highlight">
-            <div class="codicon codicon-bolded codicon-chat-sparkle"></div>
-          </div>
-        </div>
-      {/if}
+      <div
+        class="toolbar-badge-container toolbar-badge"
+        data-status={testcase.mode === "interactive" ? "CE" : "NA"}
+      >
+        <button
+          class="toolbar-icon toolbar-icon-exclude-highlight"
+          data-tooltip={testcase.mode === "interactive"
+            ? "Make Non-Interactive"
+            : "Make Interactive"}
+          aria-label={testcase.mode === "interactive" ? "Make Non-Interactive" : "Make Interactive"}
+          onclick={handleToggleInteractive}
+        >
+          <div class="codicon codicon-bolded codicon-chat-sparkle"></div>
+        </button>
+      </div>
       <div class="toolbar-icon toolbar-icon-exclude-highlight">
         <div class="codicon codicon-loading codicon-modifier-spin"></div>
       </div>