Improve hover / active / current states in sidebar #1105

Author: joepio

browser/data-browser/src/components/SideBar/SideBarDrive.tsx

@@ -73,6 +73,7 @@ export function SideBarDrive({
         <TitleButton
           resource={drive}
           clean
+          current={drive === currentSubject}
           title={`Your current baseURL is ${drive}`}
           data-test='sidebar-drive-open'
           onClick={() => {
@@ -161,9 +162,24 @@ const DriveTitle = styled.h2`
   flex: 1;
 `;
 
-const TitleButton = styled(Button)`
+const TitleButton = styled(Button)<{ current?: boolean }>`
   text-align: left;
   flex: 1;
+  padding: 0.5rem 1rem;
+  border-radius: ${props => props.theme.radius};
+
+  ${({ current, theme }) =>
+    current &&
+    `
+    color: ${theme.colors.main};
+  `}
+
+  &:hover {
+    background-color: ${props => props.theme.colors.bg1};
+  }
+  &:active {
+    background-color: ${props => props.theme.colors.bg2};
+  }
 `;
 
 const SideBarErr = styled(ErrorLook)`

browser/data-browser/src/components/SideBar/SideBarItem.ts

@@ -2,6 +2,7 @@ import { styled } from 'styled-components';
 
 export interface SideBarItemProps {
   disabled?: boolean;
+  current?: boolean;
 }
 
 /** SideBarItem should probably be wrapped in an AtomicLink for optimal behavior */
@@ -20,12 +21,18 @@ export const SideBarItem = styled('span')<SideBarItemProps>`
   &:hover,
   &:focus {
     background-color: ${p => p.theme.colors.bg1};
-    color: ${p => (p.disabled ? p.theme.colors.main : p.theme.colors.text)};
+    // color: ${p => (p.disabled ? p.theme.colors.main : p.theme.colors.text)};
   }
   &:active {
     background-color: ${p => p.theme.colors.bg2};
   }
 
+  ${props =>
+    props.current &&
+    `
+    color: ${props.theme.colors.main};
+  `}
+
   svg {
     font-size: 0.8rem;
   }

browser/data-browser/src/components/SideBar/SideBarMenuItem.tsx

@@ -1,6 +1,7 @@
 import { styled } from 'styled-components';
 import { AtomicLink, AtomicLinkProps } from '../AtomicLink';
 import { SideBarItem } from './SideBarItem';
+import { useLocation } from '@tanstack/react-router';
 
 export interface SideBarMenuItemProps extends AtomicLinkProps {
   label: string;
@@ -20,9 +21,18 @@ export function SideBarMenuItem({
   subject,
   onClick,
 }: SideBarMenuItemProps) {
+  const { pathname } = useLocation();
+  const targetPath = path || href || subject;
+  const current: boolean = pathname === targetPath;
+
   return (
     <AtomicLink href={href} subject={subject} path={path} clean>
-      <SideBarItem key={label} title={helper} onClick={onClick}>
+      <SideBarItem
+        key={label}
+        title={helper}
+        onClick={onClick}
+        current={current}
+      >
         {icon && <SideBarIcon>{icon}</SideBarIcon>}
         {label}
       </SideBarItem>

browser/data-browser/src/helpers/formatCurrency.ts

@@ -0,0 +1,8 @@
+/**
+ * Formats a number as a currency string
+ * @param value - The number to format
+ * @param currency - The currency code (default: 'USD')
+ * @param locale - The locale to use for formatting (default: 'en-US')
+ * @returns A formatted currency string
+ */
+export