From d4afa43abf36cc60c8ef152a4b6b667ef46ae923 Mon Sep 17 00:00:00 2001
From: Richard R <me@richardr.dev>
Date: Mon, 1 Jun 2026 11:58:30 -0600
Subject: [PATCH] refactor(ui): unify button usage in settings, admin, and
 doclist components

Replace native button elements with shared Button, ChoiceTile, and IconButton
components for consistent UI behavior and styling. Update classNames and
props to match new component APIs. Adjust FinderSidebar to use utility
function for conditional class merging.
---
 src/components/SettingsModal.tsx                | 10 +++++-----
 src/components/admin/AdminFeaturesPanel.tsx     |  8 +++++---
 src/components/doclist/DocumentList.tsx         |  9 +++++----
 src/components/doclist/window/FinderSidebar.tsx |  4 ++--
 4 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/components/SettingsModal.tsx b/src/components/SettingsModal.tsx
index 7157f33..7d71964 100644
--- a/src/components/SettingsModal.tsx
+++ b/src/components/SettingsModal.tsx
@@ -1168,20 +1168,20 @@ export function SettingsModal({
 
                           {/* Export Data */}
                           {session?.user && (
-                            <button
+                            <ChoiceTile
                               onClick={() => {
                                 window.open('/api/user/export', '_blank');
                               }}
-                              className="w-full rounded-lg border border-line bg-background p-4 flex items-center gap-4 hover:bg-accent-wash transition-colors text-left group"
+                              className="w-full rounded-lg bg-background p-4 text-left hover:bg-accent-wash"
                             >
-                              <div className="flex-shrink-0 w-10 h-10 rounded-lg bg-surface-sunken flex items-center justify-center group-hover:bg-background transition-colors">
+                              <div className="flex-shrink-0 w-10 h-10 rounded-lg bg-surface-sunken flex items-center justify-center">
                                 <DownloadIcon className="w-5 h-5 text-accent" />
                               </div>
                               <div className="flex-1 min-w-0">
                                 <p className="text-sm font-medium text-foreground">Export My Data</p>
                                 <p className="text-xs text-soft">Download all your data as a ZIP file</p>
                               </div>
-                            </button>
+                            </ChoiceTile>
                           )}
 
                           {/* Actions */}
@@ -1438,7 +1438,7 @@ function SettingsChangelogPanel({
               <button
                 type="button"
                 onClick={() => setExpanded((prev) => ({ ...prev, [entry.tag_name]: !isExpanded }))}
-                className="w-full text-left py-2 flex items-center gap-2 hover:bg-surface transition duration-base ease-standard transform"
+                className="w-full rounded-md border border-transparent px-2 py-2 text-left flex items-center gap-2 transition duration-base ease-standard hover:border-accent-line hover:bg-accent-wash"
               >
                 <ChevronRightIcon
                   className={`w-3.5 h-3.5 shrink-0 text-soft transition-transform ${
diff --git a/src/components/admin/AdminFeaturesPanel.tsx b/src/components/admin/AdminFeaturesPanel.tsx
index cb41ab2..af55edc 100644
--- a/src/components/admin/AdminFeaturesPanel.tsx
+++ b/src/components/admin/AdminFeaturesPanel.tsx
@@ -656,14 +656,16 @@ function SourceBadge({
   return (
     <div className="flex items-center gap-1.5">
       {canReset && !dirty && (
-        <button
+        <Button
           type="button"
+          variant="ghost"
+          size="xs"
           onClick={onReset}
           disabled={saving}
-          className="text-[11px] font-medium text-muted hover:text-accent transition-colors disabled:opacity-50"
+          className="h-auto px-1 py-0 text-[11px] font-medium text-muted hover:text-accent"
         >
           Reset
-        </button>
+        </Button>
       )}
       {dirty ? (
         <Badge tone="accent">Modified</Badge>
diff --git a/src/components/doclist/DocumentList.tsx b/src/components/doclist/DocumentList.tsx
index 3b96fb1..b854554 100644
--- a/src/components/doclist/DocumentList.tsx
+++ b/src/components/doclist/DocumentList.tsx
@@ -22,6 +22,7 @@ import { ConfirmDialog } from '@/components/ConfirmDialog';
 import { CreateFolderDialog } from '@/components/doclist/CreateFolderDialog';
 import { DocumentListSkeleton } from '@/components/doclist/DocumentListSkeleton';
 import { DocumentUploader, type UploadBatchState } from '@/components/documents/DocumentUploader';
+import { IconButton } from '@/components/ui';
 import { DocumentDndProvider } from './dnd/DocumentDndProvider';
 import {
   DocumentSelectionProvider,
@@ -664,16 +665,16 @@ function DocumentListInner({ brand, appActions }: DocumentListInnerProps) {
             <p className="text-foreground">
               Drag files onto each other to make folders. Drop into the sidebar to move.
             </p>
-            <button
-              type="button"
+            <IconButton
               onClick={() => setShowHint(false)}
-              className="h-6 w-6 inline-flex items-center justify-center text-soft hover:text-accent hover:bg-surface rounded transition duration-base ease-standard"
+              size="xs"
+              className="h-6 w-6"
               aria-label="Dismiss hint"
             >
               <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
               </svg>
-            </button>
+            </IconButton>
           </div>
         </div>
       )}
diff --git a/src/components/doclist/window/FinderSidebar.tsx b/src/components/doclist/window/FinderSidebar.tsx
index b534af0..573dcb0 100644
--- a/src/components/doclist/window/FinderSidebar.tsx
+++ b/src/components/doclist/window/FinderSidebar.tsx
@@ -7,7 +7,7 @@ import type { Folder, SidebarFilter } from '@/types/documents';
 import { PDFIcon, EPUBIcon, FileIcon, DotsHorizontalIcon } from '@/components/icons/Icons';
 import { FolderIcon, HomeIcon, ClockIcon, FolderPlusIcon } from './finderIcons';
 import { DND_DOCUMENT, type DocumentDragItem } from '../dnd/dndTypes';
-import { IconButton, MenuItemClass, Sidebar as SidebarShell, SidebarNav, SidebarNavGroup, SidebarNavItem, menuPanelClass } from '@/components/ui';
+import { IconButton, MenuItemClass, Sidebar as SidebarShell, SidebarNav, SidebarNavGroup, SidebarNavItem, cn, menuPanelClass } from '@/components/ui';
 
 interface FinderSidebarProps {
   filter: SidebarFilter;
@@ -248,7 +248,7 @@ export function FinderSidebar({
                             onRowAction?.();
                           }}
                           disabled={disabled}
-                          className={disabled ? 'flex w-full cursor-not-allowed items-center gap-2 rounded-md px-2 py-2 text-xs text-faint' : MenuItemClass(active)}
+                          className={cn(MenuItemClass(active), disabled && 'cursor-not-allowed text-faint')}
                         >
                           <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />