mirror of
https://github.com/jamiepine/voicebox.git
synced 2026-09-20 07:10:40 -07:00
Enhance FloatingGenerateBox with auto-resizing textarea and default voice selection
- Added auto-resizing functionality to the textarea in FloatingGenerateBox, improving user experience when inputting text. - Implemented logic to set the first voice profile as default if none is selected, ensuring a smoother workflow. - Updated StoryContent to remove hardcoded height for the generate box, simplifying layout calculations. - Refactored StoryTrackEditor to improve background styling for better visual consistency.
This commit is contained in:
@@ -31,9 +31,6 @@ import { useStoryPlayback } from '@/lib/hooks/useStoryPlayback';
|
||||
import { useStoryStore } from '@/stores/storyStore';
|
||||
import { SortableStoryChatItem } from './StoryChatItem';
|
||||
|
||||
// Height of the floating generate box plus some padding
|
||||
const GENERATE_BOX_HEIGHT = 160;
|
||||
|
||||
export function StoryContent() {
|
||||
const selectedStoryId = useStoryStore((state) => state.selectedStoryId);
|
||||
const { data: story, isLoading } = useStory(selectedStoryId);
|
||||
@@ -68,8 +65,8 @@ export function StoryContent() {
|
||||
// Track editor is shown when story has items
|
||||
const hasBottomBar = story && story.items.length > 0;
|
||||
|
||||
// Calculate dynamic bottom padding: track editor + generate box + gap
|
||||
const bottomPadding = hasBottomBar ? trackEditorHeight + GENERATE_BOX_HEIGHT + 24 : 0;
|
||||
// Calculate dynamic bottom padding: track editor + gap
|
||||
const bottomPadding = hasBottomBar ? trackEditorHeight + 24 : 0;
|
||||
|
||||
// Drag and drop sensors
|
||||
const sensors = useSensors(
|
||||
|
||||
@@ -345,7 +345,7 @@ export function StoryTrackEditor({ storyId, items }: StoryTrackEditorProps) {
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-0 left-0 right-0 border-t bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60 z-50">
|
||||
<div className="border-t bg-card overflow-hidden relative" ref={containerRef}>
|
||||
<div className="border-t bg-background/30 backdrop-blur-2xl overflow-hidden relative" ref={containerRef}>
|
||||
{/* Resize handle at top */}
|
||||
<button
|
||||
type="button"
|
||||
|
||||
Reference in New Issue
Block a user