chore(ui): components cleanup

- Remove redundant state in navigator.
- Remove unused home component.

src/renderer/components/Header.tsx

@@ -8,9 +8,7 @@ import React, { type FC } from "react";
 export const Header: FC = () => {
     return <div className="drag shrink-0 grow-0 basis-20">
         <div className="flex gap-2 h-full justify-center items-center px-8">
-            <div className="no-drag">
-                <TopNavigator/>
-            </div>
+            <TopNavigator/>
 
             <CloseButton/>
             <MinimizeButton/>

src/renderer/components/TopNavigator.tsx

@@ -1,39 +1,17 @@
 import { Tab, Tabs } from "@heroui/react";
-import { type PageInfo, pages } from "@pages/pages";
-import React, { type FC, useEffect, useState } from "react";
+import { pages } from "@pages/pages";
+import React, { type FC } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "wouter";
 
 /**
  * Sidebar for page selecting.
  */
 export const TopNavigator: FC = () => {
-    const [selected, setSelected] = useState(pages[0].id || "");
     const [pathname, navigate] = useLocation();
     const { t } = useTranslation("pages");
 
-    useEffect(() => {
-        const sel = pages.find(p => pathname.startsWith(p.href))?.id;
-        if (sel) setSelected(sel);
-    }, [pathname]);
-
-    /**
-     * Creates page tab button based on page info.
-     * This cannot be extracted as a separated component or NextUI will complain.
-     */
-    function createPageTab(info: PageInfo) {
-        const { icon, title, id } = info;
-        return <Tab
-            title={
-                <div className="flex items-center gap-2">
-                    {React.createElement(icon)}
-                    {t(title)}
-                </div>
-            }
-
-            key={id}
-        />;
-    }
+    const currentTabId = pages.find(p => pathname.startsWith(p.href))?.id ?? pages[0].id;
 
     // A workaround for https://github.com/heroui-inc/heroui/issues/4598
     function changePage(id: string | number) {
@@ -45,11 +23,25 @@ export const TopNavigator: FC = () => {
 
     return <div className="flex flex-col w-full h-full items-center justify-center">
         <Tabs
+            className="no-drag"
             color="primary"
-            selectedKey={selected}
+            selectedKey={currentTabId}
             onSelectionChange={changePage}
         >
-            {pages.map(page => createPageTab(page))}
+            {
+                pages.map(({ icon, title, id }) =>
+                    <Tab
+                        title={
+                            <div className="flex items-center gap-2">
+                                {React.createElement(icon)}
+                                {t(title)}
+                            </div>
+                        }
+
+                        key={id}
+                    />
+                )
+            }
         </Tabs>
     </div>;
 };