fix: scroll highlighted tag into view (#25)

* fix(tags): scroll highlighted tag into view

* chore: apply nit suggestions

---------

Co-authored-by: Andy Young <andyluyoung@gmail.com>

popup/components/TagOption.tsx

@@ -66,6 +66,7 @@ export const TagOption = ({ entryId, tag, focused, onHover, onClose }: Props) =>
     <Group
       ref={groupRef}
       align="center"
+      className="tag-option"
       spacing="xs"
       px={rem(4)}
       py={rem(8)}

popup/components/TagSelect.tsx

@@ -11,7 +11,7 @@ import {
 import { useDisclosure, useHotkeys } from "@mantine/hooks";
 import { IconTags } from "@tabler/icons-react";
 import { useAtomValue } from "jotai";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 
 import { allTagsAtom } from "~popup/states/atoms";
 import { commonActionIconSx, defaultBorderColor, lightOrDark } from "~utils/sx";
@@ -32,6 +32,8 @@ export const TagSelect = ({ entryId }: Props) => {
 
   const [focusedTagIndex, setFocusedTagIndex] = useState(0);
 
+  const scrollAreaRef = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     if (opened) {
       setTagSearch("");
@@ -67,6 +69,12 @@ export const TagSelect = ({ entryId }: Props) => {
     [],
   );
 
+  useEffect(() => {
+    scrollAreaRef.current
+      ?.querySelectorAll(".tag-option")
+      ?.[focusedTagIndex]?.scrollIntoView({ block: "nearest" });
+  }, [focusedTagIndex]);
+
   return (
     <Popover
       opened={opened}
@@ -108,7 +116,7 @@ export const TagSelect = ({ entryId }: Props) => {
         />
         <Divider sx={(theme) => ({ borderColor: defaultBorderColor(theme) })} />
         {/* https://github.com/creativetimofficial/material-tailwind/issues/528 */}
-        <ScrollArea.Autosize placeholder={undefined} mah={200} p={rem(4)}>
+        <ScrollArea.Autosize placeholder={undefined} mah={200} p={rem(4)} ref={scrollAreaRef}>
           <Stack spacing={0}>
             {matchedTags.map((tag, i) => (
               <TagOption