Flatten user preferences in user store (#2587)

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/common/__tests__/user-store.test.ts

@@ -60,13 +60,13 @@ describe("user store tests", () => {
     it("allows setting and getting preferences", () => {
       const us = UserStore.getInstance();
 
-      us.preferences.httpsProxy = "abcd://defg";
+      us.httpsProxy = "abcd://defg";
 
-      expect(us.preferences.httpsProxy).toBe("abcd://defg");
+      expect(us.httpsProxy).toBe("abcd://defg");
-      expect(us.preferences.colorTheme).toBe(UserStore.defaultTheme);
+      expect(us.colorTheme).toBe(UserStore.defaultTheme);
 
-      us.preferences.colorTheme = "light";
+      us.colorTheme = "light";
-      expect(us.preferences.colorTheme).toBe("light");
+      expect(us.colorTheme).toBe("light");
     });
 
     it("correctly resets theme to default value", async () => {
@@ -74,9 +74,9 @@ describe("user store tests", () => {
 
       us.isLoaded = true;
 
-      us.preferences.colorTheme = "some other theme";
+      us.colorTheme = "some other theme";
       await us.resetTheme();
-      expect(us.preferences.colorTheme).toBe(UserStore.defaultTheme);
+      expect(us.colorTheme).toBe(UserStore.defaultTheme);
     });
 
     it("correctly calculates if the last seen version is an old release", () => {

src/common/request.ts

@@ -6,7 +6,7 @@ import { UserStore } from "./user-store";
 // https://github.com/lensapp/lens/issues/459
 
 function getDefaultRequestOpts(): Partial<request.Options> {
-  const { httpsProxy, allowUntrustedCAs } = UserStore.getInstance().preferences;
+  const { httpsProxy, allowUntrustedCAs } = UserStore.getInstance();
 
   return {
     proxy: httpsProxy || undefined,

src/common/user-store.ts

@@ -12,15 +12,16 @@ import { appEventBus } from "./event-bus";
 import logger from "../main/logger";
 import path from "path";
 import { fileNameMigration } from "../migrations/user-store";
+import { ObservableToggleSet } from "../renderer/utils";
 
 export interface UserStoreModel {
   kubeConfigPath: string;
   lastSeenAppVersion: string;
   seenContexts: string[];
-  preferences: UserPreferences;
+  preferences: UserPreferencesModel;
 }
 
-export interface UserPreferences {
+export interface UserPreferencesModel {
   httpsProxy?: string;
   shell?: string;
   colorTheme?: string;
@@ -32,7 +33,7 @@ export interface UserPreferences {
   downloadBinariesPath?: string;
   kubectlBinariesPath?: string;
   openAtLogin?: boolean;
-  hiddenTableColumns?: Record<string, string[]>;
+  hiddenTableColumns?: [string, string[]][];
 }
 
 export class UserStore extends BaseStore<UserStoreModel> {
@@ -48,20 +49,29 @@ export class UserStore extends BaseStore<UserStoreModel> {
   }
 
   @observable lastSeenAppVersion = "0.0.0";
-  @observable kubeConfigPath = kubeConfigDefaultPath; // used in add-cluster page for providing context
+
+  /**
+   * used in add-cluster page for providing context
+   */
+  @observable kubeConfigPath = kubeConfigDefaultPath;
   @observable seenContexts = observable.set<string>();
   @observable newContexts = observable.set<string>();
+  @observable allowTelemetry = true;
+  @observable allowUntrustedCAs = false;
+  @observable colorTheme = UserStore.defaultTheme;
+  @observable localeTimezone = moment.tz.guess(true) || "UTC";
+  @observable downloadMirror = "default";
+  @observable httpsProxy?: string;
+  @observable shell?: string;
+  @observable downloadBinariesPath?: string;
+  @observable kubectlBinariesPath?: string;
 
-  @observable preferences: UserPreferences = {
+  /**
-    allowTelemetry: true,
+   * Download kubectl binaries matching cluster version
-    allowUntrustedCAs: false,
+   */
-    colorTheme: UserStore.defaultTheme,
+  @observable downloadKubectlBinaries = true;
-    localeTimezone: moment.tz.guess(true) || "UTC",
+  @observable openAtLogin = false;
-    downloadMirror: "default",
+  hiddenTableColumns = observable.map<string, ObservableToggleSet<string>>();
-    downloadKubectlBinaries: true,  // Download kubectl binaries matching cluster version
-    openAtLogin: false,
-    hiddenTableColumns: {},
-  };
 
   protected async handleOnLoad() {
     await this.whenLoaded;
@@ -72,12 +82,12 @@ export class UserStore extends BaseStore<UserStoreModel> {
 
     if (app) {
       // track telemetry availability
-      reaction(() => this.preferences.allowTelemetry, allowed => {
+      reaction(() => this.allowTelemetry, allowed => {
         appEventBus.emit({ name: "telemetry", action: allowed ? "enabled" : "disabled" });
       });
 
       // open at system start-up
-      reaction(() => this.preferences.openAtLogin, openAtLogin => {
+      reaction(() => this.openAtLogin, openAtLogin => {
         app.setLoginItemSettings({
           openAtLogin,
           openAsHidden: true,
@@ -99,17 +109,40 @@ export class UserStore extends BaseStore<UserStoreModel> {
     return super.load();
   }
 
-  get isNewVersion() {
+  @computed get isNewVersion() {
     return semver.gt(getAppVersion(), this.lastSeenAppVersion);
   }
 
-  @action
+  @computed get resolvedShell(): string | undefined {
-  setHiddenTableColumns(tableId: string, names: Set<string> | string[]) {
+    return this.shell || process.env.SHELL || process.env.PTYSHELL;
-    this.preferences.hiddenTableColumns[tableId] = Array.from(names);
   }
 
-  getHiddenTableColumns(tableId: string): Set<string> {
+  /**
-    return new Set(this.preferences.hiddenTableColumns[tableId]);
+   * Checks if a column (by ID) for a table (by ID) is configured to be hidden
+   * @param tableId The ID of the table to be checked against
+   * @param columnIds The list of IDs the check if one is hidden
+   * @returns true if at least one column under the table is set to hidden
+   */
+  isTableColumnHidden(tableId: string, ...columnIds: string[]): boolean {
+    if (columnIds.length === 0) {
+      return true;
+    }
+
+    const config = this.hiddenTableColumns.get(tableId);
+
+    if (!config) {
+      return true;
+    }
+
+    return columnIds.some(columnId => config.has(columnId));
+  }
+
+  @action
+  /**
+   * Toggles the hidden configuration of a table's column
+   */
+  toggleTableColumnVisibility(tableId: string, columnId: string) {
+    this.hiddenTableColumns.get(tableId)?.toggle(columnId);
   }
 
   @action
@@ -124,7 +157,7 @@ export class UserStore extends BaseStore<UserStoreModel> {
   @action
   async resetTheme() {
     await this.whenLoaded;
-    this.preferences.colorTheme = UserStore.defaultTheme;
+    this.colorTheme = UserStore.defaultTheme;
   }
 
   @action
@@ -135,7 +168,7 @@ export class UserStore extends BaseStore<UserStoreModel> {
 
   @action
   setLocaleTimezone(tz: string) {
-    this.preferences.localeTimezone = tz;
+    this.localeTimezone = tz;
   }
 
   protected refreshNewContexts = async () => {
@@ -175,15 +208,55 @@ export class UserStore extends BaseStore<UserStoreModel> {
       this.kubeConfigPath = kubeConfigPath;
     }
     this.seenContexts.replace(seenContexts);
-    Object.assign(this.preferences, preferences);
+
+    if (!preferences) {
+      return;
+    }
+
+    this.httpsProxy = preferences.httpsProxy;
+    this.shell = preferences.shell;
+    this.colorTheme = preferences.colorTheme;
+    this.localeTimezone = preferences.localeTimezone;
+    this.allowUntrustedCAs = preferences.allowUntrustedCAs;
+    this.allowTelemetry = preferences.allowTelemetry;
+    this.downloadMirror = preferences.downloadMirror;
+    this.downloadKubectlBinaries = preferences.downloadKubectlBinaries;
+    this.downloadBinariesPath = preferences.downloadBinariesPath;
+    this.kubectlBinariesPath = preferences.kubectlBinariesPath;
+    this.openAtLogin = preferences.openAtLogin;
+
+    this.hiddenTableColumns.clear();
+
+    for (const [tableId, columnIds] of preferences.hiddenTableColumns ?? []) {
+      this.hiddenTableColumns.set(tableId, new ObservableToggleSet(columnIds));
+    }
   }
 
   toJSON(): UserStoreModel {
+    const hiddenTableColumns: [string, string[]][] = [];
+
+    for (const [key, values] of this.hiddenTableColumns.entries()) {
+      hiddenTableColumns.push([key, Array.from(values)]);
+    }
+
     const model: UserStoreModel = {
       kubeConfigPath: this.kubeConfigPath,
       lastSeenAppVersion: this.lastSeenAppVersion,
       seenContexts: Array.from(this.seenContexts),
-      preferences: this.preferences,
+      preferences: {
+        httpsProxy: this.httpsProxy,
+        shell: this.shell,
+        colorTheme: this.colorTheme,
+        localeTimezone: this.localeTimezone,
+        allowUntrustedCAs: this.allowUntrustedCAs,
+        allowTelemetry: this.allowTelemetry,
+        downloadMirror: this.downloadMirror,
+        downloadKubectlBinaries: this.downloadKubectlBinaries,
+        downloadBinariesPath: this.downloadBinariesPath,
+        kubectlBinariesPath: this.kubectlBinariesPath,
+        openAtLogin: this.openAtLogin,
+        hiddenTableColumns,
+      },
     };
 
     return toJS(model, {

src/common/utils/index.ts

@@ -7,19 +7,20 @@ export * from "./autobind";
 export * from "./base64";
 export * from "./camelCase";
 export * from "./cloneJson";
-export * from "./delay";
 export * from "./debouncePromise";
 export * from "./defineGlobal";
-export * from "./getRandId";
+export * from "./delay";
-export * from "./splitArray";
+export * from "./disposer";
-export * from "./saveToAppFiles";
-export * from "./singleton";
-export * from "./openExternal";
 export * from "./downloadFile";
 export * from "./escapeRegExp";
+export * from "./getRandId";
+export * from "./openExternal";
+export * from "./saveToAppFiles";
+export * from "./singleton";
+export * from "./splitArray";
 export * from "./tar";
+export * from "./toggle-set";
 export * from "./type-narrowing";
-export * from "./disposer";
 
 import * as iter from "./iter";
 

src/common/utils/toggle-set.ts

@@ -0,0 +1,20 @@
+import { action, ObservableSet } from "mobx";
+
+export class ToggleSet<T> extends Set<T> {
+  public toggle(value: T): void {
+    if (!this.delete(value)) {
+      // Set.prototype.delete returns false if `value` was not in the set
+      this.add(value);
+    }
+  }
+}
+
+export class ObservableToggleSet<T> extends ObservableSet<T> {
+  @action
+  public toggle(value: T): void {
+    if (!this.delete(value)) {
+      // Set.prototype.delete returns false if `value` was not in the set
+      this.add(value);
+    }
+  }
+}

src/main/kubectl.ts

@@ -113,12 +113,12 @@ export class Kubectl {
   }
 
   public getPathFromPreferences() {
-    return UserStore.getInstance().preferences?.kubectlBinariesPath || this.getBundledPath();
+    return UserStore.getInstance().kubectlBinariesPath || this.getBundledPath();
   }
 
   protected getDownloadDir() {
-    if (UserStore.getInstance().preferences?.downloadBinariesPath) {
+    if (UserStore.getInstance().downloadBinariesPath) {
-      return path.join(UserStore.getInstance().preferences.downloadBinariesPath, "kubectl");
+      return path.join(UserStore.getInstance().downloadBinariesPath, "kubectl");
     }
 
     return Kubectl.kubectlDir;
@@ -129,7 +129,7 @@ export class Kubectl {
       return this.getBundledPath();
     }
 
-    if (UserStore.getInstance().preferences?.downloadKubectlBinaries === false) {
+    if (UserStore.getInstance().downloadKubectlBinaries === false) {
       return this.getPathFromPreferences();
     }
 
@@ -223,7 +223,7 @@ export class Kubectl {
   }
 
   public async ensureKubectl(): Promise<boolean> {
-    if (UserStore.getInstance().preferences?.downloadKubectlBinaries === false) {
+    if (UserStore.getInstance().downloadKubectlBinaries === false) {
       return true;
     }
 
@@ -303,7 +303,7 @@ export class Kubectl {
   }
 
   protected async writeInitScripts() {
-    const kubectlPath = UserStore.getInstance().preferences?.downloadKubectlBinaries ? this.dirname : path.dirname(this.getPathFromPreferences());
+    const kubectlPath = UserStore.getInstance().downloadKubectlBinaries ? this.dirname : path.dirname(this.getPathFromPreferences());
     const helmPath = helmCli.getBinaryDir();
     const fsPromises = fs.promises;
     const bashScriptPath = path.join(this.dirname, ".bash_set_path");
@@ -361,7 +361,7 @@ export class Kubectl {
   }
 
   protected getDownloadMirror() {
-    const mirror = packageMirrors.get(UserStore.getInstance().preferences?.downloadMirror);
+    const mirror = packageMirrors.get(UserStore.getInstance().downloadMirror);
 
     if (mirror) {
       return mirror;

src/main/shell-session/local-shell-session.ts

@@ -21,8 +21,8 @@ export class LocalShellSession extends ShellSession {
 
   protected async getShellArgs(shell: string): Promise<string[]> {
     const helmpath = helmCli.getBinaryDir();
-    const pathFromPreferences = UserStore.getInstance().preferences.kubectlBinariesPath || this.kubectl.getBundledPath();
+    const pathFromPreferences = UserStore.getInstance().kubectlBinariesPath || this.kubectl.getBundledPath();
-    const kubectlPathDir = UserStore.getInstance().preferences.downloadKubectlBinaries ? await this.kubectlBinDirP : path.dirname(pathFromPreferences);
+    const kubectlPathDir = UserStore.getInstance().downloadKubectlBinaries ? await this.kubectlBinDirP : path.dirname(pathFromPreferences);
 
     switch(path.basename(shell)) {
       case "powershell.exe":

src/main/shell-session/shell-session.ts

@@ -119,7 +119,7 @@ export abstract class ShellSession {
   protected async getShellEnv() {
     const env = clearKubeconfigEnvVars(JSON.parse(JSON.stringify(await shellEnv())));
     const pathStr = [...this.getPathEntries(), await this.kubectlBinDirP, process.env.PATH].join(path.delimiter);
-    const shell = UserStore.getInstance().preferences.shell || process.env.SHELL || process.env.PTYSHELL;
+    const shell = UserStore.getInstance().resolvedShell;
 
     delete env.DEBUG; // don't pass DEBUG into shells
 

src/migrations/user-store/5.0.0-alpha.3.ts

@@ -0,0 +1,18 @@
+// Switch representation of hiddenTableColumns in store
+import { migration } from "../migration-wrapper";
+
+export default migration({
+  version: "5.0.0-alpha.3",
+  run(store) {
+    const preferences = store.get("preferences");
+    const oldHiddenTableColumns: Record<string, string[]> = preferences?.hiddenTableColumns;
+
+    if (!oldHiddenTableColumns) {
+      return;
+    }
+
+    preferences.hiddenTableColumns = Object.entries(oldHiddenTableColumns);
+
+    store.set("preferences", preferences);
+  }
+});

src/migrations/user-store/index.ts

@@ -1,6 +1,7 @@
 // User store migrations
 
 import version210Beta4 from "./2.1.0-beta.4";
+import version500Alpha3 from "./5.0.0-alpha.3";
 import { fileNameMigration } from "./file-name-migration";
 
 export {
@@ -9,4 +10,5 @@ export {
 
 export default {
   ...version210Beta4,
+  ...version500Alpha3,
 };

src/renderer/components/+preferences/kubectl-binaries.tsx

@@ -1,15 +1,16 @@
 import React, { useState } from "react";
 import { Input, InputValidators } from "../input";
 import { SubTitle } from "../layout/sub-title";
-import { getDefaultKubectlPath, UserPreferences } from "../../../common/user-store";
+import { getDefaultKubectlPath, UserStore } from "../../../common/user-store";
 import { observer } from "mobx-react";
 import { bundledKubectlPath } from "../../../main/kubectl";
 import { SelectOption, Select } from "../select";
 import { FormSwitch, Switcher } from "../switch";
 
-export const KubectlBinaries = observer(({ preferences }: { preferences: UserPreferences }) => {
+export const KubectlBinaries = observer(() => {
-  const [downloadPath, setDownloadPath] = useState(preferences.downloadBinariesPath || "");
+  const userStore = UserStore.getInstance();
-  const [binariesPath, setBinariesPath] = useState(preferences.kubectlBinariesPath || "");
+  const [downloadPath, setDownloadPath] = useState(userStore.downloadBinariesPath || "");
+  const [binariesPath, setBinariesPath] = useState(userStore.kubectlBinariesPath || "");
   const pathValidator = downloadPath ? InputValidators.isPath : undefined;
 
   const downloadMirrorOptions: SelectOption<string>[] = [
@@ -18,8 +19,8 @@ export const KubectlBinaries = observer(({ preferences }: { preferences: UserPre
   ];
 
   const save = () => {
-    preferences.downloadBinariesPath = downloadPath;
+    userStore.downloadBinariesPath = downloadPath;
-    preferences.kubectlBinariesPath = binariesPath;
+    userStore.kubectlBinariesPath = binariesPath;
   };
 
   return (
@@ -29,8 +30,8 @@ export const KubectlBinaries = observer(({ preferences }: { preferences: UserPre
         <FormSwitch
           control={
             <Switcher
-              checked={preferences.downloadKubectlBinaries}
+              checked={userStore.downloadKubectlBinaries}
-              onChange={v => preferences.downloadKubectlBinaries = v.target.checked}
+              onChange={v => userStore.downloadKubectlBinaries = v.target.checked}
               name="kubectl-download"
             />
           }
@@ -45,9 +46,9 @@ export const KubectlBinaries = observer(({ preferences }: { preferences: UserPre
         <Select
           placeholder="Download mirror for kubectl"
           options={downloadMirrorOptions}
-          value={preferences.downloadMirror}
+          value={userStore.downloadMirror}
-          onChange={({ value }: SelectOption) => preferences.downloadMirror = value}
+          onChange={({ value }: SelectOption) => userStore.downloadMirror = value}
-          disabled={!preferences.downloadKubectlBinaries}
+          disabled={!userStore.downloadKubectlBinaries}
           themeName="lens"
         />
       </section>
@@ -58,12 +59,12 @@ export const KubectlBinaries = observer(({ preferences }: { preferences: UserPre
         <SubTitle title="Directory for binaries" />
         <Input
           theme="round-black"
-          value={downloadPath}
+          value={userStore.downloadBinariesPath}
           placeholder={getDefaultKubectlPath()}
           validators={pathValidator}
           onChange={setDownloadPath}
           onBlur={save}
-          disabled={!preferences.downloadKubectlBinaries}
+          disabled={!userStore.downloadKubectlBinaries}
         />
         <div className="hint">
           The directory to download binaries into.
@@ -81,7 +82,7 @@ export const KubectlBinaries = observer(({ preferences }: { preferences: UserPre
           validators={pathValidator}
           onChange={setBinariesPath}
           onBlur={save}
-          disabled={preferences.downloadKubectlBinaries}
+          disabled={userStore.downloadKubectlBinaries}
         />
       </section>
     </>

src/renderer/components/+preferences/preferences.tsx

@@ -30,8 +30,8 @@ enum Pages {
 
 @observer
 export class Preferences extends React.Component {
-  @observable httpProxy = UserStore.getInstance().preferences.httpsProxy || "";
+  @observable httpProxy = UserStore.getInstance().httpsProxy || "";
-  @observable shell = UserStore.getInstance().preferences.shell || "";
+  @observable shell = UserStore.getInstance().shell || "";
   @observable activeTab = Pages.Application;
 
   @computed get themeOptions(): SelectOption<string>[] {
@@ -100,7 +100,6 @@ export class Preferences extends React.Component {
   render() {
     const extensions = appPreferenceRegistry.getItems();
     const telemetryExtensions = extensions.filter(e => e.showInPreferencesTab == Pages.Telemetry);
-    const { preferences } = UserStore.getInstance();
     const defaultShell = process.env.SHELL
       || process.env.PTYSHELL
       || (
@@ -123,8 +122,8 @@ export class Preferences extends React.Component {
               <SubTitle title="Theme"/>
               <Select
                 options={this.themeOptions}
-                value={preferences.colorTheme}
+                value={UserStore.getInstance().colorTheme}
-                onChange={({ value }: SelectOption) => preferences.colorTheme = value}
+                onChange={({ value }: SelectOption) => UserStore.getInstance().colorTheme = value}
                 themeName="lens"
               />
             </section>
@@ -138,7 +137,7 @@ export class Preferences extends React.Component {
                 placeholder={defaultShell}
                 value={this.shell}
                 onChange={v => this.shell = v}
-                onBlur={() => preferences.shell = this.shell}
+                onBlur={() => UserStore.getInstance().shell = this.shell}
               />
             </section>
 
@@ -149,8 +148,8 @@ export class Preferences extends React.Component {
               <FormSwitch
                 control={
                   <Switcher
-                    checked={preferences.openAtLogin}
+                    checked={UserStore.getInstance().openAtLogin}
-                    onChange={v => preferences.openAtLogin = v.target.checked}
+                    onChange={v => UserStore.getInstance().openAtLogin = v.target.checked}
                     name="startup"
                   />
                 }
@@ -164,7 +163,7 @@ export class Preferences extends React.Component {
               <SubTitle title="Locale Timezone" />
               <Select
                 options={this.timezoneOptions}
-                value={preferences.localeTimezone}
+                value={UserStore.getInstance().localeTimezone}
                 onChange={({ value }: SelectOption) => UserStore.getInstance().setLocaleTimezone(value)}
                 themeName="lens"
               />
@@ -181,7 +180,7 @@ export class Preferences extends React.Component {
                 placeholder="Type HTTP proxy url (example: http://proxy.acme.org:8080)"
                 value={this.httpProxy}
                 onChange={v => this.httpProxy = v}
-                onBlur={() => preferences.httpsProxy = this.httpProxy}
+                onBlur={() => UserStore.getInstance().httpsProxy = this.httpProxy}
               />
               <small className="hint">
                 Proxy is used only for non-cluster communication.
@@ -195,8 +194,8 @@ export class Preferences extends React.Component {
               <FormSwitch
                 control={
                   <Switcher
-                    checked={preferences.allowUntrustedCAs}
+                    checked={UserStore.getInstance().allowUntrustedCAs}
-                    onChange={v => preferences.allowUntrustedCAs = v.target.checked}
+                    onChange={v => UserStore.getInstance().allowUntrustedCAs = v.target.checked}
                     name="startup"
                   />
                 }
@@ -215,7 +214,7 @@ export class Preferences extends React.Component {
           <section id="kubernetes">
             <section id="kubectl">
               <h2 data-testid="kubernetes-header">Kubernetes</h2>
-              <KubectlBinaries preferences={preferences}/>
+              <KubectlBinaries />
             </section>
             <hr/>
             <section id="helm">

src/renderer/components/dock/log-list.tsx

@@ -81,7 +81,6 @@ export class LogList extends React.Component<Props> {
   @computed
   get logs() {
     const showTimestamps = logTabStore.getData(this.props.id).showTimestamps;
-    const { preferences } = UserStore.getInstance();
 
     if (!showTimestamps) {
       return logStore.logsWithoutTimestamps;
@@ -89,7 +88,7 @@ export class LogList extends React.Component<Props> {
 
     return this.props.logs
       .map(log => logStore.splitOutTimestamp(log))
-      .map(([logTimestamp, log]) => (`${moment.tz(logTimestamp, preferences.localeTimezone).format()}${log}`));
+      .map(([logTimestamp, log]) => (`${moment.tz(logTimestamp, UserStore.getInstance().localeTimezone).format()}${log}`));
   }
 
   /**

src/renderer/components/item-object-list/item-list-layout.tsx

@@ -6,7 +6,7 @@ import { computed } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { ConfirmDialog, ConfirmDialogParams } from "../confirm-dialog";
 import { Table, TableCell, TableCellProps, TableHead, TableProps, TableRow, TableRowProps, TableSortCallback } from "../table";
-import { autobind, createStorage, cssNames, IClassName, isReactNode, noop, prevDefault, stopPropagation } from "../../utils";
+import { autobind, createStorage, cssNames, IClassName, isReactNode, noop, ObservableToggleSet, prevDefault, stopPropagation } from "../../utils";
 import { AddRemoveButtons, AddRemoveButtonsProps } from "../add-remove-buttons";
 import { NoItems } from "../no-items";
 import { Spinner } from "../spinner";
@@ -117,6 +117,10 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
       throw new Error("[ItemListLayout]: configurable list require props.tableId to be specified");
     }
 
+    if (isConfigurable && !UserStore.getInstance().hiddenTableColumns.has(tableId)) {
+      UserStore.getInstance().hiddenTableColumns.set(tableId, new ObservableToggleSet());
+    }
+
     if (preloadStores) {
       this.loadStores();
 
@@ -251,7 +255,7 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
               cellProps.className = cssNames(cellProps.className, headCell.className);
             }
 
-            if (!headCell || !this.isHiddenColumn(headCell)) {
+            if (!headCell || this.showColumn(headCell)) {
               return <TableCell key={index} {...cellProps} />;
             }
           })
@@ -420,11 +424,11 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
             onClick={prevDefault(() => store.toggleSelectionAll(enabledItems))}
           />
         )}
-        {renderTableHeader.map((cellProps, index) => {
+        {renderTableHeader.map((cellProps, index) => (
-          if (!this.isHiddenColumn(cellProps)) {
+          this.showColumn(cellProps) && (
-            return <TableCell key={cellProps.id ?? index} {...cellProps} />;
+            <TableCell key={cellProps.id ?? index} {...cellProps} />
-          }
+          )
-        })}
+        ))}
         <TableCell className="menu">
           {isConfigurable && this.renderColumnVisibilityMenu()}
         </TableCell>
@@ -468,34 +472,14 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
     );
   }
 
-  @computed get hiddenColumns() {
+  showColumn({ id: columnId, showWithColumn }: TableCellProps): boolean {
-    return UserStore.getInstance().getHiddenTableColumns(this.props.tableId);
+    const { tableId, isConfigurable } = this.props;
-  }
 
-  isHiddenColumn({ id: columnId, showWithColumn }: TableCellProps): boolean {
+    return !isConfigurable || !UserStore.getInstance().isTableColumnHidden(tableId, columnId, showWithColumn);
-    if (!this.props.isConfigurable) {
-      return false;
-    }
-
-    return this.hiddenColumns.has(columnId) || (
-      showWithColumn && this.hiddenColumns.has(showWithColumn)
-    );
-  }
-
-  updateColumnVisibility({ id: columnId }: TableCellProps, isVisible: boolean) {
-    const hiddenColumns = new Set(this.hiddenColumns);
-
-    if (!isVisible) {
-      hiddenColumns.add(columnId);
-    } else {
-      hiddenColumns.delete(columnId);
-    }
-
-    UserStore.getInstance().setHiddenTableColumns(this.props.tableId, hiddenColumns);
   }
 
   renderColumnVisibilityMenu() {
-    const { renderTableHeader } = this.props;
+    const { renderTableHeader, tableId } = this.props;
 
     return (
       <MenuActions className="ItemListLayoutVisibilityMenu" toolbar={false} autoCloseOnSelect={false}>
@@ -504,8 +488,8 @@ export class ItemListLayout extends React.Component<ItemListLayoutProps> {
             <MenuItem key={index} className="input">
               <Checkbox
                 label={cellProps.title ?? `<${cellProps.className}>`}
-                value={!this.isHiddenColumn(cellProps)}
+                value={this.showColumn(cellProps)}
-                onChange={isVisible => this.updateColumnVisibility(cellProps, isVisible)}
+                onChange={() => UserStore.getInstance().toggleTableColumnVisibility(tableId, cellProps.id)}
               />
             </MenuItem>
           )

src/renderer/components/locale-date/locale-date.tsx

@@ -10,9 +10,8 @@ interface Props {
 @observer
 export class LocaleDate extends React.Component<Props> {
   render() {
-    const { preferences } = UserStore.getInstance();
     const { date } = this.props;
 
-    return <>{moment.tz(date, preferences.localeTimezone).format()}</>;
+    return moment.tz(date, UserStore.getInstance().localeTimezone).format();
   }
 }

src/renderer/theme.store.ts

@@ -38,7 +38,7 @@ export class ThemeStore extends Singleton {
   }
 
   @computed get activeThemeId(): string {
-    return UserStore.getInstance().preferences.colorTheme;
+    return UserStore.getInstance().colorTheme;
   }
 
   @computed get activeTheme(): Theme {