responding to comments, part 2

Signed-off-by: Roman <ixrock@gmail.com>

src/renderer/components/dock/dock-tab.store.ts

@@ -25,7 +25,7 @@ export class DockTabStore<T = any> {
       this.storage = createStorage(storageKey, {});
       await this.storage.whenReady;
       this.data.replace(this.storage.get());
-      reaction(() => this.serializeData(), (data: T | any) => this.storage.set(data));
+      reaction(() => this.serializeData(), data => this.storage.set(data));
     }
 
     // clear data for closed tabs

src/renderer/components/dock/dock.store.ts

@@ -45,32 +45,36 @@ export class DockStore implements DockStorageState {
     return localStorage.get().isOpen;
   }
 
-  set isOpen(value: boolean) {
+  set isOpen(isOpen: boolean) {
-    localStorage.merge({ isOpen: value });
+    localStorage.merge({ isOpen });
   }
 
   get height(): number {
     return localStorage.get().height;
   }
 
-  set height(value: number) {
+  set height(height: number) {
-    localStorage.merge({ height: value });
+    localStorage.merge({
+      height: Math.max(this.minHeight, Math.min(height || this.minHeight, this.maxHeight)),
+    });
   }
 
   get tabs(): IDockTab[] {
     return localStorage.get().tabs;
   }
 
-  set tabs(value: IDockTab[]) {
+  set tabs(tabs: IDockTab[]) {
-    localStorage.merge({ tabs: value });
+    localStorage.merge({ tabs });
   }
 
-  get selectedTabId(): TabId {
+  get selectedTabId(): TabId | undefined {
     return localStorage.get().selectedTabId || this.tabs[0]?.id;
   }
 
-  set selectedTabId(value: TabId) {
+  set selectedTabId(tabId: TabId) {
-    localStorage.merge({ selectedTabId: value });
+    if (tabId && !this.getTabById(tabId)) return; // skip invalid ids
+
+    localStorage.merge({ selectedTabId: tabId });
   }
 
   @computed get selectedTab() {
@@ -81,7 +85,7 @@ export class DockStore implements DockStorageState {
     this.init();
   }
 
-  private async init() {
+  private init() {
     // adjust terminal height if window size changes
     window.addEventListener("resize", throttle(this.adjustHeight, 250));
   }
@@ -97,8 +101,8 @@ export class DockStore implements DockStorageState {
   }
 
   protected adjustHeight() {
-    if (this.height < this.minHeight) this.setHeight(this.minHeight);
+    if (this.height < this.minHeight) this.height = this.minHeight;
-    if (this.height > this.maxHeight) this.setHeight(this.maxHeight);
+    if (this.height > this.maxHeight) this.height = this.maxHeight;
   }
 
   onResize(callback: () => void, options?: IReactionOptions) {
@@ -238,11 +242,6 @@ export class DockStore implements DockStorageState {
     this.selectedTabId = this.getTabById(tabId)?.id ?? null;
   }
 
-  @action
-  setHeight(height?: number) {
-    this.height = Math.max(this.minHeight, Math.min(height || this.minHeight, this.maxHeight));
-  }
-
   @action
   reset() {
     localStorage.reset();

src/renderer/components/dock/dock.tsx

@@ -89,7 +89,7 @@ export class Dock extends React.Component<Props> {
           onStart={dockStore.open}
           onMinExtentSubceed={dockStore.close}
           onMinExtentExceed={dockStore.open}
-          onDrag={dockStore.setHeight}
+          onDrag={extent => dockStore.height = extent}
         />
         <div className="tabs-container flex align-center" onDoubleClick={prevDefault(toggle)}>
           <DockTabs

src/renderer/components/layout/sidebar-item.tsx

@@ -29,11 +29,11 @@ export class SidebarItem extends React.Component<SidebarItemProps> {
   }
 
   get expanded(): boolean {
-    return sidebarLocalStorage.get().expanded[this.id];
+    return Boolean(sidebarLocalStorage.get().expanded[this.id]);
   }
 
   get compact(): boolean {
-    return sidebarLocalStorage.get().compact;
+    return Boolean(sidebarLocalStorage.get().compact);
   }
 
   toggleExpand = (event: React.MouseEvent) => {
@@ -48,18 +48,16 @@ export class SidebarItem extends React.Component<SidebarItemProps> {
   };
 
   render() {
-    const { isHidden, isActive, subMenus = [], icon, text, children, url } = this.props;
+    const { isHidden, isActive, subMenus = [], icon, text, children, url, className } = this.props;
 
     if (isHidden) return null;
 
     const { id, expanded, compact } = this;
     const isExpandable = (subMenus.length > 0 || children) && !compact;
-    const className = cssNames(SidebarItem.displayName, this.props.className, {
+    const classNames = cssNames(SidebarItem.displayName, className, { compact });
-      compact,
-    });
 
     return (
-      <div className={className} data-test-id={id}>
+      <div className={classNames} data-test-id={id}>
         <div className={cssNames("nav-item flex align-center", { active: isActive })}>
           <NavLink to={url} isActive={() => isActive}>
             {icon} <span className="link-text">{text}</span>