增加Scheme详情页面。

src/pages/SchemeDetail.module.css

@@ -1,5 +1,10 @@
 @layer pages {
   .scheme_detail_layout {
+    height: 100%;
     padding: calc(var(--spacing) * 4) calc(var(--spacing) * 8);
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--spacing-m);
   }
 }

src/pages/SchemeDetail.tsx

@@ -1,8 +1,10 @@
 import { isNil, set } from 'lodash-es';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { EditableDescription } from '../components/EditableDescription';
 import { EditableTitle } from '../components/EditableTitle';
+import { Tab } from '../components/Tab';
+import { SchemeView } from '../page-components/scheme/SchemeView';
 import { useScheme, useUpdateScheme } from '../stores/schemes';
 import styles from './SchemeDetail.module.css';
 
@@ -11,6 +13,7 @@ export function SchemeDetail() {
   const scheme = useScheme(id);
   const navigate = useNavigate();
   const updateScheme = useUpdateScheme(id);
+  const [showScheme, setShowScheme] = useState<'light' | 'dark'>('light');
 
   const updateTitle = useCallback(
     (newTitle: string) => {
@@ -41,6 +44,14 @@ export function SchemeDetail() {
     <div className={styles.scheme_detail_layout}>
       <EditableTitle title={scheme?.name} onChange={updateTitle} />
       <EditableDescription content={scheme?.description} onChange={updateDescription} />
+      <Tab
+        tabs={[
+          { title: 'Light Scheme', id: 'light' },
+          { title: 'Dark Scheme', id: 'dark' },
+        ]}
+        onActive={(tabId) => setShowScheme(tabId as 'light' | 'dark')}
+      />
+      <SchemeView scheme={scheme?.[`${showScheme}Scheme`]} />
     </div>
   );
 }