Refactoring: standardize localStorage and add prefix

.vscode/settings.json

@@ -106,6 +106,7 @@
     "rseditor",
     "rsform",
     "rsforms",
+    "rsgraph",
     "rslang",
     "rstemplates",
     "SIDELIST",

rsconcept/frontend/src/app/ApplicationLayout.tsx

@@ -5,7 +5,7 @@ import Footer from '@/app/Footer';
 import Navigation from '@/app/Navigation';
 import { NavigationState } from '@/context/NavigationContext';
 import { useConceptTheme } from '@/context/ThemeContext';
-import { globalIDs } from '@/utils/constants';
+import { globals } from '@/utils/constants';
 
 function ApplicationLayout() {
   const { viewportHeight, mainHeight, showScroll } = useConceptTheme();
@@ -22,7 +22,7 @@ function ApplicationLayout() {
         <Navigation />
 
         <div
-          id={globalIDs.main_scroll}
+          id={globals.main_scroll}
           className='overflow-y-auto overscroll-none min-w-fit'
           style={{
             maxHeight: viewportHeight,

rsconcept/frontend/src/app/Navigation/NavigationButton.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 
 import { CProps } from '@/components/props';
-import { globalIDs } from '@/utils/constants';
+import { globals } from '@/utils/constants';
 
 interface NavigationButtonProps extends CProps.Titled {
   text?: string;
@@ -14,7 +14,7 @@ function NavigationButton({ icon, title, titleHtml, hideTitle, onClick, text }:
     <button
       type='button'
       tabIndex={-1}
-      data-tooltip-id={!!title || !!titleHtml ? globalIDs.tooltip : undefined}
+      data-tooltip-id={!!title || !!titleHtml ? globals.tooltip : undefined}
       data-tooltip-html={titleHtml}
       data-tooltip-content={title}
       data-tooltip-hidden={hideTitle}

rsconcept/frontend/src/components/ui/Button.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 
-import { globalIDs } from '@/utils/constants';
+import { globals } from '@/utils/constants';
 
 import { CProps } from '../props';
 
@@ -46,7 +46,7 @@ function Button({
         className,
         colors
       )}
-      data-tooltip-id={!!title || !!titleHtml ? globalIDs.tooltip : undefined}
+      data-tooltip-id={!!title || !!titleHtml ? globals.tooltip : undefined}
       data-tooltip-html={titleHtml}
       data-tooltip-content={title}
       data-tooltip-hidden={hideTitle}

rsconcept/frontend/src/components/ui/Checkbox.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { useMemo } from 'react';
 
-import { globalIDs } from '@/utils/constants';
+import { globals } from '@/utils/constants';
 
 import { CheckboxCheckedIcon } from '../Icons';
 import { CProps } from '../props';
@@ -54,7 +54,7 @@ function Checkbox({
       )}
       disabled={disabled}
       onClick={handleClick}
-      data-tooltip-id={!!title || !!titleHtml ? globalIDs.tooltip : undefined}
+      data-tooltip-id={!!title || !!titleHtml ? globals.tooltip : undefined}
       data-tooltip-html={titleHtml}
       data-tooltip-content={title}
       data-tooltip-hidden={hideTitle}

rsconcept/frontend/src/components/ui/CheckboxTristate.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { useMemo } from 'react';
 
-import { globalIDs } from '@/utils/constants';
+import { globals } from '@/utils/constants';
 
 import { CheckboxCheckedIcon, CheckboxNullIcon } from '../Icons';
 import { CheckboxProps } from './Checkbox';
@@ -57,7 +57,7 @@ function CheckboxTristate({
       )}
       disabled={disabled}
       onClick={handleClick}
-      data-tooltip-id={!!title || !!titleHtml ? globalIDs.tooltip : undefined}
+      data-tooltip-id={!!title || !!titleHtml ? globals.tooltip : undefined}
       data-tooltip-html={titleHtml}
       data-tooltip-content={title}
       data-tooltip-hidden={hideTitle}

rsconcept/frontend/src/components/ui/DropdownButton.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import { motion } from 'framer-motion';
 
 import { animateDropdownItem } from '@/styling/animations';
-import { globalIDs } from '@/utils/constants';
+import { globals } from '@/utils/constants';
 
 import { CProps } from '../props';
 
@@ -40,7 +40,7 @@ function DropdownButton({
         className
       )}
       variants={animateDropdownItem}
-      data-tooltip-id={!!title || !!titleHtml ? globalIDs.tooltip : undefined}
+      data-tooltip-id={!!title || !!titleHtml ? globals.tooltip : undefined}
       data-tooltip-html={titleHtml}
       data-tooltip-content={title}
       data-tooltip-hidden={hideTitle}

rsconcept/frontend/src/components/ui/MiniButton.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 
-import { globalIDs } from '@/utils/constants';
+import { globals } from '@/utils/constants';
 
 import { CProps } from '../props';
 
@@ -34,7 +34,7 @@ function MiniButton({
         },
         className
       )}
-      data-tooltip-id={!!title || !!titleHtml ? globalIDs.tooltip : undefined}
+      data-tooltip-id={!!title || !!titleHtml ? globals.tooltip : undefined}
       data-tooltip-html={titleHtml}
       data-tooltip-content={title}
       data-tooltip-hidden={hideTitle}

rsconcept/frontend/src/components/ui/SelectorButton.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 
-import { globalIDs } from '@/utils/constants';
+import { globals } from '@/utils/constants';
 
 import { CProps } from '../props';
 
@@ -38,7 +38,7 @@ function SelectorButton({
         className,
         !transparent && colors
       )}
-      data-tooltip-id={!!title || !!titleHtml ? globalIDs.tooltip : undefined}
+      data-tooltip-id={!!title || !!titleHtml ? globals.tooltip : undefined}
       data-tooltip-html={titleHtml}
       data-tooltip-content={title}
       data-tooltip-hidden={hideTitle}

rsconcept/frontend/src/components/ui/TabLabel.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import type { TabProps as TabPropsImpl } from 'react-tabs';
 import { Tab as TabImpl } from 'react-tabs';
 
-import { globalIDs } from '@/utils/constants';
+import { globals } from '@/utils/constants';
 
 import { CProps } from '../props';
 
@@ -21,7 +21,7 @@ function TabLabel({ label, title, titleHtml, hideTitle, className, ...otherProps
         'select-none hover:cursor-pointer',
         className
       )}
-      data-tooltip-id={!!title || !!titleHtml ? globalIDs.tooltip : undefined}
+      data-tooltip-id={!!title || !!titleHtml ? globals.tooltip : undefined}
       data-tooltip-html={titleHtml}
       data-tooltip-content={title}
       data-tooltip-hidden={hideTitle}

rsconcept/frontend/src/context/AuthContext.tsx

@@ -3,7 +3,6 @@
 import { createContext, useCallback, useContext, useLayoutEffect, useState } from 'react';
 
 import { type ErrorData } from '@/components/info/InfoError';
-import useLocalStorage from '@/hooks/useLocalStorage';
 import { IPasswordTokenData, IRequestPasswordData, IResetPasswordData, IUserLoginData } from '@/models/library';
 import { ICurrentUser } from '@/models/library';
 import { IUserSignupData } from '@/models/library';
@@ -53,7 +52,7 @@ interface AuthStateProps {
 
 export const AuthState = ({ children }: AuthStateProps) => {
   const { users } = useUsers();
-  const [user, setUser] = useLocalStorage<ICurrentUser | undefined>('user', undefined);
+  const [user, setUser] = useState<ICurrentUser | undefined>(undefined);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<ErrorData>(undefined);
 

rsconcept/frontend/src/context/NavigationContext.tsx

@@ -3,7 +3,7 @@
 import { createContext, useCallback, useContext, useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
-import { globalIDs } from '@/utils/constants';
+import { globals } from '@/utils/constants';
 
 interface INavigationContext {
   push: (path: string) => void;
@@ -43,7 +43,7 @@ export const NavigationState = ({ children }: NavigationStateProps) => {
 
   const scrollTop = useCallback(() => {
     window.scrollTo(0, 0);
-    const mainScroll = document.getElementById(globalIDs.main_scroll);
+    const mainScroll = document.getElementById(globals.main_scroll);
     if (mainScroll) {
       mainScroll.scroll(0, 0);
     }

rsconcept/frontend/src/context/ThemeContext.tsx

@@ -8,7 +8,7 @@ import useLocalStorage from '@/hooks/useLocalStorage';
 import { FontStyle } from '@/models/miscellaneous';
 import { animationDuration } from '@/styling/animations';
 import { darkT, IColorTheme, lightT } from '@/styling/color';
-import { globalIDs } from '@/utils/constants';
+import { globals, storage } from '@/utils/constants';
 
 interface IThemeContext {
   viewportHeight: string;
@@ -49,8 +49,8 @@ interface ThemeStateProps {
 }
 
 export const ThemeState = ({ children }: ThemeStateProps) => {
-  const [darkMode, setDarkMode] = useLocalStorage('darkMode', false);
+  const [darkMode, setDarkMode] = useLocalStorage(storage.themeDark, false);
-  const [mathFont, setMathFont] = useLocalStorage<FontStyle>('editor_font_math', 'math');
+  const [mathFont, setMathFont] = useLocalStorage<FontStyle>(storage.rseditFont, 'math');
   const [colors, setColors] = useState<IColorTheme>(lightT);
   const [noNavigation, setNoNavigation] = useState(false);
   const [noNavigationAnimation, setNoNavigationAnimation] = useState(false);
@@ -129,7 +129,7 @@ export const ThemeState = ({ children }: ThemeStateProps) => {
       <>
         <Tooltip
           float
-          id={`${globalIDs.tooltip}`}
+          id={`${globals.tooltip}`}
           layer='z-topmost'
           place='right-start'
           className={clsx('mt-3 translate-y-1/2', 'max-w-[20rem]')}

rsconcept/frontend/src/hooks/useLocalStorage.ts

@@ -2,9 +2,12 @@
 
 import { useEffect, useState } from 'react';
 
+import { storage } from '@/utils/constants';
+
 function useLocalStorage<ValueType>(key: string, defaultValue: ValueType | (() => ValueType)) {
+  const prefixedKey = `${storage.PREFIX}${key}`;
   const [value, setValue] = useState<ValueType>(() => {
-    const loadedJson = localStorage.getItem(key);
+    const loadedJson = localStorage.getItem(prefixedKey);
     if (loadedJson != null) {
       return JSON.parse(loadedJson) as ValueType;
     } else if (typeof defaultValue === 'function') {
@@ -16,11 +19,11 @@ function useLocalStorage<ValueType>(key: string, defaultValue: ValueType | (() =
 
   useEffect(() => {
     if (value === undefined) {
-      localStorage.removeItem(key);
+      localStorage.removeItem(prefixedKey);
     } else {
-      localStorage.setItem(key, JSON.stringify(value));
+      localStorage.setItem(prefixedKey, JSON.stringify(value));
     }
-  }, [key, value]);
+  }, [prefixedKey, value]);
 
   return [value, setValue] as [ValueType, typeof setValue];
 }

rsconcept/frontend/src/pages/LibraryPage/LibraryPage.tsx

@@ -12,6 +12,7 @@ import useQueryStrings from '@/hooks/useQueryStrings';
 import { ILibraryItem } from '@/models/library';
 import { ILibraryFilter, LibraryFilterStrategy } from '@/models/miscellaneous';
 import { filterFromStrategy } from '@/models/miscellaneousAPI';
+import { storage } from '@/utils/constants';
 
 import SearchPanel from './SearchPanel';
 import ViewLibrary from './ViewLibrary';
@@ -19,7 +20,7 @@ import ViewLibrary from './ViewLibrary';
 function LibraryPage() {
   const router = useConceptNavigation();
   const urlParams = useQueryStrings();
-  const searchFilter = (urlParams.get('filter') || null) as LibraryFilterStrategy | null;
+  const queryFilter = (urlParams.get('filter') || null) as LibraryFilterStrategy | null;
 
   const { user } = useAuth();
 
@@ -31,23 +32,19 @@ function LibraryPage() {
 
   const [query, setQuery] = useState('');
   const [strategy, setStrategy] = useLocalStorage<LibraryFilterStrategy>(
-    'search_strategy',
+    storage.librarySearchStrategy,
     LibraryFilterStrategy.MANUAL
   );
 
   useLayoutEffect(() => {
-    if (searchFilter === null) {
+    if (!queryFilter || !Object.values(LibraryFilterStrategy).includes(queryFilter)) {
       router.replace(`/library?filter=${strategy}`);
       return;
     }
-    const inputStrategy =
-      searchFilter && Object.values(LibraryFilterStrategy).includes(searchFilter)
-        ? searchFilter
-        : LibraryFilterStrategy.MANUAL;
     setQuery('');
-    setStrategy(inputStrategy);
+    setStrategy(queryFilter);
-    setFilter(filterFromStrategy(inputStrategy));
+    setFilter(filterFromStrategy(queryFilter));
-  }, [user, router, setQuery, setFilter, setStrategy, strategy, searchFilter]);
+  }, [user, router, setQuery, setFilter, setStrategy, strategy, queryFilter]);
 
   useLayoutEffect(() => {
     setShowScroll(true);

rsconcept/frontend/src/pages/LibraryPage/ViewLibrary.tsx

@@ -15,6 +15,7 @@ import useLocalStorage from '@/hooks/useLocalStorage';
 import useWindowSize from '@/hooks/useWindowSize';
 import { ILibraryItem } from '@/models/library';
 import { HelpTopic } from '@/models/miscellaneous';
+import { storage } from '@/utils/constants';
 
 import ItemIcons from './ItemIcons';
 
@@ -30,7 +31,7 @@ function ViewLibrary({ items, resetQuery }: ViewLibraryProps) {
   const intl = useIntl();
   const { user } = useAuth();
   const { getUserLabel } = useUsers();
-  const [itemsPerPage, setItemsPerPage] = useLocalStorage<number>('library_per_page', 50);
+  const [itemsPerPage, setItemsPerPage] = useLocalStorage<number>(storage.libraryPagination, 50);
 
   const handleOpenItem = (item: ILibraryItem) => router.push(`/rsforms/${item.id}`);
 

rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/EditorConstituenta.tsx

@@ -7,7 +7,7 @@ import { useMemo, useState } from 'react';
 import useLocalStorage from '@/hooks/useLocalStorage';
 import useWindowSize from '@/hooks/useWindowSize';
 import { ConstituentaID, IConstituenta } from '@/models/rsform';
-import { globalIDs } from '@/utils/constants';
+import { globals, storage } from '@/utils/constants';
 
 import { useRSEdit } from '../RSEditContext';
 import ViewConstituents from '../ViewConstituents';
@@ -31,7 +31,7 @@ function EditorConstituenta({ activeCst, isModified, setIsModified, onOpenEdit }
   const controller = useRSEdit();
   const windowSize = useWindowSize();
 
-  const [showList, setShowList] = useLocalStorage('rseditor-show-list', true);
+  const [showList, setShowList] = useLocalStorage(storage.rseditShowList, true);
   const [toggleReset, setToggleReset] = useState(false);
 
   const disabled = useMemo(
@@ -62,7 +62,7 @@ function EditorConstituenta({ activeCst, isModified, setIsModified, onOpenEdit }
   }
 
   function initiateSubmit() {
-    const element = document.getElementById(globalIDs.constituenta_editor) as HTMLFormElement;
+    const element = document.getElementById(globals.constituenta_editor) as HTMLFormElement;
     if (element) {
       element.requestSubmit();
     }
@@ -104,7 +104,7 @@ function EditorConstituenta({ activeCst, isModified, setIsModified, onOpenEdit }
         <FormConstituenta
           isMutable={!disabled}
           showList={showList}
-          id={globalIDs.constituenta_editor}
+          id={globals.constituenta_editor}
           constituenta={activeCst}
           isModified={isModified}
           toggleReset={toggleReset}

rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/EditorRSExpression.tsx

@@ -23,6 +23,7 @@ import { IConstituenta } from '@/models/rsform';
 import { getDefinitionPrefix } from '@/models/rsformAPI';
 import { IExpressionParse, IRSErrorDescription, SyntaxTree } from '@/models/rslang';
 import { TokenID } from '@/models/rslang';
+import { storage } from '@/utils/constants';
 import { labelTypification } from '@/utils/labels';
 
 import ParsingResult from './ParsingResult';
@@ -67,7 +68,7 @@ function EditorRSExpression({
   const [syntaxTree, setSyntaxTree] = useState<SyntaxTree>([]);
   const [expression, setExpression] = useState('');
   const [showAST, setShowAST] = useState(false);
-  const [showControls, setShowControls] = useLocalStorage('rseditor-show-controls', true);
+  const [showControls, setShowControls] = useLocalStorage(storage.rseditShowControls, true);
 
   useLayoutEffect(() => {
     setIsModified(false);

rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSLocalButton.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 
 import { CProps } from '@/components/props';
 import { TokenID } from '@/models/rslang';
-import { globalIDs } from '@/utils/constants';
+import { globals } from '@/utils/constants';
 
 interface RSLocalButtonProps extends CProps.Titled {
   text: string;
@@ -16,7 +16,7 @@ function RSLocalButton({ text, title, titleHtml, hideTitle, disabled, onInsert }
       type='button'
       tabIndex={-1}
       disabled={disabled}
-      data-tooltip-id={!!title || !!titleHtml ? globalIDs.tooltip : undefined}
+      data-tooltip-id={!!title || !!titleHtml ? globals.tooltip : undefined}
       data-tooltip-html={titleHtml}
       data-tooltip-content={title}
       data-tooltip-hidden={hideTitle}

rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSTokenButton.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 
 import { TokenID } from '@/models/rslang';
-import { globalIDs } from '@/utils/constants';
+import { globals } from '@/utils/constants';
 import { describeToken, labelToken } from '@/utils/labels';
 
 interface RSTokenButtonProps {
@@ -30,7 +30,7 @@ function RSTokenButton({ token, disabled, onInsert }: RSTokenButtonProps) {
           'w-[1.7rem] sm:w-[2.25rem]': label.length <= 3
         }
       )}
-      data-tooltip-id={globalIDs.tooltip}
+      data-tooltip-id={globals.tooltip}
       data-tooltip-html={describeToken(token)}
     >
       {label ? <span className='whitespace-nowrap'>{label}</span> : null}

rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/StatusBar.tsx

@@ -11,7 +11,7 @@ import { type IConstituenta } from '@/models/rsform';
 import { inferStatus } from '@/models/rsformAPI';
 import { IExpressionParse, ParsingStatus } from '@/models/rslang';
 import { colorBgCstStatus } from '@/styling/color';
-import { globalIDs } from '@/utils/constants';
+import { globals } from '@/utils/constants';
 import { labelExpressionStatus, prepareTooltip } from '@/utils/labels';
 
 import StatusIcon from './StatusIcon';
@@ -48,7 +48,7 @@ function StatusBar({ isModified, processing, constituenta, parseData, onAnalyze
         'duration-500 transition-colors'
       )}
       style={{ backgroundColor: processing ? colors.bgDefault : colorBgCstStatus(status, colors) }}
-      data-tooltip-id={globalIDs.tooltip}
+      data-tooltip-id={globals.tooltip}
       data-tooltip-html={prepareTooltip('Проверить определение', 'Ctrl + Q')}
       onClick={onAnalyze}
     >

rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/EditorRSForm.tsx

@@ -7,7 +7,7 @@ import Divider from '@/components/ui/Divider';
 import FlexColumn from '@/components/ui/FlexColumn';
 import { useAuth } from '@/context/AuthContext';
 import { useRSForm } from '@/context/RSFormContext';
-import { globalIDs } from '@/utils/constants';
+import { globals } from '@/utils/constants';
 
 import FormRSForm from './FormRSForm';
 import RSFormStats from './RSFormStats';
@@ -24,7 +24,7 @@ function EditorRSForm({ isModified, onDestroy, setIsModified }: EditorRSFormProp
   const { user } = useAuth();
 
   function initiateSubmit() {
-    const element = document.getElementById(globalIDs.library_item_editor) as HTMLFormElement;
+    const element = document.getElementById(globals.library_item_editor) as HTMLFormElement;
     if (element) {
       element.requestSubmit();
     }
@@ -51,7 +51,7 @@ function EditorRSForm({ isModified, onDestroy, setIsModified }: EditorRSFormProp
       />
       <div tabIndex={-1} onKeyDown={handleInput} className={clsx('flex flex-col sm:flex-row', 'sm:w-fit w-full')}>
         <FlexColumn className='px-4 pb-2'>
-          <FormRSForm id={globalIDs.library_item_editor} isModified={isModified} setIsModified={setIsModified} />
+          <FormRSForm id={globals.library_item_editor} isModified={isModified} setIsModified={setIsModified} />
 
           <Divider margins='my-1' />
 

rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/EditorTermGraph.tsx

@@ -14,7 +14,7 @@ import useLocalStorage from '@/hooks/useLocalStorage';
 import { GraphColoringScheme, GraphFilterParams } from '@/models/miscellaneous';
 import { ConstituentaID, CstType } from '@/models/rsform';
 import { colorBgGraphNode } from '@/styling/color';
-import { TIMEOUT_GRAPH_REFRESH } from '@/utils/constants';
+import { storage, TIMEOUT_GRAPH_REFRESH } from '@/utils/constants';
 
 import { useRSEdit } from '../RSEditContext';
 import GraphSidebar from './GraphSidebar';
@@ -33,7 +33,7 @@ function EditorTermGraph({ selected, setSelected, onOpenEdit }: EditorTermGraphP
   const controller = useRSEdit();
   const { colors } = useConceptTheme();
 
-  const [filterParams, setFilterParams] = useLocalStorage<GraphFilterParams>('graph_filter', {
+  const [filterParams, setFilterParams] = useLocalStorage<GraphFilterParams>(storage.rsgraphFilter, {
     noHermits: true,
     noTemplates: false,
     noTransitive: true,
@@ -55,10 +55,13 @@ function EditorTermGraph({ selected, setSelected, onOpenEdit }: EditorTermGraphP
 
   const nothingSelected = useMemo(() => selected.length === 0, [selected]);
 
-  const [layout, setLayout] = useLocalStorage<LayoutTypes>('graph_layout', 'treeTd2d');
+  const [layout, setLayout] = useLocalStorage<LayoutTypes>(storage.rsgraphLayout, 'treeTd2d');
-  const is3D = useMemo(() => layout.includes('3d'), [layout]);
+  const [coloringScheme, setColoringScheme] = useLocalStorage<GraphColoringScheme>(
-  const [coloringScheme, setColoringScheme] = useLocalStorage<GraphColoringScheme>('graph_coloring', 'type');
+    storage.rsgraphColoringScheme,
+    'type'
+  );
   const [orbit, setOrbit] = useState(false);
+  const is3D = useMemo(() => layout.includes('3d'), [layout]);
 
   const [hoverID, setHoverID] = useState<ConstituentaID | undefined>(undefined);
   const hoverCst = useMemo(() => {

rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ConstituentsSearch.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useLayoutEffect } from 'react';
+import { useCallback, useLayoutEffect, useState } from 'react';
 import { BiCog, BiFilterAlt } from 'react-icons/bi';
 
 import Dropdown from '@/components/ui/Dropdown';
@@ -14,7 +14,7 @@ import { applyGraphFilter } from '@/models/miscellaneousAPI';
 import { ConstituentaID, IConstituenta, IRSForm } from '@/models/rsform';
 import { createMockConstituenta, matchConstituenta } from '@/models/rsformAPI';
 import { extractGlobals } from '@/models/rslangAPI';
-import { prefixes } from '@/utils/constants';
+import { prefixes, storage } from '@/utils/constants';
 import { describeCstMatchMode, describeCstSource, labelCstMatchMode, labelCstSource } from '@/utils/labels';
 
 interface ConstituentsSearchProps {
@@ -25,9 +25,9 @@ interface ConstituentsSearchProps {
 }
 
 function ConstituentsSearch({ schema, activeID, activeExpression, setFiltered }: ConstituentsSearchProps) {
-  const [filterMatch, setFilterMatch] = useLocalStorage('side-filter-match', CstMatchMode.ALL);
+  const [filterMatch, setFilterMatch] = useLocalStorage(storage.cstFilterMatch, CstMatchMode.ALL);
-  const [filterText, setFilterText] = useLocalStorage('side-filter-text', '');
+  const [filterSource, setFilterSource] = useLocalStorage(storage.cstFilterGraph, DependencyMode.ALL);
-  const [filterSource, setFilterSource] = useLocalStorage('side-filter-dependency', DependencyMode.ALL);
+  const [filterText, setFilterText] = useState('');
 
   const matchModeMenu = useDropdown();
   const sourceMenu = useDropdown();

rsconcept/frontend/src/pages/RegisterPage.tsx

@@ -19,7 +19,7 @@ import ExpectedAnonymous from '@/components/wrap/ExpectedAnonymous';
 import { useAuth } from '@/context/AuthContext';
 import { useConceptNavigation } from '@/context/NavigationContext';
 import { type IUserSignupData } from '@/models/library';
-import { globalIDs, patterns } from '@/utils/constants';
+import { globals, patterns } from '@/utils/constants';
 
 function RegisterPage() {
   const router = useConceptNavigation();
@@ -74,10 +74,10 @@ function RegisterPage() {
         <div className='flex gap-12'>
           <FlexColumn>
             <div className='absolute'>
-              <Overlay id={globalIDs.password_tooltip} position='top-[4.8rem] left-[3.4rem] absolute'>
+              <Overlay id={globals.password_tooltip} position='top-[4.8rem] left-[3.4rem] absolute'>
                 <BiInfoCircle size='1.25rem' className='icon-primary' />
               </Overlay>
-              <Tooltip anchorSelect={`#${globalIDs.password_tooltip}`} offset={6}>
+              <Tooltip anchorSelect={`#${globals.password_tooltip}`} offset={6}>
                 <p>- используйте уникальный пароль</p>
                 <p>- портал функционирует в тестовом режиме</p>
               </Tooltip>

rsconcept/frontend/src/utils/constants.ts

@@ -29,15 +29,6 @@ export const TIMEOUT_GRAPH_REFRESH = 200;
  */
 export const EXTEOR_TRS_FILE = '.trs';
 
-/**
- * Resource relative URIs.
- */
-export const resources = {
-  graph_font: '/DejaVu.ttf',
-  privacy_policy: '/privacy.pdf',
-  logo: '/logo_full.svg'
-};
-
 /**
  * Numeric limitations.
  */
@@ -53,6 +44,15 @@ export const patterns = {
   library_alias: `.{1,${limits.library_alias_len}}`
 };
 
+/**
+ * Local URIs.
+ */
+export const resources = {
+  graph_font: '/DejaVu.ttf',
+  privacy_policy: '/privacy.pdf',
+  logo: '/logo_full.svg'
+};
+
 /**
  * Youtube IDs for embedding.
  */
@@ -61,7 +61,7 @@ export const youtube = {
 };
 
 /**
- * Constant URLs.
+ * External URLs.
  */
 export const urls = {
   concept: 'https://www.acconcept.ru/',
@@ -77,9 +77,32 @@ export const urls = {
 };
 
 /**
- * Global unique IDs.
+ * Local storage ID.
  */
-export const globalIDs = {
+export const storage = {
+  PREFIX: 'portal.',
+
+  themeDark: 'theme.dark',
+
+  rseditFont: 'rsedit.font',
+  rseditShowList: 'rsedit.show_list',
+  rseditShowControls: 'rsedit.show_controls',
+
+  librarySearchStrategy: 'library.search.strategy',
+  libraryPagination: 'library.pagination',
+
+  rsgraphFilter: 'rsgraph.filter',
+  rsgraphLayout: 'rsgraph.layout',
+  rsgraphColoringScheme: 'rsgraph.coloring_scheme',
+
+  cstFilterMatch: 'cst.filter.match',
+  cstFilterGraph: 'cst.filter.graph'
+};
+
+/**
+ * Global element ID.
+ */
+export const globals = {
   tooltip: 'global_tooltip',
   password_tooltip: 'password_tooltip',
   main_scroll: 'main_scroll',