diff --git a/frontend/app/block/blockframe.tsx b/frontend/app/block/blockframe.tsx index 199544727..6477261e5 100644 --- a/frontend/app/block/blockframe.tsx +++ b/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 = []; @@ -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) { diff --git a/frontend/app/modals/typeaheadmodal.less b/frontend/app/modals/typeaheadmodal.less index 4e896a7b3..caa8ca24d 100644 --- a/frontend/app/modals/typeaheadmodal.less +++ b/frontend/app/modals/typeaheadmodal.less @@ -110,6 +110,10 @@ top: 2px; } } + + .typeahead-current-checkbox { + margin-left: auto; + } } } } diff --git a/frontend/app/modals/typeaheadmodal.tsx b/frontend/app/modals/typeaheadmodal.tsx index d01d5ac43..b1883410d 100644 --- a/frontend/app/modals/typeaheadmodal.tsx +++ b/frontend/app/modals/typeaheadmodal.tsx @@ -42,6 +42,9 @@ const Suggestions = forwardRef( renderIcon(item.icon, "iconColor" in item && item.iconColor ? item.iconColor : "inherit")} {item.label} + {"current" in item && item.current && ( + + )} ); diff --git a/frontend/types/custom.d.ts b/frontend/types/custom.d.ts index 27f8052e3..f0f0e0f6d 100644 --- a/frontend/types/custom.d.ts +++ b/frontend/types/custom.d.ts @@ -317,6 +317,7 @@ declare global { status: ConnStatusType; iconColor: string; onSelect?: (_: string) => void; + current?: boolean; } interface SuggestionConnectionScope {