fix(schema-hints): Add interactivity to UI (#87227)

Shruthi made some good quality of life improvement suggestions in [this
PR](#87027 (review)).
I've addressed them both in this pr:
- showing `cursor: pointer` on the entire row since it is clickable
- highlighting rows on hover + on click
- moving selected hints on the top of the list

Here's what it looks like:


https://github.com/user-attachments/assets/33fed802-df3d-409a-b467-e3e938dda455

(idk why the pointer cursor doesn't show when you're screen recording) 

Contributes to #86484

Author: nikkikapadia

static/app/views/explore/components/schemaHintsDrawer.tsx

@@ -29,14 +29,28 @@ function SchemaHintsDrawer({hints}: SchemaHintsDrawerProps) {
     return filterQuery.getFilterKeys();
   }, [exploreQuery]);
 
-  const sortedHints = useMemo(() => {
-    return hints.toSorted((a, b) => {
-      // may need to fix this if we don't want to ignore the prefix
-      const aWithoutPrefix = prettifyTagKey(a.key).replace(/^_/, '');
-      const bWithoutPrefix = prettifyTagKey(b.key).replace(/^_/, '');
-      return aWithoutPrefix.localeCompare(bWithoutPrefix);
+  const sortedSelectedHints = useMemo(() => {
+    const sortedKeys = selectedFilterKeys.toSorted((a, b) => {
+      return prettifyTagKey(a).localeCompare(prettifyTagKey(b));
     });
-  }, [hints]);
+    return sortedKeys
+      .map(key => hints.find(hint => hint.key === key))
+      .filter(tag => !!tag);
+  }, [hints, selectedFilterKeys]);
+
+  const sortedHints = useMemo(() => {
+    return [
+      ...new Set([
+        ...sortedSelectedHints,
+        ...hints.toSorted((a, b) => {
+          // may need to fix this if we don't want to ignore the prefix
+          const aWithoutPrefix = prettifyTagKey(a.key).replace(/^_/, '');
+          const bWithoutPrefix = prettifyTagKey(b.key).replace(/^_/, '');
+          return aWithoutPrefix.localeCompare(bWithoutPrefix);
+        }),
+      ]),
+    ];
+  }, [hints, sortedSelectedHints]);
 
   const handleCheckboxChange = useCallback(
     (hint: Tag) => {
@@ -114,7 +128,8 @@ const CheckboxLabelContainer = styled('div')`
   justify-content: space-between;
   width: 100%;
   gap: ${space(1)};
-  padding-right: ${space(0.5)};
+  cursor: pointer;
+  padding-right: ${space(0.25)};
 `;
 
 const CheckboxLabel = styled('span')`
@@ -129,13 +144,21 @@ const StyledMultipleCheckbox = styled(MultipleCheckbox)`
 
 const StyledMultipleCheckboxItem = styled(MultipleCheckbox.Item)`
   width: 100%;
-  padding: ${space(1)} 0;
+  padding: ${space(1)} ${space(0.5)};
   border-top: 1px solid ${p => p.theme.border};
 
   @media (min-width: ${p => p.theme.breakpoints.small}) {
     width: 100%;
   }
 
+  &:hover {
+    background-color: ${p => p.theme.backgroundSecondary};
+  }
+
+  &:active {
+    background-color: ${p => p.theme.gray100};
+  }
+
   &:last-child {
     border-bottom: 1px solid ${p => p.theme.border};
   }