feat: add checkmark next to current connection (#1159)

The is specifically for the typeahead dropdown for connections.

frontend/app/block/blockframe.tsx

@@ -583,12 +583,10 @@ const ChangeConnectionBlockModal = React.memo(
         );
 
         let createNew: boolean = true;
-        let showLocal: boolean = true;
         let showReconnect: boolean = true;
         if (connSelected == "") {
             createNew = false;
         } else {
-            showLocal = false;
             showReconnect = false;
         }
         const filteredList: Array<string> = [];
@@ -649,15 +647,14 @@ const ChangeConnectionBlockModal = React.memo(
             headerText: "Local",
             items: [],
         };
-        if (showLocal) {
-            localSuggestion.items.push({
-                status: "connected",
-                icon: "laptop",
-                iconColor: "var(--grey-text-color)",
-                value: "",
-                label: localName,
-            });
-        }
+        localSuggestion.items.push({
+            status: "connected",
+            icon: "laptop",
+            iconColor: "var(--grey-text-color)",
+            value: "",
+            label: localName,
+            current: connection == null,
+        });
         for (const wslConn of filteredWslList) {
             const connStatus = connStatusMap.get(wslConn);
             const connColorNum = computeConnColorNum(connStatus);
@@ -670,6 +667,7 @@ const ChangeConnectionBlockModal = React.memo(
                         : "var(--grey-text-color)",
                 value: "wsl://" + wslConn,
                 label: "wsl://" + wslConn,
+                current: "wsl://" + wslConn == connection,
             });
         }
         const remoteItems = filteredList.map((connName) => {
@@ -684,6 +682,7 @@ const ChangeConnectionBlockModal = React.memo(
                         : "var(--grey-text-color)",
                 value: connName,
                 label: connName,
+                current: connName == connection,
             };
             return item;
         });
@@ -739,14 +738,16 @@ const ChangeConnectionBlockModal = React.memo(
                     return true;
                 }
                 if (keyutil.checkKeyPressed(waveEvent, "ArrowDown")) {
-                    setRowIndex((idx) => Math.min(idx + 1, filteredList.length));
+                    setRowIndex((idx) => Math.min(idx + 1, selectionList.flat().length - 1));
                     return true;
                 }
             },
             [changeConnModalAtom, viewModel, blockId, connSelected, selectionList]
         );
         React.useEffect(() => {
-            setRowIndex((idx) => Math.min(idx, filteredList.length));
+            // this is specifically for the case when the list shrinks due
+            // to a search filter
+            setRowIndex((idx) => Math.min(idx, selectionList.flat().length - 1));
         }, [selectionList, setRowIndex]);
         // this check was also moved to BlockFrame to prevent all the above code from running unnecessarily
         if (!changeConnModalOpen) {

frontend/app/modals/typeaheadmodal.less

@@ -110,6 +110,10 @@
                     top: 2px;
                 }
             }
+
+            .typeahead-current-checkbox {
+                margin-left: auto;
+            }
         }
     }
 }

frontend/app/modals/typeaheadmodal.tsx

@@ -42,6 +42,9 @@ const Suggestions = forwardRef<HTMLDivElement, SuggestionsProps>(
                         renderIcon(item.icon, "iconColor" in item && item.iconColor ? item.iconColor : "inherit")}
                     {item.label}
                 </div>
+                {"current" in item && item.current && (
+                    <i className={clsx(makeIconClass("check", false), "typeahead-current-checkbox")} />
+                )}
             </div>
         );
 

frontend/types/custom.d.ts

@@ -317,6 +317,7 @@ declare global {
         status: ConnStatusType;
         iconColor: string;
         onSelect?: (_: string) => void;
+        current?: boolean;
     }
 
     interface SuggestionConnectionScope {