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">
<main className="relative h-dvh 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
setSidebarOpen={setSidebarOpen}
setOpenModelSettings={setOpenModelSettings}

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

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