feat(popovers): update for search redesign

Author: ricewind012

src/popovers/search.scss

@@ -3,123 +3,93 @@
 @use "typography";
 @use "util";
 
-._55c999adcf6db265-container:not(:empty) {
-	--search-popout-option-non-text-color: currentColor;
-
-	@include popover.container;
-
-	gap: calc(var(--menu_margin) * 2);
-	margin-top: calc(var(--headerbar-height) + var(--spacing));
-
-	display: flex;
-	flex-direction: column;
-}
-
-._56fec8e8b8048fe0-header {
-	@include popover.title;
-
-	letter-spacing: 0;
+._1bb324526a52affb-clearSearchHistory {
+	@include controls.icon-button("user-trash", "32px");
 
-	box-sizing: border-box;
+	border-radius: 999px;
 
-	pointer-events: none;
+	position: absolute;
+	top: -4px;
+	right: 0;
 }
 
-._56fec8e8b8048fe0-option {
-	@include popover.entry($hover: ":is(:hover, [aria-selected='true'])");
+.f1c5c9823fbd3ef8-container:not(:empty) {
+	@include popover.container;
 
-	font-size: var(--document-font-size);
-	// focus border
-	box-shadow: none;
-	margin: 0;
+	margin-block-start: calc(var(--headerbar-height) + var(--spacing));
 
-	&:is(._56fec8e8b8048fe0-user, :has(strong)) ._56fec8e8b8048fe0-filter {
-		display: none;
+	[data-text-variant] {
+		font-size: var(--document-font-size);
 	}
 
-	._56fec8e8b8048fe0-resultChannel {
-		width: 100%;
-	}
-
-	strong,
-	._56fec8e8b8048fe0-displayedNick {
-		width: 50%;
+	// "from: user", etc.
+	._1bb324526a52affb-filterSublabelTextContainer,
+	[data-text-variant="text-sm/medium"] + [data-text-variant="text-sm/medium"] {
+		display: none;
 	}
+}
 
-	strong {
-		color: var(--popover_fg_color);
-		font-weight: normal;
-		margin-left: calc(popover.$icon-size + var(--spacing));
-	}
+._1bb324526a52affb-divider {
+	margin: var(--menu_padding) 0;
+}
 
-	._56fec8e8b8048fe0-answer {
-		color: var(--popover_fg_color);
-		font-weight: normal;
-	}
+._1bb324526a52affb-groupHeader {
+	padding: 0;
 
-	._56fec8e8b8048fe0-displayedNick {
-		font-weight: normal;
-		margin: 0 var(--spacing);
+	& > [data-text-variant] {
+		@include popover.title;
 	}
+}
 
-	._56fec8e8b8048fe0-displayUsername {
-		font-weight: normal;
-	}
+._1bb324526a52affb-groupWrapper {
+	gap: 0;
 
-	._56fec8e8b8048fe0-filter {
-		font-weight: normal;
-	}
+	position: relative;
+}
 
-	._56fec8e8b8048fe0-searchResultChannelCategory {
-		@extend %text-normal;
+._1bb324526a52affb-item {
+	padding: 0;
 
-		opacity: 1;
-		text-transform: unset;
-		margin-left: var(--spacing);
+	flex-grow: 1;
 
-		top: 0;
+	& > div > [data-text-variant="text-sm/medium"]:first-child,
+	[data-text-variant="text-sm/semibold"] {
+		color: var(--popover_fg_color);
 	}
+}
 
-	._56fec8e8b8048fe0-searchResultChannelIcon {
-		@include util.icon("lang-include");
+._1bb324526a52affb-itemContainer {
+	@include popover.entry($hover: ":is(:hover, [aria-selected='true'])");
 
-		opacity: 1;
+	display: flex;
+	align-items: center;
+}
 
-		position: absolute;
-		// Make it centered with avatars
-		left: calc(
-			var(--menu_padding) + (popover.$icon-size - var(--icon-size)) / 2
-		);
+._1bb324526a52affb-itemIcon {
+	color: var(--popover_fg_color);
+	margin-inline-end: var(--spacing);
 
-		path {
-			display: none;
-		}
+	// avatars don't work
+	&:where(svg) {
+		width: var(--icon-size);
+		height: var(--icon-size);
 	}
 }
 
-._56fec8e8b8048fe0-plusIcon,
-._55c999adcf6db265-queryContainer,
-._56fec8e8b8048fe0-searchLearnMore {
-	display: none;
-}
+._1bb324526a52affb-labelWithElements {
+	gap: var(--spacing);
 
-._56fec8e8b8048fe0-resultsGroup {
-	padding: 0;
-	margin: 0;
+	flex-grow: 1;
 
-	&::before {
-		top: calc(var(--spacing) * -1);
-
-		margin: 0;
+	& > * {
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		width: 50%;
 	}
-}
-
-._56fec8e8b8048fe0-searchClearHistory {
-	@include controls.icon-button("user-trash", "32px");
-
-	border-radius: 999px;
 
-	position: absolute;
-	top: -4px;
-	right: 0;
+	// revert [data-text-variant^="text-sm"]
+	& > :first-child {
+		color: var(--popover_fg_color);
+	}
 }