add search side panel layout

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;
+		}
+	}
 }