From 00813957d6dae663f5aef70c380a39ca62101eb3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=B2=81=E6=A0=91=E4=BA=BA?= <lu.shuren@um-react.app>
Date: Thu, 26 Sep 2024 21:02:42 +0100
Subject: [PATCH] feat: make unsaved settings obvious

---
 src/features/settings/Settings.tsx |  6 +++---
 src/tabs/MainTab.tsx               | 26 +++++++++++++++++++++++++-
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/features/settings/Settings.tsx b/src/features/settings/Settings.tsx
index 08180dd..7209143 100644
--- a/src/features/settings/Settings.tsx
+++ b/src/features/settings/Settings.tsx
@@ -1,8 +1,8 @@
 import {
-  chakra,
   Box,
   Button,
   Center,
+  chakra,
   Flex,
   HStack,
   Icon,
@@ -19,9 +19,9 @@ import {
   TabPanels,
   Tabs,
   Text,
-  VStack,
   useBreakpointValue,
   useToast,
+  VStack,
 } from '@chakra-ui/react';
 import { PanelQMCv2Key } from './panels/PanelQMCv2Key';
 import { useState } from 'react';
@@ -145,7 +145,7 @@ export function Settings() {
                       onClick={handleResetSettings}
                       colorScheme="red"
                       variant="ghost"
-                      title="放弃未储存的更改，将设定还原为储存前的状态。"
+                      title="放弃未储存的更改，将设定还原未储存前的状态。"
                       aria-label="放弃未储存的更改"
                     />
                     <Button onClick={handleApplySettings}>保存</Button>
diff --git a/src/tabs/MainTab.tsx b/src/tabs/MainTab.tsx
index 8027d12..e6dc61d 100644
--- a/src/tabs/MainTab.tsx
+++ b/src/tabs/MainTab.tsx
@@ -1,12 +1,36 @@
-import { Box, VStack } from '@chakra-ui/react';
+import { Alert, AlertIcon, Box, Button, Flex, Text, VStack } from '@chakra-ui/react';
 import { SelectFile } from '../components/SelectFile';
 
 import { FileListing } from '~/features/file-listing/FileListing';
+import { useAppDispatch, useAppSelector } from '~/hooks.ts';
+import { selectIsSettingsNotSaved } from '~/features/settings/settingsSelector.ts';
+import { commitStagingChange } from '~/features/settings/settingsSlice.ts';
 
 export function MainTab() {
+  const dispatch = useAppDispatch();
+  const isSettingsNotSaved = useAppSelector(selectIsSettingsNotSaved);
+  const onClickSaveSettings = () => {
+    dispatch(commitStagingChange());
+  };
+
   return (
     <Box h="full" w="full" pt="4">
       <VStack gap="3">
+        {isSettingsNotSaved && (
+          <Alert borderRadius={7} maxW={400} status="warning">
+            <AlertIcon />
+            <Flex flexDir="row" alignItems="center" flexGrow={1} justifyContent="space-between">
+              <Text m={0}>
+                有尚未储存的设置，
+                <br />
+                设定将在保存后生效
+              </Text>
+              <Button type="button" ml={3} size="md" onClick={onClickSaveSettings}>
+                立即储存
+              </Button>
+            </Flex>
+          </Alert>
+        )}
         <SelectFile />
 
         <Box w="full">