apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-04-26 17:26:23 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: enhance user settings page with tab navigation and default tab handling, update ProfileContent to use Next.js Image component, and improve sidebar user profile dropdown functionality

Browse source
This commit is contained in:
Anish Sarkar 2026-03-08 19:54:12 +05:30
parent 0b028bab49
commit f08ca26e3e
4 changed files with 44 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

1
surfsense_web/app/dashboard/[search_space_id]/user-settings/components/ProfileContent.tsx
View file

@ -26,6 +26,7 @@ function AvatarDisplay({ url, fallback }: { url?: string; fallback: string }) {
height={64}
className="h-16 w-16 rounded-xl object-cover"
onError={() => setErrorUrl(url)}
unoptimized
/>
);
}

23
surfsense_web/app/dashboard/[search_space_id]/user-settings/page.tsx
View file

@ -2,6 +2,8 @@
import { UserKey, User } from "lucide-react";
import { useTranslations } from "next-intl";
import { useRouter, useSearchParams } from "next/navigation";
import { useCallback } from "react";
import {
Tabs,
TabsContent,
@ -11,13 +13,32 @@ import {
import { ApiKeyContent } from "./components/ApiKeyContent";
import { ProfileContent } from "./components/ProfileContent";
const VALID_TABS = ["profile", "api-key"] as const;
const DEFAULT_TAB = "profile";
export default function UserSettingsPage() {
const t = useTranslations("userSettings");
const router = useRouter();
const searchParams = useSearchParams();
const tabParam = searchParams.get("tab") ?? "";
const activeTab = VALID_TABS.includes(tabParam as (typeof VALID_TABS)[number])
? tabParam
: DEFAULT_TAB;
const handleTabChange = useCallback(
(value: string) => {
const params = new URLSearchParams(searchParams.toString());
params.set("tab", value);
router.replace(`?${params.toString()}`, { scroll: false });
},
[router, searchParams]
);
return (
<div className="h-full overflow-y-auto">
<div className="mx-auto w-full max-w-4xl px-4 py-10">
<Tabs defaultValue="profile" className="w-full">
<Tabs value={activeTab} onValueChange={handleTabChange} className="w-full">
<TabsList showBottomBorder>
<TabsTrigger value="profile">
<User className="mr-2 h-4 w-4" />