From a3cbe7f2b60c943dc466d4f1b6ebafdd819f8436 Mon Sep 17 00:00:00 2001
From: Jamie Pine <ijamespine@me.com>
Date: Tue, 27 Jan 2026 17:11:38 -0800
Subject: [PATCH] Refactor UI layout and introduce safe area constants for
 improved responsiveness

- Updated App, AppFrame, and AudioTab components to utilize new TOP_SAFE_AREA_PADDING and BOTTOM_SAFE_AREA_PADDING constants for consistent layout adjustments.
- Enhanced Sidebar and MainEditor components for better organization and user experience.
- Improved VoicesTab and ProfileList components by integrating new layout features and removing redundant import functionality.
- Streamlined HistoryTable and ModelManagement components for better visual consistency and interaction.
---
 app/src/App.tsx                               |   4 +-
 app/src/components/AppFrame/AppFrame.tsx      |   4 +-
 app/src/components/AudioTab/AudioTab.tsx      | 354 ++++++++++++------
 app/src/components/History/HistoryTable.tsx   |   3 +-
 app/src/components/MainEditor/MainEditor.tsx  | 146 +++++++-
 .../ServerSettings/ModelManagement.tsx        |   3 +-
 app/src/components/Sidebar.tsx                |   2 +-
 .../components/VoiceProfiles/ProfileList.tsx  | 104 +----
 app/src/components/VoicesTab/VoicesTab.tsx    |  69 ++--
 app/src/lib/constants/ui.ts                   |  15 +
 10 files changed, 455 insertions(+), 249 deletions(-)
 create mode 100644 app/src/lib/constants/ui.ts

diff --git a/app/src/App.tsx b/app/src/App.tsx
index c4cd85b7..89afc281 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -21,6 +21,8 @@ import {
   startServer,
 } from '@/lib/tauri';
 import { useServerStore } from '@/stores/serverStore';
+import { TOP_SAFE_AREA_PADDING } from '@/lib/constants/ui';
+import { cn } from '@/lib/utils/cn';
 
 // Track if server is starting to prevent duplicate starts
 let serverStarting = false;
@@ -138,7 +140,7 @@ function App() {
   // Show loading screen while server is starting in Tauri
   if (isTauri() && !serverReady) {
     return (
-      <div className="min-h-screen bg-background flex items-center justify-center pt-12">
+      <div className={cn('min-h-screen bg-background flex items-center justify-center', TOP_SAFE_AREA_PADDING)}>
         <TitleBarDragRegion />
         <div className="text-center space-y-6">
           <div className="flex justify-center relative">
diff --git a/app/src/components/AppFrame/AppFrame.tsx b/app/src/components/AppFrame/AppFrame.tsx
index 6b72b3e3..2caaa0dc 100644
--- a/app/src/components/AppFrame/AppFrame.tsx
+++ b/app/src/components/AppFrame/AppFrame.tsx
@@ -1,5 +1,7 @@
 import { TitleBarDragRegion } from '@/components/TitleBarDragRegion';
 import { AudioPlayer } from '@/components/AudioPlayer/AudioPlayer';
+import { TOP_SAFE_AREA_PADDING } from '@/lib/constants/ui';
+import { cn } from '@/lib/utils/cn';
 
 interface AppFrameProps {
   children: React.ReactNode;
@@ -7,7 +9,7 @@ interface AppFrameProps {
 
 export function AppFrame({ children }: AppFrameProps) {
   return (
-    <div className="h-screen bg-background flex flex-col overflow-hidden pt-12">
+    <div className={cn('h-screen bg-background flex flex-col overflow-hidden', TOP_SAFE_AREA_PADDING)}>
       <TitleBarDragRegion />
       {children}
       <AudioPlayer />
diff --git a/app/src/components/AudioTab/AudioTab.tsx b/app/src/components/AudioTab/AudioTab.tsx
index 04e07978..059bc836 100644
--- a/app/src/components/AudioTab/AudioTab.tsx
+++ b/app/src/components/AudioTab/AudioTab.tsx
@@ -1,7 +1,6 @@
-import { Edit, Plus, Trash2, Speaker } from 'lucide-react';
+import { Edit, Plus, Trash2, Speaker, CheckCircle2, Check } from 'lucide-react';
 import { useState } from 'react';
 import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import {
   Dialog,
   DialogContent,
@@ -19,10 +18,14 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import { Badge } from '@/components/ui/badge';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { apiClient } from '@/lib/api/client';
 import { isTauri } from '@/lib/tauri';
 import { invoke } from '@tauri-apps/api/core';
+import { usePlayerStore } from '@/stores/playerStore';
+import { cn } from '@/lib/utils/cn';
+import { BOTTOM_SAFE_AREA_PADDING } from '@/lib/constants/ui';
 
 interface AudioDevice {
   id: string;
@@ -33,7 +36,10 @@ interface AudioDevice {
 export function AudioTab() {
   const [createDialogOpen, setCreateDialogOpen] = useState(false);
   const [editingChannel, setEditingChannel] = useState<string | null>(null);
+  const [selectedChannelId, setSelectedChannelId] = useState<string | null>(null);
   const queryClient = useQueryClient();
+  const audioUrl = usePlayerStore((state) => state.audioUrl);
+  const isPlayerVisible = !!audioUrl;
 
   const { data: channels, isLoading: channelsLoading } = useQuery({
     queryKey: ['channels'],
@@ -120,98 +126,219 @@ export function AudioTab() {
     );
   }
 
+  const allChannels = channels || [];
+  const allDevices = devices || [];
+  const selectedChannel = selectedChannelId
+    ? allChannels.find((c) => c.id === selectedChannelId)
+    : null;
+
   return (
     <div className="h-full flex flex-col">
-      <div className="flex items-center justify-between mb-6">
-        <h1 className="text-2xl font-bold">Audio Channels</h1>
+      <div className="flex items-center justify-between mb-6 shrink-0">
+        <h2 className="text-2xl font-bold">Audio Channels</h2>
         <Button onClick={() => setCreateDialogOpen(true)}>
           <Plus className="h-4 w-4 mr-2" />
           New Channel
         </Button>
       </div>
 
-      <div className="flex-1 overflow-auto space-y-4">
-        {channels?.map((channel) => (
-          <Card key={channel.id}>
-            <CardHeader>
-              <div className="flex items-center justify-between">
-                <CardTitle className="flex items-center gap-2">
-                  <Speaker className="h-5 w-5" />
-                  {channel.name}
-                  {channel.is_default && (
-                    <span className="text-xs text-muted-foreground">(Default)</span>
-                  )}
-                </CardTitle>
-                {!channel.is_default && (
-                  <div className="flex gap-2">
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => setEditingChannel(channel.id)}
-                    >
-                      <Edit className="h-4 w-4" />
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => {
-                        if (confirm('Delete this channel?')) {
-                          deleteChannel.mutate(channel.id);
-                        }
-                      }}
-                    >
-                      <Trash2 className="h-4 w-4" />
-                    </Button>
-                  </div>
-                )}
-              </div>
-            </CardHeader>
-            <CardContent>
-              <div className="space-y-2">
-                <div>
-                  <Label className="text-sm font-medium">Output Devices:</Label>
-                  <div className="mt-1 text-sm text-muted-foreground">
-                    {channel.device_ids.length > 0 ? (
-                      <ul className="list-disc list-inside">
-                        {channel.device_ids.map((deviceId) => {
-                          const device = devices?.find((d) => d.id === deviceId);
-                          return (
-                            <li key={deviceId}>{device?.name || deviceId || 'Default Speakers'}</li>
-                          );
-                        })}
-                      </ul>
-                    ) : (
-                      <span>Default Speakers</span>
-                    )}
-                  </div>
-                </div>
-                <div>
-                  <Label className="text-sm font-medium">Assigned Voices:</Label>
-                  <ChannelVoicesList channelId={channel.id} />
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-
-      <div className="mt-8 pt-6 border-t">
-        <h2 className="text-lg font-semibold mb-4">Available Devices</h2>
-        <div className="space-y-2">
-          {devices && devices.length > 0 ? (
-            devices.map((device) => (
-              <div key={device.id} className="text-sm">
-                <span className="font-medium">{device.name}</span>
-                {device.is_default && (
-                  <span className="text-muted-foreground ml-2">(default)</span>
-                )}
-              </div>
-            ))
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 h-full min-h-0">
+        {/* Left Column - Channels */}
+        <div className={cn('flex flex-col min-h-0 overflow-y-auto', isPlayerVisible && BOTTOM_SAFE_AREA_PADDING)}>
+          {allChannels.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-12 border-2 border-dashed border-muted rounded-md">
+              <Speaker className="h-12 w-12 text-muted-foreground mb-4" />
+              <p className="text-muted-foreground mb-4">
+                No audio channels yet. Create your first channel to route voices to specific devices.
+              </p>
+              <Button onClick={() => setCreateDialogOpen(true)}>
+                <Plus className="h-4 w-4 mr-2" />
+                Create Channel
+              </Button>
+            </div>
           ) : (
-            <div className="text-sm text-muted-foreground">
-              {isTauri()
-                ? 'No audio devices found'
-                : 'Audio device selection requires Tauri'}
+            <div className="space-y-3 p-2">
+              {allChannels.map((channel) => {
+                const isSelected = selectedChannelId === channel.id;
+                return (
+                  <button
+                    key={channel.id}
+                    type="button"
+                    className={cn(
+                      'group border rounded-lg p-4 transition-colors cursor-pointer text-left w-full',
+                      isSelected && 'ring-2 ring-primary bg-primary/5 border-primary',
+                    )}
+                    onClick={() => setSelectedChannelId(isSelected ? null : channel.id)}
+                  >
+                    <div className="flex items-start justify-between gap-4">
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2 mb-3">
+                          <div className="h-8 w-8 rounded-lg bg-muted flex items-center justify-center shrink-0">
+                            <Speaker className="h-4 w-4 text-muted-foreground" />
+                          </div>
+                          <div className="flex items-center gap-2 min-w-0">
+                            <h3 className="font-semibold text-base truncate">{channel.name}</h3>
+                          </div>
+                        </div>
+
+                        <div className="space-y-2.5 ml-10">
+                          <div>
+                            <div className="text-xs font-medium text-muted-foreground mb-1">
+                              Output Devices
+                            </div>
+                            <div className="flex flex-wrap gap-1.5">
+                              {channel.device_ids.length > 0 ? (
+                                channel.device_ids.map((deviceId) => {
+                                  const device = allDevices.find((d) => d.id === deviceId);
+                                  return (
+                                    <Badge
+                                      key={deviceId}
+                                      variant="outline"
+                                      className="text-xs font-normal"
+                                    >
+                                      {device?.name || deviceId}
+                                    </Badge>
+                                  );
+                                })
+                              ) : (
+                                (() => {
+                                  const defaultDevice = allDevices.find((d) => d.is_default);
+                                  return defaultDevice ? (
+                                    <Badge variant="outline" className="text-xs font-normal">
+                                      {defaultDevice.name}
+                                    </Badge>
+                                  ) : null;
+                                })()
+                              )}
+                            </div>
+                          </div>
+
+                          <div>
+                            <div className="text-xs font-medium text-muted-foreground mb-1">
+                              Assigned Voices
+                            </div>
+                            <ChannelVoicesList channelId={channel.id} />
+                          </div>
+                        </div>
+                      </div>
+
+                      {!channel.is_default && (
+                        <div className="flex gap-1 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-8 w-8 p-0"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setEditingChannel(channel.id);
+                            }}
+                          >
+                            <Edit className="h-4 w-4" />
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-8 w-8 p-0"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              if (confirm('Delete this channel?')) {
+                                deleteChannel.mutate(channel.id);
+                              }
+                            }}
+                          >
+                            <Trash2 className="h-4 w-4" />
+                          </Button>
+                        </div>
+                      )}
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        </div>
+
+        {/* Right Column - Available Devices */}
+        <div className={cn('flex flex-col min-h-0 overflow-y-auto', isPlayerVisible && BOTTOM_SAFE_AREA_PADDING)}>
+          <div className="shrink-0 mb-4">
+            <h3 className="text-lg font-semibold">Available Devices</h3>
+            <p className="text-sm text-muted-foreground mt-1">
+              {selectedChannelId
+                ? selectedChannel?.is_default
+                  ? 'Default channel uses system default device'
+                  : 'Click devices to add or remove them from the selected channel'
+                : 'Select a channel to assign devices'}
+            </p>
+          </div>
+          {allDevices.length > 0 ? (
+            <div className="space-y-2">
+              {allDevices.map((device) => {
+                const isConnected =
+                  selectedChannelId &&
+                  selectedChannel &&
+                  (selectedChannel.device_ids.length === 0
+                    ? device.is_default
+                    : selectedChannel.device_ids.includes(device.id));
+                const canToggle = selectedChannelId && selectedChannel && !selectedChannel.is_default;
+                
+                const handleDeviceClick = () => {
+                  if (!canToggle || !selectedChannel) return;
+                  
+                  const currentDeviceIds = selectedChannel.device_ids;
+                  const newDeviceIds = isConnected
+                    ? currentDeviceIds.filter((id) => id !== device.id)
+                    : [...currentDeviceIds, device.id];
+                  
+                  updateChannel.mutate({
+                    channelId: selectedChannelId,
+                    data: { device_ids: newDeviceIds },
+                  });
+                };
+                
+                return (
+                  <button
+                    key={device.id}
+                    type="button"
+                    onClick={handleDeviceClick}
+                    disabled={!canToggle}
+                    className={cn(
+                      'flex items-center gap-2 text-sm p-3 rounded-lg border transition-colors text-left w-full',
+                      isConnected
+                        ? 'bg-primary/10 border-primary ring-1 ring-primary/20'
+                        : 'hover:bg-muted/50',
+                      !canToggle && 'cursor-default opacity-60',
+                      canToggle && 'cursor-pointer',
+                    )}
+                  >
+                    {canToggle ? (
+                      <div
+                        className={cn(
+                          'h-4 w-4 rounded border-2 flex items-center justify-center shrink-0',
+                          isConnected
+                            ? 'bg-accent border-accent'
+                            : 'border-muted-foreground/30',
+                        )}
+                      >
+                        {isConnected && <Check className="h-3 w-3 text-accent-foreground" />}
+                      </div>
+                    ) : device.is_default ? (
+                      <CheckCircle2 className="h-4 w-4 text-primary shrink-0" />
+                    ) : null}
+                    <span className={cn('truncate flex-1', device.is_default && 'font-medium')}>
+                      {device.name}
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+          ) : (
+            <div className="flex flex-col items-center justify-center py-12 border-2 border-dashed border-muted rounded-md">
+              <CheckCircle2 className="h-12 w-12 text-muted-foreground mb-4" />
+              <p className="text-muted-foreground text-center">
+                {isTauri()
+                  ? 'No audio devices found'
+                  : 'Audio device selection requires Tauri'}
+              </p>
             </div>
           )}
         </div>
@@ -228,28 +355,31 @@ export function AudioTab() {
       />
 
       {/* Edit Channel Dialog */}
-      {editingChannel && (
-        <EditChannelDialog
-          open={!!editingChannel}
-          onOpenChange={(open) => !open && setEditingChannel(null)}
-          channel={channels?.find((c) => c.id === editingChannel)!}
-          devices={devices || []}
-          profiles={profiles || []}
-          channelVoices={channelVoices?.profile_ids || []}
-          onUpdate={(name, deviceIds) => {
-            updateChannel.mutate({
-              channelId: editingChannel,
-              data: { name, device_ids: deviceIds },
-            });
-          }}
-          onSetVoices={(profileIds) => {
-            setChannelVoices.mutate({
-              channelId: editingChannel,
-              profileIds,
-            });
-          }}
-        />
-      )}
+      {editingChannel && (() => {
+        const channel = channels?.find((c) => c.id === editingChannel);
+        return channel ? (
+          <EditChannelDialog
+            open={!!editingChannel}
+            onOpenChange={(open) => !open && setEditingChannel(null)}
+            channel={channel}
+            devices={devices || []}
+            profiles={profiles || []}
+            channelVoices={channelVoices?.profile_ids || []}
+            onUpdate={(name, deviceIds) => {
+              updateChannel.mutate({
+                channelId: editingChannel,
+                data: { name, device_ids: deviceIds },
+              });
+            }}
+            onSetVoices={(profileIds) => {
+              setChannelVoices.mutate({
+                channelId: editingChannel,
+                profileIds,
+              });
+            }}
+          />
+        ) : null;
+      })()}
     </div>
   );
 }
@@ -271,11 +401,15 @@ function ChannelVoicesList({ channelId }: { channelId: string }) {
       .filter(Boolean) || [];
 
   return (
-    <div className="mt-1 text-sm text-muted-foreground">
+    <div className="flex flex-wrap gap-1.5">
       {voiceNames.length > 0 ? (
-        <span>{voiceNames.join(', ')}</span>
+        voiceNames.map((name) => (
+          <Badge key={name} variant="outline" className="text-xs font-normal">
+            {name}
+          </Badge>
+        ))
       ) : (
-        <span>No voices assigned</span>
+        <span className="text-sm text-muted-foreground">No voices assigned</span>
       )}
     </div>
   );
diff --git a/app/src/components/History/HistoryTable.tsx b/app/src/components/History/HistoryTable.tsx
index b333318f..198bf937 100644
--- a/app/src/components/History/HistoryTable.tsx
+++ b/app/src/components/History/HistoryTable.tsx
@@ -27,6 +27,7 @@ import {
 import { cn } from '@/lib/utils/cn';
 import { formatDate, formatDuration } from '@/lib/utils/format';
 import { usePlayerStore } from '@/stores/playerStore';
+import { BOTTOM_SAFE_AREA_PADDING } from '@/lib/constants/ui';
 
 // OLD TABLE-BASED COMPONENT - REMOVED (can be found in git history)
 // This is the new alternate history view with fixed height rows
@@ -177,7 +178,7 @@ export function HistoryTable() {
             ref={scrollRef}
             className={cn(
               'flex-1 min-h-0 overflow-y-auto space-y-2 pb-4',
-              isPlayerVisible && 'pb-32',
+              isPlayerVisible && BOTTOM_SAFE_AREA_PADDING,
             )}
           >
             {history.map((gen) => {
diff --git a/app/src/components/MainEditor/MainEditor.tsx b/app/src/components/MainEditor/MainEditor.tsx
index fd766265..754e3f70 100644
--- a/app/src/components/MainEditor/MainEditor.tsx
+++ b/app/src/components/MainEditor/MainEditor.tsx
@@ -1,25 +1,118 @@
-import { ProfileList } from '@/components/VoiceProfiles/ProfileList';
-import { HistoryTable } from '@/components/History/HistoryTable';
+import { Sparkles, Upload } from 'lucide-react';
+import { useRef, useState } from 'react';
 import { FloatingGenerateBox } from '@/components/Generation/FloatingGenerateBox';
+import { HistoryTable } from '@/components/History/HistoryTable';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { ProfileList } from '@/components/VoiceProfiles/ProfileList';
+import { BOTTOM_SAFE_AREA_PADDING } from '@/lib/constants/ui';
+import { useImportProfile } from '@/lib/hooks/useProfiles';
+import { cn } from '@/lib/utils/cn';
 import { usePlayerStore } from '@/stores/playerStore';
+import { useUIStore } from '@/stores/uiStore';
 
 export function MainEditor() {
   const audioUrl = usePlayerStore((state) => state.audioUrl);
+  const isPlayerVisible = !!audioUrl;
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const setDialogOpen = useUIStore((state) => state.setProfileDialogOpen);
+  const importProfile = useImportProfile();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [importDialogOpen, setImportDialogOpen] = useState(false);
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+
+  const handleImportClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      if (!file.name.endsWith('.voicebox.zip')) {
+        alert('Please select a valid .voicebox.zip file');
+        return;
+      }
+      setSelectedFile(file);
+      setImportDialogOpen(true);
+    }
+  };
+
+  const handleImportConfirm = () => {
+    if (selectedFile) {
+      importProfile.mutate(selectedFile, {
+        onSuccess: () => {
+          setImportDialogOpen(false);
+          setSelectedFile(null);
+          if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+          }
+        },
+        onError: (error) => {
+          alert(`Failed to import profile: ${error.message}`);
+        },
+      });
+    }
+  };
 
   return (
     // Main view: Profiles top left, Generator bottom left, History right
     <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 h-full min-h-0 overflow-hidden relative">
       {/* Left Column */}
-      <div className="flex flex-col gap-6 min-h-0 overflow-y-auto pb-32">
-        {/* Profiles - Top Left */}
-        <div className="shrink-0 flex flex-col">
-          <ProfileList />
+      <div className="flex flex-col min-h-0 overflow-hidden relative">
+        {/* Scroll Mask - Always visible, behind content */}
+        <div className="absolute top-0 left-0 right-0 h-16 bg-gradient-to-b from-background to-transparent z-0 pointer-events-none" />
+
+        {/* Fixed Header */}
+        <div className="absolute top-0 left-0 right-0 z-10">
+          <div className="flex items-center justify-between mb-4 px-1">
+            <h2 className="text-2xl font-bold">Voicebox</h2>
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={handleImportClick}>
+                <Upload className="mr-2 h-4 w-4" />
+                Import Voice
+              </Button>
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept=".voicebox.zip"
+                onChange={handleFileChange}
+                className="hidden"
+              />
+              <Button onClick={() => setDialogOpen(true)}>
+                <Sparkles className="mr-2 h-4 w-4" />
+                Create Voice
+              </Button>
+            </div>
+          </div>
         </div>
 
-        {/* Generator - Bottom Left */}
-        {/* <div className="shrink-0">
-          <GenerationForm />
-        </div> */}
+        {/* Scrollable Content */}
+        <div
+          ref={scrollRef}
+          className={cn(
+            'flex-1 min-h-0 overflow-y-auto pt-14',
+            isPlayerVisible ? BOTTOM_SAFE_AREA_PADDING : 'pb-4',
+          )}
+        >
+          <div className="flex flex-col gap-6">
+            {/* Profiles - Top Left */}
+            <div className="shrink-0 flex flex-col">
+              <ProfileList />
+            </div>
+
+            {/* Generator - Bottom Left */}
+            {/* <div className="shrink-0">
+              <GenerationForm />
+            </div> */}
+          </div>
+        </div>
       </div>
 
       {/* Right Column - History */}
@@ -29,6 +122,39 @@ export function MainEditor() {
 
       {/* Floating Generate Box */}
       <FloatingGenerateBox isPlayerOpen={!!audioUrl} />
+
+      {/* Import Dialog */}
+      <Dialog open={importDialogOpen} onOpenChange={setImportDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Import Profile</DialogTitle>
+            <DialogDescription>
+              Import the profile from "{selectedFile?.name}". This will create a new profile with
+              all samples.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setImportDialogOpen(false);
+                setSelectedFile(null);
+                if (fileInputRef.current) {
+                  fileInputRef.current.value = '';
+                }
+              }}
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleImportConfirm}
+              disabled={importProfile.isPending || !selectedFile}
+            >
+              {importProfile.isPending ? 'Importing...' : 'Import'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }
diff --git a/app/src/components/ServerSettings/ModelManagement.tsx b/app/src/components/ServerSettings/ModelManagement.tsx
index 3b160e5b..41d2143b 100644
--- a/app/src/components/ServerSettings/ModelManagement.tsx
+++ b/app/src/components/ServerSettings/ModelManagement.tsx
@@ -277,14 +277,13 @@ function ModelItem({
         {model.downloaded ? (
           <div className="flex items-center gap-2">
             <div className="flex items-center gap-1 text-sm text-muted-foreground">
-              <CheckCircle2 className="h-4 w-4 text-green-500" />
+              <CheckCircle2 className="h-4 w-4 text-accent" />
               <span>Ready</span>
             </div>
             <Button
               size="sm"
               onClick={onDelete}
               variant="outline"
-              className="text-destructive hover:text-destructive"
               disabled={model.loaded}
               title={model.loaded ? 'Unload model before deleting' : 'Delete model'}
             >
diff --git a/app/src/components/Sidebar.tsx b/app/src/components/Sidebar.tsx
index 8a8ce685..6ec5c4a4 100644
--- a/app/src/components/Sidebar.tsx
+++ b/app/src/components/Sidebar.tsx
@@ -1,4 +1,4 @@
-import { Loader2, Volume2, Mic, Speaker, Server, Box } from 'lucide-react';
+import { Box, Loader2, Mic, Server, Speaker, Volume2 } from 'lucide-react';
 import voiceboxLogo from '@/assets/voicebox-logo.png';
 import { cn } from '@/lib/utils/cn';
 import { useGenerationStore } from '@/stores/generationStore';
diff --git a/app/src/components/VoiceProfiles/ProfileList.tsx b/app/src/components/VoiceProfiles/ProfileList.tsx
index c0687e4d..8dcb06a4 100644
--- a/app/src/components/VoiceProfiles/ProfileList.tsx
+++ b/app/src/components/VoiceProfiles/ProfileList.tsx
@@ -1,16 +1,7 @@
-import { Mic, Sparkles, Upload } from 'lucide-react';
-import { useRef, useState } from 'react';
+import { Mic, Sparkles } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { useImportProfile, useProfiles } from '@/lib/hooks/useProfiles';
+import { useProfiles } from '@/lib/hooks/useProfiles';
 import { useUIStore } from '@/stores/uiStore';
 import { ProfileCard } from './ProfileCard';
 import { ProfileForm } from './ProfileForm';
@@ -18,44 +9,6 @@ import { ProfileForm } from './ProfileForm';
 export function ProfileList() {
   const { data: profiles, isLoading, error } = useProfiles();
   const setDialogOpen = useUIStore((state) => state.setProfileDialogOpen);
-  const importProfile = useImportProfile();
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const [importDialogOpen, setImportDialogOpen] = useState(false);
-  const [selectedFile, setSelectedFile] = useState<File | null>(null);
-
-  const handleImportClick = () => {
-    fileInputRef.current?.click();
-  };
-
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (file) {
-      // Validate file extension
-      if (!file.name.endsWith('.voicebox.zip')) {
-        alert('Please select a valid .voicebox.zip file');
-        return;
-      }
-      setSelectedFile(file);
-      setImportDialogOpen(true);
-    }
-  };
-
-  const handleImportConfirm = () => {
-    if (selectedFile) {
-      importProfile.mutate(selectedFile, {
-        onSuccess: () => {
-          setImportDialogOpen(false);
-          setSelectedFile(null);
-          if (fileInputRef.current) {
-            fileInputRef.current.value = '';
-          }
-        },
-        onError: (error) => {
-          alert(`Failed to import profile: ${error.message}`);
-        },
-      });
-    }
-  };
 
   if (isLoading) {
     return null;
@@ -73,27 +26,6 @@ export function ProfileList() {
 
   return (
     <div className="flex flex-col">
-      <div className="flex items-center justify-between mb-4 shrink-0">
-        <h2 className="text-2xl font-bold">Voicebox</h2>
-        <div className="flex gap-2">
-          <Button variant="outline" onClick={handleImportClick}>
-            <Upload className="mr-2 h-4 w-4" />
-            Import Voice
-          </Button>
-          <input
-            ref={fileInputRef}
-            type="file"
-            accept=".voicebox.zip"
-            onChange={handleFileChange}
-            className="hidden"
-          />
-          <Button onClick={() => setDialogOpen(true)}>
-            <Sparkles className="mr-2 h-4 w-4" />
-            Create Voice
-          </Button>
-        </div>
-      </div>
-
       <div className="shrink-0">
         {allProfiles.length === 0 ? (
           <Card>
@@ -118,38 +50,6 @@ export function ProfileList() {
       </div>
 
       <ProfileForm />
-
-      <Dialog open={importDialogOpen} onOpenChange={setImportDialogOpen}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Import Profile</DialogTitle>
-            <DialogDescription>
-              Import the profile from "{selectedFile?.name}". This will create a new profile with
-              all samples.
-            </DialogDescription>
-          </DialogHeader>
-          <DialogFooter>
-            <Button
-              variant="outline"
-              onClick={() => {
-                setImportDialogOpen(false);
-                setSelectedFile(null);
-                if (fileInputRef.current) {
-                  fileInputRef.current.value = '';
-                }
-              }}
-            >
-              Cancel
-            </Button>
-            <Button
-              onClick={handleImportConfirm}
-              disabled={importProfile.isPending || !selectedFile}
-            >
-              {importProfile.isPending ? 'Importing...' : 'Import'}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
     </div>
   );
 }
diff --git a/app/src/components/VoicesTab/VoicesTab.tsx b/app/src/components/VoicesTab/VoicesTab.tsx
index 63a67c45..4c2b8acd 100644
--- a/app/src/components/VoicesTab/VoicesTab.tsx
+++ b/app/src/components/VoicesTab/VoicesTab.tsx
@@ -1,6 +1,6 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { Edit, MoreHorizontal, Plus, Trash2 } from 'lucide-react';
-import { useMemo } from 'react';
+import { Edit, MoreHorizontal, Plus, Trash2, Mic } from 'lucide-react';
+import { useMemo, useRef } from 'react';
 import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
@@ -22,6 +22,10 @@ import type { VoiceProfileResponse } from '@/lib/api/types';
 import { useHistory } from '@/lib/hooks/useHistory';
 import { useDeleteProfile, useProfileSamples, useProfiles } from '@/lib/hooks/useProfiles';
 import { useUIStore } from '@/stores/uiStore';
+import { ProfileForm } from '@/components/VoiceProfiles/ProfileForm';
+import { BOTTOM_SAFE_AREA_PADDING } from '@/lib/constants/ui';
+import { cn } from '@/lib/utils/cn';
+import { usePlayerStore } from '@/stores/playerStore';
 
 export function VoicesTab() {
   const { data: profiles, isLoading } = useProfiles();
@@ -30,6 +34,9 @@ export function VoicesTab() {
   const setDialogOpen = useUIStore((state) => state.setProfileDialogOpen);
   const setEditingProfileId = useUIStore((state) => state.setEditingProfileId);
   const deleteProfile = useDeleteProfile();
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const audioUrl = usePlayerStore((state) => state.audioUrl);
+  const isPlayerVisible = !!audioUrl;
 
   // Get generation counts per profile
   const generationCounts = useMemo(() => {
@@ -96,16 +103,29 @@ export function VoicesTab() {
   }
 
   return (
-    <div className="h-full flex flex-col">
-      <div className="flex items-center justify-between mb-6">
-        <h1 className="text-2xl font-bold">Voices</h1>
-        <Button onClick={() => setDialogOpen(true)}>
-          <Plus className="h-4 w-4 mr-2" />
-          New Voice
-        </Button>
+    <div className="h-full flex flex-col relative overflow-hidden">
+      {/* Scroll Mask - Always visible, behind content */}
+      <div className="absolute top-0 left-0 right-0 h-16 bg-gradient-to-b from-background to-transparent z-10 pointer-events-none" />
+
+      {/* Fixed Header */}
+      <div className="absolute top-0 left-0 right-0 z-20">
+        <div className="flex items-center justify-between mb-6">
+          <h1 className="text-2xl font-bold">Voices</h1>
+          <Button onClick={() => setDialogOpen(true)}>
+            <Plus className="h-4 w-4 mr-2" />
+            New Voice
+          </Button>
+        </div>
       </div>
 
-      <div className="flex-1 overflow-auto">
+      {/* Scrollable Content */}
+      <div
+        ref={scrollRef}
+        className={cn(
+          'flex-1 overflow-y-auto pt-16 relative z-0',
+          isPlayerVisible && BOTTOM_SAFE_AREA_PADDING,
+        )}
+      >
         <Table>
           <TableHeader>
             <TableRow>
@@ -133,6 +153,8 @@ export function VoicesTab() {
           </TableBody>
         </Table>
       </div>
+
+      <ProfileForm />
     </div>
   );
 }
@@ -159,19 +181,24 @@ function VoiceRow({
   const { data: samples } = useProfileSamples(profile.id);
 
   return (
-    <TableRow>
+    <TableRow className="cursor-pointer" onClick={onEdit}>
       <TableCell>
-        <div>
-          <div className="font-medium">{profile.name}</div>
-          {profile.description && (
-            <div className="text-sm text-muted-foreground">{profile.description}</div>
-          )}
+        <div className="flex items-center gap-2">
+          <div className="h-8 w-8 rounded-lg bg-muted flex items-center justify-center shrink-0">
+            <Mic className="h-4 w-4 text-muted-foreground" />
+          </div>
+          <div>
+            <div className="font-medium">{profile.name}</div>
+            {profile.description && (
+              <div className="text-sm text-muted-foreground">{profile.description}</div>
+            )}
+          </div>
         </div>
       </TableCell>
-      <TableCell>{profile.language}</TableCell>
-      <TableCell>{generationCount}</TableCell>
-      <TableCell>{samples?.length || 0}</TableCell>
-      <TableCell>
+      <TableCell onClick={(e) => e.stopPropagation()}>{profile.language}</TableCell>
+      <TableCell onClick={(e) => e.stopPropagation()}>{generationCount}</TableCell>
+      <TableCell onClick={(e) => e.stopPropagation()}>{samples?.length || 0}</TableCell>
+      <TableCell onClick={(e) => e.stopPropagation()}>
         <MultiSelect
           options={channels.map((ch) => ({
             value: ch.id,
@@ -183,7 +210,7 @@ function VoiceRow({
           className="min-w-[200px]"
         />
       </TableCell>
-      <TableCell>
+      <TableCell onClick={(e) => e.stopPropagation()}>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button variant="ghost" size="icon">
diff --git a/app/src/lib/constants/ui.ts b/app/src/lib/constants/ui.ts
new file mode 100644
index 00000000..41a46483
--- /dev/null
+++ b/app/src/lib/constants/ui.ts
@@ -0,0 +1,15 @@
+/**
+ * UI layout constants for safe area padding
+ */
+
+/**
+ * Top safe area padding - height of the drag region bar
+ * Corresponds to Tailwind's pt-12 (3rem / 48px)
+ */
+export const TOP_SAFE_AREA_PADDING = 'pt-12';
+
+/**
+ * Bottom safe area padding - height of the audio player
+ * Corresponds to Tailwind's pb-32 (8rem / 128px)
+ */
+export const BOTTOM_SAFE_AREA_PADDING = 'pb-32';