add search side panel layout

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

@@ -1,5 +1,7 @@
 import SectionSearchFile from '@/app/ui/search/section-search-file';
 import { SupportedFormats } from '@/app/ui/search/supported-formats';
+import { SearchStats } from '@/app/ui/search/search-stats';
+import { RecentSearches } from '@/app/ui/search/recent-searches';
 export default function Page() {
 	return (
 		<>
@@ -19,6 +21,8 @@ export default function Page() {
 				/>
 				<div className="search-sidebar">
 					<SupportedFormats />
+					<SearchStats />
+					<RecentSearches />
 				</div>
 			</div>
 		</>

src/app/styles/pages-styles.scss

@@ -3697,16 +3697,25 @@
 	}
 }
 
-.supported-formats {
+.search-sidebar {
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+}
+
+.supported-formats,
+.stats-search,
+.recent-searches {
 	background: v.$white;
 	border-radius: 12px;
 	padding: 20px;
 	box-shadow: 0 4px 6px v.$shadow-1;
 
-	.formats-title {
+	.formats-title,
+	.stats-title,
+	.recent-title {
 		font-weight: 600;
 		color: v.$text-p;
-		;
 		margin-bottom: 16px;
 		display: flex;
 		align-items: center;
@@ -3755,4 +3764,76 @@
 		font-size: 14px;
 		line-height: 1.5;
 	}
+
+	.stat-item {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 8px 0;
+		border-bottom: 1px solid v.$b-color-2;
+
+		&:last-child {
+			border-bottom: none;
+		}
+
+		.stat-label {
+			color: v.$text-s;
+			font-size: 14px;
+			opacity: 0.9;
+			position: relative;
+			z-index: 1;
+		}
+
+		.stat-value {
+			font-weight: 600;
+			color: v.$text-p;
+			font-size: 32px;
+			margin-bottom: 5px;
+			position: relative;
+			z-index: 1;
+		}
+	}
+
+	.recent-item {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 8px 0;
+		border-bottom: 1px solid v.$b-color-2;
+
+		.recent-type {
+			color: v.$text-p;
+			font-size: 14px;
+			display: flex;
+
+			&.image {
+				svg {
+					color: v.$color-image;
+				}
+			}
+
+			&.audio {
+				svg {
+					color: v.$color-audio;
+				}
+			}
+
+			&.video {
+				svg {
+					color: v.$color-video;
+				}
+			}
+
+			&.document {
+				svg {
+					color: v.$color-document;
+				}
+			}
+		}
+
+		.recent-date {
+			color: v.$text-s;
+			font-size: 12px;
+		}
+	}
 }

src/app/ui/search/recent-searches.tsx

@@ -0,0 +1,50 @@
+import { IconImageFile, IconDocument, IconAudioFile, IconVideoFile } from '@/app/ui/icons/icons';
+export function RecentSearches() {
+	return (
+		<div className="recent-searches">
+			<div className="recent-title">
+				Недавние поиски
+			</div>
+			<div className="recent-item">
+				<span className="recent-type document">
+					<IconDocument /> document</span>
+				<div>
+					<div>0 поисков</div>
+					<div className="recent-date">
+						date
+					</div>
+				</div>
+			</div>
+			<div className="recent-item">
+				<span className="recent-type image">
+					<IconImageFile /> image</span>
+				<div>
+					<div>0 поисков</div>
+					<div className="recent-date">
+						date
+					</div>
+				</div>
+			</div>
+			<div className="recent-item">
+				<span className="recent-type audio">
+					<IconAudioFile /> audio</span>
+				<div>
+					<div>0 поисков</div>
+					<div className="recent-date">
+						date
+					</div>
+				</div>
+			</div>
+			<div className="recent-item">
+				<span className="recent-type video">
+					<IconVideoFile /> video</span>
+				<div>
+					<div>0 поисков</div>
+					<div className="recent-date">
+						date
+					</div>
+				</div>
+			</div>
+		</div>
+	)
+}

src/app/ui/search/search-stats.tsx

@@ -0,0 +1,30 @@
+export function SearchStats() {
+	return (
+		<div className="stats-search">
+			<div className="stats-title">
+				Статистика поиска
+			</div>
+
+			<div className="stat-item">
+				<span className="stat-label">Изображения</span>
+				<span className="stat-value">0</span>
+			</div>
+			<div className="stat-item">
+				<span className="stat-label">Видео</span>
+				<span className="stat-value">0</span>
+			</div>
+			<div className="stat-item">
+				<span className="stat-label">Аудио</span>
+				<span className="stat-value">0</span>
+			</div>
+			<div className="stat-item">
+				<span className="stat-label">Документы</span>
+				<span className="stat-value">0</span>
+			</div>
+			<div className="stat-item">
+				<span className="stat-label">Всего поисков</span>
+				<span className="stat-value">0</span>
+			</div>
+		</div>
+	)
+}