@actuate-media/cms-admin 0.9.0 → 0.11.0

package/src/views/PostEditor.tsx

@@ -86,59 +86,59 @@ export function PostEditor({ id, onNavigate }: PostEditorProps) {
 
   if (!isNew && loading) {
     return (
-      <div className="h-full flex items-center justify-center">
-        <Loader2 className="w-6 h-6 animate-spin text-blue-600" />
+      <div className="flex h-full items-center justify-center">
+        <Loader2 className="h-6 w-6 animate-spin text-blue-600" />
       </div>
     )
   }
 
   return (
-    <div className="h-full flex flex-col bg-white">
+    <div className="flex h-full flex-col bg-white">
       {error && (
         <div className="mx-4 mt-3 flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
-          <AlertTriangle className="w-5 h-5 text-red-600 shrink-0" />
-          <span className="text-sm text-red-800 flex-1">{error}</span>
+          <AlertTriangle className="h-5 w-5 shrink-0 text-red-600" />
+          <span className="flex-1 text-sm text-red-800">{error}</span>
         </div>
       )}
 
-      <div className="border-b border-gray-200 px-3 sm:px-4 py-3">
+      <div className="border-b border-gray-200 px-3 py-3 sm:px-4">
         <div className="flex items-center justify-between">
           <button
             onClick={() => onNavigate?.('/posts')}
-            className="inline-flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900 transition-colors"
+            className="inline-flex items-center gap-2 text-sm text-gray-600 transition-colors hover:text-gray-900"
           >
-            <ArrowLeft className="w-4 h-4" />
+            <ArrowLeft className="h-4 w-4" />
             <span className="hidden sm:inline">Back to Posts</span>
             <span className="sm:hidden">Back</span>
           </button>
           <div className="flex items-center gap-2">
-            <button className="px-3 py-1.5 text-sm border border-gray-300 rounded-lg flex items-center gap-2 hover:bg-gray-50 transition-colors">
-              <Eye className="w-4 h-4" />
+            <button className="flex items-center gap-2 rounded-lg border border-gray-300 px-3 py-1.5 text-sm transition-colors hover:bg-gray-50">
+              <Eye className="h-4 w-4" />
               <span className="hidden sm:inline">Preview</span>
             </button>
           </div>
         </div>
       </div>
 
-      <div className="flex-1 overflow-hidden flex flex-col lg:flex-row">
+      <div className="flex flex-1 flex-col overflow-hidden lg:flex-row">
         <div className="flex-1 overflow-y-auto">
-          <div className="max-w-4xl mx-auto p-3 pr-6 sm:p-4 sm:pr-8">
+          <div className="mx-auto max-w-4xl p-3 pr-6 sm:p-4 sm:pr-8">
             <input
               type="text"
               value={title}
               onChange={(e) => setTitle(e.target.value)}
               placeholder="Post title"
-              className="w-full text-2xl sm:text-3xl font-bold mb-4 px-0 border-none focus:outline-none focus:ring-0 placeholder:text-gray-300"
+              className="mb-4 w-full border-none px-0 text-2xl font-bold placeholder:text-gray-300 focus:ring-0 focus:outline-none sm:text-3xl"
             />
 
             <div className="mb-4">
-              <label className="block text-xs font-medium text-gray-600 mb-1">URL Slug</label>
+              <label className="mb-1 block text-xs font-medium text-gray-600">URL Slug</label>
               <input
                 type="text"
                 value={slug}
                 onChange={(e) => setSlug(e.target.value)}
                 placeholder="url-slug"
-                className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                className="w-full rounded-lg border border-gray-300 px-3 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
               />
             </div>
 
@@ -148,35 +148,35 @@ export function PostEditor({ id, onNavigate }: PostEditorProps) {
           </div>
         </div>
 
-        <div className="hidden lg:block w-[30%] border-l border-gray-200 overflow-y-auto bg-gray-50">
-          <div className="p-4 space-y-4">
-            <div className="bg-white rounded-lg border border-gray-200 p-4">
-              <h3 className="font-semibold text-gray-900 mb-3 text-sm">Publish</h3>
+        <div className="hidden w-[30%] overflow-y-auto border-l border-gray-200 bg-gray-50 lg:block">
+          <div className="space-y-4 p-4">
+            <div className="rounded-lg border border-gray-200 bg-white p-4">
+              <h3 className="mb-3 text-sm font-semibold text-gray-900">Publish</h3>
               <div className="space-y-3">
                 <div>
-                  <label className="block text-xs font-medium text-gray-700 mb-1">Status</label>
+                  <label className="mb-1 block text-xs font-medium text-gray-700">Status</label>
                   <select
                     value={status}
                     onChange={(e) => setStatus(e.target.value as 'draft' | 'published')}
-                    className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    className="w-full rounded-lg border border-gray-300 px-3 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                   >
                     <option value="draft">Draft</option>
                     <option value="published">Published</option>
                   </select>
                 </div>
                 <div>
-                  <label className="block text-xs font-medium text-gray-700 mb-1">
+                  <label className="mb-1 block text-xs font-medium text-gray-700">
                     Publish Date
                   </label>
                   <input
                     type="datetime-local"
-                    className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    className="w-full rounded-lg border border-gray-300 px-3 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                   />
                 </div>
                 <button
                   onClick={savePost}
                   disabled={saving}
-                  className="w-full py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium disabled:opacity-50"
+                  className="w-full rounded-lg bg-blue-600 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
                 >
                   {saving ? 'Saving...' : 'Save Post'}
                 </button>
@@ -184,7 +184,7 @@ export function PostEditor({ id, onNavigate }: PostEditorProps) {
                   <button
                     onClick={publishPost}
                     disabled={saving}
-                    className="w-full py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-sm font-medium disabled:opacity-50"
+                    className="w-full rounded-lg bg-green-600 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700 disabled:opacity-50"
                   >
                     {saving ? 'Publishing...' : 'Publish'}
                   </button>
@@ -192,31 +192,31 @@ export function PostEditor({ id, onNavigate }: PostEditorProps) {
               </div>
             </div>
 
-            <div className="bg-white rounded-lg border border-gray-200 p-4">
-              <h3 className="font-semibold text-gray-900 mb-3 text-sm">Categories & Tags</h3>
+            <div className="rounded-lg border border-gray-200 bg-white p-4">
+              <h3 className="mb-3 text-sm font-semibold text-gray-900">Categories & Tags</h3>
               <div className="space-y-3">
                 <div>
-                  <label className="block text-xs font-medium text-gray-700 mb-1">Category</label>
-                  <select className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+                  <label className="mb-1 block text-xs font-medium text-gray-700">Category</label>
+                  <select className="w-full rounded-lg border border-gray-300 px-3 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none">
                     <option>Technology</option>
                     <option>Design</option>
                     <option>Business</option>
                   </select>
                 </div>
                 <div>
-                  <label className="block text-xs font-medium text-gray-700 mb-1">Tags</label>
+                  <label className="mb-1 block text-xs font-medium text-gray-700">Tags</label>
                   <input
                     type="text"
                     placeholder="Add tags..."
-                    className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    className="w-full rounded-lg border border-gray-300 px-3 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                   />
                 </div>
               </div>
             </div>
 
-            <div className="bg-white rounded-lg border border-gray-200 p-4">
-              <h3 className="font-semibold text-gray-900 mb-3 text-sm">Featured Image</h3>
-              <button className="w-full py-2 border-2 border-dashed border-gray-300 rounded-lg hover:border-gray-400 transition-colors text-sm text-gray-600">
+            <div className="rounded-lg border border-gray-200 bg-white p-4">
+              <h3 className="mb-3 text-sm font-semibold text-gray-900">Featured Image</h3>
+              <button className="w-full rounded-lg border-2 border-dashed border-gray-300 py-2 text-sm text-gray-600 transition-colors hover:border-gray-400">
                 Upload Image
               </button>
             </div>
@@ -231,12 +231,12 @@ export function PostEditor({ id, onNavigate }: PostEditorProps) {
           </div>
         </div>
 
-        <div className="lg:hidden border-t border-gray-200 p-3 bg-white">
+        <div className="border-t border-gray-200 bg-white p-3 lg:hidden">
           <div className="flex gap-2">
             <button
               onClick={savePost}
               disabled={saving}
-              className="flex-1 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium disabled:opacity-50"
+              className="flex-1 rounded-lg bg-blue-600 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
             >
               {saving ? 'Saving...' : 'Save Post'}
             </button>
@@ -244,7 +244,7 @@ export function PostEditor({ id, onNavigate }: PostEditorProps) {
               <button
                 onClick={publishPost}
                 disabled={saving}
-                className="flex-1 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-sm font-medium disabled:opacity-50"
+                className="flex-1 rounded-lg bg-green-600 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700 disabled:opacity-50"
               >
                 Publish
               </button>

package/src/views/Posts.tsx

@@ -98,17 +98,17 @@ export function Posts({ onNavigate }: PostsProps) {
       <button
         type="button"
         onClick={() => setSortConfig(toggleSort(sortConfig, sortKey))}
-        className="flex items-center gap-1 text-xs font-medium text-gray-700 hover:text-gray-900 transition-colors"
+        className="flex items-center gap-1 text-xs font-medium text-gray-700 transition-colors hover:text-gray-900"
       >
         {label}
         {active ? (
           sortConfig!.direction === 'asc' ? (
-            <ArrowUp className="w-3 h-3" />
+            <ArrowUp className="h-3 w-3" />
           ) : (
-            <ArrowDown className="w-3 h-3" />
+            <ArrowDown className="h-3 w-3" />
           )
         ) : (
-          <ArrowUpDown className="w-3 h-3 text-gray-400" />
+          <ArrowUpDown className="h-3 w-3 text-gray-400" />
         )}
       </button>
     )
@@ -116,59 +116,59 @@ export function Posts({ onNavigate }: PostsProps) {
 
   if (loading) {
     return (
-      <div className="p-3 pr-6 sm:p-4 sm:pr-8 flex items-center justify-center h-64">
-        <Loader2 className="w-6 h-6 animate-spin text-blue-600" />
+      <div className="flex h-64 items-center justify-center p-3 pr-6 sm:p-4 sm:pr-8">
+        <Loader2 className="h-6 w-6 animate-spin text-blue-600" />
       </div>
     )
   }
 
   return (
-    <div className="p-3 pr-6 sm:p-4 sm:pr-8 h-full flex flex-col">
+    <div className="flex h-full flex-col p-3 pr-6 sm:p-4 sm:pr-8">
       {error && (
         <div className="mb-4 flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
-          <AlertTriangle className="w-5 h-5 text-red-600 shrink-0" />
-          <span className="text-sm text-red-800 flex-1">{error}</span>
+          <AlertTriangle className="h-5 w-5 shrink-0 text-red-600" />
+          <span className="flex-1 text-sm text-red-800">{error}</span>
           <button
             onClick={refetch}
-            className="px-3 py-1 text-sm text-red-700 border border-red-300 rounded-lg hover:bg-red-100 transition-colors"
+            className="rounded-lg border border-red-300 px-3 py-1 text-sm text-red-700 transition-colors hover:bg-red-100"
           >
             Retry
           </button>
         </div>
       )}
 
-      <div className="flex flex-col sm:flex-row sm:items-center justify-between mb-4 gap-3">
+      <div className="mb-4 flex flex-col justify-between gap-3 sm:flex-row sm:items-center">
         <div>
-          <h1 className="text-xl sm:text-2xl font-semibold text-gray-900 mb-1">Posts</h1>
+          <h1 className="mb-1 text-xl font-semibold text-gray-900 sm:text-2xl">Posts</h1>
           <p className="text-sm text-gray-600">{filteredAndSorted.length} total posts</p>
         </div>
         <button
           onClick={() => onNavigate?.('/posts/new')}
-          className="flex items-center justify-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm"
+          className="flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700"
         >
-          <Plus className="w-4 h-4" />
+          <Plus className="h-4 w-4" />
           <span className="hidden sm:inline">New Post</span>
           <span className="sm:hidden">New</span>
         </button>
       </div>
 
-      <div className="bg-white rounded-lg border border-gray-200 mb-4">
-        <div className="p-3 flex flex-col gap-3">
+      <div className="mb-4 rounded-lg border border-gray-200 bg-white">
+        <div className="flex flex-col gap-3 p-3">
           <div className="relative">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+            <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
             <input
               type="text"
               placeholder="Search posts..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="w-full rounded-lg border border-gray-300 py-2 pr-3 pl-9 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
             />
           </div>
-          <div className="flex flex-col sm:flex-row gap-2">
+          <div className="flex flex-col gap-2 sm:flex-row">
             <select
               value={filterStatus}
               onChange={(e) => setFilterStatus(e.target.value)}
-              className="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="flex-1 rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
             >
               <option value="all">All Status</option>
               <option value="published">Published</option>
@@ -177,7 +177,7 @@ export function Posts({ onNavigate }: PostsProps) {
             <select
               value={filterCategory}
               onChange={(e) => setFilterCategory(e.target.value)}
-              className="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="flex-1 rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
             >
               <option value="all">All Categories</option>
               <option value="technology">Technology</option>
@@ -186,9 +186,9 @@ export function Posts({ onNavigate }: PostsProps) {
             </select>
             <button
               type="button"
-              className="flex items-center justify-center gap-2 px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+              className="flex items-center justify-center gap-2 rounded-lg border border-gray-300 px-3 py-2 text-sm transition-colors hover:bg-gray-50"
             >
-              <SlidersHorizontal className="w-4 h-4" />
+              <SlidersHorizontal className="h-4 w-4" />
               <span className="hidden sm:inline">More Filters</span>
             </button>
           </div>
@@ -196,8 +196,8 @@ export function Posts({ onNavigate }: PostsProps) {
       </div>
 
       {selectedPosts.length > 0 && (
-        <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 mb-4">
-          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
+        <div className="mb-4 rounded-lg border border-blue-200 bg-blue-50 p-3">
+          <div className="flex flex-col justify-between gap-2 sm:flex-row sm:items-center">
             <span className="text-sm text-blue-900">
               {selectedPosts.length} post{selectedPosts.length !== 1 ? 's' : ''} selected
             </span>
@@ -205,14 +205,14 @@ export function Posts({ onNavigate }: PostsProps) {
               <button
                 type="button"
                 onClick={handleBulkDelete}
-                className="flex-1 sm:flex-none px-3 py-1.5 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
+                className="flex-1 rounded-lg bg-red-600 px-3 py-1.5 text-sm text-white transition-colors hover:bg-red-700 sm:flex-none"
               >
                 Delete
               </button>
               <button
                 type="button"
                 onClick={() => setSelectedPosts([])}
-                className="flex-1 sm:flex-none px-3 py-1.5 text-sm border border-gray-300 bg-white rounded-lg hover:bg-gray-50 transition-colors"
+                className="flex-1 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm transition-colors hover:bg-gray-50 sm:flex-none"
               >
                 Cancel
               </button>
@@ -222,21 +222,21 @@ export function Posts({ onNavigate }: PostsProps) {
       )}
 
       {filteredAndSorted.length === 0 && !error ? (
-        <div className="bg-white rounded-lg border border-gray-200 p-8 text-center flex-1 flex flex-col items-center justify-center">
-          <p className="text-sm text-gray-500 mb-2">No posts yet</p>
+        <div className="flex flex-1 flex-col items-center justify-center rounded-lg border border-gray-200 bg-white p-8 text-center">
+          <p className="mb-2 text-sm text-gray-500">No posts yet</p>
           <button
             onClick={() => onNavigate?.('/posts/new')}
-            className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+            className="rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700"
           >
             Create your first post
           </button>
         </div>
       ) : (
         <>
-          <div className="hidden md:block bg-white rounded-lg border border-gray-200 flex-1 overflow-hidden">
-            <div className="overflow-x-auto h-full">
+          <div className="hidden flex-1 overflow-hidden rounded-lg border border-gray-200 bg-white md:block">
+            <div className="h-full overflow-x-auto">
               <table className="w-full">
-                <thead className="bg-gray-50 border-b border-gray-200 sticky top-0">
+                <thead className="sticky top-0 border-b border-gray-200 bg-gray-50">
                   <tr>
                     <th className="w-8 px-3 py-2 text-left">
                       <input
@@ -271,7 +271,7 @@ export function Posts({ onNavigate }: PostsProps) {
                 </thead>
                 <tbody className="divide-y divide-gray-200">
                   {filteredAndSorted.map((post: any) => (
-                    <tr key={post.id} className="hover:bg-gray-50 transition-colors">
+                    <tr key={post.id} className="transition-colors hover:bg-gray-50">
                       <td className="px-3 py-2">
                         <input
                           type="checkbox"
@@ -284,7 +284,7 @@ export function Posts({ onNavigate }: PostsProps) {
                         <button
                           type="button"
                           onClick={() => onNavigate?.(`/posts/${post.id}`)}
-                          className="font-medium text-gray-900 hover:text-blue-600 text-sm text-left"
+                          className="text-left text-sm font-medium text-gray-900 hover:text-blue-600"
                         >
                           {post.title}
                         </button>
@@ -293,7 +293,7 @@ export function Posts({ onNavigate }: PostsProps) {
                       <td className="px-3 py-2 text-sm text-gray-600">{post.category}</td>
                       <td className="px-3 py-2">
                         <span
-                          className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${post.status === 'Published' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}
+                          className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${post.status === 'Published' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}
                         >
                           {post.status}
                         </span>
@@ -304,18 +304,18 @@ export function Posts({ onNavigate }: PostsProps) {
                           <button
                             type="button"
                             onClick={() => onNavigate?.(`/posts/${post.id}`)}
-                            className="p-1.5 hover:bg-gray-100 rounded transition-colors"
+                            className="rounded p-1.5 transition-colors hover:bg-gray-100"
                             title="Edit"
                           >
-                            <Pencil className="w-4 h-4 text-gray-600" />
+                            <Pencil className="h-4 w-4 text-gray-600" />
                           </button>
                           <button
                             type="button"
                             onClick={() => handleDelete(post.id)}
-                            className="p-1.5 hover:bg-gray-100 rounded transition-colors"
+                            className="rounded p-1.5 transition-colors hover:bg-gray-100"
                             title="Delete"
                           >
-                            <Trash2 className="w-4 h-4 text-red-600" />
+                            <Trash2 className="h-4 w-4 text-red-600" />
                           </button>
                         </div>
                       </td>
@@ -326,7 +326,7 @@ export function Posts({ onNavigate }: PostsProps) {
             </div>
           </div>
 
-          <div className="md:hidden bg-white rounded-lg border border-gray-200 flex-1 overflow-auto">
+          <div className="flex-1 overflow-auto rounded-lg border border-gray-200 bg-white md:hidden">
             <div className="divide-y divide-gray-200">
               {filteredAndSorted.map((post: any) => (
                 <div key={post.id} className="p-3">
@@ -335,22 +335,22 @@ export function Posts({ onNavigate }: PostsProps) {
                       type="checkbox"
                       checked={selectedPosts.includes(post.id)}
                       onChange={() => handleSelectPost(post.id)}
-                      className="rounded border-gray-300 mt-1"
+                      className="mt-1 rounded border-gray-300"
                     />
-                    <div className="flex-1 min-w-0">
+                    <div className="min-w-0 flex-1">
                       <button
                         type="button"
                         onClick={() => onNavigate?.(`/posts/${post.id}`)}
-                        className="font-medium text-sm text-gray-900 hover:text-blue-600 block mb-1 text-left"
+                        className="mb-1 block text-left text-sm font-medium text-gray-900 hover:text-blue-600"
                       >
                         {post.title}
                       </button>
-                      <div className="flex flex-wrap items-center gap-2 text-xs text-gray-600 mb-2">
+                      <div className="mb-2 flex flex-wrap items-center gap-2 text-xs text-gray-600">
                         <span>{post.author}</span>
                         <span>•</span>
                         <span>{post.date}</span>
                         <span
-                          className={`px-2 py-0.5 rounded-full text-xs font-medium ${post.status === 'Published' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}
+                          className={`rounded-full px-2 py-0.5 text-xs font-medium ${post.status === 'Published' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}
                         >
                           {post.status}
                         </span>
@@ -359,9 +359,9 @@ export function Posts({ onNavigate }: PostsProps) {
                     <button
                       type="button"
                       onClick={() => handleDelete(post.id)}
-                      className="p-1.5 hover:bg-gray-100 rounded transition-colors"
+                      className="rounded p-1.5 transition-colors hover:bg-gray-100"
                     >
-                      <Trash2 className="w-4 h-4 text-red-600" />
+                      <Trash2 className="h-4 w-4 text-red-600" />
                     </button>
                   </div>
                 </div>

package/src/views/Redirects.tsx

@@ -101,17 +101,17 @@ export function Redirects({ onNavigate }: RedirectsProps) {
       <button
         type="button"
         onClick={() => setSortConfig(toggleSort(sortConfig, sortKey))}
-        className="flex items-center gap-1 text-xs font-medium text-gray-700 hover:text-gray-900 transition-colors"
+        className="flex items-center gap-1 text-xs font-medium text-gray-700 transition-colors hover:text-gray-900"
       >
         {label}
         {active ? (
           sortConfig!.direction === 'asc' ? (
-            <ArrowUp className="w-3 h-3" />
+            <ArrowUp className="h-3 w-3" />
           ) : (
-            <ArrowDown className="w-3 h-3" />
+            <ArrowDown className="h-3 w-3" />
           )
         ) : (
-          <ArrowUpDown className="w-3 h-3 text-gray-400" />
+          <ArrowUpDown className="h-3 w-3 text-gray-400" />
         )}
       </button>
     )
@@ -119,8 +119,8 @@ export function Redirects({ onNavigate }: RedirectsProps) {
 
   if (loading) {
     return (
-      <div className="p-3 pr-6 sm:p-4 sm:pr-8 flex items-center justify-center h-64">
-        <Loader2 className="w-6 h-6 animate-spin text-blue-600" />
+      <div className="flex h-64 items-center justify-center p-3 pr-6 sm:p-4 sm:pr-8">
+        <Loader2 className="h-6 w-6 animate-spin text-blue-600" />
       </div>
     )
   }
@@ -129,11 +129,11 @@ export function Redirects({ onNavigate }: RedirectsProps) {
     <div className="p-3 pr-6 sm:p-4 sm:pr-8">
       {error && (
         <div className="mb-4 flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
-          <AlertTriangle className="w-5 h-5 text-red-600 shrink-0" />
-          <span className="text-sm text-red-800 flex-1">{error}</span>
+          <AlertTriangle className="h-5 w-5 shrink-0 text-red-600" />
+          <span className="flex-1 text-sm text-red-800">{error}</span>
           <button
             onClick={refetch}
-            className="px-3 py-1 text-sm text-red-700 border border-red-300 rounded-lg hover:bg-red-100 transition-colors"
+            className="rounded-lg border border-red-300 px-3 py-1 text-sm text-red-700 transition-colors hover:bg-red-100"
           >
             Retry
           </button>
@@ -155,22 +155,22 @@ export function Redirects({ onNavigate }: RedirectsProps) {
         </button>
       </div>
 
-      <div className="bg-white rounded-lg border border-gray-200 mb-4">
-        <div className="p-3 flex flex-col sm:flex-row gap-3">
+      <div className="mb-4 rounded-lg border border-gray-200 bg-white">
+        <div className="flex flex-col gap-3 p-3 sm:flex-row">
           <div className="relative flex-1">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+            <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
             <input
               type="text"
               placeholder="Search by source or destination URL..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="w-full rounded-lg border border-gray-300 py-2 pr-3 pl-9 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
             />
           </div>
           <select
             value={filterType}
             onChange={(e) => setFilterType(e.target.value)}
-            className="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+            className="rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
           >
             <option value="all">All Types</option>
             <option value="301">301 (Permanent)</option>
@@ -181,10 +181,10 @@ export function Redirects({ onNavigate }: RedirectsProps) {
 
       {filteredAndSorted.length === 0 && !loading ? (
         <div className="flex flex-col items-center justify-center py-16 text-center">
-          <div className="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mb-4">
-            <ArrowRightLeft className="w-6 h-6 text-gray-400" />
+          <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-gray-100">
+            <ArrowRightLeft className="h-6 w-6 text-gray-400" />
           </div>
-          <h3 className="text-sm font-medium text-gray-900 mb-1">No redirects yet</h3>
+          <h3 className="mb-1 text-sm font-medium text-gray-900">No redirects yet</h3>
           <p className="text-sm text-gray-500">Add your first redirect to get started.</p>
         </div>
       ) : (
@@ -280,7 +280,7 @@ export function Redirects({ onNavigate }: RedirectsProps) {
       <Dialog.Root open={showAddDialog} onOpenChange={setShowAddDialog}>
         <Dialog.Portal>
           <Dialog.Overlay className="fixed inset-0 z-50 bg-black/50" />
-          <Dialog.Content className="fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white p-6 shadow-lg">
+          <Dialog.Content className="fixed top-1/2 left-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white p-6 shadow-lg">
             <Dialog.Title className="mb-4 text-lg font-semibold text-gray-900">
               Add Redirect
             </Dialog.Title>
@@ -292,7 +292,7 @@ export function Redirects({ onNavigate }: RedirectsProps) {
                   value={newRedirect.source}
                   onChange={(e) => setNewRedirect({ ...newRedirect, source: e.target.value })}
                   placeholder="/old-page"
-                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                   required
                 />
               </div>
@@ -305,7 +305,7 @@ export function Redirects({ onNavigate }: RedirectsProps) {
                   value={newRedirect.destination}
                   onChange={(e) => setNewRedirect({ ...newRedirect, destination: e.target.value })}
                   placeholder="/new-page"
-                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                   required
                 />
               </div>
@@ -318,7 +318,7 @@ export function Redirects({ onNavigate }: RedirectsProps) {
                   onChange={(e) =>
                     setNewRedirect({ ...newRedirect, type: e.target.value as '301' | '302' })
                   }
-                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                 >
                   <option value="301">301 (Permanent)</option>
                   <option value="302">302 (Temporary)</option>