feat: sync sessions list of independent pages

src/hooks/use-config.mjs

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
 import { defaultConfig, getUserConfig } from '../config/index.mjs'
 import Browser from 'webextension-polyfill'
 
-export function useConfig(initFn) {
+export function useConfig(initFn, ignoreSession = true) {
   const [config, setConfig] = useState(defaultConfig)
   useEffect(() => {
     getUserConfig().then((config) => {
@@ -12,7 +12,7 @@ export function useConfig(initFn) {
   }, [])
   useEffect(() => {
     const listener = (changes) => {
-      if (Object.keys(changes).length === 1 && 'sessions' in changes) return
+      if (ignoreSession) if (Object.keys(changes).length === 1 && 'sessions' in changes) return
 
       const changedItems = Object.keys(changes)
       let newConfig = {}

src/pages/IndependentPanel/App.jsx

@@ -19,7 +19,7 @@ import Browser from 'webextension-polyfill'
 function App() {
   const { t } = useTranslation()
   const [collapsed, setCollapsed] = useState(true)
-  const config = useConfig()
+  const config = useConfig(null, false)
   const [sessions, setSessions] = useState([])
   const [sessionId, setSessionId] = useState(null)
   const [currentSession, setCurrentSession] = useState(null)
@@ -54,6 +54,10 @@ function App() {
     })()
   }, [])
 
+  useEffect(() => {
+    if ('sessions' in config && config['sessions']) setSessions(config['sessions'])
+  }, [config])
+
   useEffect(() => {
     // eslint-disable-next-line
     ;(async () => {