JS-9778: Refactor Search & Replace popup layout and styling

.gitignore

@@ -47,3 +47,4 @@ dist/lib/json/internalRelations.json
 dist/lib/json/internalTypes.json
 dist/lib/json/systemRelations.json
 dist/lib/json/systemTypes.json
+bin/

.husky/pre-commit

@@ -1,7 +1,7 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-npx lint-staged --concurrent false
+bunx lint-staged --concurrent false
 
 # npm run typecheck
 

src/json/shortcut.ts

@@ -108,6 +108,7 @@ const getSections = () => {
 						{ id: 'print', name: translate('popupShortcutMainBasics8'), keys: [ cmdKey, 'p' ] },
 						{ id: 'history', name: translate('popupShortcutMainBasics11'), keys: [ cmdKey, 'alt', 'h' ] },
 						{ id: 'searchText', name: translate('popupShortcutMainBasics9'), keys: [ cmdKey, 'f' ] },
+						{ id: 'replaceText', name: translate('menuObjectSearchAndReplace'), keys: [ 'ctrl', 'h' ] },
 						{ id: 'pageLock', name: translate('popupShortcutMainBasics24'), keys: [ 'ctrl', 'shift', 'l' ] },
 					]
 				},

src/json/text.json

@@ -11,6 +11,9 @@
 	"commonCreate": "Create",
 	"commonSave": "Save",
 	"commonCancel": "Cancel",
+	"commonReplace": "Replace",
+	"commonReplaceAll": "Replace All",
+	"commonReplaceWith": "Replace with...",
 	"commonRestart": "Restart",
 	"commonDelete": "Delete",
 	"commonDeleteImmediately": "Delete permanently",
@@ -2081,6 +2084,7 @@
 	"menuObjectTypeSettings": "Type settings",
 	"menuObjectPrint": "Print",
 	"menuObjectSearchOnPage": "Search in Object",
+	"menuObjectSearchAndReplace": "Search & Replace",
 	"menuObjectSearchInTemplate": "Search in Template",
 	"menuObjectSearchInChat": "Search in Chat",
 	"menuObjectExport": "Export",

src/scss/menu/search/text.scss

@@ -10,14 +10,14 @@
 		.content { padding: 0px; overflow: visible; }
 		.wrap { height: 100%; width: 100%; display: flex; flex-direction: column; }
 
-		.filterWrapper {
-			padding: 10px 0px 4px 0px; display: flex; flex-direction: row; gap: 0px 8px;
+		.searchReplaceLayout {
+			padding: 10px 0px 4px 0px; display: flex; flex-direction: row; gap: 0px 8px; align-items: center;
 		}
 
 		.filterContainer {
 			display: flex; flex-direction: row; align-items: center; flex-grow: 1;
-			background-color: var(--color-shape-highlight-medium); border-radius: 16px; padding: 0px 12px; height: 32px;
-			border: 1px solid var(--color-shape-secondary); gap: 0px 6px;
+			background-color: var(--color-shape-tertiary); border-radius: 16px; padding: 0px 12px; height: 32px;
+			gap: 0px 6px;
 		}
 		.filterContainer {
 			.icon.search { margin: 0px; }
@@ -34,13 +34,70 @@
 		}
 
 		.arrowWrapper {
-			display: flex; flex-direction: row; padding: 6px 8px; flex-shrink: 0; gap: 0px 8px;
-			background-color: var(--color-shape-highlight-medium); border-radius: 16px; align-items: center;
+			display: flex; flex-direction: row; padding: 6px 12px; flex-shrink: 0; gap: 0px 8px;
+			background-color: var(--color-shape-tertiary); border-radius: 16px; align-items: center;
 		}
 		.arrowWrapper {
 			.icon { width: 20px !important; height: 20px !important; }
-			.icon.arrow.up { transform: rotate(180deg); }
-			.icon.arrow.disabled { opacity: 0.3; pointer-events: none; }
+			.icon.arrow {
+				color: var(--color-icon);
+				&.up { transform: rotate(180deg); }
+				&.disabled { color: var(--color-control-inactive) !important; opacity: 1; pointer-events: none; }
+			}
+			.icon.replaceAction {
+				cursor: pointer;
+				color: var(--color-icon);
+				&:hover { color: var(--color-text-primary); }
+				&.active {
+					color: var(--color-control-accent);
+					&:hover { color: var(--color-control-accent); }
+				}
+			}
+		}
+
+		.replaceWrapper {
+			padding: 12px; display: flex; flex-direction: column; gap: 8px;
+			background-color: var(--color-shape-tertiary); border-radius: 12px;
+			margin-top: 6px;
+
+			.input { width: 100%; height: 24px; padding: 0px; border: 0px; background: none; border-radius: 0px; }
+		}
+
+		.replaceButtons {
+			display: flex; flex-direction: row; gap: 0px 16px; align-items: center; justify-content: flex-end;
+
+			.button.replaceAllBtn.simple {
+				@include text-small;
+				height: auto;
+				padding: 0px;
+				color: var(--color-text-secondary) !important;
+				font-weight: 400;
+				background: none !important;
+				border: none !important;
+				cursor: pointer;
+				&:hover {
+					color: var(--color-text-primary) !important;
+				}
+				&.disabled {
+					opacity: 0.3;
+					pointer-events: none;
+				}
+			}
+
+			.button.c28.accent {
+				@include text-small;
+				height: 28px;
+				padding: 0px 16px;
+				border-radius: 14px;
+				font-weight: 500;
+				white-space: nowrap;
+				&.disabled {
+					background-color: var(--color-shape-secondary) !important;
+					color: var(--color-text-tertiary) !important;
+					opacity: 0.5;
+					pointer-events: none;
+				}
+			}
 		}
 	}
 }

src/ts/component/editor/page.tsx

@@ -1041,6 +1041,11 @@ const EditorPage = forwardRef<I.BlockRef, Props>((props, ref) => {
 				keyboard.onSearchText(text.substring(range.from, range.to), 'editor');
 			});
 
+			// Search & Replace
+			keyboard.shortcut('replaceText', e, () => {
+				keyboard.onSearchText(text.substring(range.from, range.to), 'editor', true);
+			});
+
 			if (block.canToggle()) {
 				keyboard.shortcut(`${cmd}+shift+t`, e, () => {
 					S.Block.toggle(rootId, block.id, !Storage.checkToggle(rootId, block.id));