Refactor FloatingGenerateBox for improved code organization and readability

- Cleaned up import statements for better structure and consistency.
- Adjusted formatting and spacing in the FloatingGenerateBox component for enhanced readability.
- Streamlined the use of hooks and state management within the component.
- Ensured consistent styling and layout adjustments for better user experience.

app/src/components/Generation/FloatingGenerateBox.tsx

@@ -1,7 +1,7 @@
+import { useMatchRoute } from '@tanstack/react-router';
 import { AnimatePresence, motion } from 'framer-motion';
 import { Loader2, MessageSquare, Sparkles } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
-import { useMatchRoute } from '@tanstack/react-router';
 import { Button } from '@/components/ui/button';
 import { Form, FormControl, FormField, FormItem, FormMessage } from '@/components/ui/form';
 import {
@@ -12,21 +12,24 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { Textarea } from '@/components/ui/textarea';
+import { useToast } from '@/components/ui/use-toast';
 import { LANGUAGE_OPTIONS } from '@/lib/constants/languages';
 import { useGenerationForm } from '@/lib/hooks/useGenerationForm';
 import { useProfile, useProfiles } from '@/lib/hooks/useProfiles';
-import { useStory, useAddStoryItem } from '@/lib/hooks/useStories';
+import { useAddStoryItem, useStory } from '@/lib/hooks/useStories';
-import { useUIStore } from '@/stores/uiStore';
-import { useStoryStore } from '@/stores/storyStore';
-import { useToast } from '@/components/ui/use-toast';
 import { cn } from '@/lib/utils/cn';
+import { useStoryStore } from '@/stores/storyStore';
+import { useUIStore } from '@/stores/uiStore';
 
 interface FloatingGenerateBoxProps {
   isPlayerOpen?: boolean;
   showVoiceSelector?: boolean;
 }
 
-export function FloatingGenerateBox({ isPlayerOpen = false, showVoiceSelector = false }: FloatingGenerateBoxProps) {
+export function FloatingGenerateBox({
+  isPlayerOpen = false,
+  showVoiceSelector = false,
+}: FloatingGenerateBoxProps) {
   const selectedProfileId = useUIStore((state) => state.selectedProfileId);
   const setSelectedProfileId = useUIStore((state) => state.setSelectedProfileId);
   const { data: selectedProfile } = useProfile(selectedProfileId || '');
@@ -63,7 +66,8 @@ export function FloatingGenerateBox({ isPlayerOpen = false, showVoiceSelector =
         } catch (error) {
           toast({
             title: 'Failed to add to story',
-            description: error instanceof Error ? error.message : 'Could not add generation to story',
+            description:
+              error instanceof Error ? error.message : 'Could not add generation to story',
             variant: 'destructive',
           });
         }
@@ -159,7 +163,7 @@ export function FloatingGenerateBox({ isPlayerOpen = false, showVoiceSelector =
       clearTimeout(timeoutId);
       textarea.removeEventListener('input', adjustHeight);
     };
-  }, [formValue, isInstructMode, isExpanded]);
+  }, [isExpanded]);
 
   async function onSubmit(data: Parameters<typeof handleSubmit>[0]) {
     await handleSubmit(data, selectedProfileId);
@@ -171,8 +175,8 @@ export function FloatingGenerateBox({ isPlayerOpen = false, showVoiceSelector =
       className={cn(
         'fixed right-auto',
         isStoriesRoute
-          // Position aligned with story list: after sidebar + padding, width 360px
+          ? // Position aligned with story list: after sidebar + padding, width 360px
-          ? 'left-[calc(5rem+2rem)] w-[360px]'
+            'left-[calc(5rem+2rem)] w-[360px]'
           : 'left-[calc(5rem+2rem)] w-[calc((100%-5rem-4rem)/2-1rem)]',
       )}
       style={{
@@ -192,10 +196,7 @@ export function FloatingGenerateBox({ isPlayerOpen = false, showVoiceSelector =
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)}>
             <div className="flex gap-2">
-              <motion.div
+              <motion.div className="flex-1" transition={{ duration: 0.3, ease: 'easeOut' }}>
-                className="flex-1"
-                transition={{ duration: 0.3, ease: 'easeOut' }}
-              >
                 {isInstructMode && (
                   <span className="text-xs text-accent font-medium mb-1 block">
                     Delivery instructions: