Settings page design sweep (#382)

* settings page design sweep

* Updated step list on onboarding upload

* fixed aria label

---------

Co-authored-by: Lucas Oliveira <lucas.edu.oli@hotmail.com>

frontend/components/navigation.tsx

@@ -284,19 +284,19 @@ export function Navigation({
 			label: "Chat",
 			icon: MessageSquare,
 			href: "/chat",
-			active: pathname === "/" || pathname === "/chat",
+			active: pathname === "/" || pathname.startsWith("/chat"),
 		},
 		{
 			label: "Knowledge",
 			icon: Library,
 			href: "/knowledge",
-			active: pathname === "/knowledge",
+			active: pathname.startsWith("/knowledge"),
 		},
 		{
 			label: "Settings",
 			icon: Settings2,
 			href: "/settings",
-			active: pathname === "/settings",
+			active: pathname.startsWith("/settings"),
 		},
 	];
 

frontend/src/app/onboarding/components/onboarding-upload.tsx

@@ -15,7 +15,7 @@ const OnboardingUpload = ({ onComplete }: OnboardingUploadProps) => {
 	const [isUploading, setIsUploading] = useState(false);
 	const [currentStep, setCurrentStep] = useState<number | null>(null);
 
-	const STEP_LIST = ["Uploading your document", "Processing your document"];
+	const STEP_LIST = ["Uploading your document", "Generating embeddings", "Ingesting document", "Processing your document"];
 
 	// Query tasks to track completion
 	const { data: tasks } = useGetTasksQuery({

frontend/src/app/settings/components/model-providers.tsx

@@ -105,7 +105,7 @@ export const ModelProviders = () => {
 
 	return (
 		<>
-			<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
+			<div className="grid gap-6 xs:grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
 				{sortedProviderKeys.map((providerKey) => {
 					const {
 						name,
@@ -155,13 +155,14 @@ export const ModelProviders = () => {
 										<CardTitle className="flex flex-row items-center gap-2">
 											{name}
 											{isCurrentProvider && (
-												<div
+												<span
 													className={cn(
 														"h-2 w-2 rounded-full",
 														isProviderUnhealthy
 															? "bg-destructive"
 															: "bg-accent-emerald-foreground",
 													)}
+                          aria-label={isProviderUnhealthy ? "Error" : "Active"}
 												/>
 											)}
 										</CardTitle>

frontend/src/app/upload/[provider]/page.tsx

@@ -223,12 +223,10 @@ export default function UploadProviderPage() {
 
   if (isLoading) {
     return (
-      <div className="container mx-auto p-6">
+      <div className="flex items-center justify-center py-12">
-        <div className="flex items-center justify-center py-12">
+        <div className="text-center">
-          <div className="text-center">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
-            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
+          <p>Loading {getProviderDisplayName()} connector...</p>
-            <p>Loading {getProviderDisplayName()} connector...</p>
-          </div>
         </div>
       </div>
     );
@@ -236,7 +234,7 @@ export default function UploadProviderPage() {
 
   if (error || !connector) {
     return (
-      <div className="container mx-auto p-6">
+      <>
         <div className="mb-6">
           <Button
             variant="ghost"
@@ -260,13 +258,13 @@ export default function UploadProviderPage() {
             </Button>
           </div>
         </div>
-      </div>
+      </>
     );
   }
 
   if (connector.status !== "connected") {
     return (
-      <div className="container mx-auto p-6">
+      <>
         <div className="mb-6">
           <Button
             variant="ghost"
@@ -293,13 +291,13 @@ export default function UploadProviderPage() {
             </Button>
           </div>
         </div>
-      </div>
+      </>
     );
   }
 
   if (!connector.hasAccessToken) {
     return (
-      <div className="container mx-auto p-6">
+      <>
         <div className="mb-6">
           <Button
             variant="ghost"
@@ -326,14 +324,14 @@ export default function UploadProviderPage() {
             </Button>
           </div>
         </div>
-      </div>
+      </>
     );
   }
 
   const hasSelectedFiles = selectedFiles.length > 0;
 
   return (
-    <div className="container mx-auto max-w-3xl px-6">
+    <>
       <div className="mb-8 flex gap-2 items-center">
         <Button variant="ghost" onClick={() => router.back()} size="icon">
           <ArrowLeft size={18} />
@@ -394,6 +392,6 @@ export default function UploadProviderPage() {
           </Tooltip>
         </div>
       </div>
-    </div>
+    </>
   );
 }

frontend/src/components/chat-renderer.tsx

@@ -95,8 +95,8 @@ export function ChatRenderer({
 	};
 
 	// List of paths with smaller max-width
-	const smallWidthPaths = ["/settings/connector/new"];
+	const smallWidthPaths = ["/settings", "/upload"];
-	const isSmallWidthPath = smallWidthPaths.includes(pathname);
+	const isSmallWidthPath = smallWidthPaths.some(path => pathname.startsWith(path));
 
 	const x = showLayout ? "0px" : `calc(-${SIDEBAR_WIDTH / 2}px + 50vw)`;
 	const y = showLayout ? "0px" : `calc(-${HEADER_HEIGHT / 2}px + 50vh)`;