From a0302c095e0021f4473d891d5670d733a44be9a1 Mon Sep 17 00:00:00 2001
From: Jamie Pine <ijamespine@me.com>
Date: Sun, 25 Jan 2026 17:19:46 -0800
Subject: [PATCH] Add framer-motion dependency and update HistoryTable and
 ProfileCard components

- Added framer-motion version 12.29.0 to enhance animation capabilities.
- Updated HistoryTable component headers for improved clarity and consistency.
- Enhanced ProfileCard component styling for better visual integration.
---
 app/package.json                              |  1 +
 app/src/components/History/HistoryTable.tsx   | 27 +++++++------------
 .../components/VoiceProfiles/ProfileCard.tsx  |  2 +-
 bun.lock                                      |  7 +++++
 4 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/app/package.json b/app/package.json
index c07776a0..927c591e 100644
--- a/app/package.json
+++ b/app/package.json
@@ -36,6 +36,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
+    "framer-motion": "^12.29.0",
     "lucide-react": "^0.454.0",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
diff --git a/app/src/components/History/HistoryTable.tsx b/app/src/components/History/HistoryTable.tsx
index 62938442..681660c3 100644
--- a/app/src/components/History/HistoryTable.tsx
+++ b/app/src/components/History/HistoryTable.tsx
@@ -84,12 +84,12 @@ export function HistoryTable() {
             <Table className="w-full table-fixed">
               <TableHeader className="sticky top-0 bg-background z-10">
                 <TableRow>
-                  <TableHead className="w-[38%]">Text</TableHead>
-                  <TableHead className="w-[13%]">Profile</TableHead>
-                  <TableHead className="w-[9%]">Language</TableHead>
-                  <TableHead className="w-[9%]">Duration</TableHead>
-                  <TableHead className="w-[13%]">Created</TableHead>
-                  <TableHead className="w-[8%] text-right">Actions</TableHead>
+                  <TableHead className="w-[38%]">Input</TableHead>
+                  <TableHead className="w-[13%]">Voice</TableHead>
+                  <TableHead className="w-[9%]">Lang</TableHead>
+                  <TableHead className="w-[9%]">Length</TableHead>
+                  <TableHead className="w-[13%]">Date</TableHead>
+                  <TableHead className="w-[8%] text-right"></TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
@@ -104,7 +104,7 @@ export function HistoryTable() {
                       <TableCell className="truncate">{gen.text}</TableCell>
                       <TableCell className="truncate">{gen.profile_name}</TableCell>
                       <TableCell>
-                        <Badge variant="outline" className="text-xs">
+                        <Badge variant="outline" className="text-xs text-muted-foreground">
                           {gen.language}
                         </Badge>
                       </TableCell>
@@ -113,10 +113,7 @@ export function HistoryTable() {
                         {formatDate(gen.created_at)}
                       </TableCell>
                       <TableCell className="text-right">
-                        <div
-                          className="flex justify-end"
-                          onClick={(e) => e.stopPropagation()}
-                        >
+                        <div className="flex justify-end" onClick={(e) => e.stopPropagation()}>
                           <DropdownMenu>
                             <DropdownMenuTrigger asChild>
                               <Button
@@ -129,15 +126,11 @@ export function HistoryTable() {
                               </Button>
                             </DropdownMenuTrigger>
                             <DropdownMenuContent align="end">
-                              <DropdownMenuItem
-                                onClick={() => handlePlay(gen.id, gen.text)}
-                              >
+                              <DropdownMenuItem onClick={() => handlePlay(gen.id, gen.text)}>
                                 <Play className="mr-2 h-4 w-4" />
                                 Play
                               </DropdownMenuItem>
-                              <DropdownMenuItem
-                                onClick={() => handleDownload(gen.id, gen.text)}
-                              >
+                              <DropdownMenuItem onClick={() => handleDownload(gen.id, gen.text)}>
                                 <Download className="mr-2 h-4 w-4" />
                                 Download
                               </DropdownMenuItem>
diff --git a/app/src/components/VoiceProfiles/ProfileCard.tsx b/app/src/components/VoiceProfiles/ProfileCard.tsx
index c5f19a20..71c6e97c 100644
--- a/app/src/components/VoiceProfiles/ProfileCard.tsx
+++ b/app/src/components/VoiceProfiles/ProfileCard.tsx
@@ -74,7 +74,7 @@ export function ProfileCard({ profile }: ProfileCardProps) {
             {profile.description || 'No description'}
           </p>
           <div className="mb-2">
-            <Badge variant="outline" className="text-xs h-5 px-1.5">
+            <Badge variant="outline" className="text-xs h-5 px-1.5 text-muted-foreground">
               {profile.language}
             </Badge>
           </div>
diff --git a/bun.lock b/bun.lock
index 60254d3a..4c4e25b6 100644
--- a/bun.lock
+++ b/bun.lock
@@ -38,6 +38,7 @@
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "date-fns": "^3.6.0",
+        "framer-motion": "^12.29.0",
         "lucide-react": "^0.454.0",
         "react": "^18.3.0",
         "react-dom": "^18.3.0",
@@ -734,6 +735,8 @@
 
     "fraction.js": ["fraction.js@5.3.4", "", {}, "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ=="],
 
+    "framer-motion": ["framer-motion@12.29.0", "", { "dependencies": { "motion-dom": "^12.29.0", "motion-utils": "^12.27.2", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-1gEFGXHYV2BD42ZPTFmSU9buehppU+bCuOnHU0AD18DKh9j4DuTx47MvqY5ax+NNWRtK32qIcJf1UxKo1WwjWg=="],
+
     "fs.realpath": ["fs.realpath@1.0.0", "", {}, "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="],
 
     "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
@@ -850,6 +853,10 @@
 
     "minimatch": ["minimatch@3.1.2", "", { "dependencies": { "brace-expansion": "^1.1.7" } }, "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw=="],
 
+    "motion-dom": ["motion-dom@12.29.0", "", { "dependencies": { "motion-utils": "^12.27.2" } }, "sha512-3eiz9bb32yvY8Q6XNM4AwkSOBPgU//EIKTZwsSWgA9uzbPBhZJeScCVcBuwwYVqhfamewpv7ZNmVKTGp5qnzkA=="],
+
+    "motion-utils": ["motion-utils@12.27.2", "", {}, "sha512-B55gcoL85Mcdt2IEStY5EEAsrMSVE2sI14xQ/uAdPL+mfQxhKKFaEag9JmfxedJOR4vZpBGoPeC/Gm13I/4g5Q=="],
+
     "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
 
     "mz": ["mz@2.7.0", "", { "dependencies": { "any-promise": "^1.0.0", "object-assign": "^4.0.1", "thenify-all": "^1.0.0" } }, "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q=="],