wip ref(core): move group collapsed status into profileSettingsTab

tabby-core/src/api/profileProvider.ts

@@ -37,7 +37,6 @@ export interface ProfileGroup {
     profiles: PartialProfile<Profile>[]
     defaults: any
     editable: boolean
-    collapsed: boolean
 }
 
 export type PartialProfileGroup<T extends ProfileGroup> = Omit<Omit<{

tabby-core/src/services/profiles.service.ts

@@ -398,11 +398,9 @@ export class ProfilesService {
             profiles = await this.getProfiles(includeNonUserGroup, true)
         }
 
-        const profileGroupCollapsed = JSON.parse(window.localStorage.profileGroupCollapsed ?? '{}')
         let groups: PartialProfileGroup<ProfileGroup>[] = deepClone(this.config.store.groups ?? [])
         groups = groups.map(x => {
             x.editable = true
-            x.collapsed = profileGroupCollapsed[x.id] ?? false
 
             if (includeProfiles) {
                 x.profiles = profiles.filter(p => p.group === x.id)
@@ -418,14 +416,12 @@ export class ProfilesService {
                 name: this.translate.instant('Built-in'),
                 editable: false,
             }
-            builtIn.collapsed = profileGroupCollapsed[builtIn.id] ?? false
 
             const ungrouped: PartialProfileGroup<ProfileGroup> = {
                 id: 'ungrouped',
                 name: this.translate.instant('Ungrouped'),
                 editable: false,
             }
-            ungrouped.collapsed = profileGroupCollapsed[ungrouped.id] ?? false
 
             if (includeProfiles) {
                 builtIn.profiles = profiles.filter(p => p.isBuiltin)
@@ -470,7 +466,6 @@ export class ProfilesService {
     async writeProfileGroup (group: PartialProfileGroup<ProfileGroup>, saveConfig = true): Promise<void> {
         delete group.profiles
         delete group.editable
-        delete group.collapsed
 
         const cGroup = this.config.store.groups.find(g => g.id === group.id)
         if (cGroup) {
@@ -508,13 +503,4 @@ export class ProfilesService {
         return this.config.store.groups.find(g => g.id === groupId)?.name ?? ''
     }
 
-    /**
-    * Save ProfileGroup collapse state in localStorage
-    */
-    saveProfileGroupCollapse (group: PartialProfileGroup<ProfileGroup>): void {
-        const profileGroupCollapsed = JSON.parse(window.localStorage.profileGroupCollapsed ?? '{}')
-        profileGroupCollapsed[group.id] = group.collapsed
-        window.localStorage.profileGroupCollapsed = JSON.stringify(profileGroupCollapsed)
-    }
-
 }

tabby-settings/src/components/profilesSettingsTab.component.ts

@@ -8,6 +8,10 @@ import { EditProfileModalComponent } from './editProfileModal.component'
 _('Filter')
 _('Ungrouped')
 
+interface CollapsableProfileGroup extends ProfileGroup {
+    collapsed: boolean
+}
+
 /** @hidden */
 @Component({
     templateUrl: './profilesSettingsTab.component.pug',
@@ -16,7 +20,7 @@ _('Ungrouped')
 export class ProfilesSettingsTabComponent extends BaseComponent {
     builtinProfiles: PartialProfile<Profile>[] = []
     templateProfiles: PartialProfile<Profile>[] = []
-    profileGroups: PartialProfileGroup<ProfileGroup>[]
+    profileGroups: PartialProfileGroup<CollapsableProfileGroup>[]
     filter = ''
     Platform = Platform
 
@@ -137,21 +141,22 @@ export class ProfilesSettingsTabComponent extends BaseComponent {
     }
 
     async refresh (): Promise<void> {
+        const profileGroupCollapsed = JSON.parse(window.localStorage.profileGroupCollapsed ?? '{}')
         const groups = await this.profilesService.getProfileGroups(true, true)
         groups.sort((a, b) => a.name.localeCompare(b.name))
         groups.sort((a, b) => (a.id === 'built-in' ? 1 : 0) - (b.id === 'built-in' ? 1 : 0))
         groups.sort((a, b) => (a.id === 'ungrouped' ? 0 : 1) - (b.id === 'ungrouped' ? 0 : 1))
-        this.profileGroups = groups
+        this.profileGroups = groups.map(g => ProfilesSettingsTabComponent.intoPartialCollapsableProfileGroup(g, profileGroupCollapsed[g.id] ?? false))
     }
 
-    async editGroup (group: PartialProfileGroup<ProfileGroup>): Promise<void> {
+    async editGroup (group: PartialProfileGroup<CollapsableProfileGroup>): Promise<void> {
         const modal = this.ngbModal.open(PromptModalComponent)
         modal.componentInstance.prompt = this.translate.instant('New name')
         modal.componentInstance.value = group.name
         const result = await modal.result
         if (result) {
             group.name = result.value
-            await this.profilesService.writeProfileGroup(group)
+            await this.profilesService.writeProfileGroup(ProfilesSettingsTabComponent.collapsableIntoPartialProfileGroup(group))
         }
     }
 
@@ -217,9 +222,9 @@ export class ProfilesSettingsTabComponent extends BaseComponent {
         }[this.profilesService.providerForProfile(profile)?.id ?? ''] ?? 'warning'
     }
 
-    toggleGroupCollapse (group: PartialProfileGroup<ProfileGroup>): void {
+    toggleGroupCollapse (group: PartialProfileGroup<CollapsableProfileGroup>): void {
         group.collapsed = !group.collapsed
-        this.profilesService.saveProfileGroupCollapse(group)
+        this.saveProfileGroupCollapse(group)
     }
 
     async editDefaults (provider: ProfileProvider<Profile>): Promise<void> {
@@ -261,4 +266,27 @@ export class ProfilesSettingsTabComponent extends BaseComponent {
     getQuickConnectProviders (): ProfileProvider<Profile>[] {
         return this.profileProviders.filter(x => x.supportsQuickConnect)
     }
+
+    /**
+    * Save ProfileGroup collapse state in localStorage
+    */
+    private saveProfileGroupCollapse (group: PartialProfileGroup<CollapsableProfileGroup>): void {
+        const profileGroupCollapsed = JSON.parse(window.localStorage.profileGroupCollapsed ?? '{}')
+        profileGroupCollapsed[group.id] = group.collapsed
+        window.localStorage.profileGroupCollapsed = JSON.stringify(profileGroupCollapsed)
+    }
+
+    private static collapsableIntoPartialProfileGroup (group: PartialProfileGroup<CollapsableProfileGroup>): PartialProfileGroup<ProfileGroup> {
+        const g: any = { ...group }
+        delete g.collapsed
+        return g
+    }
+
+    private static intoPartialCollapsableProfileGroup (group: PartialProfileGroup<ProfileGroup>, collapsed: boolean): PartialProfileGroup<CollapsableProfileGroup> {
+        const collapsableGroup = {
+            ...group,
+            collapsed,
+        }
+        return collapsableGroup
+    }
 }