From f1796312deccf78f58a46af900e9f37f2c751aba Mon Sep 17 00:00:00 2001 From: luis-411 <132549758+luis-411@users.noreply.github.com> Date: Fri, 22 Nov 2024 10:59:21 +0100 Subject: [PATCH] fix: Pane visibility settings will be persisted locally (#2888) --- .../src/Domain/Preferences/LocalPrefKey.ts | 22 ++++++++ .../PaneController/PaneController.ts | 56 +++++++++++++++---- .../src/javascripts/Hooks/usePreference.tsx | 13 ++++- 3 files changed, 76 insertions(+), 15 deletions(-) diff --git a/packages/services/src/Domain/Preferences/LocalPrefKey.ts b/packages/services/src/Domain/Preferences/LocalPrefKey.ts index af2e438a3f1..51e89e02fa8 100644 --- a/packages/services/src/Domain/Preferences/LocalPrefKey.ts +++ b/packages/services/src/Domain/Preferences/LocalPrefKey.ts @@ -1,6 +1,9 @@ import { EditorFontSize, EditorLineHeight, EditorLineWidth } from '@standardnotes/models' +import { NativeFeatureIdentifier } from '@standardnotes/features' export enum LocalPrefKey { + ListPaneCollapsed = 'listPaneCollapsed', + NavigationPaneCollapsed = 'navigationPaneCollapsed', ActiveThemes = 'activeThemes', UseSystemColorScheme = 'useSystemColorScheme', UseTranslucentUI = 'useTranslucentUI', @@ -14,6 +17,8 @@ export enum LocalPrefKey { } export type LocalPrefValue = { + [LocalPrefKey.ListPaneCollapsed]: boolean + [LocalPrefKey.NavigationPaneCollapsed]: boolean [LocalPrefKey.ActiveThemes]: string[] [LocalPrefKey.UseSystemColorScheme]: boolean [LocalPrefKey.UseTranslucentUI]: boolean @@ -25,3 +30,20 @@ export type LocalPrefValue = { [LocalPrefKey.EditorLineWidth]: EditorLineWidth [LocalPrefKey.EditorFontSize]: EditorFontSize } + +export const LocalPrefDefaults = { + [LocalPrefKey.ListPaneCollapsed]: false, + [LocalPrefKey.NavigationPaneCollapsed]: false, + [LocalPrefKey.ActiveThemes]: [], + [LocalPrefKey.UseSystemColorScheme]: false, + [LocalPrefKey.UseTranslucentUI]: true, + [LocalPrefKey.AutoLightThemeIdentifier]: 'Default', + [LocalPrefKey.AutoDarkThemeIdentifier]: NativeFeatureIdentifier.TYPES.DarkTheme, + + [LocalPrefKey.EditorMonospaceEnabled]: false, + [LocalPrefKey.EditorLineHeight]: EditorLineHeight.Normal, + [LocalPrefKey.EditorLineWidth]: EditorLineWidth.FullWidth, + [LocalPrefKey.EditorFontSize]: EditorFontSize.Normal, +} satisfies { + [key in LocalPrefKey]: LocalPrefValue[key] +} diff --git a/packages/web/src/javascripts/Controllers/PaneController/PaneController.ts b/packages/web/src/javascripts/Controllers/PaneController/PaneController.ts index 3d8cfaaf9e1..589c1c600b3 100644 --- a/packages/web/src/javascripts/Controllers/PaneController/PaneController.ts +++ b/packages/web/src/javascripts/Controllers/PaneController/PaneController.ts @@ -2,6 +2,8 @@ import { PanesForLayout } from './../../Application/UseCase/PanesForLayout' import { InternalEventHandlerInterface, InternalEventInterface, + LocalPrefDefaults, + LocalPrefKey, PreferenceServiceInterface, } from '@standardnotes/services' import { @@ -41,9 +43,16 @@ export class PaneController extends AbstractViewController implements InternalEv currentNavPanelWidth = 0 currentItemsPanelWidth = 0 focusModeEnabled = false + hasPaneInitializationLogicRun = false - listPaneExplicitelyCollapsed = false - navigationPaneExplicitelyCollapsed = false + listPaneExplicitelyCollapsed = this.preferences.getLocalValue( + LocalPrefKey.ListPaneCollapsed, + LocalPrefDefaults[LocalPrefKey.ListPaneCollapsed], + ) + navigationPaneExplicitelyCollapsed = this.preferences.getLocalValue( + LocalPrefKey.NavigationPaneCollapsed, + LocalPrefDefaults[LocalPrefKey.NavigationPaneCollapsed], + ) constructor( private preferences: PreferenceServiceInterface, @@ -84,12 +93,6 @@ export class PaneController extends AbstractViewController implements InternalEv this.setCurrentNavPanelWidth(preferences.getValue(PrefKey.TagsPanelWidth, MinimumNavPanelWidth)) this.setCurrentItemsPanelWidth(preferences.getValue(PrefKey.NotesPanelWidth, MinimumNotesPanelWidth)) - const screen = this._isTabletOrMobileScreen.execute().getValue() - - this.panes = screen.isTabletOrMobile - ? [AppPaneId.Navigation, AppPaneId.Items] - : [AppPaneId.Navigation, AppPaneId.Items, AppPaneId.Editor] - const mediaQuery = window.matchMedia(MediaQueryBreakpoints.md) if (mediaQuery?.addEventListener != undefined) { mediaQuery.addEventListener('change', this.mediumScreenMQHandler) @@ -98,6 +101,7 @@ export class PaneController extends AbstractViewController implements InternalEv } eventBus.addEventHandler(this, ApplicationEvent.PreferencesChanged) + eventBus.addEventHandler(this, ApplicationEvent.LocalPreferencesChanged) this.disposers.push( keyboardService.addCommandHandler({ @@ -136,6 +140,34 @@ export class PaneController extends AbstractViewController implements InternalEv this.setCurrentNavPanelWidth(this.preferences.getValue(PrefKey.TagsPanelWidth, MinimumNavPanelWidth)) this.setCurrentItemsPanelWidth(this.preferences.getValue(PrefKey.NotesPanelWidth, MinimumNotesPanelWidth)) } + if (event.type === ApplicationEvent.LocalPreferencesChanged) { + this.listPaneExplicitelyCollapsed = this.preferences.getLocalValue( + LocalPrefKey.ListPaneCollapsed, + LocalPrefDefaults[LocalPrefKey.ListPaneCollapsed], + ) + this.navigationPaneExplicitelyCollapsed = this.preferences.getLocalValue( + LocalPrefKey.NavigationPaneCollapsed, + LocalPrefDefaults[LocalPrefKey.NavigationPaneCollapsed], + ) + + if (!this.hasPaneInitializationLogicRun) { + const screen = this._isTabletOrMobileScreen.execute().getValue() + if (screen.isTabletOrMobile) { + this.panes = [AppPaneId.Navigation, AppPaneId.Items] + } else { + if (!this.listPaneExplicitelyCollapsed && !this.navigationPaneExplicitelyCollapsed) { + this.panes = [AppPaneId.Navigation, AppPaneId.Items, AppPaneId.Editor] + } else if (this.listPaneExplicitelyCollapsed && this.navigationPaneExplicitelyCollapsed) { + this.panes = [AppPaneId.Editor] + } else if (this.listPaneExplicitelyCollapsed) { + this.panes = [AppPaneId.Navigation, AppPaneId.Editor] + } else { + this.panes = [AppPaneId.Items, AppPaneId.Editor] + } + } + this.hasPaneInitializationLogicRun = true + } + } } setCurrentNavPanelWidth(width: number) { @@ -250,24 +282,24 @@ export class PaneController extends AbstractViewController implements InternalEv toggleListPane = () => { if (this.panes.includes(AppPaneId.Items)) { this.removePane(AppPaneId.Items) - this.listPaneExplicitelyCollapsed = true + this.preferences.setLocalValue(LocalPrefKey.ListPaneCollapsed, true) } else { if (this.panes.includes(AppPaneId.Navigation)) { this.insertPaneAtIndex(AppPaneId.Items, 1) } else { this.insertPaneAtIndex(AppPaneId.Items, 0) } - this.listPaneExplicitelyCollapsed = false + this.preferences.setLocalValue(LocalPrefKey.ListPaneCollapsed, false) } } toggleNavigationPane = () => { if (this.panes.includes(AppPaneId.Navigation)) { this.removePane(AppPaneId.Navigation) - this.navigationPaneExplicitelyCollapsed = true + this.preferences.setLocalValue(LocalPrefKey.NavigationPaneCollapsed, true) } else { this.insertPaneAtIndex(AppPaneId.Navigation, 0) - this.navigationPaneExplicitelyCollapsed = false + this.preferences.setLocalValue(LocalPrefKey.NavigationPaneCollapsed, false) } } diff --git a/packages/web/src/javascripts/Hooks/usePreference.tsx b/packages/web/src/javascripts/Hooks/usePreference.tsx index 9402aab9ec4..7a040064cab 100644 --- a/packages/web/src/javascripts/Hooks/usePreference.tsx +++ b/packages/web/src/javascripts/Hooks/usePreference.tsx @@ -1,11 +1,18 @@ import { useApplication } from '@/Components/ApplicationProvider' -import { ApplicationEvent, PrefKey, PrefDefaults, LocalPrefKey, LocalPrefValue } from '@standardnotes/snjs' +import { + ApplicationEvent, + PrefKey, + PrefDefaults, + LocalPrefKey, + LocalPrefValue, + LocalPrefDefaults, +} from '@standardnotes/snjs' import { useCallback, useEffect, useState } from 'react' export function useLocalPreference(preference: Key) { const application = useApplication() - const [value, setValue] = useState(application.preferences.getLocalValue(preference, PrefDefaults[preference])) + const [value, setValue] = useState(application.preferences.getLocalValue(preference, LocalPrefDefaults[preference])) const setNewValue = useCallback( (newValue: LocalPrefValue[Key]) => { @@ -16,7 +23,7 @@ export function useLocalPreference(preference: Key) { useEffect(() => { return application.addEventObserver(async () => { - const latestValue = application.preferences.getLocalValue(preference, PrefDefaults[preference]) + const latestValue = application.preferences.getLocalValue(preference, LocalPrefDefaults[preference]) setValue(latestValue) }, ApplicationEvent.LocalPreferencesChanged)