feat(plugins/mpa): load tabs from atom store

core/src/plugins/mpa/atoms.ts

@@ -0,0 +1,9 @@
+import { atom } from 'jotai'
+
+export const tabsAtom = atom<{
+  id: string
+  icon?: string
+  title: string
+  closeable?: boolean
+  active?: boolean
+}[]>([])

core/src/plugins/mpa/topbar/Files.tsx

@@ -1,33 +1,33 @@
 import './Files.scss'
 
-import type { ReactNode } from 'react'
-import { useState } from 'react'
+import { useEffect, useMemo } from 'react'
+import { useAtom, useStore } from 'jotai'
 
 import { classnames } from '../../../utils'
 import type { BarItemProps } from '../..'
+import { tabsAtom } from '../atoms'
 
 const prefix = 'mpa__topbar__files'
 
-interface Tab {
-  id: string
-  icon?: string | ReactNode
-  title: ReactNode
-}
-
 export const Files: React.ComponentType<BarItemProps> = () => {
-  const [tabs, setTabs] = useState<Tab[]>([
-    { id: 'index.ts', title: 'index.ts', icon: 'file' },
-    { id: 'index.spec.ts', title: 'index.spec.ts', icon: 'beaker' }
-  ])
-  const [activeTabId, setActiveTabId] = useState<string | undefined>(tabs[0]?.id)
+  const [
+    tabs, setTabs
+  ] = useAtom(tabsAtom, { store: useStore() })
+  useEffect(() => {
+    if (tabs.length === 0) {
+      // TODO only editor mounted?
+      setTabs([
+        { id: 'index.ts', title: 'index.ts', icon: 'file', active: true }
+      ])
+    }
+  }, [setTabs, tabs.length])
+  const activeTabId = useMemo(() => tabs.find(tab => tab.active)?.id, [tabs])
   return <div className={prefix}>
     {tabs.map(tab => <div
       key={tab.id}
       className={classnames(`${prefix}-tab`, { active: tab.id === activeTabId })}
     >
-      {tab.icon && typeof tab.icon === 'string'
-        ? <span className={`cldr codicon codicon-${tab.icon}`} />
-        : tab.icon}
+      {tab.icon && <span className={`cldr codicon codicon-${tab.icon}`} />}
       {tab.title}
       <span className='cldr codicon codicon-close' />
     </div>)}