mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-04-25 16:56:22 +02:00
15560f297f
- Replace 6 static imports in user-settings-dialog with dynamic imports - Replace 8 static imports in search-space-settings-dialog with dynamic imports - Each settings tab loads content only when selected - Reduces initial settings dialog bundle size - All tab functionality preserved
91 lines
3.2 KiB
TypeScript
91 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import dynamic from "next/dynamic";
|
|
import { useAtom } from "jotai";
|
|
import { Globe, KeyRound, Monitor, Receipt, Sparkles, User } from "lucide-react";
|
|
import { useTranslations } from "next-intl";
|
|
import { useMemo } from "react";
|
|
import { userSettingsDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
|
|
import { SettingsDialog } from "@/components/settings/settings-dialog";
|
|
import { usePlatform } from "@/hooks/use-platform";
|
|
|
|
const ProfileContent = dynamic(
|
|
() => import("@/app/dashboard/[search_space_id]/user-settings/components/ProfileContent").then(m => ({ default: m.ProfileContent })),
|
|
{ ssr: false }
|
|
);
|
|
const ApiKeyContent = dynamic(
|
|
() => import("@/app/dashboard/[search_space_id]/user-settings/components/ApiKeyContent").then(m => ({ default: m.ApiKeyContent })),
|
|
{ ssr: false }
|
|
);
|
|
const PromptsContent = dynamic(
|
|
() => import("@/app/dashboard/[search_space_id]/user-settings/components/PromptsContent").then(m => ({ default: m.PromptsContent })),
|
|
{ ssr: false }
|
|
);
|
|
const CommunityPromptsContent = dynamic(
|
|
() => import("@/app/dashboard/[search_space_id]/user-settings/components/CommunityPromptsContent").then(m => ({ default: m.CommunityPromptsContent })),
|
|
{ ssr: false }
|
|
);
|
|
const PurchaseHistoryContent = dynamic(
|
|
() => import("@/app/dashboard/[search_space_id]/user-settings/components/PurchaseHistoryContent").then(m => ({ default: m.PurchaseHistoryContent })),
|
|
{ ssr: false }
|
|
);
|
|
const DesktopContent = dynamic(
|
|
() => import("@/app/dashboard/[search_space_id]/user-settings/components/DesktopContent").then(m => ({ default: m.DesktopContent })),
|
|
{ ssr: false }
|
|
);
|
|
|
|
export function UserSettingsDialog() {
|
|
const t = useTranslations("userSettings");
|
|
const [state, setState] = useAtom(userSettingsDialogAtom);
|
|
const { isDesktop } = usePlatform();
|
|
|
|
const navItems = useMemo(
|
|
() => [
|
|
{ value: "profile", label: t("profile_nav_label"), icon: <User className="h-4 w-4" /> },
|
|
{
|
|
value: "api-key",
|
|
label: t("api_key_nav_label"),
|
|
icon: <KeyRound className="h-4 w-4" />,
|
|
},
|
|
{
|
|
value: "prompts",
|
|
label: "My Prompts",
|
|
icon: <Sparkles className="h-4 w-4" />,
|
|
},
|
|
{
|
|
value: "community-prompts",
|
|
label: "Community Prompts",
|
|
icon: <Globe className="h-4 w-4" />,
|
|
},
|
|
{
|
|
value: "purchases",
|
|
label: "Purchase History",
|
|
icon: <Receipt className="h-4 w-4" />,
|
|
},
|
|
...(isDesktop
|
|
? [{ value: "desktop", label: "Desktop", icon: <Monitor className="h-4 w-4" /> }]
|
|
: []),
|
|
],
|
|
[t, isDesktop]
|
|
);
|
|
|
|
return (
|
|
<SettingsDialog
|
|
open={state.open}
|
|
onOpenChange={(open) => setState((prev) => ({ ...prev, open }))}
|
|
title={t("title")}
|
|
navItems={navItems}
|
|
activeItem={state.initialTab}
|
|
onItemChange={(tab) => setState((prev) => ({ ...prev, initialTab: tab }))}
|
|
>
|
|
<div className="pt-4">
|
|
{state.initialTab === "profile" && <ProfileContent />}
|
|
{state.initialTab === "api-key" && <ApiKeyContent />}
|
|
{state.initialTab === "prompts" && <PromptsContent />}
|
|
{state.initialTab === "community-prompts" && <CommunityPromptsContent />}
|
|
{state.initialTab === "purchases" && <PurchaseHistoryContent />}
|
|
{state.initialTab === "desktop" && <DesktopContent />}
|
|
</div>
|
|
</SettingsDialog>
|
|
);
|
|
}
|