feat: quick-jump to icon search and hover effects for navigation (#215)

iconoir.com/components/CurrentVersion.tsx

@@ -26,4 +26,9 @@ const Container = styled(Text13)`
   border-radius: 200px;
   display: block;
   text-decoration: none !important;
+  transition: color 0.1s linear, background 0.1s linear;
+  &:hover {
+    background: var(--black);
+    color: var(--white);
+  }
 `;

iconoir.com/components/FiltersEditor.tsx

@@ -10,6 +10,21 @@ export interface FiltersEditorProps {
 export function FiltersEditor({ filters, onChange }: FiltersEditorProps) {
   const [, startTransition] = (React as any).useTransition();
   const [search, setSearch] = React.useState(filters.search);
+
+  // Keep track if the user hits tab before scrolling, so we can scroll the search
+  // field to the top of the page automatically.
+  const didScrollRef = React.useRef(false);
+  React.useEffect(() => {
+    const scrollEvent = () => {
+      didScrollRef.current = true;
+      window.removeEventListener('scroll', scrollEvent);
+    };
+    window.addEventListener('scroll', scrollEvent);
+    return () => {
+      window.removeEventListener('scroll', scrollEvent);
+    };
+  }, []);
+
   React.useEffect(() => {
     setSearch(filters.search);
   }, [filters]);
@@ -29,6 +44,15 @@ export function FiltersEditor({ filters, onChange }: FiltersEditorProps) {
       value={search}
       type={'search'}
       autoCapitalize={'none'}
+      tabIndex={1}
+      onFocus={(e) => {
+        if (!didScrollRef.current) {
+          e.target.scrollIntoView({
+            block: 'start',
+            behavior: 'auto',
+          });
+        }
+      }}
       onChange={(e) => {
         const value = e.target.value;
         setSearch(value);

iconoir.com/components/Icon.tsx

@@ -104,7 +104,9 @@ export function Icon({ iconWidth, icon }: IconProps) {
           </HoverContainer>
         ) : null}
       </BorderContainer>
-      <Subtitle>{icon.filename}</Subtitle>
+      <Subtitle iconWidth={iconWidth} title={icon.filename}>
+        {icon.filename}
+      </Subtitle>
     </div>
   );
 }
@@ -166,10 +168,14 @@ const IconContainer = styled.div`
   align-items: center;
   justify-content: center;
 `;
-const Subtitle = styled.div`
+const Subtitle = styled.div<{ iconWidth: number }>`
   font-size: 11px;
   font-weight: 500;
   line-height: 14.74px;
   color: var(--black-40);
   text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: ${(props) => props.iconWidth}px;
 `;

iconoir.com/components/NavigationItem.tsx

@@ -42,6 +42,7 @@ export const NavigationItemContainer = styled(Text15)<{ isActive?: boolean }>`
   box-sizing: border-box;
   position: relative;
   z-index: 2;
+  transition: background 0.1s linear;
   &:not(:last-child) {
     border-bottom: solid 1px var(--light-gray);
   }
@@ -53,19 +54,25 @@ export const NavigationItemContainer = styled(Text15)<{ isActive?: boolean }>`
     color: var(--black-60);
     width: auto;
     border-bottom: none !important;
+    &::before {
+      position: absolute;
+      z-index: -1;
+      content: '';
+      display: block;
+      top: -18px;
+      bottom: -18px;
+      left: -24px;
+      right: -24px;
+      transition: background 0.1s linear;
+    }
     ${(props) => (props.isActive ? '&' : '&.noop')} {
       color: var(--white);
       &::before {
-        position: absolute;
-        z-index: -1;
-        content: '';
-        display: block;
-        top: -18px;
-        bottom: -18px;
-        left: -24px;
-        right: -24px;
         background: var(--black);
       }
     }
+    &:hover::before {
+      background: var(--light-gray);
+    }
   }
 `;