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.
2026-09-16 05:10:42 -07:00 · 2026-01-27 17:11:38 -08:00
parent d8d9eeaa6a
commit a3cbe7f2b6
10 changed files with 455 additions and 249 deletions
@@ -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">
@@ -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 />
@@ -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>
  );
@@ -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) => {
@@ -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>
  );
 }
@@ -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'}
            >
@@ -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';
@@ -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>
  );
 }
@@ -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">
@@ -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';