From 13e0647b472ab359f3d08a158c7543baec25fd84 Mon Sep 17 00:00:00 2001
From: Richard R <me@richardr.dev>
Date: Wed, 27 May 2026 21:10:01 -0600
Subject: [PATCH] refactor(doclist): convert icon size controls to dropdown for
 icons view toggle

Replace inline icon size buttons with a dropdown menu that appears when
the icons view toggle is active. This change improves toolbar clarity by
grouping related controls and enhances accessibility with better focus
handling. The update also streamlines the button structure for view mode
selection.
---
 .../doclist/window/FinderToolbar.tsx          | 86 ++++++++++---------
 1 file changed, 47 insertions(+), 39 deletions(-)

diff --git a/src/components/doclist/window/FinderToolbar.tsx b/src/components/doclist/window/FinderToolbar.tsx
index e98284c..053402e 100644
--- a/src/components/doclist/window/FinderToolbar.tsx
+++ b/src/components/doclist/window/FinderToolbar.tsx
@@ -118,52 +118,60 @@ export function FinderToolbar({
           {VIEW_BUTTONS.map(({ value, label, Icon }) => {
             const disabled = value === 'columns' && isNarrow;
             const active = viewMode === value;
+            const isIconsToggle = value === 'icons';
             return (
-              <button
+              <div
                 key={value}
-                type="button"
-                disabled={disabled}
-                onClick={() => onViewModeChange(value)}
-                aria-pressed={active}
-                aria-label={`${label} view`}
-                title={disabled ? `${label} (desktop only)` : `${label} view`}
-                className={
-                  PILL_SEGMENT +
-                  ' h-6 w-7 ' +
-                  (active ? PILL_SEGMENT_ACTIVE : PILL_SEGMENT_INACTIVE) +
-                  (disabled ? ' opacity-40 cursor-not-allowed hover:bg-transparent hover:text-muted' : '')
-                }
+                className={isIconsToggle ? 'relative group/icons inline-flex items-center' : 'inline-flex items-center'}
               >
-                <Icon className="w-4 h-4" />
-              </button>
+                <button
+                  type="button"
+                  disabled={disabled}
+                  onClick={() => onViewModeChange(value)}
+                  aria-pressed={active}
+                  aria-label={`${label} view`}
+                  title={disabled ? `${label} (desktop only)` : `${label} view`}
+                  className={
+                    PILL_SEGMENT +
+                    ' h-6 w-7 ' +
+                    (active ? PILL_SEGMENT_ACTIVE : PILL_SEGMENT_INACTIVE) +
+                    (disabled ? ' opacity-40 cursor-not-allowed hover:bg-transparent hover:text-muted' : '')
+                  }
+                >
+                  <Icon className="w-4 h-4" />
+                </button>
+                {isIconsToggle && viewMode === 'icons' && (
+                  <div
+                    className="absolute top-full left-1/2 z-30 -translate-x-1/2 pt-1 opacity-0 pointer-events-none transition-opacity duration-150 group-hover/icons:opacity-100 group-hover/icons:pointer-events-auto group-focus-within/icons:opacity-100 group-focus-within/icons:pointer-events-auto"
+                  >
+                    <div className={`${PILL} shadow-lg`}>
+                      {ICON_SIZES.map(({ value: sizeValue, label: sizeLabel }) => {
+                        const sizeActive = iconSize === sizeValue;
+                        return (
+                          <button
+                            key={sizeValue}
+                            type="button"
+                            onClick={() => onIconSizeChange(sizeValue)}
+                            aria-pressed={sizeActive}
+                            aria-label={`Icon size ${sizeLabel}`}
+                            className={
+                              PILL_SEGMENT +
+                              ' h-6 min-w-[26px] px-1.5 font-semibold tracking-wide ' +
+                              (sizeActive ? PILL_SEGMENT_ACTIVE : PILL_SEGMENT_INACTIVE)
+                            }
+                          >
+                            {sizeLabel}
+                          </button>
+                        );
+                      })}
+                    </div>
+                  </div>
+                )}
+              </div>
             );
           })}
         </div>
 
-        {viewMode === 'icons' && (
-          <div className={`${PILL} hidden sm:inline-flex`}>
-            {ICON_SIZES.map(({ value, label }) => {
-              const active = iconSize === value;
-              return (
-                <button
-                  key={value}
-                  type="button"
-                  onClick={() => onIconSizeChange(value)}
-                  aria-pressed={active}
-                  aria-label={`Icon size ${label}`}
-                  className={
-                    PILL_SEGMENT +
-                    ' h-6 min-w-[26px] px-1.5 font-semibold tracking-wide ' +
-                    (active ? PILL_SEGMENT_ACTIVE : PILL_SEGMENT_INACTIVE)
-                  }
-                >
-                  {label}
-                </button>
-              );
-            })}
-          </div>
-        )}
-
         <div className="flex items-center gap-1 shrink-0">
           <button
             type="button"