From 4edb3dca49ac8f07d1c91567f4a3dd5b92d24997 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Thu, 24 Apr 2025 09:31:55 -0500
Subject: [PATCH] Refine app switcher layout/tooltip behavior

---
 src/app/AppViewSwitcher.tsx       | 5 ++---
 src/components/SwitcherItem.tsx   | 5 ++++-
 src/components/icons/IconFeed.tsx | 3 +++
 src/components/icons/IconGrid.tsx | 3 +++
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/app/AppViewSwitcher.tsx b/src/app/AppViewSwitcher.tsx
index 84833d99..2cfd575d 100644
--- a/src/app/AppViewSwitcher.tsx
+++ b/src/app/AppViewSwitcher.tsx
@@ -33,7 +33,7 @@ export default function AppViewSwitcher({
 
   const renderItemFeed =
     <SwitcherItem
-      icon={<IconFeed includeTitle={false} />}
+      icon={<IconFeed includeTitle={false} className="translate-x-[-0.5px]" />}
       href={PATH_FEED_INFERRED}
       active={currentSelection === 'feed'}
       tooltip={!isAdminMenuOpen
@@ -47,7 +47,7 @@ export default function AppViewSwitcher({
 
   const renderItemGrid =
     <SwitcherItem
-      icon={<IconGrid includeTitle={false} />}
+      icon={<IconGrid includeTitle={false} className="translate-x-[-0.5px]" />}
       href={PATH_GRID_INFERRED}
       active={currentSelection === 'grid'}
       tooltip={!isAdminMenuOpen
@@ -91,7 +91,6 @@ export default function AppViewSwitcher({
       </Switcher>
       <Switcher type="borderless">
         <SwitcherItem
-          title="Search"
           icon={<IconSearch includeTitle={false} />}
           onClick={() => setIsCommandKOpen?.(true)}
           tooltip={!isAdminMenuOpen
diff --git a/src/components/SwitcherItem.tsx b/src/components/SwitcherItem.tsx
index 702a4c51..a678eefa 100644
--- a/src/components/SwitcherItem.tsx
+++ b/src/components/SwitcherItem.tsx
@@ -5,6 +5,8 @@ import Spinner from './Spinner';
 import LinkWithIconLoader from './LinkWithIconLoader';
 import Tooltip from './Tooltip';
 
+const WIDTH_CLASS = 'w-[42px]';
+
 export default function SwitcherItem({
   icon,
   title,
@@ -30,7 +32,7 @@ export default function SwitcherItem({
 }) {
   const className = clsx(
     'flex items-center justify-center',
-    'w-[42px] h-[28px]',
+    `${WIDTH_CLASS} h-[28px]`,
     isInteractive && 'cursor-pointer',
     isInteractive && 'hover:bg-gray-100/60 active:bg-gray-100',
     isInteractive && 'dark:hover:bg-gray-900/75 dark:active:bg-gray-900',
@@ -69,6 +71,7 @@ export default function SwitcherItem({
     tooltip
       ? <Tooltip
         {...tooltip}
+        classNameTrigger={WIDTH_CLASS}
         delayDuration={500}
       >
         {content}
diff --git a/src/components/icons/IconFeed.tsx b/src/components/icons/IconFeed.tsx
index 2d5604c2..dd6955bb 100644
--- a/src/components/icons/IconFeed.tsx
+++ b/src/components/icons/IconFeed.tsx
@@ -6,9 +6,11 @@ const INTRINSIC_HEIGHT = 24;
 export default function IconFeed({
   width = INTRINSIC_WIDTH,
   includeTitle = true,
+  className,
 }: {
   width?: number
   includeTitle?: boolean
+  className?: string
 }) {
   return (
     <svg
@@ -18,6 +20,7 @@ export default function IconFeed({
       fill="none"
       stroke="currentColor"
       xmlns="http://www.w3.org/2000/svg"
+      className={className}
     >
       {includeTitle && <title>Full Frame</title>}
       <rect x="5.625" y="6.625" width="16.75" height="10.75" rx="1" strokeWidth="1.25"/>
diff --git a/src/components/icons/IconGrid.tsx b/src/components/icons/IconGrid.tsx
index df2d355a..3a0c50ba 100644
--- a/src/components/icons/IconGrid.tsx
+++ b/src/components/icons/IconGrid.tsx
@@ -6,9 +6,11 @@ const INTRINSIC_HEIGHT = 24;
 export default function IconGrid({
   width = INTRINSIC_WIDTH,
   includeTitle = true,
+  className,
 }: {
   width?: number
   includeTitle?: boolean
+  className?: string
 }) {
   return (
     <svg
@@ -18,6 +20,7 @@ export default function IconGrid({
       fill="none"
       stroke="currentColor"
       xmlns="http://www.w3.org/2000/svg"
+      className={className}
     >
       {includeTitle && <title>Grid</title>}
       <rect x="5.625" y="6.625" width="16.75" height="10.75" rx="1" strokeWidth="1.25"/>