Merge pull request #48 from pineapplestrikesback/feature/weekly-volume-compact

Move weekly volume above activity chart

Author: pineapplestrikesback

src/ui/components/TotalVolumeCard.tsx

@@ -13,7 +13,7 @@ export function TotalVolumeCard(): React.ReactElement {
   );
 
   if (isLoading) {
-    return <div className="h-32 animate-pulse rounded-lg bg-primary-500" />;
+    return <div className="min-h-[72px] animate-pulse rounded-lg bg-zinc-900" />;
   }
 
   const percentage = totalGoal > 0 ? Math.min((totalVolume / totalGoal) * 100, 100) : 0;
@@ -27,23 +27,32 @@ export function TotalVolumeCard(): React.ReactElement {
   };
 
   return (
-    <div className="rounded-lg bg-surface-raised p-6">
-      <h3 className="mb-2 text-lg font-semibold text-white">Total Weekly Volume</h3>
-
-      <div className="mb-2 flex items-baseline gap-2">
-        <span className="text-4xl font-bold text-white">{volumeDisplay}</span>
-        <span className="text-lg text-primary-200">sets</span>
+    <div className="min-h-[72px] rounded-lg border-2 border-zinc-800 bg-zinc-950 px-4 py-3">
+      <div className="flex items-center justify-between gap-3">
+        <div>
+          <p className="text-xs font-bold uppercase tracking-wider text-zinc-400">
+            Total Weekly Volume
+          </p>
+          <div className="mt-1 flex items-baseline gap-2">
+            <span className="text-2xl font-black text-white">{volumeDisplay}</span>
+            <span className="text-xs font-semibold uppercase tracking-wider text-zinc-400">
+              sets
+            </span>
+          </div>
+        </div>
+        <div className="text-right">
+          <p className="text-xs font-semibold text-zinc-400">Target {totalGoal}</p>
+          <p className="text-[10px] uppercase tracking-wider text-zinc-600">sets/week</p>
+        </div>
       </div>
 
       {/* Progress Bar */}
-      <div className="mb-2 h-3 overflow-hidden rounded-full bg-primary-800">
+      <div className="mt-2 h-2 overflow-hidden rounded-full bg-zinc-800">
         <div
           className={`h-full rounded-full transition-all duration-500 ${getProgressBarClass()}`}
           style={{ width: `${percentage}%` }}
         />
       </div>
-
-      <p className="text-sm text-primary-200">Target: {totalGoal} sets/week</p>
     </div>
   );
 }

src/ui/pages/Dashboard.tsx

@@ -77,6 +77,9 @@ export function Dashboard(): React.ReactElement {
         <h2 className="text-2xl font-bold text-white">Workout Overview</h2>
       </div>
 
+      {/* Total Weekly Volume */}
+      <TotalVolumeCard />
+
       {/* Weekly Activity Chart */}
       <WeeklyActivityChart />
 
@@ -95,8 +98,6 @@ export function Dashboard(): React.ReactElement {
         )}
       </div>
 
-      {/* Total Volume */}
-      <TotalVolumeCard />
     </div>
   );
 }