refactor: use tab instead of modal. fixed layout as well.

src/components/AppRoot.tsx

@@ -1,11 +1,15 @@
 import { useEffect } from 'react';
-import App from './App';
+import { MdSettings, MdHome } from 'react-icons/md';
+import { ChakraProvider, Tabs, TabList, TabPanels, Tab, TabPanel, Icon, chakra } from '@chakra-ui/react';
+
+import { MainTab } from '~/tabs/MainTab';
+import { SettingsTab } from '~/tabs/SettingsTab';
 
-import { ChakraProvider } from '@chakra-ui/react';
 import { Provider } from 'react-redux';
 import { theme } from '~/theme';
 import { persistSettings } from '~/features/settings/persistSettings';
 import { setupStore } from '~/store';
+import { Footer } from '~/components/Footer';
 
 // Private to this file only.
 const store = setupStore();
@@ -16,7 +20,29 @@ export function AppRoot() {
   return (
     <ChakraProvider theme={theme}>
       <Provider store={store}>
-        <App />
+        <Tabs flex={1} minH={0} display="flex" flexDir="column">
+          <TabList justifyContent="center">
+            <Tab>
+              <Icon as={MdHome} mr="1" />
+              <chakra.span>应用</chakra.span>
+            </Tab>
+            <Tab>
+              <Icon as={MdSettings} mr="1" />
+              <chakra.span>设置</chakra.span>
+            </Tab>
+          </TabList>
+
+          <TabPanels overflow="auto" minW={0}>
+            <TabPanel>
+              <MainTab />
+            </TabPanel>
+            <TabPanel>
+              <SettingsTab />
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+
+        <Footer />
       </Provider>
     </ChakraProvider>
   );