refactor - visibleSecondary not stored, computed in component

packages/web/src/stores.ts

@@ -18,7 +18,6 @@ export interface TabDefinition {
   tabComponent: string;
   tabOrder?: number;
   multiTabIndex?: number;
-  visibleSecondary?: boolean;
 }
 
 export function writableWithStorage<T>(defaultValue: T, storageName) {

packages/web/src/tabpanel/MultiTabsContainer.svelte

@@ -1,10 +1,12 @@
 <script>
   import HorizontalSplitter from '../elements/HorizontalSplitter.svelte';
-  import { openedTabs } from '../stores';
+  import { currentDatabase, lockedDatabaseMode, openedTabs } from '../stores';
   import TabsContainer from './TabsContainer.svelte';
+  import { shouldShowTab } from './TabsPanel.svelte';
 
-  $: isLeft = !!$openedTabs.find(x => x.closedTime == null && !x.multiTabIndex);
+  $: filteredTabsFromAllParts = $openedTabs.filter(x => shouldShowTab(x, $lockedDatabaseMode, $currentDatabase));
-  $: isRight = !!$openedTabs.find(x => x.closedTime == null && x.multiTabIndex == 1);
+  $: isLeft = !!filteredTabsFromAllParts.find(x => !x.multiTabIndex);
+  $: isRight = !!filteredTabsFromAllParts.find(x => x.multiTabIndex == 1);
 </script>
 
 <HorizontalSplitter hideFirst={!isLeft && isRight} isSplitter={isRight}>

packages/web/src/tabpanel/TabRegister.svelte

@@ -1,16 +1,30 @@
 <script lang="ts">
   import _ from 'lodash';
-  import { openedTabs } from '../stores';
+  import { currentDatabase, lockedDatabaseMode, openedTabs, TabDefinition } from '../stores';
   import TabContent from './TabContent.svelte';
   import tabs from '../tabs';
+  import { shouldShowTab } from './TabsPanel.svelte';
 
   export let multiTabIndex;
 
   let mountedTabs = {};
-  $: selectedTab = $openedTabs.find(
+
-    x => (x.selected || x.visibleSecondary) && x.closedTime == null && (x.multiTabIndex || 0) == multiTabIndex
+  function findShownTab(tabs: TabDefinition[], multiTabIndex, lockedDbMode, currentDb) {
+    const selectedTab = tabs.find(x => x.selected && x.closedTime == null && (x.multiTabIndex || 0) == multiTabIndex);
+    if (selectedTab) {
+      return selectedTab;
+    }
+
+    const selectedIndex = _.findLastIndex(
+      tabs,
+      x => (x.multiTabIndex || 0) == multiTabIndex && shouldShowTab(x, lockedDbMode, currentDb)
     );
 
+    return tabs[selectedIndex];
+  }
+
+  $: shownTab = findShownTab($openedTabs, multiTabIndex, $lockedDatabaseMode, $currentDatabase);
+
   // cleanup closed tabs
   $: {
     if (
@@ -28,10 +42,10 @@
 
   // open missing tabs
   $: {
-    if (selectedTab) {
+    if (shownTab) {
-      const { tabid } = selectedTab;
+      const { tabid } = shownTab;
       if (tabid && !mountedTabs[tabid]) {
-        const newTab = tabs[selectedTab.tabComponent]?.default;
+        const newTab = tabs[shownTab.tabComponent]?.default;
         if (newTab) {
           mountedTabs = {
             ...mountedTabs,
@@ -50,6 +64,6 @@
     tabComponent={mountedTabs[tabid]}
     {...openedTabsByTabId[tabid]?.props}
     {tabid}
-    tabVisible={tabid == (selectedTab && selectedTab.tabid)}
+    tabVisible={tabid == (shownTab && shownTab.tabid)}
   />
 {/each}

packages/web/src/tabpanel/TabsPanel.svelte

@@ -44,7 +44,6 @@
         ...x,
         closedTime: shouldShowTab(x) && closeCondition(x, active) ? new Date().getTime() : x.closedTime,
         selected: false,
-        visibleSecondary: false,
       }));
 
       if (newFiles.find(x => x.selected && shouldShowTab(x))) {
@@ -75,7 +74,6 @@
             ...x,
             closedTime: shouldShowTab(x) && closeCondition(x) ? new Date().getTime() : x.closedTime,
             selected: false,
-            visibleSecondary: false,
           }));
 
       if (newFiles.find(x => x.selected && shouldShowTab(x))) {
@@ -92,14 +90,12 @@
   };
 
   function splitTab(multiTabIndex) {
-    openedTabs.update(tabs => {
+    openedTabs.update(tabs =>
-      const secondaryIndex = _.findLastIndex(tabs, x => shouldShowTab(x) && !x.selected);
+      tabs.map((x, i) => ({
-      return tabs.map((x, i) => ({
         ...x,
         multiTabIndex: x.selected ? 1 - multiTabIndex : x.multiTabIndex,
-        visibleSecondary: i == secondaryIndex,
+      }))
-      }));
+    );
-    });
   }
 
   const closeTab = closeTabFunc((x, active) => x.tabid == active.tabid);
@@ -306,7 +302,7 @@
 
   $: scrollInViewTab($activeTabId);
 
-  $: filteredTabsFromAllParts = $openedTabs.filter(x => shouldShowTab(x));
+  $: filteredTabsFromAllParts = $openedTabs.filter(x => shouldShowTab(x, $lockedDatabaseMode, $currentDatabase));
   $: allowSplitTab =
     _.uniq(filteredTabsFromAllParts.map(x => x.multiTabIndex || 0)).length == 1 && filteredTabsFromAllParts.length >= 2;
 

packages/web/src/utility/common.ts

@@ -29,24 +29,9 @@ export function markTabSaved(tabid) {
 }
 
 export function setSelectedTabFunc(files, tabid) {
-  const oldSelected = files.find(x => x.selected);
-  const newSelected = files.find(x => x.tabid == tabid);
-  const changeVisibleSecondary = (oldSelected.multiTabIndex || 0) != (newSelected.multiTabIndex || 0);
   return [
-    ...(files || [])
+    ...(files || []).filter(x => x.tabid != tabid).map(x => ({ ...x, selected: false })),
-      .filter(x => x.tabid != tabid)
+    ...(files || []).filter(x => x.tabid == tabid).map(x => ({ ...x, selected: true })),
-      .map(x => ({
-        ...x,
-        selected: false,
-        visibleSecondary: changeVisibleSecondary ? x.selected : x.visibleSecondary,
-      })),
-    ...(files || [])
-      .filter(x => x.tabid == tabid)
-      .map(x => ({
-        ...x,
-        selected: true,
-        visibleSecondary: false,
-      })),
   ];
 }