@actuate-media/cms-admin 0.10.0 → 0.11.0

package/src/components/Breadcrumbs.tsx

@@ -61,29 +61,29 @@ export function Breadcrumbs({ currentPath, onNavigate }: BreadcrumbsProps) {
   return (
     <nav
       aria-label="Breadcrumb"
-      className="flex items-center gap-1 text-sm py-2.5 px-4 bg-white border-b border-gray-200 overflow-x-auto"
+      className="flex items-center gap-1 overflow-x-auto border-b border-gray-200 bg-white px-4 py-2.5 text-sm"
     >
       <button
         type="button"
         onClick={() => onNavigate('/')}
-        className="flex items-center gap-1 text-gray-500 hover:text-blue-600 transition-colors shrink-0"
+        className="flex shrink-0 items-center gap-1 text-gray-500 transition-colors hover:text-blue-600"
       >
-        <Home className="w-3.5 h-3.5" />
+        <Home className="h-3.5 w-3.5" />
         <span className="hidden sm:inline">Dashboard</span>
       </button>
 
       {crumbs.map((crumb, i) => {
         const isLast = i === crumbs.length - 1
         return (
-          <span key={crumb.path} className="flex items-center gap-1 shrink-0">
-            <ChevronRight className="w-3.5 h-3.5 text-gray-400" />
+          <span key={crumb.path} className="flex shrink-0 items-center gap-1">
+            <ChevronRight className="h-3.5 w-3.5 text-gray-400" />
             {isLast ? (
               <span className="font-medium text-gray-900">{crumb.label}</span>
             ) : (
               <button
                 type="button"
                 onClick={() => onNavigate(crumb.path)}
-                className="text-gray-500 hover:text-blue-600 transition-colors"
+                className="text-gray-500 transition-colors hover:text-blue-600"
               >
                 {crumb.label}
               </button>

package/src/components/CommandPalette.tsx

@@ -181,7 +181,7 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
 
   return (
     <div
-      className="fixed inset-0 z-50 bg-black/50 flex items-start justify-center pt-[20vh] px-4"
+      className="fixed inset-0 z-50 flex items-start justify-center bg-black/50 px-4 pt-[20vh]"
       onClick={() => {
         onOpenChange(false)
         setSearch('')
@@ -195,7 +195,7 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
         onClick={(e) => e.stopPropagation()}
       >
         <Command
-          className="bg-white rounded-lg shadow-2xl w-full overflow-hidden"
+          className="w-full overflow-hidden rounded-lg bg-white shadow-2xl"
           onKeyDown={(e) => {
             if (e.key === 'Escape') {
               onOpenChange(false)
@@ -205,17 +205,17 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
           shouldFilter={!hasQuery}
         >
           <div className="flex items-center border-b border-gray-200 px-4">
-            <Search className="w-5 h-5 text-gray-400 mr-3 shrink-0" />
+            <Search className="mr-3 h-5 w-5 shrink-0 text-gray-400" />
             <Command.Input
               value={search}
               onValueChange={setSearch}
               placeholder="Search or jump to..."
-              className="w-full py-4 text-base bg-transparent focus:outline-none placeholder:text-gray-400"
+              className="w-full bg-transparent py-4 text-base placeholder:text-gray-400 focus:outline-none"
             />
             {loading && (
-              <div className="w-4 h-4 border-2 border-gray-300 border-t-gray-600 rounded-full animate-spin shrink-0 mr-2" />
+              <div className="mr-2 h-4 w-4 shrink-0 animate-spin rounded-full border-2 border-gray-300 border-t-gray-600" />
             )}
-            <kbd className="hidden sm:inline-block px-2 py-1 text-xs font-mono bg-gray-100 text-gray-600 rounded shrink-0">
+            <kbd className="hidden shrink-0 rounded bg-gray-100 px-2 py-1 font-mono text-xs text-gray-600 sm:inline-block">
               ESC
             </kbd>
           </div>
@@ -227,15 +227,15 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
 
             {!hasQuery && recentItems.length > 0 && (
               <Command.Group heading="Recent" className="px-2 py-2">
-                <div className="text-xs font-medium text-gray-500 mb-2">RECENT</div>
+                <div className="mb-2 text-xs font-medium text-gray-500">RECENT</div>
                 {recentItems.map((item) => (
                   <Command.Item
                     key={`recent-${item.id}`}
                     value={`recent ${item.label}`}
                     onSelect={() => handleSelect(item.path, item)}
-                    className="flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer hover:bg-gray-100 data-[selected=true]:bg-gray-100"
+                    className="flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 hover:bg-gray-100 data-[selected=true]:bg-gray-100"
                   >
-                    <Clock className="w-4 h-4 text-gray-400" />
+                    <Clock className="h-4 w-4 text-gray-400" />
                     <span>{item.label}</span>
                     <span className="ml-auto text-xs text-gray-400 capitalize">{item.type}</span>
                   </Command.Item>
@@ -245,7 +245,7 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
 
             {hasQuery && documents.length > 0 && (
               <Command.Group heading="Documents" className="px-2 py-2">
-                <div className="text-xs font-medium text-gray-500 mb-2">DOCUMENTS</div>
+                <div className="mb-2 text-xs font-medium text-gray-500">DOCUMENTS</div>
                 {documents.map((doc) => (
                   <Command.Item
                     key={`doc-${doc.id}`}
@@ -258,10 +258,10 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
                         type: 'document',
                       })
                     }
-                    className="flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer hover:bg-gray-100 data-[selected=true]:bg-gray-100"
+                    className="flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 hover:bg-gray-100 data-[selected=true]:bg-gray-100"
                   >
-                    <FileText className="w-4 h-4 text-gray-500" />
-                    <div className="flex flex-col min-w-0">
+                    <FileText className="h-4 w-4 text-gray-500" />
+                    <div className="flex min-w-0 flex-col">
                       <span className="truncate">{doc.title ?? doc.slug ?? doc.id}</span>
                       <span className="text-xs text-gray-400">
                         {doc.collection} &middot; {doc.status}
@@ -273,8 +273,8 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
             )}
 
             {hasQuery && media.length > 0 && (
-              <Command.Group heading="Media" className="px-2 py-2 mt-1">
-                <div className="text-xs font-medium text-gray-500 mb-2">MEDIA</div>
+              <Command.Group heading="Media" className="mt-1 px-2 py-2">
+                <div className="mb-2 text-xs font-medium text-gray-500">MEDIA</div>
                 {media.map((m) => (
                   <Command.Item
                     key={`media-${m.id}`}
@@ -287,10 +287,10 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
                         type: 'media',
                       })
                     }
-                    className="flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer hover:bg-gray-100 data-[selected=true]:bg-gray-100"
+                    className="flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 hover:bg-gray-100 data-[selected=true]:bg-gray-100"
                   >
-                    <Image className="w-4 h-4 text-gray-500" />
-                    <div className="flex flex-col min-w-0">
+                    <Image className="h-4 w-4 text-gray-500" />
+                    <div className="flex min-w-0 flex-col">
                       <span className="truncate">{m.filename}</span>
                       <span className="text-xs text-gray-400">{m.mimeType}</span>
                     </div>
@@ -300,8 +300,8 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
             )}
 
             {hasQuery && users.length > 0 && (
-              <Command.Group heading="Users" className="px-2 py-2 mt-1">
-                <div className="text-xs font-medium text-gray-500 mb-2">USERS</div>
+              <Command.Group heading="Users" className="mt-1 px-2 py-2">
+                <div className="mb-2 text-xs font-medium text-gray-500">USERS</div>
                 {users.map((u) => (
                   <Command.Item
                     key={`user-${u.id}`}
@@ -314,10 +314,10 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
                         type: 'user',
                       })
                     }
-                    className="flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer hover:bg-gray-100 data-[selected=true]:bg-gray-100"
+                    className="flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 hover:bg-gray-100 data-[selected=true]:bg-gray-100"
                   >
-                    <Users className="w-4 h-4 text-gray-500" />
-                    <div className="flex flex-col min-w-0">
+                    <Users className="h-4 w-4 text-gray-500" />
+                    <div className="flex min-w-0 flex-col">
                       <span className="truncate">{u.name}</span>
                       <span className="text-xs text-gray-400">
                         {u.email} &middot; {u.role}
@@ -330,7 +330,7 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
 
             {(!hasQuery || !hasResults) && (
               <Command.Group heading="Navigation" className="px-2 py-2">
-                <div className="text-xs font-medium text-gray-500 mb-2">NAVIGATION</div>
+                <div className="mb-2 text-xs font-medium text-gray-500">NAVIGATION</div>
                 {navigationCommands.map((cmd) => {
                   const Icon = cmd.icon
                   return (
@@ -338,9 +338,9 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
                       key={cmd.id}
                       value={cmd.label}
                       onSelect={() => handleSelect(cmd.action)}
-                      className="flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer hover:bg-gray-100 data-[selected=true]:bg-gray-100"
+                      className="flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 hover:bg-gray-100 data-[selected=true]:bg-gray-100"
                     >
-                      <Icon className="w-4 h-4 text-gray-500" />
+                      <Icon className="h-4 w-4 text-gray-500" />
                       <span>{cmd.label}</span>
                     </Command.Item>
                   )
@@ -348,8 +348,8 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
               </Command.Group>
             )}
 
-            <Command.Group heading="Actions" className="px-2 py-2 mt-2">
-              <div className="text-xs font-medium text-gray-500 mb-2">ACTIONS</div>
+            <Command.Group heading="Actions" className="mt-2 px-2 py-2">
+              <div className="mb-2 text-xs font-medium text-gray-500">ACTIONS</div>
               {staticActions.map((cmd) => {
                 const Icon = cmd.icon
                 return (
@@ -364,9 +364,9 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
                         type: 'action',
                       })
                     }
-                    className="flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer hover:bg-gray-100 data-[selected=true]:bg-gray-100"
+                    className="flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 hover:bg-gray-100 data-[selected=true]:bg-gray-100"
                   >
-                    <Icon className="w-4 h-4 text-gray-500" />
+                    <Icon className="h-4 w-4 text-gray-500" />
                     <span>{cmd.label}</span>
                   </Command.Item>
                 )
@@ -374,19 +374,19 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
             </Command.Group>
           </Command.List>
 
-          <div className="border-t border-gray-200 px-4 py-3 bg-gray-50 flex items-center justify-between text-xs text-gray-500">
+          <div className="flex items-center justify-between border-t border-gray-200 bg-gray-50 px-4 py-3 text-xs text-gray-500">
             <div className="flex items-center gap-4">
               <span className="flex items-center gap-1">
-                <kbd className="px-1.5 py-0.5 bg-white border border-gray-300 rounded text-[10px]">
+                <kbd className="rounded border border-gray-300 bg-white px-1.5 py-0.5 text-[10px]">
                   ↑
                 </kbd>
-                <kbd className="px-1.5 py-0.5 bg-white border border-gray-300 rounded text-[10px]">
+                <kbd className="rounded border border-gray-300 bg-white px-1.5 py-0.5 text-[10px]">
                   ↓
                 </kbd>
                 to navigate
               </span>
               <span className="flex items-center gap-1">
-                <kbd className="px-1.5 py-0.5 bg-white border border-gray-300 rounded text-[10px]">
+                <kbd className="rounded border border-gray-300 bg-white px-1.5 py-0.5 text-[10px]">
                   ↵
                 </kbd>
                 to select

package/src/components/ContentOverviewChart.tsx

@@ -20,7 +20,7 @@ export function ContentOverviewChart({ published, drafts, scheduled }: ContentOv
 
   if (total === 0) {
     return (
-      <div className="flex items-center justify-center h-full text-sm text-gray-400">
+      <div className="flex h-full items-center justify-center text-sm text-gray-400">
         No content yet
       </div>
     )
@@ -28,7 +28,7 @@ export function ContentOverviewChart({ published, drafts, scheduled }: ContentOv
 
   return (
     <div className="flex items-center gap-6">
-      <div className="w-36 h-36 shrink-0">
+      <div className="h-36 w-36 shrink-0">
         <ResponsiveContainer width="100%" height="100%">
           <PieChart>
             <Pie
@@ -54,7 +54,7 @@ export function ContentOverviewChart({ published, drafts, scheduled }: ContentOv
           return (
             <div key={entry.name} className="flex items-center gap-3">
               <span
-                className="w-2.5 h-2.5 rounded-full shrink-0"
+                className="h-2.5 w-2.5 shrink-0 rounded-full"
                 style={{ backgroundColor: COLORS[idx] }}
               />
               <div className="min-w-0">

package/src/components/ErrorBoundary.tsx

@@ -32,13 +32,13 @@ export class ErrorBoundary extends Component<Props, State> {
       return (
         <div className="flex min-h-[200px] items-center justify-center p-6">
           <div className="text-center">
-            <h2 className="text-lg font-medium text-foreground mb-2">Something went wrong</h2>
-            <p className="text-sm text-muted-foreground mb-4">
+            <h2 className="text-foreground mb-2 text-lg font-medium">Something went wrong</h2>
+            <p className="text-muted-foreground mb-4 text-sm">
               {this.state.error?.message ?? 'An unexpected error occurred'}
             </p>
             <button
               onClick={() => this.setState({ hasError: false, error: null })}
-              className="px-4 py-2 text-sm font-medium text-primary-foreground bg-primary rounded-md hover:bg-primary/90 transition-colors"
+              className="text-primary-foreground bg-primary hover:bg-primary/90 rounded-md px-4 py-2 text-sm font-medium transition-colors"
             >
               Try Again
             </button>

package/src/components/FocalPointPicker.tsx

@@ -28,12 +28,12 @@ export function FocalPointPicker({ imageUrl, focalX, focalY, onChange }: FocalPo
   return (
     <div className="space-y-2">
       <div className="flex items-center gap-2 text-sm font-medium text-[var(--foreground)]">
-        <Crosshair className="w-4 h-4" />
+        <Crosshair className="h-4 w-4" />
         Focal Point
       </div>
       <div
         ref={containerRef}
-        className="relative rounded-lg overflow-hidden border border-[var(--border)] cursor-crosshair select-none"
+        className="relative cursor-crosshair overflow-hidden rounded-lg border border-[var(--border)] select-none"
         style={{ maxHeight: '200px' }}
         onClick={handlePosition}
         onMouseDown={() => setDragging(true)}
@@ -46,11 +46,11 @@ export function FocalPointPicker({ imageUrl, focalX, focalY, onChange }: FocalPo
         <img
           src={imageUrl}
           alt="Focal point preview"
-          className="w-full h-full object-contain"
+          className="h-full w-full object-contain"
           draggable={false}
         />
         <div
-          className="absolute w-6 h-6 -ml-3 -mt-3 rounded-full border-2 border-white shadow-lg bg-blue-500/50 pointer-events-none"
+          className="pointer-events-none absolute -mt-3 -ml-3 h-6 w-6 rounded-full border-2 border-white bg-blue-500/50 shadow-lg"
           style={{ left: `${focalX * 100}%`, top: `${focalY * 100}%` }}
         >
           <div className="absolute inset-1 rounded-full bg-white" />

package/src/components/FolderTree.tsx

@@ -189,9 +189,9 @@ export function FolderTree({
     return (
       <div key={folder.id}>
         <div
-          className={`group flex items-center gap-1 px-2 py-1.5 rounded-md cursor-pointer text-sm transition-colors ${
+          className={`group flex cursor-pointer items-center gap-1 rounded-md px-2 py-1.5 text-sm transition-colors ${
             isActive
-              ? 'bg-blue-50 text-blue-700 font-medium'
+              ? 'bg-blue-50 font-medium text-blue-700'
               : isDragOver
                 ? 'bg-blue-100 ring-2 ring-blue-300'
                 : 'text-gray-700 hover:bg-gray-100'
@@ -208,23 +208,23 @@ export function FolderTree({
         >
           <button
             type="button"
-            className={`p-0.5 rounded hover:bg-gray-200 transition-colors ${hasChildren ? '' : 'invisible'}`}
+            className={`rounded p-0.5 transition-colors hover:bg-gray-200 ${hasChildren ? '' : 'invisible'}`}
             onClick={(e) => {
               e.stopPropagation()
               toggleExpand(folder.id)
             }}
           >
             {isExpanded ? (
-              <ChevronDown className="w-3.5 h-3.5" />
+              <ChevronDown className="h-3.5 w-3.5" />
             ) : (
-              <ChevronRight className="w-3.5 h-3.5" />
+              <ChevronRight className="h-3.5 w-3.5" />
             )}
           </button>
 
           {isExpanded ? (
-            <FolderOpen className="w-4 h-4 text-blue-500 shrink-0" />
+            <FolderOpen className="h-4 w-4 shrink-0 text-blue-500" />
           ) : (
-            <FolderIcon className="w-4 h-4 text-gray-400 shrink-0" />
+            <FolderIcon className="h-4 w-4 shrink-0 text-gray-400" />
           )}
 
           {editingId === folder.id ? (
@@ -238,11 +238,11 @@ export function FolderTree({
                 if (e.key === 'Enter') handleRename(folder.id)
                 if (e.key === 'Escape') setEditingId(null)
               }}
-              className="flex-1 min-w-0 text-sm border border-blue-300 rounded px-1 py-0 focus:outline-none focus:ring-1 focus:ring-blue-500"
+              className="min-w-0 flex-1 rounded border border-blue-300 px-1 py-0 text-sm focus:ring-1 focus:ring-blue-500 focus:outline-none"
               onClick={(e) => e.stopPropagation()}
             />
           ) : (
-            <span className="flex-1 min-w-0 truncate">{folder.name}</span>
+            <span className="min-w-0 flex-1 truncate">{folder.name}</span>
           )}
 
           {count !== undefined && !editingId && (
@@ -251,13 +251,13 @@ export function FolderTree({
 
           <button
             type="button"
-            className="p-0.5 rounded opacity-0 group-hover:opacity-100 hover:bg-gray-200 transition-all"
+            className="rounded p-0.5 opacity-0 transition-all group-hover:opacity-100 hover:bg-gray-200"
             onClick={(e) => {
               e.stopPropagation()
               setContextMenu({ id: folder.id, x: e.clientX, y: e.clientY })
             }}
           >
-            <MoreHorizontal className="w-3.5 h-3.5 text-gray-500" />
+            <MoreHorizontal className="h-3.5 w-3.5 text-gray-500" />
           </button>
         </div>
 
@@ -269,7 +269,7 @@ export function FolderTree({
                 className="flex items-center gap-1 px-2 py-1"
                 style={{ paddingLeft: `${24 + (depth + 1) * 16}px` }}
               >
-                <FolderIcon className="w-4 h-4 text-gray-400 shrink-0" />
+                <FolderIcon className="h-4 w-4 shrink-0 text-gray-400" />
                 <input
                   ref={newFolderInputRef}
                   type="text"
@@ -284,7 +284,7 @@ export function FolderTree({
                     }
                   }}
                   placeholder="Folder name..."
-                  className="flex-1 min-w-0 text-sm border border-blue-300 rounded px-1 py-0 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                  className="min-w-0 flex-1 rounded border border-blue-300 px-1 py-0 text-sm focus:ring-1 focus:ring-blue-500 focus:outline-none"
                 />
               </div>
             )}
@@ -297,19 +297,19 @@ export function FolderTree({
   if (loading) {
     return (
       <div className="flex items-center justify-center py-8">
-        <Loader2 className="w-5 h-5 animate-spin text-gray-400" />
+        <Loader2 className="h-5 w-5 animate-spin text-gray-400" />
       </div>
     )
   }
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex h-full flex-col">
       <div className="space-y-0.5 px-1 py-2">
         <button
           type="button"
-          className={`w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-sm transition-colors ${
+          className={`flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors ${
             isSelected({ type: 'smart', smart: 'all' })
-              ? 'bg-blue-50 text-blue-700 font-medium'
+              ? 'bg-blue-50 font-medium text-blue-700'
               : 'text-gray-700 hover:bg-gray-100'
           }`}
           onClick={() => onSelect({ type: 'smart', smart: 'all' })}
@@ -317,7 +317,7 @@ export function FolderTree({
           onDragLeave={handleDragLeave}
           onDrop={(e) => handleDrop(e, null)}
         >
-          <LayoutGrid className="w-4 h-4 shrink-0" />
+          <LayoutGrid className="h-4 w-4 shrink-0" />
           <span className="flex-1 text-left">All</span>
           {totalCount !== undefined && (
             <span className="text-xs text-gray-400 tabular-nums">{totalCount}</span>
@@ -326,14 +326,14 @@ export function FolderTree({
 
         <button
           type="button"
-          className={`w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-sm transition-colors ${
+          className={`flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors ${
             isSelected({ type: 'smart', smart: 'recent' })
-              ? 'bg-blue-50 text-blue-700 font-medium'
+              ? 'bg-blue-50 font-medium text-blue-700'
               : 'text-gray-700 hover:bg-gray-100'
           }`}
           onClick={() => onSelect({ type: 'smart', smart: 'recent' })}
         >
-          <Clock className="w-4 h-4 shrink-0" />
+          <Clock className="h-4 w-4 shrink-0" />
           <span className="flex-1 text-left">Recent</span>
           {recentCount !== undefined && (
             <span className="text-xs text-gray-400 tabular-nums">{recentCount}</span>
@@ -342,14 +342,14 @@ export function FolderTree({
 
         <button
           type="button"
-          className={`w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-sm transition-colors ${
+          className={`flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors ${
             isSelected({ type: 'smart', smart: 'uncategorized' })
-              ? 'bg-blue-50 text-blue-700 font-medium'
+              ? 'bg-blue-50 font-medium text-blue-700'
               : 'text-gray-700 hover:bg-gray-100'
           }`}
           onClick={() => onSelect({ type: 'smart', smart: 'uncategorized' })}
         >
-          <Inbox className="w-4 h-4 shrink-0" />
+          <Inbox className="h-4 w-4 shrink-0" />
           <span className="flex-1 text-left">Uncategorized</span>
           {uncategorizedCount !== undefined && (
             <span className="text-xs text-gray-400 tabular-nums">{uncategorizedCount}</span>
@@ -357,14 +357,14 @@ export function FolderTree({
         </button>
       </div>
 
-      <div className="border-t border-gray-200 my-1" />
+      <div className="my-1 border-t border-gray-200" />
 
-      <div className="flex-1 overflow-y-auto px-1 py-1 space-y-0.5">
+      <div className="flex-1 space-y-0.5 overflow-y-auto px-1 py-1">
         {folders.map((folder) => renderFolder(folder, 0))}
 
         {creatingIn === null && (
           <div className="flex items-center gap-1 px-2 py-1">
-            <FolderIcon className="w-4 h-4 text-gray-400 shrink-0 ml-5" />
+            <FolderIcon className="ml-5 h-4 w-4 shrink-0 text-gray-400" />
             <input
               ref={newFolderInputRef}
               type="text"
@@ -379,7 +379,7 @@ export function FolderTree({
                 }
               }}
               placeholder="Folder name..."
-              className="flex-1 min-w-0 text-sm border border-blue-300 rounded px-1 py-0 focus:outline-none focus:ring-1 focus:ring-blue-500"
+              className="min-w-0 flex-1 rounded border border-blue-300 px-1 py-0 text-sm focus:ring-1 focus:ring-blue-500 focus:outline-none"
             />
           </div>
         )}
@@ -392,21 +392,21 @@ export function FolderTree({
             setCreatingIn(null)
             setNewFolderName('')
           }}
-          className="w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-sm text-gray-600 hover:bg-gray-100 transition-colors"
+          className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm text-gray-600 transition-colors hover:bg-gray-100"
         >
-          <Plus className="w-4 h-4" />
+          <Plus className="h-4 w-4" />
           New Folder
         </button>
       </div>
 
       {contextMenu && (
         <div
-          className="fixed z-50 bg-white rounded-lg border border-gray-200 shadow-lg py-1 min-w-[160px]"
+          className="fixed z-50 min-w-[160px] rounded-lg border border-gray-200 bg-white py-1 shadow-lg"
           style={{ left: contextMenu.x, top: contextMenu.y }}
         >
           <button
             type="button"
-            className="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 transition-colors"
+            className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-gray-700 transition-colors hover:bg-gray-100"
             onClick={() => {
               const folder = findFolder(folders, contextMenu.id)
               if (folder) {
@@ -416,12 +416,12 @@ export function FolderTree({
               setContextMenu(null)
             }}
           >
-            <Pencil className="w-3.5 h-3.5" />
+            <Pencil className="h-3.5 w-3.5" />
             Rename
           </button>
           <button
             type="button"
-            className="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 transition-colors"
+            className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-gray-700 transition-colors hover:bg-gray-100"
             onClick={() => {
               setCreatingIn(contextMenu.id)
               setNewFolderName('')
@@ -429,19 +429,19 @@ export function FolderTree({
               setContextMenu(null)
             }}
           >
-            <FolderPlus className="w-3.5 h-3.5" />
+            <FolderPlus className="h-3.5 w-3.5" />
             New Subfolder
           </button>
-          <div className="border-t border-gray-200 my-1" />
+          <div className="my-1 border-t border-gray-200" />
           <button
             type="button"
-            className="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-red-600 hover:bg-red-50 transition-colors"
+            className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-red-600 transition-colors hover:bg-red-50"
             onClick={() => {
               handleDelete(contextMenu.id)
               setContextMenu(null)
             }}
           >
-            <Trash2 className="w-3.5 h-3.5" />
+            <Trash2 className="h-3.5 w-3.5" />
             Delete
           </button>
         </div>