From dc44a128de30950c746450aab65d40e1a196f644 Mon Sep 17 00:00:00 2001
From: Jamie Pine <ijamespine@me.com>
Date: Sun, 25 Jan 2026 17:46:39 -0800
Subject: [PATCH] Enhance App UI with logo and animations

- Added a voicebox logo to the loading screen in the App component for improved branding.
- Introduced fade-in animations for the logo and loading text to enhance user experience.
- Updated Sidebar component styles for better visual consistency.
- Refactored HistoryTable to implement a new fixed-height row layout, improving readability and interaction.
- Removed unused Badge component from GenerationForm for cleaner code.
---
 app/src/App.tsx                               |  15 +-
 .../components/Generation/GenerationForm.tsx  |   3 +-
 app/src/components/History/HistoryTable.tsx   | 177 ++++++++++--------
 app/src/components/Sidebar.tsx                |   4 +-
 app/src/index.css                             |  29 +++
 app/src/main.tsx                              |   4 +-
 tauri/src-tauri/gen/Assets.car                | Bin 3847048 -> 3847048 bytes
 tauri/src-tauri/tauri.conf.json               |   4 +-
 8 files changed, 144 insertions(+), 92 deletions(-)

diff --git a/app/src/App.tsx b/app/src/App.tsx
index 7fc4411e..0fda4e50 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -11,6 +11,7 @@ import { Sidebar } from '@/components/Sidebar';
 import { AudioPlayer } from '@/components/AudioPlayer/AudioPlayer';
 import { UpdateNotification } from '@/components/UpdateNotification';
 import { isTauri, startServer, setupWindowCloseHandler } from '@/lib/tauri';
+import voiceboxLogo from '@/assets/voicebox-logo.png';
 
 // Track if server is starting to prevent duplicate starts
 let serverStarting = false;
@@ -77,9 +78,17 @@ function App() {
   if (isTauri() && !serverReady) {
     return (
       <div className="min-h-screen bg-background flex items-center justify-center">
-        <div className="text-center space-y-4">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
-          <p className="text-muted-foreground">Starting server...</p>
+        <div className="text-center space-y-6">
+          <div className="flex justify-center">
+            <img
+              src={voiceboxLogo}
+              alt="Voicebox"
+              className="w-16 h-16 object-contain animate-fade-in-scale"
+            />
+          </div>
+          <p className="text-muted-foreground text-lg animate-fade-in-delayed">
+            Starting voicebox...
+          </p>
         </div>
       </div>
     );
diff --git a/app/src/components/Generation/GenerationForm.tsx b/app/src/components/Generation/GenerationForm.tsx
index ffff041b..80a2aeab 100644
--- a/app/src/components/Generation/GenerationForm.tsx
+++ b/app/src/components/Generation/GenerationForm.tsx
@@ -2,7 +2,6 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { Loader2, Mic } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import * as z from 'zod';
-import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import {
@@ -104,7 +103,7 @@ export function GenerationForm() {
                 <div className="mt-2 p-3 border rounded-md bg-muted/50 flex items-center gap-2">
                   <Mic className="h-4 w-4 text-muted-foreground" />
                   <span className="font-medium">{selectedProfile.name}</span>
-                  <Badge variant="outline">{selectedProfile.language}</Badge>
+                  <span className="text-sm text-muted-foreground">{selectedProfile.language}</span>
                 </div>
               ) : (
                 <div className="mt-2 p-3 border border-dashed rounded-md text-sm text-muted-foreground">
diff --git a/app/src/components/History/HistoryTable.tsx b/app/src/components/History/HistoryTable.tsx
index 681660c3..a68895b5 100644
--- a/app/src/components/History/HistoryTable.tsx
+++ b/app/src/components/History/HistoryTable.tsx
@@ -1,6 +1,5 @@
-import { Download, MoreHorizontal, Play, Trash2 } from 'lucide-react';
+import { AudioWaveform, Download, MoreHorizontal, Play, Trash2 } from 'lucide-react';
 import { useState } from 'react';
-import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
@@ -8,20 +7,17 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
+import { Textarea } from '@/components/ui/textarea';
 import { apiClient } from '@/lib/api/client';
 import { useDeleteGeneration, useHistory } from '@/lib/hooks/useHistory';
 import { cn } from '@/lib/utils/cn';
 import { formatDate, formatDuration } from '@/lib/utils/format';
 import { usePlayerStore } from '@/stores/playerStore';
 
+// OLD TABLE-BASED COMPONENT - REMOVED (can be found in git history)
+// This is the new alternate history view with fixed height rows
+
+// NEW ALTERNATE HISTORY VIEW - FIXED HEIGHT ROWS
 export function HistoryTable() {
   const [page, setPage] = useState(0);
   const limit = 20;
@@ -77,80 +73,99 @@ export function HistoryTable() {
         <>
           <div
             className={cn(
-              'flex-1 min-h-0 overflow-y-auto border rounded-md overflow-x-hidden',
+              'flex-1 min-h-0 overflow-y-auto space-y-2',
               isPlayerVisible && 'max-h-[calc(100vh-220px)]',
             )}
           >
-            <Table className="w-full table-fixed">
-              <TableHeader className="sticky top-0 bg-background z-10">
-                <TableRow>
-                  <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>
-                {history.map((gen) => {
-                  const isCurrentlyPlaying = currentAudioId === gen.id && isPlaying;
-                  return (
-                    <TableRow
-                      key={gen.id}
-                      className={cn(isCurrentlyPlaying && 'bg-muted/50', 'cursor-pointer')}
-                      onClick={() => handlePlay(gen.id, gen.text)}
-                    >
-                      <TableCell className="truncate">{gen.text}</TableCell>
-                      <TableCell className="truncate">{gen.profile_name}</TableCell>
-                      <TableCell>
-                        <Badge variant="outline" className="text-xs text-muted-foreground">
-                          {gen.language}
-                        </Badge>
-                      </TableCell>
-                      <TableCell className="text-sm">{formatDuration(gen.duration)}</TableCell>
-                      <TableCell className="text-xs text-muted-foreground/60">
-                        {formatDate(gen.created_at)}
-                      </TableCell>
-                      <TableCell className="text-right">
-                        <div className="flex justify-end" onClick={(e) => e.stopPropagation()}>
-                          <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                              <Button
-                                variant="ghost"
-                                size="icon"
-                                className="h-7 w-7 rounded-full"
-                                aria-label="Actions"
-                              >
-                                <MoreHorizontal className="h-3.5 w-3.5" />
-                              </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                              <DropdownMenuItem onClick={() => handlePlay(gen.id, gen.text)}>
-                                <Play className="mr-2 h-4 w-4" />
-                                Play
-                              </DropdownMenuItem>
-                              <DropdownMenuItem onClick={() => handleDownload(gen.id, gen.text)}>
-                                <Download className="mr-2 h-4 w-4" />
-                                Download
-                              </DropdownMenuItem>
-                              <DropdownMenuItem
-                                onClick={() => deleteGeneration.mutate(gen.id)}
-                                disabled={deleteGeneration.isPending}
-                                className="text-destructive focus:text-destructive"
-                              >
-                                <Trash2 className="mr-2 h-4 w-4" />
-                                Delete
-                              </DropdownMenuItem>
-                            </DropdownMenuContent>
-                          </DropdownMenu>
-                        </div>
-                      </TableCell>
-                    </TableRow>
-                  );
-                })}
-              </TableBody>
-            </Table>
+            {history.map((gen) => {
+              const isCurrentlyPlaying = currentAudioId === gen.id && isPlaying;
+              return (
+                <div
+                  key={gen.id}
+                  className={cn(
+                    'flex items-stretch gap-4 h-24 border rounded-md p-3 bg-card hover:bg-muted/70 transition-colors cursor-pointer',
+                    isCurrentlyPlaying && 'bg-muted/70',
+                  )}
+                  onClick={() => handlePlay(gen.id, gen.text)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      e.preventDefault();
+                      handlePlay(gen.id, gen.text);
+                    }
+                  }}
+                  tabIndex={0}
+                  role="button"
+                  aria-label="Play audio"
+                >
+                  {/* Waveform icon */}
+                  <div className="flex items-center shrink-0">
+                    <AudioWaveform className="h-5 w-5 text-muted-foreground" />
+                  </div>
+
+                  {/* Left side - Meta information */}
+                  <div className="flex flex-col gap-1.5 w-48 shrink-0 justify-center">
+                    <div className="font-medium text-sm truncate" title={gen.profile_name}>
+                      {gen.profile_name}
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <span className="text-xs text-muted-foreground">
+                        {gen.language}
+                      </span>
+                      <span className="text-xs text-muted-foreground">
+                        {formatDuration(gen.duration)}
+                      </span>
+                    </div>
+                    <div className="text-xs text-muted-foreground">
+                      {formatDate(gen.created_at)}
+                    </div>
+                  </div>
+
+                  {/* Right side - Transcript textarea */}
+                  <div className="flex-1 min-w-0 flex">
+                    <Textarea
+                      readOnly
+                      value={gen.text}
+                      className="flex-1 resize-none text-sm text-muted-foreground"
+                      onClick={(e) => e.stopPropagation()}
+                    />
+                  </div>
+
+                  {/* Far right - Ellipsis actions */}
+                  <div className="w-10 shrink-0 flex justify-end" onClick={(e) => e.stopPropagation()}>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-8 w-8"
+                          aria-label="Actions"
+                        >
+                          <MoreHorizontal className="h-4 w-4" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem onClick={() => handlePlay(gen.id, gen.text)}>
+                          <Play className="mr-2 h-4 w-4" />
+                          Play
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => handleDownload(gen.id, gen.text)}>
+                          <Download className="mr-2 h-4 w-4" />
+                          Download
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          onClick={() => deleteGeneration.mutate(gen.id)}
+                          disabled={deleteGeneration.isPending}
+                          className="text-destructive focus:text-destructive"
+                        >
+                          <Trash2 className="mr-2 h-4 w-4" />
+                          Delete
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </div>
+                </div>
+              );
+            })}
           </div>
 
           <div className="flex justify-between items-center mt-4 shrink-0">
diff --git a/app/src/components/Sidebar.tsx b/app/src/components/Sidebar.tsx
index fd7b8f91..9b690c24 100644
--- a/app/src/components/Sidebar.tsx
+++ b/app/src/components/Sidebar.tsx
@@ -37,8 +37,8 @@ export function Sidebar({ activeTab, onTabChange }: SidebarProps) {
               onClick={() => onTabChange(tab.id)}
               className={cn(
                 'w-12 h-12 rounded-full flex items-center justify-center transition-all duration-200',
-                'hover:bg-accent hover:text-accent-foreground',
-                isActive ? 'bg-accent text-accent-foreground shadow-lg' : 'text-muted-foreground',
+                'hover:bg-muted/50',
+                isActive ? 'bg-muted/50 text-foreground shadow-lg' : 'text-muted-foreground',
               )}
               title={tab.label}
               aria-label={tab.label}
diff --git a/app/src/index.css b/app/src/index.css
index 6e65fb44..06381711 100644
--- a/app/src/index.css
+++ b/app/src/index.css
@@ -126,3 +126,32 @@
     letter-spacing: 0.1em;
   }
 }
+
+@keyframes fadeInScale {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.animate-fade-in-scale {
+  animation: fadeInScale 0.5s ease-out forwards;
+}
+
+.animate-fade-in-delayed {
+  animation: fadeIn 0.5s ease-out 0.15s forwards;
+  opacity: 0;
+}
diff --git a/app/src/main.tsx b/app/src/main.tsx
index 7bc42d67..e4a5e482 100644
--- a/app/src/main.tsx
+++ b/app/src/main.tsx
@@ -1,5 +1,5 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+// import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
@@ -20,7 +20,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
       <App />
-      <ReactQueryDevtools initialIsOpen={false} />
+      {/* <ReactQueryDevtools initialIsOpen={false} /> */}
     </QueryClientProvider>
   </React.StrictMode>,
 );
diff --git a/tauri/src-tauri/gen/Assets.car b/tauri/src-tauri/gen/Assets.car
index cf90b0d252e47b1816ac406cf59befc8df2b34ed..e553bcf639450a2b533f07bc2e9756c52befc245 100644
GIT binary patch
delta 750
zcmZwFxo%W36b4{ThQMXt0~x{+_U&YBAKTZa$c<O!5%LCfh>||VOiMureM%&XJCDIz
zFruJ9LTUM<(KHNK`pWzN$H$)j_&J!u*UxtF=i3+id##fkWX)cZ)Er62lqe?S$SV=7
zbyl^yl2zVV5+@%=m6a{dMz!<)-P@1bqr<tM%>4k?U<jvR9ZtiUe(syH-uY6rHrbK&
zS(28?QH-9cCKIeu&MTW&ds0?4EPA&3Y1e!jc5GR2GLb^!K)QO&YFr?Zax5xmnF_B4
zW%Tee=tF8Y2D{Q`t4bin&XO)NQY;Z?m28X_wZxeIlha};%ba;`HiupGxfF>~ktGHS
zrD8OxD8;sxz|K_c^xqA(HI~*df^JU^_8T}0=ioeCfQxVmF2fbL3fJH|+<=>~0k_~J
zV-rSj2e#lY+=Kh@0Jh;FJc7sY1fIe(cn&Y%Wq+{$>iD=5(gl^<NQsNbb+IBBQzk89
z8#tG2lUO|zm!j(8P@~Dw-fJM(fiVb>pnySx>5um8?ANX}Uf^L-Xa!n074o7g!exuh
cv9J|kwNGgLw(OgY+sSO~!1uH9o9~Bz0pp6)@c;k-

delta 750
zcmZwFxo%TI6b4{9CUDvJKulP|8kQ5E*=HznGuu@jA#Xs3DCtw!Ed?FvQzB8=kHG`b
zV^L7hq~#Bm8=R58X-4{w&Y3g*`KvdEuU~BM$G1cKXQj;|8f~njm^x3oC`rL4O`I|t
zV{Py%lCaKM;*+DI@v$pXrLg_s{ku<_gM(QZ%|Z`WpbuwY70$xB$t*N=wKZOF=orC{
z1!<`q1=9&qN*E`L=}OVdbrKg<=XEwF<F@(SZwpJAr6?pbXVShhr78r)F6vOU44tma
zK{@#97eOC$v)0=&I%Q`ZBD5hLOr)d=E-wqFkWyCZlpNi~xX786X1(8PW4KhS5ERjw
zOO>MMMAZjjgR)AX>;ER0xYi=dJm~Idf3Jb_Z~-pDCAbV%;3`~$>u>{Z!Y#NBYj6in
zGS*=L_h19=!vlB-k6;rX!xMN4&)_+{fGv0luO|C@uaA#gQ>#h^Ytbdoq%|`Z#4;5l
zB4%Ss!rM|)vI^bJn;MLccHaQOHVlD5fCL2^%;ad-PJi$Cq@%^J7PkM^Fi@;kQ{v3h
c3Y&d6<yUJ~oEP<`LpPcZJ%q`0`1bq3U*;>+F#rGn

diff --git a/tauri/src-tauri/tauri.conf.json b/tauri/src-tauri/tauri.conf.json
index f43ef98e..7a008bb0 100644
--- a/tauri/src-tauri/tauri.conf.json
+++ b/tauri/src-tauri/tauri.conf.json
@@ -57,9 +57,9 @@
       "open": true
     },
     "updater": {
-      "pubkey": "REPLACE_WITH_YOUR_PUBLIC_KEY",
+      "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IEJDQzc3OTEwRkQyNkNDNUQKUldSZHpDYjlFSG5IdlBpL2tGMXo4N1IzWlJLdUpTNFQyZ1FGZTEzQmVTZzY5elZTYVpMNnFwTUoK",
       "endpoints": [
-        "https://github.com/YOUR_USERNAME/voicebox/releases/latest/download/latest.json"
+        "https://github.com/jamiepine/voicebox/releases/latest/download/latest.json"
       ]
     }
   }