From 346fceeb74bfad3ac9429e8f0fcd3f20694f6e23 Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Sun, 22 Mar 2026 03:14:59 +0100
Subject: [PATCH] feat: add SettingsSectionsContext for sidebar section
 communication

---
 .../modals/SettingsSectionsContext.tsx        | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 packages/web/src/components/modals/SettingsSectionsContext.tsx

diff --git a/packages/web/src/components/modals/SettingsSectionsContext.tsx b/packages/web/src/components/modals/SettingsSectionsContext.tsx
new file mode 100644
index 00000000..478eb959
--- /dev/null
+++ b/packages/web/src/components/modals/SettingsSectionsContext.tsx
@@ -0,0 +1,55 @@
+import React, { createContext, useContext, useState, useCallback, useRef } from 'react';
+
+export interface SettingsSection {
+  id: string;
+  label: string;
+}
+
+interface SettingsSectionsContextValue {
+  sections: SettingsSection[];
+  activeSection: string;
+  scrollToSection: (id: string) => void;
+  scrollContainerRef: React.RefObject<HTMLDivElement>;
+  setSections: (sections: SettingsSection[]) => void;
+  setActiveSection: (id: string) => void;
+  setScrollToSection: (fn: (id: string) => void) => void;
+}
+
+const SettingsSectionsContext = createContext<SettingsSectionsContextValue | null>(null);
+
+export function SettingsSectionsProvider({ children }: { children: React.ReactNode }) {
+  const [sections, setSections] = useState<SettingsSection[]>([]);
+  const [activeSection, setActiveSection] = useState('');
+  const [scrollFn, setScrollFn] = useState<((id: string) => void) | null>(null);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
+  const scrollToSection = useCallback((id: string) => {
+    scrollFn?.(id);
+  }, [scrollFn]);
+
+  // setScrollToSection receives a function, so wrap in updater to avoid
+  // React interpreting it as a state updater function
+  const setScrollToSectionStable = useCallback((fn: (id: string) => void) => {
+    setScrollFn(() => fn);
+  }, []);
+
+  return (
+    <SettingsSectionsContext.Provider
+      value={{
+        sections,
+        activeSection,
+        scrollToSection,
+        scrollContainerRef,
+        setSections,
+        setActiveSection,
+        setScrollToSection: setScrollToSectionStable,
+      }}
+    >
+      {children}
+    </SettingsSectionsContext.Provider>
+  );
+}
+
+export function useSettingsSectionsContext() {
+  return useContext(SettingsSectionsContext);
+}