From ca71c1646dce2faf747217a215052632fb6a2d12 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 10 Mar 2026 01:22:11 +0100
Subject: [PATCH] Move expand icon to the left of panel titles

---
 components/dashboard/Campaigns.tsx    | 18 +++++++--------
 components/dashboard/ContentStats.tsx | 28 +++++++++++------------
 components/dashboard/Locations.tsx    | 32 +++++++++++++--------------
 components/dashboard/TechSpecs.tsx    | 32 +++++++++++++--------------
 components/dashboard/TopReferrers.tsx | 26 ++++++++++++----------
 5 files changed, 69 insertions(+), 67 deletions(-)

diff --git a/components/dashboard/Campaigns.tsx b/components/dashboard/Campaigns.tsx
index 5d6165c..841a549 100644
--- a/components/dashboard/Campaigns.tsx
+++ b/components/dashboard/Campaigns.tsx
@@ -124,16 +124,7 @@ export default function Campaigns({ siteId, dateRange, filters, onFilter }: Camp
     <>
       <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
         <div className="flex items-center justify-between mb-4">
-          <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
-            Campaigns
-          </h3>
           <div className="flex items-center gap-2">
-            <button
-              onClick={() => setIsBuilderOpen(true)}
-              className="text-xs font-medium text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange transition-colors cursor-pointer"
-          >
-              Build URL
-            </button>
             {showViewAll && (
               <button
                 onClick={() => setIsModalOpen(true)}
@@ -143,7 +134,16 @@ export default function Campaigns({ siteId, dateRange, filters, onFilter }: Camp
                 <FrameCornersIcon className="w-4 h-4" weight="bold" />
               </button>
             )}
+            <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+              Campaigns
+            </h3>
           </div>
+          <button
+            onClick={() => setIsBuilderOpen(true)}
+            className="text-xs font-medium text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange transition-colors cursor-pointer"
+          >
+            Build URL
+          </button>
         </div>
 
         <div className="space-y-2 flex-1 min-h-[270px]">
diff --git a/components/dashboard/ContentStats.tsx b/components/dashboard/ContentStats.tsx
index f70785d..d1ab95f 100644
--- a/components/dashboard/ContentStats.tsx
+++ b/components/dashboard/ContentStats.tsx
@@ -98,11 +98,21 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
     <>
       <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
         <div className="flex items-center justify-between mb-6">
-          <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
-            Pages
-          </h3>
           <div className="flex items-center gap-2">
-            <div className="flex gap-1" role="tablist" aria-label="Pages view tabs" onKeyDown={handleTabKeyDown}>
+            {showViewAll && (
+              <button
+                onClick={() => setIsModalOpen(true)}
+                className="p-1.5 text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-all cursor-pointer rounded-lg"
+                aria-label="View all pages"
+              >
+                <FrameCornersIcon className="w-4 h-4" weight="bold" />
+              </button>
+            )}
+            <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+              Pages
+            </h3>
+          </div>
+          <div className="flex gap-1" role="tablist" aria-label="Pages view tabs" onKeyDown={handleTabKeyDown}>
             {(['top_pages', 'entry_pages', 'exit_pages'] as Tab[]).map((tab) => (
               <button
                 key={tab}
@@ -125,16 +135,6 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
                 )}
               </button>
             ))}
-            </div>
-            {showViewAll && (
-              <button
-                onClick={() => setIsModalOpen(true)}
-                className="p-1.5 text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-all cursor-pointer rounded-lg"
-                aria-label="View all pages"
-              >
-                <FrameCornersIcon className="w-4 h-4" weight="bold" />
-              </button>
-            )}
           </div>
         </div>
 
diff --git a/components/dashboard/Locations.tsx b/components/dashboard/Locations.tsx
index d7025d7..cb8019d 100644
--- a/components/dashboard/Locations.tsx
+++ b/components/dashboard/Locations.tsx
@@ -202,12 +202,22 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
     <>
       <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
         <div className="flex items-center justify-between mb-6">
-          <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
-            Locations
-          </h3>
           <div className="flex items-center gap-2">
-            <div className="flex gap-1" role="tablist" aria-label="Location view tabs" onKeyDown={handleTabKeyDown}>
-              {(['map', 'globe', 'countries', 'regions', 'cities'] as Tab[]).map((tab) => (
+            {showViewAll && (
+              <button
+                onClick={() => setIsModalOpen(true)}
+                className="p-1.5 text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-all cursor-pointer rounded-lg"
+                aria-label="View all locations"
+              >
+                <FrameCornersIcon className="w-4 h-4" weight="bold" />
+              </button>
+            )}
+            <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+              Locations
+            </h3>
+          </div>
+          <div className="flex gap-1" role="tablist" aria-label="Location view tabs" onKeyDown={handleTabKeyDown}>
+            {(['map', 'globe', 'countries', 'regions', 'cities'] as Tab[]).map((tab) => (
               <button
                 key={tab}
                 onClick={() => setActiveTab(tab)}
@@ -228,17 +238,7 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
                   />
                 )}
               </button>
-              ))}
-            </div>
-            {showViewAll && (
-              <button
-                onClick={() => setIsModalOpen(true)}
-                className="p-1.5 text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-all cursor-pointer rounded-lg"
-                aria-label="View all locations"
-              >
-                <FrameCornersIcon className="w-4 h-4" weight="bold" />
-              </button>
-            )}
+            ))}
           </div>
         </div>
 
diff --git a/components/dashboard/TechSpecs.tsx b/components/dashboard/TechSpecs.tsx
index 38573f9..c54788f 100644
--- a/components/dashboard/TechSpecs.tsx
+++ b/components/dashboard/TechSpecs.tsx
@@ -128,12 +128,22 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
     <>
       <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
         <div className="flex items-center justify-between mb-6">
-          <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
-            Technology
-          </h3>
           <div className="flex items-center gap-2">
-            <div className="flex gap-1" role="tablist" aria-label="Technology view tabs" onKeyDown={handleTabKeyDown}>
-              {(['browsers', 'os', 'devices', 'screens'] as Tab[]).map((tab) => (
+            {showViewAll && (
+              <button
+                onClick={() => setIsModalOpen(true)}
+                className="p-1.5 text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-all cursor-pointer rounded-lg"
+                aria-label="View all technology"
+              >
+                <FrameCornersIcon className="w-4 h-4" weight="bold" />
+              </button>
+            )}
+            <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+              Technology
+            </h3>
+          </div>
+          <div className="flex gap-1" role="tablist" aria-label="Technology view tabs" onKeyDown={handleTabKeyDown}>
+            {(['browsers', 'os', 'devices', 'screens'] as Tab[]).map((tab) => (
               <button
                 key={tab}
                 onClick={() => setActiveTab(tab)}
@@ -154,17 +164,7 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
                   />
                 )}
               </button>
-              ))}
-            </div>
-            {showViewAll && (
-              <button
-                onClick={() => setIsModalOpen(true)}
-                className="p-1.5 text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-all cursor-pointer rounded-lg"
-                aria-label="View all technology"
-              >
-                <FrameCornersIcon className="w-4 h-4" weight="bold" />
-              </button>
-            )}
+            ))}
           </div>
         </div>
 
diff --git a/components/dashboard/TopReferrers.tsx b/components/dashboard/TopReferrers.tsx
index 7a2785c..c527e0b 100644
--- a/components/dashboard/TopReferrers.tsx
+++ b/components/dashboard/TopReferrers.tsx
@@ -86,18 +86,20 @@ export default function TopReferrers({ referrers, collectReferrers = true, siteI
     <>
       <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
         <div className="flex items-center justify-between mb-4">
-          <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
-            Referrers
-          </h3>
-          {showViewAll && (
-            <button
-              onClick={() => setIsModalOpen(true)}
-              className="p-1.5 text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-all cursor-pointer rounded-lg"
-              aria-label="View all referrers"
-            >
-              <FrameCornersIcon className="w-4 h-4" weight="bold" />
-            </button>
-          )}
+          <div className="flex items-center gap-2">
+            {showViewAll && (
+              <button
+                onClick={() => setIsModalOpen(true)}
+                className="p-1.5 text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-all cursor-pointer rounded-lg"
+                aria-label="View all referrers"
+              >
+                <FrameCornersIcon className="w-4 h-4" weight="bold" />
+              </button>
+            )}
+            <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+              Referrers
+            </h3>
+          </div>
         </div>
 
         <div className="space-y-2 flex-1 min-h-[270px]">