From c71fd166838c20fc19da606b2b9af31cca0bbaf0 Mon Sep 17 00:00:00 2001
From: Wendy Yuchen Sun <wendyyuchensun@gmail.com>
Date: Sun, 22 Mar 2026 22:17:51 +0800
Subject: [PATCH 1/5] refactor: move Header into Home, add A8M logo, replace
 headlessui menus

- Add @tabler/icons-react dependency
- Add A8M logo SVG asset
- Migrate header menus from headlessui to shared DropdownMenu component,
  replace heroicons with tabler icons, add title input and action buttons
- Remove Header from shared Layout so each page owns its header
- Update Home to render Header directly with import/export callbacks

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

s
---
 package-lock.json                      | 25 +++++++
 package.json                           |  1 +
 src/components/header/index.js         | 47 +++++++++-----
 src/components/header/language-menu.js | 69 ++++++--------------
 src/components/header/menu.js          | 90 ++++++--------------------
 src/components/layout.js               | 15 +----
 src/components/svg/a8m-logo.svg        |  8 +++
 src/pages/home/home.js                 | 62 ++++--------------
 8 files changed, 118 insertions(+), 199 deletions(-)
 create mode 100644 src/components/svg/a8m-logo.svg

diff --git a/package-lock.json b/package-lock.json
index afd75e1..095d263 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@coseeing/see-mark": "^1.5.0",
         "@headlessui/react": "^1.7.17",
         "@heroicons/react": "^2.0.18",
+        "@tabler/icons-react": "^3.40.0",
         "classnames": "^2.3.2",
         "codemirror": "^6.0.1",
         "core-js": "^3.21.1",
@@ -6451,6 +6452,30 @@
         "node": ">=10"
       }
     },
+    "node_modules/@tabler/icons": {
+      "version": "3.40.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.40.0.tgz",
+      "integrity": "sha512-V/Q4VgNPKubRTiLdmWjV/zscYcj5IIk+euicUtaVVqF6luSC9rDngYWgST5/yh3Mrg/mYUwRv1YVTk71Jp0twQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      }
+    },
+    "node_modules/@tabler/icons-react": {
+      "version": "3.40.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.40.0.tgz",
+      "integrity": "sha512-oO5+6QCnna4a//mYubx4euZfECtzQZFDGsDMIdzZUhbdyBCT+3bRVFBPueGIcemWld4Vb/0UQ39C/cmGfGylAg==",
+      "dependencies": {
+        "@tabler/icons": "3.40.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      },
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@tanstack/react-virtual": {
       "version": "3.13.12",
       "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.12.tgz",
diff --git a/package.json b/package.json
index 988c235..5f50924 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "@coseeing/see-mark": "^1.5.0",
     "@headlessui/react": "^1.7.17",
     "@heroicons/react": "^2.0.18",
+    "@tabler/icons-react": "^3.40.0",
     "classnames": "^2.3.2",
     "codemirror": "^6.0.1",
     "core-js": "^3.21.1",
diff --git a/src/components/header/index.js b/src/components/header/index.js
index bb96878..a5c2427 100644
--- a/src/components/header/index.js
+++ b/src/components/header/index.js
@@ -1,32 +1,49 @@
 import React, { useState } from 'react';
 
+import { ReactComponent as A8mLogo } from '@/components/svg/a8m-logo.svg';
 import Menu from './menu';
 import LanguageMenu from './language-menu';
 import TipModal from '@/components/home/tip-modal';
-import { ReactComponent as QuestionCircleComponent } from '@/components/svg/question-circle.svg';
+import { IconBulb } from '@tabler/icons-react';
 import { useTranslation } from '@/lib/i18n';
+import Button from '@/components/core/button';
 
-const Header = () => {
+const Header = ({ onImportClick, onExportClick, displayConfig, setDisplayConfig }) => {
   const t = useTranslation('home');
   const [showTipModal, setShowTipModal] = useState(false);
 
   return (
-    <header className="px-8 md:px-20 fixed h-20 flex justify-between items-center bg-white text-md md:text-2xl font-bold inset-x-0 z-10">
-      <div className="flex">
-        <h1 className="m-0">Access8Math</h1>
-        <button
-          className="hover:scale-110 transition-scale ml-2"
+    <header className="px-6 fixed h-[72px] flex items-center gap-2 bg-white inset-x-0 z-10 shadow-shadow2">
+      <div className="flex items-center gap-3 grow">
+        <h1 className="sr-only">Access8Math</h1>
+        <A8mLogo aria-hidden="true" />
+        <input
+          value={displayConfig.title}
+          type="text"
+          style={{ outline: 'none' }}
+          className="grow max-w-[280px] text-text-primary placeholder-text-placeholder text-xl font-medium leading-[1.4] pb-2 border-b-2 border-primary"
+          placeholder={t('pleaseInputTitle')}
+          aria-label={t('pleaseInputTitle')}
+          onChange={(e) => setDisplayConfig({ title: e.target.value })}
+        />
+      </div>
+      <div className="flex items-center gap-3">
+        <Button
+          variant="tertiary"
+          className="min-w-[88px] flex items-center gap-1"
           onClick={() => setShowTipModal(true)}
-          aria-label={t('descript')}
         >
-          <QuestionCircleComponent className="w-5 h-5" />
-        </button>
-      </div>
-      <div className="flex items-center">
-        <div className="md:mr-12 mr-8">
-          <LanguageMenu />
-        </div>
+          <IconBulb size={16} aria-hidden="true" />
+          <span>{t('instructions')}</span>
+        </Button>
         <Menu />
+        <LanguageMenu />
+        <Button variant="secondary" className="min-w-[88px]" onClick={onImportClick}>
+          {t('import')}
+        </Button>
+        <Button variant="primary" className="min-w-[88px]" onClick={onExportClick}>
+          {t('export')}
+        </Button>
       </div>
       <TipModal isOpen={showTipModal} onClose={() => setShowTipModal(false)} />
     </header>
diff --git a/src/components/header/language-menu.js b/src/components/header/language-menu.js
index 9d20bd7..31e075d 100644
--- a/src/components/header/language-menu.js
+++ b/src/components/header/language-menu.js
@@ -1,9 +1,10 @@
-import React, { Fragment } from 'react';
-import { Menu, Transition } from '@headlessui/react';
-import { LanguageIcon } from '@heroicons/react/20/solid';
+import React from 'react';
+import { IconLanguage } from '@tabler/icons-react';
 
 import i18n, { useTranslation } from '@/lib/i18n';
 import { useLocaleContext } from '@/lib/locale-switch';
+import Button from '@/components/core/button';
+import DropdownMenu from '@/components/core/dropdown-menu';
 
 const LANGUAGES = [
   { locale: 'zh-TW' },
@@ -16,54 +17,22 @@ const LanguageMenu = () => {
   const t = useTranslation('common');
   const { changeLocale } = useLocaleContext();
 
-  return (
-    <Menu as="div" className="relative">
-      {({ open }) => (
-        <>
-          <Menu.Button
-            className="flex items-center md:text-md text-base font-semibold leading-8 text-gray-900"
-            aria-label={t('changeLocale')}
-          >
-            <LanguageIcon className="h-5 w-5 flex-none mr-1" aria-hidden="true" />
-            <span>{t(`locale.${i18n.language}`)}</span>
-          </Menu.Button>
-          {open && <div className="fixed z-10 inset-0 bg-black opacity-30" />}
+  const items = LANGUAGES.map(({ locale }) => ({
+    label: t(`locale.${locale}`),
+    onClick: () => changeLocale(locale),
+  }));
 
-          <Transition
-            as={Fragment}
-            enter="transition ease-out duration-100"
-            enterFrom="transform opacity-0 scale-95"
-            enterTo="transform opacity-100 scale-100"
-            leave="transition ease-in duration-75"
-            leaveFrom="transform opacity-100 scale-100"
-            leaveTo="transform opacity-0 scale-95"
-          >
-            <Menu.Items className="absolute right-0 z-10 mt-5 flex w-screen max-w-max">
-              <div className="overflow-hidden rounded-xl bg-white text-sm leading-6 shadow-lg ring-1 ring-gray-900/5">
-                <div>
-                  {LANGUAGES.map(({ locale }) => (
-                    <Menu.Item key={locale}>
-                      {({ active }) => {
-                        return (
-                          <button
-                            className={`group relative flex rounded-lg p-4 hover:bg-gray-50 text-gray-900 w-full ${
-                              active ? 'font-bold' : 'font-normal'
-                            }`}
-                            onClick={() => changeLocale(locale)}
-                          >
-                            {t(`locale.${locale}`)}
-                          </button>
-                        );
-                      }}
-                    </Menu.Item>
-                  ))}
-                </div>
-              </div>
-            </Menu.Items>
-          </Transition>
-        </>
-      )}
-    </Menu>
+  return (
+    <DropdownMenu
+      triggerButton={
+        <Button variant="tertiary" className="min-w-[88px]" aria-label={t('changeLocale')}>
+          <IconLanguage size={16} className="flex-none mr-1" aria-hidden="true" />
+          <span>{t(`locale.${i18n.language}`)}</span>
+        </Button>
+      }
+      items={items}
+      itemsClassName="min-w-[118px]"
+    />
   );
 };
 
diff --git a/src/components/header/menu.js b/src/components/header/menu.js
index d18ee2e..73c9e6f 100644
--- a/src/components/header/menu.js
+++ b/src/components/header/menu.js
@@ -1,8 +1,9 @@
-import React, { Fragment, useMemo } from 'react';
-import { Transition, Menu } from '@headlessui/react';
-import { ChevronDownIcon } from '@heroicons/react/20/solid';
+import React, { useMemo } from 'react';
+import { IconDots } from '@tabler/icons-react';
 
 import { useTranslation } from '@/lib/i18n';
+import Button from '@/components/core/button';
+import DropdownMenu from '@/components/core/dropdown-menu';
 
 const addonDownloadClick = () => {
   fetch('https://www.nvaccess.org/addonStore/en/all/latest.json', {
@@ -54,78 +55,23 @@ const NativeMenu = () => {
   const t = useTranslation('menu');
 
   const items = useMemo(() => {
-    return ABOUT_ITEMS.map((item) => {
-      return {
-        ...item,
-        name: t(item.id),
-      };
-    });
+    return [
+      { label: t('addonDownload'), onClick: addonDownloadClick },
+      ...ABOUT_ITEMS.map((item) => ({ label: t(item.id), href: item.href })),
+    ];
   }, [t]);
 
   return (
-    <Menu as="div" className="relative">
-      {({ open }) => (
-        <>
-          <Menu.Button
-            className="flex items-center md:text-md text-base font-semibold leading-8 text-gray-900"
-            aria-label={t('more')}
-          >
-            <span>{t('more')}</span>
-            <ChevronDownIcon className="h-5 w-5 flex-none text-gray-400 ml-1" aria-hidden="true" />
-          </Menu.Button>
-          {open && <div className="fixed z-10 inset-0 bg-black opacity-30" />}
-          <Transition
-            as={Fragment}
-            enter="transition ease-out duration-100"
-            enterFrom="transform opacity-0 scale-95"
-            enterTo="transform opacity-100 scale-100"
-            leave="transition ease-in duration-75"
-            leaveFrom="transform opacity-100 scale-100"
-            leaveTo="transform opacity-0 scale-95"
-          >
-            <Menu.Items className="absolute right-0 z-10 mt-5 flex w-screen max-w-max">
-              <div className="overflow-hidden rounded-xl bg-white text-sm leading-6 shadow-lg ring-1 ring-gray-900/5">
-                <div>
-                  <Menu.Item>
-                    {({ active }) => {
-                      return (
-                        <button
-                          className={`${
-                            active ? 'font-bold' : 'font-normal'
-                          } text-gray-900 group relative flex rounded-lg p-4 hover:bg-gray-50 w-full`}
-                          onClick={addonDownloadClick}
-                        >
-                          {t('addonDownload')}
-                        </button>
-                      );
-                    }}
-                  </Menu.Item>
-
-                  {items.map(({ id, name, href }) => (
-                    <Menu.Item key={id}>
-                      {({ active }) => {
-                        return (
-                          <a
-                            href={href}
-                            className={`${
-                              active ? 'font-bold' : 'font-normal'
-                            } text-gray-900 group relative flex rounded-lg p-4 hover:bg-gray-50`}
-                            target="_blank"
-                            rel="noreferrer"
-                          >
-                            {name}
-                          </a>
-                        );
-                      }}
-                    </Menu.Item>
-                  ))}
-                </div>
-              </div>
-            </Menu.Items>
-          </Transition>
-        </>
-      )}
-    </Menu>
+    <DropdownMenu
+      triggerButton={
+        <Button variant="tertiary" className="min-w-[88px]" aria-label={t('more')}>
+          <IconDots size={16} className="flex-none mr-1" aria-hidden="true" />
+          <span>{t('more')}</span>
+        </Button>
+      }
+      items={items}
+      itemsClassName="min-w-[118px]"
+    />
   );
 };
 
diff --git a/src/components/layout.js b/src/components/layout.js
index ae8a48e..07457e3 100644
--- a/src/components/layout.js
+++ b/src/components/layout.js
@@ -1,24 +1,15 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { Outlet } from 'react-router-dom';
 
 import { LocaleContextProvider } from '@/lib/locale-switch';
 
-import Header from './header';
 import Toaster from './core/toast/toaster';
 
 const Layout = () => {
   return (
     <LocaleContextProvider>
-      <Fragment>
-        <div>
-          <Header />
-
-          <main className="pt-20 md:h-screen w-screen ">
-            <Outlet />
-          </main>
-        </div>
-        <Toaster />
-      </Fragment>
+      <Outlet />
+      <Toaster />
     </LocaleContextProvider>
   );
 };
diff --git a/src/components/svg/a8m-logo.svg b/src/components/svg/a8m-logo.svg
new file mode 100644
index 0000000..e650871
--- /dev/null
+++ b/src/components/svg/a8m-logo.svg
@@ -0,0 +1,8 @@
+<svg width="65" height="31" viewBox="0 0 65 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9391 13.0052H8.52796V9.59402C8.52796 9.14167 8.34826 8.70784 8.0284 8.38798C7.70854 8.06812 7.27472 7.88843 6.82236 7.88843C6.37001 7.88843 5.93619 8.06812 5.61633 8.38798C5.29647 8.70784 5.11677 9.14167 5.11677 9.59402L5.17732 13.0052H1.70559C1.25324 13.0052 0.819416 13.1849 0.499556 13.5048C0.179696 13.8246 0 14.2584 0 14.7108C0 15.1631 0.179696 15.597 0.499556 15.9168C0.819416 16.2367 1.25324 16.4164 1.70559 16.4164L5.17732 16.3558L5.11677 19.8276C5.11677 20.2799 5.29647 20.7137 5.61633 21.0336C5.93619 21.3535 6.37001 21.5332 6.82236 21.5332C7.27472 21.5332 7.70854 21.3535 8.0284 21.0336C8.34826 20.7137 8.52796 20.2799 8.52796 19.8276V16.3558L11.9391 16.4164C12.3915 16.4164 12.8253 16.2367 13.1452 15.9168C13.465 15.597 13.6447 15.1631 13.6447 14.7108C13.6447 14.2584 13.465 13.8246 13.1452 13.5048C12.8253 13.1849 12.3915 13.0052 11.9391 13.0052Z" fill="#0D56E8"/>
+<path d="M60.0926 17.1774L57.6805 14.7653L60.0926 12.3533C60.4124 12.0334 60.5921 11.5996 60.5921 11.1472C60.5921 10.6949 60.4124 10.2611 60.0926 9.94121C59.7727 9.62135 59.3389 9.44165 58.8865 9.44165C58.4342 9.44165 58.0004 9.62135 57.6805 9.94121L55.3112 12.3961L52.8564 9.94121C52.5365 9.62135 52.1027 9.44165 51.6503 9.44165C51.198 9.44165 50.7642 9.62135 50.4443 9.94121C50.1244 10.2611 49.9447 10.6949 49.9447 11.1472C49.9447 11.5996 50.1244 12.0334 50.4443 12.3533L52.942 14.7653L50.4443 17.1774C50.1244 17.4973 49.9447 17.9311 49.9447 18.3835C49.9447 18.8358 50.1244 19.2696 50.4443 19.5895C50.7642 19.9093 51.198 20.089 51.6503 20.089C52.1027 20.089 52.5365 19.9093 52.8564 19.5895L55.3112 17.1346L57.6805 19.5895C58.0004 19.9093 58.4342 20.089 58.8865 20.089C59.3389 20.089 59.7727 19.9093 60.0926 19.5895C60.4124 19.2696 60.5921 18.8358 60.5921 18.3835C60.5921 17.9311 60.4124 17.4973 60.0926 17.1774Z" fill="#FEA400"/>
+<path d="M13.245 7.49402C13.4177 7.49402 13.584 7.43006 13.7162 7.31706C15.5454 5.76284 17.9098 4.82477 20.4916 4.82477C22.7601 4.82477 24.9134 5.53472 26.7277 6.88C27.6871 7.59209 29.0324 7.58569 29.8959 6.76275C31.0066 5.70528 30.868 3.95918 29.6954 3.07654C27.0262 1.06394 23.8431 7.43866e-05 20.4895 7.43866e-05C15.3919 7.43866e-05 10.87 2.5073 8.08774 6.35127C7.74236 6.82671 8.092 7.49402 8.6783 7.49402H13.245Z" fill="#0D56E8"/>
+<path d="M40.1039 11.7262C39.1402 10.8073 37.6137 10.8415 36.6927 11.8051C36.2087 12.3104 36.7161 11.8797 35.1448 13.8518C32.6973 16.924 28.6018 22.0664 26.9985 23.3562C25.4315 24.6184 23.5575 25.7867 20.4896 25.7867C17.4365 25.7867 14.6884 24.4734 12.7696 22.384C12.631 22.2327 12.437 22.141 12.2302 22.141H8.03234C7.46949 22.141 7.11772 22.7571 7.4098 23.239C10.0961 27.6543 14.9528 30.6114 20.4896 30.6114C25.0904 30.6114 28.0027 28.7438 30.0238 27.1149C31.8893 25.614 35.1555 21.5824 38.9185 16.8579C40.0612 15.4231 39.8246 15.5105 40.1827 15.1374C41.1016 14.1716 41.0675 12.6451 40.1039 11.7262Z" fill="#0D56E8"/>
+<path d="M51.662 23.1152C51.4893 23.1152 51.323 23.1792 51.1908 23.2922C49.3615 24.8464 46.9972 25.7845 44.4153 25.7845C42.1469 25.7845 39.9936 25.0745 38.1793 23.7292C37.2199 23.0172 35.8746 23.0236 35.0111 23.8465C33.9004 24.904 34.0389 26.6501 35.2115 27.5327C37.8808 29.5453 41.0638 30.6092 44.4175 30.6092C49.5151 30.6092 54.037 28.102 56.8192 24.258C57.1646 23.7825 56.815 23.1152 56.2287 23.1152H51.662Z" fill="#FEA400"/>
+<path d="M24.9472 18.6274C25.9109 19.5463 27.4374 19.5122 28.3584 18.5486C28.8424 18.0433 28.1921 18.7298 29.7634 16.7577C32.2109 13.6855 36.3064 8.54313 37.9097 7.25327C39.4767 5.99113 41.3507 4.8228 44.4187 4.8228C47.4717 4.8228 50.2198 6.13611 52.1386 8.22546C52.2772 8.37683 52.4712 8.46851 52.678 8.46851H56.878C57.4409 8.46851 57.7926 7.85236 57.5005 7.37053C54.81 2.95731 49.9533 0.000244141 44.4187 0.000244141C39.8178 0.000244141 36.9055 1.86787 34.8844 3.49671C33.0189 4.99763 29.7527 9.02922 25.9897 13.7537C24.847 15.1885 25.2265 14.8453 24.8683 15.2184C23.9494 16.1799 23.9835 17.7085 24.9472 18.6274Z" fill="#FEA400"/>
+</svg>
diff --git a/src/pages/home/home.js b/src/pages/home/home.js
index abbb5d0..354ab8d 100644
--- a/src/pages/home/home.js
+++ b/src/pages/home/home.js
@@ -21,6 +21,7 @@ import autoCompletions from '@/lib/editor-auto-completion';
 
 import { latexDelimiterConvertor } from '@coseeing/see-mark';
 
+import Header from '@/components/header';
 import Button from '@/components/core/button';
 import { ToggleButtonGroup } from '@/components/core/button/toggle-button';
 import EditIconsTab from '@/components/edit-icons-tab';
@@ -288,54 +289,14 @@ export default function Home() {
   }
 
   return (
-    <div className="w-full h-full">
-      {/* Top file setting panel */}
-      <div className="flex flex-col md:flex-row justify-between px-8 md:px-20 py-4 ">
-        <div className="flex justify-start md:w-1/3">
-          <div className="content-center mr-3">{t('latexDelimiter.name')}</div>
-          <div className="bg-white border border-gray-300 rounded-md font-bold p-1">
-            <ToggleButtonGroup
-              options={latexDelimiterOptions}
-              activeOption={displayConfig.latexDelimiter}
-              onOptionChange={(option) => setDisplayConfig({ latexDelimiter: option })}
-            />
-          </div>
-        </div>
-        <div className="flex justify-center md:w-1/3">
-          <div className="flex flex-col items-center w-full">
-            <div className="relative w-full max-w-lg">
-              <div className="relative w-full max-w-lg">
-                <input
-                  value={displayConfig.title}
-                  type="text"
-                  style={{
-                    outline: 'none',
-                  }}
-                  className="text-center text-2xl text-cyan font-bold border-b-2 border-cyan p-2 placeholder-opacity-100 w-full"
-                  placeholder={t('pleaseInputTitle')}
-                  aria-label={t('pleaseInputTitle')}
-                  onChange={(e) => setDisplayConfig({ title: e.target.value })}
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className="flex justify-end md:w-1/3">
-          <button
-            className="rounded-full border bg-white border-cyan text-cyan hover:bg-cyan hover:text-white px-7 py-1"
-            onClick={importClick}
-          >
-            {t('import')}
-          </button>
-          <button
-            className="rounded-full border bg-white border-cyan text-cyan hover:bg-cyan hover:text-white px-7 py-1 ml-3"
-            onClick={() => setShowSettingModal(true)}
-          >
-            {t('export')}
-          </button>
-        </div>
-      </div>
-      <div className="flex flex-col md:flex-row overflow-x-hidden overflow-y-auto">
+    <>
+      <Header
+        onImportClick={importClick}
+        onExportClick={() => setShowSettingModal(true)}
+        displayConfig={displayConfig}
+        setDisplayConfig={setDisplayConfig}
+      />
+      <main className="pt-[72px] flex flex-col md:flex-row overflow-x-hidden overflow-y-auto">
         {/* Left side input panel */}
         <div className="md:w-3/5 bg-cyanLight md:p-8 p-4 flex flex-col">
           <div className="flex justify-between">
@@ -417,6 +378,7 @@ export default function Home() {
             {content}
           </div>
         </div>
+
         <SettingModal
           isOpen={showSettingModal}
           onClose={() => setShowSettingModal(false)}
@@ -434,7 +396,7 @@ export default function Home() {
           LatexDelimiter={LatexDelimiter}
           data={data}
         />
-      </div>
-    </div>
+      </main>
+    </>
   );
 }

From d0e2d6bde1851cee653be3a99dc92cde85955335 Mon Sep 17 00:00:00 2001
From: Wendy Yuchen Sun <wendyyuchensun@gmail.com>
Date: Sun, 22 Mar 2026 22:19:25 +0800
Subject: [PATCH 2/5] refactor: update left panel edit area styling and
 CodeMirror theme
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace ToggleButtonGroup with SegmentedControl for latex delimiter
- Update left panel background and padding (cyanLight → blue-50)
- Add border/bg/rounded container for the editor area
- Expand CodeMirror theme with gutter, line number, and content styles

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/edit-icons-tab.js | 221 ++++++++++++++-----------------
 src/pages/home/home.js           |  71 +++++++---
 2 files changed, 154 insertions(+), 138 deletions(-)

diff --git a/src/components/edit-icons-tab.js b/src/components/edit-icons-tab.js
index 43f51ed..71cb8f7 100644
--- a/src/components/edit-icons-tab.js
+++ b/src/components/edit-icons-tab.js
@@ -40,136 +40,111 @@ const EditIconsTab = ({ insertLatex, addImageToExport }) => {
   );
 
   return (
-    <div className="flex h-[600px]">
+    <>
       <Tab.Group
         as="div"
         selectedIndex={selectedMainTabIndex}
         onChange={setSelectedMainTabIndex}
-        className="flex flex-col w-full"
+        className="flex flex-col w-full h-[600px] border-r border-border-main"
       >
-        <div className="flex bg-cyan p-2">
-          <Tab.List as="div" className="w-full flex bg-cyan">
-            {mainTabList.map(({ id }, index) => (
-              <Tab
-                as="button"
-                key={id}
-                className={`rounded flex-1 px-4 py-2 text-sm text-center cursor-pointer transition-colors ${
-                  selectedMainTabIndex === index ? 'bg-white text-black' : 'bg-cyan text-white'
-                }`}
-              >
-                {t(`main.${id}`)}
-              </Tab>
-            ))}
-          </Tab.List>
-        </div>
-        <div className="flex flex-1 h-full">
-          <Tab.Panels as="div" className="flex w-full">
-            <Tab.Panel className="h-full w-full">
-              <Tab.Group
-                as="div"
-                selectedIndex={selectedMathTabIndex}
-                onChange={setSelectedMathTabIndex}
-                className="h-full flex"
-              >
-                <div className="flex h-full w-full">
-                  <Tab.List
-                    as="div"
-                    className="flex flex-col bg-cyan p-2"
-                    style={{
-                      maxHeight: '550px',
-                      overflowY: 'auto',
-                      scrollbarWidth: 'none', // hide scrollbar in Firefox
-                      msOverflowStyle: 'none', // hide scrollbar in IE/Edge
-                    }}
-                  >
-                    {mathTabList.map((tab, mathTabIndex) => (
-                      <Tooltip key={tab.id} label={t(`categorys.${tab.id}`)} position="right">
-                        <Tab
-                          as="button"
-                          key={tab.id}
-                          aria-label={t(`categorys.${tab.id}`)}
-                          className={`group relative rounded mb-1 category-icon h-12 w-12 flex items-center justify-center mx-0.5 bg-white cursor-pointer transition-colors ${
-                            selectedMathTabIndex === mathTabIndex ? 'active' : ''
-                          }`}
-                        >
-                          <tab.Icon width={48} height={48} />
-                          {selectedMathTabIndex === mathTabIndex && (
-                            // White triangle arrow pointing right to indicate selected tab
-                            <div
-                              className="absolute -right-2 top-1/2 -translate-y-1/2 w-0 h-0"
-                              style={{
-                                borderTop: '8px solid transparent',
-                                borderBottom: '8px solid transparent',
-                                borderLeft: '8px solid white',
-                              }}
-                            />
-                          )}
-                        </Tab>
-                      </Tooltip>
-                    ))}
-                  </Tab.List>
-                  <Tab.Panels
-                    as="div"
-                    className="flex-1 bg-gray-50 border border-gray-300 p-2 overflow-y-auto"
-                  >
-                    {mathTabList.map((mathTab) => {
-                      return (
-                        <Tab.Panel key={mathTab.id} className="flex flex-wrap">
-                          {(mathTab?.subTabs || []).sort(compare('order', 'asc')).map((subTab) => (
-                            <Tooltip
-                              key={subTab.id}
-                              label={t(`latexs.${subTab.id}`)}
-                              position="top"
+        <Tab.List as="div" className="w-full flex items-center border-b border-border-main">
+          {mainTabList.map(({ id }, index) => (
+            <Tab
+              as="button"
+              key={id}
+              className={`rounded-lg flex-1 text-sm text-center leading-[1.5] py-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary m-1 cursor-pointer transition-colors ${
+                selectedMainTabIndex === index ? 'bg-blue-200 text-primary' : 'text-text-primary'
+              }`}
+            >
+              {t(`main.${id}`)}
+            </Tab>
+          ))}
+        </Tab.List>
+        <Tab.Panels as="div" className="flex flex-1 h-full w-full">
+          <Tab.Panel className="h-full w-full">
+            <Tab.Group
+              as="div"
+              selectedIndex={selectedMathTabIndex}
+              onChange={setSelectedMathTabIndex}
+              className="h-full flex"
+            >
+              <div className="flex h-full w-full">
+                <Tab.List
+                  as="div"
+                  className="flex flex-col px-2 py-3 gap-2 border-r border-border-main"
+                  style={{
+                    maxHeight: '562px',
+                    overflowY: 'auto',
+                    scrollbarWidth: 'none', // hide scrollbar in Firefox
+                    msOverflowStyle: 'none', // hide scrollbar in IE/Edge
+                  }}
+                >
+                  {mathTabList.map((tab, mathTabIndex) => (
+                    <Tooltip key={tab.id} label={t(`categorys.${tab.id}`)} position="right">
+                      <Tab
+                        as="button"
+                        key={tab.id}
+                        aria-label={t(`categorys.${tab.id}`)}
+                        className={`group relative rounded category-icon flex items-center justify-center cursor-pointer transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary ${
+                          selectedMathTabIndex === mathTabIndex
+                            ? 'active bg-blue-100'
+                            : 'bg-white hover:bg-blue-100'
+                        }`}
+                      >
+                        <tab.Icon width={52} height={52} />
+                      </Tab>
+                    </Tooltip>
+                  ))}
+                </Tab.List>
+                <Tab.Panels as="div" className="flex-1 px-2 py-3 overflow-y-auto">
+                  {mathTabList.map((mathTab) => {
+                    return (
+                      <Tab.Panel key={mathTab.id} className="flex flex-wrap gap-2">
+                        {(mathTab?.subTabs || []).sort(compare('order', 'asc')).map((subTab) => (
+                          <Tooltip key={subTab.id} label={t(`latexs.${subTab.id}`)} position="top">
+                            <button
+                              aria-label={t(`latexs.${subTab.id}`)}
+                              className="group relative bg-white rounded border border-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+                              onClick={() => insertLatex(subTab)}
                             >
-                              <button
-                                aria-label={t(`latexs.${subTab.id}`)}
-                                className="w-w5 h-w5 group relative m-1"
-                                onClick={() => insertLatex(subTab)}
-                              >
-                                <subTab.Icon
-                                  width={50}
-                                  height={50}
-                                  className="bg-cyanLight rounded"
-                                />
-                              </button>
-                            </Tooltip>
-                          ))}
-                        </Tab.Panel>
-                      );
-                    })}
-                  </Tab.Panels>
-                </div>
-              </Tab.Group>
-            </Tab.Panel>
-            <Tab.Panel className="flex flex-wrap content-baseline bg-cyan p-1 h-full">
-              {markdowns.map((tab) => (
-                <Tooltip key={tab.id} label={t(`markdown.${tab.id}`)} position="top">
-                  <button
-                    aria-label={t(`markdown.${tab.id}`)}
-                    className="group relative rounded mb-1 h-12 w-12 mx-0.5 bg-white cursor-pointer transition-colors flex items-center justify-center"
-                    onClick={() => {
-                      if (tab.id === 'insert_image') {
-                        setIsImageModalOpen(true);
-                        return;
-                      }
-                      insertLatex(tab);
-                    }}
-                  >
-                    <tab.Icon width={48} height={48} />
-                  </button>
-                </Tooltip>
-              ))}
-            </Tab.Panel>
-          </Tab.Panels>
-        </div>
-
-        <ImageUploadModal
-          isOpen={isImageModalOpen}
-          onClose={() => setIsImageModalOpen(false)}
-          onConfirm={handleImageConfirm}
-        />
+                              <subTab.Icon width={50} height={50} className="rounded" />
+                            </button>
+                          </Tooltip>
+                        ))}
+                      </Tab.Panel>
+                    );
+                  })}
+                </Tab.Panels>
+              </div>
+            </Tab.Group>
+          </Tab.Panel>
+          <Tab.Panel className="flex flex-wrap gap-2 content-baseline px-2 py-3 h-full">
+            {markdowns.map((tab) => (
+              <Tooltip key={tab.id} label={t(`markdown.${tab.id}`)} position="top">
+                <button
+                  aria-label={t(`markdown.${tab.id}`)}
+                  className="group relative rounded bg-white cursor-pointer border border-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary flex items-center justify-center"
+                  onClick={() => {
+                    if (tab.id === 'insert_image') {
+                      setIsImageModalOpen(true);
+                      return;
+                    }
+                    insertLatex(tab);
+                  }}
+                >
+                  <tab.Icon width={50} height={50} />
+                </button>
+              </Tooltip>
+            ))}
+          </Tab.Panel>
+        </Tab.Panels>
       </Tab.Group>
-    </div>
+      <ImageUploadModal
+        isOpen={isImageModalOpen}
+        onClose={() => setIsImageModalOpen(false)}
+        onConfirm={handleImageConfirm}
+      />
+    </>
   );
 };
 
diff --git a/src/pages/home/home.js b/src/pages/home/home.js
index 354ab8d..722204c 100644
--- a/src/pages/home/home.js
+++ b/src/pages/home/home.js
@@ -24,6 +24,7 @@ import { latexDelimiterConvertor } from '@coseeing/see-mark';
 import Header from '@/components/header';
 import Button from '@/components/core/button';
 import { ToggleButtonGroup } from '@/components/core/button/toggle-button';
+import SegmentedControl from '@/components/core/button/segmented-control';
 import EditIconsTab from '@/components/edit-icons-tab';
 import SettingModal from '@/components/home/setting-modal';
 import ConvertHintModal from '@/components/home/convert-hint-modal';
@@ -88,7 +89,37 @@ export default function Home() {
         minHeight: '300px',
         height: '100%',
       },
-      '.cm-scroller': { overflow: 'auto' },
+      '.cm-scroller': {
+        overflow: 'auto',
+        lineHeight: '1.5',
+      },
+      '.cm-gutters': {
+        backgroundColor: '#fff',
+        border: 'none',
+        borderRight: '1px solid #d1d1d1',
+      },
+      '.cm-lineNumbers .cm-gutterElement': {
+        width: '42px',
+        minWidth: '42px',
+        padding: '8px',
+        color: '#6d6d6d',
+        fontSize: '16px',
+        lineHeight: '1.5',
+        textAlign: 'center',
+      },
+      '.cm-lineNumbers .cm-gutterElement:first-of-type': {
+        padding: 0,
+      },
+      '.cm-foldGutter .cm-gutterElement': {
+        lineHeight: '2.5',
+      },
+      '.cm-content': {
+        color: '#454545',
+        padding: 0,
+      },
+      '.cm-line': {
+        padding: '8px',
+      },
     });
     codemirrorView.current = new EditorView({
       state: EditorState.create({
@@ -270,8 +301,8 @@ export default function Home() {
   );
 
   const latexDelimiterOptions = [
-    { value: LatexDelimiter.DOLLAR, label: t('latexDelimiter.dollar') },
-    { value: LatexDelimiter.BRACKET, label: t('latexDelimiter.bracket') },
+    { id: LatexDelimiter.DOLLAR, label: t('latexDelimiter.dollar') },
+    { id: LatexDelimiter.BRACKET, label: t('latexDelimiter.bracket') },
   ];
 
   function adjustSelection(view) {
@@ -298,18 +329,28 @@ export default function Home() {
       />
       <main className="pt-[72px] flex flex-col md:flex-row overflow-x-hidden overflow-y-auto">
         {/* Left side input panel */}
-        <div className="md:w-3/5 bg-cyanLight md:p-8 p-4 flex flex-col">
-          <div className="flex justify-between">
-            <h2 className="text-2xl md:text-3xl">{t('editContent')}</h2>
-            <div className="flex justify-end mb-4 mt-4 md:mt-m1">
-              <Button variant="primary" className="ml-2" onClick={insertMark}>
-                {t('mark')}{' '}
-                {displayConfig.latexDelimiter === LatexDelimiter.DOLLAR ? '$' : '\\( \\)'}
+        <div className="md:w-3/5 bg-blue-50 p-6">
+          <div className="flex items-center justify-between mb-4">
+            <h2>{t('editContent')}</h2>
+            <div className="flex items-center gap-2">
+              <div className="flex items-center">
+                <div className="mr-2 text-text-primary text-sm font-medium">
+                  {t('latexDelimiter.name')}
+                </div>
+                <SegmentedControl
+                  items={latexDelimiterOptions}
+                  value={displayConfig.latexDelimiter}
+                  onChange={(option) => setDisplayConfig({ latexDelimiter: option })}
+                  buttonClassName="w-[88px] h-7"
+                />
+              </div>
+              <Button variant="secondary" onClick={insertMark}>
+                {t('insert')}{' '}
+                {displayConfig.latexDelimiter === LatexDelimiter.DOLLAR ? '$' : '\\( \\)'}{' '}
+                {t('mark')}
               </Button>
               <Button
-                variant="primary"
-                className="md:ml-2 ml-1"
-                size="sm"
+                variant="secondary"
                 onClick={() => {
                   setShowConvertHintModal(true);
                 }}
@@ -321,14 +362,14 @@ export default function Home() {
             </div>
           </div>
 
-          <div className="flex h-[600px]">
+          <div className="flex h-[600px] border border-border-main bg-white rounded-lg overflow-hidden">
             <div className="w-1/3 flex-shrink-0 h-full">
               <EditIconsTab insertLatex={insertLatex} addImageToExport={addImageToExport} />
             </div>
             <div className="w-2/3 h-full">
               <div
                 id="codemirror"
-                className="h-full left-side-input-textarea flex-1 resize-none border border-bd1 overflow-y-scroll rounded-b-lg"
+                className="h-full left-side-input-textarea flex-1 resize-none overflow-y-scroll"
               />
               <input
                 ref={importFile}

From ceae1b6ee67796b9e54cee1c570204e0ebbd593a Mon Sep 17 00:00:00 2001
From: Wendy Yuchen Sun <wendyyuchensun@gmail.com>
Date: Sun, 22 Mar 2026 22:20:18 +0800
Subject: [PATCH 3/5] refactor: update right panel preview area styling and
 controls
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace documentFormat/documentColor ToggleButtonGroups with a single
  DropdownMenu for document color
- Update preview container classes (border-2 → border, add leading/space-y,
  bg-black → bg-gray-800, text-black → text-text-primary)
- Adjust right panel padding to p-6

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/pages/home/home.js | 69 +++++++++++++++++++++---------------------
 1 file changed, 34 insertions(+), 35 deletions(-)

diff --git a/src/pages/home/home.js b/src/pages/home/home.js
index 722204c..8c12aed 100644
--- a/src/pages/home/home.js
+++ b/src/pages/home/home.js
@@ -22,19 +22,14 @@ import autoCompletions from '@/lib/editor-auto-completion';
 import { latexDelimiterConvertor } from '@coseeing/see-mark';
 
 import Header from '@/components/header';
+import { IconChevronDown } from '@tabler/icons-react';
 import Button from '@/components/core/button';
-import { ToggleButtonGroup } from '@/components/core/button/toggle-button';
+import DropdownMenu from '@/components/core/dropdown-menu';
 import SegmentedControl from '@/components/core/button/segmented-control';
 import EditIconsTab from '@/components/edit-icons-tab';
 import SettingModal from '@/components/home/setting-modal';
 import ConvertHintModal from '@/components/home/convert-hint-modal';
-import {
-  useDisplayConfig,
-  ExportType,
-  LatexDelimiter,
-  DocumentFormat,
-  DocumentColor,
-} from '@/lib/display-config';
+import { useDisplayConfig, ExportType, LatexDelimiter, DocumentColor } from '@/lib/display-config';
 import { importSource } from '@/lib/import-source';
 
 import useSeeMarkParse from './useSeeMarkParse';
@@ -383,37 +378,41 @@ export default function Home() {
         </div>
 
         {/* Right side output panel */}
-        <div className="md:w-2/5 flex flex-col md:h-full h-[600px] md:p-8 p-4">
-          <div className="flex mb-4 w-100 justify-between">
-            <h2 className="text-2xl md:text-3xl w-100">{t('preview')}</h2>
-            <div className="flex justify-end">
-              <div className="bg-white border border-gray-300 rounded-md font-bold p-1">
-                <ToggleButtonGroup
-                  options={[
-                    { value: DocumentFormat.BLOCK, label: t('documentFormat.block') },
-                    { value: DocumentFormat.INLINE, label: t('documentFormat.inline') },
-                  ]}
-                  activeOption={displayConfig.documentFormat}
-                  onOptionChange={(option) => setDisplayConfig({ documentFormat: option })}
-                />
-              </div>
-              <div className="bg-white border border-gray-300 rounded-md font-bold p-1 ml-4">
-                <ToggleButtonGroup
-                  options={[
-                    { value: DocumentColor.LIGHT, label: t('documentColor.light') },
-                    { value: DocumentColor.DARK, label: t('documentColor.dark') },
-                  ]}
-                  activeOption={displayConfig.documentColor}
-                  onOptionChange={(option) => setDisplayConfig({ documentColor: option })}
-                />
-              </div>
+        <div className="md:w-2/5 flex flex-col md:h-full h-[600px] p-6">
+          <div className="flex justify-between items-center mb-4">
+            <h2>{t('preview')}</h2>
+            <div>
+              <DropdownMenu
+                align="right"
+                triggerButton={
+                  <Button variant="secondary" className="gap-2">
+                    <span>
+                      {displayConfig.documentColor === DocumentColor.DARK
+                        ? t('documentColor.dark')
+                        : t('documentColor.light')}
+                    </span>
+                    <IconChevronDown size={16} aria-hidden="true" />
+                  </Button>
+                }
+                items={[
+                  {
+                    label: t('documentColor.light'),
+                    onClick: () => setDisplayConfig({ documentColor: DocumentColor.LIGHT }),
+                  },
+                  {
+                    label: t('documentColor.dark'),
+                    onClick: () => setDisplayConfig({ documentColor: DocumentColor.DARK }),
+                  },
+                ]}
+                itemsClassName="min-w-[118px]"
+              />
             </div>
           </div>
           <div
-            className={`right-side-preview-area border-2 p-4 flex-1 rounded-lg ${
+            className={`right-side-preview-area border border-border-main leading-[1.5] space-y-3 p-4 flex-1 rounded-lg ${
               displayConfig.documentColor === DocumentColor.DARK
-                ? 'darkmode bg-black text-white'
-                : 'text-black'
+                ? 'darkmode bg-gray-800 text-white'
+                : 'bg-white text-text-primary'
             }`}
           >
             {content}

From 54f2cb2890e762d0d8c575dd77d35457fb849c82 Mon Sep 17 00:00:00 2001
From: Wendy Yuchen Sun <wendyyuchensun@gmail.com>
Date: Sun, 22 Mar 2026 22:20:23 +0800
Subject: [PATCH 4/5] refactor: update modal styles, icons, and sizing

- Use tabler icon components for delimiter symbols in ConvertHintModal
- Set size="sm" on ConvertHintModal and TipModal
- Remove fixed-width wrapper div in SettingModal

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../home/convert-hint-modal/index.js          | 64 ++++++-------
 src/components/home/setting-modal/index.js    | 96 +++++++++----------
 src/components/home/tip-modal.js              | 15 ++-
 3 files changed, 82 insertions(+), 93 deletions(-)

diff --git a/src/components/home/convert-hint-modal/index.js b/src/components/home/convert-hint-modal/index.js
index 463402d..b14d32f 100644
--- a/src/components/home/convert-hint-modal/index.js
+++ b/src/components/home/convert-hint-modal/index.js
@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
+import { IconParentheses, IconCurrencyDollar, IconArrowNarrowRight } from '@tabler/icons-react';
 import BasicModal from '@/components/core/modal/basic-modal';
 import { useTranslation } from '@/lib/i18n';
 
@@ -35,12 +36,12 @@ const ConvertHintModal = ({
     onClose();
   };
 
-  const getConversionText = () =>
-    displayConfig.latexDelimiter === LatexDelimiter.BRACKET
-      ? t('bracket2dollar')
-      : t('dollar2bracket');
-
-  const getDelimiterSymbol = (delimiter) => (delimiter === LatexDelimiter.BRACKET ? '()' : '$');
+  const getDelimiterSymbol = (delimiter) =>
+    delimiter === LatexDelimiter.BRACKET ? (
+      <IconParentheses className="w-5 h-5" />
+    ) : (
+      <IconCurrencyDollar className="w-5 h-5" />
+    );
 
   const getContentText = () =>
     t('content', {
@@ -61,39 +62,30 @@ const ConvertHintModal = ({
       onConfirm={handleConvert}
       cancelLabel={t('cancel')}
       confirmLabel={t('confirm')}
+      size="sm"
     >
-      <div className="p-4 text-center" id="convert-hint-description">
-        <h2 className="text-xl font-bold mb-4">{getConversionText()}</h2>
-        <div
-          className="flex justify-center items-center mb-4"
-          aria-label={t('conversionDescription')}
-        >
-          <div
-            className="bg-gray-200 p-2 rounded mr-2"
-            aria-label={`${t('currentDelimiter')}: ${displayConfig.latexDelimiter}`}
-          >
-            {getDelimiterSymbol(displayConfig.latexDelimiter)}
-          </div>
-          <span className="text-2xl" aria-hidden="true">
-            →
-          </span>
-          <div
-            className="bg-gray-200 p-2 rounded ml-2"
-            aria-label={`${t('newDelimiter')}: ${
-              displayConfig.latexDelimiter === LatexDelimiter.BRACKET ? t('dollar') : t('bracket')
-            }`}
-          >
-            {getDelimiterSymbol(
-              displayConfig.latexDelimiter === LatexDelimiter.BRACKET
-                ? LatexDelimiter.DOLLAR
-                : LatexDelimiter.BRACKET
-            )}
-          </div>
+      <div className="flex justify-center items-center mb-2" aria-hidden="true">
+        <div className="bg-bg-main p-1 rounded-sm text-text-primary">
+          {getDelimiterSymbol(displayConfig.latexDelimiter)}
+        </div>
+        <IconArrowNarrowRight className="w-5 h-5 mx-1 text-text-primary" aria-hidden="true" />
+        <div className="bg-bg-main p-1 rounded-sm text-text-primary">
+          {getDelimiterSymbol(
+            displayConfig.latexDelimiter === LatexDelimiter.BRACKET
+              ? LatexDelimiter.DOLLAR
+              : LatexDelimiter.BRACKET
+          )}
         </div>
-        <p className="mb-4" style={{ whiteSpace: 'pre-line' }}>
-          {getContentText()}
-        </p>
       </div>
+      <div className="sr-only">
+        <p>{`${t('currentDelimiter')}: ${
+          displayConfig.latexDelimiter === LatexDelimiter.BRACKET ? t('bracket') : t('dollar')
+        }`}</p>
+        <p>{`${t('newDelimiter')}: ${
+          displayConfig.latexDelimiter === LatexDelimiter.BRACKET ? t('dollar') : t('bracket')
+        }`}</p>
+      </div>
+      <p className="text-sm text-text-primary leading-[1.4] text-center">{getContentText()}</p>
     </BasicModal>
   );
 };
diff --git a/src/components/home/setting-modal/index.js b/src/components/home/setting-modal/index.js
index 84017dd..4e1e374 100644
--- a/src/components/home/setting-modal/index.js
+++ b/src/components/home/setting-modal/index.js
@@ -32,55 +32,53 @@ const SettingModal = ({ isOpen, onClose, onSubmit, displayConfig, exportType, se
       cancelLabel={t('cancel')}
       confirmLabel={t('submit')}
     >
-      <div className="md:w-[30rem] w-[15rem]">
-        <form>
-          {optionGroup.map(({ configName, configLabel, options }) => {
-            return (
-              <div key={configName} className="grid grid-cols-12 items-center gap-4 p-3">
-                <label className="col-span-4 text-lg font-semibold text-gray-900">
-                  {configLabel}：
-                </label>
-                <fieldset className="col-span-8">
-                  <legend className="sr-only">{configLabel}</legend>
-                  <select
-                    className="block w-full text-md bg-cyanLight border-gray-300 rounded-md focus:outline-none focus:ring-indigo-600 sm:text-sm p-3"
-                    value={localConfig[configName]}
-                    onChange={(e) => {
-                      updateLocalConfig(configName, e.target.value);
-                    }}
-                    aria-label={configLabel}
-                  >
-                    {options.map(({ value, label }) => (
-                      <option key={value} value={value}>
-                        {label}
-                      </option>
-                    ))}
-                  </select>
-                </fieldset>
-              </div>
-            );
-          })}
-          <div className="grid grid-cols-12 items-center gap-4 p-3">
-            <label className="col-span-4 text-lg font-semibold text-gray-900">
-              {t('exportType')}：
-            </label>
-            <fieldset className="col-span-8">
-              <legend className="sr-only">{t('exportType')}</legend>
-              <select
-                className="block w-full text-md bg-cyanLight border-gray-300 rounded-md focus:outline-none focus:ring-indigo-600 sm:text-sm p-3"
-                value={exportType}
-                onChange={(e) => {
-                  setExportType(e.target.value);
-                }}
-                aria-label={t('exportType')}
-              >
-                <option value="zip">{t('zip')}</option>
-                <option value="a8m">{t('a8m')}</option>
-              </select>
-            </fieldset>
-          </div>
-        </form>
-      </div>
+      <form>
+        {optionGroup.map(({ configName, configLabel, options }) => {
+          return (
+            <div key={configName} className="grid grid-cols-12 items-center gap-4 p-3">
+              <label className="col-span-4 text-lg font-semibold text-gray-900">
+                {configLabel}：
+              </label>
+              <fieldset className="col-span-8">
+                <legend className="sr-only">{configLabel}</legend>
+                <select
+                  className="block w-full text-md bg-cyanLight border-gray-300 rounded-md focus:outline-none focus:ring-indigo-600 sm:text-sm p-3"
+                  value={localConfig[configName]}
+                  onChange={(e) => {
+                    updateLocalConfig(configName, e.target.value);
+                  }}
+                  aria-label={configLabel}
+                >
+                  {options.map(({ value, label }) => (
+                    <option key={value} value={value}>
+                      {label}
+                    </option>
+                  ))}
+                </select>
+              </fieldset>
+            </div>
+          );
+        })}
+        <div className="grid grid-cols-12 items-center gap-4 p-3">
+          <label className="col-span-4 text-lg font-semibold text-gray-900">
+            {t('exportType')}：
+          </label>
+          <fieldset className="col-span-8">
+            <legend className="sr-only">{t('exportType')}</legend>
+            <select
+              className="block w-full text-md bg-cyanLight border-gray-300 rounded-md focus:outline-none focus:ring-indigo-600 sm:text-sm p-3"
+              value={exportType}
+              onChange={(e) => {
+                setExportType(e.target.value);
+              }}
+              aria-label={t('exportType')}
+            >
+              <option value="zip">{t('zip')}</option>
+              <option value="a8m">{t('a8m')}</option>
+            </select>
+          </fieldset>
+        </div>
+      </form>
     </BasicModal>
   );
 };
diff --git a/src/components/home/tip-modal.js b/src/components/home/tip-modal.js
index ce67906..663dc52 100644
--- a/src/components/home/tip-modal.js
+++ b/src/components/home/tip-modal.js
@@ -17,15 +17,14 @@ const TipModal = ({ isOpen, onClose }) => {
       onClose={onClose}
       onConfirm={onClose}
       confirmLabel={t('cancelLabel')}
+      size="sm"
     >
-      <div>
-        {tips.map(({ title, content }, index) => (
-          <div key={index} className="mb-4 text-left text-lg">
-            <h4 className="text-base font-semibold leading-6 text-gray-900 mb-1">{title}</h4>
-            <p className="text-base">{content}</p>
-          </div>
-        ))}
-      </div>
+      {tips.map(({ title, content }, index) => (
+        <div key={index} className="mb-6 text-center">
+          <h4 className="text-sm leading-[1.5] text-text-primary mb-2">{title}</h4>
+          <p className="text-sm leading-[1.4] text-text-primary">{content}</p>
+        </div>
+      ))}
     </BasicModal>
   );
 };

From c9f4243fb859908f7efbe9113867e7ec5e691d85 Mon Sep 17 00:00:00 2001
From: Wendy Yuchen Sun <wendyyuchensun@gmail.com>
Date: Sun, 5 Apr 2026 19:51:27 +0800
Subject: [PATCH 5/5] refactor: narrow header props to title/onTitleChange and
 add propTypes

---
 src/components/header/index.js | 14 +++++++++++---
 src/pages/home/home.js         |  4 ++--
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/header/index.js b/src/components/header/index.js
index a5c2427..70b4a3e 100644
--- a/src/components/header/index.js
+++ b/src/components/header/index.js
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import PropTypes from 'prop-types';
 
 import { ReactComponent as A8mLogo } from '@/components/svg/a8m-logo.svg';
 import Menu from './menu';
@@ -8,7 +9,7 @@ import { IconBulb } from '@tabler/icons-react';
 import { useTranslation } from '@/lib/i18n';
 import Button from '@/components/core/button';
 
-const Header = ({ onImportClick, onExportClick, displayConfig, setDisplayConfig }) => {
+const Header = ({ onImportClick, onExportClick, title, onTitleChange }) => {
   const t = useTranslation('home');
   const [showTipModal, setShowTipModal] = useState(false);
 
@@ -18,13 +19,13 @@ const Header = ({ onImportClick, onExportClick, displayConfig, setDisplayConfig
         <h1 className="sr-only">Access8Math</h1>
         <A8mLogo aria-hidden="true" />
         <input
-          value={displayConfig.title}
+          value={title}
           type="text"
           style={{ outline: 'none' }}
           className="grow max-w-[280px] text-text-primary placeholder-text-placeholder text-xl font-medium leading-[1.4] pb-2 border-b-2 border-primary"
           placeholder={t('pleaseInputTitle')}
           aria-label={t('pleaseInputTitle')}
-          onChange={(e) => setDisplayConfig({ title: e.target.value })}
+          onChange={(e) => onTitleChange(e.target.value)}
         />
       </div>
       <div className="flex items-center gap-3">
@@ -50,4 +51,11 @@ const Header = ({ onImportClick, onExportClick, displayConfig, setDisplayConfig
   );
 };
 
+Header.propTypes = {
+  onImportClick: PropTypes.func.isRequired,
+  onExportClick: PropTypes.func.isRequired,
+  title: PropTypes.string.isRequired,
+  onTitleChange: PropTypes.func.isRequired,
+};
+
 export default Header;
diff --git a/src/pages/home/home.js b/src/pages/home/home.js
index 8c12aed..bd9bb67 100644
--- a/src/pages/home/home.js
+++ b/src/pages/home/home.js
@@ -319,8 +319,8 @@ export default function Home() {
       <Header
         onImportClick={importClick}
         onExportClick={() => setShowSettingModal(true)}
-        displayConfig={displayConfig}
-        setDisplayConfig={setDisplayConfig}
+        title={displayConfig.title}
+        onTitleChange={(title) => setDisplayConfig({ title })}
       />
       <main className="pt-[72px] flex flex-col md:flex-row overflow-x-hidden overflow-y-auto">
         {/* Left side input panel */}