add research button and translate

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

@@ -4,6 +4,7 @@ import { useCallback, useState, useImperativeHandle } from 'react';
 import { searchUserFiles, searchGlobalFiles } from '@/app/actions/searchActions';
 import { useQueryClient } from '@tanstack/react-query';
 import { Pagination } from '@/app/components/Pagination';
+import { useTranslations } from 'next-intl';
 
 export interface SearchItem {
 	url: string,
@@ -24,6 +25,7 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
 	const [showGlobalSearch, setShowGlobalSearch] = useState<boolean>(false);
 	const queryClient = useQueryClient();
 	const [errorMessage, setErrorMessage] = useState<string | null>(null);
+	const t = useTranslations('Global');
 
 	const [searchTotalPages, setSearchTotalPages] = useState<number>(0);
 	const [searchCurrentPages, setSearchCurrentPages] = useState<number>(1);
@@ -82,7 +84,7 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
 				setSearchedGlobalFilesShowNull(true);
 			}
 		} catch (error) {
-
+			setErrorMessage('error');
 		} finally {
 			await queryClient.invalidateQueries({ queryKey: ['userData'] });
 			await queryClient.invalidateQueries({ queryKey: ['userSearchData'] });
@@ -94,24 +96,22 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
 
 	return (
 		<>
-			<div
-				className="mb-4"
-			>
+			<div className="mb-4">
 				<button
 					className="btn btn-primary btn-search"
-					disabled={fileId ? false : true}
+					disabled={!fileId}
 					onClick={() => {
 						if (fileId) {
 							handlerSearchUserFile(fileId, 1)
 						}
 					}}
 				>
-					Начать поиск
+					{t('start-search')}
 				</button>
 
 				{errorMessage && (
 					<div className='mt-2 text-red-600 text-sm'>
-						Ошибка поиска
+						{t('search-error')}
 					</div>
 				)}
 			</div>
@@ -121,53 +121,44 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
 			)}
 
 			{searchedUserFilesShowNull && (
-				<div
-					className="user-file-search-results"
-				>
+				<div className="user-file-search-results">
 					<div className="results-header">
-						<div className="results-title">Результаты поиска</div>
+						<div className="results-title">{t('search-results-title')}</div>
 						<div className="results-count">
-							Найдено файлов: {searchedUserFiles.length}
+							{t('files-found', { count: searchedUserFiles.length })}
 						</div>
 					</div>
-					<div
-						className="empty-results"
-					>
-						<h3>Похожих файлов не найдено</h3>
-						<p>В вашей библиотеке нет файлов, похожих на загруженный</p>
+					<div className="empty-results">
+						<h3>{t('no-similar-files-title')}</h3>
+						<p>{t('no-similar-files-description')}</p>
 						<div className="empty-results-hint">
-							<strong>Совет:</strong> Убедитесь, что вы загружали этот файл ранее через страницу "Маркировка"
+							<strong>{t('hint-title')}</strong> {t('hint-text')}
 						</div>
 					</div>
-
 				</div>
 			)}
 
 			{showGlobalSearch && (
-				<div
-					className="global-search-section"
-				>
+				<div className="global-search-section">
 					<div className="global-search-header">
 						<div className="global-search-title">
-							Глобальный поиск изображений
+							{t('global-search-title')}
 						</div>
 						<div className="">
-							Найти где ещё используется ваше изображение в интернете
+							{t('global-search-description')}
 						</div>
 						<div className="global-search-badge">
-							Интернет поиск
+							{t('global-search-badge')}
 						</div>
 					</div>
 
-
 					<div className="global-search-content">
 						<div className="global-search-info">
 							<div className="global-search-info-title">
-								Поиск по всему интернету
+								{t('global-search-info-title')}
 							</div>
 							<div className="global-search-info-text">
-								Используем продвинутые технологии обратного поиска по изображению для поиска копий вашего контента
-								на сайтах, в социальных сетях и других источниках. Поможет обнаружить несанкционированное использование.
+								{t('global-search-info-text')}
 							</div>
 						</div>
 
@@ -175,8 +166,8 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
 							<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 className="counter-label">{t('global-searches-today')}</div>
+									<div className="counter-value" id="counter-value">0 {t('out-of')} 10</div>
 								</div>
 							</div>
 							<div className="progress-bar">
@@ -192,14 +183,14 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
 						<div className={`global-loading ${loading ? 'show' : ''}`} id="global-loading">
 							<div className="global-spinner"></div>
 							<div className="global-loading-text" id="global-loading-text">
-								Поиск изображений в интернете...
+								{t('searching-internet')}
 							</div>
 						</div>
 
 						<div className={`global-result ${searchedGlobalFiles.length ? 'show' : ''}`} id="global-result">
 							<div className="global-result-card">
 								<div className="global-result-header">
-									<span>Найдено в интернете</span>
+									<span>{t('found-on-internet')}</span>
 									{paginationLoading && (
 										<div className="loading-animation">
 											<span className="global-spinner"></span>
@@ -212,23 +203,40 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
 							</div>
 						</div>
 
-						{searchedGlobalFilesShowNull && (
+						{(searchedGlobalFilesShowNull && !loading) && (
 							<div className="global-no-result" id="global-no-result">
 								<div className="global-no-result-icon">&zwj;</div>
-								<h4>Похожие изображения в интернете не найдены</h4>
-								<p>Это может означать, что ваше изображение уникально и не используется на других сайтах.</p>
+								<h4>{t('no-similar-global-title')}</h4>
+								<p className="global-no-result-text">
+									{t('no-similar-global-description')}
+								</p>
+								<button
+									onClick={() => {
+										if (fileId) {
+											handlerSearchGlobalFile(fileId, 1);
+										}
+									}}
+									className="btn btn-primary btn-search"
+								>
+									{t('search-again')}
+								</button>
 							</div>
 						)}
 
-						<div className="global-error" id="global-error">
-							<strong>Ошибка глобального поиска:</strong>
+						<div className="global-error">
+							<strong>{t('global-error-title')}</strong>
 							<span id="global-error-text"></span>
 						</div>
 
-						<Pagination totalPages={searchTotalPages} currentPage={searchCurrentPages} fileId={fileId} callBack={handlerSearchGlobalFile} />
+						<Pagination
+							totalPages={searchTotalPages}
+							currentPage={searchCurrentPages}
+							fileId={fileId}
+							callBack={handlerSearchGlobalFile}
+						/>
 					</div>
 				</div>
 			)}
 		</>
-	)
+	);
 }