refactor(layout): simplify layout structure and improve scroll handling in Navbar

surfsense_web/components/chat/ChatPanel/ChatPanelView.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { useAtom, useAtomValue } from "jotai";
-import { AlertCircle, Pencil, Play, Podcast, RefreshCw, Sparkles } from "lucide-react";
+import { AlertCircle, Play, RefreshCw, Sparkles } from "lucide-react";
 import { motion } from "motion/react";
-import { useCallback, useContext, useTransition } from "react";
+import { useCallback } from "react";
 import { cn } from "@/lib/utils";
 import { activeChatAtom } from "@/stores/chat/active-chat.atom";
 import { chatUIAtom } from "@/stores/chat/chat-ui.atom";
@@ -79,16 +79,9 @@ export function ChatPanelView(props: ChatPanelViewProps) {
 							animate={{ opacity: 1 }}
 							transition={{ duration: 0.3 }}
 						>
-							<div
-								role="button"
-								tabIndex={0}
+							<button
+								type="button"
 								onClick={handleGeneratePost}
-								onKeyDown={(e) => {
-									if (e.key === "Enter") {
-										e.preventDefault();
-										handleGeneratePost();
-									}
-								}}
 								className={cn(
 									"relative w-full rounded-2xl p-4 transition-all duration-300 cursor-pointer group overflow-hidden",
 									"border-2",
@@ -154,7 +147,7 @@ export function ChatPanelView(props: ChatPanelViewProps) {
 										<ConfigModal generatePodcast={generatePodcast} />
 									</div>
 								</div>
-							</div>
+							</button>
 						</motion.div>
 					</div>
 				) : (

surfsense_web/components/homepage/navbar.tsx

@@ -19,21 +19,15 @@ export const Navbar = () => {
 	];
 
 	useEffect(() => {
-		const handleScroll = (e: Event) => {
-			const target = e.target as HTMLElement;
-			setIsScrolled(target.scrollTop > 20);
+		if (typeof window === "undefined") return;
+
+		const handleScroll = () => {
+			setIsScrolled(window.scrollY > 20);
 		};
 
-		// Find the scrollable container (the div with overflow-auto in root layout)
-		const scrollContainer = document.querySelector(".h-\\[100dvh\\].w-\\[100vw\\].overflow-auto");
-
-		if (scrollContainer) {
-			// Check initial scroll position
-			setIsScrolled(scrollContainer.scrollTop > 20);
-
-			scrollContainer.addEventListener("scroll", handleScroll);
-			return () => scrollContainer.removeEventListener("scroll", handleScroll);
-		}
+		handleScroll();
+		window.addEventListener("scroll", handleScroll);
+		return () => window.removeEventListener("scroll", handleScroll);
 	}, []);
 
 	return (

surfsense_web/components/onboard/add-provider-step.tsx

@@ -28,7 +28,7 @@ import {
 	SelectValue,
 } from "@/components/ui/select";
 import { LANGUAGES } from "@/contracts/enums/languages";
-import { getModelsByProvider, LLM_MODELS } from "@/contracts/enums/llm-models";
+import { getModelsByProvider } from "@/contracts/enums/llm-models";
 import { LLM_PROVIDERS } from "@/contracts/enums/llm-providers";
 import { type CreateLLMConfig, useLLMConfigs } from "@/hooks/use-llm-configs";
 import { cn } from "@/lib/utils";
@@ -255,7 +255,6 @@ export function AddProviderStep({
 									<PopoverTrigger asChild>
 										<Button
 											variant="outline"
-											role="combobox"
 											aria-expanded={modelComboboxOpen}
 											className="w-full justify-between font-normal"
 										>

surfsense_web/components/settings/model-config-manager.tsx

@@ -550,7 +550,6 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 								<PopoverTrigger asChild>
 									<Button
 										variant="outline"
-										role="combobox"
 										aria-expanded={modelComboboxOpen}
 										className="w-full justify-between font-normal"
 									>