add file search and some fixes and bugs

src/app/[locale]/pages/search/page.tsx

@@ -11,9 +11,13 @@ export default function Page() {
 				</p>
 			</div>
 			<div className="search-grid">
-				<SectionSearchFile maxFileSize={1024000000} allowedExtensions={[]} fileType="video"/>
+				<SectionSearchFile
+					maxFileSize={1024000000}
+					allowedExtensions={['jpg', 'jpeg', 'png', 'gif', 'bmp']}
+					fileType="image"
+				/>
 				<div className="search-sidebar">
-					test
+					side
 				</div>
 			</div>
 		</>

src/app/actions/fileEntity.ts

@@ -42,7 +42,7 @@ export async function getUserFilesData(page: number, pageSize: number) {
 	}
 }
 
-export async function removeUserFile(fileId: string) {
+export async function removeUserFile(fileId: string, fullDelete: number) {
 	const token = await getSessionData('token');
 
 	try {
@@ -54,6 +54,7 @@ export async function removeUserFile(fileId: string) {
 				message_body: {
 					action: 'delete_file',
 					file_id: fileId,
+					full_delete: fullDelete,
 					token: token
 				}
 			}),
@@ -75,6 +76,67 @@ export async function removeUserFile(fileId: string) {
 			throw (`${response.status}`);
 		}
 
+	} catch (error) {
+		return error
+	}
+}
+
+export async function searchUserFiles(fileId: string) {
+	const token = await getSessionData('token');
+
+	try {
+		const response = await fetch(`${API_BASE_URL}/api/v1/files/${fileId}/similar?auth_token=${token}`, {
+			method: 'GET'
+		});
+
+		if (response.ok) {
+			let parsed = await response.json();
+
+			if (parsed.message_code === 0) {
+				return parsed.message_body;
+			} else {
+				throw parsed;
+			}
+		} else {
+			throw (`${response.status}`);
+		}
+
+	} catch (error) {
+		return error
+	}
+}
+
+export async function searchGlobalFiles(fileId: string) {
+	const token = await getSessionData('token');
+
+	try {
+		const response = await fetch(`${API_BASE_URL}/api/v1/data`, {
+			method: 'POST',
+			body: JSON.stringify({
+				version: 1,
+				msg_id: 20007,
+				message_body: {
+					file_id: fileId,
+				}
+			}),
+			headers: {
+				"Content-Type": "application/json",
+				"Accept": "application/json"
+			}
+		});
+
+		if (response.ok) {
+			let parsed = await response.json();
+
+			if (parsed.message_code === 0) {
+				return parsed.message_body;
+			} else {
+				throw parsed;
+			}
+		} else {
+			throw (`${response.status}`);
+		}
+
 	} catch (error) {
 		return error
 	}

src/app/components/ActivityTracker.tsx

@@ -3,12 +3,36 @@
 
 import { useEffect, useRef, useCallback } from 'react';
 import { tokenLifeExtension } from '@/app/actions/auth';
+import { usePathname, useSearchParams } from 'next/navigation';
+import { removeUserFile } from '@/app/actions/fileEntity';
 
 export default function ActivityTracker() {
 	const lastRefreshTime = useRef(Date.now());
 	const activityTimeoutRef = useRef<NodeJS.Timeout>(null);
 	const isRefreshing = useRef(false);
 
+
+	const pathname = usePathname();
+	const searchParams = useSearchParams();
+
+	useEffect(() => {
+		const selectedId = document.cookie
+			.split('; ')
+			.find(row => row.startsWith('searchedFileId='))
+			?.split('=')[1];
+
+		const handleCookie = async () => {
+			if (selectedId) {
+				await removeUserFile(selectedId, 1);
+				document.cookie = 'searchedFileId=; path=/; max-age=0';
+			}
+		};
+
+		if (selectedId) {
+			handleCookie();
+		}
+	}, [pathname, searchParams]);
+
 	// Debounce функция
 	const debounce = useCallback((func: () => void, delay: number) => {
 		if (activityTimeoutRef.current) {

src/app/components/section-search-file.tsx

@@ -1,20 +1,20 @@
 'use client'
 
 import { useRef, useState, useCallback, ChangeEvent, DragEvent, useEffect, useMemo } from 'react';
-import { IconShieldAdd } from '@/app/ui/icons/icons';
+import { IconSearch } from '@/app/ui/icons/icons';
 import { fileUpload, cancelUpload, chunkUpload, checkChunkStatus } from '@/app/actions/fileUpload';
 import { useTranslations } from 'next-intl';
 import { useNavigationBlocker } from '@/app/hooks/useNavigationBlocker';
 import { useQueryClient } from '@tanstack/react-query';
+import { searchUserFiles, removeUserFile, searchGlobalFiles } from '@/app/actions/fileEntity';
+import { SearchedUserFilesList } from '@/app/ui/search/searched-user-files-list';
+import { SearchedGlobalFilesList } from '@/app/ui/search/searched-global-files-list';
+import { useRouter } from 'next/navigation';
 interface SelectedFile {
 	file: File;
 	preview: string | undefined;
 	name: string;
 	size: string;
-	dimensions?: {
-		width: number;
-		height: number;
-	};
 }
 
 interface FileUploadInitResponse {
@@ -39,6 +39,10 @@ export default function SectionSearchFile({ fileType, allowedExtensions, maxFile
 	const [uploadId, setUploadId] = useState<string | null>(null);
 	const [isFileUploaded, setIsFileUploaded] = useState<boolean>(false);
 	const [uploadProgress, setUploadProgress] = useState<number>(0);
+	const [fileId, setFileId] = useState<string | null>(null);
+
+	const [searchedUserFiles, setSearchedUserFiles] = useState<string[]>([]);
+	const [searchedGlobalFiles, setSearchedGlobalFiles] = useState<string[]>([]);
 	const queryClient = useQueryClient();
 	const isCancelledRef = useRef(false);
 
@@ -74,37 +78,22 @@ export default function SectionSearchFile({ fileType, allowedExtensions, maxFile
 		return { isValid: true };
 	};
 
-	const getImageDimensions = (file: File): Promise<{ width: number; height: number }> => {
-		return new Promise((resolve, reject) => {
-			const img = new Image();
-			const objectUrl = URL.createObjectURL(file);
-
-			img.onload = () => {
-				const dimensions = {
-					width: img.width,
-					height: img.height
-				};
-				URL.revokeObjectURL(objectUrl);
-				resolve(dimensions);
-			};
-
-			img.onerror = () => {
-				URL.revokeObjectURL(objectUrl);
-				reject(new Error(t('error-uploading-file')));
-			};
-
-			img.src = objectUrl;
-		});
-	};
-
 	const handleFileSelect = useCallback(async (file: File | null): Promise<void> => {
 		if (!file) {
 			setError(null);
 			return;
 		}
 
+		if (fileId) {
+			await removeUserFile(fileId, 1);
+			setFileId(null);
+		}
+
 		setError(null);
 		setIsFileUploaded(false);
+		setSearchedUserFiles([]);
+		setSearchedGlobalFiles([]);
+
 		setUploadProgress(0);
 
 		const validation = validateFile(file);
@@ -114,30 +103,20 @@ export default function SectionSearchFile({ fileType, allowedExtensions, maxFile
 			return;
 		}
 
-		let dimensions = undefined;
-		if (fileType === "image") {
-			try {
-				dimensions = await getImageDimensions(file) as { width: number, height: number };
-				if (dimensions.width < 100 || dimensions.height < 100 ||
-					dimensions.width > 10000 || dimensions.height > 10000) {
-					setError(`${t('image-size')}: ${dimensions.width}x${dimensions.height}. ${t('acceptable-range')}: 100x100 - 10000x10000 ${t('pixels')}.`);
-					return;
-				}
-			} catch (err) {
-				setError(t('error-reading-image'));
-				return;
-			}
-		}
-
 		setSelectedFile({
 			file,
 			name: file.name,
 			size: `${(file.size / 1024 / 1024).toFixed(2)} MB`,
-			dimensions,
 			preview: file.size < 10 * 1024 * 1024 ? URL.createObjectURL(file) : undefined
 		});
 
-		console.log('Файл выбран:', file.name, file.size);
+		handlerFileUpload({
+			file,
+			name: file.name,
+			size: `${(file.size / 1024 / 1024).toFixed(2)} MB`,
+			preview: file.size < 10 * 1024 * 1024 ? URL.createObjectURL(file) : undefined
+		});
+
 	}, [fileType, t]);
 
 	const handleFileInputChange = (event: ChangeEvent<HTMLInputElement>): void => {
@@ -221,6 +200,7 @@ export default function SectionSearchFile({ fileType, allowedExtensions, maxFile
 					return;
 				}
 
+				const isLastChunk = chunkIndex === totalChunks - 1;
 				const start = chunkIndex * CHUNK_SIZE;
 				const end = Math.min(start + CHUNK_SIZE, file.size);
 				const chunk = file.slice(start, end);
@@ -229,7 +209,7 @@ export default function SectionSearchFile({ fileType, allowedExtensions, maxFile
 				formData.append('upload_id', response.upload_id);
 				formData.append('chunk_number', chunkIndex.toString());
 				formData.append('chunk', chunk);
-				/* formData.append('findSimilar', '0'); */
+				formData.append('findSimilar', '1');
 
 				const chunkResponse = await chunkUpload(formData);
 
@@ -238,6 +218,11 @@ export default function SectionSearchFile({ fileType, allowedExtensions, maxFile
 				}
 
 				setUploadProgress(Math.floor((chunkIndex + 1) / totalChunks * 100));
+
+				if (isLastChunk) {
+					setFileId(chunkResponse.message_body.file_id);
+					document.cookie = `searchedFileId=${chunkResponse.message_body.file_id}`
+				}
 			}
 
 			const chunkStatus = await checkChunkStatus(response.upload_id);
@@ -257,7 +242,7 @@ export default function SectionSearchFile({ fileType, allowedExtensions, maxFile
 		} finally {
 			setUploadId(null);
 		}
-	}, [uploadId, fileType, t]);
+	}, [uploadId, fileType]);
 
 	useEffect(() => {
 		// Обработка закрытия вкладки
@@ -295,11 +280,42 @@ export default function SectionSearchFile({ fileType, allowedExtensions, maxFile
 		}
 	});
 
+	const handlerSearchUserFile = useCallback(async (fileId: string): Promise<void> => {
+
+		try {
+			let result = await searchUserFiles(fileId);
+
+			if (result.content.length) {
+				setSearchedUserFiles(result.content);
+			}
+		} catch (error) {
+
+		}
+
+	}, [fileId])
+
+	const handlerSearchGlobalFile = useCallback(async (fileId: string): Promise<void> => {
+
+		try {
+			let result = await searchGlobalFiles(fileId);
+			if (result.images.length) {
+				setSearchedGlobalFiles(result.images);
+			}
+		} catch (error) {
+
+		}
+
+	}, [fileId])
+
 	return (
 		<div className="upload-section">
-			<h3>
+			<div className="search-info">
-				{t('upload-for-protection', { fileType: t(fileType.toLocaleLowerCase()) })}
+				<div className="search-info-title">Как работает поиск?</div>
-			</h3>
+				<div className="search-info-text">
+					Наша система анализирует загруженный файл и сравнивает его с вашими защищенными файлами,
+					используя алгоритмы компьютерного зрения и цифровых отпечатков.
+				</div>
+			</div>
 
 			<div
 				className={`drag-drop-zone ${isDragging ? 'dragging' : ''}`}
@@ -307,25 +323,10 @@ export default function SectionSearchFile({ fileType, allowedExtensions, maxFile
 				onDragLeave={handleDragLeave}
 				onDrop={handleDrop}
 			>
-				<IconShieldAdd />
+				<IconSearch />
 				<h4>
-					{t('drag-the-file-here')}
+					Выберите файл для поиска
 				</h4>
-				{/* 				<p className="mb-2.5 text-[#6b7280]">
-					{t('or')}
-				</p> */}
-
-				{fileType === "image" && (
-					<p className="description">
-						{t('image-resolution')}: 100x100 - 10000x10000 {t('pixels')}
-					</p>
-				)}
-				<p className="description">
-					{t('file-format')}: {acceptString}
-				</p>
-				<p className="description">
-					{t('file-size')}: {t('to')} {(maxFileSize / 1024 / 1024)} {t('mb')}
-				</p>
 
 				<input
 					ref={fileInputRef}
@@ -341,7 +342,7 @@ export default function SectionSearchFile({ fileType, allowedExtensions, maxFile
 					onClick={handleButtonClick}
 					type="button"
 				>
-					{t('select-files-to-protect')}
+					Выбрать файл
 				</button>
 
 				{error && (
@@ -352,9 +353,9 @@ export default function SectionSearchFile({ fileType, allowedExtensions, maxFile
 
 				{selectedFile && (
 					<div
-						className={`selected-file ${isFileUploaded ? 'done' : ''}`}
+						className={`selected-file`}
 					>
-						<div className="selected-file-file-info">
+						<div className="selected-file-file-info relative">
 							<div>
 								<p className="text-gray-700">
 									<span className="font-medium">
@@ -366,52 +367,10 @@ export default function SectionSearchFile({ fileType, allowedExtensions, maxFile
 										{t('size')}:
 									</span> {selectedFile.size}
 								</p>
-								<p className="text-gray-700">
-									<span className="font-medium">{t('cost-of-protection')}:</span> 0
-								</p>
-								<p className="text-gray-700">
-									<span className="font-medium">{t('current-balance')}:</span> 0
-								</p>
 							</div>
-							<div>
-								{isFileUploaded && (
-									<div className="font-medium text-green-600 text-2xl">
-										{t('file-successfully-uploaded')}
-									</div>
-								)}
-							</div>
-						</div>
-
-						{(fileType === 'image' && selectedFile.preview) && (
-							<img
-								src={selectedFile.preview}
-								alt="Предпросмотр загруженного изображения"
-								className="uploaded-image"
-								onError={() => setError('Не удалось загрузить превью изображения')}
-							/>
-						)}
-
-						<div className="mt-4 flex gap-3 justify-center relative">
-							<button
-								className="btn btn-cancel"
-								onClick={handleClearFile}
-								type="button"
-							>
-								{isFileUploaded ? t('close') : t('cancel')}
-							</button>
-							<button
-								className={`btn btn-confirm ${error || isFileUploaded || uploadId ? 'disabled' : ''}`}
-								onClick={() => {
-									handlerFileUpload(selectedFile);
-								}}
-								type="button"
-								disabled={error || isFileUploaded || uploadId ? true : false}
-							>
-								{t('upload-file')}
-							</button>
 							{uploadProgress !== 0 && (
 								<div
-									className={`absolute top-5 right-5 font-medium ${isFileUploaded ? "text-green-600" : ""}`}
+									className={`absolute top-0 right-0 font-medium ${isFileUploaded ? "text-green-600" : ""}`}
 								>
 									{uploadProgress}%
 								</div>
@@ -420,6 +379,120 @@ export default function SectionSearchFile({ fileType, allowedExtensions, maxFile
 					</div>
 				)}
 			</div>
+
+			{isFileUploaded && (
+				<>
+					<div
+						className="mb-4"
+					>
+						<button
+							className="btn btn-primary btn-search"
+							/* disabled={fileId ? false : true} */
+							onClick={() => {
+								if (fileId) {
+									handlerSearchUserFile(fileId)
+								}
+							}}
+						>
+							Начать поиск
+						</button>
+					</div>
+
+					{(searchedUserFiles.length !== 0) && (
+						<SearchedUserFilesList list={searchedUserFiles} />
+
+					)}
+
+					<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="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"
+								onClick={() => {
+									if (fileId) {
+										handlerSearchGlobalFile(fileId)
+									}
+								}}
+							>
+								Найти в интернете
+							</button>
+
+							<div className="global-loading" 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>
+
+							<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>
 	);
 }

src/app/components/tanstakTable.tsx

@@ -11,7 +11,7 @@ import {
 	SortingState,
 	ColumnFiltersState,
 } from '@tanstack/react-table';
-import { IconImageFile, IconVideoFile, IconAudioFile, IconEye, IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft, IconArrowUp, IconArrowDown, IconFilter, IconFileDownload, IconShieldExclamation, IconDelete } from '@/app/ui/icons/icons';
+import { IconImageFile, IconVideoFile, IconAudioFile, IconEye, IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft, IconArrowUp, IconArrowDown, IconFilter, IconFileDownload, IconShieldExclamation } from '@/app/ui/icons/icons';
 import { useTranslations, useLocale } from 'next-intl';
 import DropDownList from '@/app/components/dropDownList';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
@@ -207,7 +207,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 				cell: ({ row }) => {
 					return (
 						<div className="text-center table-item table-item-id">
-							{row.original.supportId ? row.original.supportId: '-'}
+							{row.original.supportId ? row.original.supportId : '-'}
 						</div>
 					)
 				},
@@ -447,7 +447,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 									{t('download')}
 								</span>
 							</button>
-							<button
+							{/* <button
 								onClick={() => handleOpenWindowForRemove(row.original)}
 								className="table-action-delete"
 							>
@@ -455,7 +455,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 								<span>
 									{t('delete')}
 								</span>
-							</button>
+							</button> */}
 						</div>
 
 					</div>
@@ -515,7 +515,10 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 					<div className="flex justify-center gap-4">
 						<button className="btn-primary btn-modal"
 							onClick={() => {
-								deleteMutation.mutate(file.id)
+								deleteMutation.mutate({
+									fileId: file.id,
+									removeParam: 1,
+								})
 							}}
 							disabled={deleteMutation.isPending}
 						>
@@ -537,9 +540,10 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 	};
 
 	const deleteMutation = useMutation({
-		mutationFn: removeUserFile,
+		mutationFn: ({ fileId, removeParam }: { fileId: string; removeParam: number }) =>
+			removeUserFile(fileId, removeParam),
 
-		onMutate: async (fileId: string) => {
+		onMutate: async ({ fileId, removeParam }: { fileId: string; removeParam: number }) => {
 			await queryClient.cancelQueries({ queryKey: ['userFilesData'] });
 
 			queryClient.setQueryData<ApiResponse>(['userFilesData'], (old) => {
@@ -556,7 +560,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 			toast.error(t('error'));
 		},
 
-		onSuccess: (response, fileId) => {
+		onSuccess: (response, { fileId }) => {
 			if (response === fileId) {
 				queryClient.invalidateQueries({
 					queryKey: ['userFilesData'],

src/app/components/upload-section-file.tsx

@@ -234,6 +234,9 @@ export default function UploadSectionFile({ fileType, allowedExtensions, maxFile
 				const chunkResponse = await chunkUpload(formData);
 
 				if (chunkResponse.message_desc !== 'Chunk uploaded successfully') {
+					if (chunkResponse.message_desc === 'Duplicate file upload') {
+						throw (`duplicate-file`);
+					}
 					throw new Error(`Chunk ${chunkIndex} upload failed`);
 				}
 
@@ -251,8 +254,12 @@ export default function UploadSectionFile({ fileType, allowedExtensions, maxFile
 
 		} catch (error) {
 			if (!isCancelledRef.current) {
-				setError(t('error-uploading-file'));
+				if (error === 'duplicate-file') {
-				console.error('Upload error:', error);
+					setError(t('error-duplicate-file'));
+				} else {
+					setError(t('error-uploading-file'));
+					console.error('Upload error:', error);
+				}
 			}
 		} finally {
 			setUploadId(null);

src/app/styles/global-styles.scss

@@ -158,7 +158,12 @@
 	color: v.$white;
 	border: 2px solid transparent;
 
-	&:hover {
+	&:disabled {
+		background: linear-gradient(135deg, v.$p-color-disabled, v.$s-color-disabled);
+		cursor: default;
+	}
+
+	&:hover:not(:disabled) {
 		transform: translateY(-2px);
 		box-shadow: 0 8px 25px v.$shadow-1;
 	}
@@ -260,6 +265,11 @@
 		color: v.$text-p;
 		border-radius: 20px;
 		box-shadow: 0px 4px 20px v.$shadow-1;
+
+		&:has(.modal-window-view-file) {
+			padding: 0;
+			background: transparent;
+		}
 	}
 }
 

src/app/styles/pages-styles.scss

@@ -2772,4 +2772,667 @@
 		grid-template-columns: auto;
 		max-width: calc(100vw - var(--side-bar-width) - 30px);
 	}
+}
+
+.search-info {
+	background: #f0f9ff;
+	border: 1px solid #bfdbfe;
+	border-radius: 12px;
+	padding: 16px;
+	margin-bottom: 20px;
+
+	&-title {
+		font-weight: 600;
+		color: #1e40af;
+		margin-bottom: 8px;
+	}
+
+	&-text {
+		color: #3730a3;
+		font-size: 14px;
+	}
+}
+
+.btn-primary.btn-search {
+	background: linear-gradient(135deg, #667eea 50%, #764ba2 100%);
+	border: none
+}
+
+.global-search-section {
+	background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
+	padding: 0;
+	box-shadow: 0 10px 40px rgba(99, 102, 241, 0.1);
+	border-radius: 20px;
+	position: relative;
+	overflow: hidden;
+	transform: translateY(0);
+	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+	.global-search-header {
+		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+		padding: 24px;
+		color: white;
+		position: relative;
+		overflow: hidden;
+
+		.global-search-title {
+			font-size: 1.4rem;
+			font-weight: 700;
+			margin: 0;
+			display: flex;
+			align-items: center;
+			gap: 16px;
+			position: relative;
+			z-index: 2;
+		}
+
+		.global-search-badge {
+			background: rgba(255, 255, 255, 0.9);
+			color: #667eea;
+			padding: 8px 16px;
+			border-radius: 20px;
+			font-size: 12px;
+			font-weight: 700;
+			text-transform: uppercase;
+			letter-spacing: 1px;
+			animation: pulse-glow 2s ease-in-out infinite;
+		}
+	}
+
+	.global-search-content {
+		padding: 24px;
+		border: 3px solid transparent;
+		border-radius: 0 0 20px 20px;
+		background:
+			linear-gradient(#fff, #fff) padding-box,
+			linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%) border-box;
+		background-clip: padding-box, border-box;
+
+		.global-search-info {
+			background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%);
+			border: 2px solid #c7d2fe;
+			border-radius: 16px;
+			padding: 20px;
+			margin-bottom: 24px;
+			position: relative;
+			overflow: hidden;
+
+			.global-search-info-title {
+				font-weight: 700;
+				color: #3730a3;
+				margin-bottom: 12px;
+				display: flex;
+				align-items: center;
+				gap: 10px;
+				font-size: 16px;
+				position: relative;
+				z-index: 2;
+			}
+
+			.global-search-info-text {
+				color: #4338ca;
+				font-size: 14px;
+				line-height: 1.6;
+				position: relative;
+				z-index: 2;
+			}
+		}
+
+		.search-counter {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			background: white;
+			border: 2px solid #e5e7eb;
+			border-radius: 12px;
+			padding: 16px 20px;
+			margin-bottom: 20px;
+			transition: all 0.3s ease;
+
+			.counter-info {
+				display: flex;
+				align-items: center;
+				gap: 12px;
+			}
+
+			.progress-bar {
+				width: 80px;
+				height: 8px;
+				background: #f3f4f6;
+				border-radius: 4px;
+				overflow: hidden;
+				position: relative;
+
+				.progress-fill {
+					height: 100%;
+					background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+					border-radius: 4px;
+					transition: all 0.5s ease;
+					position: relative;
+					overflow: hidden;
+				}
+			}
+		}
+
+		.global-search-btn {
+			width: 100%;
+			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+			color: white;
+			border: none;
+			padding: 16px 24px;
+			border-radius: 12px;
+			font-size: 16px;
+			font-weight: 600;
+			cursor: pointer;
+			transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			gap: 12px;
+			position: relative;
+			overflow: hidden;
+
+			&:hover:not(:disabled) {
+				transform: translateY(-2px);
+				box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
+			}
+		}
+
+		.global-loading {
+			display: none;
+			text-align: center;
+			padding: 40px;
+			background: #f8fafc;
+			border-radius: 16px;
+			margin: 20px 0;
+
+			.global-spinner {
+				width: 50px;
+				height: 50px;
+				margin: 0 auto 20px;
+				position: relative;
+
+				&::before {
+					content: '';
+					position: absolute;
+					top: 0;
+					left: 0;
+					width: 100%;
+					height: 100%;
+					border: 4px solid #e5e7eb;
+					border-top: 4px solid #667eea;
+					border-radius: 50%;
+					animation: spin 1s linear infinite;
+				}
+
+				&::after {
+					content: '';
+					position: absolute;
+					top: 8px;
+					left: 8px;
+					width: calc(100% - 16px);
+					height: calc(100% - 16px);
+					border: 2px solid transparent;
+					border-top: 2px solid #764ba2;
+					border-radius: 50%;
+					animation: spin 2s linear infinite reverse;
+				}
+			}
+
+			.global-loading-text {
+				color: #4b5563;
+				font-weight: 500;
+				font-size: 16px;
+			}
+		}
+
+		.global-result {
+			display: none;
+			margin: 20px 0;
+			animation: slideUp 0.5s ease;
+
+			&.show {
+				display: block;
+			}
+
+			.global-result-card {
+				background: white;
+				border: 2px solid #e5e7eb;
+				border-radius: 16px;
+				overflow: hidden;
+				transition: all 0.3s ease;
+
+				.global-result-header {
+					background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+					color: white;
+					padding: 16px 20px;
+					font-weight: 600;
+					display: flex;
+					align-items: center;
+					gap: 12px;
+				}
+
+				.global-result-content {
+					padding: 24px;
+				}
+
+				.global-result-item {
+					display: flex;
+					gap: 20px;
+					align-items: flex-start;
+					margin-bottom: 30px;
+
+					.global-result-image {
+						width: 140px;
+						height: 140px;
+						border-radius: 12px;
+						overflow: hidden;
+						flex-shrink: 0;
+						background: #f3f4f6;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						position: relative;
+						border: 2px solid #e5e7eb;
+						transition: all 0.3s ease;
+
+						img {
+							width: 100%;
+							height: 100%;
+							object-fit: cover;
+							cursor: pointer;
+							transition: all 0.3s ease;
+						}
+					}
+
+					.global-result-info {
+						flex: 1;
+					}
+
+					.global-result-title {
+						font-weight: 600;
+						color: #1e293b;
+						margin-bottom: 12px;
+						font-size: 18px;
+						line-height: 1.4;
+					}
+
+					.global-result-meta {
+						display: flex;
+						flex-wrap: wrap;
+						gap: 16px;
+						margin-bottom: 16px;
+						font-size: 14px;
+					}
+
+					.global-result-size,
+					.global-result-host {
+						display: flex;
+						align-items: center;
+						gap: 6px;
+						padding: 6px 12px;
+						border-radius: 8px;
+						font-weight: 500;
+					}
+
+					.global-result-size {
+						background: #f1f5f9;
+						color: #64748b;
+					}
+
+					.global-result-host {
+						background: #eff6ff;
+						color: #2563eb;
+						border: 1px solid #bfdbfe;
+					}
+
+					.global-result-passage {
+						color: #6b7280;
+						font-size: 14px;
+						line-height: 1.6;
+						margin-bottom: 20px;
+						padding: 16px;
+						background: #f8fafc;
+						border-radius: 12px;
+						border-left: 4px solid #667eea;
+					}
+
+					.global-result-url {
+						color: #667eea;
+						text-decoration: none;
+						font-size: 14px;
+						font-weight: 500;
+						word-break: break-all;
+						display: block;
+						padding: 12px 16px;
+						background: #f8fafc;
+						border-radius: 10px;
+						transition: all 0.3s ease;
+						border: 1px solid #e5e7eb;
+						position: relative;
+						overflow: hidden;
+
+						&:hover {
+							background: #eff6ff;
+							border-color: #667eea;
+							text-decoration: none;
+							transform: translateY(-1px);
+							box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
+						}
+					}
+				}
+			}
+		}
+
+		.global-no-result {
+			display: none;
+			text-align: center;
+			padding: 60px 20px;
+			background: #f8fafc;
+			border-radius: 16px;
+			margin: 20px 0;
+		}
+
+		.global-error {
+			display: none;
+			background: #fef2f2;
+			border: 2px solid #fecaca;
+			border-radius: 12px;
+			padding: 20px;
+			color: #991b1b;
+			margin: 20px 0;
+		}
+	}
+}
+
+@keyframes slideUp {
+	0% {
+		opacity: 1;
+		transform: translateY(0);
+	}
+
+	100% {
+		opacity: 0;
+		transform: translateY(-20px);
+	}
+}
+
+@keyframes spin {
+	0% {
+		transform: rotate(0deg);
+	}
+
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+@keyframes pulse-glow {
+
+	0%,
+	100% {
+		box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
+	}
+
+	50% {
+		box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
+	}
+}
+
+.user-file-search-results {
+	background: white;
+	border-radius: 16px;
+	padding: 24px;
+	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+	margin-bottom: 20px;
+
+	.results-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 20px;
+
+		.results-title {
+			font-size: 1.3rem;
+			font-weight: 600;
+			color: #1e293b;
+		}
+	}
+
+	.results-list {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+
+		.result-item {
+			border: 1px solid #e5e7eb;
+			border-radius: 12px;
+			padding: 20px;
+			transition: all 0.2s ease;
+
+			&:hover {
+				border-color: #6366f1;
+				box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
+			}
+
+			.result-header {
+				display: flex;
+				align-items: center;
+				gap: 16px;
+				margin-bottom: 12px;
+			}
+
+			.result-preview {
+				width: 60px;
+				height: 60px;
+				border-radius: 10px;
+				overflow: hidden;
+				position: relative;
+				flex-shrink: 0;
+				background: #f3f4f6;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+
+				img {
+					width: 100%;
+					height: 100%;
+					object-fit: cover;
+					transition: opacity 0.3s ease;
+				}
+			}
+
+			.preview-fallback {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				font-size: 24px;
+				background: #f3f4f6;
+			}
+
+			.result-info {
+				flex: 1;
+			}
+
+			.result-filename {
+				font-weight: 600;
+				color: #1e293b;
+				margin-bottom: 4px;
+			}
+
+			.result-details {
+				color: #64748b;
+				font-size: 14px;
+			}
+
+			.similarity-score {
+				text-align: center;
+				min-width: 80px;
+			}
+
+			.similarity-percentage {
+				font-size: 1.5rem;
+				font-weight: 700;
+				color: #10b981;
+				margin-bottom: 4px;
+			}
+
+			.similarity-label {
+				font-size: 12px;
+				color: #64748b;
+				text-transform: uppercase;
+			}
+
+			.result-badges {
+				display: flex;
+				gap: 8px;
+				margin-top: 12px;
+				margin-bottom: 12px;
+				flex-wrap: wrap;
+
+				.badge {
+					padding: 4px 8px;
+					border-radius: 6px;
+					font-size: 12px;
+					font-weight: 500;
+				}
+
+				.badge-protected {
+					background: #d1fae5;
+					color: #065f46;
+				}
+
+				.badge-high-protection {
+					background: #ddd6fe;
+					color: #5b21b6;
+				}
+			}
+
+			.result-actions {
+				display: flex;
+				gap: 8px;
+				justify-content: flex-end;
+				margin-top: 12px;
+
+				.btn-secondary {
+					background: #6b7280;
+					color: white;
+					font-size: 12px;
+					padding: 6px 12px;
+
+					&:hover {
+						background: #4b5563;
+					}
+				}
+
+				.btn-success {
+					background: #10b981;
+					color: white;
+					font-size: 12px;
+					padding: 6px 12px;
+
+					&:hover {
+						background: #059669;
+					}
+				}
+			}
+		}
+	}
+}
+
+.modal-window-view-file {
+	/* 	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	width: 90%;
+	max-width: 1200px;
+	max-height: 90%;
+	background: white;
+	border-radius: 16px;
+	padding: 0;
+	overflow: hidden;
+	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5); */
+	border-radius: 20px;
+	overflow: hidden;
+
+	&-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 16px 20px;
+		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+		color: white;
+	}
+
+	&-title {
+		margin: 0;
+		font-size: 18px;
+		font-weight: 600;
+		flex: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		margin-right: 16px;
+	}
+
+	&-content {
+		padding: 20px;
+		max-height: calc(90vh - 80px);
+		overflow-y: auto;
+		background: v.$white;
+
+		.file-info-card {
+			background: #ffffff;
+			border: 1px solid #e2e8f0;
+			border-radius: 12px;
+			padding: 0;
+			overflow: hidden;
+
+			.info-header {
+				background: #f8fafc;
+				padding: 16px 20px;
+				border-bottom: 1px solid #e2e8f0;
+
+				h4 {
+					margin: 0;
+					font-size: 16px;
+					font-weight: 600;
+				}
+			}
+
+			.info-item {
+				display: flex;
+				justify-content: space-between;
+				align-items: flex-start;
+				padding: 12px 20px;
+				border-bottom: 1px solid #f1f5f9;
+			}
+
+			.info-label {
+				font-size: 14px;
+				color: #64748b;
+				font-weight: 500;
+				flex-shrink: 0;
+			}
+
+			.info-value {
+				font-weight: 600;
+				color: #1e293b;
+				text-align: right;
+				word-break: break-word;
+				max-width: 150px;
+			}
+
+			.status-badges {
+				padding: 12px 20px;
+				border-bottom: 1px solid #f1f5f9;
+			}
+		}
+	}
 }

src/app/styles/variable.scss

@@ -12,6 +12,8 @@ $bg-darkening: #0000007a;
 $shadow-1: #0000001a;
 $white: #fff;
 $red: #dc2626;
+$p-color-disabled: #6365f18e;
+$s-color-disabled: #8a5cf663;
 
 $color-image: #f08c00;
 $color-video: #2f9e44;

src/app/ui/icons/icons.tsx

@@ -145,4 +145,10 @@ export function IconBurgerMenu() {
 	return (
 		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon"><path fill="currentColor" d="M4 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m0 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m1 5a1 1 0 1 0 0 2h14a1 1 0 1 0 0-2z" /></svg>
 	)
+}
+
+export function IconSearch() {
+	return (
+		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon"><path fill="currentColor" d="M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5A6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5S14 7.01 14 9.5S11.99 14 9.5 14" /></svg>
+	)
 }

src/app/ui/search/searched-global-files-list.tsx

@@ -0,0 +1,37 @@
+export function SearchedGlobalFilesList({ list }: { list: any }) {
+	return (
+		<>
+			{list.map((item: any, index: number) => {
+				return (
+					<div
+						className="global-result-item"
+						key={index}
+					>
+						<div className="global-result-image">
+							<img src={item.url} alt={item.pageTitle} />
+						</div>
+						<div className="global-result-info">
+							<div className="global-result-title">
+								{item.pageTitle}
+							</div>
+							<div className="global-result-meta">
+								<div className="global-result-size">
+									{item.height}x{item.width}
+								</div>
+								<div className="global-result-host">
+									{item.host}
+								</div>
+							</div>
+							<div className="global-result-passage">
+								{item.pageTitle}
+							</div>
+							<a href={item.pageUrl} target="_blank" className="global-result-url" title={item.pageUrl}>
+								{item.pageUrl}
+							</a>
+						</div>
+					</div>
+				)
+			})}
+		</>
+	)
+}

src/app/ui/search/searched-user-files-list.tsx

@@ -0,0 +1,184 @@
+import { convertBytes } from '@/app/lib/convertBytes';
+import { toast } from 'sonner';
+import { useState, ReactNode } from 'react';
+import { useTranslations } from 'next-intl';
+import ModalWindow from '@/app/components/modalWindow';
+
+export function SearchedUserFilesList({ list }: { list: any }) {
+	const [isFileLoading, setIsFileLoading] = useState(false);
+	const [openWindow, setOpenWindow] = useState<boolean>(false);
+	const [openWindowChildren, setOpenWindowChildren] = useState<ReactNode>(null);
+	const t = useTranslations('Global');
+
+	const handlerDownload = async (fileId: string, fileName: string) => {
+		setIsFileLoading(true);
+
+		try {
+			const response = await fetch(`/api/download/${fileId}`);
+
+			if (!response.ok) {
+				throw new Error(`error: ${response.status}`);
+			}
+
+			const blob = await response.blob();
+			const url = window.URL.createObjectURL(blob);
+			const a = document.createElement('a');
+			a.href = url;
+			a.download = fileName || `file-${fileId}`;
+			document.body.appendChild(a);
+			a.click();
+			window.URL.revokeObjectURL(url);
+			document.body.removeChild(a);
+			toast.success(`${t('file-is-downloading')} - ${fileName}`);
+		} catch (error) {
+			toast.error(t('failed-to-download-file'))
+		} finally {
+			setIsFileLoading(false);
+		}
+	};
+
+	const handlerViewfile = async (e: any) => {
+		setOpenWindowChildren(() => {
+			return (
+				<div
+					className="modal-window-view-file"
+				>
+					<div className="modal-window-view-file-header">
+						<div
+							className="modal-window-view-file-title"
+						>
+							{e.originalFileName}
+						</div>
+					</div>
+					<div
+						className="modal-window-view-file-content"
+					>
+						<div className="flex gap-2">
+							<div>
+								<img
+									src={e.url ? e.url : '#'}
+									alt="img"
+								/>
+							</div>
+							<div
+								className="file-info-card"
+							>
+								<div className="info-header">
+									<h4>Информация о файле</h4>
+								</div>
+								<div className="info-item">
+									<span className="info-label">ID в системе:</span>
+									<span className="info-value">
+										{e.supportId ? e.supportId : '#'}
+									</span>
+								</div>
+								<div className="info-item">
+									<span className="info-label">Дата загрузки:</span>
+									<span className="info-value">
+										{e.uploadDate ? e.uploadDate : '#'}
+									</span>
+								</div>
+								<div className="info-item">
+									<span className="info-label">Размер файла:</span>
+									<span className="info-value">
+										{convertBytes(e.fileSize)}
+									</span>
+								</div>
+								<div className="info-item">
+									<span className="info-label">Статус защиты:</span>
+									<span className="info-value">
+										{e.status ? e.status : '#'}
+									</span>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			)
+		})
+		setOpenWindow(true);
+	};
+
+	return (
+		<>
+			<div
+				className="user-file-search-results"
+			>
+				<div className="results-header">
+					<div className="results-title">Результаты поиска</div>
+					<div className="results-count">
+						Найдено файлов: {list.length}
+					</div>
+				</div>
+				<div
+					className="results-list"
+				>
+					{list.map((e: any, index: number) => {
+						return (
+							<div
+								key={index}
+
+							>
+								<div className="result-item">
+									<div className="result-header">
+										<div className="result-preview">
+											<img src="view-image.php?id=431" alt="Preview" />
+											<div className="preview-fallback">
+												<span>📄</span>
+											</div>
+										</div>
+
+										<div className="result-info">
+											<div className="result-filename" title={e.originalFileName}>
+												{e.originalFileName}
+											</div>
+											<div className="result-details">
+												Загружен: - •
+												Размер: {convertBytes(e.fileSize)}
+											</div>
+										</div>
+										<div className="similarity-score">
+											<div className="similarity-percentage">
+												{e.similarityLevel}
+											</div>
+										</div>
+									</div>
+
+									<div className="result-badges">
+										<span className="badge badge-protected">
+											🛡️ Защищено
+										</span>
+										<span className="badge badge-high-protection">
+											🔒 Высокий уровень защиты
+										</span>
+
+									</div>
+
+
+									<div className="result-actions">
+										<button
+											className="btn btn-secondary"
+											onClick={() => {
+												handlerViewfile(e);
+											}}
+										>
+											👁️ Просмотр
+										</button>
+										<button
+											className="btn btn-success"
+											disabled={isFileLoading}
+											onClick={() => handlerDownload(e.fileId, e.originalFileName)}
+										>
+											💾 Скачать
+										</button>
+									</div>
+								</div>
+							</div>)
+					})}
+				</div>
+			</div>
+			<ModalWindow children={openWindowChildren} state={openWindow} callBack={setOpenWindow} />
+		</>
+
+	)
+}

src/i18n/messages/en.json

@@ -143,6 +143,7 @@
 		"pixels": "pixels",
 		"error-processing-file": "Error processing file",
 		"error-uploading-file": "Error uploading file",
+		"error-duplicate-file": "Such a file already exists",
 		"unknown-validation-error": "Unknown validation error",
 		"unsupported-file-format": "Unsupported file format.",
 		"the-file-is-too-large": "The file is too large",

src/i18n/messages/ru.json

@@ -143,6 +143,7 @@
 		"pixels": "пикселей",
 		"error-processing-file": "Ошибка при обработке файла",
 		"error-uploading-file": "Ошибка при загрузке файла",
+		"error-duplicate-file": "Такой файл уже есть",
 		"unknown-validation-error": "Неизвестная ошибка валидации",
 		"unsupported-file-format": "Неподдерживаемый формат файла.",
 		"the-file-is-too-large": "Файл слишком большой",