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/components/ui/circle-button.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils/cn';
+
+export interface CircleButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  icon: React.ComponentType<{ className?: string }>;
+}
+
+const CircleButton = React.forwardRef<HTMLButtonElement, CircleButtonProps>(
+  ({ className, icon: Icon, ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        className={cn(
+          'h-7 w-7 rounded-full flex items-center justify-center',
+          'hover:bg-accent transition-colors',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+          'disabled:pointer-events-none disabled:opacity-50',
+          className
+        )}
+        {...props}
+      >
+        <Icon className="h-3.5 w-3.5 text-muted-foreground/60" />
+      </button>
+    );
+  }
+);
+CircleButton.displayName = 'CircleButton';
+
+export { CircleButton };