remove preview for all file except images

src/app/lib/getFileType.ts

@@ -0,0 +1,28 @@
+export const getFileType = (fileName: string, allowedExtensions: {
+	images: string[],
+	videos: string[],
+	audios: string[],
+	documents: string[]
+}): 'image' | 'video' | 'audio' | 'document' | 'unknown' => {
+
+	const lastDotIndex = fileName.lastIndexOf('.');
+	const extension = fileName.substring(lastDotIndex + 1).toLowerCase();
+
+	if (allowedExtensions.images.includes(extension)) {
+		return 'image';
+	}
+
+	if (allowedExtensions.videos.includes(extension)) {
+		return 'video';
+	}
+
+	if (allowedExtensions.audios.includes(extension)) {
+		return 'audio';
+	}
+
+	if (allowedExtensions.documents.includes(extension)) {
+		return 'document';
+	}
+
+	return 'unknown';
+}

src/app/styles/pages-styles.scss

@@ -3388,19 +3388,6 @@
 				}
 			}
 
-			.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;
 			}
@@ -3533,11 +3520,14 @@
 		background: v.$white;
 
 		&-wrapper {
-			display: grid;
-			grid-template-columns: 1fr 300px;
-			gap: 20px;
 			height: 100%;
 			max-height: 80vh;
+
+			&.image {
+				display: grid;
+				grid-template-columns: 1fr 300px;
+				gap: 20px;
+			}
 		}
 
 		.image-section {

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

@@ -5,6 +5,7 @@ import { searchUserFiles, searchGlobalFiles } from '@/app/actions/searchActions'
 import { useQueryClient } from '@tanstack/react-query';
 import { Pagination } from '@/app/components/Pagination';
 import { useTranslations } from 'next-intl';
+import { AllowedExtensions } from '@/app/ui/search/section-search-file';
 
 export interface SearchItem {
 	url: string,
@@ -15,7 +16,7 @@ export interface SearchItem {
 	pageUrl: string
 }
 
-export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: any }) {
+export function FileSearchPanel({ fileId, ref, allowedExtensions }: { fileId: string | null, ref: any, allowedExtensions: AllowedExtensions }) {
 	const [searchedUserFiles, setSearchedUserFiles] = useState<string[]>([]);
 	const [searchedUserFilesShowNull, setSearchedUserFilesShowNull] = useState<boolean>(false);
 	const [searchedGlobalFiles, setSearchedGlobalFiles] = useState<SearchItem[]>([]);
@@ -117,7 +118,7 @@ export function FileSearchPanel({ fileId, ref }: { fileId: string | null, ref: a
 			</div>
 
 			{(searchedUserFiles.length !== 0) && (
-				<SearchedUserFilesList list={searchedUserFiles} />
+				<SearchedUserFilesList list={searchedUserFiles} allowedExtensions={allowedExtensions} />
 			)}
 
 			{searchedUserFilesShowNull && (

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

@@ -4,8 +4,11 @@ import { useState, ReactNode } from 'react';
 import { useTranslations } from 'next-intl';
 import ModalWindow from '@/app/components/ModalWindow';
 import { IconEye, IconDownload } from '@/app/ui/icons/icons';
+import { getFileType } from '@/app/lib/getFileType';
+import { AllowedExtensions } from '@/app/ui/search/section-search-file';
+import { FileTypeIcon } from '@/app/components/FileTypeIcon';
 
-export function SearchedUserFilesList({ list }: { list: any }) {
+export function SearchedUserFilesList({ list, allowedExtensions }: { list: string[], allowedExtensions: AllowedExtensions }) {
 	const [isFileLoading, setIsFileLoading] = useState(false);
 	const [openWindow, setOpenWindow] = useState<boolean>(false);
 	const [openWindowChildren, setOpenWindowChildren] = useState<ReactNode>(null);
@@ -38,7 +41,7 @@ export function SearchedUserFilesList({ list }: { list: any }) {
 		}
 	};
 
-	const handlerViewfile = async (e: any) => {
+	const handlerViewfile = async (e: any, fileType: string) => {
 		setOpenWindowChildren(() => {
 			return (
 				<div
@@ -54,15 +57,17 @@ export function SearchedUserFilesList({ list }: { list: any }) {
 					<div
 						className="modal-window-view-file-content"
 					>
-						<div className="modal-window-view-file-content-wrapper">
+						<div className={`modal-window-view-file-content-wrapper ${fileType}`}>
-							<div className="image-section">
+							{fileType === 'image' && (
-								<div className="image-container">
+								<div className="image-section">
-									<img
+									<div className="image-container">
-										src={e.url ? e.url : '#'}
+										<img
-										alt="img"
+											src={e.url ? e.url : '#'}
-									/>
+											alt="img"
+										/>
+									</div>
 								</div>
-							</div>
+							)}
 							<div
 								className="file-info-card"
 							>
@@ -117,6 +122,8 @@ export function SearchedUserFilesList({ list }: { list: any }) {
 					className="results-list"
 				>
 					{list.map((e: any, index: number) => {
+						const fileType = getFileType(e.originalFileName, allowedExtensions);
+
 						if (e.similarityLevel !== 'DIFFERENT') {
 							return (
 								<div
@@ -125,15 +132,17 @@ export function SearchedUserFilesList({ list }: { list: any }) {
 								>
 									<div className="result-item">
 										<div className="result-header">
-											<div className="result-preview">
+											{fileType === 'image' ? (
-												{e.url ? (
+												<div className="result-preview">
-													<img src={e.url} alt="Preview" />
+													{e.url ? (
-												) : (
+														<img src={e.url} alt="Preview" />
-													<div className="preview-fallback">
+													) : (
-														<span>📄</span>
+														<FileTypeIcon type={fileType} />
-													</div>
+													)}
-												)}
+												</div>
-											</div>
+											) : (
+												<FileTypeIcon type={fileType} />
+											)}
 											<div className="result-info">
 												<div className="result-filename" title={e.originalFileName}>
 													{e.originalFileName}
@@ -161,7 +170,7 @@ export function SearchedUserFilesList({ list }: { list: any }) {
 											<button
 												className="btn btn-secondary gap-1"
 												onClick={() => {
-													handlerViewfile(e);
+													handlerViewfile(e, fileType);
 												}}
 											>
 												<IconEye />

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

@@ -8,6 +8,7 @@ import { useNavigationBlocker } from '@/app/hooks/useNavigationBlocker';
 import { useQueryClient } from '@tanstack/react-query';
 import { removeUserFile } from '@/app/actions/fileEntity';
 import { FileSearchPanel } from '@/app/ui/search/file-search-panel';
+import { getFileType } from '@/app/lib/getFileType';
 interface SelectedFile {
 	file: File;
 	preview: string | undefined;
@@ -23,13 +24,15 @@ interface FileUploadInitResponse {
 	status: string
 }
 
+export interface AllowedExtensions {
+	images: string[],
+	videos: string[],
+	audios: string[],
+	documents: string[]
+}
+
 interface SectionSearchFile {
-	allowedExtensions: {
+	allowedExtensions: AllowedExtensions
-		images: string[],
-		videos: string[],
-		audios: string[],
-		documents: string[]
-	}
 	maxFileSize: number
 }
 
@@ -58,36 +61,6 @@ export default function SectionSearchFile({ allowedExtensions, maxFileSize }: Se
 		return allExtensions.map(e => `.${e}`).join(', ');
 	}, [allExtensions]);
 
-
-	const getFileType = (fileName: string, allowedExtensions: {
-		images: string[],
-		videos: string[],
-		audios: string[],
-		documents: string[]
-	}): 'image' | 'video' | 'audio' | 'document' | 'unknown' => {
-
-		const lastDotIndex = fileName.lastIndexOf('.');
-		const extension = fileName.substring(lastDotIndex + 1).toLowerCase();
-
-		if (allowedExtensions.images.includes(extension)) {
-			return 'image';
-		}
-
-		if (allowedExtensions.videos.includes(extension)) {
-			return 'video';
-		}
-
-		if (allowedExtensions.audios.includes(extension)) {
-			return 'audio';
-		}
-
-		if (allowedExtensions.documents.includes(extension)) {
-			return 'document';
-		}
-
-		return 'unknown';
-	}
-
 	const validateFile = (file: File): { isValid: boolean; errorMessage?: string } => {
 		if (!allExtensions.includes(file.type as string)) {
 			const extension = file.name.split('.').pop()?.toLowerCase();
@@ -375,7 +348,7 @@ export default function SectionSearchFile({ allowedExtensions, maxFileSize }: Se
 			</div>
 
 			{isFileUploaded && (
-				<FileSearchPanel fileId={fileId} ref={childRef} />
+				<FileSearchPanel fileId={fileId} ref={childRef} allowedExtensions={allowedExtensions} />
 			)}
 		</div>
 	);