From 4cec75bc3a484a6bc5710936959fc839adb6df14 Mon Sep 17 00:00:00 2001
From: mufazalov <mufazalov@yandex-team.ru>
Date: Wed, 19 Nov 2025 22:51:24 +0300
Subject: [PATCH] feat(useSelectedColumns): use meta settings

---
 src/utils/hooks/useSelectedColumns.ts | 61 ++++++++++++++++++---------
 1 file changed, 42 insertions(+), 19 deletions(-)

diff --git a/src/utils/hooks/useSelectedColumns.ts b/src/utils/hooks/useSelectedColumns.ts
index b799179ff..cb469a1a6 100644
--- a/src/utils/hooks/useSelectedColumns.ts
+++ b/src/utils/hooks/useSelectedColumns.ts
@@ -2,7 +2,7 @@ import React from 'react';
 
 import type {TableColumnSetupItem, TableColumnSetupProps} from '@gravity-ui/uikit';
 
-import {settingsManager} from '../../services/settings';
+import {useSetting} from '../../store/reducers/settings/useSetting';
 
 type OrderedColumn = {id: string; selected?: boolean};
 
@@ -24,25 +24,48 @@ export const useSelectedColumns = <T extends {name: string}>(
     defaultColumnsIds: string[],
     requiredColumnsIds?: string[],
 ) => {
-    const [orderedColumns, setOrderedColumns] = React.useState(() => {
-        const savedColumns = settingsManager.readUserSettingsValue(
-            storageKey,
-            defaultColumnsIds,
-        ) as unknown[];
-
-        const normalizedSavedColumns = savedColumns.map(parseSavedColumn);
-
-        return columns.reduce<OrderedColumn[]>((acc, column) => {
-            const savedColumn = normalizedSavedColumns.find((c) => c && c.id === column.name);
-            if (savedColumn) {
-                acc.push(savedColumn);
-            } else {
-                acc.push({id: column.name, selected: false});
+    const {value: savedColumns, saveValue: saveColumns} = useSetting<string[] | OrderedColumn[]>(
+        storageKey,
+    );
+
+    const normalizeSavedColumns = React.useCallback(
+        (columnsToUse: string[] | OrderedColumn[]) => {
+            const parsedSavedColumns = columnsToUse
+                .map(parseSavedColumn)
+                .filter((column): column is OrderedColumn => Boolean(column));
+
+            const needToNormalize =
+                (columnsToUse.length && typeof columnsToUse[0] === 'string') ||
+                parsedSavedColumns.length !== columns.length;
+
+            if (needToNormalize) {
+                return columns.reduce<OrderedColumn[]>((acc, column) => {
+                    const savedColumn = parsedSavedColumns.find((c) => c && c.id === column.name);
+                    if (savedColumn) {
+                        acc.push(savedColumn);
+                    } else {
+                        acc.push({id: column.name, selected: false});
+                    }
+                    return acc;
+                }, []);
             }
-            return acc;
-        }, []);
+
+            return parsedSavedColumns;
+        },
+        [columns],
+    );
+
+    const [orderedColumns, setOrderedColumns] = React.useState(() => {
+        return normalizeSavedColumns(savedColumns ?? defaultColumnsIds);
     });
 
+    React.useEffect(() => {
+        const rawColumns = savedColumns !== undefined ? savedColumns : defaultColumnsIds;
+        const normalizedColumns = normalizeSavedColumns(rawColumns);
+
+        setOrderedColumns(normalizedColumns);
+    }, [savedColumns, defaultColumnsIds]);
+
     const columnsToSelect = React.useMemo(() => {
         const preparedColumns = orderedColumns.reduce<(TableColumnSetupItem & {column: T})[]>(
             (acc, {id, selected}) => {
@@ -76,10 +99,10 @@ export const useSelectedColumns = <T extends {name: string}>(
         (value) => {
             const preparedColumns = value.map(({id, selected}) => ({id, selected}));
 
-            settingsManager.setUserSettingsValue(storageKey, preparedColumns);
+            saveColumns(preparedColumns);
             setOrderedColumns(preparedColumns);
         },
-        [storageKey],
+        [saveColumns],
     );
 
     return {