feat: make generation bar and layout fully responsive (#32)

Author: KevinBonnoron

client/src/components/generation/generation-input.tsx

@@ -171,7 +171,7 @@ export function GenerationInput({ voiceId, generate, isGenerating, capabilities,
           <div className="space-y-1.5 border-b px-3 py-2">
             {/* Speed + Tone */}
             <div className="flex flex-wrap items-center gap-2">
-              <ToggleGroup type="single" size="sm" variant="outline" value={activeSpeed} onValueChange={applySpeed}>
+              <ToggleGroup type="single" size="sm" variant="outline" value={activeSpeed} onValueChange={applySpeed} className="flex-wrap">
                 {SPEED_PRESETS.map(({ key, rate, labelKey }) => (
                   <ToggleGroupItem key={key} value={key} className="gap-1 text-xs">
                     <span className="size-1.5 shrink-0 rounded-full" style={{ background: getSpeedBorderColor(rate) }} />
@@ -183,7 +183,7 @@ export function GenerationInput({ voiceId, generate, isGenerating, capabilities,
               {capabilities.tone && (
                 <>
                   <div className="h-4 w-px shrink-0 bg-border" />
-                  <ToggleGroup type="single" size="sm" variant="outline" value={activeTone} onValueChange={applyTone}>
+                  <ToggleGroup type="single" size="sm" variant="outline" value={activeTone} onValueChange={applyTone} className="flex-wrap">
                     {TONE_PRESETS.map(({ key, labelKey }) => (
                       <ToggleGroupItem key={key} value={key} className="text-xs">
                         {t(labelKey)}

client/src/components/layout/app-layout.tsx

@@ -1,22 +1,32 @@
 import type { ReactNode } from 'react';
 import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
+import { useIsDesktop, useIsMobile } from '@/hooks/use-mobile';
 import { AppSidebar } from './app-sidebar';
+import { BottomNav } from './bottom-nav';
 import { GenerationBar } from './generation-bar';
 
 export function AppLayout({ children }: { children: ReactNode }) {
+  const isMobile = useIsMobile();
+  const isDesktop = useIsDesktop();
+
   return (
-    <SidebarProvider className="!h-svh">
-      <AppSidebar />
+    <SidebarProvider className="!h-svh" open={!isMobile && isDesktop} onOpenChange={() => {}}>
+      {!isMobile && <AppSidebar />}
       <SidebarInset className="relative overflow-hidden">
         <main className="absolute inset-0 overflow-x-hidden overflow-y-auto">
-          <div className="p-6 pb-48">{children}</div>
+          <div className={`p-6 ${isMobile ? 'pb-64' : 'pb-48'}`}>{children}</div>
           <div className="sticky bottom-0 -mt-16 h-16 bg-gradient-to-t from-background to-transparent pointer-events-none" />
         </main>
-        <div className="absolute bottom-0 left-0 right-0 z-10 pointer-events-none">
+        <div className={`absolute left-0 right-0 z-10 pointer-events-none ${isMobile ? 'bottom-14' : 'bottom-0'}`}>
           <div className="pointer-events-auto">
             <GenerationBar />
           </div>
         </div>
+        {isMobile && (
+          <div className="absolute bottom-0 left-0 right-0 z-20">
+            <BottomNav />
+          </div>
+        )}
       </SidebarInset>
     </SidebarProvider>
   );

client/src/components/layout/bottom-nav.tsx

@@ -0,0 +1,36 @@
+import { Link, useRouterState } from '@tanstack/react-router';
+import { AudioLines, Box, Clock, LayoutDashboard, Settings } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { cn } from '@/lib/utils';
+
+export function BottomNav() {
+  const { t } = useTranslation();
+  const router = useRouterState();
+  const currentPath = router.location.pathname;
+
+  const navItems = [
+    { label: t('nav.voices'), href: '/voices', icon: AudioLines, primary: false },
+    { label: t('nav.history'), href: '/history', icon: Clock, primary: false },
+    { label: t('nav.dashboard'), href: '/', icon: LayoutDashboard, primary: true },
+    { label: t('nav.models'), href: '/models', icon: Box, primary: false },
+    { label: t('nav.settings'), href: '/settings', icon: Settings, primary: false },
+  ];
+
+  return (
+    <div className="flex h-14 items-center justify-around border-t bg-background px-2">
+      {navItems.map((item) => (
+        <Link
+          key={item.href}
+          to={item.href}
+          className={cn(
+            'flex flex-col items-center gap-0.5 rounded-md px-3 py-1.5 text-muted-foreground transition-colors hover:text-foreground',
+            currentPath === item.href && 'text-foreground',
+          )}
+        >
+          <item.icon className={item.primary ? 'size-7' : 'size-5'} />
+          <span className="text-[10px]">{item.label}</span>
+        </Link>
+      ))}
+    </div>
+  );
+}

client/src/components/layout/generation-bar.tsx

@@ -127,9 +127,9 @@ export function GenerationBar() {
   const capabilities = { tone: selectedModel?.supportsInstruct ?? false, effects: selectedModel?.supportsEffects ?? false };
 
   return (
-    <div className="px-16 pb-16 pt-2 flex justify-center">
-      <div className="w-full max-w-6xl">
-        <div className="rounded-xl shadow-2xl ring-2 ring-border/60 bg-card">
+    <div className="flex justify-center md:px-8 md:pb-10 md:pt-2 lg:px-16 lg:pb-16">
+      <div className="w-full md:max-w-6xl">
+        <div className="rounded-none md:rounded-xl shadow-2xl ring-2 ring-border/60 bg-card">
           <div className={`transition-opacity${isGenerating ? ' pointer-events-none opacity-50' : ''}`}>
             <GenerationInput voiceId={voiceId} generate={generate} isGenerating={isGenerating} capabilities={capabilities} voiceSelector={<VoiceCombobox voiceId={voiceId} onChange={setVoiceId} />} />
           </div>

client/src/hooks/use-mobile.ts

@@ -1,19 +1,34 @@
 import * as React from 'react';
 
 const MOBILE_BREAKPOINT = 768;
+const DESKTOP_BREAKPOINT = 1280;
 
 export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
+  const [isMobile, setIsMobile] = React.useState(() => window.innerWidth < MOBILE_BREAKPOINT);
 
   React.useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
     };
     mql.addEventListener('change', onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
     return () => mql.removeEventListener('change', onChange);
   }, []);
 
-  return !!isMobile;
+  return isMobile;
+}
+
+export function useIsDesktop() {
+  const [isDesktop, setIsDesktop] = React.useState(() => window.innerWidth >= DESKTOP_BREAKPOINT);
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(min-width: ${DESKTOP_BREAKPOINT}px)`);
+    const onChange = () => {
+      setIsDesktop(window.innerWidth >= DESKTOP_BREAKPOINT);
+    };
+    mql.addEventListener('change', onChange);
+    return () => mql.removeEventListener('change', onChange);
+  }, []);
+
+  return isDesktop;
 }