增加方案列表的布局。

src/page-components/schemes/SchemeList.module.css

@@ -0,0 +1,33 @@
+@layer pages {
+  .scheme_list {
+    max-width: calc(var(--spacing) * 125);
+    flex: 1 1 calc(var(--spacing) * 125);
+    padding: calc(var(--spacing) * 4) 0;
+    box-shadow: 2px 0 8px oklch(from var(--color-black) l c h / 65%);
+    z-index: 40;
+    .operates_buttons {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      align-items: center;
+      gap: calc(var(--spacing) * 2);
+      padding: calc(var(--spacing) * 4) calc(var(--spacing) * 6);
+    }
+    .scheme_items {
+      flex-grow: 1;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+    }
+    .empty_prompt {
+      padding-inline: calc(var(--spacing) * 6);
+      padding-block: calc(var(--spacing) * 4);
+      font-size: var(--font-size-s);
+      font-style: italic;
+      text-align: center;
+      color: var(--color-neutral-focus);
+    }
+  }
+}

src/page-components/schemes/SchemeList.tsx

@@ -0,0 +1,59 @@
+import { Icon } from '@iconify/react/dist/iconify.js';
+import dayjs from 'dayjs';
+import { useAtomValue } from 'jotai';
+import { isEmpty, isEqual } from 'lodash-es';
+import { useMemo } from 'react';
+import { Link } from 'react-router-dom';
+import { activeSchemeAtom, useSchemeList } from '../../stores/schemes';
+import styles from './SchemeList.module.css';
+
+function OperateButtons() {
+  return (
+    <div className={styles.operates_buttons}>
+      <Link to="new" className="button">
+        New Scheme
+      </Link>
+    </div>
+  );
+}
+
+type SchemeItemProps = {
+  item: ReturnType<typeof useSchemeList>[number];
+};
+
+function SchemeItem({ item }: SchemeItemProps) {
+  const activedScheme = useAtomValue(activeSchemeAtom);
+  const isActived = useMemo(() => isEqual(activedScheme, item.id), [activedScheme, item.id]);
+
+  return (
+    <div>
+      <div>{item.name}</div>
+      <div>
+        <div>created at {dayjs(item.createdAt).format('YYYY-MM-DD')}</div>
+        <div>{isActived && <Icon icon="tabler:check" />}</div>
+      </div>
+    </div>
+  );
+}
+
+function SchemesItems() {
+  const schemes = useSchemeList();
+
+  return (
+    <div className={styles.scheme_items}>
+      {isEmpty(schemes) && <div className={styles.empty_prompt}>Create a scheme first.</div>}
+      {schemes.map((item) => (
+        <SchemeItem key={item.id} item={item} />
+      ))}
+    </div>
+  );
+}
+
+export function SchemeList() {
+  return (
+    <div className={styles.scheme_list}>
+      <OperateButtons />
+      <SchemesItems />
+    </div>
+  );
+}