Refactor: Add edit buttons to listing pages

src/pages/Designers.tsx

@@ -106,22 +106,36 @@ export default function Designers() {
       <main className="container mx-auto px-4 py-8">
         {/* Page Header */}
         <div className="mb-8">
-          <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-3 mb-4">
-            <div className="flex items-center gap-3">
+            <Ruler className="w-8 h-8 text-primary" />
-              <Ruler className="w-10 h-10 text-primary" />
             <h1 className="text-4xl font-bold">Designers</h1>
           </div>
-            {(user && isModerator()) && (
+          <p className="text-lg text-muted-foreground mb-4">
-              <Button onClick={() => setIsCreateModalOpen(true)}>
-                <Plus className="w-4 h-4 mr-2" />Create Designer
-              </Button>
-            )}
-          </div>
-          <p className="text-lg text-muted-foreground">
             Explore the designers behind your favorite rides and attractions
           </p>
-          <div className="flex items-center gap-2 mt-2">
+          
-            <Badge variant="secondary">{filteredCompanies.length} designers found</Badge>
+          <div className="flex items-center justify-between">
+            <div className="flex flex-wrap items-center gap-1.5 sm:gap-2">
+              <Badge variant="secondary" className="text-sm sm:text-base px-2 py-0.5 sm:px-3 sm:py-1">
+                {filteredCompanies.length} designers
+              </Badge>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Button 
+                onClick={() => {
+                  if (!user) {
+                    navigate('/auth');
+                  } else {
+                    setIsCreateModalOpen(true);
+                  }
+                }}
+                className="gap-2"
+              >
+                <Plus className="w-4 h-4" />
+                Add Designer
+              </Button>
+            </div>
           </div>
         </div>
 

src/pages/Operators.tsx

@@ -84,15 +84,27 @@ const Operators = () => {
       <Header />
       
       <main className="container mx-auto px-4 py-8">
-        <div className="flex items-center gap-3 mb-8">
+        {/* Page Header */}
-          <div className="p-2 bg-primary/10 rounded-lg">
+        <div className="mb-8">
-            <Building className="h-6 w-6 text-primary" />
+          <div className="flex items-center gap-3 mb-4">
+            <Building className="w-8 h-8 text-primary" />
+            <h1 className="text-4xl font-bold">Park Operators</h1>
           </div>
-          <div>
+          <p className="text-lg text-muted-foreground mb-4">
-            <h1 className="text-3xl font-bold">Park Operators</h1>
-            <p className="text-muted-foreground">
             Discover companies that operate theme parks
           </p>
+          
+          <div className="flex items-center justify-between">
+            <div className="flex flex-wrap items-center gap-1.5 sm:gap-2">
+              <Badge variant="secondary" className="text-sm sm:text-base px-2 py-0.5 sm:px-3 sm:py-1">
+                {filteredAndSortedOperators?.length || 0} operators
+              </Badge>
+              {searchTerm && (
+                <Badge variant="outline" className="text-xs sm:text-sm px-2 py-0.5">
+                  Searching: "{searchTerm}"
+                </Badge>
+              )}
+            </div>
           </div>
         </div>
 
@@ -135,19 +147,6 @@ const Operators = () => {
           </div>
         </div>
 
-        {/* Results Count */}
-        <div className="flex items-center justify-between mb-6">
-          <div className="flex items-center gap-2">
-            <Badge variant="secondary">
-              {filteredAndSortedOperators?.length || 0} park operators
-            </Badge>
-            {searchTerm && (
-              <Badge variant="outline">
-                Searching: "{searchTerm}"
-              </Badge>
-            )}
-          </div>
-        </div>
 
         {/* Loading State */}
         {isLoading && (

src/pages/ParkOwners.tsx

@@ -84,15 +84,27 @@ const ParkOwners = () => {
       <Header />
       
       <main className="container mx-auto px-4 py-8">
-        <div className="flex items-center gap-3 mb-8">
+        {/* Page Header */}
-          <div className="p-2 bg-primary/10 rounded-lg">
+        <div className="mb-8">
-            <Building2 className="h-6 w-6 text-primary" />
+          <div className="flex items-center gap-3 mb-4">
+            <Building2 className="w-8 h-8 text-primary" />
+            <h1 className="text-4xl font-bold">Property Owners</h1>
           </div>
-          <div>
+          <p className="text-lg text-muted-foreground mb-4">
-            <h1 className="text-3xl font-bold">Property Owners</h1>
-            <p className="text-muted-foreground">
             Discover companies that own and manage theme parks
           </p>
+          
+          <div className="flex items-center justify-between">
+            <div className="flex flex-wrap items-center gap-1.5 sm:gap-2">
+              <Badge variant="secondary" className="text-sm sm:text-base px-2 py-0.5 sm:px-3 sm:py-1">
+                {filteredAndSortedOwners?.length || 0} property owners
+              </Badge>
+              {searchTerm && (
+                <Badge variant="outline" className="text-xs sm:text-sm px-2 py-0.5">
+                  Searching: "{searchTerm}"
+                </Badge>
+              )}
+            </div>
           </div>
         </div>
 
@@ -135,19 +147,6 @@ const ParkOwners = () => {
           </div>
         </div>
 
-        {/* Results Count */}
-        <div className="flex items-center justify-between mb-6">
-          <div className="flex items-center gap-2">
-            <Badge variant="secondary">
-              {filteredAndSortedOwners?.length || 0} property owners
-            </Badge>
-            {searchTerm && (
-              <Badge variant="outline">
-                Searching: "{searchTerm}"
-              </Badge>
-            )}
-          </div>
-        </div>
 
         {/* Loading State */}
         {isLoading && (

src/pages/Rides.tsx

@@ -116,15 +116,22 @@ export default function Rides() {
         {/* Page Header */}
         <div className="mb-8">
           <div className="flex items-center gap-3 mb-4">
-            <FerrisWheel className="w-10 h-10 text-primary" />
+            <FerrisWheel className="w-8 h-8 text-primary" />
             <h1 className="text-4xl font-bold">Rides & Attractions</h1>
           </div>
-          <p className="text-lg text-muted-foreground">
+          <p className="text-lg text-muted-foreground mb-4">
             Explore amazing rides and attractions from theme parks worldwide
           </p>
-          <div className="flex items-center gap-2 mt-2">
+          
-            <Badge variant="secondary">{filteredRides.length} rides found</Badge>
+          <div className="flex items-center justify-between">
-            <Badge variant="outline">{rides.filter(r => r.category === 'roller_coaster').length} roller coasters</Badge>
+            <div className="flex flex-wrap items-center gap-1.5 sm:gap-2">
+              <Badge variant="secondary" className="text-sm sm:text-base px-2 py-0.5 sm:px-3 sm:py-1">
+                {filteredRides.length} rides
+              </Badge>
+              <Badge variant="outline" className="text-xs sm:text-sm px-2 py-0.5">
+                {rides.filter(r => r.category === 'roller_coaster').length} coasters
+              </Badge>
+            </div>
           </div>
         </div>