Refactor React context providers

client/src/components/Chat/ConversationMessage/index.tsx

@@ -70,7 +70,7 @@ const ConversationMessage = ({
   const { t } = useTranslation();
   const [isLoadingStepsShown, setLoadingStepsShown] = useState(false);
   const { envConfig } = useContext(DeviceContext);
-  const { setChatOpen } = useContext(ChatContext);
+  const { setChatOpen } = useContext(ChatContext.Setters);
   const { openFileModal } = useContext(FileModalContext);
   const { locale } = useContext(LocaleContext);
 

client/src/components/Chat/NLInput.tsx

@@ -51,7 +51,7 @@ const NLInput = ({
   const { t } = useTranslation();
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const [isComposing, setComposition] = useState(false);
-  const { setPromptGuideOpen } = useContext(UIContext);
+  const { setPromptGuideOpen } = useContext(UIContext.PromptGuide);
   const { envConfig } = useContext(DeviceContext);
 
   useEffect(() => {

client/src/components/Chat/index.tsx

@@ -39,22 +39,22 @@ const blurInput = () => {
 
 const Chat = () => {
   const { t } = useTranslation();
-  const { isRightPanelOpen, setRightPanelOpen, tab } = useContext(UIContext);
+  const { isRightPanelOpen, setRightPanelOpen } = useContext(
+    UIContext.RightPanel,
+  );
+  const { tab } = useContext(UIContext.Tab);
   const { apiUrl } = useContext(DeviceContext);
-  const { selectedBranch } = useContext(SearchContext);
+  const { selectedBranch } = useContext(SearchContext.SelectedBranch);
+  const { conversation, isChatOpen, submittedQuery, selectedLines, threadId } =
+    useContext(ChatContext.Values);
   const {
-    conversation,
+    setThreadId,
+    setSelectedLines,
+    setSubmittedQuery,
     setConversation,
-    isChatOpen,
     setChatOpen,
     setShowTooltip,
-    submittedQuery,
-    setSubmittedQuery,
-    selectedLines,
-    setSelectedLines,
-    threadId,
-    setThreadId,
-  } = useContext(ChatContext);
+  } = useContext(ChatContext.Setters);
   const {
     navigateConversationResults,
     navigateRepoPath,

client/src/components/CodeBlock/CodeFull/CodeContainer.tsx

@@ -67,7 +67,7 @@ const CodeContainer = ({
     isLoading: false,
     lineNumber: -1,
   });
-  const { selectedBranch } = useContext(SearchContext);
+  const { selectedBranch } = useContext(SearchContext.SelectedBranch);
   const { navigatedItem } = useContext(AppNavigationContext);
 
   const getHoverableContent = useCallback(

client/src/components/CodeBlock/CodeFull/index.tsx

@@ -113,8 +113,8 @@ const CodeFull = ({
     setSelectedLines,
     setConversation,
     setThreadId,
-  } = useContext(ChatContext);
-  const { setRightPanelOpen } = useContext(UIContext);
+  } = useContext(ChatContext.Setters);
+  const { setRightPanelOpen } = useContext(UIContext.RightPanel);
   const { navigateFullResult } = useAppNavigation();
 
   const [isSearchActive, setSearchActive] = useState(false);

client/src/components/Filters/index.tsx

@@ -14,9 +14,7 @@ import {
   FILTER_TEXT_ANIMATION,
   FILTER_PARENT_ANIMATION,
 } from '../../consts/animations';
-import { saveJsonToStorage, SEARCH_HISTORY_KEY } from '../../services/storage';
 import useAppNavigation from '../../hooks/useAppNavigation';
-import { SearchType } from '../../types/general';
 import { UIContext } from '../../context/uiContext';
 import FilterSection from './FilterSection';
 
@@ -27,9 +25,9 @@ type Props = {
 
 const Filters = ({ showHeader = true, forceOpen }: Props) => {
   const { t } = useTranslation();
-  const { filters, setFilters, inputValue, setInputValue, setSearchHistory } =
-    useContext(SearchContext);
-  const { isFiltersOpen, setFiltersOpen } = useContext(UIContext);
+  const { filters, setFilters } = useContext(SearchContext.Filters);
+  const { inputValue, setInputValue } = useContext(SearchContext.InputValue);
+  const { isFiltersOpen, setFiltersOpen } = useContext(UIContext.Filters);
   const [openSections, setOpenSections] = useState<string[]>([]);
   const [newFilters, setNewFilters] = useState(filters);
   const [hasFiltersChanged, setFiltersChanged] = useState(false);
@@ -78,18 +76,6 @@ const Filters = ({ showHeader = true, forceOpen }: Props) => {
 
     setFilters(newFilters);
     navigateSearch(result);
-    setSearchHistory((prev) => {
-      const newHistory = [
-        {
-          searchType: SearchType.REGEX,
-          query: result,
-          timestamp: new Date().toISOString(),
-        },
-        ...prev,
-      ].slice(0, 29);
-      saveJsonToStorage(SEARCH_HISTORY_KEY, newHistory);
-      return newHistory;
-    });
   }, [newFilters]);
 
   const handleFiltersChange = useCallback(

client/src/components/IdeNavigation/index.tsx

@@ -10,8 +10,8 @@ import DirEntry from './DirEntry';
 
 const IdeNavigation = () => {
   const { navigatedItem } = useContext(AppNavigationContext);
-  const { tab } = useContext(UIContext);
-  const { selectedBranch } = useContext(SearchContext);
+  const { tab } = useContext(UIContext.Tab);
+  const { selectedBranch } = useContext(SearchContext.SelectedBranch);
   const [files, setFiles] = useState<DirectoryEntry[]>([]);
   const { navigateFullResult } = useContext(AppNavigationContext);
 

client/src/components/NavBar/index.tsx

@@ -17,12 +17,10 @@ type Props = {
 
 const NavBar = ({ isSkeleton }: Props) => {
   const { t } = useTranslation();
-  const {
-    setBugReportModalOpen,
-    setShouldShowWelcome,
-    setGithubConnected,
-    setSettingsOpen,
-  } = useContext(UIContext);
+  const { setSettingsOpen } = useContext(UIContext.Settings);
+  const { setBugReportModalOpen } = useContext(UIContext.BugReport);
+  const { setShouldShowWelcome } = useContext(UIContext.Onboarding);
+  const { setGithubConnected } = useContext(UIContext.GitHubConnected);
   const { openLink, isSelfServe, os, envConfig } = useContext(DeviceContext);
   const { tabs, setActiveTab, activeTab, handleRemoveTab } =
     useContext(TabsContext);

client/src/components/PageTemplate/BranchSelector.tsx

@@ -28,9 +28,11 @@ const BranchSelector = () => {
   useOnClickOutside(contextMenuRef, () => setOpen(false));
 
   const { apiUrl, isSelfServe } = useContext(DeviceContext);
-  const { tab } = useContext(UIContext);
+  const { tab } = useContext(UIContext.Tab);
   const { repositories, setRepositories } = useContext(RepositoriesContext);
-  const { selectedBranch, setSelectedBranch } = useContext(SearchContext);
+  const { selectedBranch, setSelectedBranch } = useContext(
+    SearchContext.SelectedBranch,
+  );
 
   const currentRepo = useMemo(() => {
     return repositories?.find((r) => r.ref === tab.key);

client/src/components/PageTemplate/RepoHomeBtn.tsx

@@ -8,7 +8,7 @@ import { Repository } from '../../icons';
 const RepoHomeBtn = () => {
   const { t } = useTranslation();
   const { navigateRepoPath } = useContext(AppNavigationContext);
-  const { tab } = useContext(UIContext);
+  const { tab } = useContext(UIContext.Tab);
 
   return (
     <Button

client/src/components/PromptGuidePopup/index.tsx

@@ -11,7 +11,9 @@ import PromptSvg from './PromptSvg';
 const PromptGuidePopup = () => {
   const { t } = useTranslation();
   const { openLink, setEnvConfig, envConfig } = useContext(DeviceContext);
-  const { isPromptGuideOpen, setPromptGuideOpen } = useContext(UIContext);
+  const { isPromptGuideOpen, setPromptGuideOpen } = useContext(
+    UIContext.PromptGuide,
+  );
 
   const handlePromptGuideClose = useCallback(() => {
     setPromptGuideOpen(false);

client/src/components/RepoCard/index.tsx

@@ -60,7 +60,7 @@ const RepoCard = ({
   indexedBranches,
 }: Props) => {
   const { t } = useTranslation();
-  const { isGithubConnected } = useContext(UIContext);
+  const { isGithubConnected } = useContext(UIContext.GitHubConnected);
   const { locale } = useContext(LocaleContext);
   const { handleAddTab, tabs, handleRemoveTab } = useContext(TabsContext);
   const isGh = useMemo(() => provider === 'github', [provider]);

client/src/components/ReportBugModal/index.tsx

@@ -3,6 +3,7 @@ import React, {
   useCallback,
   useContext,
   useEffect,
+  useMemo,
   useState,
 } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
@@ -15,6 +16,7 @@ import { EMAIL_REGEX } from '../../consts/validations';
 import { saveBugReport, saveCrashReport } from '../../services/api';
 import { DeviceContext } from '../../context/deviceContext';
 import { TabsContext } from '../../context/tabsContext';
+import { getJsonFromStorage, USER_DATA_FORM } from '../../services/storage';
 import ConfirmImg from './ConfirmImg';
 
 type Props = {
@@ -36,11 +38,18 @@ const ReportBugModal = ({
   });
   const [isSubmitted, setSubmitted] = useState(false);
   const [serverCrashedMessage, setServerCrashedMessage] = useState('');
-  const { onBoardingState, isBugReportModalOpen, setBugReportModalOpen } =
-    useContext(UIContext);
+  const { isBugReportModalOpen, setBugReportModalOpen } = useContext(
+    UIContext.BugReport,
+  );
   const { envConfig, listen, os, release } = useContext(DeviceContext);
   const { handleRemoveTab, setActiveTab, activeTab } = useContext(TabsContext);
 
+  const userForm = useMemo(
+    (): { email: string; firstName: string; lastName: string } | null =>
+      getJsonFromStorage(USER_DATA_FORM),
+    [],
+  );
+
   useEffect(() => {
     listen('server-crashed', (event) => {
       console.log(event);
@@ -56,14 +65,12 @@ const ReportBugModal = ({
   }, [errorBoundaryMessage]);
 
   useEffect(() => {
-    const savedForm = onBoardingState['STEP_DATA_FORM'];
-
     setForm((prev) => ({
       ...prev,
-      name: (savedForm?.firstName || '') + (savedForm?.lastName || ''),
-      email: savedForm?.email || '',
+      name: (userForm?.firstName || '') + (userForm?.lastName || ''),
+      email: userForm?.email || '',
     }));
-  }, [onBoardingState]);
+  }, [userForm]);
 
   const onChange = useCallback(
     (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {

client/src/components/ResultsPageHeader/index.tsx

@@ -1,7 +1,6 @@
 import React, { useContext } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Collapsed, Expanded } from '../../icons';
-import { MenuListItemType } from '../ContextMenu';
 import Tabs from '../../components/Tabs';
 import SkeletonItem from '../../components/SkeletonItem';
 import { UIContext } from '../../context/uiContext';
@@ -13,28 +12,15 @@ type Props = {
   loading?: boolean;
 };
 
-const dropdownItems = [
-  {
-    text: 'Best match',
-    type: MenuListItemType.DEFAULT,
-  },
-  {
-    text: 'Last indexed',
-    type: MenuListItemType.DEFAULT,
-  },
-  {
-    text: 'Frequency',
-    type: MenuListItemType.DEFAULT,
-  },
-];
-
 const PageHeader = ({
   resultsNumber,
   showCollapseControls,
   loading,
 }: Props) => {
   const { t } = useTranslation();
-  const { symbolsCollapsed, setSymbolsCollapsed } = useContext(UIContext);
+  const { symbolsCollapsed, setSymbolsCollapsed } = useContext(
+    UIContext.Symbols,
+  );
   return (
     <div className="w-full flex justify-between items-center mb-5 select-none">
       <div>
@@ -73,7 +59,6 @@ const PageHeader = ({
         ) : (
           ''
         )}
-        {/*<Dropdown items={dropdownItems} btnHint="Sort by:" />*/}
       </div>
     </div>
   );

client/src/components/SearchInput/index.tsx

@@ -11,7 +11,6 @@ import { useTranslation } from 'react-i18next';
 import { useArrowKeyNavigation } from '../../hooks/useArrowNavigationHook';
 import { SearchContext } from '../../context/searchContext';
 import { parseFilters } from '../../utils';
-import { saveJsonToStorage, SEARCH_HISTORY_KEY } from '../../services/storage';
 import { getAutocomplete } from '../../services/api';
 import {
   LangResult,
@@ -20,7 +19,6 @@ import {
 } from '../../types/results';
 import { mapResults } from '../../mappers/results';
 import useAppNavigation from '../../hooks/useAppNavigation';
-import { SearchType } from '../../types/general';
 import useKeyboardNavigation from '../../hooks/useKeyboardNavigation';
 import { UIContext } from '../../context/uiContext';
 import AutocompleteMenu from './AutocompleteMenu';
@@ -40,17 +38,13 @@ const getAutocompleteThrottled = throttle(
 
 function SearchInput() {
   const { t } = useTranslation();
-  const {
-    inputValue,
-    setInputValue,
-    setFilters,
-    filters,
-    setSearchHistory,
-    globalRegex,
-    setGlobalRegex,
-    selectedBranch,
-  } = useContext(SearchContext);
-  const { tab } = useContext(UIContext);
+  const { inputValue, setInputValue } = useContext(SearchContext.InputValue);
+  const { tab } = useContext(UIContext.Tab);
+  const { selectedBranch } = useContext(SearchContext.SelectedBranch);
+  const { setFilters, filters } = useContext(SearchContext.Filters);
+  const { globalRegex, setGlobalRegex } = useContext(
+    SearchContext.RegexEnabled,
+  );
   const [options, setOptions] = useState<SuggestionType[]>([]);
   const inputRef = useRef<HTMLInputElement>(null);
   const { navigateSearch, navigateRepoPath } = useAppNavigation();
@@ -191,18 +185,6 @@ function SearchInput() {
       }
       navigateSearch(val);
       closeMenu();
-      setSearchHistory((prev) => {
-        const newHistory = [
-          {
-            query: val,
-            searchType: SearchType.REGEX,
-            timestamp: new Date().toISOString(),
-          },
-          ...prev,
-        ].slice(0, 29);
-        saveJsonToStorage(SEARCH_HISTORY_KEY, newHistory);
-        return newHistory;
-      });
     },
     [tab.name, selectedBranch],
   );

client/src/components/Settings/Preferences/index.tsx

@@ -34,7 +34,7 @@ export const themesMap = {
 
 const Preferences = () => {
   const { t } = useTranslation();
-  const { theme, setTheme } = useContext(UIContext);
+  const { theme, setTheme } = useContext(UIContext.Theme);
 
   return (
     <div className="w-full relative">

client/src/components/Settings/Settings.stories.tsx

@@ -25,8 +25,6 @@ export const Default = () => {
             repositories: [],
             setRepositories: () => {},
             fetchRepos: () => {},
-            localSyncError: false,
-            githubSyncError: false,
           }}
         >
           <Settings />

client/src/components/Settings/index.tsx

@@ -29,7 +29,7 @@ const Settings = () => {
     settingsSection,
     isSettingsOpen,
     setSettingsOpen,
-  } = useContext(UIContext);
+  } = useContext(UIContext.Settings);
 
   useEffect(() => {
     const action = isSettingsOpen ? 'add' : 'remove';

client/src/components/StatusBar/index.tsx

@@ -14,7 +14,7 @@ import StatusItem from './StatusItem';
 const StatusBar = () => {
   const { t } = useTranslation();
 
-  const { setBugReportModalOpen } = useContext(UIContext);
+  const { setBugReportModalOpen } = useContext(UIContext.BugReport);
   const { openLink } = useContext(DeviceContext);
   const [isOnline, setIsOnline] = useState(true);
   const [discordLink, setDiscordLink] = useState(