Import / Export Feishin Settings (#1163)

* Create a shared DragDrop Zone

- This zone allows the dropping of files
- The zone allows validation by parent
- The zone allows customisation like icon shown

* Import Settings

- Ability to import settings from a JSON file
- Validation to ensure file compatibility
- Visualiser for viewing string differences

* i18n

- Moved all hardcoded values to be en localised

* Zod / Validation

This commit contains the code to move settings to using ZOD, the reason for this is so that we can validate the settings schema that is being imported.

This commit also adds various validation and transforms to ensure the settings being reimported match values we expect.

I also removed the original crude validation and replaced it with the new ZOD parser that will handle this for us.

Finally the "styles-settings" component will listen to any external content updates and update its value, the reasoning is the external import wouldn't update the existing value.


- Split Settings schema into two parts, schema that is validated on import and schema that is not
- Schemas are merged to make the full SettingsStateSchema

* Migrate during validation

- Migration is done as part of validation
- Updated the store version to v10 as there has been changes to the settings
- Migrate will now add the fields from v9 to v10


- the build was failing due to ids not being mapped to their enum values

---------

Co-authored-by: Jeff <42182408+jeffvli@users.noreply.github.com>

src/renderer/features/settings/components/advanced/styles-settings.tsx

@@ -1,5 +1,5 @@
 import { closeAllModals, openModal } from '@mantine/modals';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { SettingsOptions } from '/@/renderer/features/settings/components/settings-option';
@@ -40,6 +40,13 @@ export const StylesSettings = () => {
         closeAllModals();
     };
 
+    useEffect(() => {
+        if (content !== css) {
+            setCss(content);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- Reason: This is to only fire if an external source updates the stores css.content
+    }, [content]);
+
     const openConfirmModal = () => {
         openModal({
             children: (