Refactor App layout and enhance UI components for better usability

- Changed the default active tab in the App component from 'profiles' to 'main'.
- Improved the layout of the main content area to better accommodate different views, including profiles, generation forms, and history.
- Updated Sidebar component to reflect the new tab structure with a 'main' tab.
- Enhanced the GenerationForm to utilize the selected profile from the UI store, improving user feedback when no profile is selected.
- Added a new CircleButton component for better icon button interactions.
- Adjusted styles in various components for improved responsiveness and visual consistency.

app/src/App.tsx

@@ -14,7 +14,7 @@ import { isTauri, startServer, setupWindowCloseHandler } from '@/lib/tauri';
 let serverStarting = false;
 
 function App() {
-  const [activeTab, setActiveTab] = useState('profiles');
+  const [activeTab, setActiveTab] = useState('main');
   const [serverReady, setServerReady] = useState(false);
 
   // Setup window close handler and auto-start server when running in Tauri (production only)
@@ -84,38 +84,41 @@ function App() {
   }
 
   return (
-    <div className="min-h-screen bg-background flex flex-col">
-      <div className="flex flex-1">
+    <div className="h-screen bg-background flex flex-col overflow-hidden">
+      <div className="flex flex-1 min-h-0 overflow-hidden">
         <Sidebar activeTab={activeTab} onTabChange={setActiveTab} />
 
-        <main className="flex-1 ml-20 pb-20">
-          <div className="container mx-auto px-8 py-8 max-w-7xl">
-            {activeTab === 'profiles' && (
-              <div className="space-y-4">
-                <ProfileList />
-              </div>
-            )}
-
-            {activeTab === 'generate' && (
-              <div className="space-y-4">
-                <GenerationForm />
-              </div>
-            )}
-
-            {activeTab === 'history' && (
-              <div className="space-y-4">
-                <HistoryTable />
-              </div>
-            )}
-
-            {activeTab === 'settings' && (
-              <div className="space-y-4">
+        <main className="flex-1 ml-20 overflow-hidden flex flex-col">
+          <div className="container mx-auto px-8 py-8 max-w-[1800px] h-full overflow-hidden flex flex-col">
+            {activeTab === 'settings' ? (
+              <div className="space-y-4 overflow-y-auto">
                 <div className="grid gap-4 md:grid-cols-2">
                   <ConnectionForm />
                   <ServerStatus />
                 </div>
                 <ModelManagement />
               </div>
+            ) : (
+              // 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">
+                {/* 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>
+                  
+                  {/* Generator - Bottom Left */}
+                  <div className="shrink-0">
+                    <GenerationForm />
+                  </div>
+                </div>
+
+                {/* Right Column - History */}
+                <div className="flex flex-col min-h-0 overflow-hidden">
+                  <HistoryTable />
+                </div>
+              </div>
             )}
           </div>
         </main>