feat: add Ctrl+Space keyboard shortcut to open search widget (fixes #7631) (#7660)

* feat: add Ctrl+Space keyboard shortcut to open search widget (fixes #7631)

* fix: apply prettier formatting

* feat: make search widget draggable

* fix: apply prettier formatting

* fix: use capture phase for Ctrl+Space shortcut to open search widget

* feat: improve search widget UI - capsule shape, centered position, drag support, close button

* fix: remove duplicate Ctrl+Space handler and apply prettier formatting

* fix: make classic search widget draggable to match helpfulSearchDiv

* fix: sync search-controller.test.js with pre-refactor source and fix helpfulWheelDiv display bugs

Author: faratabassum09-a11y

css/activities.css

@@ -235,6 +235,9 @@ body:not(.dark):not(.highcontrast) #helpfulSearchDiv {
     transition: all 0.2s ease;
     margin-left: 8px;
 }
+#searchDragHandle {
+    pointer-events: auto;
+}
 
 #search:focus {
     border-color: var(--color-brand-primary-hover);
@@ -247,32 +250,46 @@ body:not(.dark):not(.highcontrast) #helpfulSearchDiv {
 }
 
 #helpfulSearchDiv {
-    display: block !important;
-    position: absolute;
+    position: fixed !important;
     background-color: var(--color-bg-secondary);
-    padding: 2px;
+    padding: 0;
     border: 1px solid var(--color-border-primary);
-    width: 230px;
-    z-index: 1;
+    border-radius: 24px;
+    width: 320px;
+    z-index: 1000;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    height: 46px;
+    overflow: hidden;
 }
 
 #helpfulSearch {
-    padding: 2px;
-    border: 2px solid grey;
-    width: 220px;
-    height: 20px;
+    padding: 0 40px 0 28px;
+    border: none;
+    width: 100%;
+    height: 46px;
     font-size: large;
+    background-color: transparent;
+    color: inherit;
+    outline: none;
+    display: block;
+    box-sizing: border-box;
 }
 
 #crossButton {
     position: absolute;
     top: 50%;
-    right: -30px;
+    right: 10px;
     transform: translateY(-50%);
-    background: transparent;
+    background: rgba(80, 80, 80, 0.5);
     border: none;
-    font-size: large;
+    border-radius: 50%;
+    width: 22px;
+    height: 22px;
+    color: white;
+    font-size: 14px;
     cursor: pointer;
+    line-height: 22px;
+    text-align: center;
 }
 
 .trash-view {

js/activity.js

@@ -6341,6 +6341,18 @@ class Activity {
 
             // Use managed addEventListener instead of onkeydown assignment
             this.addEventListener(document, "keydown", this.handleKeyDown);
+            this.addEventListener(
+                document,
+                "keydown",
+                event => {
+                    if ((event.ctrlKey || event.metaKey) && event.code === "Space") {
+                        event.preventDefault();
+                        event.stopImmediatePropagation();
+                        this._displayHelpfulSearchDiv();
+                    }
+                },
+                true
+            );
 
             if (this.planet !== undefined) {
                 this.planet.planet.setAnalyzeProject(doAnalyzeProject);