From 30eb320c19bc7451050c30c04f509a28ef0f5151 Mon Sep 17 00:00:00 2001
From: n4ze3m <n4ze3m@gmail.com>
Date: Sat, 12 Oct 2024 23:39:31 +0530
Subject: [PATCH] Fix: Improve settings layout and models refresh

Refine settings layout for better visual flow, enlarge settings sidebar for easier viewing, and adjust model refresh logic for more responsive updates.

Refactor: Add more visual weight to the settings panel and optimize model refresh logic.

Refactor: Enhance the visual appeal of settings panel by increasing its width and improving model refresh behavior for better user experience.
---
 src/components/Layouts/Header.tsx               | 12 +++++++-----
 src/components/Layouts/SettingsOptionLayout.tsx |  2 +-
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/Layouts/Header.tsx b/src/components/Layouts/Header.tsx
index 23d8266..3d3ba89 100644
--- a/src/components/Layouts/Header.tsx
+++ b/src/components/Layouts/Header.tsx
@@ -54,7 +54,9 @@ export const Header: React.FC<Props> = ({
   } = useQuery({
     queryKey: ["fetchModel"],
     queryFn: () => fetchChatModels({ returnEmpty: true }),
-    refetchInterval: 15000
+    refetchInterval: 15_000,
+    refetchIntervalInBackground: true,
+    placeholderData: (prev) => prev
   })
 
   const { data: prompts, isLoading: isPromptLoading } = useQuery({
@@ -121,7 +123,7 @@ export const Header: React.FC<Props> = ({
               localStorage.setItem("selectedModel", e)
             }}
             size="large"
-            loading={isModelsLoading || isModelsFetching}
+            loading={isModelsLoading}
             filterOption={(input, option) =>
               option.label.key.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }
@@ -205,9 +207,9 @@ export const Header: React.FC<Props> = ({
             {pathname === "/" &&
               messages.length > 0 &&
               !streaming &&
-              shareModeEnabled && <ShareBtn
-              historyId={historyId}
-              messages={messages} />}
+              shareModeEnabled && (
+                <ShareBtn historyId={historyId} messages={messages} />
+              )}
             <Tooltip title={t("githubRepository")}>
               <a
                 href="https://github.com/n4ze3m/page-assist"
diff --git a/src/components/Layouts/SettingsOptionLayout.tsx b/src/components/Layouts/SettingsOptionLayout.tsx
index 8d4d2cf..3128c61 100644
--- a/src/components/Layouts/SettingsOptionLayout.tsx
+++ b/src/components/Layouts/SettingsOptionLayout.tsx
@@ -58,7 +58,7 @@ export const SettingsLayout = ({ children }: { children: React.ReactNode }) => {
   return (
     <>
       <div className="mx-auto max-w-7xl lg:flex lg:gap-x-16 lg:px-8">
-        <aside className="flex lg:rounded-md bg-white lg:p-4 lg:mt-20 overflow-x-auto lg:border-0 border-b  py-4 lg:block lg:w-72 lg:flex-none  dark:bg-[#171717] dark:border-gray-600">
+        <aside className="flex lg:rounded-md bg-white lg:p-4 lg:mt-20 overflow-x-auto lg:border-0 border-b  py-4 lg:block lg:w-80 lg:flex-none  dark:bg-[#171717] dark:border-gray-600">
           <nav className="flex-none  px-4 sm:px-6 lg:px-0">
             <ul
               role="list"