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

feat: update settings navigation to include section parameters for improved user experience

Browse source
This commit is contained in:
Anish Sarkar 2026-02-21 22:55:54 +05:30
parent c7736aa62c
commit ccf8c063da
9 changed files with 47 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

2
surfsense_web/app/dashboard/[search_space_id]/onboard/page.tsx
View file

@ -259,7 +259,7 @@ export default function OnboardPage() {
You can add more configurations and customize settings anytime in{" "}
<button
type="button"
onClick={() => router.push(`/dashboard/${searchSpaceId}/settings`)}
onClick={() => router.push(`/dashboard/${searchSpaceId}/settings?section=general`)}
className="text-violet-500 hover:underline"
>
Settings

22
surfsense_web/app/dashboard/[search_space_id]/settings/page.tsx
View file

@ -16,7 +16,7 @@ import {
X,
} from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import { useParams, useRouter } from "next/navigation";
import { useParams, useRouter, useSearchParams } from "next/navigation";
import { useTranslations } from "next-intl";
import { useCallback, useEffect, useState } from "react";
import { PublicChatSnapshotsManager } from "@/components/public-chat-snapshots/public-chat-snapshots-manager";
@ -248,7 +248,7 @@ function SettingsContent({
{/* Section Header */}
<AnimatePresence mode="wait">
<motion.div
key={activeSection + "-header"}
key={`${activeSection}-header`}
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -10 }}
@ -317,14 +317,26 @@ function SettingsContent({
);
}
const VALID_SECTIONS = new Set(settingsNavItems.map((item) => item.id));
const DEFAULT_SECTION = "general";
export default function SettingsPage() {
const router = useRouter();
const params = useParams();
const searchParams = useSearchParams();
const searchSpaceId = Number(params.search_space_id);
const [activeSection, setActiveSection] = useState("general");
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
// Track settings section view
const sectionParam = searchParams.get("section");
const activeSection = sectionParam && VALID_SECTIONS.has(sectionParam) ? sectionParam : DEFAULT_SECTION;
const handleSectionChange = useCallback(
(section: string) => {
router.replace(`/dashboard/${searchSpaceId}/settings?section=${section}`, { scroll: false });
},
[router, searchSpaceId]
);
useEffect(() => {
trackSettingsViewed(searchSpaceId, activeSection);
}, [searchSpaceId, activeSection]);
@ -344,7 +356,7 @@ export default function SettingsPage() {
<div className="flex h-full w-full overflow-hidden bg-background md:rounded-xl md:border md:shadow-sm">
<SettingsSidebar
activeSection={activeSection}
onSectionChange={setActiveSection}
onSectionChange={handleSectionChange}
onBackToApp={handleBackToApp}
isOpen={isSidebarOpen}
onClose={() => setIsSidebarOpen(false)}

22
surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
View file

@ -731,7 +731,7 @@ function CreateInviteDialog({
</code>
<Button variant="outline" size="sm" onClick={copyLink} className="shrink-0">
{copiedLink ? (
<Check className="h-4 w-4 text-emerald-500" />
<Check className="h-4 w-4" />
) : (
<Copy className="h-4 w-4" />
)}
@ -902,7 +902,7 @@ function AllInvitesDialog({
{invites.map((invite) => (
<div
key={invite.id}
className="rounded-lg border border-border/40 p-3 space-y-2.5 transition-colors hover:bg-muted/30"
className="rounded-lg border border-border/40 p-3 space-y-2.5"
>
<div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-2 min-w-0">
@ -929,7 +929,7 @@ function AllInvitesDialog({
</div>
<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant="ghost" size="icon" className="h-7 w-7 shrink-0 text-destructive hover:text-destructive">
<Button variant="ghost" size="icon" className="h-7 w-7 shrink-0 text-muted-foreground hover:text-destructive">
<Trash2 className="h-3.5 w-3.5" />
</Button>
</AlertDialogTrigger>
@ -954,14 +954,16 @@ function AllInvitesDialog({
</AlertDialog>
</div>
<div className="flex items-center gap-2 rounded-md bg-muted p-2">
<code className="flex-1 min-w-0 text-sm select-all overflow-x-auto whitespace-nowrap">
{typeof window !== "undefined"
? `${window.location.origin}/invite/${invite.invite_code}`
: `/invite/${invite.invite_code}`}
</code>
<Button variant="outline" size="sm" className="shrink-0" onClick={() => copyLink(invite)}>
<div className="flex-1 min-w-0 overflow-x-auto scrollbar-hide">
<code className="text-sm select-all whitespace-nowrap">
{typeof window !== "undefined"
? `${window.location.origin}/invite/${invite.invite_code}`
: `/invite/${invite.invite_code}`}
</code>
</div>
<Button variant="ghost" size="sm" className="shrink-0" onClick={() => copyLink(invite)}>
{copiedId === invite.id ? (
<Check className="h-4 w-4 text-emerald-500" />
<Check className="h-4 w-4" />
) : (
<Copy className="h-4 w-4" />
)}