merge global and local search

src/app/ui/search/file-search-panel.tsx

@@ -10,6 +10,7 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
 	const [searchedGlobalFiles, setSearchedGlobalFiles] = useState<string[]>([]);
 	const [searchedGlobalFilesShowNull, setSearchedGlobalFilesShowNull] = useState<boolean>(false);
 	const [loading, setLoading] = useState<boolean>(false);
+	const [showGlobalSearch, setShowGlobalSearch] = useState<boolean>(false);
 	const queryClient = useQueryClient();
 
 	useImperativeHandle(ref, () => ({
@@ -18,6 +19,7 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
 			setSearchedGlobalFiles([]);
 			setSearchedUserFilesShowNull(false);
 			setSearchedGlobalFilesShowNull(false);
+			setShowGlobalSearch(false);
 		}
 	}));
 
@@ -35,6 +37,8 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
 		} catch (error) {
 
 		}
+		setShowGlobalSearch(true);
+		handlerSearchGlobalFile(fileId)
 
 	}, [fileId])
 
@@ -107,97 +111,85 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
 				</div>
 			)}
 
-			<div
-				className="global-search-section"
-			>
-				<div className="global-search-header">
-					<div className="global-search-title">
-						Глобальный поиск изображений
+			{showGlobalSearch && (
+				<div
+					className="global-search-section"
+				>
+					<div className="global-search-header">
+						<div className="global-search-title">
+							Глобальный поиск изображений
+						</div>
+						<div className="">
+							Найти где ещё используется ваше изображение в интернете
+						</div>
+						<div className="global-search-badge">
+							Интернет поиск
+						</div>
 					</div>
-					<div className="">
-						Найти где ещё используется ваше изображение в интернете
-					</div>
-					<div className="global-search-badge">
-						Интернет поиск
+
+
+					<div className="global-search-content">
+						<div className="global-search-info">
+							<div className="global-search-info-title">
+								Поиск по всему интернету
+							</div>
+							<div className="global-search-info-text">
+								Используем продвинутые технологии обратного поиска по изображению для поиска копий вашего контента
+								на сайтах, в социальных сетях и других источниках. Поможет обнаружить несанкционированное использование.
+							</div>
+						</div>
+
+						<div className="search-counter" id="search-counter">
+							<div className="counter-info">
+								<div className="counter-icon" id="counter-icon"></div>
+								<div className="counter-text">
+									<div className="counter-label">Глобальных поисков сегодня</div>
+									<div className="counter-value" id="counter-value">0 из 10</div>
+								</div>
+							</div>
+							<div className="progress-bar">
+								<div
+									className="progress-fill"
+									id="progress-fill"
+									style={{ width: '0%' }}
+								>
+								</div>
+							</div>
+						</div>
+
+						<div className={`global-loading ${loading ? 'show' : ''}`} id="global-loading">
+							<div className="global-spinner"></div>
+							<div className="global-loading-text" id="global-loading-text">
+								Поиск изображений в интернете...
+							</div>
+						</div>
+
+						<div className={`global-result ${searchedGlobalFiles.length ? 'show' : ''}`} id="global-result">
+							<div className="global-result-card">
+								<div className="global-result-header">
+									<span>Найдено в интернете</span>
+								</div>
+								<div className="global-result-content">
+									<SearchedGlobalFilesList list={searchedGlobalFiles} />
+								</div>
+							</div>
+						</div>
+
+						{searchedGlobalFilesShowNull && (
+							<div className="global-no-result" id="global-no-result">
+								<div className="global-no-result-icon">&zwj;</div>
+								<h4>Похожие изображения в интернете не найдены</h4>
+								<p>Это может означать, что ваше изображение уникально и не используется на других сайтах.</p>
+							</div>
+						)}
+
+						<div className="global-error" id="global-error">
+							<strong>Ошибка глобального поиска:</strong>
+							<span id="global-error-text"></span>
+						</div>
 					</div>
 				</div>
-
-
-				<div className="global-search-content">
-					<div className="global-search-info">
-						<div className="global-search-info-title">
-							Поиск по всему интернету
-						</div>
-						<div className="global-search-info-text">
-							Используем продвинутые технологии обратного поиска по изображению для поиска копий вашего контента
-							на сайтах, в социальных сетях и других источниках. Поможет обнаружить несанкционированное использование.
-						</div>
-					</div>
-
-					<div className="search-counter" id="search-counter">
-						<div className="counter-info">
-							<div className="counter-icon" id="counter-icon"></div>
-							<div className="counter-text">
-								<div className="counter-label">Глобальных поисков сегодня</div>
-								<div className="counter-value" id="counter-value">0 из 10</div>
-							</div>
-						</div>
-						<div className="progress-bar">
-							<div
-								className="progress-fill"
-								id="progress-fill"
-								style={{ width: '0%' }}
-							>
-							</div>
-						</div>
-					</div>
-
-					<button
-						type="button"
-						className="global-search-btn"
-						id="global-search-btn"
-						disabled={loading ? true : false}
-						onClick={() => {
-							if (fileId) {
-								handlerSearchGlobalFile(fileId)
-							}
-						}}
-					>
-						Найти в интернете
-					</button>
-
-					<div className={`global-loading ${loading ? 'show' : ''}`} id="global-loading">
-						<div className="global-spinner"></div>
-						<div className="global-loading-text" id="global-loading-text">
-							Поиск изображений в интернете...
-						</div>
-					</div>
-
-					<div className={`global-result ${searchedGlobalFiles.length ? 'show' : ''}`} id="global-result">
-						<div className="global-result-card">
-							<div className="global-result-header">
-								<span>Найдено в интернете</span>
-							</div>
-							<div className="global-result-content">
-								<SearchedGlobalFilesList list={searchedGlobalFiles} />
-							</div>
-						</div>
-					</div>
-
-					{searchedGlobalFilesShowNull && (
-						<div className="global-no-result" id="global-no-result">
-							<div className="global-no-result-icon">&zwj;</div>
-							<h4>Похожие изображения в интернете не найдены</h4>
-							<p>Это может означать, что ваше изображение уникально и не используется на других сайтах.</p>
-						</div>
-					)}
-
-					<div className="global-error" id="global-error">
-						<strong>Ошибка глобального поиска:</strong>
-						<span id="global-error-text"></span>
-					</div>
-				</div>
-			</div>
+			)}
 		</>
 	)
 }