iod/page-assist
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: restructure Layout and SettingsLayout components for improved responsiveness and layout consistency

Browse Source
This commit is contained in:
n4ze3m 2025-02-08 13:30:08 +05:30
parent 40698e02d7
commit d315a39793
2 changed files with 88 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Layouts/Layout.tsx
View File

@ -39,9 +39,6 @@ export default function OptionLayout({
<div className="flex h-full w-full"> <div className="flex h-full w-full">
<main className="relative h-dvh w-full"> <main className="relative h-dvh w-full">
<div className="relative z-10 w-full"> <div className="relative z-10 w-full">
<div className="pointer-events-none absolute inset-x-0 top-0 z-10 h-24 overflow-hidden sm:h-20">
<div className="bgGradientMask bg-background h-dvh w-screen"></div>
</div>
<Header <Header
setSidebarOpen={setSidebarOpen} setSidebarOpen={setSidebarOpen}
setOpenModelSettings={setOpenModelSettings} setOpenModelSettings={setOpenModelSettings}

174
src/components/Layouts/SettingsOptionLayout.tsx
View File

@ -54,93 +54,95 @@ const LinkComponent = (item: {
export const SettingsLayout = ({ children }: { children: React.ReactNode }) => { export const SettingsLayout = ({ children }: { children: React.ReactNode }) => {
const location = useLocation() const location = useLocation()
const { t } = useTranslation(["settings", "common", "openai"]) const { t } = useTranslation(["settings", "common", "openai"])
return ( return (
<> <div className="flex min-h-screen -z-10 w-full flex-col">
<div className="mx-auto max-w-7xl lg:flex lg:gap-x-16 lg:px-8"> <main className="relative w-full flex-1">
<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"> <div className="mx-auto w-full h-full custom-scrollbar overflow-y-auto">
<nav className="flex-none px-4 sm:px-6 lg:px-0"> <div className="flex flex-col lg:flex-row lg:gap-x-16 lg:px-24">
<ul <aside className="sticky sm:mt-0 mt-14 top-0 bg-white dark:bg-[#171717] border-b dark:border-gray-600 lg:border-0 lg:bg-transparent lg:dark:bg-transparent">
role="list" <nav className="w-full overflow-x-auto px-4 py-4 sm:px-6 lg:px-0 lg:py-0 lg:mt-20">
className="flex gap-x-3 gap-y-1 whitespace-nowrap lg:flex-col"> <ul
<LinkComponent role="list"
href="/settings" className="flex flex-row lg:flex-col gap-x-3 gap-y-1 min-w-max lg:min-w-0">
name={t("generalSettings.title")} <LinkComponent
icon={OrbitIcon} href="/settings"
current={location.pathname} name={t("generalSettings.title")}
/> icon={OrbitIcon}
<LinkComponent current={location.pathname}
href="/settings/rag" />
name={t("rag.title")} <LinkComponent
icon={CombineIcon} href="/settings/rag"
current={location.pathname} name={t("rag.title")}
/> icon={CombineIcon}
<LinkComponent current={location.pathname}
href="/settings/ollama" />
name={t("ollamaSettings.title")} <LinkComponent
icon={OllamaIcon} href="/settings/ollama"
current={location.pathname} name={t("ollamaSettings.title")}
/> icon={OllamaIcon}
{import.meta.env.BROWSER === "chrome" && ( current={location.pathname}
<LinkComponent />
href="/settings/chrome" {import.meta.env.BROWSER === "chrome" && (
name={t("chromeAiSettings.title")} <LinkComponent
icon={ChromeIcon} href="/settings/chrome"
current={location.pathname} name={t("chromeAiSettings.title")}
beta icon={ChromeIcon}
/> current={location.pathname}
)} beta
<LinkComponent />
href="/settings/openai" )}
name={t("openai:settings")} <LinkComponent
icon={CpuIcon} href="/settings/openai"
current={location.pathname} name={t("openai:settings")}
beta icon={CpuIcon}
/> current={location.pathname}
<LinkComponent beta
href="/settings/model" />
name={t("manageModels.title")} <LinkComponent
current={location.pathname} href="/settings/model"
icon={BrainCircuitIcon} name={t("manageModels.title")}
/> current={location.pathname}
<LinkComponent icon={BrainCircuitIcon}
href="/settings/knowledge" />
name={ <LinkComponent
<div className="inline-flex items-center gap-2"> href="/settings/knowledge"
{t("manageKnowledge.title")} name={
</div> <div className="inline-flex items-center gap-2">
} {t("manageKnowledge.title")}
icon={BlocksIcon} </div>
current={location.pathname} }
/> icon={BlocksIcon}
<LinkComponent current={location.pathname}
href="/settings/prompt" />
name={t("managePrompts.title")} <LinkComponent
icon={BookIcon} href="/settings/prompt"
current={location.pathname} name={t("managePrompts.title")}
/> icon={BookIcon}
<LinkComponent current={location.pathname}
href="/settings/share" />
name={t("manageShare.title")} <LinkComponent
icon={ShareIcon} href="/settings/share"
current={location.pathname} name={t("manageShare.title")}
/> icon={ShareIcon}
<LinkComponent current={location.pathname}
href="/settings/about" />
name={t("about.title")} <LinkComponent
icon={InfoIcon} href="/settings/about"
current={location.pathname} name={t("about.title")}
/> icon={InfoIcon}
</ul> current={location.pathname}
</nav> />
</aside> </ul>
</nav>
<main className={"px-4 py-16 sm:px-6 lg:flex-auto lg:px-0 lg:py-20"}> </aside>
<div className="mx-auto max-w-2xl space-y-16 sm:space-y-10 lg:mx-0 lg:max-w-none"> <main className="flex-1 px-4 py-8 sm:px-6 lg:px-0 lg:py-20">
{children} <div className="mx-auto max-w-4xl space-y-8 sm:space-y-10">
{children}
</div>
</main>
</div> </div>
</main> </div>
</div> </main>
</> </div>
) )
} }