+
{
setState(e.currentTarget.value)
diff --git a/src/components/databrowser/components/tab.tsx b/src/components/databrowser/components/tab.tsx
index 672f3aa..c8929fc 100644
--- a/src/components/databrowser/components/tab.tsx
+++ b/src/components/databrowser/components/tab.tsx
@@ -75,7 +75,7 @@ export const Tab = ({ id, isList }: { id: TabId; isList?: boolean }) => {
e.stopPropagation()
removeTab(id)
}}
- className="p-1 text-zinc-300 transition-colors hover:text-zinc-500"
+ className="p-1 text-zinc-300 transition-colors hover:text-zinc-500 dark:text-zinc-400"
>
diff --git a/src/store.tsx b/src/store.tsx
index 26e65a7..0920a98 100644
--- a/src/store.tsx
+++ b/src/store.tsx
@@ -45,7 +45,7 @@ export const DatabrowserProvider = ({
setItem: (_name, value) => storage.set(JSON.stringify(value)),
removeItem: () => {},
},
- version: 2,
+ version: 3,
// @ts-expect-error Reset the store for < v1
migrate: (originalState, version) => {
const state = originalState as DatabrowserStore
@@ -60,6 +60,23 @@ export const DatabrowserProvider = ({
}
}
+ if (version === 2) {
+ // Migrate from selectedKey to selectedKeys
+ return {
+ ...state,
+ tabs: state.tabs.map(([id, data]) => {
+ const oldData = data as any
+ return [
+ id,
+ {
+ ...data,
+ selectedKeys: oldData.selectedKey ? [oldData.selectedKey] : [],
+ },
+ ]
+ }),
+ }
+ }
+
return state
},
})
@@ -102,7 +119,7 @@ export type SelectedItem = {
export type TabData = {
id: TabId
- selectedKey: string | undefined
+ selectedKeys: string[]
selectedListItem?: SelectedItem
search: SearchFilter
@@ -128,8 +145,9 @@ type DatabrowserStore = {
closeAllButPinned: () => void
// Tab actions
- getSelectedKey: (tabId: TabId) => string | undefined
+ getSelectedKeys: (tabId: TabId) => string[]
setSelectedKey: (tabId: TabId, key: string | undefined) => void
+ setSelectedKeys: (tabId: TabId, keys: string[]) => void
setSelectedListItem: (tabId: TabId, item?: { key: string; isNew?: boolean }) => void
setSearch: (tabId: TabId, search: SearchFilter) => void
setSearchKey: (tabId: TabId, key: string) => void
@@ -150,7 +168,7 @@ const storeCreator: StateCreator = (set, get) => ({
const newTabData: TabData = {
id,
- selectedKey: undefined,
+ selectedKeys: [],
search: { key: "", type: undefined },
pinned: false,
}
@@ -275,18 +293,22 @@ const storeCreator: StateCreator = (set, get) => ({
set({ selectedTab: id })
},
- getSelectedKey: (tabId) => {
- return get().tabs.find(([id]) => id === tabId)?.[1]?.selectedKey
+ getSelectedKeys: (tabId) => {
+ return get().tabs.find(([id]) => id === tabId)?.[1]?.selectedKeys ?? []
},
setSelectedKey: (tabId, key) => {
+ get().setSelectedKeys(tabId, key ? [key] : [])
+ },
+
+ setSelectedKeys: (tabId, keys) => {
set((old) => {
const tabIndex = old.tabs.findIndex(([id]) => id === tabId)
if (tabIndex === -1) return old
const newTabs = [...old.tabs]
const [, tabData] = newTabs[tabIndex]
- newTabs[tabIndex] = [tabId, { ...tabData, selectedKey: key, selectedListItem: undefined }]
+ newTabs[tabIndex] = [tabId, { ...tabData, selectedKeys: keys, selectedListItem: undefined }]
return { ...old, tabs: newTabs }
})
diff --git a/src/tab-provider.tsx b/src/tab-provider.tsx
index cfdd1d7..3599ce8 100644
--- a/src/tab-provider.tsx
+++ b/src/tab-provider.tsx
@@ -23,6 +23,7 @@ export const useTab = () => {
selectedTab,
tabs,
setSelectedKey,
+ setSelectedKeys,
setSelectedListItem,
setSearch,
setSearchKey,
@@ -37,12 +38,14 @@ export const useTab = () => {
return useMemo(
() => ({
active: selectedTab === tabId,
- selectedKey: tabData.selectedKey,
+ selectedKey: tabData.selectedKeys[0], // Backwards compatibility - first selected key
+ selectedKeys: tabData.selectedKeys,
selectedListItem: tabData.selectedListItem,
search: tabData.search,
pinned: tabData.pinned,
setSelectedKey: (key: string | undefined) => setSelectedKey(tabId, key),
+ setSelectedKeys: (keys: string[]) => setSelectedKeys(tabId, keys),
setSelectedListItem: (item: SelectedItem | undefined) => setSelectedListItem(tabId, item),
setSearch: (search: SearchFilter) => setSearch(tabId, search),
setSearchKey: (key: string) => setSearchKey(tabId, key),