From 20757a789a52bf926516fe386764ba4b25fc5aff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Fri, 24 Jan 2025 15:17:07 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E4=B8=8D=E5=8F=AF=E8=AF=86?=
 =?UTF-8?q?=E5=88=ABScheme=E7=9A=84=E8=AD=A6=E5=91=8A=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/models.ts                                         | 2 +-
 src/page-components/scheme/CorruptedScheme.module.css | 6 ++++++
 src/page-components/scheme/CorruptedScheme.tsx        | 8 ++++++++
 src/page-components/scheme/UnknownScheme.tsx          | 3 ---
 src/pages/SchemeDetail.tsx                            | 4 ++--
 5 files changed, 17 insertions(+), 6 deletions(-)
 create mode 100644 src/page-components/scheme/CorruptedScheme.module.css
 create mode 100644 src/page-components/scheme/CorruptedScheme.tsx
 delete mode 100644 src/page-components/scheme/UnknownScheme.tsx

diff --git a/src/models.ts b/src/models.ts
index d025636..a3f4094 100644
--- a/src/models.ts
+++ b/src/models.ts
@@ -47,7 +47,7 @@ export function schemeType(
   const useShort = short ?? false;
   const foundType = find(SchemeTypeOptions, { value }) as SchemeTypeOption | undefined;
   if (isNil(foundType)) {
-    return null;
+    return 'CORRUPTED';
   }
   return useShort ? foundType.short : foundType.label;
 }
diff --git a/src/page-components/scheme/CorruptedScheme.module.css b/src/page-components/scheme/CorruptedScheme.module.css
new file mode 100644
index 0000000..9090320
--- /dev/null
+++ b/src/page-components/scheme/CorruptedScheme.module.css
@@ -0,0 +1,6 @@
+@layer pages {
+  .corrupted {
+    font-size: var(--font-size-xl);
+    color: var(--color-danger);
+  }
+}
diff --git a/src/page-components/scheme/CorruptedScheme.tsx b/src/page-components/scheme/CorruptedScheme.tsx
new file mode 100644
index 0000000..4ac2635
--- /dev/null
+++ b/src/page-components/scheme/CorruptedScheme.tsx
@@ -0,0 +1,8 @@
+import styles from './CorruptedScheme.module.css';
+export function CorruptedScheme() {
+  return (
+    <div className="center">
+      <div className={styles.corrupted}>Unrecognizable or corrupted scheme</div>
+    </div>
+  );
+}
diff --git a/src/page-components/scheme/UnknownScheme.tsx b/src/page-components/scheme/UnknownScheme.tsx
deleted file mode 100644
index 6a52859..0000000
--- a/src/page-components/scheme/UnknownScheme.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export function UnknownScheme() {
-  return <div>Unknown or currupted scheme</div>;
-}
diff --git a/src/pages/SchemeDetail.tsx b/src/pages/SchemeDetail.tsx
index b374563..4a90fca 100644
--- a/src/pages/SchemeDetail.tsx
+++ b/src/pages/SchemeDetail.tsx
@@ -5,11 +5,11 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { EditableDescription } from '../components/EditableDescription';
 import { EditableTitle } from '../components/EditableTitle';
 import { SchemeSign } from '../components/SchemeSign';
+import { CorruptedScheme } from '../page-components/scheme/CorruptedScheme';
 import { M2Scheme } from '../page-components/scheme/M2Scheme';
 import { M3Scheme } from '../page-components/scheme/M3Scheme';
 import { QScheme } from '../page-components/scheme/QScheme';
 import { SwatchScheme } from '../page-components/scheme/SwatchScheme';
-import { UnknownScheme } from '../page-components/scheme/UnknownScheme';
 import { useScheme, useUpdateScheme } from '../stores/schemes';
 import styles from './SchemeDetail.module.css';
 
@@ -48,7 +48,7 @@ export function SchemeDetail() {
       case 'material_3':
         return <M3Scheme />;
       default:
-        return <UnknownScheme />;
+        return <CorruptedScheme />;
     }
   }, [scheme]);