From 5a1454e6c2f63016fd653ad04f4a70bea836bd59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Sun, 20 Jul 2025 08:24:56 +0800
Subject: [PATCH] =?UTF-8?q?feat(ContextMenu):=20=E6=B7=BB=E5=8A=A0Q2Scheme?=
 =?UTF-8?q?Menu=E7=BB=84=E4=BB=B6=E6=94=AF=E6=8C=81=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E9=A2=9C=E8=89=B2=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ContextMenu.tsx | 76 ++++++++++++++++++++++++++++++++++
 1 file changed, 76 insertions(+)

diff --git a/src/components/ContextMenu.tsx b/src/components/ContextMenu.tsx
index 61fc499..e580c64 100644
--- a/src/components/ContextMenu.tsx
+++ b/src/components/ContextMenu.tsx
@@ -16,6 +16,7 @@ import {
   MaterialDesign3DynamicSchemeSource,
   MaterialDesign3SchemeSource,
 } from '../material-3-scheme';
+import { Q2SchemeSource } from '../q-2-scheme';
 import { QSchemeSource } from '../q-scheme';
 import { currentPickedColor } from '../stores/colors';
 import { activeSchemeAtom, useActiveScheme, useUpdateScheme } from '../stores/schemes';
@@ -101,6 +102,79 @@ const QSchemeMenu: FC<ContextMenuItemProps> = ({ color, afterClick }) => {
   );
 };
 
+const Q2SchemeMenu: FC<ContextMenuBodyProps> = ({ color, afterClick }) => {
+  const { showToast } = useNotification();
+  const activeSchemeId = useAtomValue(activeSchemeAtom);
+  const updateScheme = useUpdateScheme(activeSchemeId);
+  const updateSchemeContent = useCallback(
+    (content: keyof QSchemeSource) => {
+      updateScheme((prev) => {
+        prev.schemeStorage.source[content] = color;
+        return prev;
+      });
+      showToast(
+        NotificationType.SUCCESS,
+        `${capitalize(content)} color in active scheme updated.`,
+        'tabler:settings-up',
+        3000,
+      );
+      afterClick?.();
+    },
+    [color, activeSchemeId, updateScheme],
+  );
+  const addCustomColor = useCallback(() => {
+    updateScheme((prev) => {
+      const source = prev.schemeStorage.source as Q2SchemeSource;
+      const colorAmount = size(source.custom_colors);
+      source.custom_colors[`Custom Color ${colorAmount + 1}`] = color;
+      return prev;
+    });
+
+    showToast(NotificationType.SUCCESS, `New color entry added.`, 'tabler:settings-up', 3000);
+
+    afterClick?.();
+  }, [color, activeSchemeId, updateScheme]);
+
+  return (
+    <>
+      <hr />
+      <div className={styles.menu_item} onClick={() => updateSchemeContent('primary')}>
+        Set as Primary color
+      </div>
+      <div className={styles.menu_item} onClick={() => updateSchemeContent('secondary')}>
+        Set as Secondary color
+      </div>
+      <div className={styles.menu_item} onClick={() => updateSchemeContent('tertiary')}>
+        Set as Tertiary color
+      </div>
+      <div className={styles.menu_item} onClick={() => updateSchemeContent('accent')}>
+        Set as Accent color
+      </div>
+      <div className={styles.menu_item} onClick={() => updateSchemeContent('danger')}>
+        Set as Danger color
+      </div>
+      <div className={styles.menu_item} onClick={() => updateSchemeContent('success')}>
+        Set as Success color
+      </div>
+      <div className={styles.menu_item} onClick={() => updateSchemeContent('warning')}>
+        Set as Warn color
+      </div>
+      <div className={styles.menu_item} onClick={() => updateSchemeContent('info')}>
+        Set as Info color
+      </div>
+      <div className={styles.menu_item} onClick={() => updateSchemeContent('foreground')}>
+        Set as Foreground color
+      </div>
+      <div className={styles.menu_item} onClick={() => updateSchemeContent('background')}>
+        Set as Background color
+      </div>
+      <div className={styles.menu_item} onClick={addCustomColor}>
+        Add to Custom colors
+      </div>
+    </>
+  );
+};
+
 const SwatchSchemeMenu: FC<ContextMenuItemProps> = ({ color, afterClick }) => {
   const { showToast } = useNotification();
   const activeSchemeId = useAtomValue(activeSchemeAtom);
@@ -253,6 +327,8 @@ export const ContextMenuBody: FC<ContextMenuBodyProps> = ({ color, afterClick, x
     switch (activeScheme?.type) {
       case 'q_scheme':
         return <QSchemeMenu {...sharedProps} />;
+      case 'q_2_scheme':
+        return <Q2SchemeMenu {...sharedProps} />;
       case 'swatch_scheme':
         return <SwatchSchemeMenu {...sharedProps} />;
       case 'material_2':